osi-cards-lib 1.2.0 → 1.2.1

package/fesm2022/osi-cards-lib.mjs

@@ -1,11 +1,12 @@
 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 { Injectable, inject, NgZone, NgModule, EventEmitter, ChangeDetectorRef, Output, Input, ChangeDetectionStrategy, Component, PLATFORM_ID, ViewContainerRef, ViewChildren, ViewChild, ElementRef, Injector, isDevMode } from '@angular/core';
+import { BehaviorSubject, Subject, takeUntil, fromEvent, interval } from 'rxjs';
+import * as i1 from '@angular/common';
+import { CommonModule, DOCUMENT, isPlatformBrowser, ViewportScroller } from '@angular/common';
 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';
+import { provideAnimations, provideNoopAnimations } from '@angular/platform-browser/animations';
+import { AnimationBuilder, trigger, transition, style, animate } from '@angular/animations';
 
 class CardTypeGuards {
     static isAICardConfig(obj) {
@@ -238,7 +239,7 @@ class IconService {
                 return icon;
             }
         }
-        return this.iconMap['default'];
+        return this.iconMap['default'] || 'circle';
     }
     getFieldIconClass(fieldName) {
         const normalizedName = fieldName.toLowerCase().replace(/[^a-z0-9]/g, '');
@@ -252,7 +253,7 @@ class IconService {
                 return className;
             }
         }
-        return this.classMap['default'];
+        return this.classMap['default'] || 'text-gray-500';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: IconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: IconService, providedIn: 'root' }); }
@@ -505,12 +506,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }]
         }] });
 
-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;
+const MAX_LIFT_PX = 2.1; // Increased for more visible effect
+const BASE_GLOW_BLUR = 10; // Increased for more visible glow
+const MAX_GLOW_BLUR_OFFSET = 5; // Increased for more spread
+const BASE_GLOW_OPACITY = 0.25; // Increased for more visible effect
+const MAX_GLOW_OPACITY_OFFSET = 0.20; // Increased for more visible changes
+const MAX_REFLECTION_OPACITY = 0.25; // Increased for more visible reflection
+const SMOOTHING_FACTOR = 0.08; // Smooth interpolation that follows mouse cursor (lower = softer, less reactive)
+const MAX_TILT_ANGLE = 15; // Maximum tilt angle in degrees
 class MagneticTiltService {
     constructor() {
         this.tiltCalculationsSubject = new BehaviorSubject({
@@ -526,10 +529,23 @@ class MagneticTiltService {
         this.rafId = null;
         this.pendingUpdate = null;
         this.lastCalculations = null;
-        this.CACHE_DURATION = 100; // Recalculate rect every 100ms max
+        // Current smoothed values for interpolation
+        this.currentRotateY = 0;
+        this.currentRotateX = 0;
+        this.currentGlowBlur = BASE_GLOW_BLUR;
+        this.currentGlowOpacity = BASE_GLOW_OPACITY;
+        this.currentReflectionOpacity = 0;
+        // Latest target values for smoothing animation
+        this.targetRotateY = 0;
+        this.targetRotateX = 0;
+        this.targetGlowBlur = BASE_GLOW_BLUR;
+        this.targetGlowOpacity = BASE_GLOW_OPACITY;
+        this.targetReflectionOpacity = 0;
+        this.smoothingRafId = null;
+        this.CACHE_DURATION = 200; // Recalculate rect every 200ms max (reduces lag from getBoundingClientRect)
         this.ngZone = inject(NgZone);
         this.resetTimeoutId = null;
-        this.RESET_TRANSITION_DURATION_MS = 500; // Smooth exit transition duration
+        this.RESET_TRANSITION_DURATION_MS = 800; // Even smoother exit transition
     }
     calculateTilt(mousePosition, element) {
         if (!element) {
@@ -541,9 +557,10 @@ class MagneticTiltService {
             clearTimeout(this.resetTimeoutId);
             this.resetTimeoutId = null;
         }
-        // Store pending update for RAF batching
+        // Don't cancel smoothing animation - let it continue for smooth updates
+        // Store pending update for RAF batching (always use latest position)
         this.pendingUpdate = { mousePosition, element };
-        // Schedule update via RAF for smooth 60fps
+        // Schedule update via RAF for smooth 60fps (always process latest)
         if (this.rafId === null) {
             this.rafId = requestAnimationFrame(() => {
                 this.processTiltUpdate();
@@ -562,33 +579,142 @@ class MagneticTiltService {
         }
         // 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;
+        // Calculate normalized position (0-1) - optimized with cached inverse width/height
+        // Use actual card dimensions, not screen dimensions, to handle tall cards
+        const invWidth = 1.0 / cache.rect.width;
+        const invHeight = 1.0 / cache.rect.height;
+        const fx = (mousePosition.x - cache.rect.left) * invWidth;
+        const fy = (mousePosition.y - cache.rect.top) * invHeight;
+        // Fast clamp: use ternary for better branch prediction
+        const clampedFx = fx < 0 ? 0 : fx > 1 ? 1 : fx;
+        const clampedFy = fy < 0 ? 0 : fy > 1 ? 1 : fy;
+        // Normalize to -1 to 1 range (center is 0) - used for glow effects
+        const normalizedX = (clampedFx - 0.5) * 2;
+        const normalizedY = (clampedFy - 0.5) * 2;
+        // Calculate tilt multiplier based on position within card (0-1 range)
+        // Use clamped position directly for more reliable calculation
+        const cardPosX = clampedFx; // 0 = left edge, 1 = right edge
+        const cardPosY = clampedFy; // 0 = top edge, 1 = bottom edge
+        // Wave function: 0 at 0%, max at 25%, 0 at 50%, -max at 75%, 0 at 100%
+        // Pattern: 0, 100, 0, 100, 0
+        const getTiltMultiplier = (pos) => {
+            if (pos <= 0.25) {
+                // 0% to 25%: increase from 0 to 1
+                return pos * 4; // 0 -> 1
+            }
+            else if (pos <= 0.5) {
+                // 25% to 50%: decrease from 1 to 0
+                return 1 - (pos - 0.25) * 4; // 1 -> 0
+            }
+            else if (pos <= 0.75) {
+                // 50% to 75%: decrease from 0 to -1
+                return -(pos - 0.5) * 4; // 0 -> -1
+            }
+            else {
+                // 75% to 100%: increase from -1 to 0
+                return -1 + (pos - 0.75) * 4; // -1 -> 0
+            }
+        };
+        const tiltMultiplierX = getTiltMultiplier(cardPosX);
+        const tiltMultiplierY = getTiltMultiplier(cardPosY);
+        // Tilt based on card position: entry: 0°, 25%: 0.5°, 50%: 0°, 75%: -0.5°, exit: 0°
+        // Pattern: 0, 0.5, 0, -0.5, 0 degrees (softer, more subtle effect)
+        // Only horizontal tilt (left to right), vertical tilt disabled
+        const MAX_TILT_DEGREES = 0.5;
+        const targetRotateY = tiltMultiplierX * MAX_TILT_DEGREES; // Horizontal tilt (left to right)
+        const targetRotateX = 0; // Vertical tilt disabled
+        // Calculate intensity based on distance from center for glow effects
+        const distance = Math.sqrt(normalizedX * normalizedX + normalizedY * normalizedY);
+        const maxDistance = Math.sqrt(2); // Maximum distance from center (corner)
+        const normalizedDistance = Math.min(distance / maxDistance, 1.0);
+        const intensity = normalizedDistance;
+        // Calculate target glow and reflection values
+        const targetGlowBlur = BASE_GLOW_BLUR + intensity * MAX_GLOW_BLUR_OFFSET;
+        const targetGlowOpacity = BASE_GLOW_OPACITY + intensity * MAX_GLOW_OPACITY_OFFSET;
+        const targetReflectionOpacity = intensity * MAX_REFLECTION_OPACITY;
+        // Update target values (these will be used by smoothing animation)
+        this.targetRotateY = targetRotateY;
+        this.targetRotateX = targetRotateX;
+        this.targetGlowBlur = targetGlowBlur;
+        this.targetGlowOpacity = targetGlowOpacity;
+        this.targetReflectionOpacity = targetReflectionOpacity;
+        // Apply smoothing interpolation (lerp) for smooth following
+        this.currentRotateY = this.lerp(this.currentRotateY, targetRotateY, SMOOTHING_FACTOR);
+        this.currentRotateX = this.lerp(this.currentRotateX, targetRotateX, SMOOTHING_FACTOR);
+        this.currentGlowBlur = this.lerp(this.currentGlowBlur, targetGlowBlur, SMOOTHING_FACTOR);
+        this.currentGlowOpacity = this.lerp(this.currentGlowOpacity, targetGlowOpacity, SMOOTHING_FACTOR);
+        this.currentReflectionOpacity = this.lerp(this.currentReflectionOpacity, targetReflectionOpacity, SMOOTHING_FACTOR);
         const newCalculations = {
-            rotateX,
-            rotateY,
-            glowBlur,
-            glowOpacity,
-            reflectionOpacity
+            rotateY: this.currentRotateY,
+            rotateX: this.currentRotateX,
+            glowBlur: this.currentGlowBlur,
+            glowOpacity: this.currentGlowOpacity,
+            reflectionOpacity: this.currentReflectionOpacity
         };
-        // Only emit if values actually changed (prevent unnecessary updates)
-        if (!this.lastCalculations || this.hasCalculationsChanged(this.lastCalculations, newCalculations)) {
+        // Always emit for smooth continuous updates
+        this.lastCalculations = newCalculations;
+        // Run outside Angular zone for better performance
+        this.ngZone.runOutsideAngular(() => {
+            this.tiltCalculationsSubject.next(newCalculations);
+        });
+        // Always continue smoothing animation for smooth updates
+        if (this.smoothingRafId === null) {
+            this.smoothingRafId = requestAnimationFrame(() => {
+                this.continueSmoothing();
+            });
+        }
+    }
+    /**
+     * Linear interpolation (lerp) for smooth value transitions
+     * @param start Current value
+     * @param end Target value
+     * @param factor Interpolation factor (0-1)
+     */
+    lerp(start, end, factor) {
+        return start + (end - start) * factor;
+    }
+    /**
+     * Continue smoothing animation until values are close to target
+     * Uses the latest target values stored in the service
+     * Optimized for smooth cursor following
+     */
+    continueSmoothing() {
+        const threshold = 0.01; // Threshold for smooth updates
+        // Check if we need to continue smoothing using latest target values
+        const rotateYDiff = Math.abs(this.currentRotateY - this.targetRotateY);
+        const rotateXDiff = Math.abs(this.currentRotateX - this.targetRotateX);
+        const glowBlurDiff = Math.abs(this.currentGlowBlur - this.targetGlowBlur);
+        const glowOpacityDiff = Math.abs(this.currentGlowOpacity - this.targetGlowOpacity);
+        const reflectionDiff = Math.abs(this.currentReflectionOpacity - this.targetReflectionOpacity);
+        // Continue smoothing if there's any significant difference
+        if (rotateYDiff > threshold || rotateXDiff > threshold ||
+            glowBlurDiff > threshold || glowOpacityDiff > threshold ||
+            reflectionDiff > threshold) {
+            // Continue smoothing towards latest targets
+            this.currentRotateY = this.lerp(this.currentRotateY, this.targetRotateY, SMOOTHING_FACTOR);
+            this.currentRotateX = this.lerp(this.currentRotateX, this.targetRotateX, SMOOTHING_FACTOR);
+            this.currentGlowBlur = this.lerp(this.currentGlowBlur, this.targetGlowBlur, SMOOTHING_FACTOR);
+            this.currentGlowOpacity = this.lerp(this.currentGlowOpacity, this.targetGlowOpacity, SMOOTHING_FACTOR);
+            this.currentReflectionOpacity = this.lerp(this.currentReflectionOpacity, this.targetReflectionOpacity, SMOOTHING_FACTOR);
+            const newCalculations = {
+                rotateY: this.currentRotateY,
+                rotateX: this.currentRotateX,
+                glowBlur: this.currentGlowBlur,
+                glowOpacity: this.currentGlowOpacity,
+                reflectionOpacity: this.currentReflectionOpacity
+            };
             this.lastCalculations = newCalculations;
-            // Run outside Angular zone for better performance
             this.ngZone.runOutsideAngular(() => {
                 this.tiltCalculationsSubject.next(newCalculations);
             });
+            // Continue animation for smooth updates
+            this.smoothingRafId = requestAnimationFrame(() => {
+                this.continueSmoothing();
+            });
+        }
+        else {
+            // Very close to target, stop animation
+            this.smoothingRafId = null;
         }
     }
     getElementCache(element) {
@@ -600,17 +726,13 @@ class MagneticTiltService {
         }
         // 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,
+            halfW: rect.width / 2,
+            halfH: rect.height / 2,
+            maxAngleY: MAX_TILT_ANGLE, // Use constant max angle for consistent behavior
+            maxAngleX: MAX_TILT_ANGLE, // Use constant max angle for consistent behavior
             lastUpdate: now
         };
         this.elementCache.set(element, cache);
@@ -632,6 +754,11 @@ class MagneticTiltService {
             this.rafId = null;
         }
         this.pendingUpdate = null;
+        // Cancel smoothing animation
+        if (this.smoothingRafId !== null) {
+            cancelAnimationFrame(this.smoothingRafId);
+            this.smoothingRafId = null;
+        }
         // Clear any existing reset timeout
         if (this.resetTimeoutId !== null) {
             clearTimeout(this.resetTimeoutId);
@@ -639,41 +766,55 @@ class MagneticTiltService {
         }
         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
+            // Use RAF for smooth 60fps animation
             const startTime = performance.now();
-            const startCalculations = this.lastCalculations || {
-                rotateX: 0,
-                rotateY: 0,
-                glowBlur: BASE_GLOW_BLUR,
-                glowOpacity: BASE_GLOW_OPACITY,
-                reflectionOpacity: 0
-            };
+            const startRotateY = this.currentRotateY;
+            const startRotateX = this.currentRotateX;
+            const startGlowBlur = this.currentGlowBlur;
+            const startGlowOpacity = this.currentGlowOpacity;
+            const startReflectionOpacity = this.currentReflectionOpacity;
             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);
+                // Optimized cubic ease-out - avoid Math.pow() for better performance
+                const t = 1 - progress;
+                const easeOut = 1 - (t * t * t); // t³ instead of Math.pow(t, 3)
+                this.currentRotateY = startRotateY * (1 - easeOut);
+                this.currentRotateX = startRotateX * (1 - easeOut);
+                this.currentGlowBlur = BASE_GLOW_BLUR + (startGlowBlur - BASE_GLOW_BLUR) * (1 - easeOut);
+                this.currentGlowOpacity = BASE_GLOW_OPACITY + (startGlowOpacity - BASE_GLOW_OPACITY) * (1 - easeOut);
+                this.currentReflectionOpacity = startReflectionOpacity * (1 - easeOut);
                 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)
+                    rotateY: this.currentRotateY,
+                    rotateX: this.currentRotateX,
+                    glowBlur: this.currentGlowBlur,
+                    glowOpacity: this.currentGlowOpacity,
+                    reflectionOpacity: this.currentReflectionOpacity
                 };
                 this.lastCalculations = currentCalculations;
                 this.ngZone.runOutsideAngular(() => {
                     this.tiltCalculationsSubject.next(currentCalculations);
                 });
                 if (progress < 1) {
-                    // Continue animation
-                    this.resetTimeoutId = window.setTimeout(animateReset, 16); // ~60fps
+                    // Continue animation using RAF for smooth 60fps
+                    this.resetTimeoutId = window.setTimeout(animateReset, 16);
                 }
                 else {
                     // Animation complete - set final values
+                    this.currentRotateY = 0;
+                    this.currentRotateX = 0;
+                    this.currentGlowBlur = BASE_GLOW_BLUR;
+                    this.currentGlowOpacity = BASE_GLOW_OPACITY;
+                    this.currentReflectionOpacity = 0;
+                    this.targetRotateY = 0;
+                    this.targetRotateX = 0;
+                    this.targetGlowBlur = BASE_GLOW_BLUR;
+                    this.targetGlowOpacity = BASE_GLOW_OPACITY;
+                    this.targetReflectionOpacity = 0;
                     this.lastCalculations = null;
                     this.tiltCalculationsSubject.next({
-                        rotateX: 0,
                         rotateY: 0,
+                        rotateX: 0,
                         glowBlur: BASE_GLOW_BLUR,
                         glowOpacity: BASE_GLOW_OPACITY,
                         reflectionOpacity: 0
@@ -681,15 +822,25 @@ class MagneticTiltService {
                     this.resetTimeoutId = null;
                 }
             };
-            // Start smooth reset animation
+            // Start smooth reset animation using RAF
             animateReset();
         }
         else {
             // Immediate reset (for cleanup)
+            this.currentRotateY = 0;
+            this.currentRotateX = 0;
+            this.currentGlowBlur = BASE_GLOW_BLUR;
+            this.currentGlowOpacity = BASE_GLOW_OPACITY;
+            this.currentReflectionOpacity = 0;
+            this.targetRotateY = 0;
+            this.targetRotateX = 0;
+            this.targetGlowBlur = BASE_GLOW_BLUR;
+            this.targetGlowOpacity = BASE_GLOW_OPACITY;
+            this.targetReflectionOpacity = 0;
             this.lastCalculations = null;
             this.tiltCalculationsSubject.next({
-                rotateX: 0,
                 rotateY: 0,
+                rotateX: 0,
                 glowBlur: BASE_GLOW_BLUR,
                 glowOpacity: BASE_GLOW_OPACITY,
                 reflectionOpacity: 0
@@ -715,6 +866,10 @@ class MagneticTiltService {
             cancelAnimationFrame(this.rafId);
             this.rafId = null;
         }
+        if (this.smoothingRafId !== null) {
+            cancelAnimationFrame(this.smoothingRafId);
+            this.smoothingRafId = null;
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MagneticTiltService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MagneticTiltService, providedIn: 'root' }); }
@@ -846,764 +1001,2492 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }]
         }] });
 
-/**
- * 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));
+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: "20.3.14", ngImport: i0, type: LucideIconsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: LucideIconsModule, imports: [i2.LucideAngularModule], exports: [LucideAngularModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LucideIconsModule, imports: [LucideAngularModule.pick(ICONS), LucideAngularModule] }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LucideIconsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [LucideAngularModule.pick(ICONS)],
+                    exports: [LucideAngularModule]
+                }]
+        }] });
+
 /**
- * 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
+ * Base component class for all section components
+ * Provides common functionality and ensures consistency
  */
-class CardDiffUtil {
+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;
+    }
     /**
-     * Creates an updated card with only changed sections/fields updated
-     * Preserves references to unchanged sections for optimal performance
+     * Get fields from section (standardized access pattern)
      */
-    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;
-        });
+    getFields() {
+        return this.section.fields ?? [];
     }
     /**
-     * Merges sections array, preserving references to unchanged sections
+     * Get items from section (standardized access pattern)
+     * Falls back to fields if items are not available
      */
-    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;
+    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)
+                };
             });
         }
-        // Merge each section
-        return newSections.map((newSection, index) => {
-            const oldSection = oldSections[index];
-            if (!oldSection) {
-                return newSection;
+        return [];
+    }
+    ngOnChanges(changes) {
+        if (changes['section']) {
+            // Cancel pending RAFs
+            if (this.fieldAnimationUpdateRafId !== null) {
+                cancelAnimationFrame(this.fieldAnimationUpdateRafId);
+                this.fieldAnimationUpdateRafId = null;
             }
-            if ((oldSection.id || index) !== (newSection.id || index)) {
-                return newSection;
+            if (this.itemAnimationUpdateRafId !== null) {
+                cancelAnimationFrame(this.itemAnimationUpdateRafId);
+                this.itemAnimationUpdateRafId = null;
             }
-            // Merge section fields/items
-            return this.mergeSection(oldSection, newSection);
-        });
+            // 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();
+        }
     }
     /**
-     * Merges a single section, preserving references to unchanged fields/items
+     * Get animation class for a field based on its appearance state
      */
-    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
-            };
+    getFieldAnimationClass(fieldId, index) {
+        const state = this.fieldAnimationStates.get(fieldId);
+        if (state === 'entering') {
+            return 'field-streaming';
         }
-        // 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
-        };
+        if (state === 'entered') {
+            return 'field-entered';
+        }
+        // New field - mark as entering
+        if (state === undefined || state === 'none') {
+            this.markFieldEntering(fieldId, index);
+            return 'field-streaming';
+        }
+        return '';
     }
     /**
-     * Merges fields array, preserving references to unchanged fields
-     * Uses content hashing instead of JSON.stringify for better performance
+     * Get animation class for an item based on its appearance state
      */
-    static mergeFields(oldFields, newFields) {
-        if (oldFields.length !== newFields.length) {
-            return newFields;
+    getItemAnimationClass(itemId, index) {
+        const state = this.itemAnimationStates.get(itemId);
+        if (state === 'entering') {
+            return 'item-streaming';
         }
-        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;
-        });
+        if (state === 'entered') {
+            return 'item-entered';
+        }
+        // New item - mark as entering
+        if (state === undefined || state === 'none') {
+            this.markItemEntering(itemId, index);
+            return 'item-streaming';
+        }
+        return '';
     }
     /**
-     * Merges items array, preserving references to unchanged items
-     * Uses content hashing instead of JSON.stringify for better performance
+     * Get stagger delay index for field animation
      */
-    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;
-        });
+    getFieldStaggerIndex(index) {
+        return Math.min(index, 15);
     }
     /**
-     * Fast equality check for cards
+     * Get stagger delay index for item animation
      */
-    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);
+    getItemStaggerIndex(index) {
+        return Math.min(index, 15);
     }
     /**
-     * Fast equality check for sections arrays
+     * Mark field as entering and schedule entered state
+     * Optimized: Batches change detection for better performance
      */
-    static areSectionsEqual(sections1, sections2) {
-        if (sections1.length !== sections2.length) {
-            return false;
+    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
         }
-        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);
+        this.fieldAnimationUpdateRafId = requestAnimationFrame(() => {
+            if (this.pendingFieldAnimationUpdates.size > 0) {
+                // Single change detection for all pending updates
+                this.cdr.markForCheck();
+                this.pendingFieldAnimationUpdates.clear();
+            }
+            this.fieldAnimationUpdateRafId = null;
         });
     }
     /**
-     * Fast equality check for fields arrays
+     * Mark item as entering and schedule entered state
+     * Optimized: Batches change detection for better performance
      */
-    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;
-        });
+    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);
     }
     /**
-     * Fast equality check for items arrays
+     * Batch change detection for item animation state updates
      */
-    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;
+    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;
         });
     }
-}
-
-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: "20.3.14", ngImport: i0, type: LucideIconsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: LucideIconsModule, imports: [i2.LucideAngularModule], exports: [LucideAngularModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LucideIconsModule, imports: [LucideAngularModule.pick(ICONS), LucideAngularModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", 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;
+    /**
+     * Reset field animation states
+     */
+    resetFieldAnimations() {
+        this.fieldAnimationStates.clear();
+        this.fieldAnimationTimes.clear();
     }
     /**
-     * Get fields from section (standardized access pattern)
+     * Reset item animation states
      */
-    getFields() {
-        return this.section.fields ?? [];
+    resetItemAnimations() {
+        this.itemAnimationStates.clear();
+        this.itemAnimationTimes.clear();
     }
     /**
-     * Get items from section (standardized access pattern)
-     * Falls back to fields if items are not available
+     * Get field ID for tracking
      */
-    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)
-                };
-            });
+    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: "20.3.14", ngImport: i0, type: BaseSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: BaseSectionComponent, isStandalone: true, 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: "20.3.14", 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 FallbackSectionComponent extends BaseSectionComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FallbackSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", 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: "20.3.14", 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" }]
+        }] });
+
+/**
+ * Registry service for managing custom section type plugins
+ *
+ * Allows external developers to register custom section components that extend
+ * the library's built-in section types.
+ *
+ * @example
+ * ```typescript
+ * const registry = inject(SectionPluginRegistry);
+ *
+ * // Register a custom section plugin
+ * registry.register({
+ *   type: 'custom-section',
+ *   name: 'Custom Section',
+ *   description: 'A custom section type',
+ *   component: CustomSectionComponent,
+ *   config: {
+ *     priority: 10,
+ *     override: false
+ *   }
+ * });
+ *
+ * // Get a component for a section type
+ * const component = registry.getComponent(section);
+ * ```
+ */
+class SectionPluginRegistry {
+    constructor() {
+        this.plugins = new Map();
+        this.defaultFallback = FallbackSectionComponent;
+    }
+    /**
+     * Register a custom section plugin
+     *
+     * @param plugin - The plugin metadata and component
+     * @throws Error if plugin type already exists and override is false
+     */
+    register(plugin) {
+        const { type, name, description, component, config = {}, metadata = {} } = plugin;
+        // Check if plugin already exists
+        if (this.plugins.has(type) && !config.override) {
+            throw new Error(`Section plugin with type "${type}" is already registered. ` +
+                `Set override: true in config to replace it.`);
+        }
+        // Validate component implements SectionPlugin
+        const componentInstance = new component();
+        if (!componentInstance.getPluginType || !componentInstance.canHandle) {
+            console.warn(`Component ${component.name} does not properly implement SectionPlugin interface. ` +
+                `It should extend BaseSectionComponent and implement SectionPlugin methods.`);
+        }
+        const registeredPlugin = {
+            type,
+            name,
+            description,
+            component: component,
+            config,
+            priority: config.priority ?? 0,
+            version: metadata.version,
+            author: metadata.author
+        };
+        this.plugins.set(type, registeredPlugin);
+    }
+    /**
+     * Unregister a plugin
+     *
+     * @param type - The section type to unregister
+     * @returns True if plugin was removed, false if not found
+     */
+    unregister(type) {
+        return this.plugins.delete(type);
+    }
+    /**
+     * Get the component class for a given section type
+     *
+     * @param sectionType - The section type identifier
+     * @returns The component class or null if not found
+     */
+    getComponent(sectionType) {
+        const plugin = this.plugins.get(sectionType);
+        return plugin?.component ?? null;
+    }
+    /**
+     * Get the component class for a section
+     * Returns null if no plugin is registered (built-in sections will handle it)
+     *
+     * @param section - The card section
+     * @returns The component class or null if no plugin registered
+     */
+    getComponentForSection(section) {
+        const sectionType = section.type?.toLowerCase();
+        if (!sectionType) {
+            return null;
+        }
+        // Check if a plugin is registered for this type
+        const plugin = this.plugins.get(sectionType);
+        if (plugin) {
+            return plugin.component;
+        }
+        // Return null to let built-in renderer handle it
+        return null;
+    }
+    /**
+     * Check if a plugin is registered for a section type
+     *
+     * @param type - The section type identifier
+     * @returns True if a plugin is registered
+     */
+    hasPlugin(type) {
+        return this.plugins.has(type);
+    }
+    /**
+     * Get all registered plugins
+     *
+     * @returns Array of registered plugin metadata
+     */
+    getPlugins() {
+        return Array.from(this.plugins.values())
+            .sort((a, b) => b.priority - a.priority);
+    }
+    /**
+     * Get plugin metadata for a specific type
+     *
+     * @param type - The section type identifier
+     * @returns Plugin metadata or null if not found
+     */
+    getPluginMetadata(type) {
+        return this.plugins.get(type) ?? null;
+    }
+    /**
+     * Clear all registered plugins
+     */
+    clear() {
+        this.plugins.clear();
+    }
+    /**
+     * Register multiple plugins at once
+     *
+     * @param plugins - Array of plugins to register
+     */
+    registerAll(plugins) {
+        plugins.forEach(plugin => {
+            try {
+                this.register(plugin);
+            }
+            catch (error) {
+                console.error(`Failed to register plugin "${plugin.type}":`, error);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SectionPluginRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SectionPluginRegistry, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SectionPluginRegistry, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * Event Middleware Service
+ *
+ * Manages event middleware chains for processing card events before they reach handlers.
+ * Supports logging, transformation, filtering, and analytics integration.
+ *
+ * @example
+ * ```typescript
+ * const eventService = inject(EventMiddlewareService);
+ *
+ * // Add logging middleware
+ * eventService.addMiddleware({
+ *   handle: (event, next) => {
+ *     console.log('Event:', event);
+ *     return next(event);
+ *   }
+ * });
+ *
+ * // Subscribe to processed events
+ * eventService.processedEvents$.subscribe(event => {
+ *   // Handle event
+ * });
+ * ```
+ */
+class EventMiddlewareService {
+    constructor() {
+        this.middleware = [];
+        this.processedEventsSubject = new Subject();
+        this.rawEventsSubject = new Subject();
+        /** Observable of processed events (after middleware chain) */
+        this.processedEvents$ = this.processedEventsSubject.asObservable();
+        /** Observable of raw events (before middleware) */
+        this.rawEvents$ = this.rawEventsSubject.asObservable();
+    }
+    /**
+     * Add middleware to the chain
+     *
+     * @param middleware - Middleware to add
+     * @returns Function to remove the middleware
+     */
+    addMiddleware(middleware) {
+        this.middleware.push(middleware);
+        this.sortMiddleware();
+        // Return remove function
+        return () => {
+            const index = this.middleware.indexOf(middleware);
+            if (index > -1) {
+                this.middleware.splice(index, 1);
+            }
+        };
+    }
+    /**
+     * Remove middleware from the chain
+     *
+     * @param middleware - Middleware to remove
+     */
+    removeMiddleware(middleware) {
+        const index = this.middleware.indexOf(middleware);
+        if (index > -1) {
+            this.middleware.splice(index, 1);
+        }
+    }
+    /**
+     * Clear all middleware
+     */
+    clearMiddleware() {
+        this.middleware = [];
+    }
+    /**
+     * Process an event through the middleware chain
+     *
+     * @param event - Event to process
+     * @returns Processed event
+     */
+    processEvent(event) {
+        // Emit raw event
+        this.rawEventsSubject.next(event);
+        if (this.middleware.length === 0) {
+            this.processedEventsSubject.next(event);
+            return event;
+        }
+        // Build middleware chain
+        const processed = this.middleware.reduceRight((next, middleware) => {
+            return (e) => middleware.handle(e, next);
+        }, (e) => e // Final handler returns event as-is
+        )(event);
+        // Emit processed event
+        this.processedEventsSubject.next(processed);
+        return processed;
+    }
+    /**
+     * Create a logging middleware
+     *
+     * @param logger - Optional logger function (defaults to console.log)
+     * @returns Logging middleware
+     */
+    createLoggingMiddleware(logger) {
+        const log = logger || ((msg, evt) => console.log(msg, evt));
+        return {
+            priority: 100, // High priority - log first
+            handle: (event, next) => {
+                log(`[Card Event] ${event.type}`, event);
+                return next(event);
+            }
+        };
+    }
+    /**
+     * Create a filtering middleware
+     *
+     * @param filter - Filter function
+     * @returns Filtering middleware
+     */
+    createFilterMiddleware(filter) {
+        return {
+            handle: (event, next) => {
+                if (filter(event)) {
+                    return next(event);
+                }
+                // Return event unchanged if filtered out
+                return event;
+            }
+        };
+    }
+    /**
+     * Create a transformation middleware
+     *
+     * @param transformer - Transformation function
+     * @returns Transformation middleware
+     */
+    createTransformMiddleware(transformer) {
+        return {
+            handle: (event, next) => {
+                const transformed = transformer(event);
+                return next(transformed);
+            }
+        };
+    }
+    /**
+     * Create an analytics middleware
+     *
+     * @param trackEvent - Analytics tracking function
+     * @returns Analytics middleware
+     */
+    createAnalyticsMiddleware(trackEvent) {
+        return {
+            priority: 50,
+            handle: (event, next) => {
+                trackEvent(`card_${event.type}`, {
+                    sectionId: event.section.id,
+                    sectionType: event.section.type,
+                    fieldId: event.field?.id,
+                    itemId: event.item?.id,
+                    actionId: event.action?.id,
+                    metadata: event.metadata
+                });
+                return next(event);
+            }
+        };
+    }
+    /**
+     * Sort middleware by priority (higher priority first)
+     */
+    sortMiddleware() {
+        this.middleware.sort((a, b) => {
+            const priorityA = a.priority ?? 0;
+            const priorityB = b.priority ?? 0;
+            return priorityB - priorityA;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: EventMiddlewareService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: EventMiddlewareService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: EventMiddlewareService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * Public interfaces for OSI Cards Library
+ */
+
+/**
+ * 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';
+}
+
+/**
+ * Card Spawner Utilities
+ *
+ * Helper functions for dynamically instantiating and managing card components,
+ * particularly useful for agentic flows and LLM integrations.
+ */
+/**
+ * Creates an empty card configuration for initialization
+ */
+function createEmptyCard(title = 'Loading...') {
+    return {
+        cardTitle: title,
+        cardSubtitle: undefined,
+        sections: [],
+        actions: []
+    };
+}
+/**
+ * Creates a skeleton card configuration for loading states
+ */
+function createSkeletonCard() {
+    return {
+        cardTitle: 'Loading...',
+        cardSubtitle: 'Please wait while we fetch your data',
+        sections: [
+            {
+                id: 'skeleton-section',
+                title: 'Loading',
+                type: 'info',
+                fields: []
+            }
+        ]
+    };
+}
+/**
+ * Merges a partial card configuration into an existing card configuration
+ * This is useful for progressive updates during streaming
+ */
+function mergeCardConfig(existing, update) {
+    const merged = {
+        ...existing,
+        ...update
+    };
+    // Merge sections intelligently
+    if (update.sections) {
+        merged.sections = mergeSections(existing.sections || [], update.sections);
+    }
+    // Merge actions
+    if (update.actions) {
+        merged.actions = mergeActions(existing.actions || [], update.actions);
+    }
+    return merged;
+}
+/**
+ * Merges sections arrays, updating existing sections or adding new ones
+ */
+function mergeSections(existing, updates) {
+    const sectionMap = new Map();
+    // Add existing sections to map
+    existing.forEach(section => {
+        const key = getSectionKey(section);
+        sectionMap.set(key, { ...section });
+    });
+    // Merge or add updated sections
+    updates.forEach(updateSection => {
+        const key = getSectionKey(updateSection);
+        const existingSection = sectionMap.get(key);
+        if (existingSection) {
+            // Merge fields and items into existing section
+            sectionMap.set(key, {
+                ...existingSection,
+                ...updateSection,
+                fields: mergeFields(existingSection.fields || [], updateSection.fields || []),
+                items: mergeItems(existingSection.items || [], updateSection.items || [])
+            });
+        }
+        else {
+            // Add new section
+            sectionMap.set(key, { ...updateSection });
+        }
+    });
+    return Array.from(sectionMap.values());
+}
+/**
+ * Merges fields arrays, avoiding duplicates by ID or label
+ */
+function mergeFields(existing, updates) {
+    const fieldMap = new Map();
+    // Add existing fields
+    existing.forEach(field => {
+        const key = field.id || field.label || String(field);
+        fieldMap.set(key, field);
+    });
+    // Add or update fields
+    updates.forEach(update => {
+        const key = update.id || update.label || String(update);
+        fieldMap.set(key, update);
+    });
+    return Array.from(fieldMap.values());
+}
+/**
+ * Merges items arrays, avoiding duplicates by ID or name
+ */
+function mergeItems(existing, updates) {
+    const itemMap = new Map();
+    // Add existing items
+    existing.forEach(item => {
+        const key = item.id || item.name || String(item);
+        itemMap.set(key, item);
+    });
+    // Add or update items
+    updates.forEach(update => {
+        const key = update.id || update.name || String(update);
+        itemMap.set(key, update);
+    });
+    return Array.from(itemMap.values());
+}
+/**
+ * Merges actions arrays, avoiding duplicates by ID or label
+ */
+function mergeActions(existing, updates) {
+    const actionMap = new Map();
+    // Add existing actions
+    existing.forEach(action => {
+        const key = action.id || action.label || String(action);
+        actionMap.set(key, action);
+    });
+    // Add or update actions
+    updates.forEach(update => {
+        const key = update.id || update.label || String(update);
+        actionMap.set(key, update);
+    });
+    return Array.from(actionMap.values());
+}
+/**
+ * Gets a unique key for a section (for merging)
+ */
+function getSectionKey(section) {
+    return section.id ||
+        `${section.title || 'section'}-${section.type || 'info'}`;
+}
+/**
+ * Validates a card configuration for completeness
+ */
+function validateCardConfig(card) {
+    const errors = [];
+    if (!card.cardTitle) {
+        errors.push('Card title is required');
+    }
+    if (!card.sections || card.sections.length === 0) {
+        errors.push('At least one section is required');
+    }
+    if (card.sections) {
+        card.sections.forEach((section, index) => {
+            if (!section.title) {
+                errors.push(`Section ${index} is missing a title`);
+            }
+            if (!section.type) {
+                errors.push(`Section ${index} is missing a type`);
+            }
+        });
+    }
+    return {
+        valid: errors.length === 0,
+        errors
+    };
+}
+/**
+ * Creates a card configuration from a partial update
+ * Useful when receiving streaming updates that may be incomplete
+ */
+function createCardFromPartial(partial, defaults = {}) {
+    return {
+        cardTitle: partial.cardTitle || defaults.cardTitle || 'Card',
+        cardSubtitle: partial.cardSubtitle || defaults.cardSubtitle,
+        sections: partial.sections || defaults.sections || [],
+        actions: partial.actions || defaults.actions || []
+    };
+}
+/**
+ * Checks if a card configuration is complete (all required fields present)
+ */
+function isCardComplete(card) {
+    return !!(card.cardTitle &&
+        card.sections &&
+        card.sections.length > 0 &&
+        card.sections.every(section => section.title &&
+            section.type &&
+            ((section.fields && section.fields.length > 0) || (section.items && section.items.length > 0))));
+}
+/**
+ * Creates a card configuration with error information
+ */
+function createErrorCard(error, title = 'Error') {
+    const errorMessage = typeof error === 'string' ? error : error.message;
+    return {
+        cardTitle: title,
+        cardSubtitle: 'An error occurred',
+        sections: [
+            {
+                id: 'error-section',
+                title: 'Error Details',
+                type: 'info',
+                fields: [
+                    {
+                        id: 'error-message',
+                        label: 'Message',
+                        value: errorMessage,
+                        type: 'text'
+                    }
+                ]
+            }
+        ]
+    };
+}
+/**
+ * Prepares a card configuration for streaming updates
+ * Ensures the card has the necessary structure for progressive updates
+ */
+function prepareCardForStreaming(card) {
+    return {
+        cardTitle: card.cardTitle || 'Loading...',
+        cardSubtitle: card.cardSubtitle,
+        sections: card.sections || [],
+        actions: card.actions || [],
+        // Ensure sections have IDs for tracking during updates
+        ...card
+    };
+}
+/**
+ * Updates a card configuration incrementally
+ * Optimized for streaming scenarios where partial updates arrive
+ */
+function updateCardIncremental(existing, update) {
+    // Start with existing card
+    const updated = { ...existing };
+    // Update top-level fields if provided
+    if (update.cardTitle !== undefined) {
+        updated.cardTitle = update.cardTitle;
+    }
+    if (update.cardSubtitle !== undefined) {
+        updated.cardSubtitle = update.cardSubtitle;
+    }
+    // Merge sections incrementally
+    if (update.sections) {
+        updated.sections = mergeSections(existing.sections || [], update.sections);
+    }
+    // Merge actions
+    if (update.actions) {
+        updated.actions = [...(existing.actions || []), ...(update.actions || [])];
+    }
+    return updated;
+}
+/**
+ * Creates a copy of a card configuration (deep clone)
+ */
+function cloneCardConfig(card) {
+    return JSON.parse(JSON.stringify(card));
+}
+
+/**
+ * Style Validator Utilities
+ *
+ * Helper functions to validate that the OSI Cards design system styles
+ * are properly loaded and configured.
+ */
+/**
+ * Required CSS variables that must be present for the library to work correctly
+ */
+const REQUIRED_CSS_VARIABLES = [
+    '--card-padding',
+    '--card-gap',
+    '--card-border-radius',
+    '--color-brand',
+    '--ai-card-background',
+    '--section-item-background'
+];
+/**
+ * Optional but recommended CSS variables
+ */
+const RECOMMENDED_CSS_VARIABLES = [
+    '--card-text-primary',
+    '--card-text-secondary',
+    '--card-transition',
+    '--duration-normal',
+    '--duration-moderate'
+];
+/**
+ * Validates that required CSS variables are present
+ *
+ * @param element - Optional element to check (defaults to document root)
+ * @returns Validation result with missing variables and warnings
+ *
+ * @example
+ * ```typescript
+ * const validation = validateStyles();
+ * if (!validation.valid) {
+ *   console.warn('Missing styles:', validation.missing);
+ * }
+ * ```
+ */
+function validateStyles(element) {
+    // Check if we're in a browser environment
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+        return {
+            valid: false,
+            missing: REQUIRED_CSS_VARIABLES,
+            recommended: RECOMMENDED_CSS_VARIABLES,
+            warnings: ['Style validation requires a browser environment']
+        };
+    }
+    const root = element || document.documentElement;
+    const computedStyle = window.getComputedStyle(root);
+    const missing = [];
+    const recommended = [];
+    const warnings = [];
+    // Check required variables
+    REQUIRED_CSS_VARIABLES.forEach(variable => {
+        const value = computedStyle.getPropertyValue(variable).trim();
+        if (!value || value === 'initial' || value === 'inherit') {
+            missing.push(variable);
+        }
+    });
+    // Check recommended variables
+    RECOMMENDED_CSS_VARIABLES.forEach(variable => {
+        const value = computedStyle.getPropertyValue(variable).trim();
+        if (!value || value === 'initial' || value === 'inherit') {
+            recommended.push(variable);
+        }
+    });
+    // Generate warnings
+    if (missing.length > 0) {
+        warnings.push(`OSI Cards Library: ${missing.length} required CSS variable(s) are missing. ` +
+            `The library styles may not be properly imported. ` +
+            `Please ensure you've added: @import 'osi-cards-lib/styles/_styles';`);
+    }
+    if (recommended.length > 0 && missing.length === 0) {
+        warnings.push(`OSI Cards Library: ${recommended.length} recommended CSS variable(s) are missing. ` +
+            `Some advanced features may not work as expected.`);
+    }
+    return {
+        valid: missing.length === 0,
+        missing,
+        recommended,
+        warnings
+    };
+}
+/**
+ * Validates styles and logs warnings to console if issues are found
+ *
+ * @param element - Optional element to check
+ * @param logToConsole - Whether to log warnings to console (default: true)
+ * @returns Validation result
+ *
+ * @example
+ * ```typescript
+ * // In component ngOnInit or after styles load
+ * validateAndWarnStyles();
+ * ```
+ */
+function validateAndWarnStyles(element, logToConsole = true) {
+    const result = validateStyles(element);
+    if (logToConsole && result.warnings.length > 0) {
+        result.warnings.forEach(warning => {
+            console.warn(warning);
+        });
+        if (result.missing.length > 0) {
+            console.info('Missing CSS variables:\n' +
+                result.missing.map(v => `  - ${v}`).join('\n') + '\n\n' +
+                'To fix this, add to your styles file:\n' +
+                "  @import 'osi-cards-lib/styles/_styles';");
+        }
+    }
+    return result;
+}
+/**
+ * Checks if a specific CSS variable is defined
+ *
+ * @param variableName - Name of the CSS variable (with or without -- prefix)
+ * @param element - Optional element to check
+ * @returns True if the variable is defined and has a value
+ */
+function isCSSVariableDefined(variableName, element) {
+    // Check if we're in a browser environment
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+        return false;
+    }
+    const root = element || document.documentElement;
+    const computedStyle = window.getComputedStyle(root);
+    // Ensure variable name starts with --
+    const varName = variableName.startsWith('--') ? variableName : `--${variableName}`;
+    const value = computedStyle.getPropertyValue(varName).trim();
+    return !!value && value !== 'initial' && value !== 'inherit';
+}
+/**
+ * Gets the value of a CSS variable
+ *
+ * @param variableName - Name of the CSS variable (with or without -- prefix)
+ * @param element - Optional element to check
+ * @returns The CSS variable value, or null if not defined
+ */
+function getCSSVariableValue(variableName, element) {
+    // Check if we're in a browser environment
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+        return null;
+    }
+    const root = element || document.documentElement;
+    const computedStyle = window.getComputedStyle(root);
+    // Ensure variable name starts with --
+    const varName = variableName.startsWith('--') ? variableName : `--${variableName}`;
+    const value = computedStyle.getPropertyValue(varName).trim();
+    if (!value || value === 'initial' || value === 'inherit') {
+        return null;
+    }
+    return value;
+}
+/**
+ * Checks if styles are loaded by looking for a specific marker class or variable
+ * This is a lighter check than full validation
+ *
+ * @returns True if styles appear to be loaded
+ */
+function areStylesLoaded() {
+    // Check for presence of a key design token
+    return isCSSVariableDefined('--color-brand') &&
+        isCSSVariableDefined('--card-padding');
+}
+/**
+ * Waits for styles to be loaded by polling
+ * Useful when styles are loaded asynchronously
+ *
+ * @param timeout - Maximum time to wait in milliseconds (default: 5000)
+ * @param pollInterval - How often to check in milliseconds (default: 100)
+ * @returns Promise that resolves when styles are loaded or timeout is reached
+ */
+function waitForStyles(timeout = 5000, pollInterval = 100) {
+    // Check if we're in a browser environment
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+        return Promise.resolve(false);
+    }
+    return new Promise((resolve) => {
+        const startTime = Date.now();
+        const checkStyles = () => {
+            if (areStylesLoaded()) {
+                resolve(true);
+                return;
+            }
+            if (Date.now() - startTime >= timeout) {
+                resolve(false);
+                return;
+            }
+            setTimeout(checkStyles, pollInterval);
+        };
+        checkStyles();
+    });
+}
+
+/**
+ * Provide OSI Cards Library with required providers
+ *
+ * This function provides all necessary providers for the OSI Cards library to function
+ * correctly in an Angular application. It includes:
+ * - Animation providers (required for component animations)
+ * - Service providers (services use providedIn: 'root' so they're automatically available)
+ *
+ * @param config - Optional configuration object
+ * @returns Array of providers to be added to your ApplicationConfig
+ *
+ * @example
+ * ```typescript
+ * // In your app.config.ts
+ * import { ApplicationConfig } from '@angular/core';
+ * import { provideOSICards } from 'osi-cards-lib';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideOSICards(), // Enable animations (default)
+ *     // ... other providers
+ *   ]
+ * };
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Disable animations (for testing or performance)
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideOSICards({ enableAnimations: false }),
+ *     // ... other providers
+ *   ]
+ * };
+ * ```
+ *
+ * @remarks
+ * - **REQUIRED**: You must call this function in your app.config.ts providers array
+ * - Animations are required for proper component behavior (entrance animations, transitions)
+ * - Services (MagneticTiltService, IconService, etc.) are automatically provided via providedIn: 'root'
+ * - Styles must be imported separately: @import 'osi-cards-lib/styles/_styles';
+ */
+function provideOSICards(config = {}) {
+    const { enableAnimations = true } = config;
+    const providers = [
+        // Animation provider is REQUIRED for component animations
+        enableAnimations ? provideAnimations() : provideNoopAnimations()
+    ];
+    // Services are provided via providedIn: 'root' and don't need explicit providers here
+    // This includes:
+    // - MagneticTiltService
+    // - IconService
+    // - SectionNormalizationService
+    // - SectionUtilsService
+    return providers;
+}
+
+/**
+ * OSI Cards Library Providers
+ *
+ * Exports provider functions for configuring the OSI Cards library in your Angular application.
+ */
+
+/**
+ * Theme Service
+ *
+ * Manages theme configuration and runtime theme switching for OSI Cards library.
+ * Supports built-in presets and custom themes via CSS custom properties.
+ *
+ * @example
+ * ```typescript
+ * const themeService = inject(ThemeService);
+ *
+ * // Switch to dark theme
+ * themeService.setTheme('night');
+ *
+ * // Apply custom theme
+ * themeService.applyCustomTheme({
+ *   name: 'my-brand',
+ *   variables: {
+ *     '--color-brand': '#ff0000',
+ *     '--card-padding': '20px'
+ *   }
+ * });
+ * ```
+ */
+class ThemeService {
+    constructor() {
+        this.platformId = inject(PLATFORM_ID);
+        this.document = inject(DOCUMENT);
+        this.currentThemeSubject = new BehaviorSubject('day');
+        this.currentTheme$ = this.currentThemeSubject.asObservable();
+        this.customThemes = new Map();
+        this.rootElement = isPlatformBrowser(this.platformId)
+            ? this.document.documentElement
+            : null;
+        // Initialize theme from document if in browser
+        if (this.rootElement) {
+            const initialTheme = this.rootElement.getAttribute('data-theme') || 'day';
+            this.currentThemeSubject.next(initialTheme);
         }
-        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 the current active theme
+     */
+    getCurrentTheme() {
+        return this.currentThemeSubject.value;
     }
     /**
-     * Get animation class for a field based on its appearance state
+     * Set theme to a built-in preset
+     *
+     * @param preset - Built-in theme preset name
      */
-    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';
+    setTheme(preset) {
+        if (!this.rootElement) {
+            return;
         }
-        return '';
+        // Set data-theme attribute which triggers CSS variable changes
+        this.rootElement.setAttribute('data-theme', preset);
+        this.currentThemeSubject.next(preset);
     }
     /**
-     * Get animation class for an item based on its appearance state
+     * Apply a custom theme configuration
+     *
+     * @param config - Custom theme configuration
      */
-    getItemAnimationClass(itemId, index) {
-        const state = this.itemAnimationStates.get(itemId);
-        if (state === 'entering') {
-            return 'item-streaming';
-        }
-        if (state === 'entered') {
-            return 'item-entered';
+    applyCustomTheme(config) {
+        if (!this.rootElement) {
+            return;
         }
-        // New item - mark as entering
-        if (state === undefined || state === 'none') {
-            this.markItemEntering(itemId, index);
-            return 'item-streaming';
+        // Store custom theme
+        this.customThemes.set(config.name, config);
+        // Set data-theme to custom
+        this.rootElement.setAttribute('data-theme', 'custom');
+        // Apply CSS variable overrides
+        this.applyCSSVariables(config.variables);
+        this.currentThemeSubject.next(config.name);
+    }
+    /**
+     * Apply CSS variables to the document root
+     *
+     * @param variables - Object mapping CSS variable names to values
+     */
+    applyCSSVariables(variables) {
+        if (!this.rootElement) {
+            return;
         }
-        return '';
+        Object.entries(variables).forEach(([key, value]) => {
+            const varName = key.startsWith('--') ? key : `--${key}`;
+            this.rootElement.style.setProperty(varName, value);
+        });
     }
     /**
-     * Get stagger delay index for field animation
+     * Reset CSS variables (useful when switching themes)
      */
-    getFieldStaggerIndex(index) {
-        return Math.min(index, 15);
+    resetCSSVariables() {
+        if (!this.rootElement) {
+            return;
+        }
+        // Remove all custom CSS variables by cloning the root element's style
+        // In practice, we'll let the CSS cascade handle this when switching themes
+        const computedStyle = window.getComputedStyle(this.rootElement);
+        // Remove any custom properties that aren't in the default theme
+        // This is a simplified approach - in production you might want to track which vars were set
     }
     /**
-     * Get stagger delay index for item animation
+     * Get a custom theme configuration
+     *
+     * @param name - Theme name
+     * @returns Theme configuration or null if not found
      */
-    getItemStaggerIndex(index) {
-        return Math.min(index, 15);
+    getCustomTheme(name) {
+        return this.customThemes.get(name) ?? null;
     }
     /**
-     * Mark field as entering and schedule entered state
-     * Optimized: Batches change detection for better performance
+     * Register a custom theme (without applying it)
+     *
+     * @param config - Custom theme configuration
      */
-    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);
+    registerTheme(config) {
+        this.customThemes.set(config.name, config);
     }
     /**
-     * Batch change detection for field animation state updates
+     * Remove a custom theme
+     *
+     * @param name - Theme name to remove
+     * @returns True if theme was removed, false if not found
      */
-    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;
-        });
+    unregisterTheme(name) {
+        return this.customThemes.delete(name);
     }
     /**
-     * Mark item as entering and schedule entered state
-     * Optimized: Batches change detection for better performance
+     * Get all registered custom themes
+     *
+     * @returns Array of custom theme configurations
      */
-    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);
+    getCustomThemes() {
+        return Array.from(this.customThemes.values());
     }
     /**
-     * Batch change detection for item animation state updates
+     * Validate a theme configuration
+     *
+     * @param config - Theme configuration to validate
+     * @returns Validation result with errors if any
      */
-    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();
+    validateTheme(config) {
+        const errors = [];
+        if (!config.name || config.name.trim() === '') {
+            errors.push('Theme name is required');
+        }
+        if (!config.variables || Object.keys(config.variables).length === 0) {
+            errors.push('Theme must have at least one CSS variable');
+        }
+        // Validate CSS variable names
+        Object.keys(config.variables).forEach(key => {
+            if (!key.startsWith('--') && !key.match(/^[a-z-]+$/i)) {
+                errors.push(`Invalid CSS variable name: ${key}`);
             }
-            this.itemAnimationUpdateRafId = null;
         });
+        return {
+            valid: errors.length === 0,
+            errors
+        };
     }
-    /**
-     * Reset field animation states
-     */
-    resetFieldAnimations() {
-        this.fieldAnimationStates.clear();
-        this.fieldAnimationTimes.clear();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Light theme preset configuration
+ * Based on the day theme from the design system
+ */
+const lightTheme = {
+    name: 'day',
+    preset: true,
+    variables: {
+        '--background': '#ffffff',
+        '--foreground': '#1c1c1f',
+        '--muted': '#f4f4f6',
+        '--muted-foreground': '#555861',
+        '--card': 'color-mix(in srgb, var(--background) 99%, var(--surface-contrast-color) 1%)',
+        '--card-foreground': '#1c1c1f',
+        '--primary': '#FF7900',
+        '--primary-foreground': '#ffffff',
+        '--secondary': '#f5f5f5',
+        '--secondary-foreground': '#1a1a1a',
+        '--border': 'rgba(200, 200, 200, 0.5)',
+        '--ring': 'rgba(255, 121, 0, 0.4)'
+    }
+};
+
+/**
+ * Dark theme preset configuration
+ * Based on the night theme from the design system
+ */
+const darkTheme = {
+    name: 'night',
+    preset: true,
+    variables: {
+        '--background': '#0a0a0a',
+        '--foreground': '#ffffff',
+        '--muted': '#242424',
+        '--muted-foreground': '#aaaaaa',
+        '--card': 'color-mix(in srgb, var(--background) 99%, var(--surface-contrast-color) 1%)',
+        '--card-foreground': '#ffffff',
+        '--primary': '#FF7900',
+        '--primary-foreground': '#ffffff',
+        '--secondary': '#333333',
+        '--secondary-foreground': '#ffffff',
+        '--border': 'rgba(200, 200, 200, 0.3)',
+        '--ring': 'rgba(255, 121, 0, 0.6)'
+    }
+};
+
+/**
+ * High contrast theme preset for accessibility
+ * Provides maximum contrast for better visibility
+ */
+const highContrastTheme = {
+    name: 'high-contrast',
+    preset: true,
+    variables: {
+        '--background': '#ffffff',
+        '--foreground': '#000000',
+        '--muted': '#f0f0f0',
+        '--muted-foreground': '#000000',
+        '--card': '#ffffff',
+        '--card-foreground': '#000000',
+        '--primary': '#0066cc',
+        '--primary-foreground': '#ffffff',
+        '--secondary': '#e0e0e0',
+        '--secondary-foreground': '#000000',
+        '--border': '#000000',
+        '--ring': '#0066cc',
+        '--card-border': '2px solid #000000',
+        '--section-border': '2px solid #000000',
+        '--section-item-border': '2px solid #000000'
+    }
+};
+
+/**
+ * Theme Presets
+ *
+ * Exports all built-in theme presets for easy importing
+ */
+
+/**
+ * Theme Builder Utility
+ *
+ * Helper functions for building and modifying theme configurations
+ */
+/**
+ * Create a theme configuration from a base theme with overrides
+ *
+ * @param baseTheme - Base theme configuration
+ * @param overrides - Variable overrides to apply
+ * @returns New theme configuration with overrides applied
+ *
+ * @example
+ * ```typescript
+ * const customTheme = buildThemeFromBase(lightTheme, {
+ *   '--color-brand': '#ff0000',
+ *   '--card-padding': '24px'
+ * });
+ * ```
+ */
+function buildThemeFromBase(baseTheme, overrides) {
+    return {
+        ...baseTheme,
+        name: baseTheme.name + '-custom',
+        preset: false,
+        variables: {
+            ...baseTheme.variables,
+            ...overrides
+        }
+    };
+}
+/**
+ * Merge multiple theme configurations
+ * Later themes override earlier ones
+ *
+ * @param themes - Array of theme configurations to merge
+ * @returns Merged theme configuration
+ */
+function mergeThemes(...themes) {
+    if (themes.length === 0) {
+        throw new Error('At least one theme is required');
+    }
+    const firstTheme = themes[0];
+    if (!firstTheme) {
+        throw new Error('At least one theme is required');
+    }
+    const merged = {
+        name: firstTheme.name,
+        preset: false,
+        variables: {}
+    };
+    themes.forEach(theme => {
+        merged.variables = {
+            ...merged.variables,
+            ...theme.variables
+        };
+    });
+    return merged;
+}
+/**
+ * Create a theme with only specific CSS variables
+ * Useful for partial theme customization
+ *
+ * @param name - Theme name
+ * @param variables - CSS variables to include
+ * @returns Theme configuration with only specified variables
+ */
+function createPartialTheme(name, variables) {
+    return {
+        name,
+        preset: false,
+        variables
+    };
+}
+/**
+ * Validate CSS variable names
+ *
+ * @param variables - Object with CSS variable names as keys
+ * @returns Array of invalid variable names
+ */
+function validateCSSVariableNames(variables) {
+    const invalid = [];
+    Object.keys(variables).forEach(key => {
+        // CSS custom properties should start with --
+        if (!key.startsWith('--')) {
+            invalid.push(key);
+            return;
+        }
+        // Validate format: --property-name (kebab-case)
+        const withoutPrefix = key.substring(2);
+        if (!/^[a-z][a-z0-9-]*$/.test(withoutPrefix)) {
+            invalid.push(key);
+        }
+    });
+    return invalid;
+}
+/**
+ * Generate a theme from a color palette
+ * Automatically generates related CSS variables from base colors
+ *
+ * @param name - Theme name
+ * @param colors - Color palette object
+ * @returns Theme configuration with generated variables
+ *
+ * @example
+ * ```typescript
+ * const theme = generateThemeFromPalette('my-brand', {
+ *   primary: '#ff7900',
+ *   background: '#ffffff',
+ *   foreground: '#000000'
+ * });
+ * ```
+ */
+function generateThemeFromPalette(name, colors) {
+    const variables = {};
+    if (colors.primary) {
+        variables['--color-brand'] = colors.primary;
+        variables['--primary'] = colors.primary;
+        variables['--accent'] = colors.primary;
+    }
+    if (colors.background) {
+        variables['--background'] = colors.background;
+    }
+    if (colors.foreground) {
+        variables['--foreground'] = colors.foreground;
+        variables['--card-foreground'] = colors.foreground;
+    }
+    if (colors.muted) {
+        variables['--muted'] = colors.muted;
+    }
+    if (colors.border) {
+        variables['--border'] = colors.border;
+    }
+    if (colors.secondary) {
+        variables['--secondary'] = colors.secondary;
+    }
+    return {
+        name,
+        preset: false,
+        variables
+    };
+}
+
+/**
+ * Theme System
+ *
+ * Exports theme service, presets, and utilities
+ */
+
+/**
+ * Create a basic company card
+ *
+ * @param options - Company card options
+ * @returns AICardConfig for a company card
+ *
+ * @example
+ * ```typescript
+ * const card = createCompanyCard({
+ *   name: 'Acme Corp',
+ *   industry: 'Technology',
+ *   employees: '500+',
+ *   websiteUrl: 'https://acme.com'
+ * });
+ * ```
+ */
+function createCompanyCard(options) {
+    const { name, subtitle, industry, founded, employees, headquarters, revenue, growthRate, marketShare, websiteUrl, customSections = [], customActions = [] } = options;
+    const sections = [
+        {
+            id: 'company-overview',
+            title: 'Company Overview',
+            type: 'info',
+            fields: [
+                ...(industry ? [{ id: 'industry', label: 'Industry', value: industry }] : []),
+                ...(founded ? [{ id: 'founded', label: 'Founded', value: founded }] : []),
+                ...(employees ? [{ id: 'employees', label: 'Employees', value: employees }] : []),
+                ...(headquarters ? [{ id: 'headquarters', label: 'Headquarters', value: headquarters }] : []),
+                ...(revenue ? [{ id: 'revenue', label: 'Annual Revenue', value: revenue }] : [])
+            ].filter(Boolean)
+        },
+        ...(growthRate || marketShare ? [{
+                id: 'key-metrics',
+                title: 'Key Metrics',
+                type: 'analytics',
+                fields: [
+                    ...(growthRate ? [{
+                            id: 'growth-rate',
+                            label: 'Growth Rate',
+                            value: `${growthRate}% YoY`,
+                            percentage: growthRate,
+                            performance: growthRate > 20 ? 'excellent' : growthRate > 10 ? 'good' : 'fair',
+                            trend: 'up'
+                        }] : []),
+                    ...(marketShare ? [{
+                            id: 'market-share',
+                            label: 'Market Share',
+                            value: `${marketShare}%`,
+                            percentage: marketShare,
+                            performance: marketShare > 15 ? 'excellent' : marketShare > 10 ? 'good' : 'fair',
+                            trend: 'up'
+                        }] : [])
+                ]
+            }] : []),
+        ...customSections
+    ].filter(Boolean);
+    const actions = [
+        ...(websiteUrl ? [{
+                id: 'view-website',
+                label: 'View Website',
+                type: 'website',
+                variant: 'primary',
+                icon: 'globe',
+                url: websiteUrl
+            }] : []),
+        ...customActions
+    ];
+    return {
+        id: `company-${name.toLowerCase().replace(/\s+/g, '-')}`,
+        cardTitle: name,
+        cardSubtitle: subtitle,
+        cardType: 'company',
+        sections: sections.filter(s => s.fields && s.fields.length > 0),
+        actions: actions.length > 0 ? actions : undefined
+    };
+}
+/**
+ * Create an enhanced company card with more sections
+ */
+function createEnhancedCompanyCard(options) {
+    const baseCard = createCompanyCard(options);
+    const { financials = [], products = [] } = options;
+    // Add financials section if provided
+    if (financials.length > 0) {
+        baseCard.sections.push({
+            id: 'financials',
+            title: 'Financials',
+            type: 'financials',
+            fields: financials.map((f, i) => ({
+                id: `financial-${i}`,
+                label: f.label,
+                value: f.value
+            }))
+        });
+    }
+    // Add products section if provided
+    if (products.length > 0) {
+        baseCard.sections.push({
+            id: 'products',
+            title: 'Products & Services',
+            type: 'list',
+            items: products.map((p, i) => ({
+                id: `product-${i}`,
+                title: p.name,
+                description: p.description
+            }))
+        });
     }
+    return baseCard;
+}
+
+/**
+ * Create a basic contact card
+ *
+ * @param options - Contact card options
+ * @returns AICardConfig for a contact card
+ *
+ * @example
+ * ```typescript
+ * const card = createContactCard({
+ *   name: 'John Doe',
+ *   jobTitle: 'Sales Director',
+ *   email: 'john@example.com',
+ *   phone: '+1 555 1234'
+ * });
+ * ```
+ */
+function createContactCard(options) {
+    const { name, jobTitle, company, location, experience, email, phone, linkedIn, metrics = [], customSections = [], customActions = [] } = options;
+    const sections = [
+        {
+            id: 'professional-profile',
+            title: 'Professional Profile',
+            type: 'info',
+            fields: [
+                ...(jobTitle ? [{ id: 'job-title', label: 'Job Title', value: jobTitle }] : []),
+                ...(company ? [{ id: 'company', label: 'Company', value: company }] : []),
+                ...(location ? [{ id: 'location', label: 'Location', value: location }] : []),
+                ...(experience ? [{ id: 'experience', label: 'Experience', value: experience }] : []),
+                ...(email ? [{ id: 'email', label: 'Email', value: email }] : []),
+                ...(phone ? [{ id: 'phone', label: 'Phone', value: phone }] : [])
+            ].filter(Boolean)
+        },
+        ...(metrics.length > 0 ? [{
+                id: 'performance-metrics',
+                title: 'Performance Metrics',
+                type: 'analytics',
+                fields: metrics.map((m, i) => ({
+                    id: `metric-${i}`,
+                    label: m.label,
+                    value: m.value,
+                    percentage: m.percentage,
+                    trend: m.trend || 'up'
+                }))
+            }] : []),
+        ...customSections
+    ].filter(Boolean);
+    const actions = [
+        ...(email ? [{
+                id: 'send-email',
+                label: 'Send Email',
+                type: 'mail',
+                variant: 'primary',
+                icon: 'mail',
+                email: {
+                    to: email,
+                    subject: `Hello ${name.split(' ')[0]}`,
+                    body: `Dear ${name},\n\n`
+                }
+            }] : []),
+        ...(linkedIn ? [{
+                id: 'linkedin',
+                label: 'LinkedIn',
+                type: 'website',
+                variant: 'secondary',
+                icon: 'linkedin',
+                url: linkedIn
+            }] : []),
+        ...customActions
+    ];
+    return {
+        id: `contact-${name.toLowerCase().replace(/\s+/g, '-')}`,
+        cardTitle: name,
+        cardSubtitle: jobTitle || company,
+        cardType: 'contact',
+        sections: sections.filter(s => s.fields && s.fields.length > 0),
+        actions: actions.length > 0 ? actions : undefined
+    };
+}
+
+/**
+ * Create an analytics dashboard card
+ *
+ * @param options - Analytics dashboard options
+ * @returns AICardConfig for an analytics dashboard
+ *
+ * @example
+ * ```typescript
+ * const card = createAnalyticsDashboard({
+ *   title: 'Sales Performance',
+ *   kpis: [
+ *     { label: 'Revenue', value: '$1.2M', percentage: 105, trend: 'up' },
+ *     { label: 'Conversion Rate', value: '32%', percentage: 32, trend: 'up' }
+ *   ]
+ * });
+ * ```
+ */
+function createAnalyticsDashboard(options) {
+    const { title, subtitle, dashboardType, dataSource, updateFrequency, timeRange, kpis = [], chartData, dashboardUrl, customSections = [], customActions = [] } = options;
+    const sections = [
+        ...(dashboardType || dataSource || updateFrequency || timeRange ? [{
+                id: 'analytics-overview',
+                title: 'Analytics Overview',
+                type: 'info',
+                fields: [
+                    ...(dashboardType ? [{ id: 'dashboard-type', label: 'Dashboard Type', value: dashboardType }] : []),
+                    ...(dataSource ? [{ id: 'data-source', label: 'Data Source', value: dataSource }] : []),
+                    ...(updateFrequency ? [{ id: 'update-frequency', label: 'Update Frequency', value: updateFrequency }] : []),
+                    ...(timeRange ? [{ id: 'time-range', label: 'Time Range', value: timeRange }] : [])
+                ].filter(Boolean)
+            }] : []),
+        ...(kpis.length > 0 ? [{
+                id: 'kpis',
+                title: 'Key Performance Indicators',
+                type: 'analytics',
+                fields: kpis.map((kpi, i) => ({
+                    id: `kpi-${i}`,
+                    label: kpi.label,
+                    value: kpi.value,
+                    percentage: kpi.percentage,
+                    performance: kpi.performance || (kpi.percentage && kpi.percentage > 100 ? 'excellent' : 'good'),
+                    trend: kpi.trend || 'up'
+                }))
+            }] : []),
+        ...(chartData ? [{
+                id: 'chart',
+                title: 'Performance Chart',
+                type: 'chart',
+                chartType: 'bar',
+                chartData: {
+                    labels: chartData.labels,
+                    datasets: chartData.datasets.map(ds => ({
+                        label: ds.label,
+                        data: ds.data,
+                        backgroundColor: 'rgba(255, 121, 0, 0.6)',
+                        borderColor: 'rgba(255, 121, 0, 1)',
+                        borderWidth: 2
+                    }))
+                }
+            }] : []),
+        ...customSections
+    ].filter(Boolean);
+    const actions = [
+        ...(dashboardUrl ? [{
+                id: 'view-dashboard',
+                label: 'View Full Dashboard',
+                type: 'website',
+                variant: 'primary',
+                icon: 'bar-chart',
+                url: dashboardUrl
+            }] : []),
+        ...customActions
+    ];
+    return {
+        id: `analytics-${title.toLowerCase().replace(/\s+/g, '-')}`,
+        cardTitle: title,
+        cardSubtitle: subtitle,
+        cardType: 'analytics',
+        sections: sections.filter(s => (s.fields && s.fields.length > 0) || s.chartData),
+        actions: actions.length > 0 ? actions : undefined
+    };
+}
+
+/**
+ * Preset Factory
+ *
+ * Centralized factory for creating card presets with common configurations.
+ *
+ * @example
+ * ```typescript
+ * import { PresetFactory } from 'osi-cards-lib';
+ *
+ * // Create a company card
+ * const companyCard = PresetFactory.createCompany({
+ *   name: 'Acme Corp',
+ *   industry: 'Technology'
+ * });
+ *
+ * // Create a contact card
+ * const contactCard = PresetFactory.createContact({
+ *   name: 'John Doe',
+ *   email: 'john@example.com'
+ * });
+ * ```
+ */
+class PresetFactory {
     /**
-     * Reset item animation states
+     * Create a company card
+     *
+     * @param options - Company card options
+     * @returns Company card configuration
      */
-    resetItemAnimations() {
-        this.itemAnimationStates.clear();
-        this.itemAnimationTimes.clear();
+    static createCompany(options) {
+        return createCompanyCard(options);
     }
     /**
-     * Get field ID for tracking
+     * Create an enhanced company card with additional sections
+     *
+     * @param options - Enhanced company card options
+     * @returns Enhanced company card configuration
      */
-    getFieldId(field, index) {
-        return field.id || `field-${index}-${field.label || ''}`;
+    static createEnhancedCompany(options) {
+        return createEnhancedCompanyCard(options);
     }
     /**
-     * Get item ID for tracking
+     * Create a contact card
+     *
+     * @param options - Contact card options
+     * @returns Contact card configuration
      */
-    getItemId(item, index) {
-        return item.id || `item-${index}-${item.title || ''}`;
+    static createContact(options) {
+        return createContactCard(options);
     }
     /**
-     * Check if section has fields
-     * Public getter for template access
+     * Create an analytics dashboard card
+     *
+     * @param options - Analytics dashboard options
+     * @returns Analytics dashboard configuration
      */
-    get hasFields() {
-        return this.getFields().length > 0;
+    static createAnalytics(options) {
+        return createAnalyticsDashboard(options);
     }
     /**
-     * Check if section has items
-     * Public getter for template access
+     * Create a custom card from a template
+     *
+     * @param template - Template function that returns AICardConfig
+     * @returns Card configuration
      */
-    get hasItems() {
-        return this.getItems().length > 0;
+    static createCustom(template, config) {
+        return template(config);
     }
-    /**
-     * Emit field interaction event (standardized pattern)
-     */
-    emitFieldInteraction(field, metadata) {
-        this.fieldInteraction.emit({
-            field,
-            metadata: {
-                sectionId: this.section.id,
-                sectionTitle: this.section.title,
-                ...metadata
-            }
-        });
+}
+/**
+ * Convenience factory functions (alternative to PresetFactory class)
+ */
+/**
+ * Create a company card (convenience function)
+ */
+function createCompanyPreset(options) {
+    return PresetFactory.createCompany(options);
+}
+/**
+ * Create a contact card (convenience function)
+ */
+function createContactPreset(options) {
+    return PresetFactory.createContact(options);
+}
+/**
+ * Create an analytics dashboard (convenience function)
+ */
+function createAnalyticsPreset(options) {
+    return PresetFactory.createAnalytics(options);
+}
+
+/**
+ * Card Presets
+ *
+ * Factory functions and presets for common card configurations
+ */
+
+/**
+ * Wrapper component for dynamically loading and rendering plugin section components
+ */
+class PluginSectionWrapperComponent {
+    constructor() {
+        this.sectionEvent = new EventEmitter();
+        this.pluginRegistry = inject(SectionPluginRegistry);
+        this.viewContainer = inject(ViewContainerRef);
+        this.cdr = inject(ChangeDetectorRef);
+        this.destroy$ = new Subject();
+        this.componentRef = null;
     }
-    /**
-     * Emit item interaction event (standardized pattern)
-     */
-    emitItemInteraction(item, metadata) {
-        this.itemInteraction.emit({
-            item,
-            metadata: {
-                sectionId: this.section.id,
-                sectionTitle: this.section.title,
-                ...metadata
-            }
-        });
+    ngOnInit() {
+        this.loadPlugin();
     }
-    /**
-     * 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 || ''}`;
+    ngAfterViewInit() {
+        // Ensure plugin is loaded after view init
+        if (!this.componentRef) {
+            this.loadPlugin();
+        }
     }
-    /**
-     * 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 || ''}`;
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        if (this.componentRef) {
+            this.componentRef.destroy();
+        }
     }
-    // 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;
+    loadPlugin() {
+        if (!this.section) {
+            return;
         }
-        // Try text (for text-reference fields)
-        if ('text' in field && field.text !== undefined && field.text !== null) {
-            return field.text;
+        const componentType = this.pluginRegistry.getComponentForSection(this.section);
+        if (!componentType) {
+            console.warn(`No plugin registered for section type: ${this.section.type}`);
+            return;
         }
-        // Try quote (for quotation fields)
-        if ('quote' in field && field.quote !== undefined && field.quote !== null) {
-            return field.quote;
+        // Clear existing component
+        if (this.componentRef) {
+            this.componentRef.destroy();
+        }
+        // Create plugin component
+        this.componentRef = this.viewContainer.createComponent(componentType);
+        this.componentRef.instance.section = this.section;
+        // Wire up event emitters
+        if (this.componentRef.instance.fieldInteraction) {
+            this.componentRef.instance.fieldInteraction
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(event => {
+                this.sectionEvent.emit({
+                    type: 'field',
+                    section: this.section,
+                    field: event.field,
+                    metadata: event.metadata
+                });
+            });
         }
-        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...';
+        if (this.componentRef.instance.itemInteraction) {
+            this.componentRef.instance.itemInteraction
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(event => {
+                this.sectionEvent.emit({
+                    type: 'item',
+                    section: this.section,
+                    item: event.item,
+                    metadata: event.metadata
+                });
+            });
+        }
+        this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: BaseSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: BaseSectionComponent, isStandalone: true, selector: "ng-component", inputs: { section: "section" }, outputs: { fieldInteraction: "fieldInteraction", itemInteraction: "itemInteraction" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PluginSectionWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: PluginSectionWrapperComponent, isStandalone: true, selector: "app-plugin-section-wrapper", inputs: { section: "section" }, outputs: { sectionEvent: "sectionEvent" }, ngImport: i0, template: `<!-- Plugin component rendered dynamically -->`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: BaseSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PluginSectionWrapperComponent, decorators: [{
             type: Component,
             args: [{
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    selector: 'app-plugin-section-wrapper',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `<!-- Plugin component rendered dynamically -->`
                 }]
         }], propDecorators: { section: [{
                 type: Input,
                 args: [{ required: true }]
-            }], fieldInteraction: [{
-                type: Output
-            }], itemInteraction: [{
+            }], sectionEvent: [{
                 type: Output
             }] } });
 
@@ -1874,11 +3757,11 @@ class ProductSectionComponent extends BaseSectionComponent {
             return orderA - orderB;
         });
         return orderedKeys.map((key) => {
-            const config = this.categoryConfig[key] ?? this.categoryConfig['default'];
+            const config = this.categoryConfig[key] ?? this.categoryConfig['default'] ?? { title: key, icon: 'circle' };
             return {
                 key,
-                title: config.title,
-                icon: config.icon,
+                title: config.title || key,
+                icon: config.icon || 'circle',
                 fields: groups.get(key) ?? []
             };
         });
@@ -2174,7 +4057,7 @@ class ChartSectionComponent extends BaseSectionComponent {
         }
     }
     getColor(field, index) {
-        return field.color ?? this.palette[index % this.palette.length];
+        return field.color ?? (this.palette[index % this.palette.length] || '#FF7900');
     }
     /**
      * Get display value, hiding "Streaming…" placeholder text
@@ -2238,15 +4121,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             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: "20.3.14", ngImport: i0, type: FallbackSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", 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: "20.3.14", 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();
@@ -2350,7 +4224,7 @@ class BrandColorsSectionComponent extends BaseSectionComponent {
     }
     hexToRgb(hex) {
         const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-        if (result) {
+        if (result && result[1] && result[2] && result[3]) {
             const r = parseInt(result[1], 16);
             const g = parseInt(result[2], 16);
             const b = parseInt(result[3], 16);
@@ -2399,6 +4273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
 class SectionRendererComponent {
     constructor() {
         this.sectionEvent = new EventEmitter();
+        this.pluginRegistry = inject(SectionPluginRegistry);
     }
     // Removed @HostBinding - will be set in template instead to avoid setAttribute errors
     get sectionTypeAttribute() {
@@ -2425,7 +4300,35 @@ class SectionRendererComponent {
             return null;
         }
     }
+    /**
+     * Get the component type for the current section, checking plugins first
+     */
+    get sectionComponent() {
+        if (!this.section) {
+            return null;
+        }
+        // Check if a plugin is registered for this section type
+        const pluginComponent = this.pluginRegistry.getComponentForSection(this.section);
+        if (pluginComponent) {
+            return pluginComponent;
+        }
+        // Fall back to built-in sections (handled by resolvedType in template)
+        return null;
+    }
+    /**
+     * Check if current section uses a plugin
+     */
+    get usesPlugin() {
+        if (!this.section?.type) {
+            return false;
+        }
+        return this.pluginRegistry.hasPlugin(this.section.type.toLowerCase());
+    }
     get resolvedType() {
+        // If a plugin is registered, don't resolve type (plugin handles it)
+        if (this.usesPlugin) {
+            return this.section.type?.toLowerCase() || 'unknown';
+        }
         if (!this.section) {
             return 'unknown';
         }
@@ -2511,13 +4414,20 @@ class SectionRendererComponent {
             metadata
         });
     }
+    /**
+     * Handle events from plugin components
+     */
+    onPluginSectionEvent(event) {
+        this.sectionEvent.emit(event);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SectionRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: SectionRendererComponent, isStandalone: true, selector: "app-section-renderer", inputs: { section: "section" }, outputs: { sectionEvent: "sectionEvent" }, ngImport: i0, template: "<!-- Plugin components are rendered dynamically via wrapper component -->\n<app-plugin-section-wrapper\n  *ngIf=\"usesPlugin\"\n  [section]=\"section\"\n  (sectionEvent)=\"onPluginSectionEvent($event)\">\n</app-plugin-section-wrapper>\n\n<!-- Built-in sections rendered via switch statement -->\n<ng-container *ngIf=\"!usesPlugin\" [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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: PluginSectionWrapperComponent, selector: "app-plugin-section-wrapper", inputs: ["section"], outputs: ["sectionEvent"] }, { 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: "20.3.14", ngImport: i0, type: SectionRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-section-renderer', standalone: true, imports: [
                         CommonModule,
+                        PluginSectionWrapperComponent,
                         InfoSectionComponent,
                         AnalyticsSectionComponent,
                         FinancialsSectionComponent,
@@ -2534,7 +4444,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Plugin components are rendered dynamically via wrapper component -->\n<app-plugin-section-wrapper\n  *ngIf=\"usesPlugin\"\n  [section]=\"section\"\n  (sectionEvent)=\"onPluginSectionEvent($event)\">\n</app-plugin-section-wrapper>\n\n<!-- Built-in sections rendered via switch statement -->\n<ng-container *ngIf=\"!usesPlugin\" [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 }]
@@ -2870,6 +4780,8 @@ class AICardRendererComponent {
     constructor() {
         this.el = inject(ElementRef);
         this.cdr = inject(ChangeDetectorRef);
+        this.injector = inject(Injector);
+        this.platformId = inject(PLATFORM_ID);
         // Expose Math for template
         this.Math = Math;
         this.previousSectionsHash = '';
@@ -3044,6 +4956,10 @@ class AICardRendererComponent {
         return this._changeType;
     }
     ngOnInit() {
+        // Validate animations provider in development mode
+        if (isDevMode() && isPlatformBrowser(this.platformId)) {
+            this.validateAnimationsProvider();
+        }
         // Initialize particles
         this.initializeParticles();
         // Start message rotation
@@ -3149,13 +5065,17 @@ class AICardRendererComponent {
         }));
     }
     startMessageRotation() {
-        this.currentMessage = this.funnyMessages[0];
+        if (this.funnyMessages.length === 0) {
+            this.currentMessage = 'Loading...';
+            return;
+        }
+        this.currentMessage = this.funnyMessages[0] || 'Loading...';
         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.currentMessage = this.funnyMessages[this.currentMessageIndex] || 'Loading...';
             this.cdr.markForCheck();
         });
     }
@@ -3706,6 +5626,33 @@ class AICardRendererComponent {
         this.normalizedSectionCache = new WeakMap();
         this.cdr.markForCheck();
     }
+    /**
+     * Validates that animation providers are configured.
+     * Warns in development mode if animations are not available.
+     */
+    validateAnimationsProvider() {
+        try {
+            // Try to inject AnimationBuilder - if animations are not provided, this will throw
+            const animationBuilder = this.injector.get(AnimationBuilder, null, { optional: true });
+            if (!animationBuilder) {
+                console.warn('⚠️ OSI Cards Library: Animation providers may not be configured.\n' +
+                    'The library requires animation providers to function correctly.\n' +
+                    'Please add provideOSICards() to your app.config.ts providers array:\n\n' +
+                    '  import { provideOSICards } from \'osi-cards-lib\';\n' +
+                    '  export const appConfig: ApplicationConfig = {\n' +
+                    '    providers: [provideOSICards(), ...]\n' +
+                    '  };\n\n' +
+                    'See https://github.com/Inutilepat83/OSI-Cards for more information.');
+            }
+        }
+        catch (error) {
+            // AnimationBuilder injection failed - likely no animations provider
+            console.warn('⚠️ OSI Cards Library: Animation providers are not configured.\n' +
+                'The library requires animation providers for proper functionality.\n' +
+                'Please add provideOSICards() to your app.config.ts providers array.\n' +
+                'See documentation for setup instructions.');
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AICardRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", 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', [
@@ -3854,6 +5801,346 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Card Header Component
+ *
+ * Composable component for rendering card header with title, subtitle, and optional actions.
+ * Can be used independently or as part of the full card renderer.
+ *
+ * @example
+ * ```html
+ * <app-card-header
+ *   [title]="card.cardTitle"
+ *   [subtitle]="card.cardSubtitle"
+ *   [showFullscreenButton]="true"
+ *   [isFullscreen]="false"
+ *   (fullscreenToggle)="onFullscreenToggle($event)">
+ * </app-card-header>
+ * ```
+ */
+class CardHeaderComponent {
+    constructor() {
+        /** Whether to show fullscreen toggle button */
+        this.showFullscreenButton = false;
+        /** Current fullscreen state */
+        this.isFullscreen = false;
+        /** Emitted when fullscreen button is clicked */
+        this.fullscreenToggle = new EventEmitter();
+    }
+    onFullscreenClick() {
+        this.fullscreenToggle.emit(!this.isFullscreen);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: CardHeaderComponent, isStandalone: true, selector: "app-card-header", inputs: { title: "title", subtitle: "subtitle", showFullscreenButton: "showFullscreenButton", isFullscreen: "isFullscreen" }, outputs: { fullscreenToggle: "fullscreenToggle" }, ngImport: i0, template: `
+    <div class="card-header" *ngIf="title">
+      <div class="flex items-center justify-between mb-4">
+        <h1 class="text-2xl font-bold text-foreground">
+          {{ title }}
+        </h1>
+        <button
+          *ngIf="showFullscreenButton"
+          type="button"
+          class="ai-card-fullscreen-btn"
+          [attr.aria-label]="isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'"
+          (click)="onFullscreenClick()">
+          <lucide-icon 
+            [name]="isFullscreen ? 'minimize-2' : 'maximize-2'" 
+            [size]="16" 
+            aria-hidden="true">
+          </lucide-icon>
+        </button>
+      </div>
+      
+      <p *ngIf="subtitle" class="ai-card-subtitle">
+        {{ subtitle }}
+      </p>
+    </div>
+  `, isInline: true, styles: [".card-header{width:100%}.ai-card-fullscreen-btn{padding:8px;border-radius:6px;background:transparent;border:1px solid transparent;cursor:pointer;color:var(--card-text-secondary);transition:all .2s ease;display:flex;align-items:center;justify-content:center}.ai-card-fullscreen-btn:hover{background:var(--hover-bg, rgba(255, 121, 0, .1));border-color:var(--color-brand);color:var(--color-brand)}.ai-card-subtitle{font-size:.875rem;color:var(--card-text-secondary, var(--muted-foreground));margin:0 0 1rem}\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: "20.3.14", ngImport: i0, type: CardHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-card-header', standalone: true, imports: [CommonModule, LucideIconsModule], template: `
+    <div class="card-header" *ngIf="title">
+      <div class="flex items-center justify-between mb-4">
+        <h1 class="text-2xl font-bold text-foreground">
+          {{ title }}
+        </h1>
+        <button
+          *ngIf="showFullscreenButton"
+          type="button"
+          class="ai-card-fullscreen-btn"
+          [attr.aria-label]="isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'"
+          (click)="onFullscreenClick()">
+          <lucide-icon 
+            [name]="isFullscreen ? 'minimize-2' : 'maximize-2'" 
+            [size]="16" 
+            aria-hidden="true">
+          </lucide-icon>
+        </button>
+      </div>
+      
+      <p *ngIf="subtitle" class="ai-card-subtitle">
+        {{ subtitle }}
+      </p>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".card-header{width:100%}.ai-card-fullscreen-btn{padding:8px;border-radius:6px;background:transparent;border:1px solid transparent;cursor:pointer;color:var(--card-text-secondary);transition:all .2s ease;display:flex;align-items:center;justify-content:center}.ai-card-fullscreen-btn:hover{background:var(--hover-bg, rgba(255, 121, 0, .1));border-color:var(--color-brand);color:var(--color-brand)}.ai-card-subtitle{font-size:.875rem;color:var(--card-text-secondary, var(--muted-foreground));margin:0 0 1rem}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], showFullscreenButton: [{
+                type: Input
+            }], isFullscreen: [{
+                type: Input
+            }], fullscreenToggle: [{
+                type: Output
+            }] } });
+
+/**
+ * Card Body Component
+ *
+ * Composable component for rendering card body with sections in a masonry grid layout.
+ * Wraps MasonryGridComponent for easier composition.
+ *
+ * @example
+ * ```html
+ * <app-card-body
+ *   [sections]="card.sections"
+ *   [gap]="12"
+ *   [minColumnWidth]="280"
+ *   (sectionEvent)="onSectionEvent($event)"
+ *   (layoutChange)="onLayoutChange($event)">
+ * </app-card-body>
+ * ```
+ */
+class CardBodyComponent {
+    constructor() {
+        /** Sections to render */
+        this.sections = [];
+        /** Gap between grid items in pixels */
+        this.gap = 12;
+        /** Minimum column width in pixels */
+        this.minColumnWidth = 280;
+        /** Emitted when a section event occurs */
+        this.sectionEvent = new EventEmitter();
+        /** Emitted when layout changes */
+        this.layoutChange = new EventEmitter();
+    }
+    onSectionEvent(event) {
+        this.sectionEvent.emit(event);
+    }
+    onLayoutChange(info) {
+        this.layoutChange.emit(info);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CardBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: CardBodyComponent, isStandalone: true, selector: "app-card-body", inputs: { sections: "sections", gap: "gap", minColumnWidth: "minColumnWidth" }, outputs: { sectionEvent: "sectionEvent", layoutChange: "layoutChange" }, ngImport: i0, template: `
+    <app-masonry-grid
+      *ngIf="sections && sections.length > 0"
+      [sections]="sections"
+      [gap]="gap"
+      [minColumnWidth]="minColumnWidth"
+      class="w-full"
+      (sectionEvent)="onSectionEvent($event)"
+      (layoutChange)="onLayoutChange($event)">
+    </app-masonry-grid>
+    
+    <ng-content></ng-content>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MasonryGridComponent, selector: "app-masonry-grid", inputs: ["sections", "gap", "minColumnWidth", "maxColumns"], outputs: ["sectionEvent", "layoutChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CardBodyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-card-body',
+                    standalone: true,
+                    imports: [CommonModule, MasonryGridComponent],
+                    template: `
+    <app-masonry-grid
+      *ngIf="sections && sections.length > 0"
+      [sections]="sections"
+      [gap]="gap"
+      [minColumnWidth]="minColumnWidth"
+      class="w-full"
+      (sectionEvent)="onSectionEvent($event)"
+      (layoutChange)="onLayoutChange($event)">
+    </app-masonry-grid>
+    
+    <ng-content></ng-content>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { sections: [{
+                type: Input
+            }], gap: [{
+                type: Input
+            }], minColumnWidth: [{
+                type: Input
+            }], sectionEvent: [{
+                type: Output
+            }], layoutChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Card Footer Component
+ *
+ * Composable component for rendering card footer with actions and optional signature.
+ * Can be used independently or as part of the full card renderer.
+ *
+ * @example
+ * ```html
+ * <app-card-footer
+ *   [actions]="card.actions"
+ *   [showSignature]="true"
+ *   (actionClick)="onActionClick($event)">
+ * </app-card-footer>
+ * ```
+ */
+class CardFooterComponent {
+    constructor() {
+        /** Actions to display */
+        this.actions = [];
+        /** Whether to show the signature */
+        this.showSignature = true;
+        /** Signature text to display */
+        this.signatureText = 'Powered by Orange Sales Intelligence';
+        /** Emitted when an action is clicked */
+        this.actionClick = new EventEmitter();
+        this.iconService = inject(IconService);
+    }
+    get hasActions() {
+        return this.actions && this.actions.length > 0;
+    }
+    trackAction(index, action) {
+        return action.id || `${action.type}-${index}`;
+    }
+    getActionButtonClasses(action) {
+        return {
+            'action-button--primary': action.variant === 'primary',
+            'action-button--secondary': action.variant === 'secondary' || !action.variant
+        };
+    }
+    getActionIconNameForDisplay(action) {
+        if (!action.icon) {
+            return null;
+        }
+        // If it's a lucide icon name, return it
+        if (typeof action.icon === 'string' && !action.icon.startsWith('http') && !action.icon.match(/[\u{1F300}-\u{1F9FF}]/u)) {
+            return action.icon;
+        }
+        // If it's a URL or emoji, return null (handled by other icons)
+        return null;
+    }
+    hasImageIcon(action) {
+        return !!action.icon && typeof action.icon === 'string' && action.icon.startsWith('http');
+    }
+    hasTextIcon(action) {
+        if (!action.icon || typeof action.icon !== 'string' || action.icon.startsWith('http')) {
+            return false;
+        }
+        const emojiMatch = action.icon.match(/[\u{1F300}-\u{1F9FF}]/u);
+        return !!emojiMatch || action.icon.length <= 2;
+    }
+    onActionClick(action) {
+        this.actionClick.emit(action);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: CardFooterComponent, isStandalone: true, selector: "app-card-footer", inputs: { actions: "actions", showSignature: "showSignature", signatureText: "signatureText" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: `
+    <div class="card-footer" *ngIf="hasActions || showSignature">
+      <!-- Action Buttons -->
+      <div *ngIf="hasActions" class="card-actions">
+        <div class="flex flex-wrap items-center gap-3" style="margin-left: 4px; margin-right: 4px;">
+          <button
+            *ngFor="let action of actions; trackBy: trackAction"
+            type="button"
+            class="action-button"
+            [ngClass]="getActionButtonClasses(action)"
+            [style.border-radius]="'var(--section-card-border-radius, 10px)'"
+            (click)="onActionClick(action)"
+            (keydown.enter)="onActionClick(action)"
+            (keydown.space)="$event.preventDefault(); onActionClick(action)">
+            <!-- Lucide icon -->
+            <lucide-icon 
+              *ngIf="getActionIconNameForDisplay(action) as iconName"
+              [name]="iconName"
+              [size]="16"
+              aria-hidden="true">
+            </lucide-icon>
+            <!-- Image icon -->
+            <img 
+              *ngIf="hasImageIcon(action)"
+              [src]="action.icon"
+              [alt]="action.label + ' icon'"
+              style="width: 16px; height: 16px;"
+              aria-hidden="true"
+            />
+            <!-- Text icon -->
+            <span *ngIf="hasTextIcon(action)" aria-hidden="true">{{ action.icon }}</span>
+            <span>{{ action.label }}</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- Signature -->
+      <div *ngIf="showSignature" class="card-signature">
+        {{ signatureText }}
+      </div>
+    </div>
+  `, isInline: true, styles: [".card-footer{margin-top:auto;padding-top:var(--section-card-gap, 12px);padding-bottom:16px}.card-actions{margin-bottom:8px}.action-button{padding:10px 20px;font-size:.875rem;transition:all .2s;display:flex;align-items:center;gap:8px;cursor:pointer;border:1px solid transparent}.action-button--primary{background:var(--primary, #ff7900);color:var(--primary-foreground, #ffffff)}.action-button--primary:hover{background:color-mix(in srgb,var(--primary) 85%,transparent);border-color:var(--primary)}.action-button--secondary{background:var(--secondary, #f5f5f5);color:var(--secondary-foreground, #1a1a1a)}.action-button--secondary:hover{background:color-mix(in srgb,var(--secondary) 90%,transparent);border-color:var(--secondary)}.card-signature{font-size:.75rem;color:var(--muted-foreground, rgba(128, 128, 128, .6));text-align:center;margin-top:8px}\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: "20.3.14", ngImport: i0, type: CardFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-card-footer', standalone: true, imports: [CommonModule, LucideIconsModule], template: `
+    <div class="card-footer" *ngIf="hasActions || showSignature">
+      <!-- Action Buttons -->
+      <div *ngIf="hasActions" class="card-actions">
+        <div class="flex flex-wrap items-center gap-3" style="margin-left: 4px; margin-right: 4px;">
+          <button
+            *ngFor="let action of actions; trackBy: trackAction"
+            type="button"
+            class="action-button"
+            [ngClass]="getActionButtonClasses(action)"
+            [style.border-radius]="'var(--section-card-border-radius, 10px)'"
+            (click)="onActionClick(action)"
+            (keydown.enter)="onActionClick(action)"
+            (keydown.space)="$event.preventDefault(); onActionClick(action)">
+            <!-- Lucide icon -->
+            <lucide-icon 
+              *ngIf="getActionIconNameForDisplay(action) as iconName"
+              [name]="iconName"
+              [size]="16"
+              aria-hidden="true">
+            </lucide-icon>
+            <!-- Image icon -->
+            <img 
+              *ngIf="hasImageIcon(action)"
+              [src]="action.icon"
+              [alt]="action.label + ' icon'"
+              style="width: 16px; height: 16px;"
+              aria-hidden="true"
+            />
+            <!-- Text icon -->
+            <span *ngIf="hasTextIcon(action)" aria-hidden="true">{{ action.icon }}</span>
+            <span>{{ action.label }}</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- Signature -->
+      <div *ngIf="showSignature" class="card-signature">
+        {{ signatureText }}
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".card-footer{margin-top:auto;padding-top:var(--section-card-gap, 12px);padding-bottom:16px}.card-actions{margin-bottom:8px}.action-button{padding:10px 20px;font-size:.875rem;transition:all .2s;display:flex;align-items:center;gap:8px;cursor:pointer;border:1px solid transparent}.action-button--primary{background:var(--primary, #ff7900);color:var(--primary-foreground, #ffffff)}.action-button--primary:hover{background:color-mix(in srgb,var(--primary) 85%,transparent);border-color:var(--primary)}.action-button--secondary{background:var(--secondary, #f5f5f5);color:var(--secondary-foreground, #1a1a1a)}.action-button--secondary:hover{background:color-mix(in srgb,var(--secondary) 90%,transparent);border-color:var(--secondary)}.card-signature{font-size:.75rem;color:var(--muted-foreground, rgba(128, 128, 128, .6));text-align:center;margin-top:8px}\n"] }]
+        }], propDecorators: { actions: [{
+                type: Input
+            }], showSignature: [{
+                type: Input
+            }], signatureText: [{
+                type: Input
+            }], actionClick: [{
+                type: Output
+            }] } });
+
 class NewsSectionComponent extends BaseSectionComponent {
     get newsItems() {
         return this.getItems();
@@ -3956,5 +6243,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * 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 };
+export { AICardRendererComponent, AnalyticsSectionComponent, BaseSectionComponent, BrandColorsSectionComponent, CardBodyComponent, CardDiffUtil, CardFooterComponent, CardHeaderComponent, CardPreviewComponent, CardSkeletonComponent, CardTypeGuards, CardUtils, ChartSectionComponent, ContactCardSectionComponent, EventMiddlewareService, EventSectionComponent, FallbackSectionComponent, FinancialsSectionComponent, IconService, InfoSectionComponent, ListSectionComponent, LucideIconsModule, MagneticTiltService, MapSectionComponent, MasonryGridComponent, NetworkCardSectionComponent, NewsSectionComponent, OverviewSectionComponent, PresetFactory, ProductSectionComponent, QuotationSectionComponent, SectionNormalizationService, SectionPluginRegistry, SectionRendererComponent, SectionUtilsService, SocialMediaSectionComponent, SolutionsSectionComponent, TextReferenceSectionComponent, ThemeService, areStylesLoaded, buildThemeFromBase, cloneCardConfig, createAnalyticsDashboard, createAnalyticsPreset, createCardFromPartial, createCompanyCard, createCompanyPreset, createContactCard, createContactPreset, createEmptyCard, createEnhancedCompanyCard, createErrorCard, createPartialTheme, createSkeletonCard, darkTheme, generateThemeFromPalette, getBreakpointFromWidth, getCSSVariableValue, highContrastTheme, isCSSVariableDefined, isCardComplete, lightTheme, mergeCardConfig, mergeSections, mergeThemes, prepareCardForStreaming, provideOSICards, updateCardIncremental, validateAndWarnStyles, validateCSSVariableNames, validateCardConfig, validateStyles, waitForStyles };
 //# sourceMappingURL=osi-cards-lib.mjs.map