@avora-labs/meta-forge 1.0.5 → 1.1.2

package/fesm2022/avora-labs-meta-forge.mjs

@@ -156,10 +156,10 @@ class NotificationService {
     remove(id) {
         this._notifications.update(n => n.filter(item => item.id !== id));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NotificationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NotificationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NotificationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NotificationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -336,10 +336,10 @@ class MetaStateService {
             return undefined;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MetaStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MetaStateService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: MetaStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: MetaStateService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MetaStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: MetaStateService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -759,10 +759,10 @@ class MetaApiService {
         }
         return formData;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MetaApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MetaApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: MetaApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: MetaApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MetaApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: MetaApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -957,10 +957,10 @@ class ConditionEvaluatorService {
             return obj;
         return path.split('.').reduce((current, key) => current?.[key], obj);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ConditionEvaluatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ConditionEvaluatorService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ConditionEvaluatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ConditionEvaluatorService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ConditionEvaluatorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ConditionEvaluatorService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -995,10 +995,10 @@ class AmfDialogService {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AmfDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AmfDialogService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AmfDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AmfDialogService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AmfDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AmfDialogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1526,10 +1526,10 @@ class ActionDispatcherService {
             if (el) {
                 const printWindow = window.open('', '_blank');
                 if (printWindow) {
-                    printWindow.document.write(`
-            <html><head><title>${config.title || 'Print'}</title>
-            <style>body { font-family: system-ui, sans-serif; padding: 20px; }</style>
-            </head><body>${el.innerHTML}</body></html>
+                    printWindow.document.write(`
+            <html><head><title>${config.title || 'Print'}</title>
+            <style>body { font-family: system-ui, sans-serif; padding: 20px; }</style>
+            </head><body>${el.innerHTML}</body></html>
           `);
                     printWindow.document.close();
                     printWindow.print();
@@ -1624,10 +1624,10 @@ class ActionDispatcherService {
             return undefined;
         return path.split('.').reduce((obj, key) => obj?.[key], context);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ActionDispatcherService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ActionDispatcherService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ActionDispatcherService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ActionDispatcherService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ActionDispatcherService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ActionDispatcherService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1645,10 +1645,10 @@ class ComponentRegistryService {
     has(key) { return this.registry.has(key); }
     keys() { return Array.from(this.registry.keys()); }
     unregister(key) { return this.registry.delete(key); }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComponentRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComponentRegistryService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ComponentRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ComponentRegistryService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComponentRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ComponentRegistryService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1696,10 +1696,10 @@ class MetaRendererComponent {
         if (this.section.gridRow)
             hostEl.style.gridRow = this.section.gridRow;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MetaRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: MetaRendererComponent, isStandalone: true, selector: "amf-renderer", inputs: { section: "section", context: "context" }, viewQueries: [{ propertyName: "outlet", first: true, predicate: ["outlet"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `<ng-container #outlet></ng-container>`, isInline: true, styles: [":host{display:block}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: MetaRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", type: MetaRendererComponent, isStandalone: true, selector: "amf-renderer", inputs: { section: "section", context: "context" }, viewQueries: [{ propertyName: "outlet", first: true, predicate: ["outlet"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `<ng-container #outlet></ng-container>`, isInline: true, styles: [":host{display:block}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MetaRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: MetaRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'amf-renderer', standalone: true, template: `<ng-container #outlet></ng-container>`, styles: [":host{display:block}\n"] }]
         }], propDecorators: { section: [{
@@ -1830,33 +1830,33 @@ class MetaPageComponent {
         }
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MetaPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: MetaPageComponent, isStandalone: true, selector: "amf-page", ngImport: i0, template: `
-    @if (pageMeta()) {
-      <div class="amf-page-wrapper" [class]="pageMeta()!.cssClass || ''"
-           [class.amf-animate-fade]="pageMeta()!.animation === 'fade'"
-           [class.amf-animate-slide-up]="pageMeta()!.animation === 'slide-up'"
-           [class.amf-animate-zoom]="pageMeta()!.animation === 'zoom'">
-        @for (section of pageMeta()!.sections; track $index) {
-          <amf-renderer [section]="section" [context]="context()" class="amf-section"></amf-renderer>
-        }
-      </div>
-    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: MetaPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: MetaPageComponent, isStandalone: true, selector: "amf-page", ngImport: i0, template: `
+    @if (pageMeta()) {
+      <div class="amf-page-wrapper" [class]="pageMeta()!.cssClass || ''"
+           [class.amf-animate-fade]="pageMeta()!.animation === 'fade'"
+           [class.amf-animate-slide-up]="pageMeta()!.animation === 'slide-up'"
+           [class.amf-animate-zoom]="pageMeta()!.animation === 'zoom'">
+        @for (section of pageMeta()!.sections; track $index) {
+          <amf-renderer [section]="section" [context]="context()" class="amf-section"></amf-renderer>
+        }
+      </div>
+    }
   `, isInline: true, styles: [".amf-page-wrapper{display:flex;flex-direction:column;gap:24px;width:100%}.amf-section{display:block;width:100%}.amf-animate-fade{animation:amfFadeIn .3s ease-out}.amf-animate-slide-up{animation:amfSlideUp .3s ease-out}.amf-animate-zoom{animation:amfZoom .3s ease-out}@keyframes amfFadeIn{0%{opacity:0}to{opacity:1}}@keyframes amfSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes amfZoom{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "component", type: MetaRendererComponent, selector: "amf-renderer", inputs: ["section", "context"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MetaPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: MetaPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'amf-page', standalone: true, imports: [MetaRendererComponent], template: `
-    @if (pageMeta()) {
-      <div class="amf-page-wrapper" [class]="pageMeta()!.cssClass || ''"
-           [class.amf-animate-fade]="pageMeta()!.animation === 'fade'"
-           [class.amf-animate-slide-up]="pageMeta()!.animation === 'slide-up'"
-           [class.amf-animate-zoom]="pageMeta()!.animation === 'zoom'">
-        @for (section of pageMeta()!.sections; track $index) {
-          <amf-renderer [section]="section" [context]="context()" class="amf-section"></amf-renderer>
-        }
-      </div>
-    }
+            args: [{ selector: 'amf-page', standalone: true, imports: [MetaRendererComponent], template: `
+    @if (pageMeta()) {
+      <div class="amf-page-wrapper" [class]="pageMeta()!.cssClass || ''"
+           [class.amf-animate-fade]="pageMeta()!.animation === 'fade'"
+           [class.amf-animate-slide-up]="pageMeta()!.animation === 'slide-up'"
+           [class.amf-animate-zoom]="pageMeta()!.animation === 'zoom'">
+        @for (section of pageMeta()!.sections; track $index) {
+          <amf-renderer [section]="section" [context]="context()" class="amf-section"></amf-renderer>
+        }
+      </div>
+    }
   `, styles: [".amf-page-wrapper{display:flex;flex-direction:column;gap:24px;width:100%}.amf-section{display:block;width:100%}.amf-animate-fade{animation:amfFadeIn .3s ease-out}.amf-animate-slide-up{animation:amfSlideUp .3s ease-out}.amf-animate-zoom{animation:amfZoom .3s ease-out}@keyframes amfFadeIn{0%{opacity:0}to{opacity:1}}@keyframes amfSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes amfZoom{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"] }]
         }], ctorParameters: () => [] });
 
@@ -2010,10 +2010,10 @@ class AuthService {
             return true;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AuthService, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AuthService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AuthService, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AuthService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AuthService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AuthService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.Router }] });
@@ -2030,10 +2030,10 @@ class PluginRegistryService {
     }
     getAll() { return Array.from(this.plugins.values()); }
     get(name) { return this.plugins.get(name); }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PluginRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PluginRegistryService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: PluginRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: PluginRegistryService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PluginRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: PluginRegistryService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2250,10 +2250,10 @@ class MetaRouterService {
             return route;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MetaRouterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MetaRouterService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: MetaRouterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: MetaRouterService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MetaRouterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: MetaRouterService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2277,21 +2277,21 @@ function getAmfAuthRoutes(meta) {
     if (pages.includes('login')) {
         routes.push({
             path: 'login',
-            loadComponent: () => import('./avora-labs-meta-forge-login.page-etTr5NqJ.mjs').then(m => m.LoginComponent),
+            loadComponent: () => import('./avora-labs-meta-forge-login.page-BW-RWCQM.mjs').then(m => m.LoginComponent),
             data: { layout: 'empty' },
         });
     }
     if (pages.includes('forgot-password')) {
         routes.push({
             path: 'forgot-password',
-            loadComponent: () => import('./avora-labs-meta-forge-forgot-password.page-0XLiBrV1.mjs').then(m => m.ForgotPasswordComponent),
+            loadComponent: () => import('./avora-labs-meta-forge-forgot-password.page-PY9_K4M-.mjs').then(m => m.ForgotPasswordComponent),
             data: { layout: 'empty' },
         });
     }
     if (pages.includes('contact-support')) {
         routes.push({
             path: 'contact-support',
-            loadComponent: () => import('./avora-labs-meta-forge-contact-support.page-BAUiKm3P.mjs').then(m => m.ContactSupportComponent),
+            loadComponent: () => import('./avora-labs-meta-forge-contact-support.page-C_kdmzhL.mjs').then(m => m.ContactSupportComponent),
             data: { layout: 'empty' },
         });
     }
@@ -2346,101 +2346,101 @@ class AccordionSectionComponent {
         }
         this.openPanels.set(current);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AccordionSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: AccordionSectionComponent, isStandalone: true, selector: "amf-accordion-section", inputs: { config: "config", context: "context" }, usesOnChanges: true, ngImport: i0, template: `
-    <div class="amf-accordion"
-         [class]="'variant-' + (config.variant || 'default')"
-         [class.accordion-bordered]="config.variant === 'bordered'">
-      @for (panel of visiblePanels(); track $index) {
-        <div class="accordion-panel"
-             [class.open]="isOpen($index)"
-             [class.disabled]="panel.disabled">
-
-          <!-- Panel Header -->
-          <button
-            type="button"
-            class="accordion-header"
-            [attr.aria-expanded]="isOpen($index)"
-            [disabled]="panel.disabled"
-            (click)="togglePanel($index)">
-
-            <div class="accordion-header-left">
-              @if (panel.icon) {
-                <svg class="panel-icon" viewBox="0 0 24 24">
-                  <path [attr.d]="panel.icon"/>
-                </svg>
-              }
-              <span class="panel-title">{{ panel.title }}</span>
-            </div>
-
-            <div class="accordion-header-right">
-              <svg class="chevron-icon" viewBox="0 0 24 24">
-                <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
-              </svg>
-            </div>
-          </button>
-
-          <!-- Panel Content -->
-          <div class="accordion-body" [class.open]="isOpen($index)">
-            <div class="accordion-body-inner">
-              @for (section of panel.sections; track $index) {
-                <amf-renderer [section]="section" [context]="context" class="amf-section">
-                </amf-renderer>
-              }
-            </div>
-          </div>
-        </div>
-      }
-    </div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AccordionSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: AccordionSectionComponent, isStandalone: true, selector: "amf-accordion-section", inputs: { config: "config", context: "context" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="amf-accordion"
+         [class]="'variant-' + (config.variant || 'default')"
+         [class.accordion-bordered]="config.variant === 'bordered'">
+      @for (panel of visiblePanels(); track $index) {
+        <div class="accordion-panel"
+             [class.open]="isOpen($index)"
+             [class.disabled]="panel.disabled">
+
+          <!-- Panel Header -->
+          <button
+            type="button"
+            class="accordion-header"
+            [attr.aria-expanded]="isOpen($index)"
+            [disabled]="panel.disabled"
+            (click)="togglePanel($index)">
+
+            <div class="accordion-header-left">
+              @if (panel.icon) {
+                <svg class="panel-icon" viewBox="0 0 24 24">
+                  <path [attr.d]="panel.icon"/>
+                </svg>
+              }
+              <span class="panel-title">{{ panel.title }}</span>
+            </div>
+
+            <div class="accordion-header-right">
+              <svg class="chevron-icon" viewBox="0 0 24 24">
+                <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
+              </svg>
+            </div>
+          </button>
+
+          <!-- Panel Content -->
+          <div class="accordion-body" [class.open]="isOpen($index)">
+            <div class="accordion-body-inner">
+              @for (section of panel.sections; track $index) {
+                <amf-renderer [section]="section" [context]="context" class="amf-section">
+                </amf-renderer>
+              }
+            </div>
+          </div>
+        </div>
+      }
+    </div>
   `, isInline: true, styles: [".amf-accordion{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;border:1px solid var(--app-border);background:var(--app-surface)}.amf-accordion.variant-flush{border:none;border-radius:0;gap:0}.amf-accordion.variant-bordered{gap:8px;border:none;background:transparent;overflow:visible}.accordion-panel{overflow:hidden;transition:box-shadow .2s}.variant-default .accordion-panel+.accordion-panel{border-top:1px solid var(--app-border)}.variant-bordered .accordion-panel{border:1px solid var(--app-border);border-radius:12px;overflow:hidden;background:var(--app-surface);transition:box-shadow .25s}.variant-bordered .accordion-panel.open{box-shadow:0 4px 20px #0000001f;border-color:var(--app-primary)}.accordion-panel.disabled{opacity:.5;pointer-events:none}.accordion-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 20px;background:transparent;border:none;cursor:pointer;text-align:left;transition:background .2s;gap:12px}.accordion-header:hover{background:var(--glass-bg)}.accordion-header:disabled{cursor:not-allowed}.accordion-panel.open .accordion-header{background:var(--glass-bg)}.accordion-header-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.panel-icon{width:18px;height:18px;fill:var(--app-primary);flex-shrink:0}.panel-title{font-size:.9375rem;font-weight:600;color:var(--app-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-header-right{flex-shrink:0}.chevron-icon{width:20px;height:20px;fill:var(--app-text-muted);transition:transform .3s cubic-bezier(.4,0,.2,1)}.accordion-panel.open .chevron-icon{transform:rotate(180deg);fill:var(--app-primary)}.accordion-body{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1)}.accordion-body.open{max-height:4000px}.accordion-body-inner{display:flex;flex-direction:column;gap:16px;padding:16px 20px 20px;border-top:1px solid var(--app-border);animation:accordionFadeIn .3s ease-out}@keyframes accordionFadeIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}:host{display:block}.amf-section{display:block}\n"], dependencies: [{ kind: "component", type: MetaRendererComponent, selector: "amf-renderer", inputs: ["section", "context"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AccordionSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AccordionSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'amf-accordion-section', standalone: true, imports: [MetaRendererComponent], template: `
-    <div class="amf-accordion"
-         [class]="'variant-' + (config.variant || 'default')"
-         [class.accordion-bordered]="config.variant === 'bordered'">
-      @for (panel of visiblePanels(); track $index) {
-        <div class="accordion-panel"
-             [class.open]="isOpen($index)"
-             [class.disabled]="panel.disabled">
-
-          <!-- Panel Header -->
-          <button
-            type="button"
-            class="accordion-header"
-            [attr.aria-expanded]="isOpen($index)"
-            [disabled]="panel.disabled"
-            (click)="togglePanel($index)">
-
-            <div class="accordion-header-left">
-              @if (panel.icon) {
-                <svg class="panel-icon" viewBox="0 0 24 24">
-                  <path [attr.d]="panel.icon"/>
-                </svg>
-              }
-              <span class="panel-title">{{ panel.title }}</span>
-            </div>
-
-            <div class="accordion-header-right">
-              <svg class="chevron-icon" viewBox="0 0 24 24">
-                <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
-              </svg>
-            </div>
-          </button>
-
-          <!-- Panel Content -->
-          <div class="accordion-body" [class.open]="isOpen($index)">
-            <div class="accordion-body-inner">
-              @for (section of panel.sections; track $index) {
-                <amf-renderer [section]="section" [context]="context" class="amf-section">
-                </amf-renderer>
-              }
-            </div>
-          </div>
-        </div>
-      }
-    </div>
+            args: [{ selector: 'amf-accordion-section', standalone: true, imports: [MetaRendererComponent], template: `
+    <div class="amf-accordion"
+         [class]="'variant-' + (config.variant || 'default')"
+         [class.accordion-bordered]="config.variant === 'bordered'">
+      @for (panel of visiblePanels(); track $index) {
+        <div class="accordion-panel"
+             [class.open]="isOpen($index)"
+             [class.disabled]="panel.disabled">
+
+          <!-- Panel Header -->
+          <button
+            type="button"
+            class="accordion-header"
+            [attr.aria-expanded]="isOpen($index)"
+            [disabled]="panel.disabled"
+            (click)="togglePanel($index)">
+
+            <div class="accordion-header-left">
+              @if (panel.icon) {
+                <svg class="panel-icon" viewBox="0 0 24 24">
+                  <path [attr.d]="panel.icon"/>
+                </svg>
+              }
+              <span class="panel-title">{{ panel.title }}</span>
+            </div>
+
+            <div class="accordion-header-right">
+              <svg class="chevron-icon" viewBox="0 0 24 24">
+                <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
+              </svg>
+            </div>
+          </button>
+
+          <!-- Panel Content -->
+          <div class="accordion-body" [class.open]="isOpen($index)">
+            <div class="accordion-body-inner">
+              @for (section of panel.sections; track $index) {
+                <amf-renderer [section]="section" [context]="context" class="amf-section">
+                </amf-renderer>
+              }
+            </div>
+          </div>
+        </div>
+      }
+    </div>
   `, styles: [".amf-accordion{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;border:1px solid var(--app-border);background:var(--app-surface)}.amf-accordion.variant-flush{border:none;border-radius:0;gap:0}.amf-accordion.variant-bordered{gap:8px;border:none;background:transparent;overflow:visible}.accordion-panel{overflow:hidden;transition:box-shadow .2s}.variant-default .accordion-panel+.accordion-panel{border-top:1px solid var(--app-border)}.variant-bordered .accordion-panel{border:1px solid var(--app-border);border-radius:12px;overflow:hidden;background:var(--app-surface);transition:box-shadow .25s}.variant-bordered .accordion-panel.open{box-shadow:0 4px 20px #0000001f;border-color:var(--app-primary)}.accordion-panel.disabled{opacity:.5;pointer-events:none}.accordion-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 20px;background:transparent;border:none;cursor:pointer;text-align:left;transition:background .2s;gap:12px}.accordion-header:hover{background:var(--glass-bg)}.accordion-header:disabled{cursor:not-allowed}.accordion-panel.open .accordion-header{background:var(--glass-bg)}.accordion-header-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.panel-icon{width:18px;height:18px;fill:var(--app-primary);flex-shrink:0}.panel-title{font-size:.9375rem;font-weight:600;color:var(--app-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-header-right{flex-shrink:0}.chevron-icon{width:20px;height:20px;fill:var(--app-text-muted);transition:transform .3s cubic-bezier(.4,0,.2,1)}.accordion-panel.open .chevron-icon{transform:rotate(180deg);fill:var(--app-primary)}.accordion-body{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1)}.accordion-body.open{max-height:4000px}.accordion-body-inner{display:flex;flex-direction:column;gap:16px;padding:16px 20px 20px;border-top:1px solid var(--app-border);animation:accordionFadeIn .3s ease-out}@keyframes accordionFadeIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}:host{display:block}.amf-section{display:block}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
@@ -2479,61 +2479,61 @@ class MetaModalHostComponent {
     dispatchAction(actionMeta) {
         this.dispatcher.dispatch(actionMeta, {});
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MetaModalHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: MetaModalHostComponent, isStandalone: true, selector: "amf-modal-host", ngImport: i0, template: `
-    @if (isOpen()) {
-      <div class="amf-modal-backdrop" (click)="closeOnBackdrop($event)">
-        <div class="amf-modal-dialog" [ngClass]="['size-' + (config()?.size || 'md')]" (click)="$event.stopPropagation()">
-          <div class="amf-modal-header">
-            <h3>{{ config()?.title }}</h3>
-            <button class="amf-modal-close" (click)="close()">&times;</button>
-          </div>
-          <div class="amf-modal-content">
-            @if (config()?.content) {
-              <amf-renderer [section]="config()!.content" [context]="{}"></amf-renderer>
-            }
-          </div>
-          @if (config()?.actions?.length) {
-            <div class="amf-modal-footer">
-              @for (action of config()!.actions; track action.label) {
-                <button [class]="'btn-' + (action.color || 'primary')" (click)="dispatchAction(action.action)">
-                  {{ action.label }}
-                </button>
-              }
-            </div>
-          }
-        </div>
-      </div>
-    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: MetaModalHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: MetaModalHostComponent, isStandalone: true, selector: "amf-modal-host", ngImport: i0, template: `
+    @if (isOpen()) {
+      <div class="amf-modal-backdrop" (click)="closeOnBackdrop($event)">
+        <div class="amf-modal-dialog" [ngClass]="['size-' + (config()?.size || 'md')]" (click)="$event.stopPropagation()">
+          <div class="amf-modal-header">
+            <h3>{{ config()?.title }}</h3>
+            <button class="amf-modal-close" (click)="close()">&times;</button>
+          </div>
+          <div class="amf-modal-content">
+            @if (config()?.content) {
+              <amf-renderer [section]="config()!.content" [context]="{}"></amf-renderer>
+            }
+          </div>
+          @if (config()?.actions?.length) {
+            <div class="amf-modal-footer">
+              @for (action of config()!.actions; track action.label) {
+                <button [class]="'btn-' + (action.color || 'primary')" (click)="dispatchAction(action.action)">
+                  {{ action.label }}
+                </button>
+              }
+            </div>
+          }
+        </div>
+      </div>
+    }
   `, isInline: true, styles: [".amf-modal-backdrop{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s ease-out}.amf-modal-dialog{background:var(--glass-bg, rgba(20,25,40,.9));border:1px solid var(--app-border, rgba(255,255,255,.1));border-radius:16px;box-shadow:0 25px 50px -12px #00000080;width:100%;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;animation:slideUp .3s cubic-bezier(.16,1,.3,1)}.size-sm{max-width:400px}.size-md{max-width:600px}.size-lg{max-width:800px}.size-full{max-width:95vw;height:95vh}.amf-modal-header{padding:20px 24px;border-bottom:1px solid var(--app-border, rgba(255,255,255,.1));display:flex;justify-content:space-between;align-items:center}.amf-modal-header h3{font-size:1.25rem;margin:0;color:#fff}.amf-modal-close{background:transparent;border:none;color:#94a3b8;font-size:1.5rem;cursor:pointer;line-height:1;padding:0 4px}.amf-modal-close:hover{color:#fff}.amf-modal-content{padding:24px;flex-grow:1;color:#94a3b8}.amf-modal-footer{padding:16px 24px;border-top:1px solid var(--app-border, rgba(255,255,255,.1));display:flex;justify-content:flex-end;gap:12px}.btn-primary{background:linear-gradient(135deg,var(--app-primary, #6366f1),var(--app-accent, #c084fc));color:#fff;padding:10px 20px;border-radius:8px;border:none;cursor:pointer;font-weight:600}.btn-outline{background:transparent;border:1px solid #475569;color:#e2e8f0;padding:10px 20px;border-radius:8px;cursor:pointer;font-weight:600}.btn-danger{background:#ef4444;color:#fff;padding:10px 20px;border-radius:8px;border:none;cursor:pointer;font-weight:600}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MetaRendererComponent, selector: "amf-renderer", inputs: ["section", "context"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MetaModalHostComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: MetaModalHostComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'amf-modal-host', standalone: true, imports: [CommonModule, MetaRendererComponent], template: `
-    @if (isOpen()) {
-      <div class="amf-modal-backdrop" (click)="closeOnBackdrop($event)">
-        <div class="amf-modal-dialog" [ngClass]="['size-' + (config()?.size || 'md')]" (click)="$event.stopPropagation()">
-          <div class="amf-modal-header">
-            <h3>{{ config()?.title }}</h3>
-            <button class="amf-modal-close" (click)="close()">&times;</button>
-          </div>
-          <div class="amf-modal-content">
-            @if (config()?.content) {
-              <amf-renderer [section]="config()!.content" [context]="{}"></amf-renderer>
-            }
-          </div>
-          @if (config()?.actions?.length) {
-            <div class="amf-modal-footer">
-              @for (action of config()!.actions; track action.label) {
-                <button [class]="'btn-' + (action.color || 'primary')" (click)="dispatchAction(action.action)">
-                  {{ action.label }}
-                </button>
-              }
-            </div>
-          }
-        </div>
-      </div>
-    }
+            args: [{ selector: 'amf-modal-host', standalone: true, imports: [CommonModule, MetaRendererComponent], template: `
+    @if (isOpen()) {
+      <div class="amf-modal-backdrop" (click)="closeOnBackdrop($event)">
+        <div class="amf-modal-dialog" [ngClass]="['size-' + (config()?.size || 'md')]" (click)="$event.stopPropagation()">
+          <div class="amf-modal-header">
+            <h3>{{ config()?.title }}</h3>
+            <button class="amf-modal-close" (click)="close()">&times;</button>
+          </div>
+          <div class="amf-modal-content">
+            @if (config()?.content) {
+              <amf-renderer [section]="config()!.content" [context]="{}"></amf-renderer>
+            }
+          </div>
+          @if (config()?.actions?.length) {
+            <div class="amf-modal-footer">
+              @for (action of config()!.actions; track action.label) {
+                <button [class]="'btn-' + (action.color || 'primary')" (click)="dispatchAction(action.action)">
+                  {{ action.label }}
+                </button>
+              }
+            </div>
+          }
+        </div>
+      </div>
+    }
   `, styles: [".amf-modal-backdrop{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s ease-out}.amf-modal-dialog{background:var(--glass-bg, rgba(20,25,40,.9));border:1px solid var(--app-border, rgba(255,255,255,.1));border-radius:16px;box-shadow:0 25px 50px -12px #00000080;width:100%;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;animation:slideUp .3s cubic-bezier(.16,1,.3,1)}.size-sm{max-width:400px}.size-md{max-width:600px}.size-lg{max-width:800px}.size-full{max-width:95vw;height:95vh}.amf-modal-header{padding:20px 24px;border-bottom:1px solid var(--app-border, rgba(255,255,255,.1));display:flex;justify-content:space-between;align-items:center}.amf-modal-header h3{font-size:1.25rem;margin:0;color:#fff}.amf-modal-close{background:transparent;border:none;color:#94a3b8;font-size:1.5rem;cursor:pointer;line-height:1;padding:0 4px}.amf-modal-close:hover{color:#fff}.amf-modal-content{padding:24px;flex-grow:1;color:#94a3b8}.amf-modal-footer{padding:16px 24px;border-top:1px solid var(--app-border, rgba(255,255,255,.1));display:flex;justify-content:flex-end;gap:12px}.btn-primary{background:linear-gradient(135deg,var(--app-primary, #6366f1),var(--app-accent, #c084fc));color:#fff;padding:10px 20px;border-radius:8px;border:none;cursor:pointer;font-weight:600}.btn-outline{background:transparent;border:1px solid #475569;color:#e2e8f0;padding:10px 20px;border-radius:8px;cursor:pointer;font-weight:600}.btn-danger{background:#ef4444;color:#fff;padding:10px 20px;border-radius:8px;border:none;cursor:pointer;font-weight:600}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
         }] });
 
@@ -2594,10 +2594,10 @@ class IconRegistryService {
         this.register('dollar-sign', 'M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z');
         this.register('activity', 'M22 12h-4l-3 9L9 3l-3 9H2');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IconRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IconRegistryService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: IconRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: IconRegistryService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IconRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: IconRegistryService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -2634,85 +2634,85 @@ class AmfDialogHostComponent {
             this.currentDialog.set(null); // Clear the dialog visually
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AmfDialogHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: AmfDialogHostComponent, isStandalone: true, selector: "amf-dialog-host", ngImport: i0, template: `
-    @if (currentDialog()) {
-      <div class="amf-dialog-backdrop" (click)="onBackdropClick()">
-        <div class="amf-dialog-box" (click)="$event.stopPropagation()">
-          
-          <div class="dialog-header">
-            <div class="dialog-icon-wrapper" [ngClass]="'variant-' + (currentDialog()?.config?.variant || 'info')">
-              @if (currentDialog()?.config?.icon) {
-                <svg viewBox="0 0 24 24" class="icon-element">
-                  <path [attr.d]="iconPath"></path>
-                </svg>
-              } @else {
-                <span class="icon-fallback">!</span>
-              }
-            </div>
-            @if (currentDialog()?.config?.title) {
-              <h3 class="dialog-title">{{ currentDialog()!.config!.title }}</h3>
-            }
-          </div>
-
-          <div class="dialog-content">
-            <p class="dialog-message">{{ currentDialog()!.config!.message }}</p>
-          </div>
-
-          <div class="dialog-actions">
-            @if (currentDialog()?.config?.showCancel) {
-              <button class="btn btn-cancel" (click)="close(false)">
-                {{ currentDialog()?.config?.cancelLabel || 'Cancel' }}
-              </button>
-            }
-            <button class="btn btn-confirm" [ngClass]="'btn-variant-' + (currentDialog()?.config?.variant || 'info')" (click)="close(true)">
-              {{ currentDialog()?.config?.confirmLabel || 'OK' }}
-            </button>
-          </div>
-        </div>
-      </div>
-    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AmfDialogHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: AmfDialogHostComponent, isStandalone: true, selector: "amf-dialog-host", ngImport: i0, template: `
+    @if (currentDialog()) {
+      <div class="amf-dialog-backdrop" (click)="onBackdropClick()">
+        <div class="amf-dialog-box" (click)="$event.stopPropagation()">
+          
+          <div class="dialog-header">
+            <div class="dialog-icon-wrapper" [ngClass]="'variant-' + (currentDialog()?.config?.variant || 'info')">
+              @if (currentDialog()?.config?.icon) {
+                <svg viewBox="0 0 24 24" class="icon-element">
+                  <path [attr.d]="iconPath"></path>
+                </svg>
+              } @else {
+                <span class="icon-fallback">!</span>
+              }
+            </div>
+            @if (currentDialog()?.config?.title) {
+              <h3 class="dialog-title">{{ currentDialog()!.config!.title }}</h3>
+            }
+          </div>
+
+          <div class="dialog-content">
+            <p class="dialog-message">{{ currentDialog()!.config!.message }}</p>
+          </div>
+
+          <div class="dialog-actions">
+            @if (currentDialog()?.config?.showCancel) {
+              <button class="btn btn-cancel" (click)="close(false)">
+                {{ currentDialog()?.config?.cancelLabel || 'Cancel' }}
+              </button>
+            }
+            <button class="btn btn-confirm" [ngClass]="'btn-variant-' + (currentDialog()?.config?.variant || 'info')" (click)="close(true)">
+              {{ currentDialog()?.config?.confirmLabel || 'OK' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    }
   `, isInline: true, styles: [".amf-dialog-backdrop{position:fixed;inset:0;background:#0a0f1ebf;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .25s ease-out}.amf-dialog-box{background:var(--glass-bg, rgba(20,25,40,.9));border:1px solid var(--app-border, rgba(255,255,255,.1));border-radius:20px;box-shadow:0 25px 50px -12px #0009,0 0 0 1px #ffffff0d inset;width:100%;max-width:420px;display:flex;flex-direction:column;animation:popIn .3s cubic-bezier(.16,1,.3,1);overflow:hidden}.dialog-header{padding:32px 32px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}.dialog-icon-wrapper{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;color:#fff;box-shadow:0 8px 16px -4px #0000004d}.dialog-icon-wrapper.variant-info{background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 8px 24px -6px #3b82f680}.dialog-icon-wrapper.variant-success{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 8px 24px -6px #10b98180}.dialog-icon-wrapper.variant-warning{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 8px 24px -6px #f59e0b80}.dialog-icon-wrapper.variant-danger{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 8px 24px -6px #ef444480}.icon-element{width:32px;height:32px;display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}.icon-fallback{font-family:monospace;font-weight:700}.dialog-title{margin:0;color:var(--app-text, #ffffff);font-size:1.25rem;font-weight:700;letter-spacing:-.02em}.dialog-content{padding:0 32px 32px;text-align:center}.dialog-message{margin:0;color:var(--app-text-muted, #94a3b8);font-size:.95rem;line-height:1.5}.dialog-actions{display:flex;gap:12px;padding:24px 32px;background:#0003;border-top:1px solid var(--app-border, rgba(255,255,255,.05))}.btn{flex:1;padding:12px 20px;border-radius:12px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s;border:none;display:inline-flex;align-items:center;justify-content:center}.btn-cancel{background:#ffffff0d;color:var(--app-text, #ffffff);border:1px solid rgba(255,255,255,.1)}.btn-cancel:hover{background:#ffffff1a}.btn-confirm{color:#fff;box-shadow:0 4px 12px transparent}.btn-confirm:hover{transform:translateY(-1px)}.btn-variant-info{background:#3b82f6;box-shadow:0 4px 12px #3b82f64d}.btn-variant-info:hover{background:#60a5fa;box-shadow:0 6px 16px #3b82f666}.btn-variant-success{background:#10b981;box-shadow:0 4px 12px #10b9814d}.btn-variant-success:hover{background:#34d399;box-shadow:0 6px 16px #10b98166}.btn-variant-warning{background:#f59e0b;box-shadow:0 4px 12px #f59e0b4d}.btn-variant-warning:hover{background:#fbbf24;box-shadow:0 6px 16px #f59e0b66}.btn-variant-danger{background:#ef4444;box-shadow:0 4px 12px #ef44444d}.btn-variant-danger:hover{background:#f87171;box-shadow:0 6px 16px #ef444466}@keyframes fadeIn{0%{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{opacity:1;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}}@keyframes popIn{0%{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AmfDialogHostComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AmfDialogHostComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'amf-dialog-host', standalone: true, imports: [CommonModule], template: `
-    @if (currentDialog()) {
-      <div class="amf-dialog-backdrop" (click)="onBackdropClick()">
-        <div class="amf-dialog-box" (click)="$event.stopPropagation()">
-          
-          <div class="dialog-header">
-            <div class="dialog-icon-wrapper" [ngClass]="'variant-' + (currentDialog()?.config?.variant || 'info')">
-              @if (currentDialog()?.config?.icon) {
-                <svg viewBox="0 0 24 24" class="icon-element">
-                  <path [attr.d]="iconPath"></path>
-                </svg>
-              } @else {
-                <span class="icon-fallback">!</span>
-              }
-            </div>
-            @if (currentDialog()?.config?.title) {
-              <h3 class="dialog-title">{{ currentDialog()!.config!.title }}</h3>
-            }
-          </div>
-
-          <div class="dialog-content">
-            <p class="dialog-message">{{ currentDialog()!.config!.message }}</p>
-          </div>
-
-          <div class="dialog-actions">
-            @if (currentDialog()?.config?.showCancel) {
-              <button class="btn btn-cancel" (click)="close(false)">
-                {{ currentDialog()?.config?.cancelLabel || 'Cancel' }}
-              </button>
-            }
-            <button class="btn btn-confirm" [ngClass]="'btn-variant-' + (currentDialog()?.config?.variant || 'info')" (click)="close(true)">
-              {{ currentDialog()?.config?.confirmLabel || 'OK' }}
-            </button>
-          </div>
-        </div>
-      </div>
-    }
+            args: [{ selector: 'amf-dialog-host', standalone: true, imports: [CommonModule], template: `
+    @if (currentDialog()) {
+      <div class="amf-dialog-backdrop" (click)="onBackdropClick()">
+        <div class="amf-dialog-box" (click)="$event.stopPropagation()">
+          
+          <div class="dialog-header">
+            <div class="dialog-icon-wrapper" [ngClass]="'variant-' + (currentDialog()?.config?.variant || 'info')">
+              @if (currentDialog()?.config?.icon) {
+                <svg viewBox="0 0 24 24" class="icon-element">
+                  <path [attr.d]="iconPath"></path>
+                </svg>
+              } @else {
+                <span class="icon-fallback">!</span>
+              }
+            </div>
+            @if (currentDialog()?.config?.title) {
+              <h3 class="dialog-title">{{ currentDialog()!.config!.title }}</h3>
+            }
+          </div>
+
+          <div class="dialog-content">
+            <p class="dialog-message">{{ currentDialog()!.config!.message }}</p>
+          </div>
+
+          <div class="dialog-actions">
+            @if (currentDialog()?.config?.showCancel) {
+              <button class="btn btn-cancel" (click)="close(false)">
+                {{ currentDialog()?.config?.cancelLabel || 'Cancel' }}
+              </button>
+            }
+            <button class="btn btn-confirm" [ngClass]="'btn-variant-' + (currentDialog()?.config?.variant || 'info')" (click)="close(true)">
+              {{ currentDialog()?.config?.confirmLabel || 'OK' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    }
   `, styles: [".amf-dialog-backdrop{position:fixed;inset:0;background:#0a0f1ebf;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .25s ease-out}.amf-dialog-box{background:var(--glass-bg, rgba(20,25,40,.9));border:1px solid var(--app-border, rgba(255,255,255,.1));border-radius:20px;box-shadow:0 25px 50px -12px #0009,0 0 0 1px #ffffff0d inset;width:100%;max-width:420px;display:flex;flex-direction:column;animation:popIn .3s cubic-bezier(.16,1,.3,1);overflow:hidden}.dialog-header{padding:32px 32px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}.dialog-icon-wrapper{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;color:#fff;box-shadow:0 8px 16px -4px #0000004d}.dialog-icon-wrapper.variant-info{background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 8px 24px -6px #3b82f680}.dialog-icon-wrapper.variant-success{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 8px 24px -6px #10b98180}.dialog-icon-wrapper.variant-warning{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 8px 24px -6px #f59e0b80}.dialog-icon-wrapper.variant-danger{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 8px 24px -6px #ef444480}.icon-element{width:32px;height:32px;display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}.icon-fallback{font-family:monospace;font-weight:700}.dialog-title{margin:0;color:var(--app-text, #ffffff);font-size:1.25rem;font-weight:700;letter-spacing:-.02em}.dialog-content{padding:0 32px 32px;text-align:center}.dialog-message{margin:0;color:var(--app-text-muted, #94a3b8);font-size:.95rem;line-height:1.5}.dialog-actions{display:flex;gap:12px;padding:24px 32px;background:#0003;border-top:1px solid var(--app-border, rgba(255,255,255,.05))}.btn{flex:1;padding:12px 20px;border-radius:12px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s;border:none;display:inline-flex;align-items:center;justify-content:center}.btn-cancel{background:#ffffff0d;color:var(--app-text, #ffffff);border:1px solid rgba(255,255,255,.1)}.btn-cancel:hover{background:#ffffff1a}.btn-confirm{color:#fff;box-shadow:0 4px 12px transparent}.btn-confirm:hover{transform:translateY(-1px)}.btn-variant-info{background:#3b82f6;box-shadow:0 4px 12px #3b82f64d}.btn-variant-info:hover{background:#60a5fa;box-shadow:0 6px 16px #3b82f666}.btn-variant-success{background:#10b981;box-shadow:0 4px 12px #10b9814d}.btn-variant-success:hover{background:#34d399;box-shadow:0 6px 16px #10b98166}.btn-variant-warning{background:#f59e0b;box-shadow:0 4px 12px #f59e0b4d}.btn-variant-warning:hover{background:#fbbf24;box-shadow:0 6px 16px #f59e0b66}.btn-variant-danger{background:#ef4444;box-shadow:0 4px 12px #ef44444d}.btn-variant-danger:hover{background:#f87171;box-shadow:0 6px 16px #ef444466}@keyframes fadeIn{0%{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{opacity:1;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}}@keyframes popIn{0%{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"] }]
         }] });
 
@@ -2749,75 +2749,75 @@ class AmfDrawerHostComponent {
     dispatchAction(actionMeta) {
         this.dispatcher.dispatch(actionMeta, {});
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AmfDrawerHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: AmfDrawerHostComponent, isStandalone: true, selector: "amf-drawer-host", ngImport: i0, template: `
-    @if (isOpen()) {
-      <!-- Backdrop -->
-      <div class="amf-drawer-backdrop" (click)="closeOnBackdrop()"></div>
-    }
-    <!-- Drawer panel — always in DOM so the CSS slide animation works -->
-    <div class="amf-drawer-panel"
-         [class.is-open]="isOpen()"
-         [style.width]="config()?.size || '420px'"
-         [class.position-left]="config()?.position === 'left'"
-         (click)="$event.stopPropagation()">
-      @if (isOpen() && config()) {
-        <div class="amf-drawer-header">
-          <h3>{{ config()?.title }}</h3>
-          <button class="amf-drawer-close" (click)="close()" aria-label="Close drawer">&times;</button>
-        </div>
-        <div class="amf-drawer-content">
-          @if (config()?.content) {
-            <amf-renderer [section]="config()!.content" [context]="{}"></amf-renderer>
-          }
-        </div>
-        @if (config()?.actions?.length) {
-          <div class="amf-drawer-footer">
-            @for (action of config()!.actions; track action.label) {
-              <button [class]="'btn-' + (action.color || 'primary')" (click)="dispatchAction(action.action)">
-                {{ action.label }}
-              </button>
-            }
-          </div>
-        }
-      }
-    </div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AmfDrawerHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: AmfDrawerHostComponent, isStandalone: true, selector: "amf-drawer-host", ngImport: i0, template: `
+    @if (isOpen()) {
+      <!-- Backdrop -->
+      <div class="amf-drawer-backdrop" (click)="closeOnBackdrop()"></div>
+    }
+    <!-- Drawer panel — always in DOM so the CSS slide animation works -->
+    <div class="amf-drawer-panel"
+         [class.is-open]="isOpen()"
+         [style.width]="config()?.size || '420px'"
+         [class.position-left]="config()?.position === 'left'"
+         (click)="$event.stopPropagation()">
+      @if (isOpen() && config()) {
+        <div class="amf-drawer-header">
+          <h3>{{ config()?.title }}</h3>
+          <button class="amf-drawer-close" (click)="close()" aria-label="Close drawer">&times;</button>
+        </div>
+        <div class="amf-drawer-content">
+          @if (config()?.content) {
+            <amf-renderer [section]="config()!.content" [context]="{}"></amf-renderer>
+          }
+        </div>
+        @if (config()?.actions?.length) {
+          <div class="amf-drawer-footer">
+            @for (action of config()!.actions; track action.label) {
+              <button [class]="'btn-' + (action.color || 'primary')" (click)="dispatchAction(action.action)">
+                {{ action.label }}
+              </button>
+            }
+          </div>
+        }
+      }
+    </div>
   `, isInline: true, styles: [".amf-drawer-backdrop{position:fixed;inset:0;background:#0000008c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1200;animation:fadeIn .25s ease-out}.amf-drawer-panel{position:fixed;top:0;right:0;height:100%;max-width:95vw;background:var(--glass-bg, rgba(15, 20, 40, .97));border-left:1px solid var(--app-border, rgba(255,255,255,.08));box-shadow:-20px 0 60px #00000080;z-index:1201;display:flex;flex-direction:column;transform:translate(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);will-change:transform;overflow:hidden}.amf-drawer-panel.position-left{right:auto;left:0;border-left:none;border-right:1px solid var(--app-border, rgba(255,255,255,.08));transform:translate(-100%)}.amf-drawer-panel.is-open{transform:translate(0)}.amf-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--app-border, rgba(255,255,255,.08));flex-shrink:0}.amf-drawer-header h3{margin:0;font-size:1.125rem;font-weight:700;color:var(--app-text, #f1f5f9);letter-spacing:-.01em}.amf-drawer-close{background:#ffffff0f;border:1px solid rgba(255,255,255,.08);color:var(--app-text-muted, #94a3b8);font-size:1.25rem;line-height:1;width:32px;height:32px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.amf-drawer-close:hover{background:#ffffff1f;color:var(--app-text, #f1f5f9)}.amf-drawer-content{flex:1;overflow-y:auto;padding:24px}.amf-drawer-footer{flex-shrink:0;padding:16px 24px;border-top:1px solid var(--app-border, rgba(255,255,255,.08));display:flex;justify-content:flex-end;gap:12px;background:#00000026}.btn-primary{background:linear-gradient(135deg,var(--app-primary, #6366f1),var(--app-accent, #c084fc));color:#fff;padding:10px 20px;border-radius:8px;border:none;cursor:pointer;font-weight:600;transition:all .2s}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px var(--app-glow)}.btn-outline{background:transparent;border:1px solid #475569;color:#e2e8f0;padding:10px 20px;border-radius:8px;cursor:pointer;font-weight:600;transition:all .2s}.btn-outline:hover{background:#ffffff0f}.btn-danger{background:#ef4444;color:#fff;padding:10px 20px;border-radius:8px;border:none;cursor:pointer;font-weight:600}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "component", type: MetaRendererComponent, selector: "amf-renderer", inputs: ["section", "context"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AmfDrawerHostComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AmfDrawerHostComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'amf-drawer-host', standalone: true, imports: [MetaRendererComponent], template: `
-    @if (isOpen()) {
-      <!-- Backdrop -->
-      <div class="amf-drawer-backdrop" (click)="closeOnBackdrop()"></div>
-    }
-    <!-- Drawer panel — always in DOM so the CSS slide animation works -->
-    <div class="amf-drawer-panel"
-         [class.is-open]="isOpen()"
-         [style.width]="config()?.size || '420px'"
-         [class.position-left]="config()?.position === 'left'"
-         (click)="$event.stopPropagation()">
-      @if (isOpen() && config()) {
-        <div class="amf-drawer-header">
-          <h3>{{ config()?.title }}</h3>
-          <button class="amf-drawer-close" (click)="close()" aria-label="Close drawer">&times;</button>
-        </div>
-        <div class="amf-drawer-content">
-          @if (config()?.content) {
-            <amf-renderer [section]="config()!.content" [context]="{}"></amf-renderer>
-          }
-        </div>
-        @if (config()?.actions?.length) {
-          <div class="amf-drawer-footer">
-            @for (action of config()!.actions; track action.label) {
-              <button [class]="'btn-' + (action.color || 'primary')" (click)="dispatchAction(action.action)">
-                {{ action.label }}
-              </button>
-            }
-          </div>
-        }
-      }
-    </div>
+            args: [{ selector: 'amf-drawer-host', standalone: true, imports: [MetaRendererComponent], template: `
+    @if (isOpen()) {
+      <!-- Backdrop -->
+      <div class="amf-drawer-backdrop" (click)="closeOnBackdrop()"></div>
+    }
+    <!-- Drawer panel — always in DOM so the CSS slide animation works -->
+    <div class="amf-drawer-panel"
+         [class.is-open]="isOpen()"
+         [style.width]="config()?.size || '420px'"
+         [class.position-left]="config()?.position === 'left'"
+         (click)="$event.stopPropagation()">
+      @if (isOpen() && config()) {
+        <div class="amf-drawer-header">
+          <h3>{{ config()?.title }}</h3>
+          <button class="amf-drawer-close" (click)="close()" aria-label="Close drawer">&times;</button>
+        </div>
+        <div class="amf-drawer-content">
+          @if (config()?.content) {
+            <amf-renderer [section]="config()!.content" [context]="{}"></amf-renderer>
+          }
+        </div>
+        @if (config()?.actions?.length) {
+          <div class="amf-drawer-footer">
+            @for (action of config()!.actions; track action.label) {
+              <button [class]="'btn-' + (action.color || 'primary')" (click)="dispatchAction(action.action)">
+                {{ action.label }}
+              </button>
+            }
+          </div>
+        }
+      }
+    </div>
   `, styles: [".amf-drawer-backdrop{position:fixed;inset:0;background:#0000008c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1200;animation:fadeIn .25s ease-out}.amf-drawer-panel{position:fixed;top:0;right:0;height:100%;max-width:95vw;background:var(--glass-bg, rgba(15, 20, 40, .97));border-left:1px solid var(--app-border, rgba(255,255,255,.08));box-shadow:-20px 0 60px #00000080;z-index:1201;display:flex;flex-direction:column;transform:translate(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);will-change:transform;overflow:hidden}.amf-drawer-panel.position-left{right:auto;left:0;border-left:none;border-right:1px solid var(--app-border, rgba(255,255,255,.08));transform:translate(-100%)}.amf-drawer-panel.is-open{transform:translate(0)}.amf-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--app-border, rgba(255,255,255,.08));flex-shrink:0}.amf-drawer-header h3{margin:0;font-size:1.125rem;font-weight:700;color:var(--app-text, #f1f5f9);letter-spacing:-.01em}.amf-drawer-close{background:#ffffff0f;border:1px solid rgba(255,255,255,.08);color:var(--app-text-muted, #94a3b8);font-size:1.25rem;line-height:1;width:32px;height:32px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.amf-drawer-close:hover{background:#ffffff1f;color:var(--app-text, #f1f5f9)}.amf-drawer-content{flex:1;overflow-y:auto;padding:24px}.amf-drawer-footer{flex-shrink:0;padding:16px 24px;border-top:1px solid var(--app-border, rgba(255,255,255,.08));display:flex;justify-content:flex-end;gap:12px;background:#00000026}.btn-primary{background:linear-gradient(135deg,var(--app-primary, #6366f1),var(--app-accent, #c084fc));color:#fff;padding:10px 20px;border-radius:8px;border:none;cursor:pointer;font-weight:600;transition:all .2s}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px var(--app-glow)}.btn-outline{background:transparent;border:1px solid #475569;color:#e2e8f0;padding:10px 20px;border-radius:8px;cursor:pointer;font-weight:600;transition:all .2s}.btn-outline:hover{background:#ffffff0f}.btn-danger{background:#ef4444;color:#fff;padding:10px 20px;border-radius:8px;border:none;cursor:pointer;font-weight:600}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
         }] });
 
@@ -3035,10 +3035,10 @@ class MetaAuthService {
         const storage = this.getStorage();
         return storage.getItem(key);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MetaAuthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MetaAuthService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: MetaAuthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: MetaAuthService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MetaAuthService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: MetaAuthService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -3096,10 +3096,10 @@ class ValidatorFactoryService {
             return error.message;
         return 'Invalid field';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ValidatorFactoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ValidatorFactoryService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ValidatorFactoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ValidatorFactoryService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ValidatorFactoryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ValidatorFactoryService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -3147,119 +3147,119 @@ class RepeaterFieldComponent {
             return;
         this.formArray.removeAt(index);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RepeaterFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: RepeaterFieldComponent, isStandalone: true, selector: "amf-repeater-field", inputs: { field: "field", formArray: "formArray", formDisabled: "formDisabled", actionDispatcher: "actionDispatcher", context: "context" }, ngImport: i0, template: `
-    <div class="amf-repeater" [class]="field.cssClass">
-      <!-- ── Header & Global Add ── -->
-      <div class="repeater-header">
-        <label class="repeater-label">{{ field.label }}</label>
-        @if (canAdd) {
-          <button type="button" class="btn-repeater-add" (click)="addItem()" [disabled]="formDisabled">
-            <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-            {{ field.addLabel || 'Add Item' }}
-          </button>
-        }
-      </div>
-      
-      @if (field.description) {
-        <p class="repeater-description">{{ field.description }}</p>
-      }
-
-      <div class="repeater-list">
-        @for (ctrl of formArray.controls; track $index) {
-          <div class="repeater-item-card">
-            <div class="repeater-item-header">
-              <span class="item-title">Item {{ $index + 1 }}</span>
-              @if (canRemove) {
-                <button type="button" class="btn-repeater-remove" (click)="removeItem($index)" [disabled]="formDisabled" title="Remove Item">
-                  <svg viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.12-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z"/></svg>
-                </button>
-              }
-            </div>
-            
-            <div class="repeater-item-body">
-              <div class="repeater-fields-grid" [style.grid-template-columns]="getGridStyle(field)">
-                @for (child of field.children || []; track child.key) {
-                  <amf-field-renderer
-                    [field]="child"
-                    [form]="getFormGroup(ctrl)"
-                    [formDisabled]="formDisabled"
-                    [actionDispatcher]="actionDispatcher"
-                    [context]="context"
-                    [style.grid-column]="child.colSpan ? 'span ' + child.colSpan : null">
-                  </amf-field-renderer>
-                }
-              </div>
-            </div>
-          </div>
-        }
-
-        @if (formArray.controls.length === 0) {
-          <div class="repeater-empty-state">
-            <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-            <p>No items added yet. Click "{{ field.addLabel || 'Add Item' }}" to begin.</p>
-          </div>
-        }
-      </div>
-    </div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: RepeaterFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: RepeaterFieldComponent, isStandalone: true, selector: "amf-repeater-field", inputs: { field: "field", formArray: "formArray", formDisabled: "formDisabled", actionDispatcher: "actionDispatcher", context: "context" }, ngImport: i0, template: `
+    <div class="amf-repeater" [class]="field.cssClass">
+      <!-- ── Header & Global Add ── -->
+      <div class="repeater-header">
+        <label class="repeater-label">{{ field.label }}</label>
+        @if (canAdd) {
+          <button type="button" class="btn-repeater-add" (click)="addItem()" [disabled]="formDisabled">
+            <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+            {{ field.addLabel || 'Add Item' }}
+          </button>
+        }
+      </div>
+      
+      @if (field.description) {
+        <p class="repeater-description">{{ field.description }}</p>
+      }
+
+      <div class="repeater-list">
+        @for (ctrl of formArray.controls; track $index) {
+          <div class="repeater-item-card">
+            <div class="repeater-item-header">
+              <span class="item-title">Item {{ $index + 1 }}</span>
+              @if (canRemove) {
+                <button type="button" class="btn-repeater-remove" (click)="removeItem($index)" [disabled]="formDisabled" title="Remove Item">
+                  <svg viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.12-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z"/></svg>
+                </button>
+              }
+            </div>
+            
+            <div class="repeater-item-body">
+              <div class="repeater-fields-grid" [style.grid-template-columns]="getGridStyle(field)">
+                @for (child of field.children || []; track child.key) {
+                  <amf-field-renderer
+                    [field]="child"
+                    [form]="getFormGroup(ctrl)"
+                    [formDisabled]="formDisabled"
+                    [actionDispatcher]="actionDispatcher"
+                    [context]="context"
+                    [style.grid-column]="child.colSpan ? 'span ' + child.colSpan : null">
+                  </amf-field-renderer>
+                }
+              </div>
+            </div>
+          </div>
+        }
+
+        @if (formArray.controls.length === 0) {
+          <div class="repeater-empty-state">
+            <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+            <p>No items added yet. Click "{{ field.addLabel || 'Add Item' }}" to begin.</p>
+          </div>
+        }
+      </div>
+    </div>
   `, isInline: true, styles: [".amf-repeater{margin-bottom:24px}.repeater-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.repeater-label{font-size:.9375rem;font-weight:600;color:var(--app-text);margin:0}.repeater-description{font-size:.8125rem;color:var(--app-text-muted);margin:0 0 16px}.btn-repeater-add{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:.8125rem;font-weight:500;font-family:inherit;cursor:pointer;border:1px solid rgba(59,130,246,.3);border-radius:6px;background:#3b82f61a;color:#3b82f6;transition:all .2s}.btn-repeater-add svg{width:14px;height:14px;fill:currentColor}.btn-repeater-add:hover:not(:disabled){background:#3b82f633}.btn-repeater-add:disabled{opacity:.5;cursor:not-allowed}.repeater-list{display:flex;flex-direction:column;gap:16px}.repeater-item-card{background:var(--app-surface-hover);border:1px solid var(--app-border);border-radius:8px;overflow:hidden;transition:box-shadow .2s}.repeater-item-card:hover{border-color:#3b82f64d}.repeater-item-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--app-border);background:#00000005}:host-context(body.amf-dark) .repeater-item-header{background:#ffffff05}.item-title{font-size:.8125rem;font-weight:600;color:var(--app-text);text-transform:uppercase;letter-spacing:.5px}.btn-repeater-remove{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:transparent;color:#ef4444;cursor:pointer;transition:background .2s}.btn-repeater-remove svg{width:18px;height:18px;fill:currentColor}.btn-repeater-remove:hover:not(:disabled){background:#ef44441a}.btn-repeater-remove:disabled{opacity:.5;cursor:not-allowed}.repeater-item-body{padding:16px}.repeater-fields-grid{display:grid;gap:16px}.repeater-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;text-align:center;border:1.5px dashed var(--app-border);border-radius:8px;color:var(--app-text-muted);background:var(--app-surface-hover)}.repeater-empty-state svg{width:32px;height:32px;fill:currentColor;opacity:.5;margin-bottom:12px}.repeater-empty-state p{font-size:.875rem;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "component", type: i0.forwardRef(() => FieldRendererComponent), selector: "amf-field-renderer", inputs: ["field", "form", "formDisabled", "actionDispatcher", "context"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RepeaterFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: RepeaterFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'amf-repeater-field', standalone: true, imports: [ReactiveFormsModule, forwardRef(() => FieldRendererComponent)], template: `
-    <div class="amf-repeater" [class]="field.cssClass">
-      <!-- ── Header & Global Add ── -->
-      <div class="repeater-header">
-        <label class="repeater-label">{{ field.label }}</label>
-        @if (canAdd) {
-          <button type="button" class="btn-repeater-add" (click)="addItem()" [disabled]="formDisabled">
-            <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-            {{ field.addLabel || 'Add Item' }}
-          </button>
-        }
-      </div>
-      
-      @if (field.description) {
-        <p class="repeater-description">{{ field.description }}</p>
-      }
-
-      <div class="repeater-list">
-        @for (ctrl of formArray.controls; track $index) {
-          <div class="repeater-item-card">
-            <div class="repeater-item-header">
-              <span class="item-title">Item {{ $index + 1 }}</span>
-              @if (canRemove) {
-                <button type="button" class="btn-repeater-remove" (click)="removeItem($index)" [disabled]="formDisabled" title="Remove Item">
-                  <svg viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.12-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z"/></svg>
-                </button>
-              }
-            </div>
-            
-            <div class="repeater-item-body">
-              <div class="repeater-fields-grid" [style.grid-template-columns]="getGridStyle(field)">
-                @for (child of field.children || []; track child.key) {
-                  <amf-field-renderer
-                    [field]="child"
-                    [form]="getFormGroup(ctrl)"
-                    [formDisabled]="formDisabled"
-                    [actionDispatcher]="actionDispatcher"
-                    [context]="context"
-                    [style.grid-column]="child.colSpan ? 'span ' + child.colSpan : null">
-                  </amf-field-renderer>
-                }
-              </div>
-            </div>
-          </div>
-        }
-
-        @if (formArray.controls.length === 0) {
-          <div class="repeater-empty-state">
-            <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-            <p>No items added yet. Click "{{ field.addLabel || 'Add Item' }}" to begin.</p>
-          </div>
-        }
-      </div>
-    </div>
+            args: [{ selector: 'amf-repeater-field', standalone: true, imports: [ReactiveFormsModule, forwardRef(() => FieldRendererComponent)], template: `
+    <div class="amf-repeater" [class]="field.cssClass">
+      <!-- ── Header & Global Add ── -->
+      <div class="repeater-header">
+        <label class="repeater-label">{{ field.label }}</label>
+        @if (canAdd) {
+          <button type="button" class="btn-repeater-add" (click)="addItem()" [disabled]="formDisabled">
+            <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+            {{ field.addLabel || 'Add Item' }}
+          </button>
+        }
+      </div>
+      
+      @if (field.description) {
+        <p class="repeater-description">{{ field.description }}</p>
+      }
+
+      <div class="repeater-list">
+        @for (ctrl of formArray.controls; track $index) {
+          <div class="repeater-item-card">
+            <div class="repeater-item-header">
+              <span class="item-title">Item {{ $index + 1 }}</span>
+              @if (canRemove) {
+                <button type="button" class="btn-repeater-remove" (click)="removeItem($index)" [disabled]="formDisabled" title="Remove Item">
+                  <svg viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.12-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z"/></svg>
+                </button>
+              }
+            </div>
+            
+            <div class="repeater-item-body">
+              <div class="repeater-fields-grid" [style.grid-template-columns]="getGridStyle(field)">
+                @for (child of field.children || []; track child.key) {
+                  <amf-field-renderer
+                    [field]="child"
+                    [form]="getFormGroup(ctrl)"
+                    [formDisabled]="formDisabled"
+                    [actionDispatcher]="actionDispatcher"
+                    [context]="context"
+                    [style.grid-column]="child.colSpan ? 'span ' + child.colSpan : null">
+                  </amf-field-renderer>
+                }
+              </div>
+            </div>
+          </div>
+        }
+
+        @if (formArray.controls.length === 0) {
+          <div class="repeater-empty-state">
+            <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+            <p>No items added yet. Click "{{ field.addLabel || 'Add Item' }}" to begin.</p>
+          </div>
+        }
+      </div>
+    </div>
   `, styles: [".amf-repeater{margin-bottom:24px}.repeater-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.repeater-label{font-size:.9375rem;font-weight:600;color:var(--app-text);margin:0}.repeater-description{font-size:.8125rem;color:var(--app-text-muted);margin:0 0 16px}.btn-repeater-add{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:.8125rem;font-weight:500;font-family:inherit;cursor:pointer;border:1px solid rgba(59,130,246,.3);border-radius:6px;background:#3b82f61a;color:#3b82f6;transition:all .2s}.btn-repeater-add svg{width:14px;height:14px;fill:currentColor}.btn-repeater-add:hover:not(:disabled){background:#3b82f633}.btn-repeater-add:disabled{opacity:.5;cursor:not-allowed}.repeater-list{display:flex;flex-direction:column;gap:16px}.repeater-item-card{background:var(--app-surface-hover);border:1px solid var(--app-border);border-radius:8px;overflow:hidden;transition:box-shadow .2s}.repeater-item-card:hover{border-color:#3b82f64d}.repeater-item-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--app-border);background:#00000005}:host-context(body.amf-dark) .repeater-item-header{background:#ffffff05}.item-title{font-size:.8125rem;font-weight:600;color:var(--app-text);text-transform:uppercase;letter-spacing:.5px}.btn-repeater-remove{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:transparent;color:#ef4444;cursor:pointer;transition:background .2s}.btn-repeater-remove svg{width:18px;height:18px;fill:currentColor}.btn-repeater-remove:hover:not(:disabled){background:#ef44441a}.btn-repeater-remove:disabled{opacity:.5;cursor:not-allowed}.repeater-item-body{padding:16px}.repeater-fields-grid{display:grid;gap:16px}.repeater-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;text-align:center;border:1.5px dashed var(--app-border);border-radius:8px;color:var(--app-text-muted);background:var(--app-surface-hover)}.repeater-empty-state svg{width:32px;height:32px;fill:currentColor;opacity:.5;margin-bottom:12px}.repeater-empty-state p{font-size:.875rem;margin:0}\n"] }]
         }], propDecorators: { field: [{
                 type: Input
@@ -3388,231 +3388,231 @@ class FieldRendererComponent {
             this.actionDispatcher.dispatch(onClick, this.context);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FieldRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: FieldRendererComponent, isStandalone: true, selector: "amf-field-renderer", inputs: { field: "field", form: "form", formDisabled: "formDisabled", actionDispatcher: "actionDispatcher", context: "context" }, ngImport: i0, template: `
-    @if (field.type !== 'hidden') {
-      <div class="amf-field" [class]="field.cssClass" [class.has-error]="hasError" [class.field-disabled]="isFieldDisabled">
-        @if (field.type === 'heading') { <h3 class="field-heading">{{ field.text || field.label }}</h3> }
-        @else if (field.type === 'divider') { <hr class="field-divider" /> }
-        @else {
-          @if (field.label && field.type !== 'repeater') { <label class="field-label" [for]="field.key">{{ field.label }} @if (isRequired) { <span class="required-mark">*</span> } </label> }
-          <div class="field-input-wrapper" [class.has-prefix]="!!field.prefix" [class.has-suffix]="!!field.suffix">
-            @if (field.prefix) { <span class="field-prefix">{{ field.prefix }}</span> }
-            @switch (field.type) {
-              @case ('button') {
-                <button type="button" class="field-button" [class]="'btn-' + (field.color || 'primary')" [disabled]="isFieldDisabled" (click)="handleButtonClick()">
-                  {{ field.label }}
-                </button>
-              }
-              @case ('textarea') { <textarea class="field-input field-textarea" [id]="field.key" [formControl]="control" [placeholder]="field.placeholder || ''" [rows]="field.rows || 3" [readOnly]="field.readOnly || false"></textarea> }
-              @case ('select') {
-                <select class="field-input field-select" [id]="field.key" [formControl]="control">
-                  <option value="" disabled>{{ field.placeholder || 'Select...' }}</option>
-                  @for (opt of field.options || []; track opt.value) { <option [value]="opt.value" [disabled]="opt.disabled || false">{{ opt.label }}</option> }
-                </select>
-              }
-              @case ('checkbox') {
-                <label class="field-checkbox-label"><input type="checkbox" class="field-checkbox" [id]="field.key" [formControl]="control" /><span>{{ field.placeholder || field.label }}</span></label>
-              }
-              @case ('toggle') {
-                <label class="field-toggle-label"><input type="checkbox" class="field-toggle-input" [id]="field.key" [formControl]="control" /><span class="field-toggle-track"><span class="field-toggle-thumb"></span></span>@if (field.placeholder) { <span class="field-toggle-text">{{ field.placeholder }}</span> }</label>
-              }
-              @case ('switch') {
-                <label class="field-toggle-label"><input type="checkbox" class="field-toggle-input" [id]="field.key" [formControl]="control" /><span class="field-toggle-track"><span class="field-toggle-thumb"></span></span>@if (field.placeholder) { <span class="field-toggle-text">{{ field.placeholder }}</span> }</label>
-              }
-              @case ('radio') {
-                <div class="field-radio-group">
-                  @for (opt of field.options || []; track opt.value) {
-                    <label class="field-radio-label"><input type="radio" [name]="field.key" [value]="opt.value" [formControl]="control" [attr.disabled]="opt.disabled ? '' : null" /><span>{{ opt.label }}</span></label>
-                  }
-                </div>
-              }
-              @case ('otp') {
-                <div class="field-otp-group">
-                  @for (val of otpArray; track $index) {
-                    <input class="field-input otp-digit" type="text" inputmode="numeric" [value]="val" (input)="onOtpInput($event, $index)" (keydown)="onOtpKeydown($event, $index)" [disabled]="isFieldDisabled" placeholder="•" />
-                  }
-                </div>
-              }
-              @case ('repeater') {
-                <amf-repeater-field
-                  [field]="field"
-                  [formArray]="getFormArray(field.key)"
-                  [formDisabled]="isFieldDisabled"
-                  [actionDispatcher]="actionDispatcher"
-                  [context]="context">
-                </amf-repeater-field>
-              }
-              @case ('password') {
-                <div class="password-wrapper">
-                  <input
-                    class="field-input password-input"
-                    [type]="showPassword() ? 'text' : 'password'"
-                    [id]="field.key"
-                    [formControl]="control"
-                    [placeholder]="field.placeholder || ''"
-                    [readOnly]="field.readOnly || false"
-                    [attr.autocomplete]="field.autocomplete" />
-                  <button
-                    type="button"
-                    class="pwd-toggle-btn"
-                    [attr.aria-label]="showPassword() ? 'Hide password' : 'Show password'"
-                    (click)="togglePasswordVisibility()">
-                    @if (showPassword()) {
-                      <!-- Eye-slash: password visible -->
-                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/>
-                        <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/>
-                        <line x1="1" y1="1" x2="23" y2="23"/>
-                      </svg>
-                    } @else {
-                      <!-- Eye: password hidden -->
-                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
-                        <circle cx="12" cy="12" r="3"/>
-                      </svg>
-                    }
-                  </button>
-                </div>
-              }
-              @case ('currency') {
-                <div class="currency-wrapper">
-                  <span class="currency-symbol">{{ currencySymbol }}</span>
-                  <input
-                    class="field-input currency-input"
-                    type="text"
-                    inputmode="decimal"
-                    [id]="field.key"
-                    [value]="formattedCurrencyValue"
-                    [placeholder]="field.placeholder || '0.00'"
-                    [disabled]="isFieldDisabled"
-                    (input)="onCurrencyInput($event)"
-                    (blur)="onCurrencyBlur($event)" />
-                </div>
-              }
-              @default { <input class="field-input" [type]="field.type" [id]="field.key" [formControl]="control" [placeholder]="field.placeholder || ''" [readOnly]="field.readOnly || false" [attr.min]="field.min" [attr.max]="field.max" [attr.step]="field.step" [attr.accept]="field.accept" [attr.multiple]="field.multiple ? '' : null" [attr.autocomplete]="field.autocomplete" /> }
-            }
-            @if (field.suffix) { <span class="field-suffix">{{ field.suffix }}</span> }
-          </div>
-          @if (field.hint && !hasError) { <span class="field-hint">{{ field.hint }}</span> }
-          @if (hasError) { <span class="field-error">{{ errorMessage }}</span> }
-        }
-      </div>
-    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: FieldRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: FieldRendererComponent, isStandalone: true, selector: "amf-field-renderer", inputs: { field: "field", form: "form", formDisabled: "formDisabled", actionDispatcher: "actionDispatcher", context: "context" }, ngImport: i0, template: `
+    @if (field.type !== 'hidden') {
+      <div class="amf-field" [class]="field.cssClass" [class.has-error]="hasError" [class.field-disabled]="isFieldDisabled">
+        @if (field.type === 'heading') { <h3 class="field-heading">{{ field.text || field.label }}</h3> }
+        @else if (field.type === 'divider') { <hr class="field-divider" /> }
+        @else {
+          @if (field.label && field.type !== 'repeater') { <label class="field-label" [for]="field.key">{{ field.label }} @if (isRequired) { <span class="required-mark">*</span> } </label> }
+          <div class="field-input-wrapper" [class.has-prefix]="!!field.prefix" [class.has-suffix]="!!field.suffix">
+            @if (field.prefix) { <span class="field-prefix">{{ field.prefix }}</span> }
+            @switch (field.type) {
+              @case ('button') {
+                <button type="button" class="field-button" [class]="'btn-' + (field.color || 'primary')" [disabled]="isFieldDisabled" (click)="handleButtonClick()">
+                  {{ field.label }}
+                </button>
+              }
+              @case ('textarea') { <textarea class="field-input field-textarea" [id]="field.key" [formControl]="control" [placeholder]="field.placeholder || ''" [rows]="field.rows || 3" [readOnly]="field.readOnly || false"></textarea> }
+              @case ('select') {
+                <select class="field-input field-select" [id]="field.key" [formControl]="control">
+                  <option value="" disabled>{{ field.placeholder || 'Select...' }}</option>
+                  @for (opt of field.options || []; track opt.value) { <option [value]="opt.value" [disabled]="opt.disabled || false">{{ opt.label }}</option> }
+                </select>
+              }
+              @case ('checkbox') {
+                <label class="field-checkbox-label"><input type="checkbox" class="field-checkbox" [id]="field.key" [formControl]="control" /><span>{{ field.placeholder || field.label }}</span></label>
+              }
+              @case ('toggle') {
+                <label class="field-toggle-label"><input type="checkbox" class="field-toggle-input" [id]="field.key" [formControl]="control" /><span class="field-toggle-track"><span class="field-toggle-thumb"></span></span>@if (field.placeholder) { <span class="field-toggle-text">{{ field.placeholder }}</span> }</label>
+              }
+              @case ('switch') {
+                <label class="field-toggle-label"><input type="checkbox" class="field-toggle-input" [id]="field.key" [formControl]="control" /><span class="field-toggle-track"><span class="field-toggle-thumb"></span></span>@if (field.placeholder) { <span class="field-toggle-text">{{ field.placeholder }}</span> }</label>
+              }
+              @case ('radio') {
+                <div class="field-radio-group">
+                  @for (opt of field.options || []; track opt.value) {
+                    <label class="field-radio-label"><input type="radio" [name]="field.key" [value]="opt.value" [formControl]="control" [attr.disabled]="opt.disabled ? '' : null" /><span>{{ opt.label }}</span></label>
+                  }
+                </div>
+              }
+              @case ('otp') {
+                <div class="field-otp-group">
+                  @for (val of otpArray; track $index) {
+                    <input class="field-input otp-digit" type="text" inputmode="numeric" [value]="val" (input)="onOtpInput($event, $index)" (keydown)="onOtpKeydown($event, $index)" [disabled]="isFieldDisabled" placeholder="•" />
+                  }
+                </div>
+              }
+              @case ('repeater') {
+                <amf-repeater-field
+                  [field]="field"
+                  [formArray]="getFormArray(field.key)"
+                  [formDisabled]="isFieldDisabled"
+                  [actionDispatcher]="actionDispatcher"
+                  [context]="context">
+                </amf-repeater-field>
+              }
+              @case ('password') {
+                <div class="password-wrapper">
+                  <input
+                    class="field-input password-input"
+                    [type]="showPassword() ? 'text' : 'password'"
+                    [id]="field.key"
+                    [formControl]="control"
+                    [placeholder]="field.placeholder || ''"
+                    [readOnly]="field.readOnly || false"
+                    [attr.autocomplete]="field.autocomplete" />
+                  <button
+                    type="button"
+                    class="pwd-toggle-btn"
+                    [attr.aria-label]="showPassword() ? 'Hide password' : 'Show password'"
+                    (click)="togglePasswordVisibility()">
+                    @if (showPassword()) {
+                      <!-- Eye-slash: password visible -->
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/>
+                        <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/>
+                        <line x1="1" y1="1" x2="23" y2="23"/>
+                      </svg>
+                    } @else {
+                      <!-- Eye: password hidden -->
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+                        <circle cx="12" cy="12" r="3"/>
+                      </svg>
+                    }
+                  </button>
+                </div>
+              }
+              @case ('currency') {
+                <div class="currency-wrapper">
+                  <span class="currency-symbol">{{ currencySymbol }}</span>
+                  <input
+                    class="field-input currency-input"
+                    type="text"
+                    inputmode="decimal"
+                    [id]="field.key"
+                    [value]="formattedCurrencyValue"
+                    [placeholder]="field.placeholder || '0.00'"
+                    [disabled]="isFieldDisabled"
+                    (input)="onCurrencyInput($event)"
+                    (blur)="onCurrencyBlur($event)" />
+                </div>
+              }
+              @default { <input class="field-input" [type]="field.type" [id]="field.key" [formControl]="control" [placeholder]="field.placeholder || ''" [readOnly]="field.readOnly || false" [attr.min]="field.min" [attr.max]="field.max" [attr.step]="field.step" [attr.accept]="field.accept" [attr.multiple]="field.multiple ? '' : null" [attr.autocomplete]="field.autocomplete" /> }
+            }
+            @if (field.suffix) { <span class="field-suffix">{{ field.suffix }}</span> }
+          </div>
+          @if (field.hint && !hasError) { <span class="field-hint">{{ field.hint }}</span> }
+          @if (hasError) { <span class="field-error">{{ errorMessage }}</span> }
+        }
+      </div>
+    }
   `, isInline: true, styles: [".amf-field{display:flex;flex-direction:column;gap:6px}.amf-field.field-disabled{opacity:.5;pointer-events:none}.field-label{font-size:.875rem;font-weight:600;color:var(--app-text)}.required-mark{color:#f43f5e;margin-left:2px}.field-input-wrapper{display:flex;align-items:stretch;position:relative}.field-prefix,.field-suffix{padding:10px 12px;font-size:.875rem;color:var(--app-text-muted);background:var(--glass-bg);border:1px solid var(--app-border);display:flex;align-items:center;justify-content:center;white-space:nowrap;box-sizing:border-box}.field-prefix{border-right:none;border-radius:8px 0 0 8px}.field-suffix{border-left:none;border-radius:0 8px 8px 0}.field-input{flex:1;width:100%;padding:10px 14px;border:1px solid var(--app-border);border-radius:8px;background:var(--glass-bg);color:var(--app-text);font-size:.875rem;font-family:inherit;outline:none;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}.has-prefix .field-input{border-top-left-radius:0;border-bottom-left-radius:0}.has-suffix .field-input{border-top-right-radius:0;border-bottom-right-radius:0}.field-input:focus{border-color:var(--app-primary);box-shadow:0 0 0 3px var(--app-primary-light);z-index:3;position:relative}.field-input::placeholder{color:var(--app-text-muted);opacity:.6}.field-input[readonly]{opacity:.7;cursor:not-allowed}.field-input:disabled{opacity:.5;cursor:not-allowed}.has-error .field-input{border-color:#f43f5e}.has-error .field-input:focus{box-shadow:0 0 0 3px #f43f5e26}.field-select{appearance:none;cursor:pointer;padding-right:36px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%2394a3b8' d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 12px center;color-scheme:dark}.field-select option{background-color:#1e1e2d;color:#fff}:host-context([data-color-scheme=\"light\"]) .field-select{color-scheme:light}:host-context([data-color-scheme=\"light\"]) .field-select option{background-color:#fff;color:#000}.field-textarea{resize:vertical;min-height:80px}.field-checkbox-label,.field-radio-label{display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--app-text);cursor:pointer}.field-radio-group{display:flex;flex-direction:column;gap:8px}.field-otp-group{display:flex;gap:8px;justify-content:center;width:100%}.otp-digit{width:44px;height:50px;text-align:center;font-size:1.25rem;font-weight:600;padding:0;letter-spacing:0}.field-toggle-label{display:flex;align-items:center;gap:10px;cursor:pointer}.field-toggle-input{display:none}.field-toggle-track{width:44px;height:24px;background:var(--app-border);border-radius:12px;position:relative;transition:background .2s}.field-toggle-input:checked+.field-toggle-track{background:var(--app-primary)}.field-toggle-thumb{position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s}.field-toggle-input:checked+.field-toggle-track .field-toggle-thumb{transform:translate(20px)}.field-toggle-text{font-size:.875rem;color:var(--app-text)}.field-hint{font-size:.75rem;color:var(--app-text-muted)}.field-error{font-size:.75rem;color:#f43f5e;font-weight:500}.field-heading{font-size:1.125rem;margin-top:8px;color:var(--app-text)}.field-divider{border:none;border-top:1px solid var(--app-border);margin:8px 0}.field-button{padding:10px 20px;border-radius:10px;font-weight:600;font-size:.875rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);border:none;width:100%}.field-button.btn-primary{background:linear-gradient(135deg,var(--app-primary),var(--app-accent));color:#fff}.field-button.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px -4px var(--app-glow)}.field-button.btn-secondary{background:var(--glass-bg);color:var(--app-text);border:1px solid var(--app-border)}.field-button.btn-secondary:hover:not(:disabled){background:var(--glass-bg-hover);border-color:var(--glass-border-light)}.field-button.btn-outline{background:transparent;color:var(--app-text);border:1px solid var(--app-border)}.field-button.btn-outline:hover:not(:disabled){background:var(--glass-bg-hover)}.field-button.btn-success{background:linear-gradient(135deg,#10b981,#34d399);color:#fff}.field-button.btn-success:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px -4px #10b9814d}.field-button.btn-accent{background:linear-gradient(135deg,var(--app-accent),var(--app-primary));color:#fff}.field-button.btn-accent:hover:not(:disabled){transform:translateY(-2px)}.field-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.password-wrapper{position:relative;display:flex;align-items:stretch;width:100%}.password-input{padding-right:44px!important}.pwd-toggle-btn{position:absolute;right:0;top:0;bottom:0;width:42px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:var(--app-text-muted);border-radius:0 8px 8px 0;transition:color .2s;z-index:2}.pwd-toggle-btn:hover{color:var(--app-primary)}.pwd-toggle-btn svg{width:18px;height:18px}.currency-wrapper{display:flex;align-items:stretch;width:100%}.currency-symbol{padding:10px 12px;font-size:.875rem;font-weight:600;color:var(--app-text-muted);background:var(--glass-bg);border:1px solid var(--app-border);border-right:none;border-radius:8px 0 0 8px;display:flex;align-items:center;white-space:nowrap;box-sizing:border-box}.currency-input{border-top-left-radius:0!important;border-bottom-left-radius:0!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormArrayDirective, selector: "[formArray]", inputs: ["formArray"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: RepeaterFieldComponent, selector: "amf-repeater-field", inputs: ["field", "formArray", "formDisabled", "actionDispatcher", "context"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FieldRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: FieldRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'amf-field-renderer', standalone: true, imports: [ReactiveFormsModule, RepeaterFieldComponent], template: `
-    @if (field.type !== 'hidden') {
-      <div class="amf-field" [class]="field.cssClass" [class.has-error]="hasError" [class.field-disabled]="isFieldDisabled">
-        @if (field.type === 'heading') { <h3 class="field-heading">{{ field.text || field.label }}</h3> }
-        @else if (field.type === 'divider') { <hr class="field-divider" /> }
-        @else {
-          @if (field.label && field.type !== 'repeater') { <label class="field-label" [for]="field.key">{{ field.label }} @if (isRequired) { <span class="required-mark">*</span> } </label> }
-          <div class="field-input-wrapper" [class.has-prefix]="!!field.prefix" [class.has-suffix]="!!field.suffix">
-            @if (field.prefix) { <span class="field-prefix">{{ field.prefix }}</span> }
-            @switch (field.type) {
-              @case ('button') {
-                <button type="button" class="field-button" [class]="'btn-' + (field.color || 'primary')" [disabled]="isFieldDisabled" (click)="handleButtonClick()">
-                  {{ field.label }}
-                </button>
-              }
-              @case ('textarea') { <textarea class="field-input field-textarea" [id]="field.key" [formControl]="control" [placeholder]="field.placeholder || ''" [rows]="field.rows || 3" [readOnly]="field.readOnly || false"></textarea> }
-              @case ('select') {
-                <select class="field-input field-select" [id]="field.key" [formControl]="control">
-                  <option value="" disabled>{{ field.placeholder || 'Select...' }}</option>
-                  @for (opt of field.options || []; track opt.value) { <option [value]="opt.value" [disabled]="opt.disabled || false">{{ opt.label }}</option> }
-                </select>
-              }
-              @case ('checkbox') {
-                <label class="field-checkbox-label"><input type="checkbox" class="field-checkbox" [id]="field.key" [formControl]="control" /><span>{{ field.placeholder || field.label }}</span></label>
-              }
-              @case ('toggle') {
-                <label class="field-toggle-label"><input type="checkbox" class="field-toggle-input" [id]="field.key" [formControl]="control" /><span class="field-toggle-track"><span class="field-toggle-thumb"></span></span>@if (field.placeholder) { <span class="field-toggle-text">{{ field.placeholder }}</span> }</label>
-              }
-              @case ('switch') {
-                <label class="field-toggle-label"><input type="checkbox" class="field-toggle-input" [id]="field.key" [formControl]="control" /><span class="field-toggle-track"><span class="field-toggle-thumb"></span></span>@if (field.placeholder) { <span class="field-toggle-text">{{ field.placeholder }}</span> }</label>
-              }
-              @case ('radio') {
-                <div class="field-radio-group">
-                  @for (opt of field.options || []; track opt.value) {
-                    <label class="field-radio-label"><input type="radio" [name]="field.key" [value]="opt.value" [formControl]="control" [attr.disabled]="opt.disabled ? '' : null" /><span>{{ opt.label }}</span></label>
-                  }
-                </div>
-              }
-              @case ('otp') {
-                <div class="field-otp-group">
-                  @for (val of otpArray; track $index) {
-                    <input class="field-input otp-digit" type="text" inputmode="numeric" [value]="val" (input)="onOtpInput($event, $index)" (keydown)="onOtpKeydown($event, $index)" [disabled]="isFieldDisabled" placeholder="•" />
-                  }
-                </div>
-              }
-              @case ('repeater') {
-                <amf-repeater-field
-                  [field]="field"
-                  [formArray]="getFormArray(field.key)"
-                  [formDisabled]="isFieldDisabled"
-                  [actionDispatcher]="actionDispatcher"
-                  [context]="context">
-                </amf-repeater-field>
-              }
-              @case ('password') {
-                <div class="password-wrapper">
-                  <input
-                    class="field-input password-input"
-                    [type]="showPassword() ? 'text' : 'password'"
-                    [id]="field.key"
-                    [formControl]="control"
-                    [placeholder]="field.placeholder || ''"
-                    [readOnly]="field.readOnly || false"
-                    [attr.autocomplete]="field.autocomplete" />
-                  <button
-                    type="button"
-                    class="pwd-toggle-btn"
-                    [attr.aria-label]="showPassword() ? 'Hide password' : 'Show password'"
-                    (click)="togglePasswordVisibility()">
-                    @if (showPassword()) {
-                      <!-- Eye-slash: password visible -->
-                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/>
-                        <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/>
-                        <line x1="1" y1="1" x2="23" y2="23"/>
-                      </svg>
-                    } @else {
-                      <!-- Eye: password hidden -->
-                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
-                        <circle cx="12" cy="12" r="3"/>
-                      </svg>
-                    }
-                  </button>
-                </div>
-              }
-              @case ('currency') {
-                <div class="currency-wrapper">
-                  <span class="currency-symbol">{{ currencySymbol }}</span>
-                  <input
-                    class="field-input currency-input"
-                    type="text"
-                    inputmode="decimal"
-                    [id]="field.key"
-                    [value]="formattedCurrencyValue"
-                    [placeholder]="field.placeholder || '0.00'"
-                    [disabled]="isFieldDisabled"
-                    (input)="onCurrencyInput($event)"
-                    (blur)="onCurrencyBlur($event)" />
-                </div>
-              }
-              @default { <input class="field-input" [type]="field.type" [id]="field.key" [formControl]="control" [placeholder]="field.placeholder || ''" [readOnly]="field.readOnly || false" [attr.min]="field.min" [attr.max]="field.max" [attr.step]="field.step" [attr.accept]="field.accept" [attr.multiple]="field.multiple ? '' : null" [attr.autocomplete]="field.autocomplete" /> }
-            }
-            @if (field.suffix) { <span class="field-suffix">{{ field.suffix }}</span> }
-          </div>
-          @if (field.hint && !hasError) { <span class="field-hint">{{ field.hint }}</span> }
-          @if (hasError) { <span class="field-error">{{ errorMessage }}</span> }
-        }
-      </div>
-    }
+            args: [{ selector: 'amf-field-renderer', standalone: true, imports: [ReactiveFormsModule, RepeaterFieldComponent], template: `
+    @if (field.type !== 'hidden') {
+      <div class="amf-field" [class]="field.cssClass" [class.has-error]="hasError" [class.field-disabled]="isFieldDisabled">
+        @if (field.type === 'heading') { <h3 class="field-heading">{{ field.text || field.label }}</h3> }
+        @else if (field.type === 'divider') { <hr class="field-divider" /> }
+        @else {
+          @if (field.label && field.type !== 'repeater') { <label class="field-label" [for]="field.key">{{ field.label }} @if (isRequired) { <span class="required-mark">*</span> } </label> }
+          <div class="field-input-wrapper" [class.has-prefix]="!!field.prefix" [class.has-suffix]="!!field.suffix">
+            @if (field.prefix) { <span class="field-prefix">{{ field.prefix }}</span> }
+            @switch (field.type) {
+              @case ('button') {
+                <button type="button" class="field-button" [class]="'btn-' + (field.color || 'primary')" [disabled]="isFieldDisabled" (click)="handleButtonClick()">
+                  {{ field.label }}
+                </button>
+              }
+              @case ('textarea') { <textarea class="field-input field-textarea" [id]="field.key" [formControl]="control" [placeholder]="field.placeholder || ''" [rows]="field.rows || 3" [readOnly]="field.readOnly || false"></textarea> }
+              @case ('select') {
+                <select class="field-input field-select" [id]="field.key" [formControl]="control">
+                  <option value="" disabled>{{ field.placeholder || 'Select...' }}</option>
+                  @for (opt of field.options || []; track opt.value) { <option [value]="opt.value" [disabled]="opt.disabled || false">{{ opt.label }}</option> }
+                </select>
+              }
+              @case ('checkbox') {
+                <label class="field-checkbox-label"><input type="checkbox" class="field-checkbox" [id]="field.key" [formControl]="control" /><span>{{ field.placeholder || field.label }}</span></label>
+              }
+              @case ('toggle') {
+                <label class="field-toggle-label"><input type="checkbox" class="field-toggle-input" [id]="field.key" [formControl]="control" /><span class="field-toggle-track"><span class="field-toggle-thumb"></span></span>@if (field.placeholder) { <span class="field-toggle-text">{{ field.placeholder }}</span> }</label>
+              }
+              @case ('switch') {
+                <label class="field-toggle-label"><input type="checkbox" class="field-toggle-input" [id]="field.key" [formControl]="control" /><span class="field-toggle-track"><span class="field-toggle-thumb"></span></span>@if (field.placeholder) { <span class="field-toggle-text">{{ field.placeholder }}</span> }</label>
+              }
+              @case ('radio') {
+                <div class="field-radio-group">
+                  @for (opt of field.options || []; track opt.value) {
+                    <label class="field-radio-label"><input type="radio" [name]="field.key" [value]="opt.value" [formControl]="control" [attr.disabled]="opt.disabled ? '' : null" /><span>{{ opt.label }}</span></label>
+                  }
+                </div>
+              }
+              @case ('otp') {
+                <div class="field-otp-group">
+                  @for (val of otpArray; track $index) {
+                    <input class="field-input otp-digit" type="text" inputmode="numeric" [value]="val" (input)="onOtpInput($event, $index)" (keydown)="onOtpKeydown($event, $index)" [disabled]="isFieldDisabled" placeholder="•" />
+                  }
+                </div>
+              }
+              @case ('repeater') {
+                <amf-repeater-field
+                  [field]="field"
+                  [formArray]="getFormArray(field.key)"
+                  [formDisabled]="isFieldDisabled"
+                  [actionDispatcher]="actionDispatcher"
+                  [context]="context">
+                </amf-repeater-field>
+              }
+              @case ('password') {
+                <div class="password-wrapper">
+                  <input
+                    class="field-input password-input"
+                    [type]="showPassword() ? 'text' : 'password'"
+                    [id]="field.key"
+                    [formControl]="control"
+                    [placeholder]="field.placeholder || ''"
+                    [readOnly]="field.readOnly || false"
+                    [attr.autocomplete]="field.autocomplete" />
+                  <button
+                    type="button"
+                    class="pwd-toggle-btn"
+                    [attr.aria-label]="showPassword() ? 'Hide password' : 'Show password'"
+                    (click)="togglePasswordVisibility()">
+                    @if (showPassword()) {
+                      <!-- Eye-slash: password visible -->
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/>
+                        <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/>
+                        <line x1="1" y1="1" x2="23" y2="23"/>
+                      </svg>
+                    } @else {
+                      <!-- Eye: password hidden -->
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+                        <circle cx="12" cy="12" r="3"/>
+                      </svg>
+                    }
+                  </button>
+                </div>
+              }
+              @case ('currency') {
+                <div class="currency-wrapper">
+                  <span class="currency-symbol">{{ currencySymbol }}</span>
+                  <input
+                    class="field-input currency-input"
+                    type="text"
+                    inputmode="decimal"
+                    [id]="field.key"
+                    [value]="formattedCurrencyValue"
+                    [placeholder]="field.placeholder || '0.00'"
+                    [disabled]="isFieldDisabled"
+                    (input)="onCurrencyInput($event)"
+                    (blur)="onCurrencyBlur($event)" />
+                </div>
+              }
+              @default { <input class="field-input" [type]="field.type" [id]="field.key" [formControl]="control" [placeholder]="field.placeholder || ''" [readOnly]="field.readOnly || false" [attr.min]="field.min" [attr.max]="field.max" [attr.step]="field.step" [attr.accept]="field.accept" [attr.multiple]="field.multiple ? '' : null" [attr.autocomplete]="field.autocomplete" /> }
+            }
+            @if (field.suffix) { <span class="field-suffix">{{ field.suffix }}</span> }
+          </div>
+          @if (field.hint && !hasError) { <span class="field-hint">{{ field.hint }}</span> }
+          @if (hasError) { <span class="field-error">{{ errorMessage }}</span> }
+        }
+      </div>
+    }
   `, styles: [".amf-field{display:flex;flex-direction:column;gap:6px}.amf-field.field-disabled{opacity:.5;pointer-events:none}.field-label{font-size:.875rem;font-weight:600;color:var(--app-text)}.required-mark{color:#f43f5e;margin-left:2px}.field-input-wrapper{display:flex;align-items:stretch;position:relative}.field-prefix,.field-suffix{padding:10px 12px;font-size:.875rem;color:var(--app-text-muted);background:var(--glass-bg);border:1px solid var(--app-border);display:flex;align-items:center;justify-content:center;white-space:nowrap;box-sizing:border-box}.field-prefix{border-right:none;border-radius:8px 0 0 8px}.field-suffix{border-left:none;border-radius:0 8px 8px 0}.field-input{flex:1;width:100%;padding:10px 14px;border:1px solid var(--app-border);border-radius:8px;background:var(--glass-bg);color:var(--app-text);font-size:.875rem;font-family:inherit;outline:none;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}.has-prefix .field-input{border-top-left-radius:0;border-bottom-left-radius:0}.has-suffix .field-input{border-top-right-radius:0;border-bottom-right-radius:0}.field-input:focus{border-color:var(--app-primary);box-shadow:0 0 0 3px var(--app-primary-light);z-index:3;position:relative}.field-input::placeholder{color:var(--app-text-muted);opacity:.6}.field-input[readonly]{opacity:.7;cursor:not-allowed}.field-input:disabled{opacity:.5;cursor:not-allowed}.has-error .field-input{border-color:#f43f5e}.has-error .field-input:focus{box-shadow:0 0 0 3px #f43f5e26}.field-select{appearance:none;cursor:pointer;padding-right:36px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%2394a3b8' d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 12px center;color-scheme:dark}.field-select option{background-color:#1e1e2d;color:#fff}:host-context([data-color-scheme=\"light\"]) .field-select{color-scheme:light}:host-context([data-color-scheme=\"light\"]) .field-select option{background-color:#fff;color:#000}.field-textarea{resize:vertical;min-height:80px}.field-checkbox-label,.field-radio-label{display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--app-text);cursor:pointer}.field-radio-group{display:flex;flex-direction:column;gap:8px}.field-otp-group{display:flex;gap:8px;justify-content:center;width:100%}.otp-digit{width:44px;height:50px;text-align:center;font-size:1.25rem;font-weight:600;padding:0;letter-spacing:0}.field-toggle-label{display:flex;align-items:center;gap:10px;cursor:pointer}.field-toggle-input{display:none}.field-toggle-track{width:44px;height:24px;background:var(--app-border);border-radius:12px;position:relative;transition:background .2s}.field-toggle-input:checked+.field-toggle-track{background:var(--app-primary)}.field-toggle-thumb{position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s}.field-toggle-input:checked+.field-toggle-track .field-toggle-thumb{transform:translate(20px)}.field-toggle-text{font-size:.875rem;color:var(--app-text)}.field-hint{font-size:.75rem;color:var(--app-text-muted)}.field-error{font-size:.75rem;color:#f43f5e;font-weight:500}.field-heading{font-size:1.125rem;margin-top:8px;color:var(--app-text)}.field-divider{border:none;border-top:1px solid var(--app-border);margin:8px 0}.field-button{padding:10px 20px;border-radius:10px;font-weight:600;font-size:.875rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);border:none;width:100%}.field-button.btn-primary{background:linear-gradient(135deg,var(--app-primary),var(--app-accent));color:#fff}.field-button.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px -4px var(--app-glow)}.field-button.btn-secondary{background:var(--glass-bg);color:var(--app-text);border:1px solid var(--app-border)}.field-button.btn-secondary:hover:not(:disabled){background:var(--glass-bg-hover);border-color:var(--glass-border-light)}.field-button.btn-outline{background:transparent;color:var(--app-text);border:1px solid var(--app-border)}.field-button.btn-outline:hover:not(:disabled){background:var(--glass-bg-hover)}.field-button.btn-success{background:linear-gradient(135deg,#10b981,#34d399);color:#fff}.field-button.btn-success:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px -4px #10b9814d}.field-button.btn-accent{background:linear-gradient(135deg,var(--app-accent),var(--app-primary));color:#fff}.field-button.btn-accent:hover:not(:disabled){transform:translateY(-2px)}.field-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.password-wrapper{position:relative;display:flex;align-items:stretch;width:100%}.password-input{padding-right:44px!important}.pwd-toggle-btn{position:absolute;right:0;top:0;bottom:0;width:42px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:var(--app-text-muted);border-radius:0 8px 8px 0;transition:color .2s;z-index:2}.pwd-toggle-btn:hover{color:var(--app-primary)}.pwd-toggle-btn svg{width:18px;height:18px}.currency-wrapper{display:flex;align-items:stretch;width:100%}.currency-symbol{padding:10px 12px;font-size:.875rem;font-weight:600;color:var(--app-text-muted);background:var(--glass-bg);border:1px solid var(--app-border);border-right:none;border-radius:8px 0 0 8px;display:flex;align-items:center;white-space:nowrap;box-sizing:border-box}.currency-input{border-top-left-radius:0!important;border-bottom-left-radius:0!important}\n"] }]
         }], propDecorators: { field: [{
                 type: Input
@@ -3757,41 +3757,41 @@ class FormRendererComponent {
         return controls;
     }
     markAllTouched() { Object.values(this.formGroup.controls).forEach(c => c.markAsTouched()); }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FormRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: FormRendererComponent, isStandalone: true, selector: "amf-form-renderer", inputs: { config: "config", context: "context" }, outputs: { formSubmit: "formSubmit", formCancel: "formCancel", formChange: "formChange" }, usesOnChanges: true, ngImport: i0, template: `
-    <form [formGroup]="formGroup" (ngSubmit)="onSubmit()" class="amf-form" [class]="config.cssClass" [class.form-disabled]="config.disabled">
-      <div class="amf-form-fields" [class]="layoutClass" [style.grid-template-columns]="gridColumns">
-        @for (field of visibleFields; track field.key) {
-          <amf-field-renderer [field]="field" [form]="formGroup" [formDisabled]="!!config.disabled" [actionDispatcher]="actionDispatcher" [context]="context" [style.grid-column]="field.colSpan ? 'span ' + field.colSpan : null"></amf-field-renderer>
-        }
-      </div>
-      @if (!config.hideSubmit) {
-        <div class="amf-form-actions">
-          @if (config.showCancel) { <button type="button" class="btn-secondary" (click)="handleCancel()" [disabled]="config.disabled">{{ config.cancelLabel || 'Cancel' }}</button> }
-          @if (config.showReset) { <button type="button" class="btn-secondary" (click)="formGroup.reset()" [disabled]="config.disabled">Reset</button> }
-          <button type="submit" class="btn-primary" [disabled]="formGroup.invalid || config.disabled">{{ config.submitLabel || 'Submit' }}</button>
-        </div>
-      }
-    </form>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: FormRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: FormRendererComponent, isStandalone: true, selector: "amf-form-renderer", inputs: { config: "config", context: "context" }, outputs: { formSubmit: "formSubmit", formCancel: "formCancel", formChange: "formChange" }, usesOnChanges: true, ngImport: i0, template: `
+    <form [formGroup]="formGroup" (ngSubmit)="onSubmit()" class="amf-form" [class]="config.cssClass" [class.form-disabled]="config.disabled">
+      <div class="amf-form-fields" [class]="layoutClass" [style.grid-template-columns]="gridColumns">
+        @for (field of visibleFields; track field.key) {
+          <amf-field-renderer [field]="field" [form]="formGroup" [formDisabled]="!!config.disabled" [actionDispatcher]="actionDispatcher" [context]="context" [style.grid-column]="field.colSpan ? 'span ' + field.colSpan : null"></amf-field-renderer>
+        }
+      </div>
+      @if (!config.hideSubmit) {
+        <div class="amf-form-actions">
+          @if (config.showCancel) { <button type="button" class="btn-secondary" (click)="handleCancel()" [disabled]="config.disabled">{{ config.cancelLabel || 'Cancel' }}</button> }
+          @if (config.showReset) { <button type="button" class="btn-secondary" (click)="formGroup.reset()" [disabled]="config.disabled">Reset</button> }
+          <button type="submit" class="btn-primary" [disabled]="formGroup.invalid || config.disabled">{{ config.submitLabel || 'Submit' }}</button>
+        </div>
+      }
+    </form>
   `, isInline: true, styles: [".amf-form{display:flex;flex-direction:column;gap:24px}.amf-form.form-disabled{opacity:.6;pointer-events:none}.amf-form-fields{display:flex;flex-direction:column;gap:20px}.amf-form-fields.layout-grid{display:grid;gap:20px}.amf-form-fields.layout-horizontal{flex-direction:row;flex-wrap:wrap;gap:16px}.amf-form-fields.layout-horizontal>*{flex:1;min-width:200px}.amf-form-fields.layout-inline{flex-direction:row;align-items:flex-end;gap:12px}.amf-form-actions{display:flex;justify-content:flex-end;gap:12px;padding-top:8px;border-top:1px solid var(--app-border)}.btn-primary{background:linear-gradient(135deg,var(--app-primary),var(--app-accent));color:var(--app-on-primary, #fff);border:none;padding:10px 24px;border-radius:10px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px -4px var(--app-glow)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-secondary{background:var(--glass-bg);color:var(--app-text);border:1px solid var(--app-border);padding:10px 24px;border-radius:10px;font-weight:600;cursor:pointer;transition:all .2s}.btn-secondary:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-light)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FieldRendererComponent, selector: "amf-field-renderer", inputs: ["field", "form", "formDisabled", "actionDispatcher", "context"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FormRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: FormRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'amf-form-renderer', standalone: true, imports: [ReactiveFormsModule, FieldRendererComponent], template: `
-    <form [formGroup]="formGroup" (ngSubmit)="onSubmit()" class="amf-form" [class]="config.cssClass" [class.form-disabled]="config.disabled">
-      <div class="amf-form-fields" [class]="layoutClass" [style.grid-template-columns]="gridColumns">
-        @for (field of visibleFields; track field.key) {
-          <amf-field-renderer [field]="field" [form]="formGroup" [formDisabled]="!!config.disabled" [actionDispatcher]="actionDispatcher" [context]="context" [style.grid-column]="field.colSpan ? 'span ' + field.colSpan : null"></amf-field-renderer>
-        }
-      </div>
-      @if (!config.hideSubmit) {
-        <div class="amf-form-actions">
-          @if (config.showCancel) { <button type="button" class="btn-secondary" (click)="handleCancel()" [disabled]="config.disabled">{{ config.cancelLabel || 'Cancel' }}</button> }
-          @if (config.showReset) { <button type="button" class="btn-secondary" (click)="formGroup.reset()" [disabled]="config.disabled">Reset</button> }
-          <button type="submit" class="btn-primary" [disabled]="formGroup.invalid || config.disabled">{{ config.submitLabel || 'Submit' }}</button>
-        </div>
-      }
-    </form>
+            args: [{ selector: 'amf-form-renderer', standalone: true, imports: [ReactiveFormsModule, FieldRendererComponent], template: `
+    <form [formGroup]="formGroup" (ngSubmit)="onSubmit()" class="amf-form" [class]="config.cssClass" [class.form-disabled]="config.disabled">
+      <div class="amf-form-fields" [class]="layoutClass" [style.grid-template-columns]="gridColumns">
+        @for (field of visibleFields; track field.key) {
+          <amf-field-renderer [field]="field" [form]="formGroup" [formDisabled]="!!config.disabled" [actionDispatcher]="actionDispatcher" [context]="context" [style.grid-column]="field.colSpan ? 'span ' + field.colSpan : null"></amf-field-renderer>
+        }
+      </div>
+      @if (!config.hideSubmit) {
+        <div class="amf-form-actions">
+          @if (config.showCancel) { <button type="button" class="btn-secondary" (click)="handleCancel()" [disabled]="config.disabled">{{ config.cancelLabel || 'Cancel' }}</button> }
+          @if (config.showReset) { <button type="button" class="btn-secondary" (click)="formGroup.reset()" [disabled]="config.disabled">Reset</button> }
+          <button type="submit" class="btn-primary" [disabled]="formGroup.invalid || config.disabled">{{ config.submitLabel || 'Submit' }}</button>
+        </div>
+      }
+    </form>
   `, styles: [".amf-form{display:flex;flex-direction:column;gap:24px}.amf-form.form-disabled{opacity:.6;pointer-events:none}.amf-form-fields{display:flex;flex-direction:column;gap:20px}.amf-form-fields.layout-grid{display:grid;gap:20px}.amf-form-fields.layout-horizontal{flex-direction:row;flex-wrap:wrap;gap:16px}.amf-form-fields.layout-horizontal>*{flex:1;min-width:200px}.amf-form-fields.layout-inline{flex-direction:row;align-items:flex-end;gap:12px}.amf-form-actions{display:flex;justify-content:flex-end;gap:12px;padding-top:8px;border-top:1px solid var(--app-border)}.btn-primary{background:linear-gradient(135deg,var(--app-primary),var(--app-accent));color:var(--app-on-primary, #fff);border:none;padding:10px 24px;border-radius:10px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px -4px var(--app-glow)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-secondary{background:var(--glass-bg);color:var(--app-text);border:1px solid var(--app-border);padding:10px 24px;border-radius:10px;font-weight:600;cursor:pointer;transition:all .2s}.btn-secondary:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-light)}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
@@ -4045,215 +4045,215 @@ class StepperFormRendererComponent {
         }
         return controls;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StepperFormRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: StepperFormRendererComponent, isStandalone: true, selector: "amf-stepper-form-renderer", inputs: { config: "config", context: "context" }, outputs: { formSubmit: "formSubmit", formCancel: "formCancel" }, usesOnChanges: true, ngImport: i0, template: `
-    <div class="amf-stepper" [class]="config.cssClass" [class.stepper-disabled]="config.disabled">
-
-      <!-- ─── Step Header ──────────────────────────────────── -->
-      <div class="stepper-header">
-        @for (step of resolvedSteps(); track $index) {
-          <div class="step-item"
-               [class.active]="$index === currentStep()"
-               [class.completed]="isCompleted($index)"
-               [class.skipped]="isSkipped($index)"
-               [class.navigable]="canNavigateTo($index)"
-               (click)="canNavigateTo($index) && goToStep($index)">
-            <div class="step-indicator">
-              @if (isCompleted($index)) {
-                <svg class="check-icon" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
-              } @else if (isSkipped($index)) {
-                <svg class="skip-icon" viewBox="0 0 24 24"><path d="M6 18l8.5-6L6 6v12zm2-8.14L11.03 12 8 14.14V9.86zM16 6h2v12h-2z"/></svg>
-              } @else {
-                <span class="step-number">{{ $index + 1 }}</span>
-              }
-            </div>
-            <div class="step-label-group">
-              <span class="step-title">{{ step.title }}</span>
-              @if (step.description) { <span class="step-description">{{ step.description }}</span> }
-            </div>
-            @if ($index < resolvedSteps().length - 1) {
-              <div class="step-connector" [class.completed]="isCompleted($index)"></div>
-            }
-          </div>
-        }
-      </div>
-
-      <!-- ─── Mobile Progress Bar ───────────────────────────── -->
-      <div class="stepper-progress-mobile">
-        <span class="progress-label">Step {{ currentStep() + 1 }} of {{ resolvedSteps().length }}: {{ resolvedSteps()[currentStep()]?.title }}</span>
-        <div class="progress-bar-track">
-          <div class="progress-bar-fill" [style.width.%]="progressPercent()"></div>
-        </div>
-      </div>
-
-      <!-- ─── Step Content ─────────────────────────────────── -->
-      <form [formGroup]="formGroup" (ngSubmit)="onSubmit()" class="stepper-form-body">
-        <div class="step-content">
-          <div class="step-fields" [style.grid-template-columns]="currentGridColumns()">
-            @for (field of currentStepVisibleFields(); track field.key) {
-              <amf-field-renderer
-                [field]="field"
-                [form]="formGroup"
-                [formDisabled]="!!config.disabled"
-                [actionDispatcher]="actionDispatcher"
-                [context]="context"
-                [style.grid-column]="field.colSpan ? 'span ' + field.colSpan : null">
-              </amf-field-renderer>
-            }
-          </div>
-
-          <!-- Step-level validation error summary -->
-          @if (stepErrors().length) {
-            <div class="step-error-summary">
-              <svg viewBox="0 0 24 24" class="error-summary-icon"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
-              <span>Please fix {{ stepErrors().length }} error{{ stepErrors().length > 1 ? 's' : '' }} before continuing.</span>
-            </div>
-          }
-        </div>
-
-        <!-- ─── Navigation Actions ────────────────────────────── -->
-        <div class="stepper-actions">
-          <div class="stepper-actions-left">
-            @if (config.showReset) {
-              <button type="button" class="btn-reset" (click)="resetForm()" [disabled]="config.disabled">
-                <svg viewBox="0 0 24 24"><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg>
-                {{ config.resetLabel || 'Start Over' }}
-              </button>
-            }
-            @if (currentStep() > 0) {
-              <button type="button" class="btn-back" (click)="goBack()" [disabled]="config.disabled">
-                <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
-                Back
-              </button>
-            }
-          </div>
-          <div class="stepper-actions-right">
-            @if (resolvedSteps()[currentStep()]?.optional) {
-              <button type="button" class="btn-skip" (click)="skipStep()" [disabled]="config.disabled">Skip</button>
-            }
-            @if (currentStep() < resolvedSteps().length - 1) {
-              <button type="button" class="btn-next" (click)="goNext()" [disabled]="config.disabled">
-                {{ resolvedSteps()[currentStep() + 1] ? 'Next' : 'Review' }}
-                <svg viewBox="0 0 24 24"><path d="M4 11v2h12l-5.59 5.59L12 20l8-8-8-8-1.41 1.41L16 11H4z"/></svg>
-              </button>
-            } @else {
-              @if (!config.hideSubmit) {
-                <button type="submit" class="btn-submit" [disabled]="formGroup.invalid || config.disabled">
-                  {{ config.submitLabel || 'Submit' }}
-                  <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
-                </button>
-              }
-            }
-          </div>
-        </div>
-      </form>
-    </div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: StepperFormRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: StepperFormRendererComponent, isStandalone: true, selector: "amf-stepper-form-renderer", inputs: { config: "config", context: "context" }, outputs: { formSubmit: "formSubmit", formCancel: "formCancel" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="amf-stepper" [class]="config.cssClass" [class.stepper-disabled]="config.disabled">
+
+      <!-- ─── Step Header ──────────────────────────────────── -->
+      <div class="stepper-header">
+        @for (step of resolvedSteps(); track $index) {
+          <div class="step-item"
+               [class.active]="$index === currentStep()"
+               [class.completed]="isCompleted($index)"
+               [class.skipped]="isSkipped($index)"
+               [class.navigable]="canNavigateTo($index)"
+               (click)="canNavigateTo($index) && goToStep($index)">
+            <div class="step-indicator">
+              @if (isCompleted($index)) {
+                <svg class="check-icon" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+              } @else if (isSkipped($index)) {
+                <svg class="skip-icon" viewBox="0 0 24 24"><path d="M6 18l8.5-6L6 6v12zm2-8.14L11.03 12 8 14.14V9.86zM16 6h2v12h-2z"/></svg>
+              } @else {
+                <span class="step-number">{{ $index + 1 }}</span>
+              }
+            </div>
+            <div class="step-label-group">
+              <span class="step-title">{{ step.title }}</span>
+              @if (step.description) { <span class="step-description">{{ step.description }}</span> }
+            </div>
+            @if ($index < resolvedSteps().length - 1) {
+              <div class="step-connector" [class.completed]="isCompleted($index)"></div>
+            }
+          </div>
+        }
+      </div>
+
+      <!-- ─── Mobile Progress Bar ───────────────────────────── -->
+      <div class="stepper-progress-mobile">
+        <span class="progress-label">Step {{ currentStep() + 1 }} of {{ resolvedSteps().length }}: {{ resolvedSteps()[currentStep()]?.title }}</span>
+        <div class="progress-bar-track">
+          <div class="progress-bar-fill" [style.width.%]="progressPercent()"></div>
+        </div>
+      </div>
+
+      <!-- ─── Step Content ─────────────────────────────────── -->
+      <form [formGroup]="formGroup" (ngSubmit)="onSubmit()" class="stepper-form-body">
+        <div class="step-content">
+          <div class="step-fields" [style.grid-template-columns]="currentGridColumns()">
+            @for (field of currentStepVisibleFields(); track field.key) {
+              <amf-field-renderer
+                [field]="field"
+                [form]="formGroup"
+                [formDisabled]="!!config.disabled"
+                [actionDispatcher]="actionDispatcher"
+                [context]="context"
+                [style.grid-column]="field.colSpan ? 'span ' + field.colSpan : null">
+              </amf-field-renderer>
+            }
+          </div>
+
+          <!-- Step-level validation error summary -->
+          @if (stepErrors().length) {
+            <div class="step-error-summary">
+              <svg viewBox="0 0 24 24" class="error-summary-icon"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
+              <span>Please fix {{ stepErrors().length }} error{{ stepErrors().length > 1 ? 's' : '' }} before continuing.</span>
+            </div>
+          }
+        </div>
+
+        <!-- ─── Navigation Actions ────────────────────────────── -->
+        <div class="stepper-actions">
+          <div class="stepper-actions-left">
+            @if (config.showReset) {
+              <button type="button" class="btn-reset" (click)="resetForm()" [disabled]="config.disabled">
+                <svg viewBox="0 0 24 24"><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg>
+                {{ config.resetLabel || 'Start Over' }}
+              </button>
+            }
+            @if (currentStep() > 0) {
+              <button type="button" class="btn-back" (click)="goBack()" [disabled]="config.disabled">
+                <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+                Back
+              </button>
+            }
+          </div>
+          <div class="stepper-actions-right">
+            @if (resolvedSteps()[currentStep()]?.optional) {
+              <button type="button" class="btn-skip" (click)="skipStep()" [disabled]="config.disabled">Skip</button>
+            }
+            @if (currentStep() < resolvedSteps().length - 1) {
+              <button type="button" class="btn-next" (click)="goNext()" [disabled]="config.disabled">
+                {{ resolvedSteps()[currentStep() + 1] ? 'Next' : 'Review' }}
+                <svg viewBox="0 0 24 24"><path d="M4 11v2h12l-5.59 5.59L12 20l8-8-8-8-1.41 1.41L16 11H4z"/></svg>
+              </button>
+            } @else {
+              @if (!config.hideSubmit) {
+                <button type="submit" class="btn-submit" [disabled]="formGroup.invalid || config.disabled">
+                  {{ config.submitLabel || 'Submit' }}
+                  <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+                </button>
+              }
+            }
+          </div>
+        </div>
+      </form>
+    </div>
   `, isInline: true, styles: [".amf-stepper{display:flex;flex-direction:column;gap:0}.amf-stepper.stepper-disabled{opacity:.6;pointer-events:none}.stepper-header{display:flex;align-items:flex-start;gap:0;padding:20px 24px 0;overflow-x:auto;scrollbar-width:none}.stepper-header::-webkit-scrollbar{display:none}.step-item{display:flex;align-items:center;flex:1;min-width:0;cursor:default;position:relative}.step-item.navigable{cursor:pointer}.step-item.navigable:hover .step-indicator{border-color:var(--app-primary)}.step-item.navigable:hover .step-title{color:var(--app-text)}.step-indicator{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:2px solid var(--app-border);background:var(--app-surface);display:flex;align-items:center;justify-content:center;transition:all .35s cubic-bezier(.4,0,.2,1);position:relative;z-index:1}.step-item.active .step-indicator{border-color:var(--app-primary);background:var(--app-primary);box-shadow:0 0 0 4px rgba(var(--app-primary-rgb, 99 102 241),.18)}.step-item.completed .step-indicator{border-color:#22c55e;background:#22c55e}.step-item.skipped .step-indicator{border-color:var(--app-text-muted);background:var(--glass-bg)}.step-number{font-size:.8125rem;font-weight:700;color:var(--app-text-muted)}.step-item.active .step-number{color:#fff}.check-icon,.skip-icon{width:18px;height:18px;fill:#fff}.skip-icon{fill:var(--app-text-muted)}.step-label-group{display:flex;flex-direction:column;margin-left:10px;min-width:0;flex-shrink:0}.step-title{font-size:.8125rem;font-weight:600;color:var(--app-text-muted);white-space:nowrap;transition:color .2s}.step-item.active .step-title{color:var(--app-text)}.step-item.completed .step-title{color:var(--app-text-muted)}.step-description{font-size:.6875rem;color:var(--app-text-muted);opacity:.7;white-space:nowrap;margin-top:1px}.step-connector{flex:1;height:2px;background:var(--app-border);margin:0 10px 14px;border-radius:1px;transition:background .4s ease;align-self:center}.step-connector.completed{background:linear-gradient(90deg,#22c55e,var(--app-primary))}.stepper-progress-mobile{display:none;flex-direction:column;gap:8px;padding:16px 24px 0}@media(max-width:640px){.stepper-header{display:none}.stepper-progress-mobile{display:flex}}.progress-label{font-size:.8125rem;font-weight:600;color:var(--app-text)}.progress-bar-track{width:100%;height:6px;background:var(--app-border);border-radius:3px;overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--app-primary),var(--app-accent));border-radius:3px;transition:width .4s cubic-bezier(.4,0,.2,1)}.stepper-form-body{display:flex;flex-direction:column;gap:24px;padding:24px}.step-content{animation:stepFadeIn .3s ease-out}@keyframes stepFadeIn{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}.step-fields{display:grid;grid-template-columns:1fr;gap:20px}.step-error-summary{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#f43f5e14;border:1px solid rgba(244,63,94,.25);border-radius:10px;margin-top:8px;animation:stepFadeIn .2s ease-out}.error-summary-icon{width:18px;height:18px;fill:#f43f5e;flex-shrink:0}.step-error-summary span{font-size:.8125rem;color:#f43f5e;font-weight:500}.stepper-actions{display:flex;justify-content:space-between;align-items:center;padding-top:8px;border-top:1px solid var(--app-border)}.stepper-actions-left,.stepper-actions-right{display:flex;gap:10px;align-items:center}.btn-reset{display:flex;align-items:center;gap:6px;background:transparent;color:#ef4444;border:1px solid rgba(239,68,68,.3);padding:10px 20px;border-radius:10px;font-weight:600;font-size:.875rem;cursor:pointer;transition:all .2s}.btn-reset svg{width:16px;height:16px;fill:currentColor}.btn-reset:hover{background:#ef44441a;border-color:#ef444480}.btn-reset:disabled{opacity:.5;cursor:not-allowed}.btn-back{display:flex;align-items:center;gap:6px;background:var(--glass-bg);color:var(--app-text);border:1px solid var(--app-border);padding:10px 20px;border-radius:10px;font-weight:600;font-size:.875rem;cursor:pointer;transition:all .2s}.btn-back svg{width:16px;height:16px;fill:currentColor}.btn-back:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-light)}.btn-back:disabled{opacity:.5;cursor:not-allowed}.btn-skip{background:transparent;color:var(--app-text-muted);border:none;padding:10px 16px;border-radius:10px;font-weight:500;font-size:.8125rem;cursor:pointer;transition:color .2s}.btn-skip:hover{color:var(--app-primary)}.btn-skip:disabled{opacity:.5;cursor:not-allowed}.btn-next{display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--app-primary),var(--app-accent));color:#fff;border:none;padding:10px 24px;border-radius:10px;font-weight:600;font-size:.875rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn-next svg{width:16px;height:16px;fill:currentColor}.btn-next:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px -4px var(--app-glow)}.btn-next:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-submit{display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border:none;padding:10px 28px;border-radius:10px;font-weight:600;font-size:.875rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn-submit svg{width:16px;height:16px;fill:currentColor}.btn-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px -4px #22c55e59}.btn-submit:disabled{opacity:.5;cursor:not-allowed;transform:none}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FieldRendererComponent, selector: "amf-field-renderer", inputs: ["field", "form", "formDisabled", "actionDispatcher", "context"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StepperFormRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: StepperFormRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'amf-stepper-form-renderer', standalone: true, imports: [ReactiveFormsModule, FieldRendererComponent], template: `
-    <div class="amf-stepper" [class]="config.cssClass" [class.stepper-disabled]="config.disabled">
-
-      <!-- ─── Step Header ──────────────────────────────────── -->
-      <div class="stepper-header">
-        @for (step of resolvedSteps(); track $index) {
-          <div class="step-item"
-               [class.active]="$index === currentStep()"
-               [class.completed]="isCompleted($index)"
-               [class.skipped]="isSkipped($index)"
-               [class.navigable]="canNavigateTo($index)"
-               (click)="canNavigateTo($index) && goToStep($index)">
-            <div class="step-indicator">
-              @if (isCompleted($index)) {
-                <svg class="check-icon" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
-              } @else if (isSkipped($index)) {
-                <svg class="skip-icon" viewBox="0 0 24 24"><path d="M6 18l8.5-6L6 6v12zm2-8.14L11.03 12 8 14.14V9.86zM16 6h2v12h-2z"/></svg>
-              } @else {
-                <span class="step-number">{{ $index + 1 }}</span>
-              }
-            </div>
-            <div class="step-label-group">
-              <span class="step-title">{{ step.title }}</span>
-              @if (step.description) { <span class="step-description">{{ step.description }}</span> }
-            </div>
-            @if ($index < resolvedSteps().length - 1) {
-              <div class="step-connector" [class.completed]="isCompleted($index)"></div>
-            }
-          </div>
-        }
-      </div>
-
-      <!-- ─── Mobile Progress Bar ───────────────────────────── -->
-      <div class="stepper-progress-mobile">
-        <span class="progress-label">Step {{ currentStep() + 1 }} of {{ resolvedSteps().length }}: {{ resolvedSteps()[currentStep()]?.title }}</span>
-        <div class="progress-bar-track">
-          <div class="progress-bar-fill" [style.width.%]="progressPercent()"></div>
-        </div>
-      </div>
-
-      <!-- ─── Step Content ─────────────────────────────────── -->
-      <form [formGroup]="formGroup" (ngSubmit)="onSubmit()" class="stepper-form-body">
-        <div class="step-content">
-          <div class="step-fields" [style.grid-template-columns]="currentGridColumns()">
-            @for (field of currentStepVisibleFields(); track field.key) {
-              <amf-field-renderer
-                [field]="field"
-                [form]="formGroup"
-                [formDisabled]="!!config.disabled"
-                [actionDispatcher]="actionDispatcher"
-                [context]="context"
-                [style.grid-column]="field.colSpan ? 'span ' + field.colSpan : null">
-              </amf-field-renderer>
-            }
-          </div>
-
-          <!-- Step-level validation error summary -->
-          @if (stepErrors().length) {
-            <div class="step-error-summary">
-              <svg viewBox="0 0 24 24" class="error-summary-icon"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
-              <span>Please fix {{ stepErrors().length }} error{{ stepErrors().length > 1 ? 's' : '' }} before continuing.</span>
-            </div>
-          }
-        </div>
-
-        <!-- ─── Navigation Actions ────────────────────────────── -->
-        <div class="stepper-actions">
-          <div class="stepper-actions-left">
-            @if (config.showReset) {
-              <button type="button" class="btn-reset" (click)="resetForm()" [disabled]="config.disabled">
-                <svg viewBox="0 0 24 24"><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg>
-                {{ config.resetLabel || 'Start Over' }}
-              </button>
-            }
-            @if (currentStep() > 0) {
-              <button type="button" class="btn-back" (click)="goBack()" [disabled]="config.disabled">
-                <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
-                Back
-              </button>
-            }
-          </div>
-          <div class="stepper-actions-right">
-            @if (resolvedSteps()[currentStep()]?.optional) {
-              <button type="button" class="btn-skip" (click)="skipStep()" [disabled]="config.disabled">Skip</button>
-            }
-            @if (currentStep() < resolvedSteps().length - 1) {
-              <button type="button" class="btn-next" (click)="goNext()" [disabled]="config.disabled">
-                {{ resolvedSteps()[currentStep() + 1] ? 'Next' : 'Review' }}
-                <svg viewBox="0 0 24 24"><path d="M4 11v2h12l-5.59 5.59L12 20l8-8-8-8-1.41 1.41L16 11H4z"/></svg>
-              </button>
-            } @else {
-              @if (!config.hideSubmit) {
-                <button type="submit" class="btn-submit" [disabled]="formGroup.invalid || config.disabled">
-                  {{ config.submitLabel || 'Submit' }}
-                  <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
-                </button>
-              }
-            }
-          </div>
-        </div>
-      </form>
-    </div>
+            args: [{ selector: 'amf-stepper-form-renderer', standalone: true, imports: [ReactiveFormsModule, FieldRendererComponent], template: `
+    <div class="amf-stepper" [class]="config.cssClass" [class.stepper-disabled]="config.disabled">
+
+      <!-- ─── Step Header ──────────────────────────────────── -->
+      <div class="stepper-header">
+        @for (step of resolvedSteps(); track $index) {
+          <div class="step-item"
+               [class.active]="$index === currentStep()"
+               [class.completed]="isCompleted($index)"
+               [class.skipped]="isSkipped($index)"
+               [class.navigable]="canNavigateTo($index)"
+               (click)="canNavigateTo($index) && goToStep($index)">
+            <div class="step-indicator">
+              @if (isCompleted($index)) {
+                <svg class="check-icon" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+              } @else if (isSkipped($index)) {
+                <svg class="skip-icon" viewBox="0 0 24 24"><path d="M6 18l8.5-6L6 6v12zm2-8.14L11.03 12 8 14.14V9.86zM16 6h2v12h-2z"/></svg>
+              } @else {
+                <span class="step-number">{{ $index + 1 }}</span>
+              }
+            </div>
+            <div class="step-label-group">
+              <span class="step-title">{{ step.title }}</span>
+              @if (step.description) { <span class="step-description">{{ step.description }}</span> }
+            </div>
+            @if ($index < resolvedSteps().length - 1) {
+              <div class="step-connector" [class.completed]="isCompleted($index)"></div>
+            }
+          </div>
+        }
+      </div>
+
+      <!-- ─── Mobile Progress Bar ───────────────────────────── -->
+      <div class="stepper-progress-mobile">
+        <span class="progress-label">Step {{ currentStep() + 1 }} of {{ resolvedSteps().length }}: {{ resolvedSteps()[currentStep()]?.title }}</span>
+        <div class="progress-bar-track">
+          <div class="progress-bar-fill" [style.width.%]="progressPercent()"></div>
+        </div>
+      </div>
+
+      <!-- ─── Step Content ─────────────────────────────────── -->
+      <form [formGroup]="formGroup" (ngSubmit)="onSubmit()" class="stepper-form-body">
+        <div class="step-content">
+          <div class="step-fields" [style.grid-template-columns]="currentGridColumns()">
+            @for (field of currentStepVisibleFields(); track field.key) {
+              <amf-field-renderer
+                [field]="field"
+                [form]="formGroup"
+                [formDisabled]="!!config.disabled"
+                [actionDispatcher]="actionDispatcher"
+                [context]="context"
+                [style.grid-column]="field.colSpan ? 'span ' + field.colSpan : null">
+              </amf-field-renderer>
+            }
+          </div>
+
+          <!-- Step-level validation error summary -->
+          @if (stepErrors().length) {
+            <div class="step-error-summary">
+              <svg viewBox="0 0 24 24" class="error-summary-icon"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
+              <span>Please fix {{ stepErrors().length }} error{{ stepErrors().length > 1 ? 's' : '' }} before continuing.</span>
+            </div>
+          }
+        </div>
+
+        <!-- ─── Navigation Actions ────────────────────────────── -->
+        <div class="stepper-actions">
+          <div class="stepper-actions-left">
+            @if (config.showReset) {
+              <button type="button" class="btn-reset" (click)="resetForm()" [disabled]="config.disabled">
+                <svg viewBox="0 0 24 24"><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg>
+                {{ config.resetLabel || 'Start Over' }}
+              </button>
+            }
+            @if (currentStep() > 0) {
+              <button type="button" class="btn-back" (click)="goBack()" [disabled]="config.disabled">
+                <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+                Back
+              </button>
+            }
+          </div>
+          <div class="stepper-actions-right">
+            @if (resolvedSteps()[currentStep()]?.optional) {
+              <button type="button" class="btn-skip" (click)="skipStep()" [disabled]="config.disabled">Skip</button>
+            }
+            @if (currentStep() < resolvedSteps().length - 1) {
+              <button type="button" class="btn-next" (click)="goNext()" [disabled]="config.disabled">
+                {{ resolvedSteps()[currentStep() + 1] ? 'Next' : 'Review' }}
+                <svg viewBox="0 0 24 24"><path d="M4 11v2h12l-5.59 5.59L12 20l8-8-8-8-1.41 1.41L16 11H4z"/></svg>
+              </button>
+            } @else {
+              @if (!config.hideSubmit) {
+                <button type="submit" class="btn-submit" [disabled]="formGroup.invalid || config.disabled">
+                  {{ config.submitLabel || 'Submit' }}
+                  <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+                </button>
+              }
+            }
+          </div>
+        </div>
+      </form>
+    </div>
   `, styles: [".amf-stepper{display:flex;flex-direction:column;gap:0}.amf-stepper.stepper-disabled{opacity:.6;pointer-events:none}.stepper-header{display:flex;align-items:flex-start;gap:0;padding:20px 24px 0;overflow-x:auto;scrollbar-width:none}.stepper-header::-webkit-scrollbar{display:none}.step-item{display:flex;align-items:center;flex:1;min-width:0;cursor:default;position:relative}.step-item.navigable{cursor:pointer}.step-item.navigable:hover .step-indicator{border-color:var(--app-primary)}.step-item.navigable:hover .step-title{color:var(--app-text)}.step-indicator{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:2px solid var(--app-border);background:var(--app-surface);display:flex;align-items:center;justify-content:center;transition:all .35s cubic-bezier(.4,0,.2,1);position:relative;z-index:1}.step-item.active .step-indicator{border-color:var(--app-primary);background:var(--app-primary);box-shadow:0 0 0 4px rgba(var(--app-primary-rgb, 99 102 241),.18)}.step-item.completed .step-indicator{border-color:#22c55e;background:#22c55e}.step-item.skipped .step-indicator{border-color:var(--app-text-muted);background:var(--glass-bg)}.step-number{font-size:.8125rem;font-weight:700;color:var(--app-text-muted)}.step-item.active .step-number{color:#fff}.check-icon,.skip-icon{width:18px;height:18px;fill:#fff}.skip-icon{fill:var(--app-text-muted)}.step-label-group{display:flex;flex-direction:column;margin-left:10px;min-width:0;flex-shrink:0}.step-title{font-size:.8125rem;font-weight:600;color:var(--app-text-muted);white-space:nowrap;transition:color .2s}.step-item.active .step-title{color:var(--app-text)}.step-item.completed .step-title{color:var(--app-text-muted)}.step-description{font-size:.6875rem;color:var(--app-text-muted);opacity:.7;white-space:nowrap;margin-top:1px}.step-connector{flex:1;height:2px;background:var(--app-border);margin:0 10px 14px;border-radius:1px;transition:background .4s ease;align-self:center}.step-connector.completed{background:linear-gradient(90deg,#22c55e,var(--app-primary))}.stepper-progress-mobile{display:none;flex-direction:column;gap:8px;padding:16px 24px 0}@media(max-width:640px){.stepper-header{display:none}.stepper-progress-mobile{display:flex}}.progress-label{font-size:.8125rem;font-weight:600;color:var(--app-text)}.progress-bar-track{width:100%;height:6px;background:var(--app-border);border-radius:3px;overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--app-primary),var(--app-accent));border-radius:3px;transition:width .4s cubic-bezier(.4,0,.2,1)}.stepper-form-body{display:flex;flex-direction:column;gap:24px;padding:24px}.step-content{animation:stepFadeIn .3s ease-out}@keyframes stepFadeIn{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}.step-fields{display:grid;grid-template-columns:1fr;gap:20px}.step-error-summary{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#f43f5e14;border:1px solid rgba(244,63,94,.25);border-radius:10px;margin-top:8px;animation:stepFadeIn .2s ease-out}.error-summary-icon{width:18px;height:18px;fill:#f43f5e;flex-shrink:0}.step-error-summary span{font-size:.8125rem;color:#f43f5e;font-weight:500}.stepper-actions{display:flex;justify-content:space-between;align-items:center;padding-top:8px;border-top:1px solid var(--app-border)}.stepper-actions-left,.stepper-actions-right{display:flex;gap:10px;align-items:center}.btn-reset{display:flex;align-items:center;gap:6px;background:transparent;color:#ef4444;border:1px solid rgba(239,68,68,.3);padding:10px 20px;border-radius:10px;font-weight:600;font-size:.875rem;cursor:pointer;transition:all .2s}.btn-reset svg{width:16px;height:16px;fill:currentColor}.btn-reset:hover{background:#ef44441a;border-color:#ef444480}.btn-reset:disabled{opacity:.5;cursor:not-allowed}.btn-back{display:flex;align-items:center;gap:6px;background:var(--glass-bg);color:var(--app-text);border:1px solid var(--app-border);padding:10px 20px;border-radius:10px;font-weight:600;font-size:.875rem;cursor:pointer;transition:all .2s}.btn-back svg{width:16px;height:16px;fill:currentColor}.btn-back:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-light)}.btn-back:disabled{opacity:.5;cursor:not-allowed}.btn-skip{background:transparent;color:var(--app-text-muted);border:none;padding:10px 16px;border-radius:10px;font-weight:500;font-size:.8125rem;cursor:pointer;transition:color .2s}.btn-skip:hover{color:var(--app-primary)}.btn-skip:disabled{opacity:.5;cursor:not-allowed}.btn-next{display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--app-primary),var(--app-accent));color:#fff;border:none;padding:10px 24px;border-radius:10px;font-weight:600;font-size:.875rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn-next svg{width:16px;height:16px;fill:currentColor}.btn-next:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px -4px var(--app-glow)}.btn-next:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-submit{display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border:none;padding:10px 28px;border-radius:10px;font-weight:600;font-size:.875rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn-submit svg{width:16px;height:16px;fill:currentColor}.btn-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px -4px #22c55e59}.btn-submit:disabled{opacity:.5;cursor:not-allowed;transform:none}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
@@ -4285,61 +4285,61 @@ class CellRendererComponent {
             return '';
         return path.split('.').reduce((c, k) => c?.[k], obj) ?? '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CellRendererComponent, isStandalone: true, selector: "amf-cell-renderer", inputs: { column: "column", row: "row", value: "value" }, ngImport: i0, template: `
-    @switch (column.type || 'text') {
-      @case ('badge') { <span class="cell-badge" [class]="getBadgeClass()">{{ value | titlecase }}</span> }
-      @case ('avatar') {
-        <div class="cell-avatar">
-          <div class="avatar-circle">{{ getInitial() }}</div>
-          <div class="avatar-info">
-            <span class="avatar-name">{{ value }}</span>
-            @if (column.subtitleKey) { <span class="avatar-subtitle">{{ getNestedValue(row, column.subtitleKey) }}</span> }
-          </div>
-        </div>
-      }
-      @case ('date') { <span>{{ value | date:(column.dateFormat || 'mediumDate') }}</span> }
-      @case ('datetime') { <span>{{ value | date:(column.dateFormat || 'medium') }}</span> }
-      @case ('currency') { <span>{{ value | currency:(column.currencyCodeKey ? getNestedValue(row, column.currencyCodeKey) : (column.currencyCode || 'USD')):(column.currencyDisplay !== undefined ? column.currencyDisplay : 'symbol') }}</span> }
-      @case ('boolean') { <span class="cell-boolean" [class.is-true]="value">{{ value ? '✓' : '✗' }}</span> }
-      @case ('number') { <span class="cell-number">{{ value }}</span> }
-      @case ('progress') {
-        <div class="cell-progress">
-          <div class="progress-bar"><div class="progress-fill" [style.width.%]="value"></div></div>
-          <span class="progress-text">{{ value }}%</span>
-        </div>
-      }
-      @default { <span>{{ value }}</span> }
-    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: CellRendererComponent, isStandalone: true, selector: "amf-cell-renderer", inputs: { column: "column", row: "row", value: "value" }, ngImport: i0, template: `
+    @switch (column.type || 'text') {
+      @case ('badge') { <span class="cell-badge" [class]="getBadgeClass()">{{ value | titlecase }}</span> }
+      @case ('avatar') {
+        <div class="cell-avatar">
+          <div class="avatar-circle">{{ getInitial() }}</div>
+          <div class="avatar-info">
+            <span class="avatar-name">{{ value }}</span>
+            @if (column.subtitleKey) { <span class="avatar-subtitle">{{ getNestedValue(row, column.subtitleKey) }}</span> }
+          </div>
+        </div>
+      }
+      @case ('date') { <span>{{ value | date:(column.dateFormat || 'mediumDate') }}</span> }
+      @case ('datetime') { <span>{{ value | date:(column.dateFormat || 'medium') }}</span> }
+      @case ('currency') { <span>{{ value | currency:(column.currencyCodeKey ? getNestedValue(row, column.currencyCodeKey) : (column.currencyCode || 'USD')):(column.currencyDisplay !== undefined ? column.currencyDisplay : 'symbol') }}</span> }
+      @case ('boolean') { <span class="cell-boolean" [class.is-true]="value">{{ value ? '✓' : '✗' }}</span> }
+      @case ('number') { <span class="cell-number">{{ value }}</span> }
+      @case ('progress') {
+        <div class="cell-progress">
+          <div class="progress-bar"><div class="progress-fill" [style.width.%]="value"></div></div>
+          <span class="progress-text">{{ value }}%</span>
+        </div>
+      }
+      @default { <span>{{ value }}</span> }
+    }
   `, isInline: true, styles: [":host{display:contents}.cell-badge{padding:4px 10px;border-radius:6px;font-size:.75rem;font-weight:600;display:inline-block}.cell-badge.success,.cell-badge.active{background:#34d39926;color:#34d399}.cell-badge.danger,.cell-badge.inactive{background:#f43f5e26;color:#fb7185}.cell-badge.warning,.cell-badge.pending{background:#fbbf2426;color:#fbbf24}.cell-badge.info{background:#3b82f626;color:#60a5fa}.cell-badge.muted{background:var(--glass-bg);color:var(--app-text-muted)}.cell-avatar{display:flex;align-items:center;gap:12px}.avatar-circle{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--app-primary),var(--app-accent));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.875rem;flex-shrink:0}.avatar-info{display:flex;flex-direction:column}.avatar-name{font-weight:600;color:var(--app-text);font-size:.875rem}.avatar-subtitle{font-size:.75rem;color:var(--app-text-muted)}.cell-boolean{font-weight:700}.cell-boolean.is-true{color:#34d399}.cell-boolean:not(.is-true){color:#fb7185}.cell-number{font-variant-numeric:tabular-nums}.cell-progress{display:flex;align-items:center;gap:8px}.progress-bar{flex:1;height:6px;background:var(--glass-bg);border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--app-primary),var(--app-accent));border-radius:3px;transition:width .3s}.progress-text{font-size:.75rem;color:var(--app-text-muted);min-width:36px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CellRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CellRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'amf-cell-renderer', standalone: true, imports: [CommonModule, TitleCasePipe, DatePipe, CurrencyPipe], template: `
-    @switch (column.type || 'text') {
-      @case ('badge') { <span class="cell-badge" [class]="getBadgeClass()">{{ value | titlecase }}</span> }
-      @case ('avatar') {
-        <div class="cell-avatar">
-          <div class="avatar-circle">{{ getInitial() }}</div>
-          <div class="avatar-info">
-            <span class="avatar-name">{{ value }}</span>
-            @if (column.subtitleKey) { <span class="avatar-subtitle">{{ getNestedValue(row, column.subtitleKey) }}</span> }
-          </div>
-        </div>
-      }
-      @case ('date') { <span>{{ value | date:(column.dateFormat || 'mediumDate') }}</span> }
-      @case ('datetime') { <span>{{ value | date:(column.dateFormat || 'medium') }}</span> }
-      @case ('currency') { <span>{{ value | currency:(column.currencyCodeKey ? getNestedValue(row, column.currencyCodeKey) : (column.currencyCode || 'USD')):(column.currencyDisplay !== undefined ? column.currencyDisplay : 'symbol') }}</span> }
-      @case ('boolean') { <span class="cell-boolean" [class.is-true]="value">{{ value ? '✓' : '✗' }}</span> }
-      @case ('number') { <span class="cell-number">{{ value }}</span> }
-      @case ('progress') {
-        <div class="cell-progress">
-          <div class="progress-bar"><div class="progress-fill" [style.width.%]="value"></div></div>
-          <span class="progress-text">{{ value }}%</span>
-        </div>
-      }
-      @default { <span>{{ value }}</span> }
-    }
+            args: [{ selector: 'amf-cell-renderer', standalone: true, imports: [CommonModule, TitleCasePipe, DatePipe, CurrencyPipe], template: `
+    @switch (column.type || 'text') {
+      @case ('badge') { <span class="cell-badge" [class]="getBadgeClass()">{{ value | titlecase }}</span> }
+      @case ('avatar') {
+        <div class="cell-avatar">
+          <div class="avatar-circle">{{ getInitial() }}</div>
+          <div class="avatar-info">
+            <span class="avatar-name">{{ value }}</span>
+            @if (column.subtitleKey) { <span class="avatar-subtitle">{{ getNestedValue(row, column.subtitleKey) }}</span> }
+          </div>
+        </div>
+      }
+      @case ('date') { <span>{{ value | date:(column.dateFormat || 'mediumDate') }}</span> }
+      @case ('datetime') { <span>{{ value | date:(column.dateFormat || 'medium') }}</span> }
+      @case ('currency') { <span>{{ value | currency:(column.currencyCodeKey ? getNestedValue(row, column.currencyCodeKey) : (column.currencyCode || 'USD')):(column.currencyDisplay !== undefined ? column.currencyDisplay : 'symbol') }}</span> }
+      @case ('boolean') { <span class="cell-boolean" [class.is-true]="value">{{ value ? '✓' : '✗' }}</span> }
+      @case ('number') { <span class="cell-number">{{ value }}</span> }
+      @case ('progress') {
+        <div class="cell-progress">
+          <div class="progress-bar"><div class="progress-fill" [style.width.%]="value"></div></div>
+          <span class="progress-text">{{ value }}%</span>
+        </div>
+      }
+      @default { <span>{{ value }}</span> }
+    }
   `, styles: [":host{display:contents}.cell-badge{padding:4px 10px;border-radius:6px;font-size:.75rem;font-weight:600;display:inline-block}.cell-badge.success,.cell-badge.active{background:#34d39926;color:#34d399}.cell-badge.danger,.cell-badge.inactive{background:#f43f5e26;color:#fb7185}.cell-badge.warning,.cell-badge.pending{background:#fbbf2426;color:#fbbf24}.cell-badge.info{background:#3b82f626;color:#60a5fa}.cell-badge.muted{background:var(--glass-bg);color:var(--app-text-muted)}.cell-avatar{display:flex;align-items:center;gap:12px}.avatar-circle{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--app-primary),var(--app-accent));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.875rem;flex-shrink:0}.avatar-info{display:flex;flex-direction:column}.avatar-name{font-weight:600;color:var(--app-text);font-size:.875rem}.avatar-subtitle{font-size:.75rem;color:var(--app-text-muted)}.cell-boolean{font-weight:700}.cell-boolean.is-true{color:#34d399}.cell-boolean:not(.is-true){color:#fb7185}.cell-number{font-variant-numeric:tabular-nums}.cell-progress{display:flex;align-items:center;gap:8px}.progress-bar{flex:1;height:6px;background:var(--glass-bg);border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--app-primary),var(--app-accent));border-radius:3px;transition:width .3s}.progress-text{font-size:.75rem;color:var(--app-text-muted);min-width:36px}\n"] }]
         }], propDecorators: { column: [{
                 type: Input
@@ -4776,405 +4776,405 @@ class TableRendererComponent {
             this.actionDispatcher.dispatch(this.config.onReorder, { ...this.context, previousIndex: event.previousIndex, currentIndex: event.currentIndex });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TableRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TableRendererComponent, isStandalone: true, selector: "amf-table-renderer", inputs: { config: "config", context: "context" }, outputs: { rowAction: "rowAction" }, ngImport: i0, template: `
-    <div class="amf-table-card" [class]="'variant-' + (config.variant || 'default') + ' ' + (config.cssClass || '')">
-      <div class="table-header">
-        <div class="table-header-left">
-          @if (config.searchable) {
-            <div class="search-box">
-              <svg viewBox="0 0 24 24" class="search-icon"><path [attr.d]="iconRegistry.getIcon('search')"></path></svg>
-              <input type="text" [placeholder]="config.searchPlaceholder || 'Search...'" [ngModel]="searchQuery()" (ngModelChange)="searchQuery.set($event)" />
-            </div>
-          }
-          @for (filter of config.filters || []; track filter.key) {
-            <select class="filter-select" [ngModel]="getFilterValue(filter.key)" (ngModelChange)="setFilterValue(filter.key, $event)">
-              <option value="">{{ filter.label }}</option>
-              @for (opt of filter.options; track opt.value) { <option [value]="opt.value">{{ opt.label }}</option> }
-            </select>
-          }
-        </div>
-        <div class="table-header-right">
-          @for (action of config.headerActions || []; track action.id) {
-            <button class="btn-primary btn-sm" (click)="handleAction(action, null)">
-              @if (action.icon) { <svg viewBox="0 0 24 24" class="btn-icon"><path [attr.d]="iconRegistry.getIcon(action.icon)"></path></svg> }
-              {{ action.label }}
-            </button>
-          }
-
-          @if (config.exportable) {
-            <div class="export-container">
-              <button class="btn-ghost btn-sm" (click)="exportMenuOpen.set(!exportMenuOpen())">
-                <svg viewBox="0 0 24 24" class="btn-icon"><path [attr.d]="iconRegistry.getIcon('download')"></path></svg>
-                Export
-              </button>
-              @if (exportMenuOpen()) {
-                <div class="dropdown-menu export-menu">
-                  @for (format of config.exportFormats || ['csv', 'json']; track format) {
-                    <div class="dropdown-item" (click)="exportData(format); exportMenuOpen.set(false)">
-                      Export as {{ format | uppercase }}
-                    </div>
-                  }
-                </div>
-              }
-            </div>
-          }
-        </div>
-      </div>
-      <div class="table-wrapper">
-        <table class="data-table" [class.striped]="config.striped" [class.hoverable]="config.hoverable !== false">
-          <thead>
-            <tr cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="dropColumn($event)">
-              @if (config.reorderable) { <th class="drag-col" style="width: 40px; text-align: center;"></th> }
-              @if (config.selectionMode === 'checkbox') {
-                <th class="selection-col" style="width: 40px; text-align: center;">
-                  @if (config.showSelectAll !== false) {
-                    <input type="checkbox"
-                      class="amf-checkbox"
-                      [checked]="selectedRows().size > 0 && selectedRows().size === filteredData().length"
-                      (change)="toggleAllSelection($event)" />
-                  }
-                </th>
-              }
-              @if (config.expandable) {
-                <th style="width: 36px;"></th>
-              }
-              @for (col of visibleColumns(); track col.key) {
-                <th cdkDrag [cdkDragDisabled]="!config.columnReorder" [style.width]="col.width" [style.min-width]="col.minWidth" [style.text-align]="col.align || 'left'" [class.sortable]="col.sortable" (click)="col.sortable ? toggleSort(col.key) : null">
-                  {{ col.label }} @if (col.sortable && sortKey() === col.key) { <span class="sort-indicator">{{ sortDirection() === 'asc' ? '↑' : '↓' }}</span> }
-                </th>
-              }
-              @if (config.actions?.length) { <th class="actions-col">Actions</th> }
-            </tr>
-          </thead>
-          <tbody cdkDropList (cdkDropListDropped)="dropRow($event)">
-            @for (row of groupedRows(); track $index) {
-              @if (row.__isGroupHeader) {
-                <tr class="group-header-row">
-                  <td [attr.colspan]="visibleColumns().length + (config.reorderable ? 1 : 0) + (config.selectionMode === 'checkbox' ? 1 : 0) + (config.expandable ? 1 : 0) + (config.actions?.length ? 1 : 0)">
-                    <button class="group-toggle" (click)="toggleGroup(row.__groupKey)">
-                      <span class="group-chevron" [class.open]="!collapsedGroups().has(row.__groupKey)">▶</span>
-                      {{ config.groupBy }}: <strong>{{ row.__groupKey }}</strong>
-                      <span class="group-count">({{ row.__count }} items)</span>
-                    </button>
-                  </td>
-                </tr>
-              } @else {
-              <tr cdkDrag [cdkDragDisabled]="!config.reorderable" (click)="handleRowClick(row)" [class.clickable]="config.rowClick || config.selectionMode === 'single' || config.selectionMode === 'multi'" [class.selected]="selectedRows().has(row)" [class.expanded]="expandedRows().has(row)">
-                @if (config.reorderable) {
-                   <td class="drag-cell" (click)="$event.stopPropagation()" cdkDragHandle>
-                     <svg viewBox="0 0 24 24" style="width:16px;height:16px;fill:var(--app-text-muted)"><path [attr.d]="iconRegistry.getIcon('menu')"></path></svg>
-                   </td>
-                }
-                @if (config.selectionMode === 'checkbox') {
-                  <td class="selection-cell" (click)="$event.stopPropagation(); toggleSelection(row)">
-                    <input type="checkbox" class="amf-checkbox" [checked]="selectedRows().has(row)" (click)="$event.stopPropagation()" (change)="$event.stopPropagation(); toggleSelection(row)" />
-                  </td>
-                }
-                @if (config.expandable) {
-                  <td class="expand-cell" (click)="$event.stopPropagation(); toggleRowExpand(row)">
-                    <span class="expand-chevron" [class.open]="expandedRows().has(row)">▶</span>
-                  </td>
-                }
-                @for (col of visibleColumns(); track col.key) {
-                  <td [style.text-align]="col.align || 'left'" (dblclick)="config.inlineEdit && col.editable !== false ? startEdit(row, col.key, $event) : null" [class.editable-cell]="config.inlineEdit && col.editable !== false">
-                    @if (isEditing(row, col.key)) {
-                      <div class="inline-edit-wrap" (click)="$event.stopPropagation()">
-                        <div class="inline-edit-row">
-                          @if (col.editType === 'select' && col.editOptions) {
-                            <select class="inline-input" [(ngModel)]="editBuffer[col.key]">
-                              @for (opt of col.editOptions; track opt.value) { <option [value]="opt.value">{{ opt.label }}</option> }
-                            </select>
-                          } @else {
-                            <input class="inline-input" [type]="col.editType || 'text'" [(ngModel)]="editBuffer[col.key]" (keydown.enter)="commitEdit(row, col.key)" (keydown.escape)="cancelEdit()" />
-                          }
-                          <div class="inline-edit-actions">
-                            <button class="ie-btn ie-save" title="Save (Enter)" (click)="commitEdit(row, col.key)">
-                              <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
-                            </button>
-                            <button class="ie-btn ie-cancel" title="Cancel (Esc)" (click)="cancelEdit()">
-                              <svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
-                            </button>
-                          </div>
-                        </div>
-                        @if (editError()) {
-                          <span class="inline-edit-error">{{ editError() }}</span>
-                        }
-                      </div>
-                    } @else {
-                      <amf-cell-renderer [column]="col" [row]="row" [value]="getCellValue(row, col.key)"></amf-cell-renderer>
-                    }
-                  </td>
-                }
-                @if (config.actions?.length) {
-                  <td class="actions-cell">
-                    <div class="action-btns">
-                      @for (action of config.actions; track action.id) {
-                        <button class="action-btn" [class]="action.variant || 'ghost'" [title]="action.label" (click)="handleAction(action, row); $event.stopPropagation()">
-                          @if (action.icon) { <svg viewBox="0 0 24 24"><path [attr.d]="iconRegistry.getIcon(action.icon)"></path></svg> } @else { {{ action.label }} }
-                        </button>
-                      }
-                    </div>
-                  </td>
-                }
-              </tr>
-              @if (config.expandable && expandedRows().has(row)) {
-                <tr class="expanded-row">
-                  <td [attr.colspan]="visibleColumns().length + (config.reorderable ? 1 : 0) + (config.selectionMode === 'checkbox' ? 1 : 0) + 1 + (config.actions?.length ? 1 : 0)" class="expanded-content">
-                    @if (config.expandSection) {
-                      <div class="expand-section">Row detail: {{ row | json }}</div>
-                    } @else {
-                      <div class="expand-section">
-                        @for (col of visibleColumns(); track col.key) {
-                          <div class="expand-field"><span class="expand-label">{{ col.label }}:</span> <span>{{ getCellValue(row, col.key) }}</span></div>
-                        }
-                      </div>
-                    }
-                  </td>
-                </tr>
-              }
-              }
-            } @empty { <tr><td [attr.colspan]="visibleColumns().length + (config.actions?.length ? 1 : 0)" class="empty-state">{{ config.emptyMessage || 'No data found.' }}</td></tr> }
-            @if (config.aggregates?.length) {
-              <tr class="aggregate-row">
-                @if (config.reorderable) { <td></td> }
-                @if (config.selectionMode === 'checkbox') { <td></td> }
-                @if (config.expandable) { <td></td> }
-                @for (col of visibleColumns(); track col.key) {
-                  <td class="aggregate-cell" [style.text-align]="col.align || 'right'">
-                    @if (getAggregate(col.key); as agg) { <span class="agg-value">{{ agg.label ? agg.label + ': ' : '' }}{{ agg.value }}</span> }
-                  </td>
-                }
-                @if (config.actions?.length) { <td></td> }
-              </tr>
-            }
-          </tbody>
-        </table>
-      </div>
-      @if (config.pagination?.enabled) {
-        <div class="table-footer">
-          <div class="footer-left">
-            <span class="results-count">Showing {{ paginatedData().length }} of {{ filteredData().length }} @if (config.pagination?.showTotal) { (total: {{ allData().length }}) }</span>
-            @if ((config.pagination?.pageSizeOptions || [5, 10, 25, 50]).length > 1) {
-              <div class="page-size-wrap">
-                <label class="page-size-label">Rows:</label>
-                <select class="page-size-select" [ngModel]="activePageSize()" (ngModelChange)="setPageSize($event)">
-                  @for (opt of config.pagination?.pageSizeOptions || [5, 10, 25, 50]; track opt) {
-                    <option [value]="opt">{{ opt }}</option>
-                  }
-                </select>
-              </div>
-            }
-          </div>
-          <div class="pagination">
-            <button class="btn-page-nav" [disabled]="currentPage() <= 1" (click)="currentPage.set(currentPage() - 1)">Previous</button>
-            @for (p of pageNumbers(); track p) { <button class="btn-page" [class.active]="p === currentPage()" (click)="currentPage.set(p)">{{ p }}</button> }
-            <button class="btn-page-nav" [disabled]="currentPage() >= totalPages()" (click)="currentPage.set(currentPage() + 1)">Next</button>
-          </div>
-        </div>
-      }
-    </div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: TableRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: TableRendererComponent, isStandalone: true, selector: "amf-table-renderer", inputs: { config: "config", context: "context" }, outputs: { rowAction: "rowAction" }, ngImport: i0, template: `
+    <div class="amf-table-card" [class]="'variant-' + (config.variant || 'default') + ' ' + (config.cssClass || '')">
+      <div class="table-header">
+        <div class="table-header-left">
+          @if (config.searchable) {
+            <div class="search-box">
+              <svg viewBox="0 0 24 24" class="search-icon"><path [attr.d]="iconRegistry.getIcon('search')"></path></svg>
+              <input type="text" [placeholder]="config.searchPlaceholder || 'Search...'" [ngModel]="searchQuery()" (ngModelChange)="searchQuery.set($event)" />
+            </div>
+          }
+          @for (filter of config.filters || []; track filter.key) {
+            <select class="filter-select" [ngModel]="getFilterValue(filter.key)" (ngModelChange)="setFilterValue(filter.key, $event)">
+              <option value="">{{ filter.label }}</option>
+              @for (opt of filter.options; track opt.value) { <option [value]="opt.value">{{ opt.label }}</option> }
+            </select>
+          }
+        </div>
+        <div class="table-header-right">
+          @for (action of config.headerActions || []; track action.id) {
+            <button class="btn-primary btn-sm" (click)="handleAction(action, null)">
+              @if (action.icon) { <svg viewBox="0 0 24 24" class="btn-icon"><path [attr.d]="iconRegistry.getIcon(action.icon)"></path></svg> }
+              {{ action.label }}
+            </button>
+          }
+
+          @if (config.exportable) {
+            <div class="export-container">
+              <button class="btn-ghost btn-sm" (click)="exportMenuOpen.set(!exportMenuOpen())">
+                <svg viewBox="0 0 24 24" class="btn-icon"><path [attr.d]="iconRegistry.getIcon('download')"></path></svg>
+                Export
+              </button>
+              @if (exportMenuOpen()) {
+                <div class="dropdown-menu export-menu">
+                  @for (format of config.exportFormats || ['csv', 'json']; track format) {
+                    <div class="dropdown-item" (click)="exportData(format); exportMenuOpen.set(false)">
+                      Export as {{ format | uppercase }}
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+          }
+        </div>
+      </div>
+      <div class="table-wrapper">
+        <table class="data-table" [class.striped]="config.striped" [class.hoverable]="config.hoverable !== false">
+          <thead>
+            <tr cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="dropColumn($event)">
+              @if (config.reorderable) { <th class="drag-col" style="width: 40px; text-align: center;"></th> }
+              @if (config.selectionMode === 'checkbox') {
+                <th class="selection-col" style="width: 40px; text-align: center;">
+                  @if (config.showSelectAll !== false) {
+                    <input type="checkbox"
+                      class="amf-checkbox"
+                      [checked]="selectedRows().size > 0 && selectedRows().size === filteredData().length"
+                      (change)="toggleAllSelection($event)" />
+                  }
+                </th>
+              }
+              @if (config.expandable) {
+                <th style="width: 36px;"></th>
+              }
+              @for (col of visibleColumns(); track col.key) {
+                <th cdkDrag [cdkDragDisabled]="!config.columnReorder" [style.width]="col.width" [style.min-width]="col.minWidth" [style.text-align]="col.align || 'left'" [class.sortable]="col.sortable" (click)="col.sortable ? toggleSort(col.key) : null">
+                  {{ col.label }} @if (col.sortable && sortKey() === col.key) { <span class="sort-indicator">{{ sortDirection() === 'asc' ? '↑' : '↓' }}</span> }
+                </th>
+              }
+              @if (config.actions?.length) { <th class="actions-col">Actions</th> }
+            </tr>
+          </thead>
+          <tbody cdkDropList (cdkDropListDropped)="dropRow($event)">
+            @for (row of groupedRows(); track $index) {
+              @if (row.__isGroupHeader) {
+                <tr class="group-header-row">
+                  <td [attr.colspan]="visibleColumns().length + (config.reorderable ? 1 : 0) + (config.selectionMode === 'checkbox' ? 1 : 0) + (config.expandable ? 1 : 0) + (config.actions?.length ? 1 : 0)">
+                    <button class="group-toggle" (click)="toggleGroup(row.__groupKey)">
+                      <span class="group-chevron" [class.open]="!collapsedGroups().has(row.__groupKey)">▶</span>
+                      {{ config.groupBy }}: <strong>{{ row.__groupKey }}</strong>
+                      <span class="group-count">({{ row.__count }} items)</span>
+                    </button>
+                  </td>
+                </tr>
+              } @else {
+              <tr cdkDrag [cdkDragDisabled]="!config.reorderable" (click)="handleRowClick(row)" [class.clickable]="config.rowClick || config.selectionMode === 'single' || config.selectionMode === 'multi'" [class.selected]="selectedRows().has(row)" [class.expanded]="expandedRows().has(row)">
+                @if (config.reorderable) {
+                   <td class="drag-cell" (click)="$event.stopPropagation()" cdkDragHandle>
+                     <svg viewBox="0 0 24 24" style="width:16px;height:16px;fill:var(--app-text-muted)"><path [attr.d]="iconRegistry.getIcon('menu')"></path></svg>
+                   </td>
+                }
+                @if (config.selectionMode === 'checkbox') {
+                  <td class="selection-cell" (click)="$event.stopPropagation(); toggleSelection(row)">
+                    <input type="checkbox" class="amf-checkbox" [checked]="selectedRows().has(row)" (click)="$event.stopPropagation()" (change)="$event.stopPropagation(); toggleSelection(row)" />
+                  </td>
+                }
+                @if (config.expandable) {
+                  <td class="expand-cell" (click)="$event.stopPropagation(); toggleRowExpand(row)">
+                    <span class="expand-chevron" [class.open]="expandedRows().has(row)">▶</span>
+                  </td>
+                }
+                @for (col of visibleColumns(); track col.key) {
+                  <td [style.text-align]="col.align || 'left'" (dblclick)="config.inlineEdit && col.editable !== false ? startEdit(row, col.key, $event) : null" [class.editable-cell]="config.inlineEdit && col.editable !== false">
+                    @if (isEditing(row, col.key)) {
+                      <div class="inline-edit-wrap" (click)="$event.stopPropagation()">
+                        <div class="inline-edit-row">
+                          @if (col.editType === 'select' && col.editOptions) {
+                            <select class="inline-input" [(ngModel)]="editBuffer[col.key]">
+                              @for (opt of col.editOptions; track opt.value) { <option [value]="opt.value">{{ opt.label }}</option> }
+                            </select>
+                          } @else {
+                            <input class="inline-input" [type]="col.editType || 'text'" [(ngModel)]="editBuffer[col.key]" (keydown.enter)="commitEdit(row, col.key)" (keydown.escape)="cancelEdit()" />
+                          }
+                          <div class="inline-edit-actions">
+                            <button class="ie-btn ie-save" title="Save (Enter)" (click)="commitEdit(row, col.key)">
+                              <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+                            </button>
+                            <button class="ie-btn ie-cancel" title="Cancel (Esc)" (click)="cancelEdit()">
+                              <svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
+                            </button>
+                          </div>
+                        </div>
+                        @if (editError()) {
+                          <span class="inline-edit-error">{{ editError() }}</span>
+                        }
+                      </div>
+                    } @else {
+                      <amf-cell-renderer [column]="col" [row]="row" [value]="getCellValue(row, col.key)"></amf-cell-renderer>
+                    }
+                  </td>
+                }
+                @if (config.actions?.length) {
+                  <td class="actions-cell">
+                    <div class="action-btns">
+                      @for (action of config.actions; track action.id) {
+                        <button class="action-btn" [class]="action.variant || 'ghost'" [title]="action.label" (click)="handleAction(action, row); $event.stopPropagation()">
+                          @if (action.icon) { <svg viewBox="0 0 24 24"><path [attr.d]="iconRegistry.getIcon(action.icon)"></path></svg> } @else { {{ action.label }} }
+                        </button>
+                      }
+                    </div>
+                  </td>
+                }
+              </tr>
+              @if (config.expandable && expandedRows().has(row)) {
+                <tr class="expanded-row">
+                  <td [attr.colspan]="visibleColumns().length + (config.reorderable ? 1 : 0) + (config.selectionMode === 'checkbox' ? 1 : 0) + 1 + (config.actions?.length ? 1 : 0)" class="expanded-content">
+                    @if (config.expandSection) {
+                      <div class="expand-section">Row detail: {{ row | json }}</div>
+                    } @else {
+                      <div class="expand-section">
+                        @for (col of visibleColumns(); track col.key) {
+                          <div class="expand-field"><span class="expand-label">{{ col.label }}:</span> <span>{{ getCellValue(row, col.key) }}</span></div>
+                        }
+                      </div>
+                    }
+                  </td>
+                </tr>
+              }
+              }
+            } @empty { <tr><td [attr.colspan]="visibleColumns().length + (config.actions?.length ? 1 : 0)" class="empty-state">{{ config.emptyMessage || 'No data found.' }}</td></tr> }
+            @if (config.aggregates?.length) {
+              <tr class="aggregate-row">
+                @if (config.reorderable) { <td></td> }
+                @if (config.selectionMode === 'checkbox') { <td></td> }
+                @if (config.expandable) { <td></td> }
+                @for (col of visibleColumns(); track col.key) {
+                  <td class="aggregate-cell" [style.text-align]="col.align || 'right'">
+                    @if (getAggregate(col.key); as agg) { <span class="agg-value">{{ agg.label ? agg.label + ': ' : '' }}{{ agg.value }}</span> }
+                  </td>
+                }
+                @if (config.actions?.length) { <td></td> }
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+      @if (config.pagination?.enabled) {
+        <div class="table-footer">
+          <div class="footer-left">
+            <span class="results-count">Showing {{ paginatedData().length }} of {{ filteredData().length }} @if (config.pagination?.showTotal) { (total: {{ allData().length }}) }</span>
+            @if ((config.pagination?.pageSizeOptions || [5, 10, 25, 50]).length > 1) {
+              <div class="page-size-wrap">
+                <label class="page-size-label">Rows:</label>
+                <select class="page-size-select" [ngModel]="activePageSize()" (ngModelChange)="setPageSize($event)">
+                  @for (opt of config.pagination?.pageSizeOptions || [5, 10, 25, 50]; track opt) {
+                    <option [value]="opt">{{ opt }}</option>
+                  }
+                </select>
+              </div>
+            }
+          </div>
+          <div class="pagination">
+            <button class="btn-page-nav" [disabled]="currentPage() <= 1" (click)="currentPage.set(currentPage() - 1)">Previous</button>
+            @for (p of pageNumbers(); track p) { <button class="btn-page" [class.active]="p === currentPage()" (click)="currentPage.set(p)">{{ p }}</button> }
+            <button class="btn-page-nav" [disabled]="currentPage() >= totalPages()" (click)="currentPage.set(currentPage() + 1)">Next</button>
+          </div>
+        </div>
+      }
+    </div>
   `, isInline: true, styles: [".amf-table-card{background:var(--app-surface);border:1px solid var(--app-border);border-radius:16px;overflow:hidden;box-shadow:0 1px 3px #0000000d}.table-header{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--app-border);flex-wrap:wrap}.table-header-left,.table-header-right{display:flex;align-items:center;gap:12px}.search-box{position:relative;min-width:240px}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;fill:var(--app-text-muted)}.search-box input{width:100%;padding:8px 12px 8px 36px;border:1px solid var(--app-border);border-radius:8px;font-size:.8125rem;outline:none;background:var(--glass-bg);color:var(--app-text)}.search-box input:focus{border-color:var(--app-primary)}.filter-select{padding:8px 12px;border:1px solid var(--app-border);border-radius:8px;font-size:.8125rem;outline:none;background:var(--glass-bg);color:var(--app-text);color-scheme:dark}.filter-select option{background-color:#1e1e2d;color:#fff}:host-context([data-color-scheme=\"light\"]) .filter-select{color-scheme:light}:host-context([data-color-scheme=\"light\"]) .filter-select option{background-color:#fff;color:#000}.table-wrapper{width:100%;overflow-x:auto}.data-table{width:100%;border-collapse:collapse;white-space:normal;word-break:break-word}.data-table th{background:var(--app-bg);padding:10px 20px;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--app-text-muted);border-bottom:1px solid var(--app-border);-webkit-user-select:none;user-select:none}.data-table th.sortable{cursor:pointer}.data-table th.sortable:hover{color:var(--app-primary)}.sort-indicator{margin-left:4px;font-size:.75rem}.data-table td{padding:14px 20px;border-bottom:1px solid var(--app-border);font-size:.875rem;color:var(--app-text)}.data-table.hoverable tbody tr:hover{background:var(--glass-bg)}.data-table.striped tbody tr:nth-child(2n){background:var(--glass-bg)}.variant-striped .data-table tbody tr:nth-child(2n){background:var(--glass-bg)}.variant-borderless{border:none!important;box-shadow:none!important;background:transparent!important}.variant-borderless .table-header{border-bottom:none;padding:0 0 16px}.variant-borderless .data-table th{background:transparent;border-bottom:2px solid var(--app-border)}.variant-borderless .data-table td{border-bottom:1px dashed var(--app-border)}.variant-borderless .table-footer{border-top:none;background:transparent;padding:16px 0 0}.variant-glass{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);box-shadow:var(--glass-shadow-sm)}.variant-glass .table-header,.variant-glass .table-footer,.variant-glass .data-table th{background:transparent;border-color:var(--glass-border)}.variant-glass .data-table td{border-bottom:1px solid var(--glass-border)}.variant-elevated{box-shadow:0 20px 40px var(--glass-shadow);transform:translateY(-2px);transition:all .3s ease}.variant-compact .table-header{padding:12px 16px}.variant-compact .data-table th{padding:8px 16px;font-size:.625rem}.variant-compact .data-table td{padding:8px 16px;font-size:.8125rem}.variant-compact .table-footer{padding:8px 16px}tr.clickable{cursor:pointer}.amf-checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--app-primary)}.data-table tbody tr.selected{background:#3b82f626!important}.actions-col{text-align:right!important;width:120px}.actions-cell{text-align:right}.action-btns{display:flex;justify-content:flex-end;gap:6px}.action-btn{width:30px;height:30px;border-radius:6px;border:1px solid var(--app-border);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.action-btn svg{width:14px;height:14px;fill:var(--app-text-muted)}.action-btn:hover{border-color:var(--app-primary)}.action-btn:hover svg{fill:var(--app-primary)}.action-btn.danger:hover{border-color:#f43f5e}.action-btn.danger:hover svg{fill:#f43f5e}.btn-primary{background:linear-gradient(135deg,var(--app-primary),var(--app-accent));color:#fff;border:none;padding:8px 16px;border-radius:8px;font-weight:600;font-size:.8125rem;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px var(--app-glow)}.btn-icon{width:16px;height:16px;fill:currentColor}.btn-sm{padding:6px 12px;font-size:.75rem;border-radius:6px}.btn-ghost{background:transparent;border:1px solid var(--app-border);color:var(--app-text);padding:8px 16px;border-radius:8px;font-weight:600;font-size:.8125rem;display:flex;align-items:center;gap:6px;cursor:pointer;transition:all .2s}.btn-ghost:hover{background:var(--glass-bg-hover);color:var(--app-primary)}.export-container{position:relative}.export-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--app-surface);border:1px solid var(--app-border);border-radius:12px;box-shadow:0 10px 40px #00000080;min-width:160px;z-index:100;overflow:hidden;animation:slideInDown .2s ease-out backwards}.export-menu .dropdown-item{padding:10px 16px;font-size:.8125rem;font-weight:500;cursor:pointer;color:var(--app-text);transition:background .2s}.export-menu .dropdown-item:hover{background:var(--glass-bg-hover);color:var(--app-primary)}.empty-state{text-align:center;padding:40px!important;color:var(--app-text-muted)}.table-footer{padding:12px 20px;display:flex;justify-content:space-between;align-items:center;background:var(--app-bg);border-top:1px solid var(--app-border)}.footer-left{display:flex;align-items:center;gap:16px}.results-count{font-size:.75rem;color:var(--app-text-muted)}.page-size-wrap{display:flex;align-items:center;gap:6px}.page-size-label{font-size:.75rem;color:var(--app-text-muted);white-space:nowrap}.page-size-select{padding:4px 8px;border:1px solid var(--app-border);border-radius:6px;font-size:.75rem;background:var(--glass-bg);color:var(--app-text);outline:none;cursor:pointer;color-scheme:dark}.page-size-select option{background-color:#1a1a2e;color:#fff}:host-context([data-color-scheme=\"light\"]) .page-size-select{color-scheme:light}:host-context([data-color-scheme=\"light\"]) .page-size-select option{background-color:#fff;color:#000}.pagination{display:flex;gap:4px}.btn-page,.btn-page-nav{padding:6px 10px;border:1px solid var(--app-border);background:transparent;border-radius:6px;font-size:.75rem;font-weight:500;color:var(--app-text);cursor:pointer}.btn-page.active{background:var(--app-primary);border-color:var(--app-primary);color:#fff}.btn-page-nav:disabled{opacity:.4;cursor:not-allowed}.editable-cell{position:relative}.editable-cell:hover{background:#3b82f614;cursor:text}.inline-edit-wrap{display:flex;flex-direction:column;gap:4px;min-width:0}.inline-edit-row{display:flex;align-items:center;gap:4px}.inline-input{flex:1;min-width:0;padding:5px 8px;border:1.5px solid var(--app-primary);border-radius:6px;background:var(--app-surface);color:var(--app-text);font-size:.875rem;outline:none}.inline-input.input-invalid{border-color:#f43f5e}.inline-edit-error{font-size:.6875rem;color:#f43f5e;font-weight:500;padding:0 2px;animation:fadeIn .15s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.inline-edit-actions{display:flex;gap:3px;flex-shrink:0}.ie-btn{width:26px;height:26px;border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .15s}.ie-btn svg{width:14px;height:14px;fill:currentColor}.ie-btn:hover{opacity:.85}.ie-save{background:#22c55e;color:#fff}.ie-cancel{background:var(--app-border);color:var(--app-text-muted)}select.inline-input{color-scheme:dark;cursor:pointer}select.inline-input option{background-color:#1a1a2e;color:#fff}:host-context([data-color-scheme=\"light\"]) select.inline-input{color-scheme:light}:host-context([data-color-scheme=\"light\"]) select.inline-input option{background-color:#fff;color:#000}.expand-cell{width:36px;text-align:center;cursor:pointer}.expand-chevron{display:inline-block;transition:transform .2s;font-size:.625rem;color:var(--app-text-muted)}.expand-chevron.open{transform:rotate(90deg)}.expanded-row td,.expanded-content{padding:0!important}.expand-section{padding:14px 24px;display:flex;flex-wrap:wrap;gap:16px;background:var(--glass-bg);animation:fadeInUp .2s ease-out}.expand-field{display:flex;gap:8px;font-size:.8125rem}.expand-label{color:var(--app-text-muted);font-weight:600}.group-header-row td{background:var(--app-bg)}.group-toggle{display:flex;align-items:center;gap:8px;background:none;border:none;color:var(--app-text);cursor:pointer;font-size:.8125rem;padding:8px 16px}.group-chevron{display:inline-block;font-size:.625rem;transition:transform .2s;color:var(--app-text-muted)}.group-chevron.open{transform:rotate(90deg)}.group-count{color:var(--app-text-muted);font-size:.75rem}.aggregate-row td{background:var(--app-bg);border-top:2px solid var(--app-border)}.aggregate-cell{padding:10px 20px!important}.agg-value{font-size:.8125rem;font-weight:700;color:var(--app-primary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: CellRendererComponent, selector: "amf-cell-renderer", inputs: ["column", "row", "value"] }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TableRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: TableRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'amf-table-renderer', standalone: true, imports: [CommonModule, FormsModule, DragDropModule, CellRendererComponent], template: `
-    <div class="amf-table-card" [class]="'variant-' + (config.variant || 'default') + ' ' + (config.cssClass || '')">
-      <div class="table-header">
-        <div class="table-header-left">
-          @if (config.searchable) {
-            <div class="search-box">
-              <svg viewBox="0 0 24 24" class="search-icon"><path [attr.d]="iconRegistry.getIcon('search')"></path></svg>
-              <input type="text" [placeholder]="config.searchPlaceholder || 'Search...'" [ngModel]="searchQuery()" (ngModelChange)="searchQuery.set($event)" />
-            </div>
-          }
-          @for (filter of config.filters || []; track filter.key) {
-            <select class="filter-select" [ngModel]="getFilterValue(filter.key)" (ngModelChange)="setFilterValue(filter.key, $event)">
-              <option value="">{{ filter.label }}</option>
-              @for (opt of filter.options; track opt.value) { <option [value]="opt.value">{{ opt.label }}</option> }
-            </select>
-          }
-        </div>
-        <div class="table-header-right">
-          @for (action of config.headerActions || []; track action.id) {
-            <button class="btn-primary btn-sm" (click)="handleAction(action, null)">
-              @if (action.icon) { <svg viewBox="0 0 24 24" class="btn-icon"><path [attr.d]="iconRegistry.getIcon(action.icon)"></path></svg> }
-              {{ action.label }}
-            </button>
-          }
-
-          @if (config.exportable) {
-            <div class="export-container">
-              <button class="btn-ghost btn-sm" (click)="exportMenuOpen.set(!exportMenuOpen())">
-                <svg viewBox="0 0 24 24" class="btn-icon"><path [attr.d]="iconRegistry.getIcon('download')"></path></svg>
-                Export
-              </button>
-              @if (exportMenuOpen()) {
-                <div class="dropdown-menu export-menu">
-                  @for (format of config.exportFormats || ['csv', 'json']; track format) {
-                    <div class="dropdown-item" (click)="exportData(format); exportMenuOpen.set(false)">
-                      Export as {{ format | uppercase }}
-                    </div>
-                  }
-                </div>
-              }
-            </div>
-          }
-        </div>
-      </div>
-      <div class="table-wrapper">
-        <table class="data-table" [class.striped]="config.striped" [class.hoverable]="config.hoverable !== false">
-          <thead>
-            <tr cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="dropColumn($event)">
-              @if (config.reorderable) { <th class="drag-col" style="width: 40px; text-align: center;"></th> }
-              @if (config.selectionMode === 'checkbox') {
-                <th class="selection-col" style="width: 40px; text-align: center;">
-                  @if (config.showSelectAll !== false) {
-                    <input type="checkbox"
-                      class="amf-checkbox"
-                      [checked]="selectedRows().size > 0 && selectedRows().size === filteredData().length"
-                      (change)="toggleAllSelection($event)" />
-                  }
-                </th>
-              }
-              @if (config.expandable) {
-                <th style="width: 36px;"></th>
-              }
-              @for (col of visibleColumns(); track col.key) {
-                <th cdkDrag [cdkDragDisabled]="!config.columnReorder" [style.width]="col.width" [style.min-width]="col.minWidth" [style.text-align]="col.align || 'left'" [class.sortable]="col.sortable" (click)="col.sortable ? toggleSort(col.key) : null">
-                  {{ col.label }} @if (col.sortable && sortKey() === col.key) { <span class="sort-indicator">{{ sortDirection() === 'asc' ? '↑' : '↓' }}</span> }
-                </th>
-              }
-              @if (config.actions?.length) { <th class="actions-col">Actions</th> }
-            </tr>
-          </thead>
-          <tbody cdkDropList (cdkDropListDropped)="dropRow($event)">
-            @for (row of groupedRows(); track $index) {
-              @if (row.__isGroupHeader) {
-                <tr class="group-header-row">
-                  <td [attr.colspan]="visibleColumns().length + (config.reorderable ? 1 : 0) + (config.selectionMode === 'checkbox' ? 1 : 0) + (config.expandable ? 1 : 0) + (config.actions?.length ? 1 : 0)">
-                    <button class="group-toggle" (click)="toggleGroup(row.__groupKey)">
-                      <span class="group-chevron" [class.open]="!collapsedGroups().has(row.__groupKey)">▶</span>
-                      {{ config.groupBy }}: <strong>{{ row.__groupKey }}</strong>
-                      <span class="group-count">({{ row.__count }} items)</span>
-                    </button>
-                  </td>
-                </tr>
-              } @else {
-              <tr cdkDrag [cdkDragDisabled]="!config.reorderable" (click)="handleRowClick(row)" [class.clickable]="config.rowClick || config.selectionMode === 'single' || config.selectionMode === 'multi'" [class.selected]="selectedRows().has(row)" [class.expanded]="expandedRows().has(row)">
-                @if (config.reorderable) {
-                   <td class="drag-cell" (click)="$event.stopPropagation()" cdkDragHandle>
-                     <svg viewBox="0 0 24 24" style="width:16px;height:16px;fill:var(--app-text-muted)"><path [attr.d]="iconRegistry.getIcon('menu')"></path></svg>
-                   </td>
-                }
-                @if (config.selectionMode === 'checkbox') {
-                  <td class="selection-cell" (click)="$event.stopPropagation(); toggleSelection(row)">
-                    <input type="checkbox" class="amf-checkbox" [checked]="selectedRows().has(row)" (click)="$event.stopPropagation()" (change)="$event.stopPropagation(); toggleSelection(row)" />
-                  </td>
-                }
-                @if (config.expandable) {
-                  <td class="expand-cell" (click)="$event.stopPropagation(); toggleRowExpand(row)">
-                    <span class="expand-chevron" [class.open]="expandedRows().has(row)">▶</span>
-                  </td>
-                }
-                @for (col of visibleColumns(); track col.key) {
-                  <td [style.text-align]="col.align || 'left'" (dblclick)="config.inlineEdit && col.editable !== false ? startEdit(row, col.key, $event) : null" [class.editable-cell]="config.inlineEdit && col.editable !== false">
-                    @if (isEditing(row, col.key)) {
-                      <div class="inline-edit-wrap" (click)="$event.stopPropagation()">
-                        <div class="inline-edit-row">
-                          @if (col.editType === 'select' && col.editOptions) {
-                            <select class="inline-input" [(ngModel)]="editBuffer[col.key]">
-                              @for (opt of col.editOptions; track opt.value) { <option [value]="opt.value">{{ opt.label }}</option> }
-                            </select>
-                          } @else {
-                            <input class="inline-input" [type]="col.editType || 'text'" [(ngModel)]="editBuffer[col.key]" (keydown.enter)="commitEdit(row, col.key)" (keydown.escape)="cancelEdit()" />
-                          }
-                          <div class="inline-edit-actions">
-                            <button class="ie-btn ie-save" title="Save (Enter)" (click)="commitEdit(row, col.key)">
-                              <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
-                            </button>
-                            <button class="ie-btn ie-cancel" title="Cancel (Esc)" (click)="cancelEdit()">
-                              <svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
-                            </button>
-                          </div>
-                        </div>
-                        @if (editError()) {
-                          <span class="inline-edit-error">{{ editError() }}</span>
-                        }
-                      </div>
-                    } @else {
-                      <amf-cell-renderer [column]="col" [row]="row" [value]="getCellValue(row, col.key)"></amf-cell-renderer>
-                    }
-                  </td>
-                }
-                @if (config.actions?.length) {
-                  <td class="actions-cell">
-                    <div class="action-btns">
-                      @for (action of config.actions; track action.id) {
-                        <button class="action-btn" [class]="action.variant || 'ghost'" [title]="action.label" (click)="handleAction(action, row); $event.stopPropagation()">
-                          @if (action.icon) { <svg viewBox="0 0 24 24"><path [attr.d]="iconRegistry.getIcon(action.icon)"></path></svg> } @else { {{ action.label }} }
-                        </button>
-                      }
-                    </div>
-                  </td>
-                }
-              </tr>
-              @if (config.expandable && expandedRows().has(row)) {
-                <tr class="expanded-row">
-                  <td [attr.colspan]="visibleColumns().length + (config.reorderable ? 1 : 0) + (config.selectionMode === 'checkbox' ? 1 : 0) + 1 + (config.actions?.length ? 1 : 0)" class="expanded-content">
-                    @if (config.expandSection) {
-                      <div class="expand-section">Row detail: {{ row | json }}</div>
-                    } @else {
-                      <div class="expand-section">
-                        @for (col of visibleColumns(); track col.key) {
-                          <div class="expand-field"><span class="expand-label">{{ col.label }}:</span> <span>{{ getCellValue(row, col.key) }}</span></div>
-                        }
-                      </div>
-                    }
-                  </td>
-                </tr>
-              }
-              }
-            } @empty { <tr><td [attr.colspan]="visibleColumns().length + (config.actions?.length ? 1 : 0)" class="empty-state">{{ config.emptyMessage || 'No data found.' }}</td></tr> }
-            @if (config.aggregates?.length) {
-              <tr class="aggregate-row">
-                @if (config.reorderable) { <td></td> }
-                @if (config.selectionMode === 'checkbox') { <td></td> }
-                @if (config.expandable) { <td></td> }
-                @for (col of visibleColumns(); track col.key) {
-                  <td class="aggregate-cell" [style.text-align]="col.align || 'right'">
-                    @if (getAggregate(col.key); as agg) { <span class="agg-value">{{ agg.label ? agg.label + ': ' : '' }}{{ agg.value }}</span> }
-                  </td>
-                }
-                @if (config.actions?.length) { <td></td> }
-              </tr>
-            }
-          </tbody>
-        </table>
-      </div>
-      @if (config.pagination?.enabled) {
-        <div class="table-footer">
-          <div class="footer-left">
-            <span class="results-count">Showing {{ paginatedData().length }} of {{ filteredData().length }} @if (config.pagination?.showTotal) { (total: {{ allData().length }}) }</span>
-            @if ((config.pagination?.pageSizeOptions || [5, 10, 25, 50]).length > 1) {
-              <div class="page-size-wrap">
-                <label class="page-size-label">Rows:</label>
-                <select class="page-size-select" [ngModel]="activePageSize()" (ngModelChange)="setPageSize($event)">
-                  @for (opt of config.pagination?.pageSizeOptions || [5, 10, 25, 50]; track opt) {
-                    <option [value]="opt">{{ opt }}</option>
-                  }
-                </select>
-              </div>
-            }
-          </div>
-          <div class="pagination">
-            <button class="btn-page-nav" [disabled]="currentPage() <= 1" (click)="currentPage.set(currentPage() - 1)">Previous</button>
-            @for (p of pageNumbers(); track p) { <button class="btn-page" [class.active]="p === currentPage()" (click)="currentPage.set(p)">{{ p }}</button> }
-            <button class="btn-page-nav" [disabled]="currentPage() >= totalPages()" (click)="currentPage.set(currentPage() + 1)">Next</button>
-          </div>
-        </div>
-      }
-    </div>
+            args: [{ selector: 'amf-table-renderer', standalone: true, imports: [CommonModule, FormsModule, DragDropModule, CellRendererComponent], template: `
+    <div class="amf-table-card" [class]="'variant-' + (config.variant || 'default') + ' ' + (config.cssClass || '')">
+      <div class="table-header">
+        <div class="table-header-left">
+          @if (config.searchable) {
+            <div class="search-box">
+              <svg viewBox="0 0 24 24" class="search-icon"><path [attr.d]="iconRegistry.getIcon('search')"></path></svg>
+              <input type="text" [placeholder]="config.searchPlaceholder || 'Search...'" [ngModel]="searchQuery()" (ngModelChange)="searchQuery.set($event)" />
+            </div>
+          }
+          @for (filter of config.filters || []; track filter.key) {
+            <select class="filter-select" [ngModel]="getFilterValue(filter.key)" (ngModelChange)="setFilterValue(filter.key, $event)">
+              <option value="">{{ filter.label }}</option>
+              @for (opt of filter.options; track opt.value) { <option [value]="opt.value">{{ opt.label }}</option> }
+            </select>
+          }
+        </div>
+        <div class="table-header-right">
+          @for (action of config.headerActions || []; track action.id) {
+            <button class="btn-primary btn-sm" (click)="handleAction(action, null)">
+              @if (action.icon) { <svg viewBox="0 0 24 24" class="btn-icon"><path [attr.d]="iconRegistry.getIcon(action.icon)"></path></svg> }
+              {{ action.label }}
+            </button>
+          }
+
+          @if (config.exportable) {
+            <div class="export-container">
+              <button class="btn-ghost btn-sm" (click)="exportMenuOpen.set(!exportMenuOpen())">
+                <svg viewBox="0 0 24 24" class="btn-icon"><path [attr.d]="iconRegistry.getIcon('download')"></path></svg>
+                Export
+              </button>
+              @if (exportMenuOpen()) {
+                <div class="dropdown-menu export-menu">
+                  @for (format of config.exportFormats || ['csv', 'json']; track format) {
+                    <div class="dropdown-item" (click)="exportData(format); exportMenuOpen.set(false)">
+                      Export as {{ format | uppercase }}
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+          }
+        </div>
+      </div>
+      <div class="table-wrapper">
+        <table class="data-table" [class.striped]="config.striped" [class.hoverable]="config.hoverable !== false">
+          <thead>
+            <tr cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="dropColumn($event)">
+              @if (config.reorderable) { <th class="drag-col" style="width: 40px; text-align: center;"></th> }
+              @if (config.selectionMode === 'checkbox') {
+                <th class="selection-col" style="width: 40px; text-align: center;">
+                  @if (config.showSelectAll !== false) {
+                    <input type="checkbox"
+                      class="amf-checkbox"
+                      [checked]="selectedRows().size > 0 && selectedRows().size === filteredData().length"
+                      (change)="toggleAllSelection($event)" />
+                  }
+                </th>
+              }
+              @if (config.expandable) {
+                <th style="width: 36px;"></th>
+              }
+              @for (col of visibleColumns(); track col.key) {
+                <th cdkDrag [cdkDragDisabled]="!config.columnReorder" [style.width]="col.width" [style.min-width]="col.minWidth" [style.text-align]="col.align || 'left'" [class.sortable]="col.sortable" (click)="col.sortable ? toggleSort(col.key) : null">
+                  {{ col.label }} @if (col.sortable && sortKey() === col.key) { <span class="sort-indicator">{{ sortDirection() === 'asc' ? '↑' : '↓' }}</span> }
+                </th>
+              }
+              @if (config.actions?.length) { <th class="actions-col">Actions</th> }
+            </tr>
+          </thead>
+          <tbody cdkDropList (cdkDropListDropped)="dropRow($event)">
+            @for (row of groupedRows(); track $index) {
+              @if (row.__isGroupHeader) {
+                <tr class="group-header-row">
+                  <td [attr.colspan]="visibleColumns().length + (config.reorderable ? 1 : 0) + (config.selectionMode === 'checkbox' ? 1 : 0) + (config.expandable ? 1 : 0) + (config.actions?.length ? 1 : 0)">
+                    <button class="group-toggle" (click)="toggleGroup(row.__groupKey)">
+                      <span class="group-chevron" [class.open]="!collapsedGroups().has(row.__groupKey)">▶</span>
+                      {{ config.groupBy }}: <strong>{{ row.__groupKey }}</strong>
+                      <span class="group-count">({{ row.__count }} items)</span>
+                    </button>
+                  </td>
+                </tr>
+              } @else {
+              <tr cdkDrag [cdkDragDisabled]="!config.reorderable" (click)="handleRowClick(row)" [class.clickable]="config.rowClick || config.selectionMode === 'single' || config.selectionMode === 'multi'" [class.selected]="selectedRows().has(row)" [class.expanded]="expandedRows().has(row)">
+                @if (config.reorderable) {
+                   <td class="drag-cell" (click)="$event.stopPropagation()" cdkDragHandle>
+                     <svg viewBox="0 0 24 24" style="width:16px;height:16px;fill:var(--app-text-muted)"><path [attr.d]="iconRegistry.getIcon('menu')"></path></svg>
+                   </td>
+                }
+                @if (config.selectionMode === 'checkbox') {
+                  <td class="selection-cell" (click)="$event.stopPropagation(); toggleSelection(row)">
+                    <input type="checkbox" class="amf-checkbox" [checked]="selectedRows().has(row)" (click)="$event.stopPropagation()" (change)="$event.stopPropagation(); toggleSelection(row)" />
+                  </td>
+                }
+                @if (config.expandable) {
+                  <td class="expand-cell" (click)="$event.stopPropagation(); toggleRowExpand(row)">
+                    <span class="expand-chevron" [class.open]="expandedRows().has(row)">▶</span>
+                  </td>
+                }
+                @for (col of visibleColumns(); track col.key) {
+                  <td [style.text-align]="col.align || 'left'" (dblclick)="config.inlineEdit && col.editable !== false ? startEdit(row, col.key, $event) : null" [class.editable-cell]="config.inlineEdit && col.editable !== false">
+                    @if (isEditing(row, col.key)) {
+                      <div class="inline-edit-wrap" (click)="$event.stopPropagation()">
+                        <div class="inline-edit-row">
+                          @if (col.editType === 'select' && col.editOptions) {
+                            <select class="inline-input" [(ngModel)]="editBuffer[col.key]">
+                              @for (opt of col.editOptions; track opt.value) { <option [value]="opt.value">{{ opt.label }}</option> }
+                            </select>
+                          } @else {
+                            <input class="inline-input" [type]="col.editType || 'text'" [(ngModel)]="editBuffer[col.key]" (keydown.enter)="commitEdit(row, col.key)" (keydown.escape)="cancelEdit()" />
+                          }
+                          <div class="inline-edit-actions">
+                            <button class="ie-btn ie-save" title="Save (Enter)" (click)="commitEdit(row, col.key)">
+                              <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+                            </button>
+                            <button class="ie-btn ie-cancel" title="Cancel (Esc)" (click)="cancelEdit()">
+                              <svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
+                            </button>
+                          </div>
+                        </div>
+                        @if (editError()) {
+                          <span class="inline-edit-error">{{ editError() }}</span>
+                        }
+                      </div>
+                    } @else {
+                      <amf-cell-renderer [column]="col" [row]="row" [value]="getCellValue(row, col.key)"></amf-cell-renderer>
+                    }
+                  </td>
+                }
+                @if (config.actions?.length) {
+                  <td class="actions-cell">
+                    <div class="action-btns">
+                      @for (action of config.actions; track action.id) {
+                        <button class="action-btn" [class]="action.variant || 'ghost'" [title]="action.label" (click)="handleAction(action, row); $event.stopPropagation()">
+                          @if (action.icon) { <svg viewBox="0 0 24 24"><path [attr.d]="iconRegistry.getIcon(action.icon)"></path></svg> } @else { {{ action.label }} }
+                        </button>
+                      }
+                    </div>
+                  </td>
+                }
+              </tr>
+              @if (config.expandable && expandedRows().has(row)) {
+                <tr class="expanded-row">
+                  <td [attr.colspan]="visibleColumns().length + (config.reorderable ? 1 : 0) + (config.selectionMode === 'checkbox' ? 1 : 0) + 1 + (config.actions?.length ? 1 : 0)" class="expanded-content">
+                    @if (config.expandSection) {
+                      <div class="expand-section">Row detail: {{ row | json }}</div>
+                    } @else {
+                      <div class="expand-section">
+                        @for (col of visibleColumns(); track col.key) {
+                          <div class="expand-field"><span class="expand-label">{{ col.label }}:</span> <span>{{ getCellValue(row, col.key) }}</span></div>
+                        }
+                      </div>
+                    }
+                  </td>
+                </tr>
+              }
+              }
+            } @empty { <tr><td [attr.colspan]="visibleColumns().length + (config.actions?.length ? 1 : 0)" class="empty-state">{{ config.emptyMessage || 'No data found.' }}</td></tr> }
+            @if (config.aggregates?.length) {
+              <tr class="aggregate-row">
+                @if (config.reorderable) { <td></td> }
+                @if (config.selectionMode === 'checkbox') { <td></td> }
+                @if (config.expandable) { <td></td> }
+                @for (col of visibleColumns(); track col.key) {
+                  <td class="aggregate-cell" [style.text-align]="col.align || 'right'">
+                    @if (getAggregate(col.key); as agg) { <span class="agg-value">{{ agg.label ? agg.label + ': ' : '' }}{{ agg.value }}</span> }
+                  </td>
+                }
+                @if (config.actions?.length) { <td></td> }
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+      @if (config.pagination?.enabled) {
+        <div class="table-footer">
+          <div class="footer-left">
+            <span class="results-count">Showing {{ paginatedData().length }} of {{ filteredData().length }} @if (config.pagination?.showTotal) { (total: {{ allData().length }}) }</span>
+            @if ((config.pagination?.pageSizeOptions || [5, 10, 25, 50]).length > 1) {
+              <div class="page-size-wrap">
+                <label class="page-size-label">Rows:</label>
+                <select class="page-size-select" [ngModel]="activePageSize()" (ngModelChange)="setPageSize($event)">
+                  @for (opt of config.pagination?.pageSizeOptions || [5, 10, 25, 50]; track opt) {
+                    <option [value]="opt">{{ opt }}</option>
+                  }
+                </select>
+              </div>
+            }
+          </div>
+          <div class="pagination">
+            <button class="btn-page-nav" [disabled]="currentPage() <= 1" (click)="currentPage.set(currentPage() - 1)">Previous</button>
+            @for (p of pageNumbers(); track p) { <button class="btn-page" [class.active]="p === currentPage()" (click)="currentPage.set(p)">{{ p }}</button> }
+            <button class="btn-page-nav" [disabled]="currentPage() >= totalPages()" (click)="currentPage.set(currentPage() + 1)">Next</button>
+          </div>
+        </div>
+      }
+    </div>
   `, styles: [".amf-table-card{background:var(--app-surface);border:1px solid var(--app-border);border-radius:16px;overflow:hidden;box-shadow:0 1px 3px #0000000d}.table-header{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--app-border);flex-wrap:wrap}.table-header-left,.table-header-right{display:flex;align-items:center;gap:12px}.search-box{position:relative;min-width:240px}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;fill:var(--app-text-muted)}.search-box input{width:100%;padding:8px 12px 8px 36px;border:1px solid var(--app-border);border-radius:8px;font-size:.8125rem;outline:none;background:var(--glass-bg);color:var(--app-text)}.search-box input:focus{border-color:var(--app-primary)}.filter-select{padding:8px 12px;border:1px solid var(--app-border);border-radius:8px;font-size:.8125rem;outline:none;background:var(--glass-bg);color:var(--app-text);color-scheme:dark}.filter-select option{background-color:#1e1e2d;color:#fff}:host-context([data-color-scheme=\"light\"]) .filter-select{color-scheme:light}:host-context([data-color-scheme=\"light\"]) .filter-select option{background-color:#fff;color:#000}.table-wrapper{width:100%;overflow-x:auto}.data-table{width:100%;border-collapse:collapse;white-space:normal;word-break:break-word}.data-table th{background:var(--app-bg);padding:10px 20px;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--app-text-muted);border-bottom:1px solid var(--app-border);-webkit-user-select:none;user-select:none}.data-table th.sortable{cursor:pointer}.data-table th.sortable:hover{color:var(--app-primary)}.sort-indicator{margin-left:4px;font-size:.75rem}.data-table td{padding:14px 20px;border-bottom:1px solid var(--app-border);font-size:.875rem;color:var(--app-text)}.data-table.hoverable tbody tr:hover{background:var(--glass-bg)}.data-table.striped tbody tr:nth-child(2n){background:var(--glass-bg)}.variant-striped .data-table tbody tr:nth-child(2n){background:var(--glass-bg)}.variant-borderless{border:none!important;box-shadow:none!important;background:transparent!important}.variant-borderless .table-header{border-bottom:none;padding:0 0 16px}.variant-borderless .data-table th{background:transparent;border-bottom:2px solid var(--app-border)}.variant-borderless .data-table td{border-bottom:1px dashed var(--app-border)}.variant-borderless .table-footer{border-top:none;background:transparent;padding:16px 0 0}.variant-glass{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);box-shadow:var(--glass-shadow-sm)}.variant-glass .table-header,.variant-glass .table-footer,.variant-glass .data-table th{background:transparent;border-color:var(--glass-border)}.variant-glass .data-table td{border-bottom:1px solid var(--glass-border)}.variant-elevated{box-shadow:0 20px 40px var(--glass-shadow);transform:translateY(-2px);transition:all .3s ease}.variant-compact .table-header{padding:12px 16px}.variant-compact .data-table th{padding:8px 16px;font-size:.625rem}.variant-compact .data-table td{padding:8px 16px;font-size:.8125rem}.variant-compact .table-footer{padding:8px 16px}tr.clickable{cursor:pointer}.amf-checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--app-primary)}.data-table tbody tr.selected{background:#3b82f626!important}.actions-col{text-align:right!important;width:120px}.actions-cell{text-align:right}.action-btns{display:flex;justify-content:flex-end;gap:6px}.action-btn{width:30px;height:30px;border-radius:6px;border:1px solid var(--app-border);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.action-btn svg{width:14px;height:14px;fill:var(--app-text-muted)}.action-btn:hover{border-color:var(--app-primary)}.action-btn:hover svg{fill:var(--app-primary)}.action-btn.danger:hover{border-color:#f43f5e}.action-btn.danger:hover svg{fill:#f43f5e}.btn-primary{background:linear-gradient(135deg,var(--app-primary),var(--app-accent));color:#fff;border:none;padding:8px 16px;border-radius:8px;font-weight:600;font-size:.8125rem;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px var(--app-glow)}.btn-icon{width:16px;height:16px;fill:currentColor}.btn-sm{padding:6px 12px;font-size:.75rem;border-radius:6px}.btn-ghost{background:transparent;border:1px solid var(--app-border);color:var(--app-text);padding:8px 16px;border-radius:8px;font-weight:600;font-size:.8125rem;display:flex;align-items:center;gap:6px;cursor:pointer;transition:all .2s}.btn-ghost:hover{background:var(--glass-bg-hover);color:var(--app-primary)}.export-container{position:relative}.export-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--app-surface);border:1px solid var(--app-border);border-radius:12px;box-shadow:0 10px 40px #00000080;min-width:160px;z-index:100;overflow:hidden;animation:slideInDown .2s ease-out backwards}.export-menu .dropdown-item{padding:10px 16px;font-size:.8125rem;font-weight:500;cursor:pointer;color:var(--app-text);transition:background .2s}.export-menu .dropdown-item:hover{background:var(--glass-bg-hover);color:var(--app-primary)}.empty-state{text-align:center;padding:40px!important;color:var(--app-text-muted)}.table-footer{padding:12px 20px;display:flex;justify-content:space-between;align-items:center;background:var(--app-bg);border-top:1px solid var(--app-border)}.footer-left{display:flex;align-items:center;gap:16px}.results-count{font-size:.75rem;color:var(--app-text-muted)}.page-size-wrap{display:flex;align-items:center;gap:6px}.page-size-label{font-size:.75rem;color:var(--app-text-muted);white-space:nowrap}.page-size-select{padding:4px 8px;border:1px solid var(--app-border);border-radius:6px;font-size:.75rem;background:var(--glass-bg);color:var(--app-text);outline:none;cursor:pointer;color-scheme:dark}.page-size-select option{background-color:#1a1a2e;color:#fff}:host-context([data-color-scheme=\"light\"]) .page-size-select{color-scheme:light}:host-context([data-color-scheme=\"light\"]) .page-size-select option{background-color:#fff;color:#000}.pagination{display:flex;gap:4px}.btn-page,.btn-page-nav{padding:6px 10px;border:1px solid var(--app-border);background:transparent;border-radius:6px;font-size:.75rem;font-weight:500;color:var(--app-text);cursor:pointer}.btn-page.active{background:var(--app-primary);border-color:var(--app-primary);color:#fff}.btn-page-nav:disabled{opacity:.4;cursor:not-allowed}.editable-cell{position:relative}.editable-cell:hover{background:#3b82f614;cursor:text}.inline-edit-wrap{display:flex;flex-direction:column;gap:4px;min-width:0}.inline-edit-row{display:flex;align-items:center;gap:4px}.inline-input{flex:1;min-width:0;padding:5px 8px;border:1.5px solid var(--app-primary);border-radius:6px;background:var(--app-surface);color:var(--app-text);font-size:.875rem;outline:none}.inline-input.input-invalid{border-color:#f43f5e}.inline-edit-error{font-size:.6875rem;color:#f43f5e;font-weight:500;padding:0 2px;animation:fadeIn .15s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.inline-edit-actions{display:flex;gap:3px;flex-shrink:0}.ie-btn{width:26px;height:26px;border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .15s}.ie-btn svg{width:14px;height:14px;fill:currentColor}.ie-btn:hover{opacity:.85}.ie-save{background:#22c55e;color:#fff}.ie-cancel{background:var(--app-border);color:var(--app-text-muted)}select.inline-input{color-scheme:dark;cursor:pointer}select.inline-input option{background-color:#1a1a2e;color:#fff}:host-context([data-color-scheme=\"light\"]) select.inline-input{color-scheme:light}:host-context([data-color-scheme=\"light\"]) select.inline-input option{background-color:#fff;color:#000}.expand-cell{width:36px;text-align:center;cursor:pointer}.expand-chevron{display:inline-block;transition:transform .2s;font-size:.625rem;color:var(--app-text-muted)}.expand-chevron.open{transform:rotate(90deg)}.expanded-row td,.expanded-content{padding:0!important}.expand-section{padding:14px 24px;display:flex;flex-wrap:wrap;gap:16px;background:var(--glass-bg);animation:fadeInUp .2s ease-out}.expand-field{display:flex;gap:8px;font-size:.8125rem}.expand-label{color:var(--app-text-muted);font-weight:600}.group-header-row td{background:var(--app-bg)}.group-toggle{display:flex;align-items:center;gap:8px;background:none;border:none;color:var(--app-text);cursor:pointer;font-size:.8125rem;padding:8px 16px}.group-chevron{display:inline-block;font-size:.625rem;transition:transform .2s;color:var(--app-text-muted)}.group-chevron.open{transform:rotate(90deg)}.group-count{color:var(--app-text-muted);font-size:.75rem}.aggregate-row td{background:var(--app-bg);border-top:2px solid var(--app-border)}.aggregate-cell{padding:10px 20px!important}.agg-value{font-size:.8125rem;font-weight:700;color:var(--app-primary)}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
@@ -5195,45 +5195,45 @@ class CardSectionComponent {
     get trustedContent() {
         return this.sanitizer.bypassSecurityTrustHtml(this.config.content || '');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CardSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CardSectionComponent, isStandalone: true, selector: "amf-card", inputs: { config: "config", context: "context" }, ngImport: i0, template: `
-    <div class="amf-card" [class]="'variant-' + (config.variant || 'glass')">
-      @if (config.title) { <h2 class="card-title">{{ config.title }}</h2> }
-      @if (config.content) { <div class="card-content" [innerHTML]="trustedContent"></div> }
-      @if (config.sections?.length) {
-        <div class="card-sections">
-          @for (nested of config.sections; track nested.id) {
-            <amf-renderer [section]="nested" [context]="context" class="card-nested-section"></amf-renderer>
-          }
-        </div>
-      }
-      @if (config.actions?.length) {
-        <div class="card-actions">
-          @for (action of config.actions; track action.label) { <button [class]="'btn-' + (action.variant || 'secondary')" (click)="actionDispatcher.dispatch(action.action, context)">{{ action.label }}</button> }
-        </div>
-      }
-    </div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CardSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: CardSectionComponent, isStandalone: true, selector: "amf-card", inputs: { config: "config", context: "context" }, ngImport: i0, template: `
+    <div class="amf-card" [class]="'variant-' + (config.variant || 'glass')">
+      @if (config.title) { <h2 class="card-title">{{ config.title }}</h2> }
+      @if (config.content) { <div class="card-content" [innerHTML]="trustedContent"></div> }
+      @if (config.sections?.length) {
+        <div class="card-sections">
+          @for (nested of config.sections; track nested.id) {
+            <amf-renderer [section]="nested" [context]="context" class="card-nested-section"></amf-renderer>
+          }
+        </div>
+      }
+      @if (config.actions?.length) {
+        <div class="card-actions">
+          @for (action of config.actions; track action.label) { <button [class]="'btn-' + (action.variant || 'secondary')" (click)="actionDispatcher.dispatch(action.action, context)">{{ action.label }}</button> }
+        </div>
+      }
+    </div>
   `, isInline: true, styles: [".amf-card{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:16px;padding:24px;box-shadow:var(--glass-shadow-sm);transition:all .3s cubic-bezier(.4,0,.2,1)}.amf-card:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-light);box-shadow:var(--glass-shadow);transform:translateY(-2px)}.variant-default{background:var(--app-surface);border:1px solid var(--app-border);backdrop-filter:none;-webkit-backdrop-filter:none}.variant-outlined{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.variant-elevated{box-shadow:0 20px 40px var(--glass-shadow);transform:translateY(-4px)}.variant-gradient{background:linear-gradient(135deg,#3b82f626,#8b5cf626);border:1px solid rgba(139,92,246,.3)}.card-title{font-size:1.25rem;margin-bottom:16px}.card-content{color:var(--app-text-muted);font-size:.9375rem;line-height:1.6}.card-sections{display:flex;flex-direction:column;gap:16px;margin-top:16px}.card-nested-section{display:block}.card-actions{margin-top:20px;display:flex;gap:12px}.btn-secondary{background:var(--glass-bg);border:1px solid var(--app-border);color:var(--app-text);padding:8px 16px;border-radius:8px;font-weight:600;font-size:.8125rem;cursor:pointer;transition:all .2s}.btn-secondary:hover{background:var(--glass-bg-hover)}.btn-primary{background:linear-gradient(135deg,var(--app-primary),var(--app-accent));color:#fff;border:none;padding:8px 16px;border-radius:8px;font-weight:600;font-size:.8125rem;cursor:pointer;transition:all .2s}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px var(--app-glow)}.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none;padding:8px 16px;border-radius:8px;font-weight:600;font-size:.8125rem;cursor:pointer;transition:all .2s}.btn-danger:hover{transform:translateY(-1px);box-shadow:0 4px 12px #ef444466}.btn-success{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;padding:8px 16px;border-radius:8px;font-weight:600;font-size:.8125rem;cursor:pointer;transition:all .2s}.btn-success:hover{transform:translateY(-1px);box-shadow:0 4px 12px #10b98166}.btn-ghost{background:transparent;border:1px solid transparent;color:var(--app-text-muted);padding:8px 16px;border-radius:8px;font-weight:600;font-size:.8125rem;cursor:pointer;transition:all .2s}.btn-ghost:hover{background:#ffffff0d;color:var(--app-text)}\n"], dependencies: [{ kind: "component", type: MetaRendererComponent, selector: "amf-renderer", inputs: ["section", "context"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CardSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CardSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'amf-card', standalone: true, imports: [MetaRendererComponent], template: `
-    <div class="amf-card" [class]="'variant-' + (config.variant || 'glass')">
-      @if (config.title) { <h2 class="card-title">{{ config.title }}</h2> }
-      @if (config.content) { <div class="card-content" [innerHTML]="trustedContent"></div> }
-      @if (config.sections?.length) {
-        <div class="card-sections">
-          @for (nested of config.sections; track nested.id) {
-            <amf-renderer [section]="nested" [context]="context" class="card-nested-section"></amf-renderer>
-          }
-        </div>
-      }
-      @if (config.actions?.length) {
-        <div class="card-actions">
-          @for (action of config.actions; track action.label) { <button [class]="'btn-' + (action.variant || 'secondary')" (click)="actionDispatcher.dispatch(action.action, context)">{{ action.label }}</button> }
-        </div>
-      }
-    </div>
+            args: [{ selector: 'amf-card', standalone: true, imports: [MetaRendererComponent], template: `
+    <div class="amf-card" [class]="'variant-' + (config.variant || 'glass')">
+      @if (config.title) { <h2 class="card-title">{{ config.title }}</h2> }
+      @if (config.content) { <div class="card-content" [innerHTML]="trustedContent"></div> }
+      @if (config.sections?.length) {
+        <div class="card-sections">
+          @for (nested of config.sections; track nested.id) {
+            <amf-renderer [section]="nested" [context]="context" class="card-nested-section"></amf-renderer>
+          }
+        </div>
+      }
+      @if (config.actions?.length) {
+        <div class="card-actions">
+          @for (action of config.actions; track action.label) { <button [class]="'btn-' + (action.variant || 'secondary')" (click)="actionDispatcher.dispatch(action.action, context)">{{ action.label }}</button> }
+        </div>
+      }
+    </div>
   `, styles: [".amf-card{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:16px;padding:24px;box-shadow:var(--glass-shadow-sm);transition:all .3s cubic-bezier(.4,0,.2,1)}.amf-card:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-light);box-shadow:var(--glass-shadow);transform:translateY(-2px)}.variant-default{background:var(--app-surface);border:1px solid var(--app-border);backdrop-filter:none;-webkit-backdrop-filter:none}.variant-outlined{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.variant-elevated{box-shadow:0 20px 40px var(--glass-shadow);transform:translateY(-4px)}.variant-gradient{background:linear-gradient(135deg,#3b82f626,#8b5cf626);border:1px solid rgba(139,92,246,.3)}.card-title{font-size:1.25rem;margin-bottom:16px}.card-content{color:var(--app-text-muted);font-size:.9375rem;line-height:1.6}.card-sections{display:flex;flex-direction:column;gap:16px;margin-top:16px}.card-nested-section{display:block}.card-actions{margin-top:20px;display:flex;gap:12px}.btn-secondary{background:var(--glass-bg);border:1px solid var(--app-border);color:var(--app-text);padding:8px 16px;border-radius:8px;font-weight:600;font-size:.8125rem;cursor:pointer;transition:all .2s}.btn-secondary:hover{background:var(--glass-bg-hover)}.btn-primary{background:linear-gradient(135deg,var(--app-primary),var(--app-accent));color:#fff;border:none;padding:8px 16px;border-radius:8px;font-weight:600;font-size:.8125rem;cursor:pointer;transition:all .2s}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px var(--app-glow)}.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none;padding:8px 16px;border-radius:8px;font-weight:600;font-size:.8125rem;cursor:pointer;transition:all .2s}.btn-danger:hover{transform:translateY(-1px);box-shadow:0 4px 12px #ef444466}.btn-success{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;padding:8px 16px;border-radius:8px;font-weight:600;font-size:.8125rem;cursor:pointer;transition:all .2s}.btn-success:hover{transform:translateY(-1px);box-shadow:0 4px 12px #10b98166}.btn-ghost{background:transparent;border:1px solid transparent;color:var(--app-text-muted);padding:8px 16px;border-radius:8px;font-weight:600;font-size:.8125rem;cursor:pointer;transition:all .2s}.btn-ghost:hover{background:#ffffff0d;color:var(--app-text)}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
@@ -5249,47 +5249,47 @@ class StatsGridSectionComponent {
     context = {};
     iconRegistry = inject(IconRegistryService);
     get gridCols() { return `repeat(auto-fit, minmax(280px, 1fr))`; }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StatsGridSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: StatsGridSectionComponent, isStandalone: true, selector: "amf-stats-grid", inputs: { config: "config", context: "context" }, ngImport: i0, template: `
-    <div class="amf-stats-grid" [style.grid-template-columns]="gridCols" [class]="'variant-' + (config.variant || 'glass')">
-      @for (stat of config.stats; track stat.label; let i = $index) {
-        <div class="stat-card" [style.animation-delay]="(i * 0.1) + 's'">
-          <div class="stat-glow" [style.background]="stat.glowColor || stat.color"></div>
-          @if (stat.icon) {
-            <div class="stat-icon" [style.color]="stat.color" [style.background]="stat.bgColor">
-              <svg viewBox="0 0 24 24"><path [attr.d]="iconRegistry.getIcon(stat.icon)"></path></svg>
-            </div>
-          }
-          <div class="stat-data">
-            <span class="stat-label">{{ stat.label }}</span>
-            <span class="stat-value">{{ stat.value }}</span>
-            @if (stat.trend) { <span class="stat-trend" [class.positive]="stat.trendPositive" [class.negative]="!stat.trendPositive">{{ stat.trend }}</span> }
-          </div>
-        </div>
-      }
-    </div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: StatsGridSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: StatsGridSectionComponent, isStandalone: true, selector: "amf-stats-grid", inputs: { config: "config", context: "context" }, ngImport: i0, template: `
+    <div class="amf-stats-grid" [style.grid-template-columns]="gridCols" [class]="'variant-' + (config.variant || 'glass')">
+      @for (stat of config.stats; track stat.label; let i = $index) {
+        <div class="stat-card" [style.animation-delay]="(i * 0.1) + 's'">
+          <div class="stat-glow" [style.background]="stat.glowColor || stat.color"></div>
+          @if (stat.icon) {
+            <div class="stat-icon" [style.color]="stat.color" [style.background]="stat.bgColor">
+              <svg viewBox="0 0 24 24"><path [attr.d]="iconRegistry.getIcon(stat.icon)"></path></svg>
+            </div>
+          }
+          <div class="stat-data">
+            <span class="stat-label">{{ stat.label }}</span>
+            <span class="stat-value">{{ stat.value }}</span>
+            @if (stat.trend) { <span class="stat-trend" [class.positive]="stat.trendPositive" [class.negative]="!stat.trendPositive">{{ stat.trend }}</span> }
+          </div>
+        </div>
+      }
+    </div>
   `, isInline: true, styles: [".amf-stats-grid{display:grid;gap:20px}.stat-card{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:16px;padding:24px;display:flex;align-items:center;gap:20px;position:relative;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);animation:fadeInUp .5s ease-out backwards}.stat-card:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-light);transform:translateY(-4px);box-shadow:var(--glass-shadow)}.variant-default .stat-card{background:var(--app-surface);border:1px solid var(--app-border);backdrop-filter:none;-webkit-backdrop-filter:none}.variant-compact .stat-card{padding:14px 16px;gap:14px;min-height:80px}.variant-compact .stat-icon{width:38px;height:38px;border-radius:10px}.variant-compact .stat-icon svg{width:18px;height:18px}.variant-compact .stat-value{font-size:1.25rem;font-weight:800}.variant-compact .stat-glow{width:60px;height:60px;top:-10px;right:-10px}.variant-outlined .stat-card{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}.variant-elevated .stat-card{box-shadow:0 20px 40px var(--glass-shadow);transform:translateY(-2px);border-color:var(--glass-border-light)}.stat-glow{position:absolute;width:100px;height:100px;border-radius:50%;filter:blur(40px);opacity:.15;top:-20px;right:-20px;pointer-events:none;transition:opacity .3s}.stat-card:hover .stat-glow{opacity:.3}.stat-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.stat-icon svg{width:26px;height:26px;fill:currentColor}.stat-data{display:flex;flex-direction:column}.stat-label{font-size:.8125rem;color:var(--app-text-muted);font-weight:500}.stat-value{font-size:1.5rem;font-weight:700;color:var(--app-text);margin:2px 0}.stat-trend{font-size:.75rem;font-weight:600}.stat-trend.positive{color:#34d399}.stat-trend.negative{color:#fb7185}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StatsGridSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: StatsGridSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'amf-stats-grid', standalone: true, imports: [], template: `
-    <div class="amf-stats-grid" [style.grid-template-columns]="gridCols" [class]="'variant-' + (config.variant || 'glass')">
-      @for (stat of config.stats; track stat.label; let i = $index) {
-        <div class="stat-card" [style.animation-delay]="(i * 0.1) + 's'">
-          <div class="stat-glow" [style.background]="stat.glowColor || stat.color"></div>
-          @if (stat.icon) {
-            <div class="stat-icon" [style.color]="stat.color" [style.background]="stat.bgColor">
-              <svg viewBox="0 0 24 24"><path [attr.d]="iconRegistry.getIcon(stat.icon)"></path></svg>
-            </div>
-          }
-          <div class="stat-data">
-            <span class="stat-label">{{ stat.label }}</span>
-            <span class="stat-value">{{ stat.value }}</span>
-            @if (stat.trend) { <span class="stat-trend" [class.positive]="stat.trendPositive" [class.negative]="!stat.trendPositive">{{ stat.trend }}</span> }
-          </div>
-        </div>
-      }
-    </div>
+            args: [{ selector: 'amf-stats-grid', standalone: true, imports: [], template: `
+    <div class="amf-stats-grid" [style.grid-template-columns]="gridCols" [class]="'variant-' + (config.variant || 'glass')">
+      @for (stat of config.stats; track stat.label; let i = $index) {
+        <div class="stat-card" [style.animation-delay]="(i * 0.1) + 's'">
+          <div class="stat-glow" [style.background]="stat.glowColor || stat.color"></div>
+          @if (stat.icon) {
+            <div class="stat-icon" [style.color]="stat.color" [style.background]="stat.bgColor">
+              <svg viewBox="0 0 24 24"><path [attr.d]="iconRegistry.getIcon(stat.icon)"></path></svg>
+            </div>
+          }
+          <div class="stat-data">
+            <span class="stat-label">{{ stat.label }}</span>
+            <span class="stat-value">{{ stat.value }}</span>
+            @if (stat.trend) { <span class="stat-trend" [class.positive]="stat.trendPositive" [class.negative]="!stat.trendPositive">{{ stat.trend }}</span> }
+          </div>
+        </div>
+      }
+    </div>
   `, styles: [".amf-stats-grid{display:grid;gap:20px}.stat-card{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:16px;padding:24px;display:flex;align-items:center;gap:20px;position:relative;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);animation:fadeInUp .5s ease-out backwards}.stat-card:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-light);transform:translateY(-4px);box-shadow:var(--glass-shadow)}.variant-default .stat-card{background:var(--app-surface);border:1px solid var(--app-border);backdrop-filter:none;-webkit-backdrop-filter:none}.variant-compact .stat-card{padding:14px 16px;gap:14px;min-height:80px}.variant-compact .stat-icon{width:38px;height:38px;border-radius:10px}.variant-compact .stat-icon svg{width:18px;height:18px}.variant-compact .stat-value{font-size:1.25rem;font-weight:800}.variant-compact .stat-glow{width:60px;height:60px;top:-10px;right:-10px}.variant-outlined .stat-card{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}.variant-elevated .stat-card{box-shadow:0 20px 40px var(--glass-shadow);transform:translateY(-2px);border-color:var(--glass-border-light)}.stat-glow{position:absolute;width:100px;height:100px;border-radius:50%;filter:blur(40px);opacity:.15;top:-20px;right:-20px;pointer-events:none;transition:opacity .3s}.stat-card:hover .stat-glow{opacity:.3}.stat-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.stat-icon svg{width:26px;height:26px;fill:currentColor}.stat-data{display:flex;flex-direction:column}.stat-label{font-size:.8125rem;color:var(--app-text-muted);font-weight:500}.stat-value{font-size:1.5rem;font-weight:700;color:var(--app-text);margin:2px 0}.stat-trend{font-size:.75rem;font-weight:600}.stat-trend.positive{color:#34d399}.stat-trend.negative{color:#fb7185}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
@@ -5313,41 +5313,41 @@ class PageHeaderSectionComponent {
         }
         return this.config.title;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PageHeaderSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PageHeaderSectionComponent, isStandalone: true, selector: "amf-page-header", inputs: { config: "config", context: "context" }, ngImport: i0, template: `
-    <header class="amf-page-header">
-      <div class="header-content">
-        <h1>{{ resolvedTitle }}</h1>
-        @if (config.subtitle) { <p>{{ config.subtitle }}</p> }
-      </div>
-      <div class="header-actions">
-        @for (action of config.actions || []; track action.label) {
-          <button [class]="'btn-' + (action.variant || 'primary')" (click)="actionDispatcher.dispatch(action.action, context)">
-            @if (action.icon) { <svg viewBox="0 0 24 24" class="btn-icon"><path [attr.d]="iconRegistry.getIcon(action.icon)"></path></svg> }
-            {{ action.label }}
-          </button>
-        }
-      </div>
-    </header>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: PageHeaderSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: PageHeaderSectionComponent, isStandalone: true, selector: "amf-page-header", inputs: { config: "config", context: "context" }, ngImport: i0, template: `
+    <header class="amf-page-header">
+      <div class="header-content">
+        <h1>{{ resolvedTitle }}</h1>
+        @if (config.subtitle) { <p>{{ config.subtitle }}</p> }
+      </div>
+      <div class="header-actions">
+        @for (action of config.actions || []; track action.label) {
+          <button [class]="'btn-' + (action.variant || 'primary')" (click)="actionDispatcher.dispatch(action.action, context)">
+            @if (action.icon) { <svg viewBox="0 0 24 24" class="btn-icon"><path [attr.d]="iconRegistry.getIcon(action.icon)"></path></svg> }
+            {{ action.label }}
+          </button>
+        }
+      </div>
+    </header>
   `, isInline: true, styles: [".amf-page-header{display:flex;justify-content:space-between;align-items:center;animation:fadeInUp .4s ease-out}.header-content h1{font-size:1.875rem;margin-bottom:4px}.header-content p{color:var(--app-text-muted);font-size:.9375rem}.header-actions{display:flex;gap:12px}.btn-primary{background:linear-gradient(135deg,var(--app-primary),var(--app-accent));color:#fff;border:none;padding:10px 20px;border-radius:10px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .3s}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px -4px var(--app-glow)}.btn-secondary{background:var(--glass-bg);border:1px solid var(--app-border);color:var(--app-text);padding:10px 20px;border-radius:10px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s}.btn-secondary:hover{background:var(--glass-bg-hover)}.btn-ghost{background:transparent;border:none;color:var(--app-text-muted);padding:10px 20px;border-radius:10px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s}.btn-ghost:hover{color:var(--app-primary);background:var(--glass-bg)}.btn-icon{width:18px;height:18px;fill:currentColor}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PageHeaderSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: PageHeaderSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'amf-page-header', standalone: true, imports: [], template: `
-    <header class="amf-page-header">
-      <div class="header-content">
-        <h1>{{ resolvedTitle }}</h1>
-        @if (config.subtitle) { <p>{{ config.subtitle }}</p> }
-      </div>
-      <div class="header-actions">
-        @for (action of config.actions || []; track action.label) {
-          <button [class]="'btn-' + (action.variant || 'primary')" (click)="actionDispatcher.dispatch(action.action, context)">
-            @if (action.icon) { <svg viewBox="0 0 24 24" class="btn-icon"><path [attr.d]="iconRegistry.getIcon(action.icon)"></path></svg> }
-            {{ action.label }}
-          </button>
-        }
-      </div>
-    </header>
+            args: [{ selector: 'amf-page-header', standalone: true, imports: [], template: `
+    <header class="amf-page-header">
+      <div class="header-content">
+        <h1>{{ resolvedTitle }}</h1>
+        @if (config.subtitle) { <p>{{ config.subtitle }}</p> }
+      </div>
+      <div class="header-actions">
+        @for (action of config.actions || []; track action.label) {
+          <button [class]="'btn-' + (action.variant || 'primary')" (click)="actionDispatcher.dispatch(action.action, context)">
+            @if (action.icon) { <svg viewBox="0 0 24 24" class="btn-icon"><path [attr.d]="iconRegistry.getIcon(action.icon)"></path></svg> }
+            {{ action.label }}
+          </button>
+        }
+      </div>
+    </header>
   `, styles: [".amf-page-header{display:flex;justify-content:space-between;align-items:center;animation:fadeInUp .4s ease-out}.header-content h1{font-size:1.875rem;margin-bottom:4px}.header-content p{color:var(--app-text-muted);font-size:.9375rem}.header-actions{display:flex;gap:12px}.btn-primary{background:linear-gradient(135deg,var(--app-primary),var(--app-accent));color:#fff;border:none;padding:10px 20px;border-radius:10px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .3s}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px -4px var(--app-glow)}.btn-secondary{background:var(--glass-bg);border:1px solid var(--app-border);color:var(--app-text);padding:10px 20px;border-radius:10px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s}.btn-secondary:hover{background:var(--glass-bg-hover)}.btn-ghost{background:transparent;border:none;color:var(--app-text-muted);padding:10px 20px;border-radius:10px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s}.btn-ghost:hover{color:var(--app-primary);background:var(--glass-bg)}.btn-icon{width:18px;height:18px;fill:currentColor}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
@@ -5361,10 +5361,10 @@ class NavigationService {
     setMenuItems(groups) {
         this.menuItems.set(groups);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NavigationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavigationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -5531,10 +5531,10 @@ class AppConfigService {
             html.setAttribute('data-color-scheme', 'light');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AppConfigService, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AppConfigService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AppConfigService, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AppConfigService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AppConfigService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AppConfigService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.Router }] });
@@ -5770,10 +5770,10 @@ class ThemeService {
         const next = themes[(idx + 1) % themes.length];
         this.setTheme(next.name);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ThemeService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ThemeService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ThemeService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -5793,141 +5793,141 @@ class SidebarComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: SidebarComponent, isStandalone: true, selector: "app-sidebar", ngImport: i0, template: `
-    <div class="sidebar-container" [class.collapsed]="config.sidebarCollapsed()">
-      <div class="sidebar-header">
-        <div class="logo">
-          <div class="logo-glow">
-            <svg viewBox="0 0 24 24" class="logo-icon">
-              <path [attr.d]="iconRegistry.getIcon('dashboard')"></path>
-            </svg>
-          </div>
-          <span class="logo-text">{{ config.appName() }}</span>
-        </div>
-      </div>
-
-      <nav class="sidebar-nav">
-        @for (group of navigation.menuItems(); track group.label) {
-          <div class="nav-group">
-            <h3 class="group-title">{{ group.label }}</h3>
-            <ul>
-              <ng-container *ngTemplateOutlet="menuList; context: { $implicit: group.items }"></ng-container>
-            </ul>
-          </div>
-        }
-      </nav>
-
-      <ng-template #menuList let-listItems>
-        @for (node of listItems; track node.label) {
-          <li class="nav-item-wrapper">
-            <div
-              class="nav-item"
-              [routerLink]="node.route ? node.route : null"
-              routerLinkActive="active"
-              [class.has-children]="node.children?.length"
-              (click)="toggleExpand(node)"
-            >
-              <div class="nav-link-content">
-                @if (node.icon) {
-                  <svg viewBox="0 0 24 24" class="nav-icon">
-                    <path [attr.d]="iconRegistry.getIcon(node.icon)"></path>
-                  </svg>
-                }
-                <span class="nav-label">{{ node.label }}</span>
-              </div>
-
-              @if (node.badge) {
-                <span class="badge" [style.background]="'linear-gradient(135deg, ' + node.badgeColor + ', ' + node.badgeColor + '88)'">
-                  {{ node.badge }}
-                </span>
-              }
-
-              @if (node.children?.length) {
-                <svg viewBox="0 0 24 24" class="chevron" [class.rotated]="expandedItems.has(node)">
-                  <path [attr.d]="iconRegistry.getIcon('chevron-right')"></path>
-                </svg>
-              }
-            </div>
-
-            @if (node.children?.length && expandedItems.has(node)) {
-              <ul class="sub-menu">
-                <ng-container *ngTemplateOutlet="menuList; context: { $implicit: node.children }"></ng-container>
-              </ul>
-            }
-          </li>
-        }
-      </ng-template>
-    </div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: SidebarComponent, isStandalone: true, selector: "app-sidebar", ngImport: i0, template: `
+    <div class="sidebar-container" [class.collapsed]="config.sidebarCollapsed()">
+      <div class="sidebar-header">
+        <div class="logo">
+          <div class="logo-glow">
+            <svg viewBox="0 0 24 24" class="logo-icon">
+              <path [attr.d]="iconRegistry.getIcon('dashboard')"></path>
+            </svg>
+          </div>
+          <span class="logo-text">{{ config.appName() }}</span>
+        </div>
+      </div>
+
+      <nav class="sidebar-nav">
+        @for (group of navigation.menuItems(); track group.label) {
+          <div class="nav-group">
+            <h3 class="group-title">{{ group.label }}</h3>
+            <ul>
+              <ng-container *ngTemplateOutlet="menuList; context: { $implicit: group.items }"></ng-container>
+            </ul>
+          </div>
+        }
+      </nav>
+
+      <ng-template #menuList let-listItems>
+        @for (node of listItems; track node.label) {
+          <li class="nav-item-wrapper">
+            <div
+              class="nav-item"
+              [routerLink]="node.route ? node.route : null"
+              routerLinkActive="active"
+              [class.has-children]="node.children?.length"
+              (click)="toggleExpand(node)"
+            >
+              <div class="nav-link-content">
+                @if (node.icon) {
+                  <svg viewBox="0 0 24 24" class="nav-icon">
+                    <path [attr.d]="iconRegistry.getIcon(node.icon)"></path>
+                  </svg>
+                }
+                <span class="nav-label">{{ node.label }}</span>
+              </div>
+
+              @if (node.badge) {
+                <span class="badge" [style.background]="'linear-gradient(135deg, ' + node.badgeColor + ', ' + node.badgeColor + '88)'">
+                  {{ node.badge }}
+                </span>
+              }
+
+              @if (node.children?.length) {
+                <svg viewBox="0 0 24 24" class="chevron" [class.rotated]="expandedItems.has(node)">
+                  <path [attr.d]="iconRegistry.getIcon('chevron-right')"></path>
+                </svg>
+              }
+            </div>
+
+            @if (node.children?.length && expandedItems.has(node)) {
+              <ul class="sub-menu">
+                <ng-container *ngTemplateOutlet="menuList; context: { $implicit: node.children }"></ng-container>
+              </ul>
+            }
+          </li>
+        }
+      </ng-template>
+    </div>
   `, isInline: true, styles: [":host{display:block;height:100%}.sidebar-container{width:var(--sidebar-width, 260px);height:100%;background:var(--app-sidebar-bg);backdrop-filter:blur(var(--glass-blur-heavy));-webkit-backdrop-filter:blur(var(--glass-blur-heavy));border-right:1px solid var(--glass-border);display:flex;flex-direction:column;transition:width var(--transition-smooth);overflow:hidden;position:relative}.sidebar-container:after{content:\"\";position:absolute;top:0;right:0;width:1px;height:100%;background:linear-gradient(to bottom,transparent,var(--app-primary-light),transparent);pointer-events:none}.sidebar-container.collapsed{width:80px}.sidebar-header{height:68px;display:flex;align-items:center;padding:0 20px;border-bottom:1px solid var(--glass-border)}.logo{display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.25rem;color:var(--app-text);white-space:nowrap}.logo-glow{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--app-primary),var(--app-accent));display:flex;align-items:center;justify-content:center;box-shadow:0 0 20px var(--app-glow);animation:pulseGlow 4s ease-in-out infinite;flex-shrink:0}.logo-icon{width:20px;height:20px;fill:#fff}.sidebar-container.collapsed .logo-text{display:none}.sidebar-nav{flex:1;overflow-y:auto;padding:16px 0}.nav-group{margin-top:28px}.nav-group:first-child{margin-top:0}.group-title{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--app-text-muted);padding:0 24px 8px;opacity:.6}.sidebar-container.collapsed .group-title{display:none}ul{list-style:none;padding:0;margin:0}.nav-item-wrapper{margin-bottom:2px;padding:0 10px}.nav-item{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 14px;border-radius:10px;color:var(--app-sidebar-text);cursor:pointer;transition:all var(--transition-smooth);text-decoration:none;position:relative}.nav-item:hover{background:var(--glass-bg-hover);color:var(--app-text)}.nav-item.active{background:linear-gradient(135deg,var(--app-primary-light),var(--app-accent-light));color:var(--app-primary);box-shadow:0 0 20px var(--app-glow)}.nav-item.active:before{content:\"\";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:linear-gradient(to bottom,var(--app-primary),var(--app-accent))}.nav-item.active .nav-icon{filter:drop-shadow(0 0 6px var(--app-glow))}.nav-link-content{display:flex;align-items:center;gap:12px}.nav-icon{width:20px;height:20px;fill:currentColor;flex-shrink:0;transition:all var(--transition-fast)}.sidebar-container.collapsed .nav-label,.sidebar-container.collapsed .chevron,.sidebar-container.collapsed .badge{display:none}.chevron{width:16px;height:16px;fill:currentColor;transition:transform var(--transition-smooth);opacity:.5}.chevron.rotated{transform:rotate(90deg)}.badge{font-size:10px;padding:2px 8px;border-radius:10px;color:#fff;font-weight:600;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.sub-menu{padding-left:24px;margin-top:4px;animation:fadeInUp .2s ease-out}.sidebar-container.collapsed .sub-menu{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SidebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-sidebar', standalone: true, imports: [CommonModule, RouterLink, RouterLinkActive], template: `
-    <div class="sidebar-container" [class.collapsed]="config.sidebarCollapsed()">
-      <div class="sidebar-header">
-        <div class="logo">
-          <div class="logo-glow">
-            <svg viewBox="0 0 24 24" class="logo-icon">
-              <path [attr.d]="iconRegistry.getIcon('dashboard')"></path>
-            </svg>
-          </div>
-          <span class="logo-text">{{ config.appName() }}</span>
-        </div>
-      </div>
-
-      <nav class="sidebar-nav">
-        @for (group of navigation.menuItems(); track group.label) {
-          <div class="nav-group">
-            <h3 class="group-title">{{ group.label }}</h3>
-            <ul>
-              <ng-container *ngTemplateOutlet="menuList; context: { $implicit: group.items }"></ng-container>
-            </ul>
-          </div>
-        }
-      </nav>
-
-      <ng-template #menuList let-listItems>
-        @for (node of listItems; track node.label) {
-          <li class="nav-item-wrapper">
-            <div
-              class="nav-item"
-              [routerLink]="node.route ? node.route : null"
-              routerLinkActive="active"
-              [class.has-children]="node.children?.length"
-              (click)="toggleExpand(node)"
-            >
-              <div class="nav-link-content">
-                @if (node.icon) {
-                  <svg viewBox="0 0 24 24" class="nav-icon">
-                    <path [attr.d]="iconRegistry.getIcon(node.icon)"></path>
-                  </svg>
-                }
-                <span class="nav-label">{{ node.label }}</span>
-              </div>
-
-              @if (node.badge) {
-                <span class="badge" [style.background]="'linear-gradient(135deg, ' + node.badgeColor + ', ' + node.badgeColor + '88)'">
-                  {{ node.badge }}
-                </span>
-              }
-
-              @if (node.children?.length) {
-                <svg viewBox="0 0 24 24" class="chevron" [class.rotated]="expandedItems.has(node)">
-                  <path [attr.d]="iconRegistry.getIcon('chevron-right')"></path>
-                </svg>
-              }
-            </div>
-
-            @if (node.children?.length && expandedItems.has(node)) {
-              <ul class="sub-menu">
-                <ng-container *ngTemplateOutlet="menuList; context: { $implicit: node.children }"></ng-container>
-              </ul>
-            }
-          </li>
-        }
-      </ng-template>
-    </div>
+            args: [{ selector: 'app-sidebar', standalone: true, imports: [CommonModule, RouterLink, RouterLinkActive], template: `
+    <div class="sidebar-container" [class.collapsed]="config.sidebarCollapsed()">
+      <div class="sidebar-header">
+        <div class="logo">
+          <div class="logo-glow">
+            <svg viewBox="0 0 24 24" class="logo-icon">
+              <path [attr.d]="iconRegistry.getIcon('dashboard')"></path>
+            </svg>
+          </div>
+          <span class="logo-text">{{ config.appName() }}</span>
+        </div>
+      </div>
+
+      <nav class="sidebar-nav">
+        @for (group of navigation.menuItems(); track group.label) {
+          <div class="nav-group">
+            <h3 class="group-title">{{ group.label }}</h3>
+            <ul>
+              <ng-container *ngTemplateOutlet="menuList; context: { $implicit: group.items }"></ng-container>
+            </ul>
+          </div>
+        }
+      </nav>
+
+      <ng-template #menuList let-listItems>
+        @for (node of listItems; track node.label) {
+          <li class="nav-item-wrapper">
+            <div
+              class="nav-item"
+              [routerLink]="node.route ? node.route : null"
+              routerLinkActive="active"
+              [class.has-children]="node.children?.length"
+              (click)="toggleExpand(node)"
+            >
+              <div class="nav-link-content">
+                @if (node.icon) {
+                  <svg viewBox="0 0 24 24" class="nav-icon">
+                    <path [attr.d]="iconRegistry.getIcon(node.icon)"></path>
+                  </svg>
+                }
+                <span class="nav-label">{{ node.label }}</span>
+              </div>
+
+              @if (node.badge) {
+                <span class="badge" [style.background]="'linear-gradient(135deg, ' + node.badgeColor + ', ' + node.badgeColor + '88)'">
+                  {{ node.badge }}
+                </span>
+              }
+
+              @if (node.children?.length) {
+                <svg viewBox="0 0 24 24" class="chevron" [class.rotated]="expandedItems.has(node)">
+                  <path [attr.d]="iconRegistry.getIcon('chevron-right')"></path>
+                </svg>
+              }
+            </div>
+
+            @if (node.children?.length && expandedItems.has(node)) {
+              <ul class="sub-menu">
+                <ng-container *ngTemplateOutlet="menuList; context: { $implicit: node.children }"></ng-container>
+              </ul>
+            }
+          </li>
+        }
+      </ng-template>
+    </div>
   `, styles: [":host{display:block;height:100%}.sidebar-container{width:var(--sidebar-width, 260px);height:100%;background:var(--app-sidebar-bg);backdrop-filter:blur(var(--glass-blur-heavy));-webkit-backdrop-filter:blur(var(--glass-blur-heavy));border-right:1px solid var(--glass-border);display:flex;flex-direction:column;transition:width var(--transition-smooth);overflow:hidden;position:relative}.sidebar-container:after{content:\"\";position:absolute;top:0;right:0;width:1px;height:100%;background:linear-gradient(to bottom,transparent,var(--app-primary-light),transparent);pointer-events:none}.sidebar-container.collapsed{width:80px}.sidebar-header{height:68px;display:flex;align-items:center;padding:0 20px;border-bottom:1px solid var(--glass-border)}.logo{display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.25rem;color:var(--app-text);white-space:nowrap}.logo-glow{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--app-primary),var(--app-accent));display:flex;align-items:center;justify-content:center;box-shadow:0 0 20px var(--app-glow);animation:pulseGlow 4s ease-in-out infinite;flex-shrink:0}.logo-icon{width:20px;height:20px;fill:#fff}.sidebar-container.collapsed .logo-text{display:none}.sidebar-nav{flex:1;overflow-y:auto;padding:16px 0}.nav-group{margin-top:28px}.nav-group:first-child{margin-top:0}.group-title{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--app-text-muted);padding:0 24px 8px;opacity:.6}.sidebar-container.collapsed .group-title{display:none}ul{list-style:none;padding:0;margin:0}.nav-item-wrapper{margin-bottom:2px;padding:0 10px}.nav-item{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 14px;border-radius:10px;color:var(--app-sidebar-text);cursor:pointer;transition:all var(--transition-smooth);text-decoration:none;position:relative}.nav-item:hover{background:var(--glass-bg-hover);color:var(--app-text)}.nav-item.active{background:linear-gradient(135deg,var(--app-primary-light),var(--app-accent-light));color:var(--app-primary);box-shadow:0 0 20px var(--app-glow)}.nav-item.active:before{content:\"\";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:linear-gradient(to bottom,var(--app-primary),var(--app-accent))}.nav-item.active .nav-icon{filter:drop-shadow(0 0 6px var(--app-glow))}.nav-link-content{display:flex;align-items:center;gap:12px}.nav-icon{width:20px;height:20px;fill:currentColor;flex-shrink:0;transition:all var(--transition-fast)}.sidebar-container.collapsed .nav-label,.sidebar-container.collapsed .chevron,.sidebar-container.collapsed .badge{display:none}.chevron{width:16px;height:16px;fill:currentColor;transition:transform var(--transition-smooth);opacity:.5}.chevron.rotated{transform:rotate(90deg)}.badge{font-size:10px;padding:2px 8px;border-radius:10px;color:#fff;font-weight:600;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.sub-menu{padding-left:24px;margin-top:4px;animation:fadeInUp .2s ease-out}.sidebar-container.collapsed .sub-menu{display:none}\n"] }]
         }] });
 
@@ -5946,437 +5946,437 @@ class NavbarComponent {
         };
         return colors[name] || '#06b6d4';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: NavbarComponent, isStandalone: true, selector: "app-navbar", ngImport: i0, template: `
-    <header class="navbar-container">
-      <div class="left-section">
-        <button class="icon-btn" (click)="config.toggleSidebar()" title="Toggle Sidebar">
-          <svg viewBox="0 0 24 24">
-            <path [attr.d]="iconRegistry.getIcon('menu')"></path>
-          </svg>
-        </button>
-
-        <div class="search-box">
-          <svg viewBox="0 0 24 24" class="search-icon">
-            <path [attr.d]="iconRegistry.getIcon('search')"></path>
-          </svg>
-          <input type="text" placeholder="Search anything...">
-        </div>
-      </div>
-
-      <div class="right-section">
-        <!-- Theme Switcher -->
-        <button class="icon-btn theme-btn" (click)="themeToggleOpen.set(!themeToggleOpen())" title="Change Theme">
-          <svg viewBox="0 0 24 24">
-            <path [attr.d]="iconRegistry.getIcon('palette')"></path>
-          </svg>
-
-          @if (themeToggleOpen()) {
-            <div class="dropdown theme-dropdown">
-              @for (theme of themeService.availableThemes; track theme.name) {
-                <div
-                  class="dropdown-item"
-                  [class.active]="themeService.currentTheme() === theme.name"
-                  (click)="themeService.setTheme(theme.name); themeToggleOpen.set(false)"
-                >
-                  <span class="theme-dot" [style.background]="getThemeColor(theme.name)"></span>
-                  {{ theme.label }}
-                </div>
-              }
-            </div>
-          }
-        </button>
-
-        <!-- User Profile -->
-        <div class="user-profile" (click)="userMenuOpen.set(!userMenuOpen())">
-          <div class="user-info">
-            <span class="user-name">{{ auth.user()?.name }}</span>
-            <span class="user-role">{{ auth.user()?.role }}</span>
-          </div>
-          <div class="avatar">
-            @if (auth.user()?.avatar) {
-              <img [src]="auth.user()?.avatar" [alt]="auth.user()?.name">
-            } @else {
-              <svg viewBox="0 0 24 24">
-                <path [attr.d]="iconRegistry.getIcon('person')"></path>
-              </svg>
-            }
-          </div>
-
-          @if (userMenuOpen()) {
-            <div class="dropdown user-dropdown">
-            <div class="dropdown-header">
-              <strong>{{ auth.user()?.name }}</strong>
-              <span>{{ auth.user()?.email }}</span>
-            </div>
-            <div class="divider"></div>
-            <div class="dropdown-item">Your Profile</div>
-            <div class="dropdown-item">Settings</div>
-            <div class="divider"></div>
-            <div class="dropdown-item logout" (click)="auth.logout()">
-              <svg viewBox="0 0 24 24" class="logout-icon">
-                <path [attr.d]="iconRegistry.getIcon('logout')"></path>
-              </svg>
-              Logout
-            </div>
-            </div>
-          }
-        </div>
-      </div>
-    </header>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: NavbarComponent, isStandalone: true, selector: "app-navbar", ngImport: i0, template: `
+    <header class="navbar-container">
+      <div class="left-section">
+        <button class="icon-btn" (click)="config.toggleSidebar()" title="Toggle Sidebar">
+          <svg viewBox="0 0 24 24">
+            <path [attr.d]="iconRegistry.getIcon('menu')"></path>
+          </svg>
+        </button>
+
+        <div class="search-box">
+          <svg viewBox="0 0 24 24" class="search-icon">
+            <path [attr.d]="iconRegistry.getIcon('search')"></path>
+          </svg>
+          <input type="text" placeholder="Search anything...">
+        </div>
+      </div>
+
+      <div class="right-section">
+        <!-- Theme Switcher -->
+        <button class="icon-btn theme-btn" (click)="themeToggleOpen.set(!themeToggleOpen())" title="Change Theme">
+          <svg viewBox="0 0 24 24">
+            <path [attr.d]="iconRegistry.getIcon('palette')"></path>
+          </svg>
+
+          @if (themeToggleOpen()) {
+            <div class="dropdown theme-dropdown">
+              @for (theme of themeService.availableThemes; track theme.name) {
+                <div
+                  class="dropdown-item"
+                  [class.active]="themeService.currentTheme() === theme.name"
+                  (click)="themeService.setTheme(theme.name); themeToggleOpen.set(false)"
+                >
+                  <span class="theme-dot" [style.background]="getThemeColor(theme.name)"></span>
+                  {{ theme.label }}
+                </div>
+              }
+            </div>
+          }
+        </button>
+
+        <!-- User Profile -->
+        <div class="user-profile" (click)="userMenuOpen.set(!userMenuOpen())">
+          <div class="user-info">
+            <span class="user-name">{{ auth.user()?.name }}</span>
+            <span class="user-role">{{ auth.user()?.role }}</span>
+          </div>
+          <div class="avatar">
+            @if (auth.user()?.avatar) {
+              <img [src]="auth.user()?.avatar" [alt]="auth.user()?.name">
+            } @else {
+              <svg viewBox="0 0 24 24">
+                <path [attr.d]="iconRegistry.getIcon('person')"></path>
+              </svg>
+            }
+          </div>
+
+          @if (userMenuOpen()) {
+            <div class="dropdown user-dropdown">
+            <div class="dropdown-header">
+              <strong>{{ auth.user()?.name }}</strong>
+              <span>{{ auth.user()?.email }}</span>
+            </div>
+            <div class="divider"></div>
+            <div class="dropdown-item">Your Profile</div>
+            <div class="dropdown-item">Settings</div>
+            <div class="divider"></div>
+            <div class="dropdown-item logout" (click)="auth.logout()">
+              <svg viewBox="0 0 24 24" class="logout-icon">
+                <path [attr.d]="iconRegistry.getIcon('logout')"></path>
+              </svg>
+              Logout
+            </div>
+            </div>
+          }
+        </div>
+      </div>
+    </header>
   `, isInline: true, styles: [":host{display:block;width:100%}.navbar-container{height:68px;padding:0 24px;background:var(--app-navbar-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-bottom:1px solid var(--glass-border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}.left-section,.right-section{display:flex;align-items:center;gap:16px}.icon-btn{width:40px;height:40px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--app-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-smooth);position:relative}.icon-btn:hover{background:var(--glass-bg-hover);border-color:var(--glass-border);color:var(--app-primary);box-shadow:0 0 16px var(--app-glow)}.icon-btn svg{width:22px;height:22px;fill:currentColor}.search-box{display:flex;align-items:center;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:10px;padding:0 14px;width:300px;height:40px;transition:all var(--transition-smooth)}.search-box:focus-within{border-color:var(--app-primary);background:var(--glass-bg-hover);box-shadow:0 0 20px var(--app-glow)}.search-icon{width:18px;height:18px;fill:var(--app-text-muted);flex-shrink:0;transition:fill var(--transition-fast)}.search-box:focus-within .search-icon{fill:var(--app-primary)}.search-box input{border:none;background:transparent;padding:8px;outline:none;flex:1;font-size:.875rem;color:var(--app-text)}.search-box input::placeholder{color:var(--app-text-muted)}.user-profile{display:flex;align-items:center;gap:12px;cursor:pointer;padding:4px 12px;border-radius:12px;border:1px solid transparent;transition:all var(--transition-smooth);position:relative}.user-profile:hover{background:var(--glass-bg-hover);border-color:var(--glass-border)}.user-info{display:flex;flex-direction:column;align-items:flex-end}.user-name{font-size:.875rem;font-weight:600;color:var(--app-text)}.user-role{font-size:.6875rem;color:var(--app-text-muted);text-transform:uppercase;letter-spacing:.05em}.avatar{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--app-primary),var(--app-accent));color:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:box-shadow var(--transition-smooth)}.user-profile:hover .avatar{box-shadow:0 0 20px var(--app-glow)}.avatar img{width:100%;height:100%;object-fit:cover}.avatar svg{width:22px;height:22px;fill:currentColor}.dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--app-bg-secondary);backdrop-filter:blur(var(--glass-blur-heavy));-webkit-backdrop-filter:blur(var(--glass-blur-heavy));border:1px solid var(--glass-border-light);border-radius:14px;box-shadow:var(--glass-shadow),0 0 30px #0006;min-width:220px;overflow:hidden;animation:slideInDown .25s ease-out}.dropdown-header{padding:14px 16px;display:flex;flex-direction:column}.dropdown-header strong{color:var(--app-text);font-size:.9375rem}.dropdown-header span{font-size:.75rem;color:var(--app-text-muted);margin-top:2px}.dropdown-item{padding:10px 16px;font-size:.875rem;cursor:pointer;transition:all var(--transition-fast);color:var(--app-text-muted);display:flex;align-items:center;gap:10px}.dropdown-item:hover{background:var(--glass-bg-hover);color:var(--app-primary)}.dropdown-item.active{background:var(--app-primary-light);color:var(--app-primary);font-weight:600}.theme-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.divider{height:1px;background:var(--glass-border);margin:4px 0}.logout{color:#f43f5e!important}.logout:hover{background:#f43f5e1a!important;color:#fb7185!important}.logout-icon{width:18px;height:18px;fill:currentColor}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NavbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-navbar', standalone: true, imports: [], template: `
-    <header class="navbar-container">
-      <div class="left-section">
-        <button class="icon-btn" (click)="config.toggleSidebar()" title="Toggle Sidebar">
-          <svg viewBox="0 0 24 24">
-            <path [attr.d]="iconRegistry.getIcon('menu')"></path>
-          </svg>
-        </button>
-
-        <div class="search-box">
-          <svg viewBox="0 0 24 24" class="search-icon">
-            <path [attr.d]="iconRegistry.getIcon('search')"></path>
-          </svg>
-          <input type="text" placeholder="Search anything...">
-        </div>
-      </div>
-
-      <div class="right-section">
-        <!-- Theme Switcher -->
-        <button class="icon-btn theme-btn" (click)="themeToggleOpen.set(!themeToggleOpen())" title="Change Theme">
-          <svg viewBox="0 0 24 24">
-            <path [attr.d]="iconRegistry.getIcon('palette')"></path>
-          </svg>
-
-          @if (themeToggleOpen()) {
-            <div class="dropdown theme-dropdown">
-              @for (theme of themeService.availableThemes; track theme.name) {
-                <div
-                  class="dropdown-item"
-                  [class.active]="themeService.currentTheme() === theme.name"
-                  (click)="themeService.setTheme(theme.name); themeToggleOpen.set(false)"
-                >
-                  <span class="theme-dot" [style.background]="getThemeColor(theme.name)"></span>
-                  {{ theme.label }}
-                </div>
-              }
-            </div>
-          }
-        </button>
-
-        <!-- User Profile -->
-        <div class="user-profile" (click)="userMenuOpen.set(!userMenuOpen())">
-          <div class="user-info">
-            <span class="user-name">{{ auth.user()?.name }}</span>
-            <span class="user-role">{{ auth.user()?.role }}</span>
-          </div>
-          <div class="avatar">
-            @if (auth.user()?.avatar) {
-              <img [src]="auth.user()?.avatar" [alt]="auth.user()?.name">
-            } @else {
-              <svg viewBox="0 0 24 24">
-                <path [attr.d]="iconRegistry.getIcon('person')"></path>
-              </svg>
-            }
-          </div>
-
-          @if (userMenuOpen()) {
-            <div class="dropdown user-dropdown">
-            <div class="dropdown-header">
-              <strong>{{ auth.user()?.name }}</strong>
-              <span>{{ auth.user()?.email }}</span>
-            </div>
-            <div class="divider"></div>
-            <div class="dropdown-item">Your Profile</div>
-            <div class="dropdown-item">Settings</div>
-            <div class="divider"></div>
-            <div class="dropdown-item logout" (click)="auth.logout()">
-              <svg viewBox="0 0 24 24" class="logout-icon">
-                <path [attr.d]="iconRegistry.getIcon('logout')"></path>
-              </svg>
-              Logout
-            </div>
-            </div>
-          }
-        </div>
-      </div>
-    </header>
+            args: [{ selector: 'app-navbar', standalone: true, imports: [], template: `
+    <header class="navbar-container">
+      <div class="left-section">
+        <button class="icon-btn" (click)="config.toggleSidebar()" title="Toggle Sidebar">
+          <svg viewBox="0 0 24 24">
+            <path [attr.d]="iconRegistry.getIcon('menu')"></path>
+          </svg>
+        </button>
+
+        <div class="search-box">
+          <svg viewBox="0 0 24 24" class="search-icon">
+            <path [attr.d]="iconRegistry.getIcon('search')"></path>
+          </svg>
+          <input type="text" placeholder="Search anything...">
+        </div>
+      </div>
+
+      <div class="right-section">
+        <!-- Theme Switcher -->
+        <button class="icon-btn theme-btn" (click)="themeToggleOpen.set(!themeToggleOpen())" title="Change Theme">
+          <svg viewBox="0 0 24 24">
+            <path [attr.d]="iconRegistry.getIcon('palette')"></path>
+          </svg>
+
+          @if (themeToggleOpen()) {
+            <div class="dropdown theme-dropdown">
+              @for (theme of themeService.availableThemes; track theme.name) {
+                <div
+                  class="dropdown-item"
+                  [class.active]="themeService.currentTheme() === theme.name"
+                  (click)="themeService.setTheme(theme.name); themeToggleOpen.set(false)"
+                >
+                  <span class="theme-dot" [style.background]="getThemeColor(theme.name)"></span>
+                  {{ theme.label }}
+                </div>
+              }
+            </div>
+          }
+        </button>
+
+        <!-- User Profile -->
+        <div class="user-profile" (click)="userMenuOpen.set(!userMenuOpen())">
+          <div class="user-info">
+            <span class="user-name">{{ auth.user()?.name }}</span>
+            <span class="user-role">{{ auth.user()?.role }}</span>
+          </div>
+          <div class="avatar">
+            @if (auth.user()?.avatar) {
+              <img [src]="auth.user()?.avatar" [alt]="auth.user()?.name">
+            } @else {
+              <svg viewBox="0 0 24 24">
+                <path [attr.d]="iconRegistry.getIcon('person')"></path>
+              </svg>
+            }
+          </div>
+
+          @if (userMenuOpen()) {
+            <div class="dropdown user-dropdown">
+            <div class="dropdown-header">
+              <strong>{{ auth.user()?.name }}</strong>
+              <span>{{ auth.user()?.email }}</span>
+            </div>
+            <div class="divider"></div>
+            <div class="dropdown-item">Your Profile</div>
+            <div class="dropdown-item">Settings</div>
+            <div class="divider"></div>
+            <div class="dropdown-item logout" (click)="auth.logout()">
+              <svg viewBox="0 0 24 24" class="logout-icon">
+                <path [attr.d]="iconRegistry.getIcon('logout')"></path>
+              </svg>
+              Logout
+            </div>
+            </div>
+          }
+        </div>
+      </div>
+    </header>
   `, styles: [":host{display:block;width:100%}.navbar-container{height:68px;padding:0 24px;background:var(--app-navbar-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-bottom:1px solid var(--glass-border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}.left-section,.right-section{display:flex;align-items:center;gap:16px}.icon-btn{width:40px;height:40px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--app-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-smooth);position:relative}.icon-btn:hover{background:var(--glass-bg-hover);border-color:var(--glass-border);color:var(--app-primary);box-shadow:0 0 16px var(--app-glow)}.icon-btn svg{width:22px;height:22px;fill:currentColor}.search-box{display:flex;align-items:center;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:10px;padding:0 14px;width:300px;height:40px;transition:all var(--transition-smooth)}.search-box:focus-within{border-color:var(--app-primary);background:var(--glass-bg-hover);box-shadow:0 0 20px var(--app-glow)}.search-icon{width:18px;height:18px;fill:var(--app-text-muted);flex-shrink:0;transition:fill var(--transition-fast)}.search-box:focus-within .search-icon{fill:var(--app-primary)}.search-box input{border:none;background:transparent;padding:8px;outline:none;flex:1;font-size:.875rem;color:var(--app-text)}.search-box input::placeholder{color:var(--app-text-muted)}.user-profile{display:flex;align-items:center;gap:12px;cursor:pointer;padding:4px 12px;border-radius:12px;border:1px solid transparent;transition:all var(--transition-smooth);position:relative}.user-profile:hover{background:var(--glass-bg-hover);border-color:var(--glass-border)}.user-info{display:flex;flex-direction:column;align-items:flex-end}.user-name{font-size:.875rem;font-weight:600;color:var(--app-text)}.user-role{font-size:.6875rem;color:var(--app-text-muted);text-transform:uppercase;letter-spacing:.05em}.avatar{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--app-primary),var(--app-accent));color:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:box-shadow var(--transition-smooth)}.user-profile:hover .avatar{box-shadow:0 0 20px var(--app-glow)}.avatar img{width:100%;height:100%;object-fit:cover}.avatar svg{width:22px;height:22px;fill:currentColor}.dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--app-bg-secondary);backdrop-filter:blur(var(--glass-blur-heavy));-webkit-backdrop-filter:blur(var(--glass-blur-heavy));border:1px solid var(--glass-border-light);border-radius:14px;box-shadow:var(--glass-shadow),0 0 30px #0006;min-width:220px;overflow:hidden;animation:slideInDown .25s ease-out}.dropdown-header{padding:14px 16px;display:flex;flex-direction:column}.dropdown-header strong{color:var(--app-text);font-size:.9375rem}.dropdown-header span{font-size:.75rem;color:var(--app-text-muted);margin-top:2px}.dropdown-item{padding:10px 16px;font-size:.875rem;cursor:pointer;transition:all var(--transition-fast);color:var(--app-text-muted);display:flex;align-items:center;gap:10px}.dropdown-item:hover{background:var(--glass-bg-hover);color:var(--app-primary)}.dropdown-item.active{background:var(--app-primary-light);color:var(--app-primary);font-weight:600}.theme-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.divider{height:1px;background:var(--glass-border);margin:4px 0}.logout{color:#f43f5e!important}.logout:hover{background:#f43f5e1a!important;color:#fb7185!important}.logout-icon{width:18px;height:18px;fill:currentColor}\n"] }]
         }] });
 
 class FooterComponent {
     config = inject(AppConfigService);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: FooterComponent, isStandalone: true, selector: "app-footer", ngImport: i0, template: `
-    <footer class="footer-container">
-      <div class="footer-content">
-        <p class="copyright">{{ config.copyrightText() }}</p>
-        <div class="links">
-          <a href="#">Terms</a>
-          <a href="#">Privacy</a>
-          <a href="#">Support</a>
-        </div>
-      </div>
-    </footer>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", type: FooterComponent, isStandalone: true, selector: "app-footer", ngImport: i0, template: `
+    <footer class="footer-container">
+      <div class="footer-content">
+        <p class="copyright">{{ config.copyrightText() }}</p>
+        <div class="links">
+          <a href="#">Terms</a>
+          <a href="#">Privacy</a>
+          <a href="#">Support</a>
+        </div>
+      </div>
+    </footer>
   `, isInline: true, styles: [".footer-container{height:52px;padding:0 28px;background:var(--app-navbar-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-top:1px solid var(--glass-border);display:flex;align-items:center;margin-top:auto;position:relative}.footer-container:before{content:\"\";position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(to right,transparent,var(--app-primary-light),transparent)}.footer-content{width:100%;display:flex;justify-content:space-between;align-items:center}.copyright{font-size:.8125rem;color:var(--app-text-muted);opacity:.6}.links{display:flex;gap:20px}.links a{font-size:.8125rem;color:var(--app-text-muted);text-decoration:none;transition:all var(--transition-fast);opacity:.6}.links a:hover{color:var(--app-primary);opacity:1}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: FooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-footer', standalone: true, imports: [], template: `
-    <footer class="footer-container">
-      <div class="footer-content">
-        <p class="copyright">{{ config.copyrightText() }}</p>
-        <div class="links">
-          <a href="#">Terms</a>
-          <a href="#">Privacy</a>
-          <a href="#">Support</a>
-        </div>
-      </div>
-    </footer>
+            args: [{ selector: 'app-footer', standalone: true, imports: [], template: `
+    <footer class="footer-container">
+      <div class="footer-content">
+        <p class="copyright">{{ config.copyrightText() }}</p>
+        <div class="links">
+          <a href="#">Terms</a>
+          <a href="#">Privacy</a>
+          <a href="#">Support</a>
+        </div>
+      </div>
+    </footer>
   `, styles: [".footer-container{height:52px;padding:0 28px;background:var(--app-navbar-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-top:1px solid var(--glass-border);display:flex;align-items:center;margin-top:auto;position:relative}.footer-container:before{content:\"\";position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(to right,transparent,var(--app-primary-light),transparent)}.footer-content{width:100%;display:flex;justify-content:space-between;align-items:center}.copyright{font-size:.8125rem;color:var(--app-text-muted);opacity:.6}.links{display:flex;gap:20px}.links a{font-size:.8125rem;color:var(--app-text-muted);text-decoration:none;transition:all var(--transition-fast);opacity:.6}.links a:hover{color:var(--app-primary);opacity:1}\n"] }]
         }] });
 
 class VerticalLayoutComponent {
     config = inject(AppConfigService);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: VerticalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: VerticalLayoutComponent, isStandalone: true, selector: "app-vertical-layout", ngImport: i0, template: `
-    <div class="layout-wrapper" [class.collapsed]="config.sidebarCollapsed()">
-      <!-- Animated Gradient Mesh Background -->
-      <div class="gradient-mesh" aria-hidden="true">
-        <div class="blob blob-1"></div>
-        <div class="blob blob-2"></div>
-        <div class="blob blob-3"></div>
-      </div>
-
-      <!-- Sidebar -->
-      <app-sidebar class="layout-sidebar"></app-sidebar>
-
-      <!-- Main Content Area -->
-      <div class="layout-main">
-        <app-navbar></app-navbar>
-
-        <main class="content-body">
-          <router-outlet></router-outlet>
-        </main>
-
-        <app-footer></app-footer>
-      </div>
-    </div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: VerticalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", type: VerticalLayoutComponent, isStandalone: true, selector: "app-vertical-layout", ngImport: i0, template: `
+    <div class="layout-wrapper" [class.collapsed]="config.sidebarCollapsed()">
+      <!-- Animated Gradient Mesh Background -->
+      <div class="gradient-mesh" aria-hidden="true">
+        <div class="blob blob-1"></div>
+        <div class="blob blob-2"></div>
+        <div class="blob blob-3"></div>
+      </div>
+
+      <!-- Sidebar -->
+      <app-sidebar class="layout-sidebar"></app-sidebar>
+
+      <!-- Main Content Area -->
+      <div class="layout-main">
+        <app-navbar></app-navbar>
+
+        <main class="content-body">
+          <router-outlet></router-outlet>
+        </main>
+
+        <app-footer></app-footer>
+      </div>
+    </div>
   `, isInline: true, styles: [":host{display:block;height:100vh;width:100%}.layout-wrapper{display:flex;height:100vh;overflow:hidden;background:var(--app-bg);position:relative}.gradient-mesh{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.35;will-change:transform}.blob-1{width:500px;height:500px;background:var(--app-gradient-1);top:-10%;right:-5%;animation:blobMove1 20s ease-in-out infinite}.blob-2{width:400px;height:400px;background:var(--app-gradient-2);bottom:-10%;left:10%;animation:blobMove2 25s ease-in-out infinite}.blob-3{width:350px;height:350px;background:var(--app-gradient-3);top:40%;left:40%;animation:blobMove3 22s ease-in-out infinite}.layout-sidebar{flex-shrink:0;z-index:100;position:relative}.layout-main{flex:1;display:flex;flex-direction:column;overflow-y:auto;position:relative;z-index:1;transition:margin-left var(--transition-smooth)}.content-body{padding:28px;flex:1;max-width:1600px;width:100%;margin:0 auto;animation:fadeInUp .4s ease-out}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: SidebarComponent, selector: "app-sidebar" }, { kind: "component", type: NavbarComponent, selector: "app-navbar" }, { kind: "component", type: FooterComponent, selector: "app-footer" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: VerticalLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: VerticalLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-vertical-layout', standalone: true, imports: [RouterOutlet, SidebarComponent, NavbarComponent, FooterComponent], template: `
-    <div class="layout-wrapper" [class.collapsed]="config.sidebarCollapsed()">
-      <!-- Animated Gradient Mesh Background -->
-      <div class="gradient-mesh" aria-hidden="true">
-        <div class="blob blob-1"></div>
-        <div class="blob blob-2"></div>
-        <div class="blob blob-3"></div>
-      </div>
-
-      <!-- Sidebar -->
-      <app-sidebar class="layout-sidebar"></app-sidebar>
-
-      <!-- Main Content Area -->
-      <div class="layout-main">
-        <app-navbar></app-navbar>
-
-        <main class="content-body">
-          <router-outlet></router-outlet>
-        </main>
-
-        <app-footer></app-footer>
-      </div>
-    </div>
+            args: [{ selector: 'app-vertical-layout', standalone: true, imports: [RouterOutlet, SidebarComponent, NavbarComponent, FooterComponent], template: `
+    <div class="layout-wrapper" [class.collapsed]="config.sidebarCollapsed()">
+      <!-- Animated Gradient Mesh Background -->
+      <div class="gradient-mesh" aria-hidden="true">
+        <div class="blob blob-1"></div>
+        <div class="blob blob-2"></div>
+        <div class="blob blob-3"></div>
+      </div>
+
+      <!-- Sidebar -->
+      <app-sidebar class="layout-sidebar"></app-sidebar>
+
+      <!-- Main Content Area -->
+      <div class="layout-main">
+        <app-navbar></app-navbar>
+
+        <main class="content-body">
+          <router-outlet></router-outlet>
+        </main>
+
+        <app-footer></app-footer>
+      </div>
+    </div>
   `, styles: [":host{display:block;height:100vh;width:100%}.layout-wrapper{display:flex;height:100vh;overflow:hidden;background:var(--app-bg);position:relative}.gradient-mesh{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.35;will-change:transform}.blob-1{width:500px;height:500px;background:var(--app-gradient-1);top:-10%;right:-5%;animation:blobMove1 20s ease-in-out infinite}.blob-2{width:400px;height:400px;background:var(--app-gradient-2);bottom:-10%;left:10%;animation:blobMove2 25s ease-in-out infinite}.blob-3{width:350px;height:350px;background:var(--app-gradient-3);top:40%;left:40%;animation:blobMove3 22s ease-in-out infinite}.layout-sidebar{flex-shrink:0;z-index:100;position:relative}.layout-main{flex:1;display:flex;flex-direction:column;overflow-y:auto;position:relative;z-index:1;transition:margin-left var(--transition-smooth)}.content-body{padding:28px;flex:1;max-width:1600px;width:100%;margin:0 auto;animation:fadeInUp .4s ease-out}\n"] }]
         }] });
 
 class HorizontalLayoutComponent {
     navigation = inject(NavigationService);
     iconRegistry = inject(IconRegistryService);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: HorizontalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: HorizontalLayoutComponent, isStandalone: true, selector: "app-horizontal-layout", ngImport: i0, template: `
-    <div class="layout-wrapper">
-      <app-navbar>
-        <!-- Horizontal Menu Injection (Conceptual - in a full app we'd use a dedicated component or slot) -->
-      </app-navbar>
-
-      <nav class="horizontal-nav">
-        <div class="nav-container">
-          <ul>
-            @for (group of navigation.menuItems(); track group.label) {
-              @for (item of group.items; track item.label) {
-                <li class="nav-item">
-                  <a [routerLink]="item.route" routerLinkActive="active" class="nav-link">
-                    @if (item.icon) {
-                      <svg viewBox="0 0 24 24" class="nav-icon">
-                        <path [attr.d]="iconRegistry.getIcon(item.icon)"></path>
-                      </svg>
-                    }
-                    {{ item.label }}
-                  </a>
-                </li>
-              }
-            }
-          </ul>
-        </div>
-      </nav>
-
-      <main class="content-body">
-        <router-outlet></router-outlet>
-      </main>
-
-      <app-footer></app-footer>
-    </div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: HorizontalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: HorizontalLayoutComponent, isStandalone: true, selector: "app-horizontal-layout", ngImport: i0, template: `
+    <div class="layout-wrapper">
+      <app-navbar>
+        <!-- Horizontal Menu Injection (Conceptual - in a full app we'd use a dedicated component or slot) -->
+      </app-navbar>
+
+      <nav class="horizontal-nav">
+        <div class="nav-container">
+          <ul>
+            @for (group of navigation.menuItems(); track group.label) {
+              @for (item of group.items; track item.label) {
+                <li class="nav-item">
+                  <a [routerLink]="item.route" routerLinkActive="active" class="nav-link">
+                    @if (item.icon) {
+                      <svg viewBox="0 0 24 24" class="nav-icon">
+                        <path [attr.d]="iconRegistry.getIcon(item.icon)"></path>
+                      </svg>
+                    }
+                    {{ item.label }}
+                  </a>
+                </li>
+              }
+            }
+          </ul>
+        </div>
+      </nav>
+
+      <main class="content-body">
+        <router-outlet></router-outlet>
+      </main>
+
+      <app-footer></app-footer>
+    </div>
   `, isInline: true, styles: [".layout-wrapper{display:flex;flex-direction:column;min-height:100vh;background:var(--app-bg, #f9fafb)}.horizontal-nav{background:var(--app-navbar-bg, #ffffff);border-bottom:1px solid var(--app-border, #e5e7eb);height:48px}.nav-container{max-width:1600px;margin:0 auto;height:100%;padding:0 24px}ul{display:flex;list-style:none;padding:0;margin:0;height:100%;gap:32px}.nav-item{height:100%}.nav-link{display:flex;align-items:center;gap:8px;height:100%;color:var(--app-text, #374151);text-decoration:none;font-size:.875rem;font-weight:500;border-bottom:2px solid transparent;transition:all .2s}.nav-link:hover{color:var(--app-primary, #3b82f6)}.nav-link.active{color:var(--app-primary, #3b82f6);border-bottom-color:var(--app-primary, #3b82f6)}.nav-icon{width:18px;height:18px;fill:currentColor}.content-body{padding:24px;flex:1;max-width:1600px;width:100%;margin:0 auto}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: NavbarComponent, selector: "app-navbar" }, { kind: "component", type: FooterComponent, selector: "app-footer" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: HorizontalLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: HorizontalLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-horizontal-layout', standalone: true, imports: [RouterOutlet, NavbarComponent, FooterComponent, RouterLink, RouterLinkActive], template: `
-    <div class="layout-wrapper">
-      <app-navbar>
-        <!-- Horizontal Menu Injection (Conceptual - in a full app we'd use a dedicated component or slot) -->
-      </app-navbar>
-
-      <nav class="horizontal-nav">
-        <div class="nav-container">
-          <ul>
-            @for (group of navigation.menuItems(); track group.label) {
-              @for (item of group.items; track item.label) {
-                <li class="nav-item">
-                  <a [routerLink]="item.route" routerLinkActive="active" class="nav-link">
-                    @if (item.icon) {
-                      <svg viewBox="0 0 24 24" class="nav-icon">
-                        <path [attr.d]="iconRegistry.getIcon(item.icon)"></path>
-                      </svg>
-                    }
-                    {{ item.label }}
-                  </a>
-                </li>
-              }
-            }
-          </ul>
-        </div>
-      </nav>
-
-      <main class="content-body">
-        <router-outlet></router-outlet>
-      </main>
-
-      <app-footer></app-footer>
-    </div>
+            args: [{ selector: 'app-horizontal-layout', standalone: true, imports: [RouterOutlet, NavbarComponent, FooterComponent, RouterLink, RouterLinkActive], template: `
+    <div class="layout-wrapper">
+      <app-navbar>
+        <!-- Horizontal Menu Injection (Conceptual - in a full app we'd use a dedicated component or slot) -->
+      </app-navbar>
+
+      <nav class="horizontal-nav">
+        <div class="nav-container">
+          <ul>
+            @for (group of navigation.menuItems(); track group.label) {
+              @for (item of group.items; track item.label) {
+                <li class="nav-item">
+                  <a [routerLink]="item.route" routerLinkActive="active" class="nav-link">
+                    @if (item.icon) {
+                      <svg viewBox="0 0 24 24" class="nav-icon">
+                        <path [attr.d]="iconRegistry.getIcon(item.icon)"></path>
+                      </svg>
+                    }
+                    {{ item.label }}
+                  </a>
+                </li>
+              }
+            }
+          </ul>
+        </div>
+      </nav>
+
+      <main class="content-body">
+        <router-outlet></router-outlet>
+      </main>
+
+      <app-footer></app-footer>
+    </div>
   `, styles: [".layout-wrapper{display:flex;flex-direction:column;min-height:100vh;background:var(--app-bg, #f9fafb)}.horizontal-nav{background:var(--app-navbar-bg, #ffffff);border-bottom:1px solid var(--app-border, #e5e7eb);height:48px}.nav-container{max-width:1600px;margin:0 auto;height:100%;padding:0 24px}ul{display:flex;list-style:none;padding:0;margin:0;height:100%;gap:32px}.nav-item{height:100%}.nav-link{display:flex;align-items:center;gap:8px;height:100%;color:var(--app-text, #374151);text-decoration:none;font-size:.875rem;font-weight:500;border-bottom:2px solid transparent;transition:all .2s}.nav-link:hover{color:var(--app-primary, #3b82f6)}.nav-link.active{color:var(--app-primary, #3b82f6);border-bottom-color:var(--app-primary, #3b82f6)}.nav-icon{width:18px;height:18px;fill:currentColor}.content-body{padding:24px;flex:1;max-width:1600px;width:100%;margin:0 auto}\n"] }]
         }] });
 
 class EmptyLayoutComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EmptyLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: EmptyLayoutComponent, isStandalone: true, selector: "app-empty-layout", ngImport: i0, template: `
-    <div class="empty-layout-container">
-      <router-outlet></router-outlet>
-    </div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: EmptyLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", type: EmptyLayoutComponent, isStandalone: true, selector: "app-empty-layout", ngImport: i0, template: `
+    <div class="empty-layout-container">
+      <router-outlet></router-outlet>
+    </div>
   `, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%}.empty-layout-container{height:100%;display:flex;flex-direction:column;background:var(--app-bg, #f9fafb);color:var(--app-text, #111827)}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EmptyLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: EmptyLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-empty-layout', standalone: true, imports: [RouterOutlet], template: `
-    <div class="empty-layout-container">
-      <router-outlet></router-outlet>
-    </div>
+            args: [{ selector: 'app-empty-layout', standalone: true, imports: [RouterOutlet], template: `
+    <div class="empty-layout-container">
+      <router-outlet></router-outlet>
+    </div>
   `, styles: [":host{display:flex;flex-direction:column;height:100%}.empty-layout-container{height:100%;display:flex;flex-direction:column;background:var(--app-bg, #f9fafb);color:var(--app-text, #111827)}\n"] }]
         }] });
 
 class CenteredLayoutComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CenteredLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: CenteredLayoutComponent, isStandalone: true, selector: "app-centered-layout", ngImport: i0, template: `
-    <div class="centered-container">
-      <div class="centered-content glass-panel">
-        <router-outlet></router-outlet>
-      </div>
-    </div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CenteredLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", type: CenteredLayoutComponent, isStandalone: true, selector: "app-centered-layout", ngImport: i0, template: `
+    <div class="centered-container">
+      <div class="centered-content glass-panel">
+        <router-outlet></router-outlet>
+      </div>
+    </div>
   `, isInline: true, styles: [".centered-container{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--app-bg, #f9fafb);padding:2rem}.centered-content{width:100%;max-width:600px;padding:2rem;border-radius:1rem}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CenteredLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CenteredLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-centered-layout', standalone: true, imports: [RouterOutlet], template: `
-    <div class="centered-container">
-      <div class="centered-content glass-panel">
-        <router-outlet></router-outlet>
-      </div>
-    </div>
+            args: [{ selector: 'app-centered-layout', standalone: true, imports: [RouterOutlet], template: `
+    <div class="centered-container">
+      <div class="centered-content glass-panel">
+        <router-outlet></router-outlet>
+      </div>
+    </div>
   `, styles: [".centered-container{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--app-bg, #f9fafb);padding:2rem}.centered-content{width:100%;max-width:600px;padding:2rem;border-radius:1rem}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}\n"] }]
         }] });
 
 class TwoColumnLayoutComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TwoColumnLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: TwoColumnLayoutComponent, isStandalone: true, selector: "app-two-column-layout", ngImport: i0, template: `
-    <div class="two-column-container">
-      <aside class="left-panel glass-panel">
-        <!-- Master list or secondary navigation ideally goes here -->
-        <div class="placeholder-nav">Navigation / List</div>
-      </aside>
-      <main class="right-panel">
-        <router-outlet></router-outlet>
-      </main>
-    </div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: TwoColumnLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", type: TwoColumnLayoutComponent, isStandalone: true, selector: "app-two-column-layout", ngImport: i0, template: `
+    <div class="two-column-container">
+      <aside class="left-panel glass-panel">
+        <!-- Master list or secondary navigation ideally goes here -->
+        <div class="placeholder-nav">Navigation / List</div>
+      </aside>
+      <main class="right-panel">
+        <router-outlet></router-outlet>
+      </main>
+    </div>
   `, isInline: true, styles: [".two-column-container{display:flex;min-height:100vh;background:var(--app-bg)}.left-panel{width:300px;flex-shrink:0;border-right:1px solid var(--glass-border);padding:1rem;display:flex;flex-direction:column}.right-panel{flex:1;padding:2rem;overflow-y:auto}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur))}.placeholder-nav{color:var(--app-text-muted);font-size:.875rem;text-align:center;margin-top:2rem}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TwoColumnLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: TwoColumnLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-two-column-layout', standalone: true, imports: [RouterOutlet], template: `
-    <div class="two-column-container">
-      <aside class="left-panel glass-panel">
-        <!-- Master list or secondary navigation ideally goes here -->
-        <div class="placeholder-nav">Navigation / List</div>
-      </aside>
-      <main class="right-panel">
-        <router-outlet></router-outlet>
-      </main>
-    </div>
+            args: [{ selector: 'app-two-column-layout', standalone: true, imports: [RouterOutlet], template: `
+    <div class="two-column-container">
+      <aside class="left-panel glass-panel">
+        <!-- Master list or secondary navigation ideally goes here -->
+        <div class="placeholder-nav">Navigation / List</div>
+      </aside>
+      <main class="right-panel">
+        <router-outlet></router-outlet>
+      </main>
+    </div>
   `, styles: [".two-column-container{display:flex;min-height:100vh;background:var(--app-bg)}.left-panel{width:300px;flex-shrink:0;border-right:1px solid var(--glass-border);padding:1rem;display:flex;flex-direction:column}.right-panel{flex:1;padding:2rem;overflow-y:auto}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur))}.placeholder-nav{color:var(--app-text-muted);font-size:.875rem;text-align:center;margin-top:2rem}\n"] }]
         }] });
 
 class DashboardGridLayoutComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DashboardGridLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: DashboardGridLayoutComponent, isStandalone: true, selector: "app-dashboard-grid-layout", ngImport: i0, template: `
-    <div class="dashboard-grid-container">
-      <router-outlet></router-outlet>
-    </div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DashboardGridLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", type: DashboardGridLayoutComponent, isStandalone: true, selector: "app-dashboard-grid-layout", ngImport: i0, template: `
+    <div class="dashboard-grid-container">
+      <router-outlet></router-outlet>
+    </div>
   `, isInline: true, styles: [".dashboard-grid-container{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem;padding:2rem;min-height:100vh;background:var(--app-bg)}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DashboardGridLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DashboardGridLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-dashboard-grid-layout', standalone: true, imports: [RouterOutlet], template: `
-    <div class="dashboard-grid-container">
-      <router-outlet></router-outlet>
-    </div>
+            args: [{ selector: 'app-dashboard-grid-layout', standalone: true, imports: [RouterOutlet], template: `
+    <div class="dashboard-grid-container">
+      <router-outlet></router-outlet>
+    </div>
   `, styles: [".dashboard-grid-container{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem;padding:2rem;min-height:100vh;background:var(--app-bg)}\n"] }]
         }] });
 
 class CompactLayoutComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CompactLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: CompactLayoutComponent, isStandalone: true, selector: "app-compact-layout", ngImport: i0, template: `
-    <div class="compact-container">
-      <!-- Minimal or no header -->
-      <main class="compact-content">
-        <router-outlet></router-outlet>
-      </main>
-    </div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CompactLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", type: CompactLayoutComponent, isStandalone: true, selector: "app-compact-layout", ngImport: i0, template: `
+    <div class="compact-container">
+      <!-- Minimal or no header -->
+      <main class="compact-content">
+        <router-outlet></router-outlet>
+      </main>
+    </div>
   `, isInline: true, styles: [".compact-container{display:flex;flex-direction:column;min-height:100vh;background:var(--app-bg)}.compact-content{flex:1;padding:1rem;max-width:100%;overflow-x:hidden}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CompactLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CompactLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-compact-layout', standalone: true, imports: [RouterOutlet], template: `
-    <div class="compact-container">
-      <!-- Minimal or no header -->
-      <main class="compact-content">
-        <router-outlet></router-outlet>
-      </main>
-    </div>
+            args: [{ selector: 'app-compact-layout', standalone: true, imports: [RouterOutlet], template: `
+    <div class="compact-container">
+      <!-- Minimal or no header -->
+      <main class="compact-content">
+        <router-outlet></router-outlet>
+      </main>
+    </div>
   `, styles: [".compact-container{display:flex;flex-direction:column;min-height:100vh;background:var(--app-bg)}.compact-content{flex:1;padding:1rem;max-width:100%;overflow-x:hidden}\n"] }]
         }] });
 
@@ -6391,51 +6391,51 @@ class NotificationContainerComponent {
             default: return this.iconRegistry.getIcon('info');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NotificationContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: NotificationContainerComponent, isStandalone: true, selector: "app-notification-container", ngImport: i0, template: `
-    <div class="notification-wrapper">
-      @for (n of service.notifications(); track n.id) {
-        <div class="toast" [class]="n.type" (click)="service.remove(n.id)">
-          <div class="toast-icon">
-            <svg viewBox="0 0 24 24">
-              <path [attr.d]="getIcon(n.type)"></path>
-            </svg>
-          </div>
-          <div class="toast-content">
-            {{ n.message }}
-          </div>
-          <button class="toast-close">
-            <svg viewBox="0 0 24 24">
-              <path [attr.d]="iconRegistry.getIcon('close')"></path>
-            </svg>
-          </button>
-        </div>
-      }
-    </div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NotificationContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: NotificationContainerComponent, isStandalone: true, selector: "app-notification-container", ngImport: i0, template: `
+    <div class="notification-wrapper">
+      @for (n of service.notifications(); track n.id) {
+        <div class="toast" [class]="n.type" (click)="service.remove(n.id)">
+          <div class="toast-icon">
+            <svg viewBox="0 0 24 24">
+              <path [attr.d]="getIcon(n.type)"></path>
+            </svg>
+          </div>
+          <div class="toast-content">
+            {{ n.message }}
+          </div>
+          <button class="toast-close">
+            <svg viewBox="0 0 24 24">
+              <path [attr.d]="iconRegistry.getIcon('close')"></path>
+            </svg>
+          </button>
+        </div>
+      }
+    </div>
   `, isInline: true, styles: [".notification-wrapper{position:fixed;top:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:12px;pointer-events:none}.toast{pointer-events:auto;min-width:300px;max-width:450px;background:var(--app-surface, #ffffff);border-radius:12px;padding:16px;display:flex;align-items:center;gap:12px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border-left:4px solid #e5e7eb;cursor:pointer;animation:slideIn .3s cubic-bezier(.4,0,.2,1);transition:all .2s}.toast:hover{transform:translateY(-2px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.toast.success{border-left-color:#10b981}.toast.error{border-left-color:#ef4444}.toast.warning{border-left-color:#f59e0b}.toast.info{border-left-color:#3b82f6}.toast-icon{width:24px;height:24px;flex-shrink:0}.toast.success .toast-icon{fill:#10b981}.toast.error .toast-icon{fill:#ef4444}.toast.warning .toast-icon{fill:#f59e0b}.toast.info .toast-icon{fill:#3b82f6}.toast-content{flex:1;font-size:.875rem;font-weight:500;color:var(--app-text, #1f2937);line-height:1.4}.toast-close{background:none;border:none;padding:4px;cursor:pointer;color:var(--app-text-muted, #6b7280);opacity:.5;transition:opacity .2s}.toast-close:hover{opacity:1}.toast-close svg{width:16px;height:16px;fill:currentColor}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NotificationContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NotificationContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-notification-container', standalone: true, imports: [], template: `
-    <div class="notification-wrapper">
-      @for (n of service.notifications(); track n.id) {
-        <div class="toast" [class]="n.type" (click)="service.remove(n.id)">
-          <div class="toast-icon">
-            <svg viewBox="0 0 24 24">
-              <path [attr.d]="getIcon(n.type)"></path>
-            </svg>
-          </div>
-          <div class="toast-content">
-            {{ n.message }}
-          </div>
-          <button class="toast-close">
-            <svg viewBox="0 0 24 24">
-              <path [attr.d]="iconRegistry.getIcon('close')"></path>
-            </svg>
-          </button>
-        </div>
-      }
-    </div>
+            args: [{ selector: 'app-notification-container', standalone: true, imports: [], template: `
+    <div class="notification-wrapper">
+      @for (n of service.notifications(); track n.id) {
+        <div class="toast" [class]="n.type" (click)="service.remove(n.id)">
+          <div class="toast-icon">
+            <svg viewBox="0 0 24 24">
+              <path [attr.d]="getIcon(n.type)"></path>
+            </svg>
+          </div>
+          <div class="toast-content">
+            {{ n.message }}
+          </div>
+          <button class="toast-close">
+            <svg viewBox="0 0 24 24">
+              <path [attr.d]="iconRegistry.getIcon('close')"></path>
+            </svg>
+          </button>
+        </div>
+      }
+    </div>
   `, styles: [".notification-wrapper{position:fixed;top:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:12px;pointer-events:none}.toast{pointer-events:auto;min-width:300px;max-width:450px;background:var(--app-surface, #ffffff);border-radius:12px;padding:16px;display:flex;align-items:center;gap:12px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border-left:4px solid #e5e7eb;cursor:pointer;animation:slideIn .3s cubic-bezier(.4,0,.2,1);transition:all .2s}.toast:hover{transform:translateY(-2px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.toast.success{border-left-color:#10b981}.toast.error{border-left-color:#ef4444}.toast.warning{border-left-color:#f59e0b}.toast.info{border-left-color:#3b82f6}.toast-icon{width:24px;height:24px;flex-shrink:0}.toast.success .toast-icon{fill:#10b981}.toast.error .toast-icon{fill:#ef4444}.toast.warning .toast-icon{fill:#f59e0b}.toast.info .toast-icon{fill:#3b82f6}.toast-content{flex:1;font-size:.875rem;font-weight:500;color:var(--app-text, #1f2937);line-height:1.4}.toast-close{background:none;border:none;padding:4px;cursor:pointer;color:var(--app-text-muted, #6b7280);opacity:.5;transition:opacity .2s}.toast-close:hover{opacity:1}.toast-close svg{width:16px;height:16px;fill:currentColor}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}\n"] }]
         }] });
 
@@ -6446,41 +6446,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 class LayoutComponent {
     config = inject(AppConfigService);
     LayoutType = LayoutType;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: LayoutComponent, isStandalone: true, selector: "app-layout", ngImport: i0, template: `
-    <app-notification-container></app-notification-container>
-    <amf-modal-host></amf-modal-host>
-    <amf-dialog-host></amf-dialog-host>
-    <amf-drawer-host></amf-drawer-host>
-    @switch (config.currentLayout()) {
-      @case (LayoutType.VERTICAL) {
-        <app-vertical-layout></app-vertical-layout>
-      }
-      @case (LayoutType.HORIZONTAL) {
-        <app-horizontal-layout></app-horizontal-layout>
-      }
-      @case (LayoutType.EMPTY) {
-        <app-empty-layout></app-empty-layout>
-      }
-      @case (LayoutType.CENTERED) {
-        <app-centered-layout></app-centered-layout>
-      }
-      @case (LayoutType.TWO_COLUMN) {
-        <app-two-column-layout></app-two-column-layout>
-      }
-      @case (LayoutType.DASHBOARD_GRID) {
-        <app-dashboard-grid-layout></app-dashboard-grid-layout>
-      }
-      @case (LayoutType.COMPACT) {
-        <app-compact-layout></app-compact-layout>
-      }
-      @default {
-        <app-vertical-layout></app-vertical-layout>
-      }
-    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: LayoutComponent, isStandalone: true, selector: "app-layout", ngImport: i0, template: `
+    <app-notification-container></app-notification-container>
+    <amf-modal-host></amf-modal-host>
+    <amf-dialog-host></amf-dialog-host>
+    <amf-drawer-host></amf-drawer-host>
+    @switch (config.currentLayout()) {
+      @case (LayoutType.VERTICAL) {
+        <app-vertical-layout></app-vertical-layout>
+      }
+      @case (LayoutType.HORIZONTAL) {
+        <app-horizontal-layout></app-horizontal-layout>
+      }
+      @case (LayoutType.EMPTY) {
+        <app-empty-layout></app-empty-layout>
+      }
+      @case (LayoutType.CENTERED) {
+        <app-centered-layout></app-centered-layout>
+      }
+      @case (LayoutType.TWO_COLUMN) {
+        <app-two-column-layout></app-two-column-layout>
+      }
+      @case (LayoutType.DASHBOARD_GRID) {
+        <app-dashboard-grid-layout></app-dashboard-grid-layout>
+      }
+      @case (LayoutType.COMPACT) {
+        <app-compact-layout></app-compact-layout>
+      }
+      @default {
+        <app-vertical-layout></app-vertical-layout>
+      }
+    }
   `, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%;width:100%}\n"], dependencies: [{ kind: "component", type: VerticalLayoutComponent, selector: "app-vertical-layout" }, { kind: "component", type: HorizontalLayoutComponent, selector: "app-horizontal-layout" }, { kind: "component", type: EmptyLayoutComponent, selector: "app-empty-layout" }, { kind: "component", type: CenteredLayoutComponent, selector: "app-centered-layout" }, { kind: "component", type: TwoColumnLayoutComponent, selector: "app-two-column-layout" }, { kind: "component", type: DashboardGridLayoutComponent, selector: "app-dashboard-grid-layout" }, { kind: "component", type: CompactLayoutComponent, selector: "app-compact-layout" }, { kind: "component", type: NotificationContainerComponent, selector: "app-notification-container" }, { kind: "component", type: MetaModalHostComponent, selector: "amf-modal-host" }, { kind: "component", type: AmfDialogHostComponent, selector: "amf-dialog-host" }, { kind: "component", type: AmfDrawerHostComponent, selector: "amf-drawer-host" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-layout', standalone: true, imports: [
                         VerticalLayoutComponent,
@@ -6494,37 +6494,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MetaModalHostComponent,
                         AmfDialogHostComponent,
                         AmfDrawerHostComponent
-                    ], template: `
-    <app-notification-container></app-notification-container>
-    <amf-modal-host></amf-modal-host>
-    <amf-dialog-host></amf-dialog-host>
-    <amf-drawer-host></amf-drawer-host>
-    @switch (config.currentLayout()) {
-      @case (LayoutType.VERTICAL) {
-        <app-vertical-layout></app-vertical-layout>
-      }
-      @case (LayoutType.HORIZONTAL) {
-        <app-horizontal-layout></app-horizontal-layout>
-      }
-      @case (LayoutType.EMPTY) {
-        <app-empty-layout></app-empty-layout>
-      }
-      @case (LayoutType.CENTERED) {
-        <app-centered-layout></app-centered-layout>
-      }
-      @case (LayoutType.TWO_COLUMN) {
-        <app-two-column-layout></app-two-column-layout>
-      }
-      @case (LayoutType.DASHBOARD_GRID) {
-        <app-dashboard-grid-layout></app-dashboard-grid-layout>
-      }
-      @case (LayoutType.COMPACT) {
-        <app-compact-layout></app-compact-layout>
-      }
-      @default {
-        <app-vertical-layout></app-vertical-layout>
-      }
-    }
+                    ], template: `
+    <app-notification-container></app-notification-container>
+    <amf-modal-host></amf-modal-host>
+    <amf-dialog-host></amf-dialog-host>
+    <amf-drawer-host></amf-drawer-host>
+    @switch (config.currentLayout()) {
+      @case (LayoutType.VERTICAL) {
+        <app-vertical-layout></app-vertical-layout>
+      }
+      @case (LayoutType.HORIZONTAL) {
+        <app-horizontal-layout></app-horizontal-layout>
+      }
+      @case (LayoutType.EMPTY) {
+        <app-empty-layout></app-empty-layout>
+      }
+      @case (LayoutType.CENTERED) {
+        <app-centered-layout></app-centered-layout>
+      }
+      @case (LayoutType.TWO_COLUMN) {
+        <app-two-column-layout></app-two-column-layout>
+      }
+      @case (LayoutType.DASHBOARD_GRID) {
+        <app-dashboard-grid-layout></app-dashboard-grid-layout>
+      }
+      @case (LayoutType.COMPACT) {
+        <app-compact-layout></app-compact-layout>
+      }
+      @default {
+        <app-vertical-layout></app-vertical-layout>
+      }
+    }
   `, styles: [":host{display:flex;flex-direction:column;height:100%;width:100%}\n"] }]
         }] });