osi-cards-lib 1.0.0

package/fesm2022/osi-cards-lib.mjs

@@ -0,0 +1,3960 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, NgZone, NgModule, EventEmitter, ChangeDetectorRef, Output, Input, ChangeDetectionStrategy, Component, ViewChildren, ViewChild, ElementRef } from '@angular/core';
+import { BehaviorSubject, Subject, fromEvent, takeUntil, interval } from 'rxjs';
+import * as i2 from 'lucide-angular';
+import { Zap, XCircle, Wrench, Type, Video, User, UserCheck, Users, Twitter, Trophy, TrendingUp, TrendingDown, Timer, Target, Star, Tag, Sparkles, Shield, Settings, Save, ShoppingCart, Share2, RefreshCw, Quote, PieChart, Phone, Package, Minus, Minimize2, MessageCircle, Maximize2, MapPin, Mail, List, Lightbulb, Linkedin, Instagram, Info, HelpCircle, Hash, Handshake, Grid, GitBranch, Globe, Folder, FileText, Download, DollarSign, Facebook, ExternalLink, Calculator, Code2, Clock, Circle, ChevronRight, Check, CheckCircle2, CalendarX, CalendarPlus, CalendarCheck, Calendar, Building, Briefcase, BookOpen, BarChart3, Box, Award, ArrowUp, ArrowDown, ArrowRight, AlertCircle, Activity, LucideAngularModule } from 'lucide-angular';
+import * as i1 from '@angular/common';
+import { CommonModule, ViewportScroller } from '@angular/common';
+import { trigger, transition, style, animate } from '@angular/animations';
+
+class CardTypeGuards {
+    static isAICardConfig(obj) {
+        if (!obj || typeof obj !== 'object')
+            return false;
+        const card = obj;
+        return (typeof card['cardTitle'] === 'string' &&
+            Array.isArray(card['sections']) &&
+            card['cardTitle'].length > 0);
+    }
+    static isCardSection(obj) {
+        if (!obj || typeof obj !== 'object')
+            return false;
+        const section = obj;
+        return typeof section['title'] === 'string' && typeof section['type'] === 'string';
+    }
+    static isCardField(obj) {
+        if (!obj || typeof obj !== 'object')
+            return false;
+        // CardField can have any properties, just needs to be an object
+        return true;
+    }
+    /**
+     * Type guard to check if an action is a valid mail action
+     * Validates that required fields (contact, subject, body) are present
+     */
+    static isMailAction(obj) {
+        if (!obj || typeof obj !== 'object')
+            return false;
+        const action = obj;
+        // Must have type 'mail'
+        if (action['type'] !== 'mail')
+            return false;
+        // Must have email property
+        if (!action['email'] || typeof action['email'] !== 'object')
+            return false;
+        const email = action['email'];
+        // Must have contact with name, email, and role
+        if (!email['contact'] || typeof email['contact'] !== 'object')
+            return false;
+        const contact = email['contact'];
+        if (typeof contact['name'] !== 'string' ||
+            typeof contact['email'] !== 'string' ||
+            typeof contact['role'] !== 'string') {
+            return false;
+        }
+        // Must have subject
+        if (typeof email['subject'] !== 'string')
+            return false;
+        // Must have body
+        if (typeof email['body'] !== 'string')
+            return false;
+        return true;
+    }
+}
+class CardUtils {
+    static safeString(value, maxLength = 1000) {
+        if (typeof value === 'string') {
+            return value.substring(0, maxLength);
+        }
+        if (typeof value === 'number' || typeof value === 'boolean') {
+            return String(value);
+        }
+        return '';
+    }
+    static safeNumber(value, defaultValue = 0) {
+        if (typeof value === 'number') {
+            return value;
+        }
+        if (typeof value === 'string') {
+            const parsed = parseFloat(value);
+            return isNaN(parsed) ? defaultValue : parsed;
+        }
+        return defaultValue;
+    }
+    static generateId(prefix = 'item') {
+        return `${prefix}_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
+    }
+    static ensureSectionIds(sections) {
+        return sections.map((section, sectionIndex) => ({
+            ...section,
+            id: section.id || this.generateId(`section_${sectionIndex}`),
+            fields: section.fields ? this.ensureFieldIds(section.fields, sectionIndex) : undefined,
+            items: section.items ? this.ensureItemIds(section.items, sectionIndex) : undefined
+        }));
+    }
+    static ensureFieldIds(fields, sectionIndex) {
+        return fields.map((field, fieldIndex) => ({
+            ...field,
+            id: field.id || this.generateId(`field_${sectionIndex}_${fieldIndex}`)
+        }));
+    }
+    static ensureItemIds(items, sectionIndex) {
+        return items.map((item, itemIndex) => ({
+            ...item,
+            id: item.id || this.generateId(`item_${sectionIndex}_${itemIndex}`)
+        }));
+    }
+    static sanitizeCardConfig(config) {
+        if (!CardTypeGuards.isAICardConfig(config)) {
+            return null;
+        }
+        return {
+            ...config,
+            cardTitle: this.safeString(config.cardTitle, 200),
+            cardSubtitle: config.cardSubtitle ? this.safeString(config.cardSubtitle, 500) : undefined,
+            sections: this.ensureSectionIds(config.sections.filter(CardTypeGuards.isCardSection)),
+            actions: config.actions?.map((action) => ({ ...action, id: action.id ?? this.generateId('action') }))
+        };
+    }
+}
+
+class IconService {
+    constructor() {
+        this.iconMap = {
+            // Business & Finance
+            'revenue': 'dollar-sign',
+            'profit': 'trending-up',
+            'expenses': 'trending-down',
+            'budget': 'pie-chart',
+            'sales': 'shopping-cart',
+            'cost': 'calculator',
+            'price': 'tag',
+            'value': 'star',
+            'growth': 'arrow-up',
+            'decline': 'arrow-down',
+            // Contact & Communication
+            'email': 'mail',
+            'phone': 'phone',
+            'address': 'map-pin',
+            'website': 'globe',
+            'linkedin': 'linkedin',
+            'twitter': 'twitter',
+            'facebook': 'facebook',
+            'instagram': 'instagram',
+            'contact': 'user',
+            'message': 'message-circle',
+            // Time & Dates
+            'date': 'calendar',
+            'time': 'clock',
+            'deadline': 'calendar-x',
+            'schedule': 'calendar-check',
+            'created': 'calendar-plus',
+            'updated': 'refresh-cw',
+            'duration': 'timer',
+            // Status & Progress
+            'status': 'info',
+            'progress': 'activity',
+            'completed': 'check-circle',
+            'pending': 'clock',
+            'failed': 'x-circle',
+            'warning': 'alert-triangle',
+            'success': 'check',
+            'error': 'alert-circle',
+            // Business Operations
+            'company': 'building',
+            'department': 'users',
+            'team': 'users',
+            'manager': 'user-check',
+            'employee': 'user',
+            'position': 'briefcase',
+            'role': 'shield',
+            'title': 'tag',
+            // Products & Services
+            'product': 'package',
+            'service': 'wrench',
+            'category': 'folder',
+            'type': 'type',
+            'brand': 'award',
+            'model': 'box',
+            'version': 'git-branch',
+            // Metrics & Analytics
+            'metric': 'bar-chart',
+            'analytics': 'trending-up',
+            'performance': 'zap',
+            'efficiency': 'target',
+            'quality': 'award',
+            'rating': 'star',
+            'score': 'hash',
+            'rank': 'trending-up',
+            // Default fallbacks
+            'default': 'circle',
+            'unknown': 'help-circle'
+        };
+        this.classMap = {
+            // Business & Finance
+            'revenue': 'text-green-500',
+            'profit': 'text-green-600',
+            'expenses': 'text-red-500',
+            'budget': 'text-blue-500',
+            'sales': 'text-purple-500',
+            'cost': 'text-orange-500',
+            'price': 'text-yellow-600',
+            'value': 'text-amber-500',
+            'growth': 'text-green-500',
+            'decline': 'text-red-500',
+            // Contact & Communication
+            'email': 'text-blue-500',
+            'phone': 'text-green-500',
+            'address': 'text-red-500',
+            'website': 'text-blue-600',
+            'linkedin': 'text-blue-700',
+            'twitter': 'text-sky-500',
+            'facebook': 'text-blue-600',
+            'instagram': 'text-pink-500',
+            'contact': 'text-gray-600',
+            'message': 'text-blue-500',
+            // Status & Progress
+            'status': 'text-blue-500',
+            'progress': 'text-orange-500',
+            'completed': 'text-green-500',
+            'pending': 'text-yellow-500',
+            'failed': 'text-red-500',
+            'warning': 'text-amber-500',
+            'success': 'text-green-500',
+            'error': 'text-red-500',
+            // Default
+            'default': 'text-gray-500'
+        };
+    }
+    getFieldIcon(fieldName) {
+        const normalizedName = fieldName.toLowerCase().replace(/[^a-z0-9]/g, '');
+        // Try exact match first
+        if (this.iconMap[normalizedName]) {
+            return this.iconMap[normalizedName];
+        }
+        // Try partial matches
+        for (const [key, icon] of Object.entries(this.iconMap)) {
+            if (normalizedName.includes(key) || key.includes(normalizedName)) {
+                return icon;
+            }
+        }
+        return this.iconMap['default'];
+    }
+    getFieldIconClass(fieldName) {
+        const normalizedName = fieldName.toLowerCase().replace(/[^a-z0-9]/g, '');
+        // Try exact match first
+        if (this.classMap[normalizedName]) {
+            return this.classMap[normalizedName];
+        }
+        // Try partial matches
+        for (const [key, className] of Object.entries(this.classMap)) {
+            if (normalizedName.includes(key) || key.includes(normalizedName)) {
+                return className;
+            }
+        }
+        return this.classMap['default'];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * Column span thresholds for each section type
+ * These define when a section should span 2 or 3 columns based on content density
+ * Lower thresholds = sections span 2 columns more easily (with less content)
+ *
+ * Threshold calculation: fieldCount + itemCount + descriptionDensity >= threshold
+ * - two: minimum score to span 2 columns
+ * - three: minimum score to span 3 columns (optional)
+ */
+const SECTION_COL_SPAN_THRESHOLDS = {
+    // Overview sections typically have 6-10 key-value pairs, should span 2 columns easily
+    overview: { two: 5, three: 10 },
+    // Charts and maps need space, should span 2 columns with minimal content
+    chart: { two: 2 },
+    map: { two: 2 },
+    locations: { two: 2 },
+    // Contact cards typically have 3-4 contacts, should span 2 columns easily
+    'contact-card': { two: 3 },
+    'network-card': { two: 3 },
+    // Analytics/Stats typically have 3-4 metrics, should span 2 columns
+    analytics: { two: 3 },
+    stats: { two: 3 },
+    // Financials typically have 3-5 fields, should span 2 columns
+    financials: { two: 3 },
+    // Info sections with key-value pairs, should span 2 columns with 4+ fields
+    info: { two: 4, three: 8 },
+    // Solutions typically have 3-4 items, should span 2 columns
+    solutions: { two: 3 },
+    product: { two: 3 },
+    // Lists typically have 4-6 items, should span 2 columns
+    list: { two: 4 },
+    // Events/Timelines typically have 3-5 phases, should span 2 columns
+    event: { two: 3 },
+    // Text-heavy sections should span 2 columns for readability
+    quotation: { two: 3 },
+    'text-reference': { two: 3 },
+    // Projects always span 1 column (special case handled in masonry grid)
+    project: { two: 999 } // Effectively always 1 column
+};
+const DEFAULT_COL_SPAN_THRESHOLD$1 = { two: 6 };
+class SectionNormalizationService {
+    constructor() {
+        /**
+         * Supported section types
+         */
+        this.supportedTypes = [
+            'info',
+            'analytics',
+            'contact-card',
+            'network-card',
+            'map',
+            'financials',
+            'locations',
+            'event',
+            'project',
+            'list',
+            'chart',
+            'product',
+            'solutions',
+            'overview',
+            'stats',
+            'quotation',
+            'text-reference'
+        ];
+    }
+    /**
+     * Normalize a section by resolving its type and ensuring required properties
+     */
+    normalizeSection(section) {
+        const rawType = (section.type ?? '').toLowerCase();
+        const title = (section.title ?? '').toLowerCase();
+        const resolvedType = this.resolveSectionType(rawType, title);
+        const normalized = {
+            ...section,
+            type: resolvedType
+        };
+        // Handle analytics sections with metrics array
+        if (resolvedType === 'analytics' && (!normalized.fields || !normalized.fields.length)) {
+            const metrics = section['metrics'];
+            if (Array.isArray(metrics)) {
+                normalized.fields = metrics;
+            }
+        }
+        // Use subtitle as description if description is missing
+        if (!normalized.description && section.subtitle) {
+            normalized.description = section.subtitle;
+        }
+        // Add column span thresholds to section meta if not already present
+        // This allows each section to have its own column logic
+        const existingMeta = normalized.meta;
+        const colSpanThresholds = this.getColSpanThresholdsForType(resolvedType);
+        normalized.meta = {
+            ...existingMeta,
+            // Only add if not already defined (allows sections to override)
+            colSpanThresholds: existingMeta?.['colSpanThresholds'] ?? colSpanThresholds
+        };
+        return normalized;
+    }
+    /**
+     * Get column span thresholds for a section type
+     * This is the default logic for each section type
+     */
+    getColSpanThresholdsForType(type) {
+        return SECTION_COL_SPAN_THRESHOLDS[type] ?? DEFAULT_COL_SPAN_THRESHOLD$1;
+    }
+    /**
+     * Resolve section type from raw type and title
+     */
+    resolveSectionType(rawType, title) {
+        // Title-based overrides take precedence
+        if (!rawType && title.includes('overview')) {
+            return 'overview';
+        }
+        // Type-based resolution
+        switch (rawType) {
+            case 'timeline':
+                return 'event';
+            case 'metrics':
+            case 'stats':
+                return 'analytics';
+            case 'table':
+                return 'list';
+            case 'locations':
+                return 'map';
+            case 'project':
+                return 'info';
+            case 'contact':
+                return 'contact-card';
+            case 'network':
+                return 'network-card';
+            case 'quotation':
+            case 'quote':
+                return 'quotation';
+            case 'text-reference':
+            case 'reference':
+            case 'text-ref':
+                return 'text-reference';
+            case '':
+                return title.includes('overview') ? 'overview' : 'info';
+            default:
+                return this.supportedTypes.includes(rawType)
+                    ? rawType
+                    : 'info';
+        }
+    }
+    /**
+     * Get section priority for sorting
+     * Lower numbers appear first
+     */
+    getSectionPriority(section) {
+        const type = section.type?.toLowerCase() ?? '';
+        const title = section.title?.toLowerCase() ?? '';
+        // Priority order
+        if (type === 'contact-card' || type === 'contact')
+            return 1;
+        if (type === 'overview' || title.includes('overview'))
+            return 2;
+        if (type === 'analytics')
+            return 3;
+        if (type === 'product')
+            return 4;
+        if (type === 'solutions')
+            return 5;
+        if (type === 'map')
+            return 6;
+        if (type === 'financials')
+            return 7;
+        if (type === 'chart')
+            return 8;
+        if (type === 'list')
+            return 9;
+        if (type === 'event')
+            return 10;
+        if (type === 'info')
+            return 11;
+        return 12;
+    }
+    /**
+     * Sort sections by priority
+     */
+    sortSections(sections) {
+        return [...sections].sort((a, b) => {
+            const streamingOrderComparison = this.compareStreamingOrder(a, b);
+            if (streamingOrderComparison !== 0) {
+                return streamingOrderComparison;
+            }
+            const priorityA = this.getSectionPriority(a);
+            const priorityB = this.getSectionPriority(b);
+            return priorityA - priorityB;
+        });
+    }
+    compareStreamingOrder(a, b) {
+        const orderA = this.getStreamingOrder(a);
+        const orderB = this.getStreamingOrder(b);
+        const hasOrderA = orderA !== null;
+        const hasOrderB = orderB !== null;
+        if (!hasOrderA && !hasOrderB) {
+            return 0;
+        }
+        if (hasOrderA && !hasOrderB) {
+            return -1;
+        }
+        if (!hasOrderA && hasOrderB) {
+            return 1;
+        }
+        if (orderA < orderB) {
+            return -1;
+        }
+        if (orderA > orderB) {
+            return 1;
+        }
+        return 0;
+    }
+    getStreamingOrder(section) {
+        const metadata = section.meta;
+        if (!metadata) {
+            return null;
+        }
+        const rawOrder = metadata['streamingOrder'];
+        if (typeof rawOrder === 'number' && Number.isFinite(rawOrder)) {
+            return rawOrder;
+        }
+        return null;
+    }
+    /**
+     * Normalize and sort sections
+     */
+    normalizeAndSortSections(sections) {
+        const normalized = sections.map(section => this.normalizeSection(section));
+        return this.sortSections(normalized);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionNormalizationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionNormalizationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionNormalizationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+const MAX_LIFT_PX = 1.0; // Doubled from 0.5 for stronger tilt effect
+const BASE_GLOW_BLUR = 8; // Reduced from 12 - tighter glow
+const MAX_GLOW_BLUR_OFFSET = 4; // Reduced from 6 - less spread
+const BASE_GLOW_OPACITY = 0.225; // Intensified by 50% (0.15 * 1.5)
+const MAX_GLOW_OPACITY_OFFSET = 0.18; // Intensified by 50% (0.12 * 1.5)
+const MAX_REFLECTION_OPACITY = 0.22;
+class MagneticTiltService {
+    constructor() {
+        this.tiltCalculationsSubject = new BehaviorSubject({
+            rotateX: 0,
+            rotateY: 0,
+            glowBlur: BASE_GLOW_BLUR,
+            glowOpacity: BASE_GLOW_OPACITY,
+            reflectionOpacity: 0
+        });
+        this.tiltCalculations$ = this.tiltCalculationsSubject.asObservable();
+        // Performance: cache element dimensions to avoid repeated getBoundingClientRect calls
+        this.elementCache = new Map();
+        this.rafId = null;
+        this.pendingUpdate = null;
+        this.lastCalculations = null;
+        this.CACHE_DURATION = 100; // Recalculate rect every 100ms max
+        this.ngZone = inject(NgZone);
+        this.resetTimeoutId = null;
+        this.RESET_TRANSITION_DURATION_MS = 500; // Smooth exit transition duration
+    }
+    calculateTilt(mousePosition, element) {
+        if (!element) {
+            this.resetTilt();
+            return;
+        }
+        // Cancel any ongoing reset animation when mouse re-enters
+        if (this.resetTimeoutId !== null) {
+            clearTimeout(this.resetTimeoutId);
+            this.resetTimeoutId = null;
+        }
+        // Store pending update for RAF batching
+        this.pendingUpdate = { mousePosition, element };
+        // Schedule update via RAF for smooth 60fps
+        if (this.rafId === null) {
+            this.rafId = requestAnimationFrame(() => {
+                this.processTiltUpdate();
+                this.rafId = null;
+            });
+        }
+    }
+    processTiltUpdate() {
+        if (!this.pendingUpdate)
+            return;
+        const { mousePosition, element } = this.pendingUpdate;
+        this.pendingUpdate = null;
+        if (!element) {
+            this.resetTilt();
+            return;
+        }
+        // Get or update cached element dimensions
+        const cache = this.getElementCache(element);
+        const fx = (mousePosition.x - cache.rect.left) / cache.rect.width;
+        const fy = (mousePosition.y - cache.rect.top) / cache.rect.height;
+        const clampedFx = Math.max(0, Math.min(1, fx));
+        const clampedFy = Math.max(0, Math.min(1, fy));
+        // Optimized calculations
+        const sinX = Math.sin(clampedFx * 2 * Math.PI);
+        const sinY = Math.sin(clampedFy * 2 * Math.PI);
+        const rotateY = sinX * cache.maxAngleY;
+        const rotateX = -sinY * cache.maxAngleX;
+        const intensity = Math.max(Math.abs(sinX), Math.abs(sinY));
+        const glowBlur = BASE_GLOW_BLUR + intensity * MAX_GLOW_BLUR_OFFSET;
+        const glowOpacity = BASE_GLOW_OPACITY + intensity * MAX_GLOW_OPACITY_OFFSET;
+        const reflectionOpacity = intensity * MAX_REFLECTION_OPACITY;
+        const newCalculations = {
+            rotateX,
+            rotateY,
+            glowBlur,
+            glowOpacity,
+            reflectionOpacity
+        };
+        // Only emit if values actually changed (prevent unnecessary updates)
+        if (!this.lastCalculations || this.hasCalculationsChanged(this.lastCalculations, newCalculations)) {
+            this.lastCalculations = newCalculations;
+            // Run outside Angular zone for better performance
+            this.ngZone.runOutsideAngular(() => {
+                this.tiltCalculationsSubject.next(newCalculations);
+            });
+        }
+    }
+    getElementCache(element) {
+        const now = performance.now();
+        const cached = this.elementCache.get(element);
+        // Use cache if recent (within CACHE_DURATION ms)
+        if (cached && (now - cached.lastUpdate) < this.CACHE_DURATION) {
+            return cached;
+        }
+        // Recalculate and cache
+        const rect = element.getBoundingClientRect();
+        const halfW = rect.width / 2;
+        const halfH = rect.height / 2;
+        const maxAngleY = Math.asin(MAX_LIFT_PX / halfW) * (180 / Math.PI);
+        const maxAngleX = Math.asin(MAX_LIFT_PX / halfH) * (180 / Math.PI);
+        const cache = {
+            element,
+            rect,
+            halfW,
+            halfH,
+            maxAngleY,
+            maxAngleX,
+            lastUpdate: now
+        };
+        this.elementCache.set(element, cache);
+        return cache;
+    }
+    hasCalculationsChanged(old, newCalc) {
+        // Reduced threshold for smoother glow transitions - allow more frequent updates
+        const threshold = 0.005; // Reduced from 0.01 for smoother glow
+        return (Math.abs(old.rotateX - newCalc.rotateX) > threshold ||
+            Math.abs(old.rotateY - newCalc.rotateY) > threshold ||
+            Math.abs(old.glowBlur - newCalc.glowBlur) > threshold ||
+            Math.abs(old.glowOpacity - newCalc.glowOpacity) > threshold ||
+            Math.abs(old.reflectionOpacity - newCalc.reflectionOpacity) > threshold);
+    }
+    resetTilt(smooth = true) {
+        // Cancel any pending tilt calculations
+        if (this.rafId !== null) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
+        }
+        this.pendingUpdate = null;
+        // Clear any existing reset timeout
+        if (this.resetTimeoutId !== null) {
+            clearTimeout(this.resetTimeoutId);
+            this.resetTimeoutId = null;
+        }
+        if (smooth) {
+            // Smooth reset: gradually transition to zero over the transition duration
+            // This allows the CSS transition to complete smoothly even if mouse leaves quickly
+            const startTime = performance.now();
+            const startCalculations = this.lastCalculations || {
+                rotateX: 0,
+                rotateY: 0,
+                glowBlur: BASE_GLOW_BLUR,
+                glowOpacity: BASE_GLOW_OPACITY,
+                reflectionOpacity: 0
+            };
+            const animateReset = () => {
+                const elapsed = performance.now() - startTime;
+                const progress = Math.min(elapsed / this.RESET_TRANSITION_DURATION_MS, 1);
+                // Ease-out function for smooth deceleration
+                const easeOut = 1 - Math.pow(1 - progress, 3);
+                const currentCalculations = {
+                    rotateX: startCalculations.rotateX * (1 - easeOut),
+                    rotateY: startCalculations.rotateY * (1 - easeOut),
+                    glowBlur: BASE_GLOW_BLUR + (startCalculations.glowBlur - BASE_GLOW_BLUR) * (1 - easeOut),
+                    glowOpacity: BASE_GLOW_OPACITY + (startCalculations.glowOpacity - BASE_GLOW_OPACITY) * (1 - easeOut),
+                    reflectionOpacity: startCalculations.reflectionOpacity * (1 - easeOut)
+                };
+                this.lastCalculations = currentCalculations;
+                this.ngZone.runOutsideAngular(() => {
+                    this.tiltCalculationsSubject.next(currentCalculations);
+                });
+                if (progress < 1) {
+                    // Continue animation
+                    this.resetTimeoutId = window.setTimeout(animateReset, 16); // ~60fps
+                }
+                else {
+                    // Animation complete - set final values
+                    this.lastCalculations = null;
+                    this.tiltCalculationsSubject.next({
+                        rotateX: 0,
+                        rotateY: 0,
+                        glowBlur: BASE_GLOW_BLUR,
+                        glowOpacity: BASE_GLOW_OPACITY,
+                        reflectionOpacity: 0
+                    });
+                    this.resetTimeoutId = null;
+                }
+            };
+            // Start smooth reset animation
+            animateReset();
+        }
+        else {
+            // Immediate reset (for cleanup)
+            this.lastCalculations = null;
+            this.tiltCalculationsSubject.next({
+                rotateX: 0,
+                rotateY: 0,
+                glowBlur: BASE_GLOW_BLUR,
+                glowOpacity: BASE_GLOW_OPACITY,
+                reflectionOpacity: 0
+            });
+        }
+    }
+    // Cleanup cached elements when component is destroyed
+    clearCache(element) {
+        if (element) {
+            this.elementCache.delete(element);
+        }
+        else {
+            this.elementCache.clear();
+        }
+    }
+    // Cleanup method for service destruction
+    ngOnDestroy() {
+        if (this.resetTimeoutId !== null) {
+            clearTimeout(this.resetTimeoutId);
+            this.resetTimeoutId = null;
+        }
+        if (this.rafId !== null) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MagneticTiltService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MagneticTiltService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MagneticTiltService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * Utility service for section components
+ * Provides consistent status, trend, and icon handling across all sections
+ */
+class SectionUtilsService {
+    /**
+     * Get CSS classes for status badges/tags
+     * Returns consistent classes across all section types
+     */
+    getStatusClasses(status) {
+        const normalizedStatus = (status ?? '').toLowerCase().trim();
+        switch (normalizedStatus) {
+            case 'completed':
+            case 'success':
+                return 'status--completed';
+            case 'active':
+            case 'in-progress':
+                return 'status--active';
+            case 'pending':
+            case 'warning':
+                return 'status--pending';
+            case 'cancelled':
+            case 'blocked':
+            case 'delayed':
+            case 'inactive':
+            case 'error':
+                return 'status--blocked';
+            default:
+                return 'status--default';
+        }
+    }
+    /**
+     * Get CSS classes for priority badges/tags
+     */
+    getPriorityClasses(priority) {
+        const normalizedPriority = (priority ?? '').toLowerCase().trim();
+        switch (normalizedPriority) {
+            case 'high':
+                return 'priority--high';
+            case 'medium':
+                return 'priority--medium';
+            case 'low':
+                return 'priority--low';
+            default:
+                return 'priority--default';
+        }
+    }
+    /**
+     * Get icon name for trend indicators
+     */
+    getTrendIcon(trend) {
+        const normalizedTrend = (trend ?? '').toLowerCase().trim();
+        switch (normalizedTrend) {
+            case 'up':
+                return 'trending-up';
+            case 'down':
+                return 'trending-down';
+            case 'stable':
+            case 'neutral':
+                return 'minus';
+            default:
+                return 'bar-chart-3';
+        }
+    }
+    /**
+     * Get CSS classes for trend indicators
+     */
+    getTrendClass(trend) {
+        // Handle numeric values (change percentages)
+        if (typeof trend === 'number') {
+            if (trend > 0)
+                return 'trend--up';
+            if (trend < 0)
+                return 'trend--down';
+            return 'trend--stable';
+        }
+        const normalizedTrend = (trend ?? '').toLowerCase().trim();
+        switch (normalizedTrend) {
+            case 'up':
+                return 'trend--up';
+            case 'down':
+                return 'trend--down';
+            case 'stable':
+                return 'trend--stable';
+            default:
+                return 'trend--neutral';
+        }
+    }
+    /**
+     * Calculate trend from change value
+     */
+    calculateTrend(change) {
+        if (change === undefined || change === null) {
+            return 'neutral';
+        }
+        if (change > 0)
+            return 'up';
+        if (change < 0)
+            return 'down';
+        return 'stable';
+    }
+    /**
+     * Format change value with sign
+     */
+    formatChange(change) {
+        if (change === undefined || change === null) {
+            return '';
+        }
+        return `${change > 0 ? '+' : ''}${change}%`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionUtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionUtilsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionUtilsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * Simple hash function for content hashing (replaces JSON.stringify)
+ * Uses MurmurHash-inspired algorithm for fast hashing
+ */
+function hashString(str) {
+    let hash = 0;
+    if (str.length === 0)
+        return hash;
+    for (let i = 0; i < str.length; i++) {
+        const char = str.charCodeAt(i);
+        hash = ((hash << 5) - hash) + char;
+        hash = hash & hash; // Convert to 32-bit integer
+    }
+    return hash;
+}
+/**
+ * Generate content hash for a field (faster than JSON.stringify)
+ */
+function hashField(field) {
+    const key = `${field.id || ''}|${field.label || ''}|${field.value || ''}|${field.type || ''}|${field.title || ''}`;
+    return String(hashString(key));
+}
+/**
+ * Generate content hash for an item (faster than JSON.stringify)
+ */
+function hashItem(item) {
+    const key = `${item.id || ''}|${item.title || ''}|${item.value || ''}`;
+    return String(hashString(key));
+}
+/**
+ * WeakMap cache for field hashes to avoid recomputation
+ */
+const fieldHashCache = new WeakMap();
+const itemHashCache = new WeakMap();
+/**
+ * Deep comparison utility for card objects
+ * Uses content hashing instead of JSON.stringify for better performance
+ */
+class CardDiffUtil {
+    /**
+     * Creates an updated card with only changed sections/fields updated
+     * Preserves references to unchanged sections for optimal performance
+     */
+    static mergeCardUpdates(oldCard, newCard) {
+        // If cards are identical, return old card (preserve reference)
+        if (this.areCardsEqual(oldCard, newCard)) {
+            return { card: oldCard, changeType: 'content' };
+        }
+        // Check if only top-level properties changed (title, subtitle, etc.)
+        // Check if sections array changed
+        const sectionsChanged = !this.areSectionsEqual(oldCard.sections, newCard.sections);
+        // If only top-level changed, update only those
+        if (!sectionsChanged) {
+            return {
+                card: {
+                    ...oldCard,
+                    cardTitle: newCard.cardTitle,
+                    cardSubtitle: newCard.cardSubtitle,
+                    cardType: newCard.cardType,
+                    description: newCard.description,
+                    columns: newCard.columns,
+                    actions: newCard.actions,
+                    // Keep same sections reference
+                    sections: oldCard.sections
+                },
+                changeType: 'content'
+            };
+        }
+        // Merge sections incrementally
+        const mergedSections = this.mergeSections(oldCard.sections, newCard.sections);
+        const changeType = sectionsChanged && !this.didStructureChange(oldCard.sections, newCard.sections)
+            ? 'content'
+            : 'structural';
+        return {
+            card: {
+                ...oldCard,
+                cardTitle: newCard.cardTitle,
+                cardSubtitle: newCard.cardSubtitle,
+                cardType: newCard.cardType,
+                description: newCard.description,
+                columns: newCard.columns,
+                actions: newCard.actions,
+                sections: mergedSections
+            },
+            changeType
+        };
+    }
+    static didStructureChange(oldSections, newSections) {
+        if (oldSections.length !== newSections.length) {
+            return true;
+        }
+        return oldSections.some((oldSection, index) => {
+            const newSection = newSections[index];
+            if (!newSection) {
+                return true;
+            }
+            if ((oldSection.id || index) !== (newSection.id || index)) {
+                return true;
+            }
+            if (oldSection.type !== newSection.type) {
+                return true;
+            }
+            const oldFieldsLength = oldSection.fields?.length ?? 0;
+            const newFieldsLength = newSection.fields?.length ?? 0;
+            const oldItemsLength = oldSection.items?.length ?? 0;
+            const newItemsLength = newSection.items?.length ?? 0;
+            return oldFieldsLength !== newFieldsLength || newItemsLength !== oldItemsLength;
+        });
+    }
+    /**
+     * Merges sections array, preserving references to unchanged sections
+     */
+    static mergeSections(oldSections, newSections) {
+        // If sections array length changed, we need to rebuild
+        if (oldSections.length !== newSections.length) {
+            return newSections.map((section, index) => {
+                const oldSection = oldSections[index];
+                if (oldSection && this.areSectionsEqual([oldSection], [section])) {
+                    return oldSection; // Preserve reference
+                }
+                return section;
+            });
+        }
+        // Merge each section
+        return newSections.map((newSection, index) => {
+            const oldSection = oldSections[index];
+            if (!oldSection) {
+                return newSection;
+            }
+            if ((oldSection.id || index) !== (newSection.id || index)) {
+                return newSection;
+            }
+            // Merge section fields/items
+            return this.mergeSection(oldSection, newSection);
+        });
+    }
+    /**
+     * Merges a single section, preserving references to unchanged fields/items
+     */
+    static mergeSection(oldSection, newSection) {
+        // Check if only top-level section properties changed
+        // Check if fields changed
+        const fieldsChanged = !this.areFieldsEqual(oldSection.fields, newSection.fields);
+        const itemsChanged = !this.areItemsEqual(oldSection.items, newSection.items);
+        // If only top-level changed, preserve fields/items references
+        if (!fieldsChanged && !itemsChanged) {
+            return {
+                ...oldSection,
+                title: newSection.title,
+                type: newSection.type,
+                description: newSection.description,
+                subtitle: newSection.subtitle,
+                columns: newSection.columns,
+                colSpan: newSection.colSpan,
+                collapsed: newSection.collapsed,
+                emoji: newSection.emoji,
+                chartType: newSection.chartType,
+                chartData: newSection.chartData,
+                meta: newSection.meta,
+                // Preserve fields/items references
+                fields: oldSection.fields,
+                items: oldSection.items
+            };
+        }
+        // Merge fields if they exist
+        const mergedFields = oldSection.fields && newSection.fields
+            ? this.mergeFields(oldSection.fields, newSection.fields)
+            : newSection.fields;
+        // Merge items if they exist
+        const mergedItems = oldSection.items && newSection.items
+            ? this.mergeItems(oldSection.items, newSection.items)
+            : newSection.items;
+        return {
+            ...oldSection,
+            title: newSection.title,
+            type: newSection.type,
+            description: newSection.description,
+            subtitle: newSection.subtitle,
+            columns: newSection.columns,
+            colSpan: newSection.colSpan,
+            collapsed: newSection.collapsed,
+            emoji: newSection.emoji,
+            chartType: newSection.chartType,
+            chartData: newSection.chartData,
+            meta: newSection.meta,
+            fields: mergedFields,
+            items: mergedItems
+        };
+    }
+    /**
+     * Merges fields array, preserving references to unchanged fields
+     * Uses content hashing instead of JSON.stringify for better performance
+     */
+    static mergeFields(oldFields, newFields) {
+        if (oldFields.length !== newFields.length) {
+            return newFields;
+        }
+        return newFields.map((newField, index) => {
+            const oldField = oldFields[index];
+            if (!oldField) {
+                return newField;
+            }
+            // Fast comparison: check key properties first
+            if (oldField.id === newField.id &&
+                oldField.label === newField.label &&
+                oldField.value === newField.value &&
+                oldField.title === newField.title) {
+                // Use content hashing instead of JSON.stringify
+                const oldHash = fieldHashCache.get(oldField) || hashField(oldField);
+                const newHash = hashField(newField);
+                // Cache hashes for future comparisons
+                if (!fieldHashCache.has(oldField)) {
+                    fieldHashCache.set(oldField, oldHash);
+                }
+                if (!fieldHashCache.has(newField)) {
+                    fieldHashCache.set(newField, newHash);
+                }
+                if (oldHash === newHash) {
+                    return oldField; // Preserve reference
+                }
+            }
+            return newField;
+        });
+    }
+    /**
+     * Merges items array, preserving references to unchanged items
+     * Uses content hashing instead of JSON.stringify for better performance
+     */
+    static mergeItems(oldItems, newItems) {
+        if (oldItems.length !== newItems.length) {
+            return newItems;
+        }
+        return newItems.map((newItem, index) => {
+            const oldItem = oldItems[index];
+            if (!oldItem) {
+                return newItem;
+            }
+            // Fast comparison
+            if (oldItem.id === newItem.id &&
+                oldItem.title === newItem.title &&
+                oldItem.value === newItem.value) {
+                // Use content hashing instead of JSON.stringify
+                const oldHash = itemHashCache.get(oldItem) || hashItem(oldItem);
+                const newHash = hashItem(newItem);
+                // Cache hashes for future comparisons
+                if (!itemHashCache.has(oldItem)) {
+                    itemHashCache.set(oldItem, oldHash);
+                }
+                if (!itemHashCache.has(newItem)) {
+                    itemHashCache.set(newItem, newHash);
+                }
+                if (oldHash === newHash) {
+                    return oldItem; // Preserve reference
+                }
+            }
+            return newItem;
+        });
+    }
+    /**
+     * Fast equality check for cards
+     */
+    static areCardsEqual(card1, card2) {
+        return card1.id === card2.id &&
+            card1.cardTitle === card2.cardTitle &&
+            card1.cardSubtitle === card2.cardSubtitle &&
+            card1.cardType === card2.cardType &&
+            this.areSectionsEqual(card1.sections, card2.sections);
+    }
+    /**
+     * Fast equality check for sections arrays
+     */
+    static areSectionsEqual(sections1, sections2) {
+        if (sections1.length !== sections2.length) {
+            return false;
+        }
+        return sections1.every((section1, index) => {
+            const section2 = sections2[index];
+            if (!section2)
+                return false;
+            return section1.id === section2.id &&
+                section1.title === section2.title &&
+                section1.type === section2.type &&
+                this.areFieldsEqual(section1.fields, section2.fields) &&
+                this.areItemsEqual(section1.items, section2.items);
+        });
+    }
+    /**
+     * Fast equality check for fields arrays
+     */
+    static areFieldsEqual(fields1, fields2) {
+        if (!fields1 && !fields2)
+            return true;
+        if (!fields1 || !fields2)
+            return false;
+        if (fields1.length !== fields2.length)
+            return false;
+        return fields1.every((field1, index) => {
+            const field2 = fields2[index];
+            if (!field2)
+                return false;
+            return field1.id === field2.id &&
+                field1.label === field2.label &&
+                field1.value === field2.value &&
+                field1.title === field2.title;
+        });
+    }
+    /**
+     * Fast equality check for items arrays
+     */
+    static areItemsEqual(items1, items2) {
+        if (!items1 && !items2)
+            return true;
+        if (!items1 || !items2)
+            return false;
+        if (items1.length !== items2.length)
+            return false;
+        return items1.every((item1, index) => {
+            const item2 = items2[index];
+            if (!item2)
+                return false;
+            return item1.id === item2.id &&
+                item1.title === item2.title &&
+                item1.value === item2.value;
+        });
+    }
+}
+
+function getBreakpointFromWidth(width) {
+    if (width < 640)
+        return 'xs';
+    if (width < 768)
+        return 'sm';
+    if (width < 1024)
+        return 'md';
+    if (width < 1280)
+        return 'lg';
+    if (width < 1536)
+        return 'xl';
+    return '2xl';
+}
+
+const ICONS = {
+    Activity,
+    AlertCircle,
+    ArrowRight,
+    ArrowDown,
+    ArrowUp,
+    Award,
+    Box,
+    BarChart3,
+    BookOpen,
+    Briefcase,
+    Building,
+    Calendar,
+    CalendarCheck,
+    CalendarPlus,
+    CalendarX,
+    CheckCircle2,
+    Check,
+    ChevronRight,
+    Circle,
+    Clock,
+    Code2,
+    Calculator,
+    ExternalLink,
+    Facebook,
+    DollarSign,
+    Download,
+    FileText,
+    Folder,
+    Globe,
+    GitBranch,
+    Grid,
+    Handshake,
+    Hash,
+    HelpCircle,
+    Info,
+    Instagram,
+    Linkedin,
+    Lightbulb,
+    List,
+    Mail,
+    MapPin,
+    Maximize2,
+    MessageCircle,
+    Minimize2,
+    Minus,
+    Package,
+    Phone,
+    PieChart,
+    Quote,
+    RefreshCw,
+    Share2,
+    ShoppingCart,
+    Save,
+    Settings,
+    Shield,
+    Sparkles,
+    Tag,
+    Star,
+    Target,
+    Timer,
+    TrendingDown,
+    TrendingUp,
+    Trophy,
+    Twitter,
+    Users,
+    UserCheck,
+    User,
+    Video,
+    Type,
+    Wrench,
+    XCircle,
+    Zap
+};
+class LucideIconsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LucideIconsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: LucideIconsModule, imports: [i2.LucideAngularModule], exports: [LucideAngularModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LucideIconsModule, imports: [LucideAngularModule.pick(ICONS), LucideAngularModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LucideIconsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [LucideAngularModule.pick(ICONS)],
+                    exports: [LucideAngularModule]
+                }]
+        }] });
+
+/**
+ * Base component class for all section components
+ * Provides common functionality and ensures consistency
+ */
+class BaseSectionComponent {
+    constructor() {
+        this.fieldInteraction = new EventEmitter();
+        this.itemInteraction = new EventEmitter();
+        this.cdr = inject(ChangeDetectorRef);
+        // Animation state tracking
+        this.fieldAnimationStates = new Map();
+        this.itemAnimationStates = new Map();
+        this.fieldAnimationTimes = new Map();
+        this.itemAnimationTimes = new Map();
+        this.FIELD_STAGGER_DELAY_MS = 30;
+        this.ITEM_STAGGER_DELAY_MS = 40;
+        this.FIELD_ANIMATION_DURATION_MS = 300;
+        this.ITEM_ANIMATION_DURATION_MS = 350;
+        this.fieldsAnimated = false;
+        this.itemsAnimated = false;
+        // Performance: Batch change detection for animation state updates
+        this.pendingFieldAnimationUpdates = new Set();
+        this.pendingItemAnimationUpdates = new Set();
+        this.fieldAnimationUpdateRafId = null;
+        this.itemAnimationUpdateRafId = null;
+    }
+    /**
+     * Get fields from section (standardized access pattern)
+     */
+    getFields() {
+        return this.section.fields ?? [];
+    }
+    /**
+     * Get items from section (standardized access pattern)
+     * Falls back to fields if items are not available
+     */
+    getItems() {
+        if (Array.isArray(this.section.items) && this.section.items.length > 0) {
+            return this.section.items;
+        }
+        // Fallback to fields if items are not available
+        if (Array.isArray(this.section.fields) && this.section.fields.length > 0) {
+            return this.section.fields.map((field) => {
+                const cardField = field;
+                return {
+                    ...cardField,
+                    title: cardField.title ?? cardField.label ?? cardField.id,
+                    description: cardField.description ?? (typeof cardField.meta?.['description'] === 'string'
+                        ? cardField.meta['description']
+                        : undefined)
+                };
+            });
+        }
+        return [];
+    }
+    ngOnChanges(changes) {
+        if (changes['section']) {
+            // Cancel pending RAFs
+            if (this.fieldAnimationUpdateRafId !== null) {
+                cancelAnimationFrame(this.fieldAnimationUpdateRafId);
+                this.fieldAnimationUpdateRafId = null;
+            }
+            if (this.itemAnimationUpdateRafId !== null) {
+                cancelAnimationFrame(this.itemAnimationUpdateRafId);
+                this.itemAnimationUpdateRafId = null;
+            }
+            // Reset animation states when section changes
+            this.resetFieldAnimations();
+            this.resetItemAnimations();
+            this.fieldsAnimated = false;
+            this.itemsAnimated = false;
+            // Clear pending updates
+            this.pendingFieldAnimationUpdates.clear();
+            this.pendingItemAnimationUpdates.clear();
+        }
+    }
+    /**
+     * Get animation class for a field based on its appearance state
+     */
+    getFieldAnimationClass(fieldId, index) {
+        const state = this.fieldAnimationStates.get(fieldId);
+        if (state === 'entering') {
+            return 'field-streaming';
+        }
+        if (state === 'entered') {
+            return 'field-entered';
+        }
+        // New field - mark as entering
+        if (state === undefined || state === 'none') {
+            this.markFieldEntering(fieldId, index);
+            return 'field-streaming';
+        }
+        return '';
+    }
+    /**
+     * Get animation class for an item based on its appearance state
+     */
+    getItemAnimationClass(itemId, index) {
+        const state = this.itemAnimationStates.get(itemId);
+        if (state === 'entering') {
+            return 'item-streaming';
+        }
+        if (state === 'entered') {
+            return 'item-entered';
+        }
+        // New item - mark as entering
+        if (state === undefined || state === 'none') {
+            this.markItemEntering(itemId, index);
+            return 'item-streaming';
+        }
+        return '';
+    }
+    /**
+     * Get stagger delay index for field animation
+     */
+    getFieldStaggerIndex(index) {
+        return Math.min(index, 15);
+    }
+    /**
+     * Get stagger delay index for item animation
+     */
+    getItemStaggerIndex(index) {
+        return Math.min(index, 15);
+    }
+    /**
+     * Mark field as entering and schedule entered state
+     * Optimized: Batches change detection for better performance
+     */
+    markFieldEntering(fieldId, index) {
+        this.fieldAnimationStates.set(fieldId, 'entering');
+        const appearanceTime = Date.now();
+        this.fieldAnimationTimes.set(fieldId, appearanceTime);
+        // Calculate total delay (stagger + animation duration)
+        const staggerDelay = index * this.FIELD_STAGGER_DELAY_MS;
+        const totalDelay = staggerDelay + this.FIELD_ANIMATION_DURATION_MS;
+        // Mark as entered after animation completes
+        // Batch change detection for multiple fields
+        setTimeout(() => {
+            // Only update if this is still the latest appearance
+            if (this.fieldAnimationTimes.get(fieldId) === appearanceTime) {
+                this.fieldAnimationStates.set(fieldId, 'entered');
+                // Batch change detection - add to pending updates
+                this.pendingFieldAnimationUpdates.add(fieldId);
+                this.scheduleBatchedFieldChangeDetection();
+            }
+        }, totalDelay);
+    }
+    /**
+     * Batch change detection for field animation state updates
+     */
+    scheduleBatchedFieldChangeDetection() {
+        if (this.fieldAnimationUpdateRafId !== null) {
+            return; // Already scheduled
+        }
+        this.fieldAnimationUpdateRafId = requestAnimationFrame(() => {
+            if (this.pendingFieldAnimationUpdates.size > 0) {
+                // Single change detection for all pending updates
+                this.cdr.markForCheck();
+                this.pendingFieldAnimationUpdates.clear();
+            }
+            this.fieldAnimationUpdateRafId = null;
+        });
+    }
+    /**
+     * Mark item as entering and schedule entered state
+     * Optimized: Batches change detection for better performance
+     */
+    markItemEntering(itemId, index) {
+        this.itemAnimationStates.set(itemId, 'entering');
+        const appearanceTime = Date.now();
+        this.itemAnimationTimes.set(itemId, appearanceTime);
+        // Calculate total delay (stagger + animation duration)
+        const staggerDelay = index * this.ITEM_STAGGER_DELAY_MS;
+        const totalDelay = staggerDelay + this.ITEM_ANIMATION_DURATION_MS;
+        // Mark as entered after animation completes
+        // Batch change detection for multiple items
+        setTimeout(() => {
+            // Only update if this is still the latest appearance
+            if (this.itemAnimationTimes.get(itemId) === appearanceTime) {
+                this.itemAnimationStates.set(itemId, 'entered');
+                // Batch change detection - add to pending updates
+                this.pendingItemAnimationUpdates.add(itemId);
+                this.scheduleBatchedItemChangeDetection();
+            }
+        }, totalDelay);
+    }
+    /**
+     * Batch change detection for item animation state updates
+     */
+    scheduleBatchedItemChangeDetection() {
+        if (this.itemAnimationUpdateRafId !== null) {
+            return; // Already scheduled
+        }
+        this.itemAnimationUpdateRafId = requestAnimationFrame(() => {
+            if (this.pendingItemAnimationUpdates.size > 0) {
+                // Single change detection for all pending updates
+                this.cdr.markForCheck();
+                this.pendingItemAnimationUpdates.clear();
+            }
+            this.itemAnimationUpdateRafId = null;
+        });
+    }
+    /**
+     * Reset field animation states
+     */
+    resetFieldAnimations() {
+        this.fieldAnimationStates.clear();
+        this.fieldAnimationTimes.clear();
+    }
+    /**
+     * Reset item animation states
+     */
+    resetItemAnimations() {
+        this.itemAnimationStates.clear();
+        this.itemAnimationTimes.clear();
+    }
+    /**
+     * Get field ID for tracking
+     */
+    getFieldId(field, index) {
+        return field.id || `field-${index}-${field.label || ''}`;
+    }
+    /**
+     * Get item ID for tracking
+     */
+    getItemId(item, index) {
+        return item.id || `item-${index}-${item.title || ''}`;
+    }
+    /**
+     * Check if section has fields
+     * Public getter for template access
+     */
+    get hasFields() {
+        return this.getFields().length > 0;
+    }
+    /**
+     * Check if section has items
+     * Public getter for template access
+     */
+    get hasItems() {
+        return this.getItems().length > 0;
+    }
+    /**
+     * Emit field interaction event (standardized pattern)
+     */
+    emitFieldInteraction(field, metadata) {
+        this.fieldInteraction.emit({
+            field,
+            metadata: {
+                sectionId: this.section.id,
+                sectionTitle: this.section.title,
+                ...metadata
+            }
+        });
+    }
+    /**
+     * Emit item interaction event (standardized pattern)
+     */
+    emitItemInteraction(item, metadata) {
+        this.itemInteraction.emit({
+            item,
+            metadata: {
+                sectionId: this.section.id,
+                sectionTitle: this.section.title,
+                ...metadata
+            }
+        });
+    }
+    /**
+     * Phase 5: Perfect trackBy function for fields - uses stable field ID
+     * Can be overridden by child classes for custom tracking
+     */
+    trackField(index, field) {
+        return field.id || `field-${index}-${field.label || ''}`;
+    }
+    /**
+     * Phase 5: Perfect trackBy function for items - uses stable item ID
+     * Can be overridden by child classes for custom tracking
+     */
+    trackItem(index, item) {
+        return item.id || `item-${index}-${item.title || ''}`;
+    }
+    // Display methods removed - each component now implements its own to avoid TypeScript override conflicts
+    // The logic is consistent: filter out "Streaming…" placeholder text
+    /**
+     * Safe value accessor - extracts value from field with fallback options
+     * Handles field.value, field.text, field.quote based on field type
+     */
+    getFieldValue(field) {
+        // Try value first (most common)
+        if (field.value !== undefined && field.value !== null) {
+            return field.value;
+        }
+        // Try text (for text-reference fields)
+        if ('text' in field && field.text !== undefined && field.text !== null) {
+            return field.text;
+        }
+        // Try quote (for quotation fields)
+        if ('quote' in field && field.quote !== undefined && field.quote !== null) {
+            return field.quote;
+        }
+        return undefined;
+    }
+    /**
+     * Safe metadata accessor - extracts metadata value safely
+     */
+    getMetaValue(field, key) {
+        return field.meta?.[key];
+    }
+    /**
+     * Check if a value represents streaming placeholder
+     */
+    isStreamingPlaceholder(value) {
+        return value === 'Streaming…' || value === 'Streaming...';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BaseSectionComponent, selector: "ng-component", inputs: { section: "section" }, outputs: { fieldInteraction: "fieldInteraction", itemInteraction: "itemInteraction" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { section: [{
+                type: Input,
+                args: [{ required: true }]
+            }], fieldInteraction: [{
+                type: Output
+            }], itemInteraction: [{
+                type: Output
+            }] } });
+
+class InfoSectionComponent extends BaseSectionComponent {
+    constructor() {
+        super(...arguments);
+        this.utils = inject(SectionUtilsService);
+        // Custom output for backward compatibility with InfoSectionFieldInteraction format
+        this.infoFieldInteraction = new EventEmitter();
+    }
+    get fields() {
+        return super.getFields();
+    }
+    get hasFields() {
+        return super.hasFields;
+    }
+    onFieldClick(field) {
+        // Emit to base class for standard handling
+        this.emitFieldInteraction(field, { sectionTitle: this.section.title });
+        // Also emit in InfoSectionFieldInteraction format for backward compatibility
+        this.infoFieldInteraction.emit({
+            field,
+            sectionTitle: this.section.title
+        });
+    }
+    getTrendIcon(field) {
+        const icon = this.utils.getTrendIcon(field.trend ?? this.utils.calculateTrend(field.change));
+        // Return null for neutral/default to hide icon
+        return icon === 'bar-chart-3' ? null : icon;
+    }
+    getTrendClass(field) {
+        return this.utils.getTrendClass(field.trend ?? field.change);
+    }
+    getTrendIconClass(field) {
+        return this.getTrendClass(field);
+    }
+    formatChange(change) {
+        return this.utils.formatChange(change);
+    }
+    /**
+     * Get display value, hiding "Streaming…" placeholder text
+     * Inline implementation to avoid TypeScript override conflicts
+     */
+    getDisplayValue(field) {
+        const value = field.value;
+        if (value === 'Streaming…' || value === 'Streaming...') {
+            return '';
+        }
+        return value != null ? String(value) : '';
+    }
+    trackField(index, field) {
+        return field.id ?? `${field.label}-${index}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InfoSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InfoSectionComponent, isStandalone: true, selector: "app-info-section", outputs: { infoFieldInteraction: "infoFieldInteraction" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ai-section ai-section--info\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"hasFields; else infoEmpty\">\n      <div class=\"info-matrix\">\n        <button\n          *ngFor=\"let field of fields; trackBy: trackField; let idx = index\"\n          type=\"button\"\n          class=\"info-row\"\n          [class.field-streaming]=\"getFieldAnimationClass(getFieldId(field, idx), idx) === 'field-streaming'\"\n          [class.field-entered]=\"getFieldAnimationClass(getFieldId(field, idx), idx) === 'field-entered'\"\n          [class.field-stagger-0]=\"getFieldStaggerIndex(idx) === 0\"\n          [class.field-stagger-1]=\"getFieldStaggerIndex(idx) === 1\"\n          [class.field-stagger-2]=\"getFieldStaggerIndex(idx) === 2\"\n          [class.field-stagger-3]=\"getFieldStaggerIndex(idx) === 3\"\n          [class.field-stagger-4]=\"getFieldStaggerIndex(idx) === 4\"\n          [class.field-stagger-5]=\"getFieldStaggerIndex(idx) === 5\"\n          [class.field-stagger-6]=\"getFieldStaggerIndex(idx) === 6\"\n          [class.field-stagger-7]=\"getFieldStaggerIndex(idx) === 7\"\n          [class.field-stagger-8]=\"getFieldStaggerIndex(idx) === 8\"\n          [class.field-stagger-9]=\"getFieldStaggerIndex(idx) === 9\"\n          [class.field-stagger-10]=\"getFieldStaggerIndex(idx) === 10\"\n          [class.field-stagger-11]=\"getFieldStaggerIndex(idx) === 11\"\n          [class.field-stagger-12]=\"getFieldStaggerIndex(idx) === 12\"\n          [class.field-stagger-13]=\"getFieldStaggerIndex(idx) === 13\"\n          [class.field-stagger-14]=\"getFieldStaggerIndex(idx) === 14\"\n          [class.field-stagger-15]=\"getFieldStaggerIndex(idx) === 15\"\n          (click)=\"onFieldClick(field)\"\n          (keydown.enter)=\"onFieldClick(field)\"\n          (keydown.space)=\"$event.preventDefault(); onFieldClick(field)\"\n        >\n          <div class=\"info-row__primary\">\n            <span class=\"info-row__label\">{{ field.label }}</span>\n            <span class=\"info-row__value\">{{ getDisplayValue(field) }}</span>\n          </div>\n\n          <div class=\"info-row__meta\" *ngIf=\"field.description || field.change !== undefined\">\n            <p class=\"info-row__description\" *ngIf=\"field.description\">\n              {{ field.description }}\n            </p>\n            <span class=\"info-row__change\" *ngIf=\"field.change !== undefined\" [ngClass]=\"getTrendClass(field)\">\n              <lucide-icon\n                *ngIf=\"getTrendIcon(field) as trendIcon\"\n                [name]=\"trendIcon\"\n                [size]=\"12\"\n                aria-hidden=\"true\"\n              ></lucide-icon>\n              {{ formatChange(field.change) }}\n            </span>\n          </div>\n        </button>\n      </div>\n    </ng-container>\n\n    <ng-template #infoEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"alert-circle\" [size]=\"32\" class=\"mb-4 opacity-50\" aria-hidden=\"true\"></lucide-icon>\n        <p class=\"text-sm\">No information available</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: LucideIconsModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InfoSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-info-section', standalone: true, imports: [CommonModule, LucideIconsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ai-section ai-section--info\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"hasFields; else infoEmpty\">\n      <div class=\"info-matrix\">\n        <button\n          *ngFor=\"let field of fields; trackBy: trackField; let idx = index\"\n          type=\"button\"\n          class=\"info-row\"\n          [class.field-streaming]=\"getFieldAnimationClass(getFieldId(field, idx), idx) === 'field-streaming'\"\n          [class.field-entered]=\"getFieldAnimationClass(getFieldId(field, idx), idx) === 'field-entered'\"\n          [class.field-stagger-0]=\"getFieldStaggerIndex(idx) === 0\"\n          [class.field-stagger-1]=\"getFieldStaggerIndex(idx) === 1\"\n          [class.field-stagger-2]=\"getFieldStaggerIndex(idx) === 2\"\n          [class.field-stagger-3]=\"getFieldStaggerIndex(idx) === 3\"\n          [class.field-stagger-4]=\"getFieldStaggerIndex(idx) === 4\"\n          [class.field-stagger-5]=\"getFieldStaggerIndex(idx) === 5\"\n          [class.field-stagger-6]=\"getFieldStaggerIndex(idx) === 6\"\n          [class.field-stagger-7]=\"getFieldStaggerIndex(idx) === 7\"\n          [class.field-stagger-8]=\"getFieldStaggerIndex(idx) === 8\"\n          [class.field-stagger-9]=\"getFieldStaggerIndex(idx) === 9\"\n          [class.field-stagger-10]=\"getFieldStaggerIndex(idx) === 10\"\n          [class.field-stagger-11]=\"getFieldStaggerIndex(idx) === 11\"\n          [class.field-stagger-12]=\"getFieldStaggerIndex(idx) === 12\"\n          [class.field-stagger-13]=\"getFieldStaggerIndex(idx) === 13\"\n          [class.field-stagger-14]=\"getFieldStaggerIndex(idx) === 14\"\n          [class.field-stagger-15]=\"getFieldStaggerIndex(idx) === 15\"\n          (click)=\"onFieldClick(field)\"\n          (keydown.enter)=\"onFieldClick(field)\"\n          (keydown.space)=\"$event.preventDefault(); onFieldClick(field)\"\n        >\n          <div class=\"info-row__primary\">\n            <span class=\"info-row__label\">{{ field.label }}</span>\n            <span class=\"info-row__value\">{{ getDisplayValue(field) }}</span>\n          </div>\n\n          <div class=\"info-row__meta\" *ngIf=\"field.description || field.change !== undefined\">\n            <p class=\"info-row__description\" *ngIf=\"field.description\">\n              {{ field.description }}\n            </p>\n            <span class=\"info-row__change\" *ngIf=\"field.change !== undefined\" [ngClass]=\"getTrendClass(field)\">\n              <lucide-icon\n                *ngIf=\"getTrendIcon(field) as trendIcon\"\n                [name]=\"trendIcon\"\n                [size]=\"12\"\n                aria-hidden=\"true\"\n              ></lucide-icon>\n              {{ formatChange(field.change) }}\n            </span>\n          </div>\n        </button>\n      </div>\n    </ng-container>\n\n    <ng-template #infoEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"alert-circle\" [size]=\"32\" class=\"mb-4 opacity-50\" aria-hidden=\"true\"></lucide-icon>\n        <p class=\"text-sm\">No information available</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n" }]
+        }], propDecorators: { infoFieldInteraction: [{
+                type: Output
+            }] } });
+
+class AnalyticsSectionComponent extends BaseSectionComponent {
+    constructor() {
+        super(...arguments);
+        this.Math = Math;
+        this.utils = inject(SectionUtilsService);
+    }
+    get fields() {
+        return this.getFields();
+    }
+    onFieldClick(field) {
+        this.emitFieldInteraction(field);
+    }
+    getTrendIcon(field) {
+        return this.utils.getTrendIcon(field.trend ?? this.utils.calculateTrend(field.change));
+    }
+    getTrendClass(field) {
+        return this.utils.getTrendClass(field.trend ?? field.change);
+    }
+    formatChange(change) {
+        return this.utils.formatChange(change);
+    }
+    /**
+     * Get display value, hiding "Streaming…" placeholder text
+     * Inline implementation to avoid TypeScript override conflicts
+     */
+    getDisplayValue(field) {
+        const value = field.value;
+        if (value === 'Streaming…' || value === 'Streaming...') {
+            return '';
+        }
+        return value != null ? String(value) : '';
+    }
+    /**
+     * Check if percentage should be shown in meta
+     * Only show if percentage exists and is not already included in the value
+     */
+    shouldShowPercentage(field) {
+        if (field.percentage === undefined) {
+            return false;
+        }
+        const value = this.getDisplayValue(field);
+        if (!value) {
+            return false;
+        }
+        // Check if the value already contains the percentage
+        // Remove % signs and compare numbers
+        const valueWithoutPercent = value.replace(/%/g, '').trim();
+        const percentageStr = String(field.percentage);
+        // If value already contains the percentage number, don't show it again
+        return !valueWithoutPercent.includes(percentageStr);
+    }
+    trackField(index, field) {
+        return field.id ?? `${field.label}-${index}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AnalyticsSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AnalyticsSectionComponent, isStandalone: true, selector: "app-analytics-section", usesInheritance: true, ngImport: i0, template: "<div class=\"ai-section ai-section--analytics\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"fields.length; else analyticsEmpty\">\n      <div class=\"section-grid section-grid--metrics\">\n        <article\n        *ngFor=\"let field of fields; trackBy: trackField\"\n        class=\"section-card section-card--metric\"\n        role=\"button\"\n        tabindex=\"0\"\n        (click)=\"onFieldClick(field)\"\n        (keydown.enter)=\"onFieldClick(field)\"\n        (keydown.space)=\"$event.preventDefault(); onFieldClick(field)\"\n      >\n        <div class=\"section-card__label\">\n          <span>{{ field.label }}</span>\n        </div>\n\n        <div class=\"section-card__value\">\n          <span>{{ getDisplayValue(field) }}</span>\n          <lucide-icon\n            *ngIf=\"getTrendIcon(field)\"\n            [name]=\"getTrendIcon(field)\"\n            [size]=\"18\"\n            [ngClass]=\"getTrendClass(field)\"\n          ></lucide-icon>\n        </div>\n\n        <div *ngIf=\"field.percentage !== undefined\" class=\"section-card__progress\">\n          <div\n            class=\"section-card__progress-bar\"\n            [style.width.%]=\"Math.min(field.percentage, 100)\"\n          ></div>\n        </div>\n\n        <div *ngIf=\"shouldShowPercentage(field)\" class=\"section-card__meta\">\n          <span>{{ field.percentage }}%</span>\n        </div>\n\n        <div *ngIf=\"field.change !== undefined\" class=\"section-card__meta\">\n          <span>Change:</span>\n          <span class=\"section-card__meta-change\" [ngClass]=\"getTrendClass(field)\">\n            {{ formatChange(field.change) }}\n          </span>\n          <lucide-icon [name]=\"getTrendIcon(field)\" [size]=\"14\" [ngClass]=\"getTrendClass(field)\"></lucide-icon>\n        </div>\n      </article>\n      </div>\n    </ng-container>\n\n    <ng-template #analyticsEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"bar-chart-3\" [size]=\"32\" class=\"mb-4 opacity-50\"></lucide-icon>\n        <p class=\"text-sm\">No analytics data configured</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: LucideIconsModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AnalyticsSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-analytics-section', standalone: true, imports: [CommonModule, LucideIconsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ai-section ai-section--analytics\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"fields.length; else analyticsEmpty\">\n      <div class=\"section-grid section-grid--metrics\">\n        <article\n        *ngFor=\"let field of fields; trackBy: trackField\"\n        class=\"section-card section-card--metric\"\n        role=\"button\"\n        tabindex=\"0\"\n        (click)=\"onFieldClick(field)\"\n        (keydown.enter)=\"onFieldClick(field)\"\n        (keydown.space)=\"$event.preventDefault(); onFieldClick(field)\"\n      >\n        <div class=\"section-card__label\">\n          <span>{{ field.label }}</span>\n        </div>\n\n        <div class=\"section-card__value\">\n          <span>{{ getDisplayValue(field) }}</span>\n          <lucide-icon\n            *ngIf=\"getTrendIcon(field)\"\n            [name]=\"getTrendIcon(field)\"\n            [size]=\"18\"\n            [ngClass]=\"getTrendClass(field)\"\n          ></lucide-icon>\n        </div>\n\n        <div *ngIf=\"field.percentage !== undefined\" class=\"section-card__progress\">\n          <div\n            class=\"section-card__progress-bar\"\n            [style.width.%]=\"Math.min(field.percentage, 100)\"\n          ></div>\n        </div>\n\n        <div *ngIf=\"shouldShowPercentage(field)\" class=\"section-card__meta\">\n          <span>{{ field.percentage }}%</span>\n        </div>\n\n        <div *ngIf=\"field.change !== undefined\" class=\"section-card__meta\">\n          <span>Change:</span>\n          <span class=\"section-card__meta-change\" [ngClass]=\"getTrendClass(field)\">\n            {{ formatChange(field.change) }}\n          </span>\n          <lucide-icon [name]=\"getTrendIcon(field)\" [size]=\"14\" [ngClass]=\"getTrendClass(field)\"></lucide-icon>\n        </div>\n      </article>\n      </div>\n    </ng-container>\n\n    <ng-template #analyticsEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"bar-chart-3\" [size]=\"32\" class=\"mb-4 opacity-50\"></lucide-icon>\n        <p class=\"text-sm\">No analytics data configured</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n" }]
+        }] });
+
+class FinancialsSectionComponent extends BaseSectionComponent {
+    constructor() {
+        super(...arguments);
+        this.utils = inject(SectionUtilsService);
+    }
+    get fields() {
+        return super.getFields();
+    }
+    get hasFields() {
+        return super.hasFields;
+    }
+    onFieldClick(field) {
+        this.emitFieldInteraction(field);
+    }
+    getTrendIcon(field) {
+        return this.utils.getTrendIcon(field.trend ?? this.utils.calculateTrend(field.change));
+    }
+    getChangeClass(field) {
+        return this.utils.getTrendClass(field.trend ?? field.change);
+    }
+    formatChange(change) {
+        return this.utils.formatChange(change);
+    }
+    /**
+     * Get display value, hiding "Streaming…" placeholder text
+     * Inline implementation to avoid TypeScript override conflicts
+     */
+    getDisplayValue(field) {
+        const value = field.value;
+        if (value === 'Streaming…' || value === 'Streaming...') {
+            return '';
+        }
+        return value != null ? String(value) : '';
+    }
+    trackField(index, field) {
+        return field.id ?? `${field.label}-${index}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FinancialsSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FinancialsSectionComponent, isStandalone: true, selector: "app-financials-section", usesInheritance: true, ngImport: i0, template: "<div class=\"ai-section ai-section--financials\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n    <span *ngIf=\"fields.length\" class=\"ai-section__badge\">\n      {{ fields.length }} {{ fields.length === 1 ? 'metric' : 'metrics' }}\n    </span>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"fields.length; else financialsEmpty\">\n      <div class=\"financials-grid\">\n        <article\n          *ngFor=\"let field of fields; trackBy: trackField\"\n          class=\"financial-card\"\n          role=\"button\"\n          tabindex=\"0\"\n          (click)=\"onFieldClick(field)\"\n          (keydown.enter)=\"onFieldClick(field)\"\n          (keydown.space)=\"$event.preventDefault(); onFieldClick(field)\"\n        >\n          <div class=\"financial-card__content\">\n            <span class=\"financial-card__label\">\n              {{ field.label }}\n            </span>\n            <div class=\"financial-card__value-wrapper\">\n              <span class=\"financial-card__value\" [ngClass]=\"{'financial-card__value--currency': field.format === 'currency'}\">\n                <lucide-icon *ngIf=\"field.format === 'currency'\" name=\"dollar-sign\" size=\"16\" class=\"financial-card__currency-icon\"></lucide-icon>\n                {{ getDisplayValue(field) }}\n              </span>\n              <lucide-icon\n                *ngIf=\"getTrendIcon(field) as trendIcon\"\n                [name]=\"trendIcon\"\n                size=\"16\"\n                class=\"financial-card__trend-icon\"\n                [ngClass]=\"getChangeClass(field)\"\n              ></lucide-icon>\n            </div>\n          </div>\n          <div *ngIf=\"field.change !== undefined && field.change !== null\" class=\"financial-card__change\" [ngClass]=\"getChangeClass(field)\">\n            {{ field.change > 0 ? '+' : '' }}{{ field.change }}%\n          </div>\n        </article>\n      </div>\n    </ng-container>\n\n    <ng-template #financialsEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"dollar-sign\" size=\"32\" class=\"section-empty__icon\"></lucide-icon>\n        <p class=\"section-empty__text\">No financial metrics available</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: LucideIconsModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FinancialsSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-financials-section', standalone: true, imports: [CommonModule, LucideIconsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ai-section ai-section--financials\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n    <span *ngIf=\"fields.length\" class=\"ai-section__badge\">\n      {{ fields.length }} {{ fields.length === 1 ? 'metric' : 'metrics' }}\n    </span>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"fields.length; else financialsEmpty\">\n      <div class=\"financials-grid\">\n        <article\n          *ngFor=\"let field of fields; trackBy: trackField\"\n          class=\"financial-card\"\n          role=\"button\"\n          tabindex=\"0\"\n          (click)=\"onFieldClick(field)\"\n          (keydown.enter)=\"onFieldClick(field)\"\n          (keydown.space)=\"$event.preventDefault(); onFieldClick(field)\"\n        >\n          <div class=\"financial-card__content\">\n            <span class=\"financial-card__label\">\n              {{ field.label }}\n            </span>\n            <div class=\"financial-card__value-wrapper\">\n              <span class=\"financial-card__value\" [ngClass]=\"{'financial-card__value--currency': field.format === 'currency'}\">\n                <lucide-icon *ngIf=\"field.format === 'currency'\" name=\"dollar-sign\" size=\"16\" class=\"financial-card__currency-icon\"></lucide-icon>\n                {{ getDisplayValue(field) }}\n              </span>\n              <lucide-icon\n                *ngIf=\"getTrendIcon(field) as trendIcon\"\n                [name]=\"trendIcon\"\n                size=\"16\"\n                class=\"financial-card__trend-icon\"\n                [ngClass]=\"getChangeClass(field)\"\n              ></lucide-icon>\n            </div>\n          </div>\n          <div *ngIf=\"field.change !== undefined && field.change !== null\" class=\"financial-card__change\" [ngClass]=\"getChangeClass(field)\">\n            {{ field.change > 0 ? '+' : '' }}{{ field.change }}%\n          </div>\n        </article>\n      </div>\n    </ng-container>\n\n    <ng-template #financialsEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"dollar-sign\" size=\"32\" class=\"section-empty__icon\"></lucide-icon>\n        <p class=\"section-empty__text\">No financial metrics available</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n" }]
+        }] });
+
+class ListSectionComponent extends BaseSectionComponent {
+    get items() {
+        return super.getItems();
+    }
+    onItemClick(item) {
+        this.emitItemInteraction(item);
+    }
+    /**
+     * Get display description, hiding "Streaming…" placeholder text
+     * Inline implementation to avoid TypeScript override conflicts
+     */
+    getDisplayDescription(item) {
+        const description = item.description;
+        if (description === 'Streaming…' || description === 'Streaming...') {
+            return '';
+        }
+        return description ?? '';
+    }
+    trackItem(index, item) {
+        return item.id ?? `${item.title ?? item.label}-${index}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ListSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ListSectionComponent, isStandalone: true, selector: "app-list-section", usesInheritance: true, ngImport: i0, template: "<div class=\"ai-section ai-section--list\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n    <span *ngIf=\"items.length\" class=\"ai-section__badge\">\n      {{ items.length }} {{ items.length === 1 ? 'item' : 'items' }}\n    </span>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"items.length; else listEmpty\">\n      <div class=\"list-grid\">\n        <article\n          *ngFor=\"let item of items; trackBy: trackItem; let idx = index\"\n          class=\"list-card\"\n          role=\"button\"\n          tabindex=\"0\"\n          [class.item-streaming]=\"getItemAnimationClass(getItemId(item, idx), idx) === 'item-streaming'\"\n          [class.item-entered]=\"getItemAnimationClass(getItemId(item, idx), idx) === 'item-entered'\"\n          [class.item-stagger-0]=\"getItemStaggerIndex(idx) === 0\"\n          [class.item-stagger-1]=\"getItemStaggerIndex(idx) === 1\"\n          [class.item-stagger-2]=\"getItemStaggerIndex(idx) === 2\"\n          [class.item-stagger-3]=\"getItemStaggerIndex(idx) === 3\"\n          [class.item-stagger-4]=\"getItemStaggerIndex(idx) === 4\"\n          [class.item-stagger-5]=\"getItemStaggerIndex(idx) === 5\"\n          [class.item-stagger-6]=\"getItemStaggerIndex(idx) === 6\"\n          [class.item-stagger-7]=\"getItemStaggerIndex(idx) === 7\"\n          [class.item-stagger-8]=\"getItemStaggerIndex(idx) === 8\"\n          [class.item-stagger-9]=\"getItemStaggerIndex(idx) === 9\"\n          [class.item-stagger-10]=\"getItemStaggerIndex(idx) === 10\"\n          [class.item-stagger-11]=\"getItemStaggerIndex(idx) === 11\"\n          [class.item-stagger-12]=\"getItemStaggerIndex(idx) === 12\"\n          [class.item-stagger-13]=\"getItemStaggerIndex(idx) === 13\"\n          [class.item-stagger-14]=\"getItemStaggerIndex(idx) === 14\"\n          [class.item-stagger-15]=\"getItemStaggerIndex(idx) === 15\"\n          (click)=\"onItemClick(item)\"\n          (keydown.enter)=\"onItemClick(item)\"\n          (keydown.space)=\"$event.preventDefault(); onItemClick(item)\"\n        >\n          <!-- Header: Title -->\n          <header class=\"list-card__header\">\n            <div class=\"list-card__header-content\">\n              <h3 class=\"list-card__title\">\n                {{ item.title || item.label }}\n              </h3>\n              <div class=\"list-card__badges\" *ngIf=\"item.priority || item.status\">\n                <span *ngIf=\"item.priority\" class=\"list-card__badge list-card__badge--priority\" [attr.data-priority]=\"item.priority ? (item.priority + '') : null\">\n                  {{ item.priority }}\n                </span>\n                <span *ngIf=\"item.status\" class=\"list-card__badge list-card__badge--status\" [attr.data-status]=\"item.status ? (item.status + '') : null\">\n                  {{ item.status }}\n                </span>\n              </div>\n            </div>\n            <div *ngIf=\"item.value\" class=\"list-card__value\">\n              {{ item.value }}\n            </div>\n          </header>\n\n          <!-- Description -->\n          <p *ngIf=\"getDisplayDescription(item)\" class=\"list-card__description\">\n            {{ getDisplayDescription(item) }}\n          </p>\n\n          <!-- Meta Information -->\n          <footer *ngIf=\"item.assignee || item.date\" class=\"list-card__footer\">\n            <div *ngIf=\"item.assignee\" class=\"list-card__meta\">\n              <lucide-icon name=\"user\" size=\"14\" class=\"list-card__meta-icon\"></lucide-icon>\n              <span class=\"list-card__meta-text\">Assigned to <strong>{{ item.assignee }}</strong></span>\n            </div>\n            <div *ngIf=\"item.date\" class=\"list-card__meta\">\n              <lucide-icon name=\"calendar\" size=\"14\" class=\"list-card__meta-icon\"></lucide-icon>\n              <span class=\"list-card__meta-text\">Due {{ item.date }}</span>\n            </div>\n          </footer>\n        </article>\n      </div>\n    </ng-container>\n\n    <ng-template #listEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"list\" size=\"32\" class=\"section-empty__icon\"></lucide-icon>\n        <p class=\"section-empty__text\">No items available</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: LucideIconsModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ListSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-list-section', standalone: true, imports: [CommonModule, LucideIconsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ai-section ai-section--list\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n    <span *ngIf=\"items.length\" class=\"ai-section__badge\">\n      {{ items.length }} {{ items.length === 1 ? 'item' : 'items' }}\n    </span>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"items.length; else listEmpty\">\n      <div class=\"list-grid\">\n        <article\n          *ngFor=\"let item of items; trackBy: trackItem; let idx = index\"\n          class=\"list-card\"\n          role=\"button\"\n          tabindex=\"0\"\n          [class.item-streaming]=\"getItemAnimationClass(getItemId(item, idx), idx) === 'item-streaming'\"\n          [class.item-entered]=\"getItemAnimationClass(getItemId(item, idx), idx) === 'item-entered'\"\n          [class.item-stagger-0]=\"getItemStaggerIndex(idx) === 0\"\n          [class.item-stagger-1]=\"getItemStaggerIndex(idx) === 1\"\n          [class.item-stagger-2]=\"getItemStaggerIndex(idx) === 2\"\n          [class.item-stagger-3]=\"getItemStaggerIndex(idx) === 3\"\n          [class.item-stagger-4]=\"getItemStaggerIndex(idx) === 4\"\n          [class.item-stagger-5]=\"getItemStaggerIndex(idx) === 5\"\n          [class.item-stagger-6]=\"getItemStaggerIndex(idx) === 6\"\n          [class.item-stagger-7]=\"getItemStaggerIndex(idx) === 7\"\n          [class.item-stagger-8]=\"getItemStaggerIndex(idx) === 8\"\n          [class.item-stagger-9]=\"getItemStaggerIndex(idx) === 9\"\n          [class.item-stagger-10]=\"getItemStaggerIndex(idx) === 10\"\n          [class.item-stagger-11]=\"getItemStaggerIndex(idx) === 11\"\n          [class.item-stagger-12]=\"getItemStaggerIndex(idx) === 12\"\n          [class.item-stagger-13]=\"getItemStaggerIndex(idx) === 13\"\n          [class.item-stagger-14]=\"getItemStaggerIndex(idx) === 14\"\n          [class.item-stagger-15]=\"getItemStaggerIndex(idx) === 15\"\n          (click)=\"onItemClick(item)\"\n          (keydown.enter)=\"onItemClick(item)\"\n          (keydown.space)=\"$event.preventDefault(); onItemClick(item)\"\n        >\n          <!-- Header: Title -->\n          <header class=\"list-card__header\">\n            <div class=\"list-card__header-content\">\n              <h3 class=\"list-card__title\">\n                {{ item.title || item.label }}\n              </h3>\n              <div class=\"list-card__badges\" *ngIf=\"item.priority || item.status\">\n                <span *ngIf=\"item.priority\" class=\"list-card__badge list-card__badge--priority\" [attr.data-priority]=\"item.priority ? (item.priority + '') : null\">\n                  {{ item.priority }}\n                </span>\n                <span *ngIf=\"item.status\" class=\"list-card__badge list-card__badge--status\" [attr.data-status]=\"item.status ? (item.status + '') : null\">\n                  {{ item.status }}\n                </span>\n              </div>\n            </div>\n            <div *ngIf=\"item.value\" class=\"list-card__value\">\n              {{ item.value }}\n            </div>\n          </header>\n\n          <!-- Description -->\n          <p *ngIf=\"getDisplayDescription(item)\" class=\"list-card__description\">\n            {{ getDisplayDescription(item) }}\n          </p>\n\n          <!-- Meta Information -->\n          <footer *ngIf=\"item.assignee || item.date\" class=\"list-card__footer\">\n            <div *ngIf=\"item.assignee\" class=\"list-card__meta\">\n              <lucide-icon name=\"user\" size=\"14\" class=\"list-card__meta-icon\"></lucide-icon>\n              <span class=\"list-card__meta-text\">Assigned to <strong>{{ item.assignee }}</strong></span>\n            </div>\n            <div *ngIf=\"item.date\" class=\"list-card__meta\">\n              <lucide-icon name=\"calendar\" size=\"14\" class=\"list-card__meta-icon\"></lucide-icon>\n              <span class=\"list-card__meta-text\">Due {{ item.date }}</span>\n            </div>\n          </footer>\n        </article>\n      </div>\n    </ng-container>\n\n    <ng-template #listEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"list\" size=\"32\" class=\"section-empty__icon\"></lucide-icon>\n        <p class=\"section-empty__text\">No items available</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n" }]
+        }] });
+
+class EventSectionComponent extends BaseSectionComponent {
+    get events() {
+        const timeline = this.section['timelineEvents'];
+        if (Array.isArray(timeline)) {
+            return timeline;
+        }
+        return super.getItems();
+    }
+    get hasItems() {
+        return this.events.length > 0;
+    }
+    onEventClick(event) {
+        this.emitItemInteraction(event);
+    }
+    trackItem(index, event) {
+        return event.id ?? `${event.title}-${index}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EventSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EventSectionComponent, isStandalone: true, selector: "app-event-section", usesInheritance: true, ngImport: i0, template: "<div class=\"ai-section ai-section--event\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n    <span *ngIf=\"events.length\" class=\"ai-section__badge\">\n      {{ events.length }} {{ events.length === 1 ? 'event' : 'events' }}\n    </span>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"events.length; else eventEmpty\">\n      <div class=\"event-timeline\">\n        <div class=\"event-timeline__line\"></div>\n\n        <article\n          *ngFor=\"let event of events; trackBy: trackItem\"\n          class=\"event-card\"\n          role=\"button\"\n          tabindex=\"0\"\n          (click)=\"onEventClick(event)\"\n          (keydown.enter)=\"onEventClick(event)\"\n          (keydown.space)=\"$event.preventDefault(); onEventClick(event)\"\n        >\n          <div class=\"event-card__marker\">\n            <lucide-icon name=\"calendar\" size=\"14\" class=\"event-card__marker-icon\"></lucide-icon>\n            <div class=\"event-card__marker-line\"></div>\n          </div>\n\n          <div class=\"event-card__content\">\n            <header class=\"event-card__header\">\n              <h3 class=\"event-card__title\">\n                {{ event.title }}\n              </h3>\n              <span *ngIf=\"event.status\" class=\"event-card__badge\" [attr.data-status]=\"event.status ? (event.status + '') : null\">\n                {{ event.status | uppercase }}\n              </span>\n            </header>\n\n            <div *ngIf=\"event.date || event.time\" class=\"event-card__datetime\">\n              <div *ngIf=\"event.date\" class=\"event-card__date\">\n                <lucide-icon name=\"calendar\" size=\"14\" class=\"event-card__datetime-icon\"></lucide-icon>\n                <span>{{ event.date }}</span>\n              </div>\n              <div *ngIf=\"event.time\" class=\"event-card__time\">\n                <lucide-icon name=\"clock\" size=\"14\" class=\"event-card__datetime-icon\"></lucide-icon>\n                <span>{{ event.time }}</span>\n              </div>\n            </div>\n\n            <p *ngIf=\"event.description\" class=\"event-card__description\">\n              {{ event.description }}\n            </p>\n          </div>\n        </article>\n      </div>\n    </ng-container>\n\n    <ng-template #eventEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"calendar\" size=\"32\" class=\"section-empty__icon\"></lucide-icon>\n        <p class=\"section-empty__text\">No timeline data available</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: LucideIconsModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EventSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-event-section', standalone: true, imports: [CommonModule, LucideIconsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ai-section ai-section--event\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n    <span *ngIf=\"events.length\" class=\"ai-section__badge\">\n      {{ events.length }} {{ events.length === 1 ? 'event' : 'events' }}\n    </span>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"events.length; else eventEmpty\">\n      <div class=\"event-timeline\">\n        <div class=\"event-timeline__line\"></div>\n\n        <article\n          *ngFor=\"let event of events; trackBy: trackItem\"\n          class=\"event-card\"\n          role=\"button\"\n          tabindex=\"0\"\n          (click)=\"onEventClick(event)\"\n          (keydown.enter)=\"onEventClick(event)\"\n          (keydown.space)=\"$event.preventDefault(); onEventClick(event)\"\n        >\n          <div class=\"event-card__marker\">\n            <lucide-icon name=\"calendar\" size=\"14\" class=\"event-card__marker-icon\"></lucide-icon>\n            <div class=\"event-card__marker-line\"></div>\n          </div>\n\n          <div class=\"event-card__content\">\n            <header class=\"event-card__header\">\n              <h3 class=\"event-card__title\">\n                {{ event.title }}\n              </h3>\n              <span *ngIf=\"event.status\" class=\"event-card__badge\" [attr.data-status]=\"event.status ? (event.status + '') : null\">\n                {{ event.status | uppercase }}\n              </span>\n            </header>\n\n            <div *ngIf=\"event.date || event.time\" class=\"event-card__datetime\">\n              <div *ngIf=\"event.date\" class=\"event-card__date\">\n                <lucide-icon name=\"calendar\" size=\"14\" class=\"event-card__datetime-icon\"></lucide-icon>\n                <span>{{ event.date }}</span>\n              </div>\n              <div *ngIf=\"event.time\" class=\"event-card__time\">\n                <lucide-icon name=\"clock\" size=\"14\" class=\"event-card__datetime-icon\"></lucide-icon>\n                <span>{{ event.time }}</span>\n              </div>\n            </div>\n\n            <p *ngIf=\"event.description\" class=\"event-card__description\">\n              {{ event.description }}\n            </p>\n          </div>\n        </article>\n      </div>\n    </ng-container>\n\n    <ng-template #eventEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"calendar\" size=\"32\" class=\"section-empty__icon\"></lucide-icon>\n        <p class=\"section-empty__text\">No timeline data available</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n" }]
+        }] });
+
+class ProductSectionComponent extends BaseSectionComponent {
+    constructor() {
+        super(...arguments);
+        this.categoryOrder = ['references', 'pricing', 'features', 'advantages', 'process', 'contacts'];
+        this.categoryConfig = {
+            references: { title: 'Client References', icon: 'award' },
+            pricing: { title: 'Pricing & Packages', icon: 'dollar-sign' },
+            features: { title: 'Key Features', icon: 'zap' },
+            advantages: { title: 'Competitive Advantages', icon: 'trending-up' },
+            process: { title: 'Sales Process', icon: 'target' },
+            contacts: { title: 'Internal Contacts', icon: 'users' },
+            default: { title: 'Product Information', icon: 'box' }
+        };
+        this.referenceStars = [1, 2, 3, 4, 5];
+        this.trackGroup = (_index, group) => group.key;
+        this.trackField = (_index, field) => field.id ?? field.label ?? `product-field-${_index}`;
+    }
+    get fields() {
+        return super.getFields();
+    }
+    get hasFields() {
+        return super.hasFields;
+    }
+    get categoryGroups() {
+        const groups = new Map();
+        this.fields.forEach((field) => {
+            const key = (field.category ?? 'default').toLowerCase();
+            const bucket = groups.get(key) ?? [];
+            bucket.push(field);
+            groups.set(key, bucket);
+        });
+        const orderedKeys = Array.from(groups.keys()).sort((a, b) => {
+            const orderA = this.categoryOrder.indexOf(a);
+            const orderB = this.categoryOrder.indexOf(b);
+            if (orderA === -1 && orderB === -1) {
+                return a.localeCompare(b);
+            }
+            if (orderA === -1) {
+                return 1;
+            }
+            if (orderB === -1) {
+                return -1;
+            }
+            return orderA - orderB;
+        });
+        return orderedKeys.map((key) => {
+            const config = this.categoryConfig[key] ?? this.categoryConfig['default'];
+            return {
+                key,
+                title: config.title,
+                icon: config.icon,
+                fields: groups.get(key) ?? []
+            };
+        });
+    }
+    get referenceGroup() {
+        return this.categoryGroups.find((group) => group.key === 'references') ?? null;
+    }
+    get gridGroups() {
+        return this.categoryGroups.filter((group) => group.key !== 'references');
+    }
+    get summaryStats() {
+        const totalReferences = this.fields.filter((field) => field.category === 'references').length;
+        const totalContacts = this.fields.filter((field) => field.category === 'contacts').length;
+        const totalAdvantages = this.fields.filter((field) => field.category === 'advantages').length;
+        const totalFeatures = this.fields.filter((field) => field.category === 'features').length;
+        return [
+            { label: 'Features', value: totalFeatures },
+            { label: 'References', value: totalReferences },
+            { label: 'Contacts', value: totalContacts },
+            { label: 'Advantages', value: totalAdvantages }
+        ];
+    }
+    isContactField(field) {
+        return !!field.contact;
+    }
+    isReferenceField(field) {
+        return !!field.reference;
+    }
+    onFieldClick(field) {
+        this.emitFieldInteraction(field, { category: field.category });
+    }
+    getGroupBadgeLabel(group) {
+        return `${group.fields.length} ${group.fields.length === 1 ? 'item' : 'items'}`;
+    }
+    getCategoryIconTone(group) {
+        switch (group.key) {
+            case 'pricing':
+                return 'product-card__icon--pricing';
+            case 'features':
+                return 'product-card__icon--features';
+            case 'process':
+                return 'product-card__icon--process';
+            case 'references':
+                return 'product-card__icon--references';
+            case 'contacts':
+                return 'product-card__icon--contacts';
+            case 'advantages':
+                return 'product-card__icon--advantages';
+            default:
+                return 'product-card__icon--default';
+        }
+    }
+    /**
+     * Get display value, hiding "Streaming…" placeholder text
+     * Inline implementation to avoid TypeScript override conflicts
+     */
+    getDisplayValue(field) {
+        const value = field.value;
+        if (value === 'Streaming…' || value === 'Streaming...') {
+            return '';
+        }
+        return value != null ? String(value) : '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProductSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ProductSectionComponent, isStandalone: true, selector: "app-product-section", usesInheritance: true, ngImport: i0, template: "<div class=\"ai-section ai-section--product\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"hasFields; else productEmpty\">\n      <div class=\"product-layout\">\n        <ng-container *ngIf=\"referenceGroup as references\">\n          <section class=\"product-card product-card--references\" [style.animation]=\"'fadeInUp 0.6s ease-out forwards'\">\n            <div class=\"product-card__header\">\n              <div class=\"product-card__icon\" [ngClass]=\"getCategoryIconTone(references)\">\n                <lucide-icon [name]=\"references.icon\" size=\"18\"></lucide-icon>\n              </div>\n              <div class=\"product-card__headline\">\n                <p class=\"product-card__title\">{{ references.title }}</p>\n                <p class=\"product-card__subtitle\">Verified client testimonials and success stories</p>\n              </div>\n              <span class=\"product-card__badge\">\n                {{ getGroupBadgeLabel(references) }}\n              </span>\n            </div>\n\n            <div class=\"product-reference-list\">\n              <article\n                *ngFor=\"let field of references.fields; trackBy: trackField\"\n                class=\"product-reference\"\n                role=\"button\"\n                tabindex=\"0\"\n                (click)=\"onFieldClick(field)\"\n                (keydown.enter)=\"onFieldClick(field)\"\n                (keydown.space)=\"$event.preventDefault(); onFieldClick(field)\"\n              >\n                <div class=\"product-reference__avatar\">\n                  <lucide-icon name=\"award\" size=\"18\"></lucide-icon>\n                </div>\n                <div class=\"product-reference__content\">\n                  <p class=\"product-reference__company\">\n                    {{ field.reference?.company || field.title || field.label }}\n                  </p>\n                  <p *ngIf=\"field.reference?.testimonial\" class=\"product-reference__testimonial\">\n                    \"{{ field.reference?.testimonial }}\"\n                  </p>\n                  <div class=\"product-reference__meta\">\n                    <div class=\"product-reference__stars\">\n                      <lucide-icon\n                        *ngFor=\"let star of referenceStars\"\n                        name=\"star\"\n                        size=\"14\"\n                      ></lucide-icon>\n                    </div>\n                    <span class=\"product-reference__badge\">Success Story</span>\n                  </div>\n                </div>\n                <span class=\"product-entry__chevron\">\n                  <lucide-icon name=\"chevron-right\" size=\"16\"></lucide-icon>\n                </span>\n              </article>\n            </div>\n          </section>\n        </ng-container>\n\n        <div class=\"product-grid\" [ngClass]=\"{ 'product-grid--single': gridGroups.length <= 1 }\">\n          <section\n            *ngFor=\"let group of gridGroups; trackBy: trackGroup\"\n            class=\"product-card\"\n          >\n            <div class=\"product-card__header\">\n              <div class=\"product-card__icon\" [ngClass]=\"getCategoryIconTone(group)\">\n                <lucide-icon [name]=\"group.icon\" size=\"18\"></lucide-icon>\n              </div>\n              <div class=\"product-card__headline\">\n                <p class=\"product-card__title\" *ngIf=\"group.title !== section.title\">{{ group.title }}</p>\n                <p class=\"product-card__subtitle\" *ngIf=\"group.key === 'pricing'\">\n                  Tailored packages and commercial structures\n                </p>\n                <p class=\"product-card__subtitle\" *ngIf=\"group.key === 'features'\">\n                  Capabilities that differentiate our solution\n                </p>\n                <p class=\"product-card__subtitle\" *ngIf=\"group.key === 'advantages'\">\n                  Strategic benefits for your organization\n                </p>\n                <p class=\"product-card__subtitle\" *ngIf=\"group.key === 'process'\">\n                  Structured delivery and engagement steps\n                </p>\n                <p class=\"product-card__subtitle\" *ngIf=\"group.key === 'contacts'\">\n                  Key people to accelerate collaboration\n                </p>\n                <p class=\"product-card__subtitle\" *ngIf=\"group.key === 'default' && group.title === section.title\">\n                  Additional product details and specifications\n                </p>\n              </div>\n              <span class=\"product-card__badge\">\n                {{ getGroupBadgeLabel(group) }}\n              </span>\n            </div>\n\n            <div class=\"product-card__content\">\n              <article\n                *ngFor=\"let field of group.fields; trackBy: trackField\"\n                class=\"product-entry\"\n                role=\"button\"\n                tabindex=\"0\"\n                (click)=\"onFieldClick(field)\"\n                (keydown.enter)=\"onFieldClick(field)\"\n                (keydown.space)=\"$event.preventDefault(); onFieldClick(field)\"\n              >\n                <ng-container *ngIf=\"isContactField(field); else productEntryDefault\">\n                  <div class=\"product-contact\">\n                    <div class=\"product-contact__avatar\">\n                      <lucide-icon name=\"users\" size=\"18\"></lucide-icon>\n                    </div>\n                    <div class=\"product-contact__details\">\n                      <p class=\"product-contact__name\">{{ field.contact?.name }}</p>\n                      <p *ngIf=\"field.contact?.role\" class=\"product-contact__role\">{{ field.contact?.role }}</p>\n                      <div class=\"product-contact__meta\">\n                        <a\n                          *ngIf=\"field.contact?.email\"\n                          class=\"product-contact__link\"\n                          href=\"mailto:{{ field.contact?.email }}\"\n                          (click)=\"$event.stopPropagation()\"\n                        >\n                          <lucide-icon name=\"mail\" size=\"12\"></lucide-icon>\n                          <span>{{ field.contact?.email }}</span>\n                        </a>\n                        <a\n                          *ngIf=\"field.contact?.phone\"\n                          class=\"product-contact__link\"\n                          href=\"tel:{{ field.contact?.phone }}\"\n                          (click)=\"$event.stopPropagation()\"\n                        >\n                          <lucide-icon name=\"phone\" size=\"12\"></lucide-icon>\n                          <span>{{ field.contact?.phone }}</span>\n                        </a>\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n\n                <ng-template #productEntryDefault>\n                  <div class=\"product-entry__body\">\n                    <div class=\"product-entry__heading\">\n                      <p class=\"product-entry__title\">\n                        {{ field.title || field.label }}\n                      </p>\n                      <span *ngIf=\"getDisplayValue(field)\" class=\"product-entry__value\">\n                        {{ getDisplayValue(field) }}\n                      </span>\n                    </div>\n\n                    <p *ngIf=\"field.description\" class=\"product-entry__description\">\n                      {{ field.description }}\n                    </p>\n\n                    <div *ngIf=\"field.benefits?.length\" class=\"product-entry__benefits\">\n                      <div\n                        *ngFor=\"let benefit of (field.benefits || []) | slice:0:3\"\n                        class=\"product-entry__benefit\"\n                      >\n                        <lucide-icon name=\"check-circle-2\" size=\"14\"></lucide-icon>\n                        <span>{{ benefit }}</span>\n                      </div>\n                    </div>\n\n                    <div class=\"product-entry__meta\">\n                      <span *ngIf=\"field.deliveryTime\" class=\"product-entry__meta-item\">\n                        <lucide-icon name=\"clock\" size=\"12\"></lucide-icon>\n                        {{ field.deliveryTime }}\n                      </span>\n                      <span *ngIf=\"field.teamSize\" class=\"product-entry__meta-item\">\n                        <lucide-icon name=\"users\" size=\"12\"></lucide-icon>\n                        {{ field.teamSize }}\n                      </span>\n                    </div>\n                  </div>\n                </ng-template>\n\n                <span class=\"product-entry__chevron\">\n                  <lucide-icon name=\"chevron-right\" size=\"16\"></lucide-icon>\n                </span>\n              </article>\n            </div>\n          </section>\n        </div>\n\n        <div class=\"product-summary\" *ngIf=\"summaryStats.length\">\n          <div class=\"product-summary__item\" *ngFor=\"let stat of summaryStats\">\n            <span class=\"product-summary__value\">{{ stat.value }}</span>\n            <span class=\"product-summary__label\">{{ stat.label }}</span>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n\n    <ng-template #productEmpty>\n      <div class=\"product-empty\">\n        <lucide-icon name=\"box\" size=\"32\" class=\"mb-3 opacity-60\"></lucide-icon>\n        <p class=\"text-sm\">No product insights configured.</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: LucideIconsModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProductSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-product-section', standalone: true, imports: [CommonModule, LucideIconsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ai-section ai-section--product\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"hasFields; else productEmpty\">\n      <div class=\"product-layout\">\n        <ng-container *ngIf=\"referenceGroup as references\">\n          <section class=\"product-card product-card--references\" [style.animation]=\"'fadeInUp 0.6s ease-out forwards'\">\n            <div class=\"product-card__header\">\n              <div class=\"product-card__icon\" [ngClass]=\"getCategoryIconTone(references)\">\n                <lucide-icon [name]=\"references.icon\" size=\"18\"></lucide-icon>\n              </div>\n              <div class=\"product-card__headline\">\n                <p class=\"product-card__title\">{{ references.title }}</p>\n                <p class=\"product-card__subtitle\">Verified client testimonials and success stories</p>\n              </div>\n              <span class=\"product-card__badge\">\n                {{ getGroupBadgeLabel(references) }}\n              </span>\n            </div>\n\n            <div class=\"product-reference-list\">\n              <article\n                *ngFor=\"let field of references.fields; trackBy: trackField\"\n                class=\"product-reference\"\n                role=\"button\"\n                tabindex=\"0\"\n                (click)=\"onFieldClick(field)\"\n                (keydown.enter)=\"onFieldClick(field)\"\n                (keydown.space)=\"$event.preventDefault(); onFieldClick(field)\"\n              >\n                <div class=\"product-reference__avatar\">\n                  <lucide-icon name=\"award\" size=\"18\"></lucide-icon>\n                </div>\n                <div class=\"product-reference__content\">\n                  <p class=\"product-reference__company\">\n                    {{ field.reference?.company || field.title || field.label }}\n                  </p>\n                  <p *ngIf=\"field.reference?.testimonial\" class=\"product-reference__testimonial\">\n                    \"{{ field.reference?.testimonial }}\"\n                  </p>\n                  <div class=\"product-reference__meta\">\n                    <div class=\"product-reference__stars\">\n                      <lucide-icon\n                        *ngFor=\"let star of referenceStars\"\n                        name=\"star\"\n                        size=\"14\"\n                      ></lucide-icon>\n                    </div>\n                    <span class=\"product-reference__badge\">Success Story</span>\n                  </div>\n                </div>\n                <span class=\"product-entry__chevron\">\n                  <lucide-icon name=\"chevron-right\" size=\"16\"></lucide-icon>\n                </span>\n              </article>\n            </div>\n          </section>\n        </ng-container>\n\n        <div class=\"product-grid\" [ngClass]=\"{ 'product-grid--single': gridGroups.length <= 1 }\">\n          <section\n            *ngFor=\"let group of gridGroups; trackBy: trackGroup\"\n            class=\"product-card\"\n          >\n            <div class=\"product-card__header\">\n              <div class=\"product-card__icon\" [ngClass]=\"getCategoryIconTone(group)\">\n                <lucide-icon [name]=\"group.icon\" size=\"18\"></lucide-icon>\n              </div>\n              <div class=\"product-card__headline\">\n                <p class=\"product-card__title\" *ngIf=\"group.title !== section.title\">{{ group.title }}</p>\n                <p class=\"product-card__subtitle\" *ngIf=\"group.key === 'pricing'\">\n                  Tailored packages and commercial structures\n                </p>\n                <p class=\"product-card__subtitle\" *ngIf=\"group.key === 'features'\">\n                  Capabilities that differentiate our solution\n                </p>\n                <p class=\"product-card__subtitle\" *ngIf=\"group.key === 'advantages'\">\n                  Strategic benefits for your organization\n                </p>\n                <p class=\"product-card__subtitle\" *ngIf=\"group.key === 'process'\">\n                  Structured delivery and engagement steps\n                </p>\n                <p class=\"product-card__subtitle\" *ngIf=\"group.key === 'contacts'\">\n                  Key people to accelerate collaboration\n                </p>\n                <p class=\"product-card__subtitle\" *ngIf=\"group.key === 'default' && group.title === section.title\">\n                  Additional product details and specifications\n                </p>\n              </div>\n              <span class=\"product-card__badge\">\n                {{ getGroupBadgeLabel(group) }}\n              </span>\n            </div>\n\n            <div class=\"product-card__content\">\n              <article\n                *ngFor=\"let field of group.fields; trackBy: trackField\"\n                class=\"product-entry\"\n                role=\"button\"\n                tabindex=\"0\"\n                (click)=\"onFieldClick(field)\"\n                (keydown.enter)=\"onFieldClick(field)\"\n                (keydown.space)=\"$event.preventDefault(); onFieldClick(field)\"\n              >\n                <ng-container *ngIf=\"isContactField(field); else productEntryDefault\">\n                  <div class=\"product-contact\">\n                    <div class=\"product-contact__avatar\">\n                      <lucide-icon name=\"users\" size=\"18\"></lucide-icon>\n                    </div>\n                    <div class=\"product-contact__details\">\n                      <p class=\"product-contact__name\">{{ field.contact?.name }}</p>\n                      <p *ngIf=\"field.contact?.role\" class=\"product-contact__role\">{{ field.contact?.role }}</p>\n                      <div class=\"product-contact__meta\">\n                        <a\n                          *ngIf=\"field.contact?.email\"\n                          class=\"product-contact__link\"\n                          href=\"mailto:{{ field.contact?.email }}\"\n                          (click)=\"$event.stopPropagation()\"\n                        >\n                          <lucide-icon name=\"mail\" size=\"12\"></lucide-icon>\n                          <span>{{ field.contact?.email }}</span>\n                        </a>\n                        <a\n                          *ngIf=\"field.contact?.phone\"\n                          class=\"product-contact__link\"\n                          href=\"tel:{{ field.contact?.phone }}\"\n                          (click)=\"$event.stopPropagation()\"\n                        >\n                          <lucide-icon name=\"phone\" size=\"12\"></lucide-icon>\n                          <span>{{ field.contact?.phone }}</span>\n                        </a>\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n\n                <ng-template #productEntryDefault>\n                  <div class=\"product-entry__body\">\n                    <div class=\"product-entry__heading\">\n                      <p class=\"product-entry__title\">\n                        {{ field.title || field.label }}\n                      </p>\n                      <span *ngIf=\"getDisplayValue(field)\" class=\"product-entry__value\">\n                        {{ getDisplayValue(field) }}\n                      </span>\n                    </div>\n\n                    <p *ngIf=\"field.description\" class=\"product-entry__description\">\n                      {{ field.description }}\n                    </p>\n\n                    <div *ngIf=\"field.benefits?.length\" class=\"product-entry__benefits\">\n                      <div\n                        *ngFor=\"let benefit of (field.benefits || []) | slice:0:3\"\n                        class=\"product-entry__benefit\"\n                      >\n                        <lucide-icon name=\"check-circle-2\" size=\"14\"></lucide-icon>\n                        <span>{{ benefit }}</span>\n                      </div>\n                    </div>\n\n                    <div class=\"product-entry__meta\">\n                      <span *ngIf=\"field.deliveryTime\" class=\"product-entry__meta-item\">\n                        <lucide-icon name=\"clock\" size=\"12\"></lucide-icon>\n                        {{ field.deliveryTime }}\n                      </span>\n                      <span *ngIf=\"field.teamSize\" class=\"product-entry__meta-item\">\n                        <lucide-icon name=\"users\" size=\"12\"></lucide-icon>\n                        {{ field.teamSize }}\n                      </span>\n                    </div>\n                  </div>\n                </ng-template>\n\n                <span class=\"product-entry__chevron\">\n                  <lucide-icon name=\"chevron-right\" size=\"16\"></lucide-icon>\n                </span>\n              </article>\n            </div>\n          </section>\n        </div>\n\n        <div class=\"product-summary\" *ngIf=\"summaryStats.length\">\n          <div class=\"product-summary__item\" *ngFor=\"let stat of summaryStats\">\n            <span class=\"product-summary__value\">{{ stat.value }}</span>\n            <span class=\"product-summary__label\">{{ stat.label }}</span>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n\n    <ng-template #productEmpty>\n      <div class=\"product-empty\">\n        <lucide-icon name=\"box\" size=\"32\" class=\"mb-3 opacity-60\"></lucide-icon>\n        <p class=\"text-sm\">No product insights configured.</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n" }]
+        }] });
+
+class SolutionsSectionComponent extends BaseSectionComponent {
+    get fields() {
+        return super.getFields();
+    }
+    get hasFields() {
+        return super.hasFields;
+    }
+    trackField(index, field) {
+        return field.id || field.title || field.label || index.toString();
+    }
+    onSolutionClick(field) {
+        // Solutions are treated as items in the template
+        this.emitItemInteraction(field, { category: field.category });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SolutionsSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SolutionsSectionComponent, isStandalone: true, selector: "app-solutions-section", usesInheritance: true, ngImport: i0, template: "<div class=\"ai-section ai-section--solutions\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n    <span *ngIf=\"hasFields\" class=\"ai-section__badge\">\n      {{ fields.length }} {{ fields.length === 1 ? 'solution' : 'solutions' }}\n    </span>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"hasFields; else solutionsEmpty\">\n      <div class=\"solutions-grid\">\n        <article\n          *ngFor=\"let field of fields; trackBy: trackField\"\n          class=\"solution-card\"\n          role=\"button\"\n          tabindex=\"0\"\n          (click)=\"onSolutionClick(field)\"\n          (keydown.enter)=\"onSolutionClick(field)\"\n          (keydown.space)=\"$event.preventDefault(); onSolutionClick(field)\"\n        >\n          <!-- Header: Title and Category -->\n          <header class=\"solution-card__header\">\n            <h3 class=\"solution-card__title\">\n              {{ field.title || field.label }}\n            </h3>\n            <div class=\"solution-card__badges\" *ngIf=\"field.category\">\n              <span *ngIf=\"field.category\" class=\"solution-card__badge solution-card__badge--category\">\n                {{ field.category }}\n              </span>\n            </div>\n          </header>\n\n          <!-- Description -->\n          <p *ngIf=\"field.description\" class=\"solution-card__description\">\n            {{ field.description }}\n          </p>\n\n          <!-- Benefits/Features -->\n          <ul *ngIf=\"field.benefits?.length\" class=\"solution-card__benefits\">\n            <li *ngFor=\"let benefit of field.benefits | slice:0:4\" class=\"solution-card__benefit\">\n              <lucide-icon name=\"check\" size=\"14\" class=\"solution-card__benefit-icon\"></lucide-icon>\n              <span class=\"solution-card__benefit-text\">{{ benefit }}</span>\n            </li>\n          </ul>\n\n          <!-- Meta Information -->\n          <footer *ngIf=\"field.deliveryTime || field.teamSize || field.outcomes?.length\" class=\"solution-card__footer\">\n            <div *ngIf=\"field.deliveryTime\" class=\"solution-card__meta\">\n              <lucide-icon name=\"clock\" size=\"14\" class=\"solution-card__meta-icon\"></lucide-icon>\n              <span class=\"solution-card__meta-text\">{{ field.deliveryTime }}</span>\n            </div>\n            <div *ngIf=\"field.teamSize\" class=\"solution-card__meta\">\n              <lucide-icon name=\"users\" size=\"14\" class=\"solution-card__meta-icon\"></lucide-icon>\n              <span class=\"solution-card__meta-text\">{{ field.teamSize }}</span>\n            </div>\n            <ng-container *ngIf=\"field.outcomes as outcomes\">\n              <div *ngIf=\"outcomes[0]\" class=\"solution-card__meta\">\n                <lucide-icon name=\"trending-up\" size=\"14\" class=\"solution-card__meta-icon\"></lucide-icon>\n                <span class=\"solution-card__meta-text\">{{ outcomes[0] }}</span>\n              </div>\n              <div *ngIf=\"outcomes[1]\" class=\"solution-card__meta\">\n                <lucide-icon name=\"sparkles\" size=\"14\" class=\"solution-card__meta-icon\"></lucide-icon>\n                <span class=\"solution-card__meta-text\">{{ outcomes[1] }}</span>\n              </div>\n            </ng-container>\n          </footer>\n        </article>\n      </div>\n    </ng-container>\n\n    <ng-template #solutionsEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"sparkles\" size=\"32\" class=\"section-empty__icon\"></lucide-icon>\n        <p class=\"section-empty__text\">No solutions available</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: LucideIconsModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SolutionsSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-solutions-section', standalone: true, imports: [CommonModule, LucideIconsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ai-section ai-section--solutions\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n    <span *ngIf=\"hasFields\" class=\"ai-section__badge\">\n      {{ fields.length }} {{ fields.length === 1 ? 'solution' : 'solutions' }}\n    </span>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"hasFields; else solutionsEmpty\">\n      <div class=\"solutions-grid\">\n        <article\n          *ngFor=\"let field of fields; trackBy: trackField\"\n          class=\"solution-card\"\n          role=\"button\"\n          tabindex=\"0\"\n          (click)=\"onSolutionClick(field)\"\n          (keydown.enter)=\"onSolutionClick(field)\"\n          (keydown.space)=\"$event.preventDefault(); onSolutionClick(field)\"\n        >\n          <!-- Header: Title and Category -->\n          <header class=\"solution-card__header\">\n            <h3 class=\"solution-card__title\">\n              {{ field.title || field.label }}\n            </h3>\n            <div class=\"solution-card__badges\" *ngIf=\"field.category\">\n              <span *ngIf=\"field.category\" class=\"solution-card__badge solution-card__badge--category\">\n                {{ field.category }}\n              </span>\n            </div>\n          </header>\n\n          <!-- Description -->\n          <p *ngIf=\"field.description\" class=\"solution-card__description\">\n            {{ field.description }}\n          </p>\n\n          <!-- Benefits/Features -->\n          <ul *ngIf=\"field.benefits?.length\" class=\"solution-card__benefits\">\n            <li *ngFor=\"let benefit of field.benefits | slice:0:4\" class=\"solution-card__benefit\">\n              <lucide-icon name=\"check\" size=\"14\" class=\"solution-card__benefit-icon\"></lucide-icon>\n              <span class=\"solution-card__benefit-text\">{{ benefit }}</span>\n            </li>\n          </ul>\n\n          <!-- Meta Information -->\n          <footer *ngIf=\"field.deliveryTime || field.teamSize || field.outcomes?.length\" class=\"solution-card__footer\">\n            <div *ngIf=\"field.deliveryTime\" class=\"solution-card__meta\">\n              <lucide-icon name=\"clock\" size=\"14\" class=\"solution-card__meta-icon\"></lucide-icon>\n              <span class=\"solution-card__meta-text\">{{ field.deliveryTime }}</span>\n            </div>\n            <div *ngIf=\"field.teamSize\" class=\"solution-card__meta\">\n              <lucide-icon name=\"users\" size=\"14\" class=\"solution-card__meta-icon\"></lucide-icon>\n              <span class=\"solution-card__meta-text\">{{ field.teamSize }}</span>\n            </div>\n            <ng-container *ngIf=\"field.outcomes as outcomes\">\n              <div *ngIf=\"outcomes[0]\" class=\"solution-card__meta\">\n                <lucide-icon name=\"trending-up\" size=\"14\" class=\"solution-card__meta-icon\"></lucide-icon>\n                <span class=\"solution-card__meta-text\">{{ outcomes[0] }}</span>\n              </div>\n              <div *ngIf=\"outcomes[1]\" class=\"solution-card__meta\">\n                <lucide-icon name=\"sparkles\" size=\"14\" class=\"solution-card__meta-icon\"></lucide-icon>\n                <span class=\"solution-card__meta-text\">{{ outcomes[1] }}</span>\n              </div>\n            </ng-container>\n          </footer>\n        </article>\n      </div>\n    </ng-container>\n\n    <ng-template #solutionsEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"sparkles\" size=\"32\" class=\"section-empty__icon\"></lucide-icon>\n        <p class=\"section-empty__text\">No solutions available</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n" }]
+        }] });
+
+class ContactCardSectionComponent extends BaseSectionComponent {
+    constructor() {
+        super(...arguments);
+        this.trackContact = (_index, contact) => contact.id ?? this.getContactEmail(contact) ?? this.getContactName(contact) ?? `contact-${_index}`;
+    }
+    get contacts() {
+        return super.getFields();
+    }
+    get hasContacts() {
+        return super.hasFields;
+    }
+    onContactClick(field) {
+        this.emitFieldInteraction(field);
+    }
+    getContactName(contact) {
+        return (contact.contact?.name ??
+            contact.name ??
+            contact.title ??
+            contact.label ??
+            contact.contact?.email ??
+            contact.email ??
+            'Unnamed contact');
+    }
+    getContactRole(contact) {
+        // Prioritize title field as it often contains the role description
+        if (contact.title) {
+            const role = contact.contact?.role ?? contact.role;
+            // Combine title and role if both exist
+            return role ? `${contact.title} ${role}` : contact.title;
+        }
+        return contact.contact?.role ?? contact.role ?? undefined;
+    }
+    getContactTitle(contact) {
+        return contact.title ?? contact.contact?.role ?? contact.role ?? undefined;
+    }
+    getContactEmail(contact) {
+        return contact.contact?.email ?? contact.email ?? undefined;
+    }
+    getContactPhone(contact) {
+        return contact.contact?.phone ?? contact.phone ?? undefined;
+    }
+    getContactAvatar(contact) {
+        return contact.contact?.avatar ?? contact.avatar ?? undefined;
+    }
+    getInitials(name) {
+        if (!name) {
+            return 'NA';
+        }
+        return name
+            .split(' ')
+            .filter(Boolean)
+            .slice(0, 2)
+            .map((part) => part.charAt(0).toUpperCase())
+            .join('');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContactCardSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ContactCardSectionComponent, isStandalone: true, selector: "app-contact-card-section", usesInheritance: true, ngImport: i0, template: "<div class=\"ai-section ai-section--contact\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n    <span *ngIf=\"hasContacts\" class=\"ai-section__badge\">\n      {{ contacts.length }} {{ contacts.length === 1 ? 'contact' : 'contacts' }}\n    </span>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"hasContacts; else contactEmpty\">\n      <div class=\"contact-grid\">\n        <article\n          *ngFor=\"let contact of contacts; trackBy: trackContact\"\n          class=\"contact-card\"\n          role=\"button\"\n          tabindex=\"0\"\n          (click)=\"onContactClick(contact)\"\n          (keydown.enter)=\"onContactClick(contact)\"\n          (keydown.space)=\"$event.preventDefault(); onContactClick(contact)\"\n        >\n          <!-- Header: Avatar and Name/Role -->\n          <header class=\"contact-card__header\">\n            <div class=\"contact-card__avatar\">\n              <ng-container *ngIf=\"getContactAvatar(contact) as avatar; else contactInitials\">\n                <img [src]=\"avatar\" [alt]=\"getContactName(contact)\" class=\"contact-card__avatar-img\" />\n              </ng-container>\n              <ng-template #contactInitials>\n                <span class=\"contact-card__initials\">\n                  {{ getInitials(getContactName(contact)) }}\n                </span>\n              </ng-template>\n            </div>\n            <div class=\"contact-card__header-content\">\n              <h3 class=\"contact-card__name\">{{ getContactName(contact) }}</h3>\n              <p *ngIf=\"getContactRole(contact) as role\" class=\"contact-card__role\">{{ role }}</p>\n            </div>\n          </header>\n\n          <!-- Contact Information -->\n          <div class=\"contact-card__meta\">\n            <a\n              *ngIf=\"getContactEmail(contact) as email\"\n              class=\"contact-card__meta-item contact-card__meta-item--link\"\n              href=\"mailto:{{ email }}\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <lucide-icon name=\"mail\" size=\"14\" class=\"contact-card__meta-icon\"></lucide-icon>\n              <span class=\"contact-card__meta-text\">{{ email }}</span>\n            </a>\n\n            <a\n              *ngIf=\"getContactPhone(contact) as phone\"\n              class=\"contact-card__meta-item contact-card__meta-item--link\"\n              href=\"tel:{{ phone }}\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <lucide-icon name=\"phone\" size=\"14\" class=\"contact-card__meta-icon\"></lucide-icon>\n              <span class=\"contact-card__meta-text\">{{ phone }}</span>\n            </a>\n\n            <div *ngIf=\"contact.department\" class=\"contact-card__meta-item\">\n              <lucide-icon name=\"building\" size=\"14\" class=\"contact-card__meta-icon\"></lucide-icon>\n              <span class=\"contact-card__meta-text\">{{ contact.department }}</span>\n            </div>\n\n            <div *ngIf=\"contact.location\" class=\"contact-card__meta-item\">\n              <lucide-icon name=\"map-pin\" size=\"14\" class=\"contact-card__meta-icon\"></lucide-icon>\n              <span class=\"contact-card__meta-text\">{{ contact.location }}</span>\n            </div>\n          </div>\n        </article>\n      </div>\n    </ng-container>\n\n    <ng-template #contactEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"user\" size=\"32\" class=\"section-empty__icon\"></lucide-icon>\n        <p class=\"section-empty__text\">No contacts available</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: LucideIconsModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContactCardSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-contact-card-section', standalone: true, imports: [CommonModule, LucideIconsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ai-section ai-section--contact\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n    <span *ngIf=\"hasContacts\" class=\"ai-section__badge\">\n      {{ contacts.length }} {{ contacts.length === 1 ? 'contact' : 'contacts' }}\n    </span>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"hasContacts; else contactEmpty\">\n      <div class=\"contact-grid\">\n        <article\n          *ngFor=\"let contact of contacts; trackBy: trackContact\"\n          class=\"contact-card\"\n          role=\"button\"\n          tabindex=\"0\"\n          (click)=\"onContactClick(contact)\"\n          (keydown.enter)=\"onContactClick(contact)\"\n          (keydown.space)=\"$event.preventDefault(); onContactClick(contact)\"\n        >\n          <!-- Header: Avatar and Name/Role -->\n          <header class=\"contact-card__header\">\n            <div class=\"contact-card__avatar\">\n              <ng-container *ngIf=\"getContactAvatar(contact) as avatar; else contactInitials\">\n                <img [src]=\"avatar\" [alt]=\"getContactName(contact)\" class=\"contact-card__avatar-img\" />\n              </ng-container>\n              <ng-template #contactInitials>\n                <span class=\"contact-card__initials\">\n                  {{ getInitials(getContactName(contact)) }}\n                </span>\n              </ng-template>\n            </div>\n            <div class=\"contact-card__header-content\">\n              <h3 class=\"contact-card__name\">{{ getContactName(contact) }}</h3>\n              <p *ngIf=\"getContactRole(contact) as role\" class=\"contact-card__role\">{{ role }}</p>\n            </div>\n          </header>\n\n          <!-- Contact Information -->\n          <div class=\"contact-card__meta\">\n            <a\n              *ngIf=\"getContactEmail(contact) as email\"\n              class=\"contact-card__meta-item contact-card__meta-item--link\"\n              href=\"mailto:{{ email }}\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <lucide-icon name=\"mail\" size=\"14\" class=\"contact-card__meta-icon\"></lucide-icon>\n              <span class=\"contact-card__meta-text\">{{ email }}</span>\n            </a>\n\n            <a\n              *ngIf=\"getContactPhone(contact) as phone\"\n              class=\"contact-card__meta-item contact-card__meta-item--link\"\n              href=\"tel:{{ phone }}\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <lucide-icon name=\"phone\" size=\"14\" class=\"contact-card__meta-icon\"></lucide-icon>\n              <span class=\"contact-card__meta-text\">{{ phone }}</span>\n            </a>\n\n            <div *ngIf=\"contact.department\" class=\"contact-card__meta-item\">\n              <lucide-icon name=\"building\" size=\"14\" class=\"contact-card__meta-icon\"></lucide-icon>\n              <span class=\"contact-card__meta-text\">{{ contact.department }}</span>\n            </div>\n\n            <div *ngIf=\"contact.location\" class=\"contact-card__meta-item\">\n              <lucide-icon name=\"map-pin\" size=\"14\" class=\"contact-card__meta-icon\"></lucide-icon>\n              <span class=\"contact-card__meta-text\">{{ contact.location }}</span>\n            </div>\n          </div>\n        </article>\n      </div>\n    </ng-container>\n\n    <ng-template #contactEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"user\" size=\"32\" class=\"section-empty__icon\"></lucide-icon>\n        <p class=\"section-empty__text\">No contacts available</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n" }]
+        }] });
+
+class NetworkCardSectionComponent extends BaseSectionComponent {
+    constructor() {
+        super(...arguments);
+        this.trackField = (_index, field) => field.id ?? field.label ?? `network-${_index}`;
+    }
+    get fields() {
+        return super.getFields();
+    }
+    get hasFields() {
+        return super.hasFields;
+    }
+    onItemClick(field) {
+        // Emit as field interaction (network fields are treated as fields)
+        this.emitFieldInteraction(field);
+    }
+    /**
+     * Get display value, hiding "Streaming…" placeholder text
+     * Inline implementation to avoid TypeScript override conflicts
+     */
+    getDisplayValue(field) {
+        const value = field.value;
+        if (value === 'Streaming…' || value === 'Streaming...') {
+            return '';
+        }
+        return value != null ? String(value) : '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NetworkCardSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NetworkCardSectionComponent, isStandalone: true, selector: "app-network-card-section", usesInheritance: true, ngImport: i0, template: "<div class=\"ai-section ai-section--network-card\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n    <span *ngIf=\"fields.length\" class=\"ai-section__badge\">\n      {{ fields.length }} {{ fields.length === 1 ? 'metric' : 'metrics' }}\n    </span>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"fields.length; else networkEmpty\">\n      <div class=\"network-grid\">\n        <article\n          *ngFor=\"let field of fields; trackBy: trackField\"\n          class=\"network-card\"\n          role=\"button\"\n          tabindex=\"0\"\n          (click)=\"onItemClick(field)\"\n          (keydown.enter)=\"onItemClick(field)\"\n          (keydown.space)=\"$event.preventDefault(); onItemClick(field)\"\n        >\n          <div class=\"network-card__content\">\n            <span class=\"network-card__label\">\n              {{ field.label || field.title }}\n            </span>\n            <span *ngIf=\"getDisplayValue(field)\" class=\"network-card__value\">\n              {{ getDisplayValue(field) }}\n            </span>\n          </div>\n        </article>\n      </div>\n    </ng-container>\n\n    <ng-template #networkEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"network\" size=\"32\" class=\"section-empty__icon\"></lucide-icon>\n        <p class=\"section-empty__text\">No network data available</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: LucideIconsModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NetworkCardSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-network-card-section', standalone: true, imports: [CommonModule, LucideIconsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ai-section ai-section--network-card\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n    <span *ngIf=\"fields.length\" class=\"ai-section__badge\">\n      {{ fields.length }} {{ fields.length === 1 ? 'metric' : 'metrics' }}\n    </span>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"fields.length; else networkEmpty\">\n      <div class=\"network-grid\">\n        <article\n          *ngFor=\"let field of fields; trackBy: trackField\"\n          class=\"network-card\"\n          role=\"button\"\n          tabindex=\"0\"\n          (click)=\"onItemClick(field)\"\n          (keydown.enter)=\"onItemClick(field)\"\n          (keydown.space)=\"$event.preventDefault(); onItemClick(field)\"\n        >\n          <div class=\"network-card__content\">\n            <span class=\"network-card__label\">\n              {{ field.label || field.title }}\n            </span>\n            <span *ngIf=\"getDisplayValue(field)\" class=\"network-card__value\">\n              {{ getDisplayValue(field) }}\n            </span>\n          </div>\n        </article>\n      </div>\n    </ng-container>\n\n    <ng-template #networkEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"network\" size=\"32\" class=\"section-empty__icon\"></lucide-icon>\n        <p class=\"section-empty__text\">No network data available</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n" }]
+        }] });
+
+class MapSectionComponent extends BaseSectionComponent {
+    get locations() {
+        const fromFields = super.getFields();
+        const mappedFields = fromFields
+            .map((field) => ({
+            ...field,
+            name: field.name || field.title || field.label || field.id || 'Unknown Location'
+        }))
+            .filter((field) => !!field.name && typeof field.name === 'string');
+        const items = super.getItems();
+        if (items.length) {
+            const mappedItems = items
+                .map((item) => ({
+                ...item,
+                name: item.name || item.title || item.id || 'Unknown Location'
+            }))
+                .filter((item) => !!item.name && typeof item.name === 'string');
+            return mappedFields.concat(mappedItems);
+        }
+        return mappedFields;
+    }
+    get hasItems() {
+        return this.locations.length > 0;
+    }
+    onLocationClick(location) {
+        this.emitItemInteraction(location);
+    }
+    formatCoordinates(location) {
+        if (!location.coordinates) {
+            return null;
+        }
+        const { lat, lng } = location.coordinates;
+        return `${lat.toFixed(2)}, ${lng.toFixed(2)}`;
+    }
+    trackItem(index, location) {
+        return location.id ?? `${location.name}-${index}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MapSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MapSectionComponent, isStandalone: true, selector: "app-map-section", usesInheritance: true, ngImport: i0, template: "<div class=\"ai-section ai-section--map\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n    <span *ngIf=\"hasItems\" class=\"ai-section__badge\">\n      {{ locations.length }} {{ locations.length === 1 ? 'location' : 'locations' }}\n    </span>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"hasItems; else mapEmpty\">\n      <div class=\"map-grid\">\n        <article\n          *ngFor=\"let location of locations; trackBy: trackItem\"\n          class=\"map-card\"\n          role=\"button\"\n          tabindex=\"0\"\n          (click)=\"onLocationClick(location)\"\n          (keydown.enter)=\"onLocationClick(location)\"\n          (keydown.space)=\"$event.preventDefault(); onLocationClick(location)\"\n        >\n          <!-- Header: Title and Badge -->\n          <header class=\"map-card__header\">\n            <div class=\"map-card__header-content\">\n              <h3 class=\"map-card__title\">\n                {{ location.name }}\n              </h3>\n              <div class=\"map-card__badges\" *ngIf=\"location.type\">\n                <span class=\"map-card__badge\">\n                  {{ location.type }}\n                </span>\n              </div>\n            </div>\n          </header>\n\n          <!-- Address -->\n          <div *ngIf=\"location.address\" class=\"map-card__address-wrapper\">\n            <lucide-icon name=\"map-pin\" size=\"14\" class=\"map-card__address-icon\"></lucide-icon>\n            <p class=\"map-card__address\">\n              {{ location.address }}\n            </p>\n          </div>\n\n          <!-- Meta Information -->\n          <footer *ngIf=\"formatCoordinates(location) || location.value\" class=\"map-card__footer\">\n            <div *ngIf=\"formatCoordinates(location) as coords\" class=\"map-card__meta\">\n              <lucide-icon name=\"map-pin\" size=\"14\" class=\"map-card__meta-icon\"></lucide-icon>\n              <span class=\"map-card__meta-text\">{{ coords }}</span>\n            </div>\n            <div *ngIf=\"location.value\" class=\"map-card__meta\">\n              <lucide-icon name=\"activity\" size=\"14\" class=\"map-card__meta-icon\"></lucide-icon>\n              <span class=\"map-card__meta-text\">{{ location.value }}</span>\n            </div>\n          </footer>\n        </article>\n      </div>\n    </ng-container>\n\n    <ng-template #mapEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"map-pin\" size=\"32\" class=\"section-empty__icon\"></lucide-icon>\n        <p class=\"section-empty__text\">No location data provided</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: LucideIconsModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MapSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-map-section', standalone: true, imports: [CommonModule, LucideIconsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ai-section ai-section--map\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n    <span *ngIf=\"hasItems\" class=\"ai-section__badge\">\n      {{ locations.length }} {{ locations.length === 1 ? 'location' : 'locations' }}\n    </span>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"hasItems; else mapEmpty\">\n      <div class=\"map-grid\">\n        <article\n          *ngFor=\"let location of locations; trackBy: trackItem\"\n          class=\"map-card\"\n          role=\"button\"\n          tabindex=\"0\"\n          (click)=\"onLocationClick(location)\"\n          (keydown.enter)=\"onLocationClick(location)\"\n          (keydown.space)=\"$event.preventDefault(); onLocationClick(location)\"\n        >\n          <!-- Header: Title and Badge -->\n          <header class=\"map-card__header\">\n            <div class=\"map-card__header-content\">\n              <h3 class=\"map-card__title\">\n                {{ location.name }}\n              </h3>\n              <div class=\"map-card__badges\" *ngIf=\"location.type\">\n                <span class=\"map-card__badge\">\n                  {{ location.type }}\n                </span>\n              </div>\n            </div>\n          </header>\n\n          <!-- Address -->\n          <div *ngIf=\"location.address\" class=\"map-card__address-wrapper\">\n            <lucide-icon name=\"map-pin\" size=\"14\" class=\"map-card__address-icon\"></lucide-icon>\n            <p class=\"map-card__address\">\n              {{ location.address }}\n            </p>\n          </div>\n\n          <!-- Meta Information -->\n          <footer *ngIf=\"formatCoordinates(location) || location.value\" class=\"map-card__footer\">\n            <div *ngIf=\"formatCoordinates(location) as coords\" class=\"map-card__meta\">\n              <lucide-icon name=\"map-pin\" size=\"14\" class=\"map-card__meta-icon\"></lucide-icon>\n              <span class=\"map-card__meta-text\">{{ coords }}</span>\n            </div>\n            <div *ngIf=\"location.value\" class=\"map-card__meta\">\n              <lucide-icon name=\"activity\" size=\"14\" class=\"map-card__meta-icon\"></lucide-icon>\n              <span class=\"map-card__meta-text\">{{ location.value }}</span>\n            </div>\n          </footer>\n        </article>\n      </div>\n    </ng-container>\n\n    <ng-template #mapEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"map-pin\" size=\"32\" class=\"section-empty__icon\"></lucide-icon>\n        <p class=\"section-empty__text\">No location data provided</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n" }]
+        }] });
+
+class ChartSectionComponent extends BaseSectionComponent {
+    constructor() {
+        super(...arguments);
+        this.palette = ['#FF7900', '#FF9A3C', '#CC5F00', '#FFB873', '#FFD8B0'];
+    }
+    get chartType() {
+        return (this.section.chartType ?? 'bar').toLowerCase();
+    }
+    get fields() {
+        const data = super.getFields();
+        return data
+            .filter((field) => typeof field.value === 'number')
+            .map((field) => ({ ...field, value: Number(field.value) }));
+    }
+    get hasFields() {
+        return this.fields.length > 0;
+    }
+    get hasData() {
+        return this.fields.length > 0;
+    }
+    get maxValue() {
+        if (!this.hasData) {
+            return 0;
+        }
+        return Math.max(...this.fields.map((field) => field.value));
+    }
+    get totalValue() {
+        if (!this.hasData) {
+            return 0;
+        }
+        return this.fields.reduce((total, field) => total + field.value, 0);
+    }
+    onFieldClick(field) {
+        this.emitFieldInteraction(field);
+    }
+    getBarWidth(field) {
+        if (!this.maxValue) {
+            return '0%';
+        }
+        const percentage = Math.min((field.value / this.maxValue) * 100, 100);
+        return `${percentage}%`;
+    }
+    getPercentage(field) {
+        if (!this.totalValue) {
+            return '0%';
+        }
+        return `${((field.value / this.totalValue) * 100).toFixed(1)}%`;
+    }
+    getChartIcon() {
+        switch (this.chartType) {
+            case 'pie':
+            case 'doughnut':
+                return 'pie-chart';
+            case 'line':
+                return 'trending-up';
+            default:
+                return 'bar-chart-3';
+        }
+    }
+    getColor(field, index) {
+        return field.color ?? this.palette[index % this.palette.length];
+    }
+    /**
+     * Get display value, hiding "Streaming…" placeholder text
+     * Inline implementation to avoid TypeScript override conflicts
+     */
+    getDisplayValue(field) {
+        const value = field.value;
+        // Chart values are numbers, but check string representation just in case
+        if (typeof value === 'string' && (value === 'Streaming…' || value === 'Streaming...')) {
+            return '';
+        }
+        return String(value ?? '');
+    }
+    trackField(index, field) {
+        return field.id ?? `${field.label ?? field.title}-${index}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChartSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ChartSectionComponent, isStandalone: true, selector: "app-chart-section", usesInheritance: true, ngImport: i0, template: "<div class=\"ai-section ai-section--chart\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n    <span *ngIf=\"fields.length\" class=\"ai-section__badge\">\n      {{ fields.length }} {{ fields.length === 1 ? 'item' : 'items' }}\n    </span>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"hasData; else chartEmpty\">\n      <ng-container [ngSwitch]=\"chartType\">\n      <div *ngSwitchCase=\"'pie'\" class=\"chart-section__split\">\n        <div class=\"chart-section__list\">\n          <article\n            *ngFor=\"let field of fields; trackBy: trackField; let idx = index\"\n            class=\"chart-card chart-card--pie\"\n            role=\"button\"\n            tabindex=\"0\"\n            (click)=\"onFieldClick(field)\"\n            (keydown.enter)=\"onFieldClick(field)\"\n            (keydown.space)=\"$event.preventDefault(); onFieldClick(field)\"\n          >\n            <div class=\"h-3 w-3 rounded-full flex-shrink-0\" [ngStyle]=\"{ backgroundColor: getColor(field, idx) }\"></div>\n            <div class=\"flex-1 min-w-0\">\n              <p class=\"text-sm font-semibold text-foreground\">{{ field.label || field.title }}</p>\n              <p class=\"text-xs text-muted-foreground\">{{ getPercentage(field) }} &middot; {{ getDisplayValue(field) }}</p>\n            </div>\n          </article>\n        </div>\n        <div class=\"chart-card\">\n          <p>Total: <span class=\"font-semibold text-foreground\">{{ totalValue }}</span></p>\n          <p class=\"mt-2\">Tap any segment to focus on the underlying metric.</p>\n        </div>\n      </div>\n\n      <div *ngSwitchDefault class=\"chart-section__list\">\n        <article\n          *ngFor=\"let field of fields; trackBy: trackField; let idx = index\"\n          class=\"chart-card chart-card--with-progress\"\n          role=\"button\"\n          tabindex=\"0\"\n          (click)=\"onFieldClick(field)\"\n          (keydown.enter)=\"onFieldClick(field)\"\n          (keydown.space)=\"$event.preventDefault(); onFieldClick(field)\"\n        >\n          <div class=\"chart-card__content-wrapper\">\n            <div class=\"flex items-center justify-between gap-4 w-full\">\n              <p class=\"text-sm font-semibold text-foreground\">\n                {{ field.label || field.title }}\n              </p>\n              <span class=\"text-sm text-muted-foreground\">{{ field.value }}</span>\n            </div>\n          </div>\n          <div class=\"chart-card__progress-wrapper\">\n            <div class=\"h-2 w-full rounded-full bg-muted/30\">\n              <div\n                class=\"h-full rounded-full transition-all duration-500\"\n                [ngStyle]=\"{ width: getBarWidth(field), backgroundColor: getColor(field, idx) }\"\n              ></div>\n            </div>\n          </div>\n        </article>\n      </div>\n      </ng-container>\n    </ng-container>\n\n    <ng-template #chartEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"activity\" size=\"32\" class=\"mb-3 opacity-60\"></lucide-icon>\n        <p class=\"text-sm\">No chart data available.</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: LucideIconsModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChartSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-chart-section', standalone: true, imports: [CommonModule, LucideIconsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ai-section ai-section--chart\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n    <span *ngIf=\"fields.length\" class=\"ai-section__badge\">\n      {{ fields.length }} {{ fields.length === 1 ? 'item' : 'items' }}\n    </span>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"hasData; else chartEmpty\">\n      <ng-container [ngSwitch]=\"chartType\">\n      <div *ngSwitchCase=\"'pie'\" class=\"chart-section__split\">\n        <div class=\"chart-section__list\">\n          <article\n            *ngFor=\"let field of fields; trackBy: trackField; let idx = index\"\n            class=\"chart-card chart-card--pie\"\n            role=\"button\"\n            tabindex=\"0\"\n            (click)=\"onFieldClick(field)\"\n            (keydown.enter)=\"onFieldClick(field)\"\n            (keydown.space)=\"$event.preventDefault(); onFieldClick(field)\"\n          >\n            <div class=\"h-3 w-3 rounded-full flex-shrink-0\" [ngStyle]=\"{ backgroundColor: getColor(field, idx) }\"></div>\n            <div class=\"flex-1 min-w-0\">\n              <p class=\"text-sm font-semibold text-foreground\">{{ field.label || field.title }}</p>\n              <p class=\"text-xs text-muted-foreground\">{{ getPercentage(field) }} &middot; {{ getDisplayValue(field) }}</p>\n            </div>\n          </article>\n        </div>\n        <div class=\"chart-card\">\n          <p>Total: <span class=\"font-semibold text-foreground\">{{ totalValue }}</span></p>\n          <p class=\"mt-2\">Tap any segment to focus on the underlying metric.</p>\n        </div>\n      </div>\n\n      <div *ngSwitchDefault class=\"chart-section__list\">\n        <article\n          *ngFor=\"let field of fields; trackBy: trackField; let idx = index\"\n          class=\"chart-card chart-card--with-progress\"\n          role=\"button\"\n          tabindex=\"0\"\n          (click)=\"onFieldClick(field)\"\n          (keydown.enter)=\"onFieldClick(field)\"\n          (keydown.space)=\"$event.preventDefault(); onFieldClick(field)\"\n        >\n          <div class=\"chart-card__content-wrapper\">\n            <div class=\"flex items-center justify-between gap-4 w-full\">\n              <p class=\"text-sm font-semibold text-foreground\">\n                {{ field.label || field.title }}\n              </p>\n              <span class=\"text-sm text-muted-foreground\">{{ field.value }}</span>\n            </div>\n          </div>\n          <div class=\"chart-card__progress-wrapper\">\n            <div class=\"h-2 w-full rounded-full bg-muted/30\">\n              <div\n                class=\"h-full rounded-full transition-all duration-500\"\n                [ngStyle]=\"{ width: getBarWidth(field), backgroundColor: getColor(field, idx) }\"\n              ></div>\n            </div>\n          </div>\n        </article>\n      </div>\n      </ng-container>\n    </ng-container>\n\n    <ng-template #chartEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"activity\" size=\"32\" class=\"mb-3 opacity-60\"></lucide-icon>\n        <p class=\"text-sm\">No chart data available.</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n" }]
+        }] });
+
+class OverviewSectionComponent extends BaseSectionComponent {
+    constructor() {
+        super(...arguments);
+        this.utils = inject(SectionUtilsService);
+    }
+    get fields() {
+        return super.getFields();
+    }
+    get hasFields() {
+        return super.hasFields;
+    }
+    onFieldClick(field) {
+        this.emitFieldInteraction(field);
+    }
+    trackField(index, field) {
+        return field.id ?? `${field.label}-${index}`;
+    }
+    getStatusClasses(status) {
+        return this.utils.getStatusClasses(status);
+    }
+    /**
+     * Get display value, hiding "Streaming…" placeholder text
+     * Inline implementation to avoid TypeScript override conflicts
+     */
+    getDisplayValue(field) {
+        const value = field.value;
+        if (value === 'Streaming…' || value === 'Streaming...') {
+            return '';
+        }
+        return value != null ? String(value) : '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverviewSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OverviewSectionComponent, isStandalone: true, selector: "app-overview-section", usesInheritance: true, ngImport: i0, template: "<div class=\"ai-section ai-section--overview\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"hasFields; else overviewEmpty\">\n      <div class=\"overview-grid\">\n        <article\n          *ngFor=\"let field of fields; trackBy: trackField\"\n          class=\"overview-card\"\n          role=\"button\"\n          tabindex=\"0\"\n          (click)=\"onFieldClick(field)\"\n          (keydown.enter)=\"onFieldClick(field)\"\n          (keydown.space)=\"$event.preventDefault(); onFieldClick(field)\"\n        >\n          <div class=\"overview-card__content\">\n            <span class=\"overview-card__label\">\n              {{ field.label || field.title }}\n            </span>\n            <span class=\"overview-card__value\">\n              {{ getDisplayValue(field) }}\n            </span>\n          </div>\n        </article>\n      </div>\n    </ng-container>\n\n    <ng-template #overviewEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"alert-circle\" [size]=\"32\" class=\"mb-4 opacity-50\" aria-hidden=\"true\"></lucide-icon>\n        <p class=\"text-sm\">No overview information available</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: LucideIconsModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverviewSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-overview-section', standalone: true, imports: [CommonModule, LucideIconsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ai-section ai-section--overview\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"hasFields; else overviewEmpty\">\n      <div class=\"overview-grid\">\n        <article\n          *ngFor=\"let field of fields; trackBy: trackField\"\n          class=\"overview-card\"\n          role=\"button\"\n          tabindex=\"0\"\n          (click)=\"onFieldClick(field)\"\n          (keydown.enter)=\"onFieldClick(field)\"\n          (keydown.space)=\"$event.preventDefault(); onFieldClick(field)\"\n        >\n          <div class=\"overview-card__content\">\n            <span class=\"overview-card__label\">\n              {{ field.label || field.title }}\n            </span>\n            <span class=\"overview-card__value\">\n              {{ getDisplayValue(field) }}\n            </span>\n          </div>\n        </article>\n      </div>\n    </ng-container>\n\n    <ng-template #overviewEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"alert-circle\" [size]=\"32\" class=\"mb-4 opacity-50\" aria-hidden=\"true\"></lucide-icon>\n        <p class=\"text-sm\">No overview information available</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n" }]
+        }] });
+
+class FallbackSectionComponent extends BaseSectionComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FallbackSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FallbackSectionComponent, isStandalone: true, selector: "app-fallback-section", usesInheritance: true, ngImport: i0, template: "<div class=\"ai-section\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title || 'Unsupported Section' }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <div class=\"section-empty\">\n      <lucide-icon name=\"alert-circle\" size=\"32\" class=\"mb-3 opacity-60\"></lucide-icon>\n      <p class=\"text-sm\">This section type is not yet customized. Add data or configure a renderer to display it.</p>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: LucideIconsModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FallbackSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-fallback-section', standalone: true, imports: [CommonModule, LucideIconsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ai-section\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title || 'Unsupported Section' }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <div class=\"section-empty\">\n      <lucide-icon name=\"alert-circle\" size=\"32\" class=\"mb-3 opacity-60\"></lucide-icon>\n      <p class=\"text-sm\">This section type is not yet customized. Add data or configure a renderer to display it.</p>\n    </div>\n  </div>\n</div>\n" }]
+        }] });
+
+class QuotationSectionComponent extends BaseSectionComponent {
+    get fields() {
+        return super.getFields();
+    }
+    get hasFields() {
+        return super.hasFields;
+    }
+    trackField(index, field) {
+        return field.id || `${field.quote?.substring(0, 20)}-${index}` || String(index);
+    }
+    onQuotationClick(field) {
+        this.emitFieldInteraction(field, { sectionTitle: this.section.title });
+    }
+    /**
+     * Get display quote, hiding "Streaming…" placeholder text
+     * Inline implementation to avoid TypeScript override conflicts
+     */
+    getDisplayQuote(field) {
+        const quote = field.quote || field.value;
+        if (quote === 'Streaming…' || quote === 'Streaming...') {
+            return '';
+        }
+        return quote != null ? String(quote) : '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QuotationSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QuotationSectionComponent, isStandalone: true, selector: "app-quotation-section", usesInheritance: true, ngImport: i0, template: "<div class=\"ai-section ai-section--quotation\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"hasFields; else quotationEmpty\">\n      <div class=\"section-grid section-grid--quotation\">\n        <article\n        *ngFor=\"let field of fields; trackBy: trackField; let idx = index\"\n        class=\"section-card section-card--quotation\"\n        role=\"button\"\n        tabindex=\"0\"\n        [class.field-streaming]=\"getFieldAnimationClass(getFieldId(field, idx), idx) === 'field-streaming'\"\n        [class.field-entered]=\"getFieldAnimationClass(getFieldId(field, idx), idx) === 'field-entered'\"\n        [class.field-stagger-0]=\"getFieldStaggerIndex(idx) === 0\"\n        [class.field-stagger-1]=\"getFieldStaggerIndex(idx) === 1\"\n        [class.field-stagger-2]=\"getFieldStaggerIndex(idx) === 2\"\n        [class.field-stagger-3]=\"getFieldStaggerIndex(idx) === 3\"\n        [class.field-stagger-4]=\"getFieldStaggerIndex(idx) === 4\"\n        [class.field-stagger-5]=\"getFieldStaggerIndex(idx) === 5\"\n        [class.field-stagger-6]=\"getFieldStaggerIndex(idx) === 6\"\n        [class.field-stagger-7]=\"getFieldStaggerIndex(idx) === 7\"\n        [class.field-stagger-8]=\"getFieldStaggerIndex(idx) === 8\"\n        [class.field-stagger-9]=\"getFieldStaggerIndex(idx) === 9\"\n        [class.field-stagger-10]=\"getFieldStaggerIndex(idx) === 10\"\n        [class.field-stagger-11]=\"getFieldStaggerIndex(idx) === 11\"\n        [class.field-stagger-12]=\"getFieldStaggerIndex(idx) === 12\"\n        [class.field-stagger-13]=\"getFieldStaggerIndex(idx) === 13\"\n        [class.field-stagger-14]=\"getFieldStaggerIndex(idx) === 14\"\n        [class.field-stagger-15]=\"getFieldStaggerIndex(idx) === 15\"\n        [attr.aria-label]=\"'Open quotation from ' + (field.author || 'unknown source')\"\n        (click)=\"onQuotationClick(field)\"\n        (keydown.enter)=\"onQuotationClick(field)\"\n        (keydown.space)=\"$event.preventDefault(); onQuotationClick(field)\"\n      >\n        <div class=\"quotation-card__quote\">\n          <lucide-icon name=\"quote\" [size]=\"24\" class=\"quotation-card__icon\" aria-hidden=\"true\"></lucide-icon>\n          <blockquote class=\"quotation-card__text\">\n            {{ getDisplayQuote(field) }}\n          </blockquote>\n        </div>\n\n        <footer class=\"quotation-card__footer\" *ngIf=\"field.author || field.source || field.date\">\n          <div class=\"quotation-card__author\" *ngIf=\"field.author\">\n            <span class=\"quotation-card__author-name\">{{ field.author }}</span>\n            <span class=\"quotation-card__author-role\" *ngIf=\"field.source\">{{ field.source }}</span>\n          </div>\n          <time class=\"quotation-card__date\" *ngIf=\"field.date\">{{ field.date }}</time>\n        </footer>\n      </article>\n      </div>\n    </ng-container>\n\n    <ng-template #quotationEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"message-square\" [size]=\"32\" class=\"mb-4 opacity-50\" aria-hidden=\"true\"></lucide-icon>\n        <p class=\"text-sm\">No quotations available</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: LucideIconsModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QuotationSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-quotation-section', standalone: true, imports: [CommonModule, LucideIconsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ai-section ai-section--quotation\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"hasFields; else quotationEmpty\">\n      <div class=\"section-grid section-grid--quotation\">\n        <article\n        *ngFor=\"let field of fields; trackBy: trackField; let idx = index\"\n        class=\"section-card section-card--quotation\"\n        role=\"button\"\n        tabindex=\"0\"\n        [class.field-streaming]=\"getFieldAnimationClass(getFieldId(field, idx), idx) === 'field-streaming'\"\n        [class.field-entered]=\"getFieldAnimationClass(getFieldId(field, idx), idx) === 'field-entered'\"\n        [class.field-stagger-0]=\"getFieldStaggerIndex(idx) === 0\"\n        [class.field-stagger-1]=\"getFieldStaggerIndex(idx) === 1\"\n        [class.field-stagger-2]=\"getFieldStaggerIndex(idx) === 2\"\n        [class.field-stagger-3]=\"getFieldStaggerIndex(idx) === 3\"\n        [class.field-stagger-4]=\"getFieldStaggerIndex(idx) === 4\"\n        [class.field-stagger-5]=\"getFieldStaggerIndex(idx) === 5\"\n        [class.field-stagger-6]=\"getFieldStaggerIndex(idx) === 6\"\n        [class.field-stagger-7]=\"getFieldStaggerIndex(idx) === 7\"\n        [class.field-stagger-8]=\"getFieldStaggerIndex(idx) === 8\"\n        [class.field-stagger-9]=\"getFieldStaggerIndex(idx) === 9\"\n        [class.field-stagger-10]=\"getFieldStaggerIndex(idx) === 10\"\n        [class.field-stagger-11]=\"getFieldStaggerIndex(idx) === 11\"\n        [class.field-stagger-12]=\"getFieldStaggerIndex(idx) === 12\"\n        [class.field-stagger-13]=\"getFieldStaggerIndex(idx) === 13\"\n        [class.field-stagger-14]=\"getFieldStaggerIndex(idx) === 14\"\n        [class.field-stagger-15]=\"getFieldStaggerIndex(idx) === 15\"\n        [attr.aria-label]=\"'Open quotation from ' + (field.author || 'unknown source')\"\n        (click)=\"onQuotationClick(field)\"\n        (keydown.enter)=\"onQuotationClick(field)\"\n        (keydown.space)=\"$event.preventDefault(); onQuotationClick(field)\"\n      >\n        <div class=\"quotation-card__quote\">\n          <lucide-icon name=\"quote\" [size]=\"24\" class=\"quotation-card__icon\" aria-hidden=\"true\"></lucide-icon>\n          <blockquote class=\"quotation-card__text\">\n            {{ getDisplayQuote(field) }}\n          </blockquote>\n        </div>\n\n        <footer class=\"quotation-card__footer\" *ngIf=\"field.author || field.source || field.date\">\n          <div class=\"quotation-card__author\" *ngIf=\"field.author\">\n            <span class=\"quotation-card__author-name\">{{ field.author }}</span>\n            <span class=\"quotation-card__author-role\" *ngIf=\"field.source\">{{ field.source }}</span>\n          </div>\n          <time class=\"quotation-card__date\" *ngIf=\"field.date\">{{ field.date }}</time>\n        </footer>\n      </article>\n      </div>\n    </ng-container>\n\n    <ng-template #quotationEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"message-square\" [size]=\"32\" class=\"mb-4 opacity-50\" aria-hidden=\"true\"></lucide-icon>\n        <p class=\"text-sm\">No quotations available</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n\n" }]
+        }] });
+
+class TextReferenceSectionComponent extends BaseSectionComponent {
+    get fields() {
+        return super.getFields();
+    }
+    get hasFields() {
+        return super.hasFields;
+    }
+    onReferenceClick(field) {
+        this.emitFieldInteraction(field, { sectionTitle: this.section.title });
+    }
+    openReference(field, event) {
+        if (field.url) {
+            event.stopPropagation();
+            window.open(field.url, '_blank', 'noopener,noreferrer');
+        }
+    }
+    /**
+     * Get display text, hiding "Streaming…" placeholder text
+     * Inline implementation to avoid TypeScript override conflicts
+     */
+    getDisplayText(field) {
+        const text = field.text || field.value;
+        if (text === 'Streaming…' || text === 'Streaming...') {
+            return '';
+        }
+        return text != null ? String(text) : '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextReferenceSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextReferenceSectionComponent, isStandalone: true, selector: "app-text-reference-section", usesInheritance: true, ngImport: i0, template: "<div class=\"ai-section ai-section--text-reference\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"hasFields; else referenceEmpty\">\n      <div class=\"section-grid section-grid--reference\">\n        <article\n        *ngFor=\"let field of fields\"\n        class=\"section-card section-card--reference\"\n        role=\"button\"\n        tabindex=\"0\"\n        [attr.aria-label]=\"'Open reference ' + (field.title || field.category || 'details')\"\n        (click)=\"onReferenceClick(field)\"\n        (keydown.enter)=\"onReferenceClick(field)\"\n        (keydown.space)=\"$event.preventDefault(); onReferenceClick(field)\"\n      >\n        <div class=\"reference-card__content\">\n          <p class=\"reference-card__text\">\n            {{ getDisplayText(field) }}\n          </p>\n        </div>\n\n        <footer class=\"reference-card__footer\" *ngIf=\"field.referenceText || field.source || field.date || field.category\">\n          <div class=\"reference-card__meta\">\n            <span class=\"reference-card__category\" *ngIf=\"field.category\">{{ field.category }}</span>\n            <span class=\"reference-card__source\" *ngIf=\"field.source\">{{ field.source }}</span>\n            <span class=\"reference-card__reference\" *ngIf=\"field.referenceText\">{{ field.referenceText }}</span>\n            <time class=\"reference-card__date\" *ngIf=\"field.date\">{{ field.date }}</time>\n          </div>\n          <a\n            *ngIf=\"field.url\"\n            href=\"{{ field.url }}\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            class=\"reference-card__link\"\n            (click)=\"openReference(field, $event)\"\n          >\n            <lucide-icon name=\"external-link\" [size]=\"14\" aria-hidden=\"true\"></lucide-icon>\n            <span>View source</span>\n          </a>\n        </footer>\n      </article>\n      </div>\n    </ng-container>\n\n    <ng-template #referenceEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"file-text\" [size]=\"32\" class=\"mb-4 opacity-50\" aria-hidden=\"true\"></lucide-icon>\n        <p class=\"text-sm\">No references available</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: LucideIconsModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextReferenceSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-text-reference-section', standalone: true, imports: [CommonModule, LucideIconsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ai-section ai-section--text-reference\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"hasFields; else referenceEmpty\">\n      <div class=\"section-grid section-grid--reference\">\n        <article\n        *ngFor=\"let field of fields\"\n        class=\"section-card section-card--reference\"\n        role=\"button\"\n        tabindex=\"0\"\n        [attr.aria-label]=\"'Open reference ' + (field.title || field.category || 'details')\"\n        (click)=\"onReferenceClick(field)\"\n        (keydown.enter)=\"onReferenceClick(field)\"\n        (keydown.space)=\"$event.preventDefault(); onReferenceClick(field)\"\n      >\n        <div class=\"reference-card__content\">\n          <p class=\"reference-card__text\">\n            {{ getDisplayText(field) }}\n          </p>\n        </div>\n\n        <footer class=\"reference-card__footer\" *ngIf=\"field.referenceText || field.source || field.date || field.category\">\n          <div class=\"reference-card__meta\">\n            <span class=\"reference-card__category\" *ngIf=\"field.category\">{{ field.category }}</span>\n            <span class=\"reference-card__source\" *ngIf=\"field.source\">{{ field.source }}</span>\n            <span class=\"reference-card__reference\" *ngIf=\"field.referenceText\">{{ field.referenceText }}</span>\n            <time class=\"reference-card__date\" *ngIf=\"field.date\">{{ field.date }}</time>\n          </div>\n          <a\n            *ngIf=\"field.url\"\n            href=\"{{ field.url }}\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            class=\"reference-card__link\"\n            (click)=\"openReference(field, $event)\"\n          >\n            <lucide-icon name=\"external-link\" [size]=\"14\" aria-hidden=\"true\"></lucide-icon>\n            <span>View source</span>\n          </a>\n        </footer>\n      </article>\n      </div>\n    </ng-container>\n\n    <ng-template #referenceEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"file-text\" [size]=\"32\" class=\"mb-4 opacity-50\" aria-hidden=\"true\"></lucide-icon>\n        <p class=\"text-sm\">No references available</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n\n" }]
+        }] });
+
+class BrandColorsSectionComponent extends BaseSectionComponent {
+    constructor() {
+        super(...arguments);
+        this.brandColors = [];
+        this.copiedColorId = null;
+    }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        if (changes['section']) {
+            this.extractBrandColors();
+        }
+    }
+    extractBrandColors() {
+        const fields = this.getFields();
+        const colors = [];
+        fields.forEach((field, index) => {
+            if (field.value && typeof field.value === 'string') {
+                // Check if it's a hex color
+                if (this.isHexColor(field.value)) {
+                    colors.push({
+                        id: field.id || `color-${index}`,
+                        label: field.label || field.title || `Color ${index + 1}`,
+                        hex: field.value.toUpperCase(),
+                        rgb: this.hexToRgb(field.value),
+                        copied: false
+                    });
+                }
+            }
+        });
+        this.brandColors = colors;
+    }
+    isHexColor(value) {
+        return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(value);
+    }
+    hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        if (result) {
+            const r = parseInt(result[1], 16);
+            const g = parseInt(result[2], 16);
+            const b = parseInt(result[3], 16);
+            return `rgb(${r}, ${g}, ${b})`;
+        }
+        return '';
+    }
+    async copyToClipboard(color) {
+        try {
+            await navigator.clipboard.writeText(color.hex);
+            this.copiedColorId = color.id;
+            // Reset after 2 seconds
+            setTimeout(() => {
+                this.copiedColorId = null;
+                this.cdr.markForCheck();
+            }, 2000);
+            this.cdr.markForCheck();
+        }
+        catch (err) {
+            console.error('Failed to copy to clipboard:', err);
+        }
+    }
+    get hasColors() {
+        return this.brandColors.length > 0;
+    }
+    get fields() {
+        return this.getFields();
+    }
+    get hasFields() {
+        return this.hasColors;
+    }
+    onColorClick(color) {
+        this.copyToClipboard(color);
+    }
+    trackColor(index, color) {
+        return color.id;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BrandColorsSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BrandColorsSectionComponent, isStandalone: true, selector: "app-brand-colors-section", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"ai-section ai-section--brand-colors\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"hasColors; else brandColorsEmpty\">\n      <div class=\"brand-colors-grid\">\n        <div\n          *ngFor=\"let color of brandColors; trackBy: trackColor\"\n          class=\"brand-color-tile\"\n          role=\"button\"\n          tabindex=\"0\"\n          (click)=\"onColorClick(color)\"\n          (keydown.enter)=\"onColorClick(color)\"\n          (keydown.space)=\"$event.preventDefault(); onColorClick(color)\"\n          [attr.aria-label]=\"'Copy ' + color.label + ' color code ' + color.hex\"\n        >\n          <div \n            class=\"brand-color-tile__swatch\"\n            [style.background-color]=\"color.hex\"\n            [class.brand-color-tile__swatch--copied]=\"copiedColorId === color.id\"\n          >\n            <div *ngIf=\"copiedColorId === color.id\" class=\"brand-color-tile__check\">\n              <lucide-icon name=\"check\" [size]=\"24\" class=\"check-icon\"></lucide-icon>\n            </div>\n          </div>\n          \n          <div class=\"brand-color-tile__info\">\n            <span class=\"brand-color-tile__label\">{{ color.label }}</span>\n            <div class=\"brand-color-tile__codes\">\n              <code class=\"brand-color-tile__code brand-color-tile__code--hex\">{{ color.hex }}</code>\n              <code *ngIf=\"color.rgb\" class=\"brand-color-tile__code brand-color-tile__code--rgb\">{{ color.rgb }}</code>\n            </div>\n            <div *ngIf=\"copiedColorId === color.id\" class=\"brand-color-tile__copied-text\">\n              <lucide-icon name=\"copy\" [size]=\"14\"></lucide-icon>\n              Copied!\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n\n    <ng-template #brandColorsEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"alert-circle\" [size]=\"32\" class=\"mb-4 opacity-50\" aria-hidden=\"true\"></lucide-icon>\n        <p class=\"text-sm\">No brand colors available</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: LucideIconsModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BrandColorsSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-brand-colors-section', standalone: true, imports: [CommonModule, LucideIconsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ai-section ai-section--brand-colors\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <ng-container *ngIf=\"hasColors; else brandColorsEmpty\">\n      <div class=\"brand-colors-grid\">\n        <div\n          *ngFor=\"let color of brandColors; trackBy: trackColor\"\n          class=\"brand-color-tile\"\n          role=\"button\"\n          tabindex=\"0\"\n          (click)=\"onColorClick(color)\"\n          (keydown.enter)=\"onColorClick(color)\"\n          (keydown.space)=\"$event.preventDefault(); onColorClick(color)\"\n          [attr.aria-label]=\"'Copy ' + color.label + ' color code ' + color.hex\"\n        >\n          <div \n            class=\"brand-color-tile__swatch\"\n            [style.background-color]=\"color.hex\"\n            [class.brand-color-tile__swatch--copied]=\"copiedColorId === color.id\"\n          >\n            <div *ngIf=\"copiedColorId === color.id\" class=\"brand-color-tile__check\">\n              <lucide-icon name=\"check\" [size]=\"24\" class=\"check-icon\"></lucide-icon>\n            </div>\n          </div>\n          \n          <div class=\"brand-color-tile__info\">\n            <span class=\"brand-color-tile__label\">{{ color.label }}</span>\n            <div class=\"brand-color-tile__codes\">\n              <code class=\"brand-color-tile__code brand-color-tile__code--hex\">{{ color.hex }}</code>\n              <code *ngIf=\"color.rgb\" class=\"brand-color-tile__code brand-color-tile__code--rgb\">{{ color.rgb }}</code>\n            </div>\n            <div *ngIf=\"copiedColorId === color.id\" class=\"brand-color-tile__copied-text\">\n              <lucide-icon name=\"copy\" [size]=\"14\"></lucide-icon>\n              Copied!\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n\n    <ng-template #brandColorsEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"alert-circle\" [size]=\"32\" class=\"mb-4 opacity-50\" aria-hidden=\"true\"></lucide-icon>\n        <p class=\"text-sm\">No brand colors available</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n" }]
+        }] });
+
+class SectionRendererComponent {
+    constructor() {
+        this.sectionEvent = new EventEmitter();
+    }
+    // Removed @HostBinding - will be set in template instead to avoid setAttribute errors
+    get sectionTypeAttribute() {
+        if (!this.section) {
+            return 'unknown';
+        }
+        try {
+            const typeLabel = (this.section.type ?? '').trim();
+            const resolved = this.resolvedType;
+            return (typeLabel || resolved || 'unknown').toLowerCase();
+        }
+        catch {
+            return 'unknown';
+        }
+    }
+    get sectionIdAttribute() {
+        if (!this.section?.id) {
+            return null;
+        }
+        try {
+            return String(this.section.id);
+        }
+        catch {
+            return null;
+        }
+    }
+    get resolvedType() {
+        if (!this.section) {
+            return 'unknown';
+        }
+        try {
+            const type = (this.section.type ?? '').toLowerCase();
+            const title = (this.section.title ?? '').toLowerCase();
+            if (type === 'info' && title.includes('overview')) {
+                return 'overview';
+            }
+            if (type === 'timeline') {
+                return 'event';
+            }
+            if (type === 'metrics' || type === 'stats') {
+                return 'analytics';
+            }
+            if (type === 'table') {
+                return 'list';
+            }
+            if (type === 'project') {
+                return 'info';
+            }
+            if (type === 'locations') {
+                return 'map';
+            }
+            if (type === 'quotation' || type === 'quote') {
+                return 'quotation';
+            }
+            if (type === 'text-reference' || type === 'reference' || type === 'text-ref') {
+                return 'text-reference';
+            }
+            if (type === 'brand-colors' || type === 'brands' || type === 'colors') {
+                return 'brand-colors';
+            }
+            if (!type) {
+                if (title.includes('overview')) {
+                    return 'overview';
+                }
+                return 'fallback';
+            }
+            return type;
+        }
+        catch {
+            return 'unknown';
+        }
+    }
+    onInfoFieldInteraction(event) {
+        this.sectionEvent.emit({
+            type: 'field',
+            section: this.section,
+            field: event.field,
+            metadata: { sectionTitle: event.sectionTitle }
+        });
+    }
+    emitFieldInteraction(field, metadata) {
+        this.sectionEvent.emit({
+            type: 'field',
+            section: this.section,
+            field,
+            metadata: {
+                sectionId: this.section.id,
+                sectionTitle: this.section.title,
+                ...metadata
+            }
+        });
+    }
+    emitItemInteraction(item, metadata) {
+        this.sectionEvent.emit({
+            type: 'item',
+            section: this.section,
+            item,
+            metadata: {
+                sectionId: this.section.id,
+                sectionTitle: this.section.title,
+                ...metadata
+            }
+        });
+    }
+    emitActionInteraction(action, metadata) {
+        this.sectionEvent.emit({
+            type: 'action',
+            section: this.section,
+            action,
+            metadata
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SectionRendererComponent, isStandalone: true, selector: "app-section-renderer", inputs: { section: "section" }, outputs: { sectionEvent: "sectionEvent" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"resolvedType\">\n  <app-overview-section\n    *ngSwitchCase=\"'overview'\"\n    [section]=\"section\"\n    (fieldInteraction)=\"emitFieldInteraction($event.field!, $event.metadata)\"\n  ></app-overview-section>\n\n  <app-info-section\n    *ngSwitchCase=\"'info'\"\n    [section]=\"section\"\n    (infoFieldInteraction)=\"onInfoFieldInteraction($event)\"\n  ></app-info-section>\n\n  <app-analytics-section\n    *ngSwitchCase=\"'analytics'\"\n    [section]=\"section\"\n    (fieldInteraction)=\"emitFieldInteraction($event.field!, $event.metadata)\"\n  ></app-analytics-section>\n\n  <app-financials-section\n    *ngSwitchCase=\"'financials'\"\n    [section]=\"section\"\n    (fieldInteraction)=\"emitFieldInteraction($event.field!, $event.metadata)\"\n  ></app-financials-section>\n\n  <app-list-section\n    *ngSwitchCase=\"'list'\"\n    [section]=\"section\"\n    (itemInteraction)=\"emitItemInteraction($event.item!, $event.metadata)\"\n  ></app-list-section>\n\n  <app-event-section\n    *ngSwitchCase=\"'event'\"\n    [section]=\"section\"\n    (itemInteraction)=\"emitItemInteraction($event.item!, $event.metadata)\"\n  ></app-event-section>\n\n  <app-product-section\n    *ngSwitchCase=\"'product'\"\n    [section]=\"section\"\n    (fieldInteraction)=\"emitFieldInteraction($event.field!, $event.metadata)\"\n  ></app-product-section>\n\n  <app-solutions-section\n    *ngSwitchCase=\"'solutions'\"\n    [section]=\"section\"\n    (itemInteraction)=\"emitItemInteraction($event.item!, $event.metadata)\"\n  ></app-solutions-section>\n\n  <app-contact-card-section\n    *ngSwitchCase=\"'contact-card'\"\n    [section]=\"section\"\n    (fieldInteraction)=\"emitFieldInteraction($event.field!, $event.metadata)\"\n  ></app-contact-card-section>\n\n  <app-network-card-section\n    *ngSwitchCase=\"'network-card'\"\n    [section]=\"section\"\n    (itemInteraction)=\"emitItemInteraction($event.item!, $event.metadata)\"\n  ></app-network-card-section>\n\n  <app-map-section\n    *ngSwitchCase=\"'map'\"\n    [section]=\"section\"\n    (itemInteraction)=\"emitItemInteraction($event.item!, $event.metadata)\"\n  ></app-map-section>\n\n  <app-chart-section\n    *ngSwitchCase=\"'chart'\"\n    [section]=\"section\"\n    (fieldInteraction)=\"emitFieldInteraction($event.field!, $event.metadata)\"\n  ></app-chart-section>\n\n  <app-quotation-section\n    *ngSwitchCase=\"'quotation'\"\n    [section]=\"section\"\n    (fieldInteraction)=\"emitFieldInteraction($event.field!, $event.metadata)\"\n  ></app-quotation-section>\n\n  <app-text-reference-section\n    *ngSwitchCase=\"'text-reference'\"\n    [section]=\"section\"\n    (fieldInteraction)=\"emitFieldInteraction($event.field!, $event.metadata)\"\n  ></app-text-reference-section>\n\n  <app-brand-colors-section\n    *ngSwitchCase=\"'brand-colors'\"\n    [section]=\"section\"\n  ></app-brand-colors-section>\n\n  <app-fallback-section\n    *ngSwitchDefault\n    [section]=\"section\"\n  ></app-fallback-section>\n</ng-container>\n", styles: [":host{position:relative;display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: InfoSectionComponent, selector: "app-info-section", outputs: ["infoFieldInteraction"] }, { kind: "component", type: AnalyticsSectionComponent, selector: "app-analytics-section" }, { kind: "component", type: FinancialsSectionComponent, selector: "app-financials-section" }, { kind: "component", type: ListSectionComponent, selector: "app-list-section" }, { kind: "component", type: EventSectionComponent, selector: "app-event-section" }, { kind: "component", type: ProductSectionComponent, selector: "app-product-section" }, { kind: "component", type: SolutionsSectionComponent, selector: "app-solutions-section" }, { kind: "component", type: ContactCardSectionComponent, selector: "app-contact-card-section" }, { kind: "component", type: NetworkCardSectionComponent, selector: "app-network-card-section" }, { kind: "component", type: MapSectionComponent, selector: "app-map-section" }, { kind: "component", type: ChartSectionComponent, selector: "app-chart-section" }, { kind: "component", type: OverviewSectionComponent, selector: "app-overview-section" }, { kind: "component", type: FallbackSectionComponent, selector: "app-fallback-section" }, { kind: "component", type: QuotationSectionComponent, selector: "app-quotation-section" }, { kind: "component", type: TextReferenceSectionComponent, selector: "app-text-reference-section" }, { kind: "component", type: BrandColorsSectionComponent, selector: "app-brand-colors-section" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-section-renderer', standalone: true, imports: [
+                        CommonModule,
+                        InfoSectionComponent,
+                        AnalyticsSectionComponent,
+                        FinancialsSectionComponent,
+                        ListSectionComponent,
+                        EventSectionComponent,
+                        ProductSectionComponent,
+                        SolutionsSectionComponent,
+                        ContactCardSectionComponent,
+                        NetworkCardSectionComponent,
+                        MapSectionComponent,
+                        ChartSectionComponent,
+                        OverviewSectionComponent,
+                        FallbackSectionComponent,
+                        QuotationSectionComponent,
+                        TextReferenceSectionComponent,
+                        BrandColorsSectionComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"resolvedType\">\n  <app-overview-section\n    *ngSwitchCase=\"'overview'\"\n    [section]=\"section\"\n    (fieldInteraction)=\"emitFieldInteraction($event.field!, $event.metadata)\"\n  ></app-overview-section>\n\n  <app-info-section\n    *ngSwitchCase=\"'info'\"\n    [section]=\"section\"\n    (infoFieldInteraction)=\"onInfoFieldInteraction($event)\"\n  ></app-info-section>\n\n  <app-analytics-section\n    *ngSwitchCase=\"'analytics'\"\n    [section]=\"section\"\n    (fieldInteraction)=\"emitFieldInteraction($event.field!, $event.metadata)\"\n  ></app-analytics-section>\n\n  <app-financials-section\n    *ngSwitchCase=\"'financials'\"\n    [section]=\"section\"\n    (fieldInteraction)=\"emitFieldInteraction($event.field!, $event.metadata)\"\n  ></app-financials-section>\n\n  <app-list-section\n    *ngSwitchCase=\"'list'\"\n    [section]=\"section\"\n    (itemInteraction)=\"emitItemInteraction($event.item!, $event.metadata)\"\n  ></app-list-section>\n\n  <app-event-section\n    *ngSwitchCase=\"'event'\"\n    [section]=\"section\"\n    (itemInteraction)=\"emitItemInteraction($event.item!, $event.metadata)\"\n  ></app-event-section>\n\n  <app-product-section\n    *ngSwitchCase=\"'product'\"\n    [section]=\"section\"\n    (fieldInteraction)=\"emitFieldInteraction($event.field!, $event.metadata)\"\n  ></app-product-section>\n\n  <app-solutions-section\n    *ngSwitchCase=\"'solutions'\"\n    [section]=\"section\"\n    (itemInteraction)=\"emitItemInteraction($event.item!, $event.metadata)\"\n  ></app-solutions-section>\n\n  <app-contact-card-section\n    *ngSwitchCase=\"'contact-card'\"\n    [section]=\"section\"\n    (fieldInteraction)=\"emitFieldInteraction($event.field!, $event.metadata)\"\n  ></app-contact-card-section>\n\n  <app-network-card-section\n    *ngSwitchCase=\"'network-card'\"\n    [section]=\"section\"\n    (itemInteraction)=\"emitItemInteraction($event.item!, $event.metadata)\"\n  ></app-network-card-section>\n\n  <app-map-section\n    *ngSwitchCase=\"'map'\"\n    [section]=\"section\"\n    (itemInteraction)=\"emitItemInteraction($event.item!, $event.metadata)\"\n  ></app-map-section>\n\n  <app-chart-section\n    *ngSwitchCase=\"'chart'\"\n    [section]=\"section\"\n    (fieldInteraction)=\"emitFieldInteraction($event.field!, $event.metadata)\"\n  ></app-chart-section>\n\n  <app-quotation-section\n    *ngSwitchCase=\"'quotation'\"\n    [section]=\"section\"\n    (fieldInteraction)=\"emitFieldInteraction($event.field!, $event.metadata)\"\n  ></app-quotation-section>\n\n  <app-text-reference-section\n    *ngSwitchCase=\"'text-reference'\"\n    [section]=\"section\"\n    (fieldInteraction)=\"emitFieldInteraction($event.field!, $event.metadata)\"\n  ></app-text-reference-section>\n\n  <app-brand-colors-section\n    *ngSwitchCase=\"'brand-colors'\"\n    [section]=\"section\"\n  ></app-brand-colors-section>\n\n  <app-fallback-section\n    *ngSwitchDefault\n    [section]=\"section\"\n  ></app-fallback-section>\n</ng-container>\n", styles: [":host{position:relative;display:block}\n"] }]
+        }], propDecorators: { section: [{
+                type: Input,
+                args: [{ required: true }]
+            }], sectionEvent: [{
+                type: Output
+            }] } });
+
+const DEFAULT_COL_SPAN_THRESHOLD = { two: 6 };
+class MasonryGridComponent {
+    constructor() {
+        this.sections = [];
+        this.gap = 12; // Harmonize with section grid tokens for consistent gutters
+        this.minColumnWidth = 260; // Keep cards readable when columns increase
+        this.maxColumns = 4; // Allow wider canvases to display four columns for better uniformity
+        this.sectionEvent = new EventEmitter();
+        this.layoutChange = new EventEmitter();
+        this.cdr = inject(ChangeDetectorRef);
+        this.positionedSections = [];
+        this.containerHeight = 0;
+        this.isLayoutReady = false; // Prevent FOUC (Flash of Unstyled Content)
+        this.reflowCount = 0;
+        this.MAX_REFLOWS = 3; // Reduced for faster initial layout
+        this.RESIZE_THROTTLE_MS = 16; // ~1 frame at 60fps for minimal throttling
+        this.trackItem = (_, item) => item.key;
+    }
+    ngOnChanges(changes) {
+        if (changes['sections']) {
+            this.computeInitialLayout();
+            // Schedule immediate layout update for section changes
+            this.scheduleLayoutUpdate();
+            this.cdr.markForCheck();
+        }
+    }
+    ngAfterViewInit() {
+        this.computeInitialLayout();
+        this.observeContainer();
+        this.observeItems();
+        // Immediate reflow using RAF chain for fastest layout
+        requestAnimationFrame(() => {
+            this.reflowWithActualHeights();
+            requestAnimationFrame(() => {
+                this.reflowWithActualHeights();
+                // Mark layout as ready after second reflow
+                this.isLayoutReady = true;
+                this.cdr.markForCheck();
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        this.itemObserver?.disconnect();
+        if (this.pendingAnimationFrame) {
+            cancelAnimationFrame(this.pendingAnimationFrame);
+        }
+        if (this.rafId) {
+            cancelAnimationFrame(this.rafId);
+        }
+        if (this.resizeThrottleTimeout) {
+            clearTimeout(this.resizeThrottleTimeout);
+        }
+    }
+    onSectionEvent(event) {
+        this.sectionEvent.emit(event);
+    }
+    /**
+     * Gets a unique section ID for scrolling
+     */
+    getSectionId(section) {
+        return `section-${this.sanitizeSectionId(section.title || section.id || 'unknown')}`;
+    }
+    /**
+     * Sanitizes section title for use as HTML ID
+     */
+    sanitizeSectionId(title) {
+        return title.toLowerCase()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-|-$/g, '');
+    }
+    observeContainer() {
+        if (typeof ResizeObserver === 'undefined' || !this.containerRef) {
+            return;
+        }
+        this.resizeObserver = new ResizeObserver(() => this.throttledScheduleLayoutUpdate());
+        this.resizeObserver.observe(this.containerRef.nativeElement);
+    }
+    observeItems() {
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        this.itemObserver = new ResizeObserver(() => this.throttledScheduleLayoutUpdate());
+        this.itemRefs.changes.subscribe((items) => {
+            this.itemObserver?.disconnect();
+            items.forEach((item) => this.itemObserver?.observe(item.nativeElement));
+            this.scheduleLayoutUpdate();
+        });
+        this.itemRefs.forEach((item) => this.itemObserver?.observe(item.nativeElement));
+    }
+    throttledScheduleLayoutUpdate() {
+        if (this.resizeThrottleTimeout) {
+            return;
+        }
+        this.resizeThrottleTimeout = window.setTimeout(() => {
+            this.resizeThrottleTimeout = undefined;
+            this.scheduleLayoutUpdate();
+        }, this.RESIZE_THROTTLE_MS);
+    }
+    scheduleLayoutUpdate() {
+        // Cancel any pending RAF
+        if (this.rafId) {
+            cancelAnimationFrame(this.rafId);
+        }
+        if (this.pendingAnimationFrame) {
+            cancelAnimationFrame(this.pendingAnimationFrame);
+        }
+        // Reset reflow counter for new layout calculation
+        this.reflowCount = 0;
+        // Use immediate RAF for fastest response
+        this.rafId = requestAnimationFrame(() => {
+            this.rafId = undefined;
+            this.pendingAnimationFrame = requestAnimationFrame(() => {
+                this.pendingAnimationFrame = undefined;
+                this.reflowWithActualHeights();
+            });
+        });
+    }
+    computeInitialLayout() {
+        const resolvedSections = this.sections ?? [];
+        this.reflowCount = 0;
+        this.containerHeight = 0;
+        this.isLayoutReady = false; // Reset layout ready state
+        // Stack sections vertically initially to prevent overlap
+        let cumulativeTop = 0;
+        this.positionedSections = resolvedSections.map((section, index) => {
+            const item = {
+                section,
+                key: section.id ?? `${section.title}-${index}`,
+                colSpan: this.getSectionColSpan(section),
+                left: '0px',
+                top: cumulativeTop,
+                width: '100%'
+            };
+            // Add estimated spacing (will be recalculated with actual heights)
+            cumulativeTop += 300 + this.gap;
+            return item;
+        });
+        this.containerHeight = cumulativeTop;
+        this.cdr.markForCheck();
+    }
+    reflowWithActualHeights() {
+        if (!this.containerRef?.nativeElement || this.reflowCount >= this.MAX_REFLOWS) {
+            return;
+        }
+        this.reflowCount++;
+        const containerElement = this.containerRef.nativeElement;
+        if (!containerElement || typeof containerElement.clientWidth === 'undefined') {
+            return;
+        }
+        const containerWidth = containerElement.clientWidth;
+        if (!containerWidth) {
+            return;
+        }
+        // Smart responsive column calculation that adapts continuously
+        const columns = Math.min(this.maxColumns, Math.max(1, Math.floor((containerWidth + this.gap) / (this.minColumnWidth + this.gap))));
+        // Expose column count as CSS custom property for section grids to consume
+        if (containerElement.style && typeof containerElement.style.setProperty === 'function') {
+            containerElement.style.setProperty('--masonry-columns', columns.toString());
+        }
+        this.emitLayoutInfo(columns, containerWidth);
+        const colHeights = Array(columns).fill(0);
+        let hasZeroHeights = false;
+        const itemRefArray = this.itemRefs?.toArray() ?? [];
+        // Pre-calculate gap and column width expressions once
+        const gapTotal = this.gap * (columns - 1);
+        const columnWidthExpr = `calc((100% - ${gapTotal}px) / ${columns})`;
+        const updated = this.positionedSections.map((item, index) => {
+            const colSpan = Math.min(item.colSpan, columns);
+            let bestColumn = 0;
+            let minHeight = Number.MAX_VALUE;
+            // Optimized: Find best column more efficiently
+            for (let col = 0; col <= columns - colSpan; col += 1) {
+                let maxColHeight = 0;
+                for (let c = col; c < col + colSpan; c++) {
+                    if (colHeights[c] > maxColHeight) {
+                        maxColHeight = colHeights[c];
+                    }
+                }
+                if (maxColHeight < minHeight) {
+                    minHeight = maxColHeight;
+                    bestColumn = col;
+                }
+            }
+            // Calculate width and left expressions
+            const widthExpr = colSpan === 1
+                ? columnWidthExpr
+                : `calc(${columnWidthExpr} * ${colSpan} + ${this.gap * (colSpan - 1)}px)`;
+            const leftExpr = `calc((${columnWidthExpr} + ${this.gap}px) * ${bestColumn})`;
+            // Get actual rendered height from DOM element
+            const itemElement = itemRefArray[index]?.nativeElement;
+            let height = itemElement?.offsetHeight ?? 0;
+            // If height is 0, try to get the first child's height (the section renderer content)
+            if (height === 0 && itemElement?.firstElementChild) {
+                height = itemElement.firstElementChild.offsetHeight ?? 0;
+            }
+            // Still 0? Use a reasonable minimum
+            if (height === 0) {
+                height = 200;
+                hasZeroHeights = true;
+            }
+            // Update column heights
+            for (let col = bestColumn; col < bestColumn + colSpan; col += 1) {
+                colHeights[col] = minHeight + height + this.gap;
+            }
+            return {
+                ...item,
+                colSpan,
+                left: leftExpr,
+                top: minHeight,
+                width: widthExpr
+            };
+        });
+        this.positionedSections = updated;
+        this.containerHeight = Math.max(...colHeights, 0);
+        // Mark layout as ready on first successful reflow without zero heights
+        if (!hasZeroHeights) {
+            this.isLayoutReady = true;
+        }
+        // Force change detection - transitions will be handled by CSS
+        this.cdr.markForCheck();
+        // If we detected zero heights and haven't hit max reflows, try again immediately
+        if (hasZeroHeights && this.reflowCount < this.MAX_REFLOWS) {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    this.reflowWithActualHeights();
+                });
+            });
+        }
+    }
+    emitLayoutInfo(columns, containerWidth) {
+        const layoutInfo = {
+            columns,
+            containerWidth,
+            breakpoint: getBreakpointFromWidth(containerWidth)
+        };
+        if (this.isSameLayoutInfo(layoutInfo, this.lastLayoutInfo)) {
+            return;
+        }
+        this.lastLayoutInfo = layoutInfo;
+        this.layoutChange.emit(layoutInfo);
+    }
+    isSameLayoutInfo(a, b) {
+        if (!b) {
+            return false;
+        }
+        return (a.breakpoint === b.breakpoint &&
+            a.columns === b.columns &&
+            Math.abs(a.containerWidth - b.containerWidth) < 4);
+    }
+    getSectionColSpan(section) {
+        // Explicit colSpan always takes precedence
+        if (section.colSpan) {
+            return Math.min(section.colSpan, this.maxColumns);
+        }
+        const type = (section.type ?? '').toLowerCase();
+        const title = (section.title ?? '').toLowerCase();
+        if (type === 'project') {
+            return 1;
+        }
+        const fieldCount = section.fields?.length ?? 0;
+        const itemCount = section.items?.length ?? 0;
+        const descriptionDensity = this.getDescriptionDensity(section.description);
+        const baseScore = fieldCount + itemCount + descriptionDensity;
+        // Get thresholds from section's meta (set during normalization)
+        // This allows each section to have its own column logic
+        const thresholds = this.getColSpanThresholds(section);
+        if (thresholds.three && baseScore >= thresholds.three) {
+            return Math.min(3, this.maxColumns);
+        }
+        if (baseScore >= thresholds.two) {
+            return Math.min(2, this.maxColumns);
+        }
+        return 1;
+    }
+    /**
+     * Get column span thresholds for a section
+     * First checks section's meta (set during normalization), then falls back to default
+     */
+    getColSpanThresholds(section) {
+        const meta = section.meta;
+        const thresholds = meta?.['colSpanThresholds'];
+        if (thresholds && typeof thresholds === 'object' && 'two' in thresholds) {
+            return thresholds;
+        }
+        // Fallback to default if not found in meta
+        return DEFAULT_COL_SPAN_THRESHOLD;
+    }
+    getDescriptionDensity(description) {
+        if (!description) {
+            return 0;
+        }
+        const trimmedLength = description.trim().length;
+        if (trimmedLength < 120) {
+            return 0;
+        }
+        return Math.ceil(trimmedLength / 120);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MasonryGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MasonryGridComponent, isStandalone: true, selector: "app-masonry-grid", inputs: { sections: "sections", gap: "gap", minColumnWidth: "minColumnWidth", maxColumns: "maxColumns" }, outputs: { sectionEvent: "sectionEvent", layoutChange: "layoutChange" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "itemRefs", predicate: ["itemRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #container\n  class=\"relative w-full masonry-container\"\n  [class.masonry-container--loading]=\"!isLayoutReady\"\n  [style.height.px]=\"containerHeight\"\n  [style.gap.px]=\"gap\"\n>\n  <div\n    *ngFor=\"let item of positionedSections; trackBy: trackItem; let idx = index\"\n    #itemRef\n    class=\"absolute masonry-item\"\n    [class.masonry-item--ready]=\"isLayoutReady\"\n    [attr.id]=\"getSectionId(item.section)\"\n    [ngStyle]=\"{\n      position: 'absolute',\n      left: item.left,\n      top: item.top + 'px',\n      width: item.width,\n      zIndex: idx\n    }\"\n  >\n    <app-section-renderer\n      [section]=\"item.section\"\n      (sectionEvent)=\"onSectionEvent($event)\"\n    ></app-section-renderer>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.masonry-container{transition:opacity .25s ease,height .5s cubic-bezier(.25,.46,.45,.94);opacity:1;min-height:400px;contain:layout style paint}.masonry-container--loading{opacity:.6}.masonry-item{will-change:top,left,width;transition:opacity .4s ease;opacity:.3;backface-visibility:hidden;transform:translateZ(0);pointer-events:auto}.masonry-item--ready{opacity:1;transition:top .5s cubic-bezier(.25,.46,.45,.94),left .5s cubic-bezier(.25,.46,.45,.94),width .5s cubic-bezier(.25,.46,.45,.94),opacity .5s ease .1s,transform .3s ease}.masonry-item>*{display:block;width:100%;height:auto}@media (max-width: 768px){.masonry-container{min-height:300px}.masonry-item{transition:opacity .3s ease}.masonry-item--ready{transition:top .4s cubic-bezier(.25,.46,.45,.94),left .4s cubic-bezier(.25,.46,.45,.94),width .4s cubic-bezier(.25,.46,.45,.94),opacity .4s ease .05s}}@media (min-width: 1400px){.masonry-container{min-height:500px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SectionRendererComponent, selector: "app-section-renderer", inputs: ["section"], outputs: ["sectionEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MasonryGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-masonry-grid', standalone: true, imports: [CommonModule, SectionRendererComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  #container\n  class=\"relative w-full masonry-container\"\n  [class.masonry-container--loading]=\"!isLayoutReady\"\n  [style.height.px]=\"containerHeight\"\n  [style.gap.px]=\"gap\"\n>\n  <div\n    *ngFor=\"let item of positionedSections; trackBy: trackItem; let idx = index\"\n    #itemRef\n    class=\"absolute masonry-item\"\n    [class.masonry-item--ready]=\"isLayoutReady\"\n    [attr.id]=\"getSectionId(item.section)\"\n    [ngStyle]=\"{\n      position: 'absolute',\n      left: item.left,\n      top: item.top + 'px',\n      width: item.width,\n      zIndex: idx\n    }\"\n  >\n    <app-section-renderer\n      [section]=\"item.section\"\n      (sectionEvent)=\"onSectionEvent($event)\"\n    ></app-section-renderer>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.masonry-container{transition:opacity .25s ease,height .5s cubic-bezier(.25,.46,.45,.94);opacity:1;min-height:400px;contain:layout style paint}.masonry-container--loading{opacity:.6}.masonry-item{will-change:top,left,width;transition:opacity .4s ease;opacity:.3;backface-visibility:hidden;transform:translateZ(0);pointer-events:auto}.masonry-item--ready{opacity:1;transition:top .5s cubic-bezier(.25,.46,.45,.94),left .5s cubic-bezier(.25,.46,.45,.94),width .5s cubic-bezier(.25,.46,.45,.94),opacity .5s ease .1s,transform .3s ease}.masonry-item>*{display:block;width:100%;height:auto}@media (max-width: 768px){.masonry-container{min-height:300px}.masonry-item{transition:opacity .3s ease}.masonry-item--ready{transition:top .4s cubic-bezier(.25,.46,.45,.94),left .4s cubic-bezier(.25,.46,.45,.94),width .4s cubic-bezier(.25,.46,.45,.94),opacity .4s ease .05s}}@media (min-width: 1400px){.masonry-container{min-height:500px}}\n"] }]
+        }], propDecorators: { sections: [{
+                type: Input
+            }], gap: [{
+                type: Input
+            }], minColumnWidth: [{
+                type: Input
+            }], maxColumns: [{
+                type: Input
+            }], sectionEvent: [{
+                type: Output
+            }], layoutChange: [{
+                type: Output
+            }], containerRef: [{
+                type: ViewChild,
+                args: ['container', { static: true }]
+            }], itemRefs: [{
+                type: ViewChildren,
+                args: ['itemRef']
+            }] } });
+
+class AICardRendererComponent {
+    constructor() {
+        this.el = inject(ElementRef);
+        this.cdr = inject(ChangeDetectorRef);
+        // Expose Math for template
+        this.Math = Math;
+        this.previousSectionsHash = '';
+        this.normalizedSectionCache = new WeakMap();
+        this.sectionHashCache = new WeakMap();
+        this.sectionOrderKeys = [];
+        this._changeType = 'structural';
+        // Empty state animations
+        this.particles = [];
+        this.gradientTransform = 'translate(-50%, -50%)';
+        this.contentTransform = 'translate(0, 0)';
+        this.currentMessageIndex = 0;
+        this.currentMessage = '';
+        this.mouseX = 0;
+        this.mouseY = 0;
+        this.isMouseOverEmptyState = false;
+        this.scrollY = 0;
+        this.funnyMessages = [
+            'Deepening into archives...',
+            'Asking all 40,000 employees...',
+            'Re-reading manifesto...',
+            'Consulting the oracle...',
+            'Checking under the couch...',
+            'Asking ChatGPT for help...',
+            'Brewing coffee first...',
+            'Counting to infinity...',
+            'Summoning the data spirits...',
+            'Teaching AI to read minds...',
+            'Searching parallel universes...',
+            'Waiting for inspiration...',
+            'Polishing crystal ball...',
+            'Decoding ancient scrolls...',
+            'Training neural networks...',
+            'Consulting the stars...',
+            'Asking Siri nicely...',
+            'Reading tea leaves...',
+            'Channeling inner wisdom...',
+            'Waiting for the right moment...'
+        ];
+        this._updateSource = 'stream';
+        this.isFullscreen = false;
+        this.tiltEnabled = true;
+        this.streamingStage = undefined;
+        this.fieldInteraction = new EventEmitter();
+        this.cardInteraction = new EventEmitter();
+        this.fullscreenToggle = new EventEmitter();
+        this.agentAction = new EventEmitter();
+        this.questionAction = new EventEmitter();
+        this.processedSections = [];
+        this.isHovered = false;
+        this.mousePosition = { x: 0, y: 0 };
+        // CSS variables for the tilt effect
+        this.tiltStyle = {};
+        // Performance: RAF batching for mouse moves
+        this.mouseMoveRafId = null;
+        this.pendingMouseMove = null;
+        this.destroyed$ = new Subject();
+        this.magneticTiltService = inject(MagneticTiltService);
+        this.iconService = inject(IconService);
+        this.sectionNormalizationService = inject(SectionNormalizationService);
+        this.viewportScroller = inject(ViewportScroller);
+        // Fallback card configuration for testing
+        this.fallbackCard = {
+            id: 'fallback-test',
+            cardTitle: 'Test Company',
+            cardSubtitle: 'Fallback Card for Testing',
+            sections: [
+                {
+                    id: 'test-info',
+                    title: 'Company Information',
+                    type: 'info',
+                    fields: [
+                        {
+                            id: 'industry',
+                            label: 'Industry',
+                            value: 'Technology',
+                            type: 'text'
+                        },
+                        {
+                            id: 'employees',
+                            label: 'Employees',
+                            value: '250',
+                            type: 'text'
+                        }
+                    ]
+                }
+            ],
+            actions: [
+                {
+                    id: 'view-details',
+                    label: 'View Details',
+                    variant: 'primary'
+                }
+            ]
+        };
+        this.trackSection = (_index, section) => section.id ?? `${section.title}-${_index}`;
+        this.trackField = (_index, field) => field.id ?? `${field.label}-${_index}`;
+        this.trackItem = (_index, item) => item.id ?? `${item.title}-${_index}`;
+        this.trackAction = (_index, action) => action.id ?? `${action.label}-${_index}`;
+    }
+    set cardConfig(value) {
+        this._cardConfig = value ?? undefined;
+        if (!this._cardConfig?.sections?.length) {
+            this.resetProcessedSections();
+            this.cdr.markForCheck();
+            return;
+        }
+        const sectionsHash = this.hashSections(this._cardConfig.sections);
+        const shouldForceStructural = sectionsHash !== this.previousSectionsHash || this._updateSource === 'liveEdit';
+        this.refreshProcessedSections(shouldForceStructural);
+        this.cdr.markForCheck();
+    }
+    get cardConfig() {
+        return this._cardConfig;
+    }
+    /**
+     * Input to track update source - used to bypass hash caching for live edits
+     * When 'liveEdit', always forces reprocessing even if sections haven't changed structurally
+     */
+    set updateSource(value) {
+        if (value === 'liveEdit' && this._updateSource !== value) {
+            // Live edit detected - force section reprocessing by invalidating hash
+            this.previousSectionsHash = '';
+            if (this._cardConfig?.sections?.length) {
+                this.refreshProcessedSections(true);
+            }
+        }
+        this._updateSource = value;
+    }
+    get updateSource() {
+        return this._updateSource;
+    }
+    /**
+     * Fast hash function for sections (replaces JSON.stringify)
+     * Uses WeakMap cache to avoid recomputation
+     */
+    hashSections(sections) {
+        // Check cache first
+        if (this.sectionHashCache.has(sections)) {
+            return this.sectionHashCache.get(sections);
+        }
+        // Create a lightweight hash based on section metadata
+        const hash = sections
+            .map(section => {
+            const fieldCount = section.fields?.length ?? 0;
+            const itemCount = section.items?.length ?? 0;
+            return `${section.id || ''}|${section.title || ''}|${section.type || ''}|f${fieldCount}|i${itemCount}`;
+        })
+            .join('||');
+        // Simple hash of the string
+        let result = 0;
+        for (let i = 0; i < hash.length; i++) {
+            const char = hash.charCodeAt(i);
+            result = ((result << 5) - result) + char;
+            result = result & result; // Convert to 32-bit integer
+        }
+        const hashString = String(result);
+        // Cache the result
+        this.sectionHashCache.set(sections, hashString);
+        return hashString;
+    }
+    set changeType(value) {
+        if (this._changeType === value) {
+            return;
+        }
+        this._changeType = value;
+        if (this._cardConfig?.sections?.length) {
+            this.refreshProcessedSections(value === 'structural');
+        }
+    }
+    get changeType() {
+        return this._changeType;
+    }
+    ngOnInit() {
+        // Initialize particles
+        this.initializeParticles();
+        // Start message rotation
+        this.startMessageRotation();
+        // Track scroll for parallax effect
+        this.setupScrollTracking();
+        // Use fallback if no card config provided
+        if (!this.cardConfig) {
+            this.cardConfig = this.fallbackCard;
+        }
+        if (!this.processedSections.length) {
+            this.refreshProcessedSections(true);
+        }
+        // Handle Escape key for fullscreen exit
+        fromEvent(document, 'keydown')
+            .pipe(takeUntil(this.destroyed$))
+            .subscribe((event) => {
+            if (event.key === 'Escape' && this.isFullscreen) {
+                this.toggleFullscreen();
+            }
+        });
+        // Subscribe to tilt calculations with RAF batching for performance
+        let tiltRafId = null;
+        let pendingCalculations = null;
+        this.magneticTiltService.tiltCalculations$
+            .pipe(takeUntil(this.destroyed$))
+            .subscribe((calculations) => {
+            pendingCalculations = calculations;
+            // Batch updates via RAF to avoid excessive change detection
+            // Always update to ensure smooth transitions
+            if (tiltRafId === null) {
+                tiltRafId = requestAnimationFrame(() => {
+                    if (pendingCalculations) {
+                        // Always update glow values for smooth transitions
+                        this.tiltStyle = {
+                            '--tilt-x': `${pendingCalculations.rotateX}deg`,
+                            '--tilt-y': `${pendingCalculations.rotateY}deg`,
+                            '--glow-blur': `${pendingCalculations.glowBlur}px`,
+                            '--glow-color': `rgba(255,121,0,${pendingCalculations.glowOpacity})`,
+                            '--reflection-opacity': pendingCalculations.reflectionOpacity
+                        };
+                        this.cdr.markForCheck();
+                    }
+                    pendingCalculations = null;
+                    tiltRafId = null;
+                });
+            }
+        });
+    }
+    ngAfterViewInit() {
+        // Fragment handling removed for standalone library
+        // Consumers can implement their own fragment handling if needed
+    }
+    /**
+     * Scrolls to a section by ID or sanitized title
+     */
+    scrollToSection(sectionId) {
+        if (typeof document === 'undefined')
+            return;
+        // Try direct ID match first
+        let targetElement = document.getElementById(sectionId);
+        // If not found, try to find by sanitized section title
+        if (!targetElement) {
+            const section = this.processedSections.find(s => this.sanitizeSectionId(s.title) === sectionId);
+            if (section) {
+                targetElement = document.getElementById(this.getSectionId(section));
+            }
+        }
+        if (targetElement) {
+            // Scroll with smooth behavior and offset for header
+            const yOffset = -20; // Offset from top
+            const y = targetElement.getBoundingClientRect().top + window.pageYOffset + yOffset;
+            window.scrollTo({
+                top: y,
+                behavior: 'smooth'
+            });
+            // Add visual highlight effect
+            targetElement.classList.add('section-highlight');
+            setTimeout(() => {
+                targetElement?.classList.remove('section-highlight');
+            }, 2000);
+        }
+    }
+    /**
+     * Gets a unique section ID for scrolling
+     */
+    getSectionId(section) {
+        return `section-${this.sanitizeSectionId(section.title || section.id || 'unknown')}`;
+    }
+    /**
+     * Sanitizes section title for use as HTML ID
+     */
+    sanitizeSectionId(title) {
+        return title.toLowerCase()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-|-$/g, '');
+    }
+    initializeParticles() {
+        // Create 20 smaller particles for smoother mouse following trail
+        this.particles = Array.from({ length: 20 }, () => ({
+            transform: 'translate(0, 0) scale(1)',
+            opacity: 0.5
+        }));
+    }
+    startMessageRotation() {
+        this.currentMessage = this.funnyMessages[0];
+        this.currentMessageIndex = 0;
+        interval(2500) // Change message every 2.5 seconds
+            .pipe(takeUntil(this.destroyed$))
+            .subscribe(() => {
+            this.currentMessageIndex = (this.currentMessageIndex + 1) % this.funnyMessages.length;
+            this.currentMessage = this.funnyMessages[this.currentMessageIndex];
+            this.cdr.markForCheck();
+        });
+    }
+    setupScrollTracking() {
+        fromEvent(window, 'scroll')
+            .pipe(takeUntil(this.destroyed$))
+            .subscribe(() => {
+            this.scrollY = window.scrollY;
+            this.updateContentTransform();
+        });
+    }
+    onEmptyStateMouseMove(event) {
+        if (!this.emptyStateContainer)
+            return;
+        const rect = this.emptyStateContainer.nativeElement.getBoundingClientRect();
+        this.mouseX = event.clientX - rect.left;
+        this.mouseY = event.clientY - rect.top;
+        this.isMouseOverEmptyState = true;
+        this.updateParticlePositions();
+        this.updateGradientTransform();
+        this.updateContentTransform();
+    }
+    onEmptyStateMouseLeave() {
+        this.isMouseOverEmptyState = false;
+        // Reset particles to center with smooth animation
+        this.resetParticles();
+    }
+    updateParticlePositions() {
+        if (!this.emptyStateContainer)
+            return;
+        const rect = this.emptyStateContainer.nativeElement.getBoundingClientRect();
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+        const deltaX = this.mouseX - centerX;
+        const deltaY = this.mouseY - centerY;
+        const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+        const maxDistance = Math.sqrt(rect.width * rect.width + rect.height * rect.height) / 2;
+        const normalizedDistance = Math.min(distance / maxDistance, 1);
+        this.particles = this.particles.map((particle, index) => {
+            // Create a trailing effect with exponential easing
+            const delay = index * 0.08;
+            const followStrength = 0.4 - (delay * 0.3); // Particles further back follow less
+            const spiralRadius = 15 + (index % 4) * 8;
+            const angle = (index * 137.5) % 360; // Golden angle for spiral distribution
+            const angleRad = angle * Math.PI / 180;
+            // Calculate spiral offset
+            const spiralX = Math.cos(angleRad) * spiralRadius;
+            const spiralY = Math.sin(angleRad) * spiralRadius;
+            // Smooth following with easing
+            const targetX = deltaX * followStrength + spiralX;
+            const targetY = deltaY * followStrength + spiralY;
+            // Opacity based on distance and position
+            const baseOpacity = 0.5;
+            const distanceOpacity = normalizedDistance * 0.3;
+            const positionOpacity = (1 - Math.abs(index - this.particles.length / 2) / this.particles.length) * 0.2;
+            const finalOpacity = Math.min(1, baseOpacity + distanceOpacity + positionOpacity);
+            return {
+                transform: `translate(${targetX}px, ${targetY}px) scale(${0.8 + normalizedDistance * 0.4})`,
+                opacity: finalOpacity
+            };
+        });
+        this.cdr.markForCheck();
+    }
+    resetParticles() {
+        this.particles = this.particles.map(particle => ({
+            transform: 'translate(0, 0) scale(1)',
+            opacity: 0.5
+        }));
+        this.cdr.markForCheck();
+    }
+    updateGradientTransform() {
+        if (!this.emptyStateContainer)
+            return;
+        const rect = this.emptyStateContainer.nativeElement.getBoundingClientRect();
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+        const deltaX = (this.mouseX - centerX) * 0.1;
+        const deltaY = (this.mouseY - centerY) * 0.1;
+        this.gradientTransform = `translate(calc(-50% + ${deltaX}px), calc(-50% + ${deltaY}px))`;
+        this.cdr.markForCheck();
+    }
+    updateContentTransform() {
+        if (!this.emptyStateContainer)
+            return;
+        const rect = this.emptyStateContainer.nativeElement.getBoundingClientRect();
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+        // Parallax effect based on mouse position and scroll
+        const mouseParallaxX = this.isMouseOverEmptyState ? (this.mouseX - centerX) * 0.02 : 0;
+        const mouseParallaxY = this.isMouseOverEmptyState ? (this.mouseY - centerY) * 0.02 : 0;
+        const scrollParallaxY = this.scrollY * 0.05;
+        this.contentTransform = `translate(${mouseParallaxX}px, calc(${mouseParallaxY}px + ${scrollParallaxY}px))`;
+        this.cdr.markForCheck();
+    }
+    ngOnDestroy() {
+        // Cancel any pending RAFs
+        if (this.mouseMoveRafId !== null) {
+            cancelAnimationFrame(this.mouseMoveRafId);
+        }
+        // Clear tilt service cache for this element
+        if (this.tiltContainerRef?.nativeElement) {
+            this.magneticTiltService.clearCache(this.tiltContainerRef.nativeElement);
+        }
+        this.destroyed$.next();
+        this.destroyed$.complete();
+    }
+    onMouseEnter(event) {
+        this.isHovered = true;
+        this.mousePosition = { x: event.clientX, y: event.clientY };
+        if (this.tiltContainerRef?.nativeElement) {
+            // Smooth enter: calculate tilt immediately for responsive feel
+            this.magneticTiltService.calculateTilt(this.mousePosition, this.tiltContainerRef.nativeElement);
+        }
+        // No need for markForCheck - tilt updates are handled via RAF in subscription
+    }
+    onMouseLeave() {
+        this.isHovered = false;
+        // Cancel pending RAF for mouse moves
+        if (this.mouseMoveRafId !== null) {
+            cancelAnimationFrame(this.mouseMoveRafId);
+            this.mouseMoveRafId = null;
+        }
+        this.pendingMouseMove = null;
+        // Smooth exit: reset with smooth transition that completes even if cursor leaves quickly
+        this.magneticTiltService.resetTilt(true);
+        // No need for markForCheck - tilt reset is handled via smooth animation
+    }
+    onMouseMove(event) {
+        if (!this.isHovered || !this.tiltContainerRef?.nativeElement) {
+            return;
+        }
+        // Store latest mouse position
+        this.pendingMouseMove = event;
+        // Throttle with RAF for 60fps smooth updates
+        if (this.mouseMoveRafId === null) {
+            this.mouseMoveRafId = requestAnimationFrame(() => {
+                if (this.pendingMouseMove && this.tiltContainerRef?.nativeElement) {
+                    this.mousePosition = {
+                        x: this.pendingMouseMove.clientX,
+                        y: this.pendingMouseMove.clientY
+                    };
+                    this.magneticTiltService.calculateTilt(this.mousePosition, this.tiltContainerRef.nativeElement);
+                }
+                this.pendingMouseMove = null;
+                this.mouseMoveRafId = null;
+            });
+        }
+    }
+    onFieldClick(field, section) {
+        this.fieldInteraction.emit({
+            field,
+            action: 'click',
+            sectionTitle: section?.title
+        });
+    }
+    /**
+     * Type guard to check if action has email property
+     */
+    hasEmailProperty(action) {
+        return 'email' in action && action.email !== undefined;
+    }
+    onActionClick(actionObj) {
+        if (!this.cardConfig) {
+            return;
+        }
+        // Handle button types based on 'type' field from JSON
+        // Check if type is a button behavior type (not legacy styling value)
+        if (actionObj.type && ['mail', 'website', 'agent', 'question'].includes(actionObj.type)) {
+            switch (actionObj.type) {
+                case 'mail':
+                    if (this.hasEmailProperty(actionObj)) {
+                        this.handleEmailAction(actionObj);
+                    }
+                    else {
+                        console.error('Mail action requires email configuration');
+                    }
+                    return;
+                case 'website':
+                    // Use url property if available, otherwise fall back to action property
+                    const url = actionObj.url || actionObj.action;
+                    if (url && url !== '#' && (url.startsWith('http://') || url.startsWith('https://'))) {
+                        window.open(url, '_blank', 'noopener,noreferrer');
+                    }
+                    else {
+                        console.warn('No valid URL provided for website button type');
+                    }
+                    return;
+                case 'agent':
+                    this.agentAction.emit({
+                        action: actionObj,
+                        card: this.cardConfig,
+                        agentId: actionObj.agentId,
+                        context: actionObj.agentContext || actionObj.meta
+                    });
+                    return;
+                case 'question':
+                    this.questionAction.emit({
+                        action: actionObj,
+                        card: this.cardConfig,
+                        question: actionObj.question || actionObj.label
+                    });
+                    return;
+                default:
+                    // Should not reach here, but fall through to legacy handling
+                    break;
+            }
+        }
+        // Legacy handling for backwards compatibility
+        // If type is 'primary' or 'secondary' (legacy styling), treat as regular action
+        // Handle email actions (email property present)
+        if (this.hasEmailProperty(actionObj)) {
+            this.handleEmailAction(actionObj);
+            return;
+        }
+        // Handle URL actions (action property contains a URL)
+        if (actionObj.action && actionObj.action !== '#' && actionObj.action.startsWith('http')) {
+            window.open(actionObj.action, '_blank', 'noopener,noreferrer');
+            return;
+        }
+        // Handle regular actions (emit event for custom handling)
+        const action = actionObj.action || actionObj.label;
+        this.cardInteraction.emit({
+            action: action,
+            card: this.cardConfig
+        });
+    }
+    handleEmailAction(action) {
+        // Validate that email configuration exists
+        if (!action.email) {
+            console.error('Email action requires email configuration');
+            return;
+        }
+        const email = action.email;
+        // Validate required fields for mail type
+        if (action.type === 'mail') {
+            if (!email.contact) {
+                console.error('Mail action requires email.contact with name, email, and role');
+                return;
+            }
+            if (!email.contact.name || !email.contact.email || !email.contact.role) {
+                console.error('Mail action requires email.contact.name, email.contact.email, and email.contact.role');
+                return;
+            }
+            if (!email.subject) {
+                console.error('Mail action requires email.subject');
+                return;
+            }
+            if (!email.body) {
+                console.error('Mail action requires email.body');
+                return;
+            }
+        }
+        // Determine recipient email address - prioritize to, then contact.email
+        let recipientEmail = '';
+        if (email.to) {
+            recipientEmail = Array.isArray(email.to) ? email.to.join(',') : email.to;
+        }
+        else if (email.contact?.email) {
+            recipientEmail = email.contact.email;
+        }
+        if (!recipientEmail) {
+            console.warn('No email address provided for email action');
+            return;
+        }
+        // Build mailto URL parameters manually for better control over encoding
+        const params = [];
+        // Add CC if provided
+        if (email.cc) {
+            const cc = Array.isArray(email.cc) ? email.cc.join(',') : email.cc;
+            params.push(`cc=${encodeURIComponent(cc)}`);
+        }
+        // Add BCC if provided
+        if (email.bcc) {
+            const bcc = Array.isArray(email.bcc) ? email.bcc.join(',') : email.bcc;
+            params.push(`bcc=${encodeURIComponent(bcc)}`);
+        }
+        // Add subject - required for mail type, optional for legacy
+        if (email.subject) {
+            params.push(`subject=${encodeURIComponent(email.subject)}`);
+        }
+        else if (action.type === 'mail') {
+            console.warn('Email subject is missing for mail action');
+        }
+        // Process body - replace placeholders with contact information if available
+        let processedBody = email.body || '';
+        if (email.contact) {
+            // Replace {name} placeholder if contact name is available
+            if (email.contact.name) {
+                processedBody = processedBody.replace(/\{name\}/g, email.contact.name);
+                // Also replace common placeholders like {contact} or {recipient}
+                processedBody = processedBody.replace(/\{contact\}/g, email.contact.name);
+                processedBody = processedBody.replace(/\{recipient\}/g, email.contact.name);
+            }
+            // Replace {role} placeholder if contact role is available
+            if (email.contact.role) {
+                processedBody = processedBody.replace(/\{role\}/g, email.contact.role);
+            }
+            // Replace {email} placeholder
+            if (email.contact.email) {
+                processedBody = processedBody.replace(/\{email\}/g, email.contact.email);
+            }
+        }
+        // Add body - required for mail type, optional for legacy
+        if (processedBody) {
+            // Replace newlines with %0D%0A (CRLF) for proper email formatting
+            // Then encode the rest of the content
+            const bodyWithLineBreaks = processedBody.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+            const encodedBody = encodeURIComponent(bodyWithLineBreaks).replace(/%0A/g, '%0D%0A');
+            params.push(`body=${encodedBody}`);
+        }
+        else if (action.type === 'mail') {
+            console.warn('Email body is missing for mail action');
+        }
+        // Construct mailto link
+        const queryString = params.length > 0 ? '?' + params.join('&') : '';
+        const mailtoLink = `mailto:${recipientEmail}${queryString}`;
+        // Open email client using a temporary anchor element (most reliable method)
+        // This ensures the email client opens without navigating away from the page
+        const anchor = document.createElement('a');
+        anchor.href = mailtoLink;
+        anchor.style.display = 'none';
+        document.body.appendChild(anchor);
+        anchor.click();
+        document.body.removeChild(anchor);
+    }
+    toggleFullscreen() {
+        this.fullscreenToggle.emit(!this.isFullscreen);
+        // Immediate reset when toggling fullscreen (no smooth transition needed)
+        this.magneticTiltService.resetTilt(false);
+    }
+    get isStreamingActive() {
+        return this.streamingStage === 'streaming';
+    }
+    get hasLoadingOverlay() {
+        const isStreamingOrThinking = this.streamingStage === 'streaming' || this.streamingStage === 'thinking';
+        const hasNoProcessedSections = !this.processedSections || this.processedSections.length === 0;
+        const hasNoConfigSections = !this.cardConfig?.sections || this.cardConfig.sections.length === 0;
+        return isStreamingOrThinking && hasNoProcessedSections && hasNoConfigSections;
+    }
+    onSectionEvent(event) {
+        switch (event.type) {
+            case 'field':
+                if (event.field) {
+                    this.fieldInteraction.emit({
+                        field: event.field,
+                        action: 'click',
+                        sectionTitle: event.metadata?.['sectionTitle'] ?? event.section.title,
+                        metadata: event.metadata
+                    });
+                }
+                break;
+            case 'item':
+                if (event.item) {
+                    this.fieldInteraction.emit({
+                        item: event.item,
+                        action: 'click',
+                        sectionTitle: event.metadata?.['sectionTitle'] ?? event.section.title,
+                        metadata: event.metadata
+                    });
+                }
+                break;
+            case 'action':
+                if (event.action && this.cardConfig) {
+                    const identifier = event.action.action ?? event.action.id ?? event.action.label ?? 'section-action';
+                    this.cardInteraction.emit({
+                        action: identifier,
+                        card: this.cardConfig
+                    });
+                }
+                break;
+            default:
+                break;
+        }
+    }
+    onLayoutChange(layout) {
+        // Layout change handler - kept for potential future use
+    }
+    getActionIconName(action) {
+        // If icon is explicitly provided, use it
+        if (action.icon) {
+            return this.iconService.getFieldIcon(action.icon);
+        }
+        // If type is specified and it's a button behavior type (not legacy styling), use default icons
+        if (action.type && ['mail', 'website', 'agent', 'question'].includes(action.type)) {
+            switch (action.type) {
+                case 'mail':
+                    return 'mail';
+                case 'website':
+                    return 'external-link';
+                case 'agent':
+                    return 'user';
+                case 'question':
+                    return 'message-circle';
+                default:
+                    break;
+            }
+        }
+        // Fallback to deriving icon from label
+        return this.iconService.getFieldIcon(action.label);
+    }
+    /**
+     * Get the default icon name for a button type (returns lucide icon name)
+     * Uses 'type' field from JSON for button behavior
+     */
+    getDefaultIconForButtonType(buttonType) {
+        if (!buttonType || !['mail', 'website', 'agent', 'question'].includes(buttonType)) {
+            return null;
+        }
+        switch (buttonType) {
+            case 'mail':
+                return 'mail';
+            case 'website':
+                return 'external-link';
+            case 'agent':
+                return 'user';
+            case 'question':
+                return 'message-circle';
+            default:
+                return null;
+        }
+    }
+    /**
+     * Get the icon name to display for an action button
+     * Returns the icon name (lucide icon name) or null if no icon should be shown
+     */
+    getActionIconNameForDisplay(action) {
+        // If explicit icon is provided and it's a URL, return null (will be handled as image)
+        if (action.icon && action.icon.startsWith('http')) {
+            return null;
+        }
+        // If explicit icon is provided and it's a lucide icon name, use it
+        if (action.icon && !action.icon.startsWith('http')) {
+            // Check if it's a lucide icon name (simple string like 'mail', 'user', etc.)
+            if (/^[a-z-]+$/i.test(action.icon)) {
+                return this.getActionIconName(action);
+            }
+            // Otherwise it's a text icon, return null (will be handled as text)
+            return null;
+        }
+        // If no explicit icon, check if type is a button behavior type with default icon
+        if (action.type && ['mail', 'website', 'agent', 'question'].includes(action.type)) {
+            return this.getDefaultIconForButtonType(action.type);
+        }
+        // Fallback: try to derive icon from label
+        const derivedIcon = this.getActionIconName(action);
+        // Only use if it's a valid lucide icon name (simple string)
+        if (derivedIcon && /^[a-z-]+$/i.test(derivedIcon)) {
+            return derivedIcon;
+        }
+        return null;
+    }
+    /**
+     * Check if action has a text icon (non-lucide, non-URL)
+     */
+    hasTextIcon(action) {
+        return !!(action.icon && !action.icon.startsWith('http') && !/^[a-z-]+$/i.test(action.icon));
+    }
+    /**
+     * Check if action has an image icon (URL)
+     */
+    hasImageIcon(action) {
+        return !!(action.icon && action.icon.startsWith('http'));
+    }
+    getActionButtonClasses(action) {
+        const primaryClasses = 'bg-[var(--color-brand)] text-white font-semibold border-0 hover:bg-[var(--color-brand)]/90 hover:shadow-lg hover:shadow-[var(--color-brand)]/40 active:scale-95';
+        const outlineClasses = 'text-[var(--color-brand)] border border-[var(--color-brand)] bg-transparent font-semibold hover:bg-[var(--color-brand)]/10 active:scale-95';
+        const ghostClasses = 'text-[var(--color-brand)] bg-transparent border-0 font-semibold hover:bg-[var(--color-brand)]/10 active:scale-95';
+        // Use variant field if present, otherwise check legacy type field for styling
+        const styleVariant = action.variant || (action.type === 'primary' || action.type === 'secondary' ? action.type : 'primary');
+        switch (styleVariant) {
+            case 'secondary':
+            case 'outline':
+                return outlineClasses;
+            case 'ghost':
+                return ghostClasses;
+            default:
+                return primaryClasses;
+        }
+    }
+    refreshProcessedSections(forceStructural = false) {
+        if (!this._cardConfig?.sections?.length) {
+            this.resetProcessedSections();
+            return;
+        }
+        const sections = this._cardConfig.sections;
+        const nextHash = this.hashSections(sections);
+        const structureChanged = nextHash !== this.previousSectionsHash;
+        const requiresStructuralRebuild = forceStructural ||
+            structureChanged ||
+            this._changeType === 'structural' ||
+            !this.processedSections.length;
+        // Removed excessive logging for performance
+        if (requiresStructuralRebuild) {
+            this.normalizedSectionCache = new WeakMap();
+        }
+        const normalizedSections = sections.map(section => this.getNormalizedSection(section, requiresStructuralRebuild));
+        const orderedSections = requiresStructuralRebuild
+            ? this.sectionNormalizationService.sortSections(normalizedSections)
+            : this.mergeWithPreviousOrder(normalizedSections);
+        this.processedSections = orderedSections;
+        this.sectionOrderKeys = orderedSections.map(section => this.getSectionKey(section));
+        this.previousSectionsHash = nextHash;
+        // Removed excessive logging for performance
+        this.cdr.markForCheck();
+    }
+    getNormalizedSection(section, forceRebuild) {
+        if (!forceRebuild) {
+            const cached = this.normalizedSectionCache.get(section);
+            if (cached) {
+                return cached;
+            }
+        }
+        const normalized = this.sectionNormalizationService.normalizeSection(section);
+        this.normalizedSectionCache.set(section, normalized);
+        return normalized;
+    }
+    mergeWithPreviousOrder(normalizedSections) {
+        if (!this.sectionOrderKeys.length) {
+            return normalizedSections;
+        }
+        const nextByKey = new Map();
+        normalizedSections.forEach(section => {
+            nextByKey.set(this.getSectionKey(section), section);
+        });
+        const ordered = [];
+        this.sectionOrderKeys.forEach(key => {
+            const match = nextByKey.get(key);
+            if (match) {
+                ordered.push(match);
+                nextByKey.delete(key);
+            }
+        });
+        nextByKey.forEach(section => ordered.push(section));
+        return ordered;
+    }
+    getSectionKey(section) {
+        if (section.id) {
+            return section.id;
+        }
+        const titleKey = section.title?.toLowerCase().replace(/[^a-z0-9]+/g, '-') ?? 'section';
+        const typeKey = section.type ?? 'info';
+        return `${titleKey}-${typeKey}`;
+    }
+    resetProcessedSections() {
+        this.processedSections = [];
+        this.sectionOrderKeys = [];
+        this.previousSectionsHash = '';
+        this.normalizedSectionCache = new WeakMap();
+        this.cdr.markForCheck();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AICardRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AICardRendererComponent, isStandalone: true, selector: "app-ai-card-renderer", inputs: { cardConfig: "cardConfig", updateSource: "updateSource", isFullscreen: "isFullscreen", tiltEnabled: "tiltEnabled", streamingStage: "streamingStage", streamingProgress: "streamingProgress", streamingProgressLabel: "streamingProgressLabel", changeType: "changeType" }, outputs: { fieldInteraction: "fieldInteraction", cardInteraction: "cardInteraction", fullscreenToggle: "fullscreenToggle", agentAction: "agentAction", questionAction: "questionAction" }, viewQueries: [{ propertyName: "cardContainer", first: true, predicate: ["cardContainer"], descendants: true }, { propertyName: "tiltContainerRef", first: true, predicate: ["tiltContainer"], descendants: true }, { propertyName: "masonryGrid", first: true, predicate: MasonryGridComponent, descendants: true }, { propertyName: "emptyStateContainer", first: true, predicate: ["emptyStateContainer"], descendants: true }], ngImport: i0, template: "<div\n  *ngIf=\"cardConfig\"\n  #cardContainer\n  class=\"w-full\"\n  [class.max-w-none]=\"isFullscreen\"\n  (mouseenter)=\"onMouseEnter($event)\"\n  (mouseleave)=\"onMouseLeave()\"\n  (mousemove)=\"onMouseMove($event)\"\n>\n  <div class=\"tilt-container glow-container w-full\" \n       [ngClass]=\"{ 'max-w-none': isFullscreen }\"\n       #tiltContainer\n       [ngStyle]=\"tiltStyle\">\n      <article\n        class=\"ai-card-surface\"\n        [ngClass]=\"{ 'ai-card-surface--fullscreen': isFullscreen, 'ai-card-surface--empty-state': !processedSections.length }\"\n      >\n          <!-- Title and button at the top of the card -->\n          <div *ngIf=\"processedSections.length\" class=\"flex items-center justify-between mb-4\">\n            <h1 class=\"text-2xl font-bold text-foreground\">\n              {{ cardConfig.cardTitle }}\n            </h1>\n            <button\n              type=\"button\"\n              class=\"ai-card-fullscreen-btn\"\n              [attr.aria-label]=\"isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'\"\n              (click)=\"toggleFullscreen()\"\n            >\n              <lucide-icon [name]=\"isFullscreen ? 'minimize-2' : 'maximize-2'\" [size]=\"16\" aria-hidden=\"true\"></lucide-icon>\n            </button>\n          </div>\n\n          <p *ngIf=\"processedSections.length && cardConfig.cardSubtitle\" class=\"ai-card-subtitle\">\n            {{ cardConfig.cardSubtitle }}\n          </p>\n\n          <ng-container *ngIf=\"processedSections.length; else emptyState\">\n            <app-masonry-grid\n              [sections]=\"processedSections\"\n              [gap]=\"12\"\n              [minColumnWidth]=\"280\"\n              class=\"w-full\"\n              (sectionEvent)=\"onSectionEvent($event)\"\n              (layoutChange)=\"onLayoutChange($event)\"\n            ></app-masonry-grid>\n          </ng-container>\n\n          <ng-template #emptyState>\n            <div \n              class=\"card-empty-state\"\n              #emptyStateContainer\n              (mousemove)=\"onEmptyStateMouseMove($event)\"\n              (mouseleave)=\"onEmptyStateMouseLeave()\">\n              <div class=\"empty-state-background\">\n                <div class=\"empty-state-gradient\" [style.transform]=\"gradientTransform\"></div>\n                <div class=\"empty-state-particles\">\n                  <div \n                    *ngFor=\"let particle of particles; let i = index\"\n                    class=\"particle\"\n                    [class]=\"'particle-' + (i + 1)\"\n                    [style.transform]=\"particle.transform\"\n                    [style.opacity]=\"particle.opacity\">\n                  </div>\n                </div>\n              </div>\n              <div class=\"empty-state-content\" [style.transform]=\"contentTransform\">\n                <div class=\"empty-state-text\">\n                  <h3 class=\"empty-state-title\">Creating OSI Card</h3>\n                  <div class=\"empty-state-message-container\">\n                    <p class=\"empty-state-message\" [@messageAnimation]=\"currentMessageIndex\">\n                      {{ currentMessage }}\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n\n        <!-- Action Buttons -->\n        <div *ngIf=\"processedSections.length\" class=\"mt-auto\" style=\"margin-top: var(--section-card-gap, 12px); padding-bottom: 16px;\">\n          <div class=\"flex flex-wrap items-center gap-3\" style=\"margin-left: 4px; margin-right: 4px;\">\n            <button\n              *ngFor=\"let action of cardConfig.actions; trackBy: trackAction\"\n              type=\"button\"\n              class=\"px-5 py-2.5 text-sm transition-all duration-200 flex items-center gap-2 cursor-pointer\"\n              [ngClass]=\"getActionButtonClasses(action)\"\n              [style.border-radius]=\"'var(--section-card-border-radius, 10px)'\"\n              (click)=\"onActionClick(action)\"\n              (keydown.enter)=\"onActionClick(action)\"\n              (keydown.space)=\"$event.preventDefault(); onActionClick(action)\"\n            >\n              <!-- Lucide icon (for type defaults or explicit lucide icon names) -->\n              <lucide-icon \n                *ngIf=\"getActionIconNameForDisplay(action) as iconName\"\n                [name]=\"iconName\"\n                [size]=\"16\"\n                aria-hidden=\"true\">\n              </lucide-icon>\n              <!-- Image icon (for URL-based icons) -->\n              <img \n                *ngIf=\"hasImageIcon(action)\"\n                [src]=\"action.icon\"\n                [alt]=\"action.label + ' icon'\"\n                style=\"width: 16px; height: 16px;\"\n                aria-hidden=\"true\"\n              />\n              <!-- Text icon (for emoji or text-based icons) -->\n              <span *ngIf=\"hasTextIcon(action)\" aria-hidden=\"true\">{{ action.icon }}</span>\n              <span>{{ action.label }}</span>\n            </button>\n          </div>\n        </div>\n\n        <!-- Signature at bottom of card -->\n        <div *ngIf=\"processedSections.length\" class=\"text-xs text-muted-foreground/60 text-center\">\n          Powered by Orange Sales Intelligence\n        </div>\n      </article>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .ai-card-surface{border:.5px solid color-mix(in srgb,var(--color-brand) 49%,transparent)!important;border-width:.5px!important;border-style:solid!important;border-color:color-mix(in srgb,var(--color-brand) 49%,transparent)!important}:host ::ng-deep .ai-card-surface:hover{border:.5px solid var(--color-brand)!important;border-width:.5px!important;border-style:solid!important;border-color:var(--color-brand)!important}:host ::ng-deep .section-highlight{animation:section-pulse 2s ease-out;position:relative}:host ::ng-deep .section-highlight:after{content:\"\";position:absolute;inset:-4px;border:2px solid rgba(255,121,0,.6);border-radius:14px;pointer-events:none;animation:section-border-fade 2s ease-out forwards}@keyframes section-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.01)}}@keyframes section-border-fade{0%{opacity:1;box-shadow:0 0 20px #ff790066}to{opacity:0;box-shadow:0 0 #ff790000}}.ai-card-breakpoint-pill{display:inline-flex;align-items:center;margin-top:1rem;padding:.5rem 1.25rem;border-radius:999px;border:2px solid rgba(255,121,0,.6);background:#ff790026;color:#ff7900;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 4px 20px #ff79004d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.ai-card-surface.streaming-active :where(.info-row,.section-card,.list-card,.event-timeline__item,.product-card,.solutions-card,.contact-card,.network-card__item,.map-point,.text-reference-entry,.quote-card,.overview-card__item){opacity:0;transform:translateY(12px);animation:field-enter .45s ease forwards;will-change:opacity,transform}.ai-card-surface.streaming-active :where(.info-row,.section-card,.list-card,.event-timeline__item,.product-card,.solutions-card,.contact-card,.network-card__item,.map-point,.text-reference-entry,.quote-card,.overview-card__item):nth-child(1){animation-delay:0s}.ai-card-surface.streaming-active :where(.info-row,.section-card,.list-card,.event-timeline__item,.product-card,.solutions-card,.contact-card,.network-card__item,.map-point,.text-reference-entry,.quote-card,.overview-card__item):nth-child(2){animation-delay:.05s}.ai-card-surface.streaming-active :where(.info-row,.section-card,.list-card,.event-timeline__item,.product-card,.solutions-card,.contact-card,.network-card__item,.map-point,.text-reference-entry,.quote-card,.overview-card__item):nth-child(3){animation-delay:.1s}.ai-card-surface.streaming-active :where(.info-row,.section-card,.list-card,.event-timeline__item,.product-card,.solutions-card,.contact-card,.network-card__item,.map-point,.text-reference-entry,.quote-card,.overview-card__item):nth-child(4){animation-delay:.15s}.ai-card-surface.streaming-active :where(.info-row,.section-card,.list-card,.event-timeline__item,.product-card,.solutions-card,.contact-card,.network-card__item,.map-point,.text-reference-entry,.quote-card,.overview-card__item):nth-child(5){animation-delay:.2s}.ai-card-surface.streaming-active :where(.info-row,.section-card,.list-card,.event-timeline__item,.product-card,.solutions-card,.contact-card,.network-card__item,.map-point,.text-reference-entry,.quote-card,.overview-card__item):nth-child(n+6){animation-delay:.24s}@keyframes field-enter{0%{opacity:0;transform:translateY(12px) scale(.98)}60%{opacity:1;transform:translateY(-2px) scale(1.01)}to{opacity:1;transform:translateY(0) scale(1)}}.loading-particles{position:absolute;inset:0;pointer-events:none}.particle{position:absolute;width:8px;height:8px;background:var(--color-brand);border-radius:50%;opacity:.6;animation:particle-float 3s ease-in-out infinite;box-shadow:0 0 12px var(--color-brand)}.particle:nth-child(1){top:10%;left:20%}.particle:nth-child(2){top:20%;left:80%;animation-delay:.3s}.particle:nth-child(3){top:60%;left:15%;animation-delay:.6s}.particle:nth-child(4){top:80%;left:70%;animation-delay:.9s}.particle:nth-child(5){top:30%;left:50%;animation-delay:1.2s}.particle:nth-child(6){top:70%;left:40%;animation-delay:1.5s}.particle:nth-child(7){top:50%;left:90%;animation-delay:1.8s}.particle:nth-child(8){top:15%;left:60%;animation-delay:2.1s}@keyframes particle-float{0%,to{transform:translateY(0) translate(0) scale(1);opacity:.3}25%{transform:translateY(-30px) translate(20px) scale(1.2);opacity:.7}50%{transform:translateY(-60px) translate(-10px) scale(.8);opacity:1}75%{transform:translateY(-30px) translate(15px) scale(1.1);opacity:.6}}.loading-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.loading-spinner{width:64px;height:64px;position:relative}.spinner-svg{width:100%;height:100%;animation:spinner-rotate 1.5s linear infinite;transform-origin:center}.spinner-circle{stroke-dasharray:125.6;stroke-dashoffset:31.4;stroke:var(--color-brand);animation:spinner-dash 1.5s ease-in-out infinite}@keyframes spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spinner-dash{0%{stroke-dasharray:1,125.6;stroke-dashoffset:0}50%{stroke-dasharray:94.2,125.6;stroke-dashoffset:-31.4}to{stroke-dasharray:94.2,125.6;stroke-dashoffset:-125.6}}.loading-text{text-align:center}.loading-title{font-size:1.25rem;font-weight:600;color:var(--foreground);margin-bottom:.5rem;background:linear-gradient(90deg,var(--foreground) 0%,var(--color-brand) 50%,var(--foreground) 100%);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:text-shimmer 2s ease-in-out infinite}.loading-subtitle{font-size:.875rem;color:var(--muted-foreground);margin:0}@keyframes text-shimmer{0%,to{background-position:-200% 0}50%{background-position:200% 0}}.loading-wave{position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent 0%,var(--color-brand) 25%,var(--color-brand) 75%,transparent 100%);background-size:200% 100%;animation:wave-slide 2s ease-in-out infinite}@keyframes wave-slide{0%{background-position:-200% 0}to{background-position:200% 0}}.ai-card-surface.has-loading-overlay{display:flex;align-items:center;justify-content:center;min-height:500px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(255,121,0,.05) 0%,transparent 70%);animation:generating-bg-pulse 3s ease-in-out infinite,card-generating-pulse 2s ease-in-out infinite}@keyframes card-generating-pulse{0%,to{box-shadow:inset 0 1px 3px #ff790014,0 4px 20px #00000026,0 0 #ff790000}50%{box-shadow:inset 0 1px 3px #ff790026,0 4px 20px #00000026,0 0 30px #ff790033}}@keyframes generating-bg-pulse{0%,to{background:radial-gradient(circle at 50% 50%,rgba(255,121,0,.05) 0%,transparent 70%)}50%{background:radial-gradient(circle at 50% 50%,rgba(255,121,0,.12) 0%,transparent 70%)}}.generating-content{position:relative;z-index:2;text-align:center}.generating-shimmer{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,121,0,.15) 50%,transparent 100%);animation:shimmer-sweep 2.5s ease-in-out infinite;pointer-events:none;z-index:1}@keyframes shimmer-sweep{0%{left:-100%}to{left:100%}}.generating-text{font-size:1.125rem;font-weight:600;color:var(--foreground);margin:0;background:linear-gradient(90deg,var(--foreground) 0%,var(--color-brand) 50%,var(--foreground) 100%);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:text-shimmer-flow 2.5s ease-in-out infinite;position:relative;z-index:2;letter-spacing:.02em}@keyframes text-shimmer-flow{0%,to{background-position:-200% 0}50%{background-position:200% 0}}.card-empty-state{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%;height:100%;padding:4rem 2rem;border-radius:1.5rem;overflow:hidden;border:1px solid color-mix(in srgb,var(--color-brand) 20%,transparent);background:color-mix(in srgb,var(--background) 98%,transparent);transition:all .3s ease;flex:1}:host ::ng-deep .ai-card-surface--empty-state{display:flex!important;flex-direction:column!important;min-height:100%!important;height:100%!important}:host ::ng-deep .ai-card-surface--empty-state .card-empty-state{flex:1 1 auto!important;min-height:0!important;height:100%!important;display:flex!important}.card-empty-state:hover{border-color:color-mix(in srgb,var(--color-brand) 30%,transparent);background:color-mix(in srgb,var(--background) 99%,transparent)}.empty-state-background{position:absolute;inset:0;overflow:hidden;pointer-events:none}.empty-state-gradient{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150%;height:150%;background:radial-gradient(circle,color-mix(in srgb,var(--color-brand) 6%,transparent) 0%,color-mix(in srgb,var(--color-brand) 3%,transparent) 50%,transparent 80%);animation:gradient-pulse 5s ease-in-out infinite;opacity:.8}@keyframes gradient-pulse{0%,to{opacity:.6;transform:translate(-50%,-50%) scale(1)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.05)}}.empty-state-particles{position:absolute;inset:0}.particle{position:absolute;width:2.5px;height:2.5px;border-radius:50%;background:color-mix(in srgb,var(--color-brand) 55%,transparent);box-shadow:0 0 4px color-mix(in srgb,var(--color-brand) 45%,transparent);transition:transform .8s cubic-bezier(.23,1,.32,1),opacity .5s ease;will-change:transform,opacity;top:50%;left:50%;margin-left:-1.25px;margin-top:-1.25px;pointer-events:none;filter:blur(.5px)}.particle:nth-child(odd){background:color-mix(in srgb,var(--color-brand) 65%,transparent);box-shadow:0 0 6px color-mix(in srgb,var(--color-brand) 55%,transparent)}.particle:nth-child(2n){background:color-mix(in srgb,var(--color-brand) 45%,transparent);box-shadow:0 0 3px color-mix(in srgb,var(--color-brand) 35%,transparent)}.empty-state-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1rem;max-width:420px;width:100%;transition:transform .2s cubic-bezier(.25,.46,.45,.94);will-change:transform}.empty-state-icon-wrapper{position:relative;display:flex;align-items:center;justify-content:center;width:88px;height:88px}.empty-state-icon-ring{position:absolute;inset:-8px;border:1.5px solid color-mix(in srgb,var(--color-brand) 25%,transparent);border-radius:50%;animation:ring-pulse 3s ease-in-out infinite}.empty-state-icon-pulse{position:absolute;inset:-16px;border:1px solid color-mix(in srgb,var(--color-brand) 15%,transparent);border-radius:50%;animation:ring-pulse 3s ease-in-out infinite .75s}@keyframes ring-pulse{0%,to{opacity:.4;transform:scale(1)}50%{opacity:.7;transform:scale(1.08)}}.empty-state-icon{position:relative;z-index:1;color:var(--color-brand);animation:icon-float 4s ease-in-out infinite;filter:drop-shadow(0 2px 8px color-mix(in srgb,var(--color-brand) 25%,transparent));opacity:.95}@keyframes icon-float{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-6px) rotate(-3deg)}50%{transform:translateY(-10px) rotate(0)}75%{transform:translateY(-6px) rotate(3deg)}}.empty-state-text{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;width:100%}.empty-state-title{font-size:1.75rem;font-weight:700;color:var(--foreground);margin:0;letter-spacing:-.03em;line-height:1.2;text-align:center;animation:fade-in-up .6s ease-out .2s both}.empty-state-message-container{min-height:2.5rem;display:flex;align-items:center;justify-content:center;width:100%}.empty-state-message{font-size:1rem;color:color-mix(in srgb,var(--color-brand) 75%,transparent);margin:0;line-height:1.6;font-weight:500;font-style:italic;text-align:center;animation:fade-in-up .6s ease-out .4s both;letter-spacing:.01em}@keyframes fade-in-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.card-empty-state-legacy{min-height:200px;display:flex;align-items:center;justify-content:center;padding:3rem}.empty-state-icon{position:relative;width:80px;height:80px}.empty-state-dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:12px;height:12px;background:var(--color-brand);border-radius:50%;opacity:.6;animation:dot-pulse 2s ease-in-out infinite}.empty-state-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border:2px solid var(--color-brand);border-radius:50%;opacity:.2;animation:ring-expand 2s ease-in-out infinite}@keyframes dot-pulse{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.6}50%{transform:translate(-50%,-50%) scale(1.5);opacity:.3}}@keyframes ring-expand{0%{transform:translate(-50%,-50%) scale(.8);opacity:.2}50%{transform:translate(-50%,-50%) scale(1);opacity:.1}to{transform:translate(-50%,-50%) scale(1.2);opacity:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: LucideIconsModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: MasonryGridComponent, selector: "app-masonry-grid", inputs: ["sections", "gap", "minColumnWidth", "maxColumns"], outputs: ["sectionEvent", "layoutChange"] }], animations: [
+            trigger('messageAnimation', [
+                transition('* => *', [
+                    style({ opacity: 0, transform: 'translateY(10px)' }),
+                    animate('0.4s ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
+                ])
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AICardRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-ai-card-renderer', standalone: true, imports: [CommonModule, LucideIconsModule, MasonryGridComponent], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        trigger('messageAnimation', [
+                            transition('* => *', [
+                                style({ opacity: 0, transform: 'translateY(10px)' }),
+                                animate('0.4s ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
+                            ])
+                        ])
+                    ], template: "<div\n  *ngIf=\"cardConfig\"\n  #cardContainer\n  class=\"w-full\"\n  [class.max-w-none]=\"isFullscreen\"\n  (mouseenter)=\"onMouseEnter($event)\"\n  (mouseleave)=\"onMouseLeave()\"\n  (mousemove)=\"onMouseMove($event)\"\n>\n  <div class=\"tilt-container glow-container w-full\" \n       [ngClass]=\"{ 'max-w-none': isFullscreen }\"\n       #tiltContainer\n       [ngStyle]=\"tiltStyle\">\n      <article\n        class=\"ai-card-surface\"\n        [ngClass]=\"{ 'ai-card-surface--fullscreen': isFullscreen, 'ai-card-surface--empty-state': !processedSections.length }\"\n      >\n          <!-- Title and button at the top of the card -->\n          <div *ngIf=\"processedSections.length\" class=\"flex items-center justify-between mb-4\">\n            <h1 class=\"text-2xl font-bold text-foreground\">\n              {{ cardConfig.cardTitle }}\n            </h1>\n            <button\n              type=\"button\"\n              class=\"ai-card-fullscreen-btn\"\n              [attr.aria-label]=\"isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'\"\n              (click)=\"toggleFullscreen()\"\n            >\n              <lucide-icon [name]=\"isFullscreen ? 'minimize-2' : 'maximize-2'\" [size]=\"16\" aria-hidden=\"true\"></lucide-icon>\n            </button>\n          </div>\n\n          <p *ngIf=\"processedSections.length && cardConfig.cardSubtitle\" class=\"ai-card-subtitle\">\n            {{ cardConfig.cardSubtitle }}\n          </p>\n\n          <ng-container *ngIf=\"processedSections.length; else emptyState\">\n            <app-masonry-grid\n              [sections]=\"processedSections\"\n              [gap]=\"12\"\n              [minColumnWidth]=\"280\"\n              class=\"w-full\"\n              (sectionEvent)=\"onSectionEvent($event)\"\n              (layoutChange)=\"onLayoutChange($event)\"\n            ></app-masonry-grid>\n          </ng-container>\n\n          <ng-template #emptyState>\n            <div \n              class=\"card-empty-state\"\n              #emptyStateContainer\n              (mousemove)=\"onEmptyStateMouseMove($event)\"\n              (mouseleave)=\"onEmptyStateMouseLeave()\">\n              <div class=\"empty-state-background\">\n                <div class=\"empty-state-gradient\" [style.transform]=\"gradientTransform\"></div>\n                <div class=\"empty-state-particles\">\n                  <div \n                    *ngFor=\"let particle of particles; let i = index\"\n                    class=\"particle\"\n                    [class]=\"'particle-' + (i + 1)\"\n                    [style.transform]=\"particle.transform\"\n                    [style.opacity]=\"particle.opacity\">\n                  </div>\n                </div>\n              </div>\n              <div class=\"empty-state-content\" [style.transform]=\"contentTransform\">\n                <div class=\"empty-state-text\">\n                  <h3 class=\"empty-state-title\">Creating OSI Card</h3>\n                  <div class=\"empty-state-message-container\">\n                    <p class=\"empty-state-message\" [@messageAnimation]=\"currentMessageIndex\">\n                      {{ currentMessage }}\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n\n        <!-- Action Buttons -->\n        <div *ngIf=\"processedSections.length\" class=\"mt-auto\" style=\"margin-top: var(--section-card-gap, 12px); padding-bottom: 16px;\">\n          <div class=\"flex flex-wrap items-center gap-3\" style=\"margin-left: 4px; margin-right: 4px;\">\n            <button\n              *ngFor=\"let action of cardConfig.actions; trackBy: trackAction\"\n              type=\"button\"\n              class=\"px-5 py-2.5 text-sm transition-all duration-200 flex items-center gap-2 cursor-pointer\"\n              [ngClass]=\"getActionButtonClasses(action)\"\n              [style.border-radius]=\"'var(--section-card-border-radius, 10px)'\"\n              (click)=\"onActionClick(action)\"\n              (keydown.enter)=\"onActionClick(action)\"\n              (keydown.space)=\"$event.preventDefault(); onActionClick(action)\"\n            >\n              <!-- Lucide icon (for type defaults or explicit lucide icon names) -->\n              <lucide-icon \n                *ngIf=\"getActionIconNameForDisplay(action) as iconName\"\n                [name]=\"iconName\"\n                [size]=\"16\"\n                aria-hidden=\"true\">\n              </lucide-icon>\n              <!-- Image icon (for URL-based icons) -->\n              <img \n                *ngIf=\"hasImageIcon(action)\"\n                [src]=\"action.icon\"\n                [alt]=\"action.label + ' icon'\"\n                style=\"width: 16px; height: 16px;\"\n                aria-hidden=\"true\"\n              />\n              <!-- Text icon (for emoji or text-based icons) -->\n              <span *ngIf=\"hasTextIcon(action)\" aria-hidden=\"true\">{{ action.icon }}</span>\n              <span>{{ action.label }}</span>\n            </button>\n          </div>\n        </div>\n\n        <!-- Signature at bottom of card -->\n        <div *ngIf=\"processedSections.length\" class=\"text-xs text-muted-foreground/60 text-center\">\n          Powered by Orange Sales Intelligence\n        </div>\n      </article>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .ai-card-surface{border:.5px solid color-mix(in srgb,var(--color-brand) 49%,transparent)!important;border-width:.5px!important;border-style:solid!important;border-color:color-mix(in srgb,var(--color-brand) 49%,transparent)!important}:host ::ng-deep .ai-card-surface:hover{border:.5px solid var(--color-brand)!important;border-width:.5px!important;border-style:solid!important;border-color:var(--color-brand)!important}:host ::ng-deep .section-highlight{animation:section-pulse 2s ease-out;position:relative}:host ::ng-deep .section-highlight:after{content:\"\";position:absolute;inset:-4px;border:2px solid rgba(255,121,0,.6);border-radius:14px;pointer-events:none;animation:section-border-fade 2s ease-out forwards}@keyframes section-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.01)}}@keyframes section-border-fade{0%{opacity:1;box-shadow:0 0 20px #ff790066}to{opacity:0;box-shadow:0 0 #ff790000}}.ai-card-breakpoint-pill{display:inline-flex;align-items:center;margin-top:1rem;padding:.5rem 1.25rem;border-radius:999px;border:2px solid rgba(255,121,0,.6);background:#ff790026;color:#ff7900;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 4px 20px #ff79004d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.ai-card-surface.streaming-active :where(.info-row,.section-card,.list-card,.event-timeline__item,.product-card,.solutions-card,.contact-card,.network-card__item,.map-point,.text-reference-entry,.quote-card,.overview-card__item){opacity:0;transform:translateY(12px);animation:field-enter .45s ease forwards;will-change:opacity,transform}.ai-card-surface.streaming-active :where(.info-row,.section-card,.list-card,.event-timeline__item,.product-card,.solutions-card,.contact-card,.network-card__item,.map-point,.text-reference-entry,.quote-card,.overview-card__item):nth-child(1){animation-delay:0s}.ai-card-surface.streaming-active :where(.info-row,.section-card,.list-card,.event-timeline__item,.product-card,.solutions-card,.contact-card,.network-card__item,.map-point,.text-reference-entry,.quote-card,.overview-card__item):nth-child(2){animation-delay:.05s}.ai-card-surface.streaming-active :where(.info-row,.section-card,.list-card,.event-timeline__item,.product-card,.solutions-card,.contact-card,.network-card__item,.map-point,.text-reference-entry,.quote-card,.overview-card__item):nth-child(3){animation-delay:.1s}.ai-card-surface.streaming-active :where(.info-row,.section-card,.list-card,.event-timeline__item,.product-card,.solutions-card,.contact-card,.network-card__item,.map-point,.text-reference-entry,.quote-card,.overview-card__item):nth-child(4){animation-delay:.15s}.ai-card-surface.streaming-active :where(.info-row,.section-card,.list-card,.event-timeline__item,.product-card,.solutions-card,.contact-card,.network-card__item,.map-point,.text-reference-entry,.quote-card,.overview-card__item):nth-child(5){animation-delay:.2s}.ai-card-surface.streaming-active :where(.info-row,.section-card,.list-card,.event-timeline__item,.product-card,.solutions-card,.contact-card,.network-card__item,.map-point,.text-reference-entry,.quote-card,.overview-card__item):nth-child(n+6){animation-delay:.24s}@keyframes field-enter{0%{opacity:0;transform:translateY(12px) scale(.98)}60%{opacity:1;transform:translateY(-2px) scale(1.01)}to{opacity:1;transform:translateY(0) scale(1)}}.loading-particles{position:absolute;inset:0;pointer-events:none}.particle{position:absolute;width:8px;height:8px;background:var(--color-brand);border-radius:50%;opacity:.6;animation:particle-float 3s ease-in-out infinite;box-shadow:0 0 12px var(--color-brand)}.particle:nth-child(1){top:10%;left:20%}.particle:nth-child(2){top:20%;left:80%;animation-delay:.3s}.particle:nth-child(3){top:60%;left:15%;animation-delay:.6s}.particle:nth-child(4){top:80%;left:70%;animation-delay:.9s}.particle:nth-child(5){top:30%;left:50%;animation-delay:1.2s}.particle:nth-child(6){top:70%;left:40%;animation-delay:1.5s}.particle:nth-child(7){top:50%;left:90%;animation-delay:1.8s}.particle:nth-child(8){top:15%;left:60%;animation-delay:2.1s}@keyframes particle-float{0%,to{transform:translateY(0) translate(0) scale(1);opacity:.3}25%{transform:translateY(-30px) translate(20px) scale(1.2);opacity:.7}50%{transform:translateY(-60px) translate(-10px) scale(.8);opacity:1}75%{transform:translateY(-30px) translate(15px) scale(1.1);opacity:.6}}.loading-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.loading-spinner{width:64px;height:64px;position:relative}.spinner-svg{width:100%;height:100%;animation:spinner-rotate 1.5s linear infinite;transform-origin:center}.spinner-circle{stroke-dasharray:125.6;stroke-dashoffset:31.4;stroke:var(--color-brand);animation:spinner-dash 1.5s ease-in-out infinite}@keyframes spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spinner-dash{0%{stroke-dasharray:1,125.6;stroke-dashoffset:0}50%{stroke-dasharray:94.2,125.6;stroke-dashoffset:-31.4}to{stroke-dasharray:94.2,125.6;stroke-dashoffset:-125.6}}.loading-text{text-align:center}.loading-title{font-size:1.25rem;font-weight:600;color:var(--foreground);margin-bottom:.5rem;background:linear-gradient(90deg,var(--foreground) 0%,var(--color-brand) 50%,var(--foreground) 100%);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:text-shimmer 2s ease-in-out infinite}.loading-subtitle{font-size:.875rem;color:var(--muted-foreground);margin:0}@keyframes text-shimmer{0%,to{background-position:-200% 0}50%{background-position:200% 0}}.loading-wave{position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent 0%,var(--color-brand) 25%,var(--color-brand) 75%,transparent 100%);background-size:200% 100%;animation:wave-slide 2s ease-in-out infinite}@keyframes wave-slide{0%{background-position:-200% 0}to{background-position:200% 0}}.ai-card-surface.has-loading-overlay{display:flex;align-items:center;justify-content:center;min-height:500px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(255,121,0,.05) 0%,transparent 70%);animation:generating-bg-pulse 3s ease-in-out infinite,card-generating-pulse 2s ease-in-out infinite}@keyframes card-generating-pulse{0%,to{box-shadow:inset 0 1px 3px #ff790014,0 4px 20px #00000026,0 0 #ff790000}50%{box-shadow:inset 0 1px 3px #ff790026,0 4px 20px #00000026,0 0 30px #ff790033}}@keyframes generating-bg-pulse{0%,to{background:radial-gradient(circle at 50% 50%,rgba(255,121,0,.05) 0%,transparent 70%)}50%{background:radial-gradient(circle at 50% 50%,rgba(255,121,0,.12) 0%,transparent 70%)}}.generating-content{position:relative;z-index:2;text-align:center}.generating-shimmer{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,121,0,.15) 50%,transparent 100%);animation:shimmer-sweep 2.5s ease-in-out infinite;pointer-events:none;z-index:1}@keyframes shimmer-sweep{0%{left:-100%}to{left:100%}}.generating-text{font-size:1.125rem;font-weight:600;color:var(--foreground);margin:0;background:linear-gradient(90deg,var(--foreground) 0%,var(--color-brand) 50%,var(--foreground) 100%);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:text-shimmer-flow 2.5s ease-in-out infinite;position:relative;z-index:2;letter-spacing:.02em}@keyframes text-shimmer-flow{0%,to{background-position:-200% 0}50%{background-position:200% 0}}.card-empty-state{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%;height:100%;padding:4rem 2rem;border-radius:1.5rem;overflow:hidden;border:1px solid color-mix(in srgb,var(--color-brand) 20%,transparent);background:color-mix(in srgb,var(--background) 98%,transparent);transition:all .3s ease;flex:1}:host ::ng-deep .ai-card-surface--empty-state{display:flex!important;flex-direction:column!important;min-height:100%!important;height:100%!important}:host ::ng-deep .ai-card-surface--empty-state .card-empty-state{flex:1 1 auto!important;min-height:0!important;height:100%!important;display:flex!important}.card-empty-state:hover{border-color:color-mix(in srgb,var(--color-brand) 30%,transparent);background:color-mix(in srgb,var(--background) 99%,transparent)}.empty-state-background{position:absolute;inset:0;overflow:hidden;pointer-events:none}.empty-state-gradient{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150%;height:150%;background:radial-gradient(circle,color-mix(in srgb,var(--color-brand) 6%,transparent) 0%,color-mix(in srgb,var(--color-brand) 3%,transparent) 50%,transparent 80%);animation:gradient-pulse 5s ease-in-out infinite;opacity:.8}@keyframes gradient-pulse{0%,to{opacity:.6;transform:translate(-50%,-50%) scale(1)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.05)}}.empty-state-particles{position:absolute;inset:0}.particle{position:absolute;width:2.5px;height:2.5px;border-radius:50%;background:color-mix(in srgb,var(--color-brand) 55%,transparent);box-shadow:0 0 4px color-mix(in srgb,var(--color-brand) 45%,transparent);transition:transform .8s cubic-bezier(.23,1,.32,1),opacity .5s ease;will-change:transform,opacity;top:50%;left:50%;margin-left:-1.25px;margin-top:-1.25px;pointer-events:none;filter:blur(.5px)}.particle:nth-child(odd){background:color-mix(in srgb,var(--color-brand) 65%,transparent);box-shadow:0 0 6px color-mix(in srgb,var(--color-brand) 55%,transparent)}.particle:nth-child(2n){background:color-mix(in srgb,var(--color-brand) 45%,transparent);box-shadow:0 0 3px color-mix(in srgb,var(--color-brand) 35%,transparent)}.empty-state-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1rem;max-width:420px;width:100%;transition:transform .2s cubic-bezier(.25,.46,.45,.94);will-change:transform}.empty-state-icon-wrapper{position:relative;display:flex;align-items:center;justify-content:center;width:88px;height:88px}.empty-state-icon-ring{position:absolute;inset:-8px;border:1.5px solid color-mix(in srgb,var(--color-brand) 25%,transparent);border-radius:50%;animation:ring-pulse 3s ease-in-out infinite}.empty-state-icon-pulse{position:absolute;inset:-16px;border:1px solid color-mix(in srgb,var(--color-brand) 15%,transparent);border-radius:50%;animation:ring-pulse 3s ease-in-out infinite .75s}@keyframes ring-pulse{0%,to{opacity:.4;transform:scale(1)}50%{opacity:.7;transform:scale(1.08)}}.empty-state-icon{position:relative;z-index:1;color:var(--color-brand);animation:icon-float 4s ease-in-out infinite;filter:drop-shadow(0 2px 8px color-mix(in srgb,var(--color-brand) 25%,transparent));opacity:.95}@keyframes icon-float{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-6px) rotate(-3deg)}50%{transform:translateY(-10px) rotate(0)}75%{transform:translateY(-6px) rotate(3deg)}}.empty-state-text{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;width:100%}.empty-state-title{font-size:1.75rem;font-weight:700;color:var(--foreground);margin:0;letter-spacing:-.03em;line-height:1.2;text-align:center;animation:fade-in-up .6s ease-out .2s both}.empty-state-message-container{min-height:2.5rem;display:flex;align-items:center;justify-content:center;width:100%}.empty-state-message{font-size:1rem;color:color-mix(in srgb,var(--color-brand) 75%,transparent);margin:0;line-height:1.6;font-weight:500;font-style:italic;text-align:center;animation:fade-in-up .6s ease-out .4s both;letter-spacing:.01em}@keyframes fade-in-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.card-empty-state-legacy{min-height:200px;display:flex;align-items:center;justify-content:center;padding:3rem}.empty-state-icon{position:relative;width:80px;height:80px}.empty-state-dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:12px;height:12px;background:var(--color-brand);border-radius:50%;opacity:.6;animation:dot-pulse 2s ease-in-out infinite}.empty-state-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border:2px solid var(--color-brand);border-radius:50%;opacity:.2;animation:ring-expand 2s ease-in-out infinite}@keyframes dot-pulse{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.6}50%{transform:translate(-50%,-50%) scale(1.5);opacity:.3}}@keyframes ring-expand{0%{transform:translate(-50%,-50%) scale(.8);opacity:.2}50%{transform:translate(-50%,-50%) scale(1);opacity:.1}to{transform:translate(-50%,-50%) scale(1.2);opacity:0}}\n"] }]
+        }], propDecorators: { cardConfig: [{
+                type: Input
+            }], updateSource: [{
+                type: Input
+            }], isFullscreen: [{
+                type: Input
+            }], tiltEnabled: [{
+                type: Input
+            }], streamingStage: [{
+                type: Input
+            }], streamingProgress: [{
+                type: Input
+            }], streamingProgressLabel: [{
+                type: Input
+            }], changeType: [{
+                type: Input
+            }], fieldInteraction: [{
+                type: Output
+            }], cardInteraction: [{
+                type: Output
+            }], fullscreenToggle: [{
+                type: Output
+            }], agentAction: [{
+                type: Output
+            }], questionAction: [{
+                type: Output
+            }], cardContainer: [{
+                type: ViewChild,
+                args: ['cardContainer']
+            }], tiltContainerRef: [{
+                type: ViewChild,
+                args: ['tiltContainer']
+            }], masonryGrid: [{
+                type: ViewChild,
+                args: [MasonryGridComponent]
+            }], emptyStateContainer: [{
+                type: ViewChild,
+                args: ['emptyStateContainer']
+            }] } });
+
+class CardSkeletonComponent {
+    constructor() {
+        this.cardTitle = '';
+        this.sectionCount = 0;
+        this.isFullscreen = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardSkeletonComponent, isStandalone: true, selector: "app-card-skeleton", inputs: { cardTitle: "cardTitle", sectionCount: "sectionCount", isFullscreen: "isFullscreen" }, ngImport: i0, template: "<div class=\"card-skeleton\" [class.card-skeleton--fullscreen]=\"isFullscreen\">\n  <div class=\"card-skeleton-header\">\n    <div class=\"skeleton-title\" *ngIf=\"cardTitle; else noTitle\">\n      {{ cardTitle }}\n    </div>\n    <ng-template #noTitle>\n      <div class=\"skeleton-title-placeholder\"></div>\n    </ng-template>\n  </div>\n  \n  <div class=\"card-skeleton-sections\" *ngIf=\"sectionCount > 0\">\n    <div \n      *ngFor=\"let section of [].constructor(sectionCount); let i = index\"\n      class=\"skeleton-section\"\n      [style.animation-delay.ms]=\"i * 100\">\n      <div class=\"skeleton-section-header\">\n        <div class=\"skeleton-line skeleton-line--title\"></div>\n      </div>\n      <div class=\"skeleton-section-content\">\n        <div class=\"skeleton-line\" *ngFor=\"let line of [].constructor(2)\"></div>\n      </div>\n    </div>\n  </div>\n  \n  <!-- Show placeholder when no sections yet -->\n  <div class=\"card-skeleton-empty\" *ngIf=\"sectionCount === 0\">\n    <div class=\"skeleton-line skeleton-line--empty\"></div>\n  </div>\n</div>\n", styles: [".card-skeleton{width:100%;min-height:400px;background:var(--card-background, var(--background));border:1px solid var(--border);border-radius:var(--card-border-radius, 1rem);padding:var(--card-main-padding, 1.5rem);display:flex;flex-direction:column;gap:1.5rem;position:relative;overflow:hidden}.card-skeleton--fullscreen{min-height:100%;border-radius:0}.card-skeleton-header{padding-bottom:1rem;border-bottom:1px solid var(--border)}.skeleton-title{font-size:1.5rem;font-weight:600;color:var(--foreground);min-height:2rem;display:flex;align-items:center}.skeleton-title-placeholder{width:60%;height:2rem;background:linear-gradient(90deg,color-mix(in srgb,var(--muted, rgba(255, 255, 255, .1)) 100%,transparent),color-mix(in srgb,var(--muted-foreground, rgba(255, 255, 255, .2)) 100%,transparent) 20%,color-mix(in srgb,#FF7900 15%,transparent) 50%,color-mix(in srgb,var(--muted, rgba(255, 255, 255, .1)) 100%,transparent));background-size:200% 100%;border-radius:.5rem;animation:shimmerWave 1.5s ease-in-out infinite;position:relative;overflow:hidden;box-shadow:0 2px 4px color-mix(in srgb,var(--foreground) 5%,transparent)}.skeleton-title-placeholder:after{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,#FF7900 20%,transparent) 50%,transparent 100%);animation:shimmerWave 1.5s ease-in-out infinite}.card-skeleton-sections{display:flex;flex-direction:column;gap:1.5rem;flex:1}.skeleton-section{opacity:0;animation:skeleton-fade-in .4s ease-out forwards;padding:1.25rem;border:1px solid color-mix(in srgb,var(--border) 60%,transparent);border-radius:.75rem;background:linear-gradient(135deg,var(--card-background, var(--background)) 0%,color-mix(in srgb,var(--card-background, var(--background)) 98%,#FF7900 2%) 100%);box-shadow:0 2px 4px color-mix(in srgb,var(--foreground) 5%,transparent);position:relative;overflow:hidden}.skeleton-section:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,#ff7900,color-mix(in srgb,#FF7900 50%,transparent));opacity:.3}.skeleton-section:nth-child(1){animation-delay:.1s}.skeleton-section:nth-child(2){animation-delay:.2s}.skeleton-section:nth-child(3){animation-delay:.3s}.skeleton-section:nth-child(4){animation-delay:.4s}.skeleton-section:nth-child(5){animation-delay:.5s}.skeleton-section:nth-child(6){animation-delay:.6s}.skeleton-section:nth-child(7){animation-delay:.7s}.skeleton-section:nth-child(8){animation-delay:.8s}.skeleton-section:nth-child(9){animation-delay:.9s}.skeleton-section:nth-child(10){animation-delay:1s}.skeleton-section-header{margin-bottom:.75rem}.skeleton-section-content{display:flex;flex-direction:column;gap:.5rem}.skeleton-line{height:1rem;background:linear-gradient(90deg,color-mix(in srgb,var(--muted, rgba(255, 255, 255, .1)) 100%,transparent),color-mix(in srgb,var(--muted-foreground, rgba(255, 255, 255, .2)) 100%,transparent) 20%,color-mix(in srgb,#FF7900 10%,transparent) 50%,color-mix(in srgb,var(--muted, rgba(255, 255, 255, .1)) 100%,transparent));background-size:200% 100%;border-radius:.375rem;animation:shimmerWave 1.5s ease-in-out infinite;position:relative;overflow:hidden}.skeleton-line:after{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,#FF7900 15%,transparent) 50%,transparent 100%);animation:shimmerWave 1.5s ease-in-out infinite}.skeleton-line--title{width:40%;height:1.25rem}.skeleton-line:not(.skeleton-line--title){width:100%}.skeleton-line:not(.skeleton-line--title):nth-child(2){width:80%}.card-skeleton-empty{padding:2rem;display:flex;align-items:center;justify-content:center;min-height:200px}.skeleton-line--empty{width:60%;height:1.5rem}@keyframes shimmerWave{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes skeleton-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-card-skeleton', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card-skeleton\" [class.card-skeleton--fullscreen]=\"isFullscreen\">\n  <div class=\"card-skeleton-header\">\n    <div class=\"skeleton-title\" *ngIf=\"cardTitle; else noTitle\">\n      {{ cardTitle }}\n    </div>\n    <ng-template #noTitle>\n      <div class=\"skeleton-title-placeholder\"></div>\n    </ng-template>\n  </div>\n  \n  <div class=\"card-skeleton-sections\" *ngIf=\"sectionCount > 0\">\n    <div \n      *ngFor=\"let section of [].constructor(sectionCount); let i = index\"\n      class=\"skeleton-section\"\n      [style.animation-delay.ms]=\"i * 100\">\n      <div class=\"skeleton-section-header\">\n        <div class=\"skeleton-line skeleton-line--title\"></div>\n      </div>\n      <div class=\"skeleton-section-content\">\n        <div class=\"skeleton-line\" *ngFor=\"let line of [].constructor(2)\"></div>\n      </div>\n    </div>\n  </div>\n  \n  <!-- Show placeholder when no sections yet -->\n  <div class=\"card-skeleton-empty\" *ngIf=\"sectionCount === 0\">\n    <div class=\"skeleton-line skeleton-line--empty\"></div>\n  </div>\n</div>\n", styles: [".card-skeleton{width:100%;min-height:400px;background:var(--card-background, var(--background));border:1px solid var(--border);border-radius:var(--card-border-radius, 1rem);padding:var(--card-main-padding, 1.5rem);display:flex;flex-direction:column;gap:1.5rem;position:relative;overflow:hidden}.card-skeleton--fullscreen{min-height:100%;border-radius:0}.card-skeleton-header{padding-bottom:1rem;border-bottom:1px solid var(--border)}.skeleton-title{font-size:1.5rem;font-weight:600;color:var(--foreground);min-height:2rem;display:flex;align-items:center}.skeleton-title-placeholder{width:60%;height:2rem;background:linear-gradient(90deg,color-mix(in srgb,var(--muted, rgba(255, 255, 255, .1)) 100%,transparent),color-mix(in srgb,var(--muted-foreground, rgba(255, 255, 255, .2)) 100%,transparent) 20%,color-mix(in srgb,#FF7900 15%,transparent) 50%,color-mix(in srgb,var(--muted, rgba(255, 255, 255, .1)) 100%,transparent));background-size:200% 100%;border-radius:.5rem;animation:shimmerWave 1.5s ease-in-out infinite;position:relative;overflow:hidden;box-shadow:0 2px 4px color-mix(in srgb,var(--foreground) 5%,transparent)}.skeleton-title-placeholder:after{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,#FF7900 20%,transparent) 50%,transparent 100%);animation:shimmerWave 1.5s ease-in-out infinite}.card-skeleton-sections{display:flex;flex-direction:column;gap:1.5rem;flex:1}.skeleton-section{opacity:0;animation:skeleton-fade-in .4s ease-out forwards;padding:1.25rem;border:1px solid color-mix(in srgb,var(--border) 60%,transparent);border-radius:.75rem;background:linear-gradient(135deg,var(--card-background, var(--background)) 0%,color-mix(in srgb,var(--card-background, var(--background)) 98%,#FF7900 2%) 100%);box-shadow:0 2px 4px color-mix(in srgb,var(--foreground) 5%,transparent);position:relative;overflow:hidden}.skeleton-section:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,#ff7900,color-mix(in srgb,#FF7900 50%,transparent));opacity:.3}.skeleton-section:nth-child(1){animation-delay:.1s}.skeleton-section:nth-child(2){animation-delay:.2s}.skeleton-section:nth-child(3){animation-delay:.3s}.skeleton-section:nth-child(4){animation-delay:.4s}.skeleton-section:nth-child(5){animation-delay:.5s}.skeleton-section:nth-child(6){animation-delay:.6s}.skeleton-section:nth-child(7){animation-delay:.7s}.skeleton-section:nth-child(8){animation-delay:.8s}.skeleton-section:nth-child(9){animation-delay:.9s}.skeleton-section:nth-child(10){animation-delay:1s}.skeleton-section-header{margin-bottom:.75rem}.skeleton-section-content{display:flex;flex-direction:column;gap:.5rem}.skeleton-line{height:1rem;background:linear-gradient(90deg,color-mix(in srgb,var(--muted, rgba(255, 255, 255, .1)) 100%,transparent),color-mix(in srgb,var(--muted-foreground, rgba(255, 255, 255, .2)) 100%,transparent) 20%,color-mix(in srgb,#FF7900 10%,transparent) 50%,color-mix(in srgb,var(--muted, rgba(255, 255, 255, .1)) 100%,transparent));background-size:200% 100%;border-radius:.375rem;animation:shimmerWave 1.5s ease-in-out infinite;position:relative;overflow:hidden}.skeleton-line:after{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,#FF7900 15%,transparent) 50%,transparent 100%);animation:shimmerWave 1.5s ease-in-out infinite}.skeleton-line--title{width:40%;height:1.25rem}.skeleton-line:not(.skeleton-line--title){width:100%}.skeleton-line:not(.skeleton-line--title):nth-child(2){width:80%}.card-skeleton-empty{padding:2rem;display:flex;align-items:center;justify-content:center;min-height:200px}.skeleton-line--empty{width:60%;height:1.5rem}@keyframes shimmerWave{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes skeleton-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }], propDecorators: { cardTitle: [{
+                type: Input
+            }], sectionCount: [{
+                type: Input
+            }], isFullscreen: [{
+                type: Input
+            }] } });
+
+class CardPreviewComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.generatedCard = null;
+        this.isGenerating = false;
+        this.isInitialized = false;
+        this.isFullscreen = false;
+        this.cardInteraction = new EventEmitter();
+        this.fieldInteraction = new EventEmitter();
+        this.fullscreenToggle = new EventEmitter();
+        this.agentAction = new EventEmitter();
+        this.questionAction = new EventEmitter();
+    }
+    ngOnInit() {
+        // Component initialized
+    }
+    ngOnChanges(changes) {
+        if (changes['generatedCard'] || changes['isGenerating'] || changes['isInitialized']) {
+            this.cdr.markForCheck();
+        }
+    }
+    ngOnDestroy() {
+        // Cleanup if needed
+    }
+    get showSkeleton() {
+        return this.isGenerating && !this.generatedCard;
+    }
+    onCardInteraction(event) {
+        this.cardInteraction.emit(event);
+    }
+    onFieldInteraction(event) {
+        this.fieldInteraction.emit(event);
+    }
+    onFullscreenToggle(isFullscreen) {
+        this.fullscreenToggle.emit(isFullscreen);
+    }
+    onAgentAction(event) {
+        this.agentAction.emit(event);
+    }
+    onQuestionAction(event) {
+        this.questionAction.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardPreviewComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardPreviewComponent, isStandalone: true, selector: "app-card-preview", inputs: { generatedCard: "generatedCard", isGenerating: "isGenerating", isInitialized: "isInitialized", isFullscreen: "isFullscreen" }, outputs: { cardInteraction: "cardInteraction", fieldInteraction: "fieldInteraction", fullscreenToggle: "fullscreenToggle", agentAction: "agentAction", questionAction: "questionAction" }, usesOnChanges: true, ngImport: i0, template: "  <ng-container [attr.aria-busy]=\"isGenerating\">\n    <!-- Initial loading state -->\n    <ng-container *ngIf=\"!isInitialized; else initializedState\">\n      <div class=\"preview-loading\" role=\"status\">\n        <div class=\"preview-spinner\"></div>\n        <div>\n          <p class=\"preview-loading-title\">Initializing System\u2026</p>\n          <p class=\"preview-loading-subtitle\">Loading templates and services</p>\n        </div>\n      </div>\n    </ng-container>\n\n    <ng-template #initializedState>\n      <!-- Show skeleton frame only when generating -->\n      <ng-container *ngIf=\"showSkeleton; else cardContent\">\n        <app-card-skeleton\n          [cardTitle]=\"generatedCard?.cardTitle || ''\"\n          [sectionCount]=\"generatedCard?.sections?.length || 0\"\n          [isFullscreen]=\"isFullscreen\">\n        </app-card-skeleton>\n      </ng-container>\n\n      <ng-template #cardContent>\n        <!-- Show card if we have generatedCard -->\n        <ng-container *ngIf=\"generatedCard; else previewEmpty\">\n          <div class=\"card-preview-container\">\n            <app-ai-card-renderer\n              [cardConfig]=\"generatedCard\"\n              [updateSource]=\"'liveEdit'\"\n              [isFullscreen]=\"isFullscreen\"\n              (cardInteraction)=\"onCardInteraction($event)\"\n              (fieldInteraction)=\"onFieldInteraction($event)\"\n              (fullscreenToggle)=\"onFullscreenToggle($event)\"\n              (agentAction)=\"onAgentAction($event)\"\n              (questionAction)=\"onQuestionAction($event)\">\n            </app-ai-card-renderer>\n          </div>\n        </ng-container>\n      </ng-template>\n\n      <ng-template #previewEmpty>\n        <div class=\"preview-empty\">\n          <div class=\"preview-empty-icon\" aria-hidden=\"true\">\n            <div class=\"code-icon w-8 h-8\"></div>\n          </div>\n          <div class=\"preview-empty-copy\">\n            <p class=\"preview-empty-title\">No Card Preview</p>\n            <p class=\"preview-empty-subtitle\">\n              Enter a valid JSON configuration or load a template to see your card design render in real time.\n            </p>\n          </div>\n          <div class=\"preview-empty-hints\">\n            <div class=\"preview-empty-hint\">\n              <div class=\"hint-dot bg-green-500\"></div>\n              <span>Valid JSON auto-generates layouts</span>\n            </div>\n            <div class=\"preview-empty-hint\">\n              <div class=\"hint-dot bg-blue-500\"></div>\n              <span>Magnetic tilt responds to cursor position</span>\n            </div>\n            <div class=\"preview-empty-hint\">\n              <div class=\"hint-dot bg-purple-500\"></div>\n              <span>Export high-fidelity PNG snapshots</span>\n            </div>\n          </div>\n        </div>\n      </ng-template>\n    </ng-template>\n  </ng-container>\n", styles: [":host{display:block;width:100%;height:100%}.preview-shell{position:relative;padding:clamp(1.5rem,3vw,2.25rem);border-radius:1.25rem;background:#0c0c0ce6;border:1px solid rgba(255,121,0,.25);box-shadow:0 4px 14px #0000002e,0 0 12px #ff790014;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);overflow:hidden}.preview-shell:before,.preview-shell:after{content:\"\";position:absolute;inset:0;opacity:0;pointer-events:none}.preview-header{position:relative;z-index:1;display:flex;align-items:center;gap:.75rem;margin-bottom:1.75rem}.preview-heading{display:flex;flex-direction:column;gap:.25rem}.preview-title{font-size:1.125rem;font-weight:700;color:var(--foreground)}.preview-subtitle{font-size:.85rem;color:#ffffffa6;letter-spacing:.05em;text-transform:uppercase}app-ai-card-renderer{display:block;width:100%;height:100%}.card-preview-container{display:block;width:100%;height:100%;transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1);will-change:opacity,transform;animation:fadeInScale .5s cubic-bezier(.4,0,.2,1)}@keyframes fadeInScale{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.preview-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;text-align:center;padding:5rem 1.5rem;position:relative;min-height:400px;&:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at center,color-mix(in srgb,#FF7900 8%,transparent) 0%,transparent 70%);animation:pulseGlow 2s ease-in-out infinite;pointer-events:none}}@keyframes pulseGlow{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}.preview-spinner{width:3.5rem;height:3.5rem;border-radius:999px;border:4px solid color-mix(in srgb,#FF7900 20%,transparent);border-top-color:#ff7900;border-right-color:#ff7900;animation:spin .8s linear infinite;position:relative;z-index:1;box-shadow:0 0 20px color-mix(in srgb,#FF7900 30%,transparent);&:after{content:\"\";position:absolute;inset:-4px;border-radius:999px;border:4px solid transparent;border-top-color:color-mix(in srgb,#FF7900 40%,transparent);animation:spin 1.2s linear infinite reverse}}.preview-loading-title{font-size:1.25rem;font-weight:700;color:var(--foreground);position:relative;z-index:1;letter-spacing:-.01em;animation:fadeInUp .6s ease-out}.preview-loading-subtitle{font-size:.9375rem;color:var(--muted-foreground);position:relative;z-index:1;animation:fadeInUp .6s ease-out .2s both}.preview-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2rem;padding:5rem 1.5rem;position:relative;min-height:400px;&:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at center,color-mix(in srgb,#FF7900 5%,transparent) 0%,transparent 70%);animation:pulseGlow 3s ease-in-out infinite;pointer-events:none}}.preview-empty-icon{width:5rem;height:5rem;border-radius:999px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,color-mix(in srgb,#FF7900 20%,transparent),color-mix(in srgb,#FF7900 12%,transparent));border:2px solid color-mix(in srgb,#FF7900 40%,transparent);box-shadow:0 8px 24px color-mix(in srgb,#FF7900 20%,transparent),inset 0 0 0 1px color-mix(in srgb,rgba(255,255,255,.1),transparent);position:relative;z-index:1;animation:float 3s ease-in-out infinite;&:after{content:\"\";position:absolute;inset:-4px;border-radius:999px;border:2px solid color-mix(in srgb,#FF7900 20%,transparent);animation:pulseRing 2s ease-in-out infinite}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulseRing{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.3)}}.preview-empty-title{font-size:1.375rem;font-weight:700;color:var(--foreground);letter-spacing:-.01em;position:relative;z-index:1;animation:fadeInUp .6s ease-out}.preview-empty-subtitle{font-size:1rem;color:var(--muted-foreground);max-width:28rem;line-height:1.6;position:relative;z-index:1;animation:fadeInUp .6s ease-out .2s both}.preview-empty-hints{display:flex;flex-direction:column;gap:1rem;font-size:.875rem;color:var(--muted-foreground);position:relative;z-index:1;animation:fadeInUp .6s ease-out .4s both}.preview-empty-hint{display:flex;align-items:center;gap:.75rem;justify-content:center;padding:.5rem 1rem;background:color-mix(in srgb,var(--card-background) 80%,transparent);border:1px solid color-mix(in srgb,var(--border) 50%,transparent);border-radius:.5rem;transition:all .3s ease;&:hover{background:color-mix(in srgb,var(--card-background) 90%,transparent);border-color:color-mix(in srgb,#FF7900 30%,transparent);transform:translate(4px)}}.hint-dot{width:8px;height:8px;border-radius:999px;box-shadow:0 0 12px currentColor;flex-shrink:0;animation:pulse 2s ease-in-out infinite}.badge{background-color:#ff790033;color:var(--primary);border:1px solid rgba(255,121,0,.35);padding:.3rem .6rem;border-radius:999px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-left:auto}.sparkles-icon,.code-icon{display:inline-flex;align-items:center;justify-content:center}.sparkles-icon:before{content:\"\\2728\";font-size:1.2rem;color:var(--primary)}.code-icon:before{content:\"\\1f4bb\";font-size:1.2rem;color:var(--primary)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (min-width: 768px){.preview-empty{padding:5rem 2rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AICardRendererComponent, selector: "app-ai-card-renderer", inputs: ["cardConfig", "updateSource", "isFullscreen", "tiltEnabled", "streamingStage", "streamingProgress", "streamingProgressLabel", "changeType"], outputs: ["fieldInteraction", "cardInteraction", "fullscreenToggle", "agentAction", "questionAction"] }, { kind: "component", type: CardSkeletonComponent, selector: "app-card-skeleton", inputs: ["cardTitle", "sectionCount", "isFullscreen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardPreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-card-preview', standalone: true, imports: [CommonModule, AICardRendererComponent, CardSkeletonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "  <ng-container [attr.aria-busy]=\"isGenerating\">\n    <!-- Initial loading state -->\n    <ng-container *ngIf=\"!isInitialized; else initializedState\">\n      <div class=\"preview-loading\" role=\"status\">\n        <div class=\"preview-spinner\"></div>\n        <div>\n          <p class=\"preview-loading-title\">Initializing System\u2026</p>\n          <p class=\"preview-loading-subtitle\">Loading templates and services</p>\n        </div>\n      </div>\n    </ng-container>\n\n    <ng-template #initializedState>\n      <!-- Show skeleton frame only when generating -->\n      <ng-container *ngIf=\"showSkeleton; else cardContent\">\n        <app-card-skeleton\n          [cardTitle]=\"generatedCard?.cardTitle || ''\"\n          [sectionCount]=\"generatedCard?.sections?.length || 0\"\n          [isFullscreen]=\"isFullscreen\">\n        </app-card-skeleton>\n      </ng-container>\n\n      <ng-template #cardContent>\n        <!-- Show card if we have generatedCard -->\n        <ng-container *ngIf=\"generatedCard; else previewEmpty\">\n          <div class=\"card-preview-container\">\n            <app-ai-card-renderer\n              [cardConfig]=\"generatedCard\"\n              [updateSource]=\"'liveEdit'\"\n              [isFullscreen]=\"isFullscreen\"\n              (cardInteraction)=\"onCardInteraction($event)\"\n              (fieldInteraction)=\"onFieldInteraction($event)\"\n              (fullscreenToggle)=\"onFullscreenToggle($event)\"\n              (agentAction)=\"onAgentAction($event)\"\n              (questionAction)=\"onQuestionAction($event)\">\n            </app-ai-card-renderer>\n          </div>\n        </ng-container>\n      </ng-template>\n\n      <ng-template #previewEmpty>\n        <div class=\"preview-empty\">\n          <div class=\"preview-empty-icon\" aria-hidden=\"true\">\n            <div class=\"code-icon w-8 h-8\"></div>\n          </div>\n          <div class=\"preview-empty-copy\">\n            <p class=\"preview-empty-title\">No Card Preview</p>\n            <p class=\"preview-empty-subtitle\">\n              Enter a valid JSON configuration or load a template to see your card design render in real time.\n            </p>\n          </div>\n          <div class=\"preview-empty-hints\">\n            <div class=\"preview-empty-hint\">\n              <div class=\"hint-dot bg-green-500\"></div>\n              <span>Valid JSON auto-generates layouts</span>\n            </div>\n            <div class=\"preview-empty-hint\">\n              <div class=\"hint-dot bg-blue-500\"></div>\n              <span>Magnetic tilt responds to cursor position</span>\n            </div>\n            <div class=\"preview-empty-hint\">\n              <div class=\"hint-dot bg-purple-500\"></div>\n              <span>Export high-fidelity PNG snapshots</span>\n            </div>\n          </div>\n        </div>\n      </ng-template>\n    </ng-template>\n  </ng-container>\n", styles: [":host{display:block;width:100%;height:100%}.preview-shell{position:relative;padding:clamp(1.5rem,3vw,2.25rem);border-radius:1.25rem;background:#0c0c0ce6;border:1px solid rgba(255,121,0,.25);box-shadow:0 4px 14px #0000002e,0 0 12px #ff790014;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);overflow:hidden}.preview-shell:before,.preview-shell:after{content:\"\";position:absolute;inset:0;opacity:0;pointer-events:none}.preview-header{position:relative;z-index:1;display:flex;align-items:center;gap:.75rem;margin-bottom:1.75rem}.preview-heading{display:flex;flex-direction:column;gap:.25rem}.preview-title{font-size:1.125rem;font-weight:700;color:var(--foreground)}.preview-subtitle{font-size:.85rem;color:#ffffffa6;letter-spacing:.05em;text-transform:uppercase}app-ai-card-renderer{display:block;width:100%;height:100%}.card-preview-container{display:block;width:100%;height:100%;transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1);will-change:opacity,transform;animation:fadeInScale .5s cubic-bezier(.4,0,.2,1)}@keyframes fadeInScale{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.preview-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;text-align:center;padding:5rem 1.5rem;position:relative;min-height:400px;&:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at center,color-mix(in srgb,#FF7900 8%,transparent) 0%,transparent 70%);animation:pulseGlow 2s ease-in-out infinite;pointer-events:none}}@keyframes pulseGlow{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}.preview-spinner{width:3.5rem;height:3.5rem;border-radius:999px;border:4px solid color-mix(in srgb,#FF7900 20%,transparent);border-top-color:#ff7900;border-right-color:#ff7900;animation:spin .8s linear infinite;position:relative;z-index:1;box-shadow:0 0 20px color-mix(in srgb,#FF7900 30%,transparent);&:after{content:\"\";position:absolute;inset:-4px;border-radius:999px;border:4px solid transparent;border-top-color:color-mix(in srgb,#FF7900 40%,transparent);animation:spin 1.2s linear infinite reverse}}.preview-loading-title{font-size:1.25rem;font-weight:700;color:var(--foreground);position:relative;z-index:1;letter-spacing:-.01em;animation:fadeInUp .6s ease-out}.preview-loading-subtitle{font-size:.9375rem;color:var(--muted-foreground);position:relative;z-index:1;animation:fadeInUp .6s ease-out .2s both}.preview-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2rem;padding:5rem 1.5rem;position:relative;min-height:400px;&:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at center,color-mix(in srgb,#FF7900 5%,transparent) 0%,transparent 70%);animation:pulseGlow 3s ease-in-out infinite;pointer-events:none}}.preview-empty-icon{width:5rem;height:5rem;border-radius:999px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,color-mix(in srgb,#FF7900 20%,transparent),color-mix(in srgb,#FF7900 12%,transparent));border:2px solid color-mix(in srgb,#FF7900 40%,transparent);box-shadow:0 8px 24px color-mix(in srgb,#FF7900 20%,transparent),inset 0 0 0 1px color-mix(in srgb,rgba(255,255,255,.1),transparent);position:relative;z-index:1;animation:float 3s ease-in-out infinite;&:after{content:\"\";position:absolute;inset:-4px;border-radius:999px;border:2px solid color-mix(in srgb,#FF7900 20%,transparent);animation:pulseRing 2s ease-in-out infinite}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulseRing{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.3)}}.preview-empty-title{font-size:1.375rem;font-weight:700;color:var(--foreground);letter-spacing:-.01em;position:relative;z-index:1;animation:fadeInUp .6s ease-out}.preview-empty-subtitle{font-size:1rem;color:var(--muted-foreground);max-width:28rem;line-height:1.6;position:relative;z-index:1;animation:fadeInUp .6s ease-out .2s both}.preview-empty-hints{display:flex;flex-direction:column;gap:1rem;font-size:.875rem;color:var(--muted-foreground);position:relative;z-index:1;animation:fadeInUp .6s ease-out .4s both}.preview-empty-hint{display:flex;align-items:center;gap:.75rem;justify-content:center;padding:.5rem 1rem;background:color-mix(in srgb,var(--card-background) 80%,transparent);border:1px solid color-mix(in srgb,var(--border) 50%,transparent);border-radius:.5rem;transition:all .3s ease;&:hover{background:color-mix(in srgb,var(--card-background) 90%,transparent);border-color:color-mix(in srgb,#FF7900 30%,transparent);transform:translate(4px)}}.hint-dot{width:8px;height:8px;border-radius:999px;box-shadow:0 0 12px currentColor;flex-shrink:0;animation:pulse 2s ease-in-out infinite}.badge{background-color:#ff790033;color:var(--primary);border:1px solid rgba(255,121,0,.35);padding:.3rem .6rem;border-radius:999px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-left:auto}.sparkles-icon,.code-icon{display:inline-flex;align-items:center;justify-content:center}.sparkles-icon:before{content:\"\\2728\";font-size:1.2rem;color:var(--primary)}.code-icon:before{content:\"\\1f4bb\";font-size:1.2rem;color:var(--primary)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (min-width: 768px){.preview-empty{padding:5rem 2rem}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { generatedCard: [{
+                type: Input
+            }], isGenerating: [{
+                type: Input
+            }], isInitialized: [{
+                type: Input
+            }], isFullscreen: [{
+                type: Input
+            }], cardInteraction: [{
+                type: Output
+            }], fieldInteraction: [{
+                type: Output
+            }], fullscreenToggle: [{
+                type: Output
+            }], agentAction: [{
+                type: Output
+            }], questionAction: [{
+                type: Output
+            }] } });
+
+class NewsSectionComponent extends BaseSectionComponent {
+    get newsItems() {
+        return this.getItems();
+    }
+    formatSource(item) {
+        const meta = item.meta ?? {};
+        return (typeof meta['source'] === 'string' && meta['source'])
+            ? meta['source']
+            : (typeof meta['publisher'] === 'string' ? meta['publisher'] : 'News');
+    }
+    formatTimestamp(item) {
+        const meta = item.meta ?? {};
+        const timestamp = meta['publishedAt'] ?? meta['time'] ?? meta['date'];
+        return typeof timestamp === 'string' ? timestamp : '';
+    }
+    /**
+     * Get display description, hiding "Streaming…" placeholder text
+     * Inline implementation to avoid TypeScript override conflicts
+     */
+    getDisplayDescription(item) {
+        const description = item.description;
+        if (description === 'Streaming…' || description === 'Streaming...') {
+            return '';
+        }
+        return description ?? '';
+    }
+    trackItem(index, item) {
+        return item.id ?? `news-item-${index}-${this.formatSource(item)}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NewsSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NewsSectionComponent, isStandalone: true, selector: "app-news-section", usesInheritance: true, ngImport: i0, template: "<div class=\"ai-section ai-section--news section-block section-block--news\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n    <span class=\"ai-section__badge\" *ngIf=\"section.meta?.['category']\">\n      {{ section.meta?.['category'] }}\n    </span>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <div *ngIf=\"newsItems?.length; else newsEmpty\">\n      <div class=\"news-feed\">\n        <button\n          *ngFor=\"let item of newsItems; trackBy: trackItem; let idx = index\"\n          type=\"button\"\n          class=\"news-item\"\n          (click)=\"emitItemInteraction(item, { streamIndex: idx })\"\n          [class.item-streaming]=\"getItemAnimationClass(getItemId(item, idx), idx) === 'item-streaming'\"\n          [class.item-entered]=\"getItemAnimationClass(getItemId(item, idx), idx) === 'item-entered'\"\n        >\n          <div class=\"news-item__header\">\n            <div class=\"news-item__tag\">\n              <lucide-icon name=\"newspaper\" size=\"16\" aria-hidden=\"true\"></lucide-icon>\n              <span>{{ formatSource(item) }}</span>\n            </div>\n            <span class=\"news-item__time\" *ngIf=\"formatTimestamp(item)\">{{ formatTimestamp(item) }}</span>\n          </div>\n          <p class=\"news-item__title\">{{ item.title }}</p>\n          <p class=\"news-item__summary\" *ngIf=\"getDisplayDescription(item)\">{{ getDisplayDescription(item) }}</p>\n          <div class=\"news-item__meta\" *ngIf=\"item.value\">\n            <span class=\"news-item__value\">{{ item.value }}</span>\n            <span class=\"news-item__indicator\">Live</span>\n          </div>\n        </button>\n      </div>\n    </div>\n\n    <ng-template #newsEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"alert-circle\" [size]=\"32\" class=\"mb-4 opacity-50\" aria-hidden=\"true\"></lucide-icon>\n        <p class=\"text-sm\">No headlines available</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: LucideIconsModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NewsSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-news-section', standalone: true, imports: [CommonModule, LucideIconsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ai-section ai-section--news section-block section-block--news\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n    <span class=\"ai-section__badge\" *ngIf=\"section.meta?.['category']\">\n      {{ section.meta?.['category'] }}\n    </span>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <div *ngIf=\"newsItems?.length; else newsEmpty\">\n      <div class=\"news-feed\">\n        <button\n          *ngFor=\"let item of newsItems; trackBy: trackItem; let idx = index\"\n          type=\"button\"\n          class=\"news-item\"\n          (click)=\"emitItemInteraction(item, { streamIndex: idx })\"\n          [class.item-streaming]=\"getItemAnimationClass(getItemId(item, idx), idx) === 'item-streaming'\"\n          [class.item-entered]=\"getItemAnimationClass(getItemId(item, idx), idx) === 'item-entered'\"\n        >\n          <div class=\"news-item__header\">\n            <div class=\"news-item__tag\">\n              <lucide-icon name=\"newspaper\" size=\"16\" aria-hidden=\"true\"></lucide-icon>\n              <span>{{ formatSource(item) }}</span>\n            </div>\n            <span class=\"news-item__time\" *ngIf=\"formatTimestamp(item)\">{{ formatTimestamp(item) }}</span>\n          </div>\n          <p class=\"news-item__title\">{{ item.title }}</p>\n          <p class=\"news-item__summary\" *ngIf=\"getDisplayDescription(item)\">{{ getDisplayDescription(item) }}</p>\n          <div class=\"news-item__meta\" *ngIf=\"item.value\">\n            <span class=\"news-item__value\">{{ item.value }}</span>\n            <span class=\"news-item__indicator\">Live</span>\n          </div>\n        </button>\n      </div>\n    </div>\n\n    <ng-template #newsEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"alert-circle\" [size]=\"32\" class=\"mb-4 opacity-50\" aria-hidden=\"true\"></lucide-icon>\n        <p class=\"text-sm\">No headlines available</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n" }]
+        }] });
+
+class SocialMediaSectionComponent extends BaseSectionComponent {
+    get posts() {
+        return this.getItems();
+    }
+    formatPlatform(item) {
+        const meta = item.meta ?? {};
+        return typeof meta['platform'] === 'string'
+            ? meta['platform']
+            : typeof meta['network'] === 'string'
+                ? meta['network']
+                : 'Social';
+    }
+    formatMetric(item) {
+        const meta = item.meta ?? {};
+        const likes = meta['likes'];
+        const comments = meta['comments'];
+        if (typeof likes === 'number' && typeof comments === 'number') {
+            return `${likes} likes · ${comments} comments`;
+        }
+        if (typeof likes === 'number') {
+            return `${likes} likes`;
+        }
+        if (typeof comments === 'number') {
+            return `${comments} comments`;
+        }
+        return '';
+    }
+    trackPost(index, post) {
+        return post.id ?? `social-post-${index}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SocialMediaSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SocialMediaSectionComponent, isStandalone: true, selector: "app-social-media-section", usesInheritance: true, ngImport: i0, template: "<div class=\"ai-section ai-section--social-media section-block section-block--social-media\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n    <span class=\"ai-section__badge\" *ngIf=\"section.meta?.['platform']\">\n      {{ section.meta?.['platform'] }}\n    </span>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <div *ngIf=\"posts?.length; else socialEmpty\">\n      <div class=\"social-feed\">\n        <button\n          *ngFor=\"let post of posts; trackBy: trackPost; let idx = index\"\n          type=\"button\"\n          class=\"social-post\"\n          (click)=\"emitItemInteraction(post, { streamIndex: idx })\"\n          [class.item-streaming]=\"getItemAnimationClass(getItemId(post, idx), idx) === 'item-streaming'\"\n          [class.item-entered]=\"getItemAnimationClass(getItemId(post, idx), idx) === 'item-entered'\"\n        >\n          <div class=\"social-post__header\">\n            <div class=\"social-post__platform\">\n              <lucide-icon name=\"message-circle\" size=\"16\" aria-hidden=\"true\"></lucide-icon>\n              <span>{{ formatPlatform(post) }}</span>\n            </div>\n            <span class=\"social-post__engagement\" *ngIf=\"formatMetric(post)\">\n              {{ formatMetric(post) }}\n            </span>\n          </div>\n          <p class=\"social-post__content\" *ngIf=\"post.description\">{{ post.description }}</p>\n          <div class=\"social-post__meta\">\n            <span *ngIf=\"post.value\" class=\"social-post__meta-value\">{{ post.value }}</span>\n            <span class=\"social-post__meta-hint\">{{ post.meta?.['tag'] ?? post.meta?.['topic'] ?? 'Updates' }}</span>\n          </div>\n        </button>\n      </div>\n    </div>\n\n    <ng-template #socialEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"alert-circle\" [size]=\"32\" class=\"mb-4 opacity-50\" aria-hidden=\"true\"></lucide-icon>\n        <p class=\"text-sm\">No social posts available</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: LucideIconsModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SocialMediaSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-social-media-section', standalone: true, imports: [CommonModule, LucideIconsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ai-section ai-section--social-media section-block section-block--social-media\">\n  <div class=\"ai-section__header\">\n    <div class=\"ai-section__details\">\n      <h3 class=\"ai-section__title\">{{ section.title }}</h3>\n      <p *ngIf=\"section.description\" class=\"ai-section__description\">{{ section.description }}</p>\n    </div>\n    <span class=\"ai-section__badge\" *ngIf=\"section.meta?.['platform']\">\n      {{ section.meta?.['platform'] }}\n    </span>\n  </div>\n\n  <div class=\"ai-section__body\">\n    <div *ngIf=\"posts?.length; else socialEmpty\">\n      <div class=\"social-feed\">\n        <button\n          *ngFor=\"let post of posts; trackBy: trackPost; let idx = index\"\n          type=\"button\"\n          class=\"social-post\"\n          (click)=\"emitItemInteraction(post, { streamIndex: idx })\"\n          [class.item-streaming]=\"getItemAnimationClass(getItemId(post, idx), idx) === 'item-streaming'\"\n          [class.item-entered]=\"getItemAnimationClass(getItemId(post, idx), idx) === 'item-entered'\"\n        >\n          <div class=\"social-post__header\">\n            <div class=\"social-post__platform\">\n              <lucide-icon name=\"message-circle\" size=\"16\" aria-hidden=\"true\"></lucide-icon>\n              <span>{{ formatPlatform(post) }}</span>\n            </div>\n            <span class=\"social-post__engagement\" *ngIf=\"formatMetric(post)\">\n              {{ formatMetric(post) }}\n            </span>\n          </div>\n          <p class=\"social-post__content\" *ngIf=\"post.description\">{{ post.description }}</p>\n          <div class=\"social-post__meta\">\n            <span *ngIf=\"post.value\" class=\"social-post__meta-value\">{{ post.value }}</span>\n            <span class=\"social-post__meta-hint\">{{ post.meta?.['tag'] ?? post.meta?.['topic'] ?? 'Updates' }}</span>\n          </div>\n        </button>\n      </div>\n    </div>\n\n    <ng-template #socialEmpty>\n      <div class=\"section-empty\">\n        <lucide-icon name=\"alert-circle\" [size]=\"32\" class=\"mb-4 opacity-50\" aria-hidden=\"true\"></lucide-icon>\n        <p class=\"text-sm\">No social posts available</p>\n      </div>\n    </ng-template>\n  </div>\n</div>\n" }]
+        }] });
+
+/**
+ * Public API Surface of OSI Cards Library
+ *
+ * This file exports all public APIs that can be imported by other Angular projects.
+ *
+ * @example
+ * ```typescript
+ * import { AICardRendererComponent, CardDataService } from '@osi/cards-lib';
+ * ```
+ */
+// Models
+/**
+ * Note: For full functionality including:
+ * - CardDataService and other core services
+ * - NgRx store (actions, selectors, reducers, effects)
+ * - Additional utilities and providers
+ *
+ * You may need to import from the main application source or
+ * extend the library exports. See integration documentation for details.
+ *
+ * Styles entry point: '@osi/cards-lib/styles/_styles.scss'
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AICardRendererComponent, AnalyticsSectionComponent, BaseSectionComponent, BrandColorsSectionComponent, CardDiffUtil, CardPreviewComponent, CardSkeletonComponent, CardTypeGuards, CardUtils, ChartSectionComponent, ContactCardSectionComponent, EventSectionComponent, FallbackSectionComponent, FinancialsSectionComponent, IconService, InfoSectionComponent, ListSectionComponent, LucideIconsModule, MagneticTiltService, MapSectionComponent, MasonryGridComponent, NetworkCardSectionComponent, NewsSectionComponent, OverviewSectionComponent, ProductSectionComponent, QuotationSectionComponent, SectionNormalizationService, SectionRendererComponent, SectionUtilsService, SocialMediaSectionComponent, SolutionsSectionComponent, TextReferenceSectionComponent, getBreakpointFromWidth };
+//# sourceMappingURL=osi-cards-lib.mjs.map