cloud-ide-layout 1.0.322 → 1.0.324

package/fesm2022/{cloud-ide-layout-cloud-ide-layout-DNrjjlPZ.mjs → cloud-ide-layout-cloud-ide-layout-Do7pXglf.mjs}

@@ -9,7 +9,7 @@ import { map, filter, tap, catchError, shareReplay, take, distinctUntilChanged }
 import * as i2$1 from '@angular/router';
 import { Router, NavigationEnd, RouteReuseStrategy, RouterModule, ActivatedRoute } from '@angular/router';
 import { Title, DomSanitizer } from '@angular/platform-browser';
-import { CideEleFileManagerService, CideElementsService, CideEleFloatingContainerService, NotificationService, CideIconComponent, CideEleButtonComponent, CideInputComponent, CideSelectComponent, CideThemeService, ConfirmationService, WebSocketNotificationService, NotificationApiService, OPEN_AI_ASSISTANT_ACTION, CideEleDropdownComponent, CideEleFileImageDirective, CideEleResizerDirective, TooltipDirective, CideSpinnerComponent, CideEleSkeletonLoaderComponent, KeyboardShortcutService, FloatingContainerShortcutsService, CIDE_AI_DRAWER_COMPONENT, CideEleFloatingContainerManagerComponent, CideEleGlobalNotificationsComponent, CideEleBreadcrumbComponent } from 'cloud-ide-element';
+import { CideEleFileManagerService, CideElementsService, CideEleFloatingContainerService, NotificationService, CideIconComponent, CideEleButtonComponent, CideInputComponent, CideSelectComponent, CideThemeService, ConfirmationService, WebSocketNotificationService, NotificationApiService, OPEN_AI_ASSISTANT_ACTION, CideEleDropdownComponent, CideEleFileImageDirective, CideEleResizerDirective, TooltipDirective, CideSpinnerComponent, CideEleSkeletonLoaderComponent, KeyboardShortcutService, FloatingContainerShortcutsService, CIDE_AI_DRAWER_LOADER, AiAssistantTriggerService, CIDE_AI_DRAWER_COMPONENT, CideEleFloatingContainerManagerComponent, CideEleGlobalNotificationsComponent, CideEleBreadcrumbComponent } from 'cloud-ide-element';
 import { FINANCIAL_YEAR_SERVICE_TOKEN, ACADEMIC_YEAR_SERVICE_TOKEN, AUTH_SERVICE_TOKEN, authGuard, ENTITY_SERVICE_TOKEN, CideSharedOrgStructureComponent } from 'cloud-ide-shared';
 import * as i2 from '@angular/forms';
 import { FormBuilder, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
@@ -2074,7 +2074,7 @@ class NotificationSettingsComponent {
                     </div>
                   </div>
 
-                  <button type="button" cideEleButton variant="ghost" size="sm" (click)="testSound()" class="tw-w-full tw-bg-blue-500/5 hover:tw-bg-blue-500/10 tw-text-blue-500 tw-font-semibold">
+                  <button type="button" cideEleButton variant="ghost" size="xs" (click)="testSound()" class="tw-w-full tw-bg-blue-500/5 hover:tw-bg-blue-500/10 tw-text-blue-500 tw-font-semibold">
                     <cide-ele-icon class="tw-mr-2">play_arrow</cide-ele-icon>
                     Preview Sound
                   </button>
@@ -2266,7 +2266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     </div>
                   </div>
 
-                  <button type="button" cideEleButton variant="ghost" size="sm" (click)="testSound()" class="tw-w-full tw-bg-blue-500/5 hover:tw-bg-blue-500/10 tw-text-blue-500 tw-font-semibold">
+                  <button type="button" cideEleButton variant="ghost" size="xs" (click)="testSound()" class="tw-w-full tw-bg-blue-500/5 hover:tw-bg-blue-500/10 tw-text-blue-500 tw-font-semibold">
                     <cide-ele-icon class="tw-mr-2">play_arrow</cide-ele-icon>
                     Preview Sound
                   </button>
@@ -5511,11 +5511,16 @@ class CideLytSidedrawerWrapperComponent {
     get drawerItems() { return this.sidedrawerService.drawerItems; }
     get notesVisible() { return this.sidedrawerService.notesVisible; }
     isExpanded = false; // New property to track expansion state
-    // Computed signal to determine if sidedrawer should be visible
+    /** True when AI is allowed (OPEN_AI_ASSISTANT_ACTION provided). Internal option, not from page data. */
+    get aiAllowed() {
+        return !!this.openAiAction;
+    }
+    // Computed signal to determine if sidedrawer should be visible (page items OR internal AI option)
     get shouldShowSidedrawer() {
         return computed(() => {
             const items = this.drawerItems();
-            return items && items.length > 0;
+            const hasItems = items && items.length > 0;
+            return hasItems || this.aiAllowed;
         });
     }
     notesContainer;
@@ -5526,6 +5531,8 @@ class CideLytSidedrawerWrapperComponent {
     sidedrawerService = inject(CideLytSidedrawerService);
     requestService = inject(CideLytRequestService);
     tabStateService = inject(TabStateService);
+    /** When provided, AI is allowed and we show the AI icon in sidedrawer. Opens via lazy trigger (no hardcoded component). */
+    openAiAction = inject(OPEN_AI_ASSISTANT_ACTION, { optional: true });
     constructor() {
         // Modern Angular v20 pattern: Use Signals directly with effect
         effect(() => {
@@ -5575,8 +5582,8 @@ class CideLytSidedrawerWrapperComponent {
     }
     ngOnInit() {
         // Initialize the component map (You'd likely populate this from a config or service)
-        this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-DhA6J4DW.mjs').then(m => m.CideLytSidedrawerNotesComponent);
-        this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-Cc6qB3Gk.mjs').then(m => m.CideLytDrawerThemeComponent);
+        this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-D26oRRck.mjs').then(m => m.CideLytSidedrawerNotesComponent);
+        this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-CpEsyZD8.mjs').then(m => m.CideLytDrawerThemeComponent);
     }
     async loadComponent(configFor) {
         console.log('🔍 SIDEDRAWER - Loading component:', configFor, 'Current tab:', this.currentTabId);
@@ -5721,8 +5728,12 @@ class CideLytSidedrawerWrapperComponent {
             this.saveSidedrawerState(item.configFor);
         }
     }
+    /** Open AI chat via lazy trigger (no hardcoded component in layout). */
+    onAiClick() {
+        this.openAiAction?.();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideLytSidedrawerWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CideLytSidedrawerWrapperComponent, isStandalone: true, selector: "cide-lyt-sidedrawer-wrapper", viewQueries: [{ propertyName: "notesContainer", first: true, predicate: ["notesContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<nav *ngIf=\"shouldShowSidedrawer()\" \r\n  [ngClass]=\"{'expanded tw-min-w-[var(--cide-lyt-sidedrawer-wrapper-width-expanded-min)]': isExpanded, 'tw-w-[var(--cide-lyt-sidedrawer-wrapper-width)]': !isExpanded}\"\r\n  id=\"cide-lyt-sidedrawer-wrapper\" class=\"tw-flex tw-relative tw-flex-col tw-items-center tw-justify-between tw-h-full tw-bg-white tw-shadow-lg tw-border-l tw-border-gray-200\">\r\n    <!-- Resizer Divider -->\r\n    <div parentElementSelector=\"#cide-lyt-outlet-sidedrawer-wrapper\"\r\n        [minNextSize]=\"sidedrawerSetupData.cide_lyt_sidedrawer_width\" prevElementSelector=\"#cide-lyt-outlet-wrapper\"\r\n        nextElementSelector=\"#cide-lyt-sidedrawer-wrapper\" cideEleResizer direction=\"horizontal\" to=\"right-to-left\">\r\n        <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n    </div>\r\n    <!-- Main Icon Area -->\r\n    <div class=\"tw-flex tw-justify-between tw-h-full tw-w-full\">\r\n        <div class=\"tw-w-8 tw-h-full tw-border-r tw-border-gray-200\">\r\n            <div class=\"sidedrawer-icon tw-flex tw-flex-col tw-items-center tw-gap-2\">\r\n                <ng-container *ngIf=\"drawerItems() as items; else loading\">\r\n                    <div *ngFor=\"let item of items\" [title]=\"item.title\">\r\n                        <button (click)=\"onItemClick(item)\"\r\n                            class=\"tw-p-0 tw-rounded-md hover:tw-bg-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500\"\r\n                            [ngClass]=\"{'tw-bg-blue-100 tw-text-blue-700': sidedrawerService.activeComponent() === item.configFor}\">\r\n                            <cide-ele-icon [cideEleTooltip]=\"item.title\" tooltipPlacement=\"left\" width=\"1.3rem\" height=\"1.5rem\" type=\"box\">{{item.icon}}</cide-ele-icon>\r\n                        </button>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-template #loading>\r\n                    <cide-ele-skeleton-loader [width]=\"'2rem'\" [height]=\"'2rem'\" [count]=\"3\"\r\n                        [circle]=\"true\"></cide-ele-skeleton-loader>\r\n                </ng-template>\r\n            </div>\r\n        </div>\r\n        <div class=\"tw-flex-1 cide-lyt-sidedrawer-wrapper-child-holder\">\r\n            <div #notesContainer class=\"tw-h-full\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px var(--sidebar-shadow-color);overflow:hidden;background-color:var(--cide-theme-sidebar-color);--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);--sidebar-shadow-color: var(--cide-theme-shadow-color, rgba(0, 0, 0, .05));transition:width .3s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;position:relative}cide-ele-icon{color:var(--cide-theme-icon-color, var(--tw-gray-500));transition:all .2s ease}cide-ele-icon:hover{color:var(--cide-theme-icon-hover-color, var(--tw-gray-700));transform:scale(1.1)}.dark-mode .cide-lyt-sidebar{background-color:var(--cide-theme-dark-color)}.dark-mode .cide-lyt-devider-track{background-color:color-mix(in srgb,var(--cide-theme-dark-color) 70%,var(--cide-theme-black, #000));border-left-color:var(--cide-theme-dark-color)}.dark-mode .cide-lyt-devider-track:hover{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 20%,var(--cide-theme-dark-color))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.sidedrawer-icon{margin:.25rem 0}.cide-lyt-sidedrawer-wrapper-child-holder{display:grid;height:100%;width:100%;overflow:auto;-webkit-overflow-scrolling:touch}#cide-lyt-sidedrawer-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;background-color:#fff;box-shadow:-2px 0 8px #0000000d;border-left:1px solid #e5e7eb;transition:width .3s cubic-bezier(.4,0,.2,1);overflow:hidden;position:relative}.sidedrawer-icon{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.5rem 0;width:100%}.sidedrawer-icon button{min-width:44px;min-height:44px;touch-action:manipulation}@media screen and (max-width: 768px){#cide-lyt-sidedrawer-wrapper{position:fixed;top:0;right:0;bottom:0;width:0;min-width:0;z-index:45;transform:translate(100%);transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);box-shadow:-4px 0 16px #00000026}#cide-lyt-sidedrawer-wrapper.mobile-open,#cide-lyt-sidedrawer-wrapper.expanded{width:280px;min-width:280px;max-width:85vw;transform:translate(0)}.sidedrawer-overlay{position:fixed;inset:0;background-color:#0006;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:40}.sidedrawer-overlay.active{opacity:1;pointer-events:auto}.sidedrawer-icon{gap:.375rem;padding:.375rem 0}.sidedrawer-icon button{width:48px;height:48px;min-width:48px;min-height:48px;padding:.5rem}.cide-lyt-sidedrawer-wrapper-child-holder{padding:.5rem;font-size:.875rem}.cide-lyt-devider-track{display:none}}@media screen and (max-width: 480px){#cide-lyt-sidedrawer-wrapper.mobile-open,#cide-lyt-sidedrawer-wrapper.expanded{width:260px;min-width:260px;max-width:90vw}.sidedrawer-icon{gap:.25rem;padding:.25rem 0}.sidedrawer-icon button{width:44px;height:44px;min-width:44px;min-height:44px}.cide-lyt-sidedrawer-wrapper-child-holder{padding:.375rem;font-size:.8125rem}}@media screen and (min-width: 769px) and (max-width: 1024px){#cide-lyt-sidedrawer-wrapper{min-width:250px}.sidedrawer-icon{gap:.5rem}.sidedrawer-icon button{width:40px;height:40px;min-width:40px;min-height:40px}}@media screen and (max-width: 768px) and (orientation: landscape){#cide-lyt-sidedrawer-wrapper.mobile-open,#cide-lyt-sidedrawer-wrapper.expanded{width:300px;max-width:70vw}.sidedrawer-icon{gap:.25rem;padding:.25rem 0}}@media (hover: none) and (pointer: coarse){.sidedrawer-icon button{min-width:48px;min-height:48px}cide-ele-icon:hover{transform:none}.sidedrawer-icon button:active{transform:scale(.95);background-color:#3b82f61a}}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar{width:6px}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-track{background:transparent}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:3px}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb:hover{background-color:#9ca3af}:root[data-theme=dark] .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb,:root.dark-mode .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb{background-color:#4b5563}:root[data-theme=dark] .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb:hover,:root.dark-mode .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb:hover{background-color:#6b7280}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "directive", type: CideEleResizerDirective, selector: "[cideEleResizer]", inputs: ["direction", "to", "prevElementSelector", "nextElementSelector", "parentElementSelector", "minPrevSize", "minNextSize", "usePercentage"], outputs: ["resizeStart", "resizing", "resizeEnd"] }, { kind: "component", type: CideEleSkeletonLoaderComponent, selector: "cide-ele-skeleton-loader", inputs: ["width", "height", "borderRadius", "count", "circle", "animation"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TooltipDirective, selector: "[cideEleTooltip]", inputs: ["cideEleTooltip", "tooltipColor", "tooltipBg", "tooltipPlacement", "tooltipType", "tooltipDelay", "tooltipDir", "tooltipShowArrow", "tooltipMultiline", "tooltipMaxWidth", "tooltipInteractive", "tooltipClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CideLytSidedrawerWrapperComponent, isStandalone: true, selector: "cide-lyt-sidedrawer-wrapper", viewQueries: [{ propertyName: "notesContainer", first: true, predicate: ["notesContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<nav *ngIf=\"shouldShowSidedrawer()\" \r\n  [ngClass]=\"{'expanded tw-min-w-[var(--cide-lyt-sidedrawer-wrapper-width-expanded-min)]': isExpanded, 'tw-w-[var(--cide-lyt-sidedrawer-wrapper-width)]': !isExpanded}\"\r\n  id=\"cide-lyt-sidedrawer-wrapper\" class=\"tw-flex tw-relative tw-flex-col tw-items-center tw-justify-between tw-h-full tw-bg-white tw-shadow-lg tw-border-l tw-border-gray-200\">\r\n    <!-- Resizer Divider -->\r\n    <div parentElementSelector=\"#cide-lyt-outlet-sidedrawer-wrapper\"\r\n        [minNextSize]=\"sidedrawerSetupData.cide_lyt_sidedrawer_width\" prevElementSelector=\"#cide-lyt-outlet-wrapper\"\r\n        nextElementSelector=\"#cide-lyt-sidedrawer-wrapper\" cideEleResizer direction=\"horizontal\" to=\"right-to-left\">\r\n        <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n    </div>\r\n    <!-- Main Icon Area -->\r\n    <div class=\"tw-flex tw-justify-between tw-h-full tw-w-full\">\r\n        <div class=\"tw-w-8 tw-h-full tw-border-r tw-border-gray-200\">\r\n            <div class=\"sidedrawer-icon tw-flex tw-flex-col tw-items-center tw-gap-2\">\r\n                <ng-container *ngIf=\"drawerItems() as items; else loading\">\r\n                    <div *ngFor=\"let item of items\" [title]=\"item.title\">\r\n                        <button (click)=\"onItemClick(item)\"\r\n                            class=\"tw-p-0 tw-rounded-md hover:tw-bg-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500\"\r\n                            [ngClass]=\"{'tw-bg-blue-100 tw-text-blue-700': sidedrawerService.activeComponent() === item.configFor}\">\r\n                            <cide-ele-icon [cideEleTooltip]=\"item.title\" tooltipPlacement=\"left\" width=\"1.3rem\" height=\"1.5rem\" type=\"box\">{{item.icon}}</cide-ele-icon>\r\n                        </button>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-template #loading>\r\n                    <cide-ele-skeleton-loader [width]=\"'2rem'\" [height]=\"'2rem'\" [count]=\"3\"\r\n                        [circle]=\"true\"></cide-ele-skeleton-loader>\r\n                </ng-template>\r\n                <ng-container *ngIf=\"aiAllowed\">\r\n                    <div title=\"AI Assistant\">\r\n                        <button (click)=\"onAiClick()\"\r\n                            class=\"tw-p-0 tw-rounded-md hover:tw-bg-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500\"\r\n                            type=\"button\">\r\n                            <cide-ele-icon [cideEleTooltip]=\"'AI Assistant (Alt+A)'\" tooltipPlacement=\"left\" name=\"cide-ai-sparkle\" width=\"1.3rem\" height=\"1.5rem\" type=\"box\"></cide-ele-icon>\r\n                        </button>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n        <div class=\"tw-flex-1 cide-lyt-sidedrawer-wrapper-child-holder\">\r\n            <div #notesContainer class=\"tw-h-full\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px var(--sidebar-shadow-color);overflow:hidden;background-color:var(--cide-theme-sidebar-color);--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);--sidebar-shadow-color: var(--cide-theme-shadow-color, rgba(0, 0, 0, .05));transition:width .3s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;position:relative}cide-ele-icon{color:var(--cide-theme-icon-color, var(--tw-gray-500));transition:all .2s ease}cide-ele-icon:hover{color:var(--cide-theme-icon-hover-color, var(--tw-gray-700));transform:scale(1.1)}.dark-mode .cide-lyt-sidebar{background-color:var(--cide-theme-dark-color)}.dark-mode .cide-lyt-devider-track{background-color:color-mix(in srgb,var(--cide-theme-dark-color) 70%,var(--cide-theme-black, #000));border-left-color:var(--cide-theme-dark-color)}.dark-mode .cide-lyt-devider-track:hover{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 20%,var(--cide-theme-dark-color))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.sidedrawer-icon{margin:.25rem 0}.cide-lyt-sidedrawer-wrapper-child-holder{display:grid;height:100%;width:100%;overflow:auto;-webkit-overflow-scrolling:touch}#cide-lyt-sidedrawer-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;background-color:#fff;box-shadow:-2px 0 8px #0000000d;border-left:1px solid #e5e7eb;transition:width .3s cubic-bezier(.4,0,.2,1);overflow:hidden;position:relative}.sidedrawer-icon{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.5rem 0;width:100%}.sidedrawer-icon button{min-width:44px;min-height:44px;touch-action:manipulation}@media screen and (max-width: 768px){#cide-lyt-sidedrawer-wrapper{position:fixed;top:0;right:0;bottom:0;width:0;min-width:0;z-index:45;transform:translate(100%);transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);box-shadow:-4px 0 16px #00000026}#cide-lyt-sidedrawer-wrapper.mobile-open,#cide-lyt-sidedrawer-wrapper.expanded{width:280px;min-width:280px;max-width:85vw;transform:translate(0)}.sidedrawer-overlay{position:fixed;inset:0;background-color:#0006;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:40}.sidedrawer-overlay.active{opacity:1;pointer-events:auto}.sidedrawer-icon{gap:.375rem;padding:.375rem 0}.sidedrawer-icon button{width:48px;height:48px;min-width:48px;min-height:48px;padding:.5rem}.cide-lyt-sidedrawer-wrapper-child-holder{padding:.5rem;font-size:.875rem}.cide-lyt-devider-track{display:none}}@media screen and (max-width: 480px){#cide-lyt-sidedrawer-wrapper.mobile-open,#cide-lyt-sidedrawer-wrapper.expanded{width:260px;min-width:260px;max-width:90vw}.sidedrawer-icon{gap:.25rem;padding:.25rem 0}.sidedrawer-icon button{width:44px;height:44px;min-width:44px;min-height:44px}.cide-lyt-sidedrawer-wrapper-child-holder{padding:.375rem;font-size:.8125rem}}@media screen and (min-width: 769px) and (max-width: 1024px){#cide-lyt-sidedrawer-wrapper{min-width:250px}.sidedrawer-icon{gap:.5rem}.sidedrawer-icon button{width:40px;height:40px;min-width:40px;min-height:40px}}@media screen and (max-width: 768px) and (orientation: landscape){#cide-lyt-sidedrawer-wrapper.mobile-open,#cide-lyt-sidedrawer-wrapper.expanded{width:300px;max-width:70vw}.sidedrawer-icon{gap:.25rem;padding:.25rem 0}}@media (hover: none) and (pointer: coarse){.sidedrawer-icon button{min-width:48px;min-height:48px}cide-ele-icon:hover{transform:none}.sidedrawer-icon button:active{transform:scale(.95);background-color:#3b82f61a}}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar{width:6px}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-track{background:transparent}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:3px}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb:hover{background-color:#9ca3af}:root[data-theme=dark] .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb,:root.dark-mode .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb{background-color:#4b5563}:root[data-theme=dark] .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb:hover,:root.dark-mode .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb:hover{background-color:#6b7280}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "directive", type: CideEleResizerDirective, selector: "[cideEleResizer]", inputs: ["direction", "to", "prevElementSelector", "nextElementSelector", "parentElementSelector", "minPrevSize", "minNextSize", "usePercentage"], outputs: ["resizeStart", "resizing", "resizeEnd"] }, { kind: "component", type: CideEleSkeletonLoaderComponent, selector: "cide-ele-skeleton-loader", inputs: ["width", "height", "borderRadius", "count", "circle", "animation"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TooltipDirective, selector: "[cideEleTooltip]", inputs: ["cideEleTooltip", "tooltipColor", "tooltipBg", "tooltipPlacement", "tooltipType", "tooltipDelay", "tooltipDir", "tooltipShowArrow", "tooltipMultiline", "tooltipMaxWidth", "tooltipInteractive", "tooltipClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideLytSidedrawerWrapperComponent, decorators: [{
             type: Component,
@@ -5734,7 +5745,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         NgFor,
                         NgIf,
                         TooltipDirective
-                    ], template: "<nav *ngIf=\"shouldShowSidedrawer()\" \r\n  [ngClass]=\"{'expanded tw-min-w-[var(--cide-lyt-sidedrawer-wrapper-width-expanded-min)]': isExpanded, 'tw-w-[var(--cide-lyt-sidedrawer-wrapper-width)]': !isExpanded}\"\r\n  id=\"cide-lyt-sidedrawer-wrapper\" class=\"tw-flex tw-relative tw-flex-col tw-items-center tw-justify-between tw-h-full tw-bg-white tw-shadow-lg tw-border-l tw-border-gray-200\">\r\n    <!-- Resizer Divider -->\r\n    <div parentElementSelector=\"#cide-lyt-outlet-sidedrawer-wrapper\"\r\n        [minNextSize]=\"sidedrawerSetupData.cide_lyt_sidedrawer_width\" prevElementSelector=\"#cide-lyt-outlet-wrapper\"\r\n        nextElementSelector=\"#cide-lyt-sidedrawer-wrapper\" cideEleResizer direction=\"horizontal\" to=\"right-to-left\">\r\n        <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n    </div>\r\n    <!-- Main Icon Area -->\r\n    <div class=\"tw-flex tw-justify-between tw-h-full tw-w-full\">\r\n        <div class=\"tw-w-8 tw-h-full tw-border-r tw-border-gray-200\">\r\n            <div class=\"sidedrawer-icon tw-flex tw-flex-col tw-items-center tw-gap-2\">\r\n                <ng-container *ngIf=\"drawerItems() as items; else loading\">\r\n                    <div *ngFor=\"let item of items\" [title]=\"item.title\">\r\n                        <button (click)=\"onItemClick(item)\"\r\n                            class=\"tw-p-0 tw-rounded-md hover:tw-bg-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500\"\r\n                            [ngClass]=\"{'tw-bg-blue-100 tw-text-blue-700': sidedrawerService.activeComponent() === item.configFor}\">\r\n                            <cide-ele-icon [cideEleTooltip]=\"item.title\" tooltipPlacement=\"left\" width=\"1.3rem\" height=\"1.5rem\" type=\"box\">{{item.icon}}</cide-ele-icon>\r\n                        </button>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-template #loading>\r\n                    <cide-ele-skeleton-loader [width]=\"'2rem'\" [height]=\"'2rem'\" [count]=\"3\"\r\n                        [circle]=\"true\"></cide-ele-skeleton-loader>\r\n                </ng-template>\r\n            </div>\r\n        </div>\r\n        <div class=\"tw-flex-1 cide-lyt-sidedrawer-wrapper-child-holder\">\r\n            <div #notesContainer class=\"tw-h-full\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px var(--sidebar-shadow-color);overflow:hidden;background-color:var(--cide-theme-sidebar-color);--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);--sidebar-shadow-color: var(--cide-theme-shadow-color, rgba(0, 0, 0, .05));transition:width .3s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;position:relative}cide-ele-icon{color:var(--cide-theme-icon-color, var(--tw-gray-500));transition:all .2s ease}cide-ele-icon:hover{color:var(--cide-theme-icon-hover-color, var(--tw-gray-700));transform:scale(1.1)}.dark-mode .cide-lyt-sidebar{background-color:var(--cide-theme-dark-color)}.dark-mode .cide-lyt-devider-track{background-color:color-mix(in srgb,var(--cide-theme-dark-color) 70%,var(--cide-theme-black, #000));border-left-color:var(--cide-theme-dark-color)}.dark-mode .cide-lyt-devider-track:hover{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 20%,var(--cide-theme-dark-color))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.sidedrawer-icon{margin:.25rem 0}.cide-lyt-sidedrawer-wrapper-child-holder{display:grid;height:100%;width:100%;overflow:auto;-webkit-overflow-scrolling:touch}#cide-lyt-sidedrawer-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;background-color:#fff;box-shadow:-2px 0 8px #0000000d;border-left:1px solid #e5e7eb;transition:width .3s cubic-bezier(.4,0,.2,1);overflow:hidden;position:relative}.sidedrawer-icon{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.5rem 0;width:100%}.sidedrawer-icon button{min-width:44px;min-height:44px;touch-action:manipulation}@media screen and (max-width: 768px){#cide-lyt-sidedrawer-wrapper{position:fixed;top:0;right:0;bottom:0;width:0;min-width:0;z-index:45;transform:translate(100%);transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);box-shadow:-4px 0 16px #00000026}#cide-lyt-sidedrawer-wrapper.mobile-open,#cide-lyt-sidedrawer-wrapper.expanded{width:280px;min-width:280px;max-width:85vw;transform:translate(0)}.sidedrawer-overlay{position:fixed;inset:0;background-color:#0006;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:40}.sidedrawer-overlay.active{opacity:1;pointer-events:auto}.sidedrawer-icon{gap:.375rem;padding:.375rem 0}.sidedrawer-icon button{width:48px;height:48px;min-width:48px;min-height:48px;padding:.5rem}.cide-lyt-sidedrawer-wrapper-child-holder{padding:.5rem;font-size:.875rem}.cide-lyt-devider-track{display:none}}@media screen and (max-width: 480px){#cide-lyt-sidedrawer-wrapper.mobile-open,#cide-lyt-sidedrawer-wrapper.expanded{width:260px;min-width:260px;max-width:90vw}.sidedrawer-icon{gap:.25rem;padding:.25rem 0}.sidedrawer-icon button{width:44px;height:44px;min-width:44px;min-height:44px}.cide-lyt-sidedrawer-wrapper-child-holder{padding:.375rem;font-size:.8125rem}}@media screen and (min-width: 769px) and (max-width: 1024px){#cide-lyt-sidedrawer-wrapper{min-width:250px}.sidedrawer-icon{gap:.5rem}.sidedrawer-icon button{width:40px;height:40px;min-width:40px;min-height:40px}}@media screen and (max-width: 768px) and (orientation: landscape){#cide-lyt-sidedrawer-wrapper.mobile-open,#cide-lyt-sidedrawer-wrapper.expanded{width:300px;max-width:70vw}.sidedrawer-icon{gap:.25rem;padding:.25rem 0}}@media (hover: none) and (pointer: coarse){.sidedrawer-icon button{min-width:48px;min-height:48px}cide-ele-icon:hover{transform:none}.sidedrawer-icon button:active{transform:scale(.95);background-color:#3b82f61a}}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar{width:6px}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-track{background:transparent}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:3px}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb:hover{background-color:#9ca3af}:root[data-theme=dark] .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb,:root.dark-mode .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb{background-color:#4b5563}:root[data-theme=dark] .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb:hover,:root.dark-mode .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb:hover{background-color:#6b7280}\n"] }]
+                    ], template: "<nav *ngIf=\"shouldShowSidedrawer()\" \r\n  [ngClass]=\"{'expanded tw-min-w-[var(--cide-lyt-sidedrawer-wrapper-width-expanded-min)]': isExpanded, 'tw-w-[var(--cide-lyt-sidedrawer-wrapper-width)]': !isExpanded}\"\r\n  id=\"cide-lyt-sidedrawer-wrapper\" class=\"tw-flex tw-relative tw-flex-col tw-items-center tw-justify-between tw-h-full tw-bg-white tw-shadow-lg tw-border-l tw-border-gray-200\">\r\n    <!-- Resizer Divider -->\r\n    <div parentElementSelector=\"#cide-lyt-outlet-sidedrawer-wrapper\"\r\n        [minNextSize]=\"sidedrawerSetupData.cide_lyt_sidedrawer_width\" prevElementSelector=\"#cide-lyt-outlet-wrapper\"\r\n        nextElementSelector=\"#cide-lyt-sidedrawer-wrapper\" cideEleResizer direction=\"horizontal\" to=\"right-to-left\">\r\n        <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n    </div>\r\n    <!-- Main Icon Area -->\r\n    <div class=\"tw-flex tw-justify-between tw-h-full tw-w-full\">\r\n        <div class=\"tw-w-8 tw-h-full tw-border-r tw-border-gray-200\">\r\n            <div class=\"sidedrawer-icon tw-flex tw-flex-col tw-items-center tw-gap-2\">\r\n                <ng-container *ngIf=\"drawerItems() as items; else loading\">\r\n                    <div *ngFor=\"let item of items\" [title]=\"item.title\">\r\n                        <button (click)=\"onItemClick(item)\"\r\n                            class=\"tw-p-0 tw-rounded-md hover:tw-bg-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500\"\r\n                            [ngClass]=\"{'tw-bg-blue-100 tw-text-blue-700': sidedrawerService.activeComponent() === item.configFor}\">\r\n                            <cide-ele-icon [cideEleTooltip]=\"item.title\" tooltipPlacement=\"left\" width=\"1.3rem\" height=\"1.5rem\" type=\"box\">{{item.icon}}</cide-ele-icon>\r\n                        </button>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-template #loading>\r\n                    <cide-ele-skeleton-loader [width]=\"'2rem'\" [height]=\"'2rem'\" [count]=\"3\"\r\n                        [circle]=\"true\"></cide-ele-skeleton-loader>\r\n                </ng-template>\r\n                <ng-container *ngIf=\"aiAllowed\">\r\n                    <div title=\"AI Assistant\">\r\n                        <button (click)=\"onAiClick()\"\r\n                            class=\"tw-p-0 tw-rounded-md hover:tw-bg-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500\"\r\n                            type=\"button\">\r\n                            <cide-ele-icon [cideEleTooltip]=\"'AI Assistant (Alt+A)'\" tooltipPlacement=\"left\" name=\"cide-ai-sparkle\" width=\"1.3rem\" height=\"1.5rem\" type=\"box\"></cide-ele-icon>\r\n                        </button>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n        <div class=\"tw-flex-1 cide-lyt-sidedrawer-wrapper-child-holder\">\r\n            <div #notesContainer class=\"tw-h-full\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px var(--sidebar-shadow-color);overflow:hidden;background-color:var(--cide-theme-sidebar-color);--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);--sidebar-shadow-color: var(--cide-theme-shadow-color, rgba(0, 0, 0, .05));transition:width .3s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;position:relative}cide-ele-icon{color:var(--cide-theme-icon-color, var(--tw-gray-500));transition:all .2s ease}cide-ele-icon:hover{color:var(--cide-theme-icon-hover-color, var(--tw-gray-700));transform:scale(1.1)}.dark-mode .cide-lyt-sidebar{background-color:var(--cide-theme-dark-color)}.dark-mode .cide-lyt-devider-track{background-color:color-mix(in srgb,var(--cide-theme-dark-color) 70%,var(--cide-theme-black, #000));border-left-color:var(--cide-theme-dark-color)}.dark-mode .cide-lyt-devider-track:hover{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 20%,var(--cide-theme-dark-color))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.sidedrawer-icon{margin:.25rem 0}.cide-lyt-sidedrawer-wrapper-child-holder{display:grid;height:100%;width:100%;overflow:auto;-webkit-overflow-scrolling:touch}#cide-lyt-sidedrawer-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;background-color:#fff;box-shadow:-2px 0 8px #0000000d;border-left:1px solid #e5e7eb;transition:width .3s cubic-bezier(.4,0,.2,1);overflow:hidden;position:relative}.sidedrawer-icon{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.5rem 0;width:100%}.sidedrawer-icon button{min-width:44px;min-height:44px;touch-action:manipulation}@media screen and (max-width: 768px){#cide-lyt-sidedrawer-wrapper{position:fixed;top:0;right:0;bottom:0;width:0;min-width:0;z-index:45;transform:translate(100%);transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);box-shadow:-4px 0 16px #00000026}#cide-lyt-sidedrawer-wrapper.mobile-open,#cide-lyt-sidedrawer-wrapper.expanded{width:280px;min-width:280px;max-width:85vw;transform:translate(0)}.sidedrawer-overlay{position:fixed;inset:0;background-color:#0006;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:40}.sidedrawer-overlay.active{opacity:1;pointer-events:auto}.sidedrawer-icon{gap:.375rem;padding:.375rem 0}.sidedrawer-icon button{width:48px;height:48px;min-width:48px;min-height:48px;padding:.5rem}.cide-lyt-sidedrawer-wrapper-child-holder{padding:.5rem;font-size:.875rem}.cide-lyt-devider-track{display:none}}@media screen and (max-width: 480px){#cide-lyt-sidedrawer-wrapper.mobile-open,#cide-lyt-sidedrawer-wrapper.expanded{width:260px;min-width:260px;max-width:90vw}.sidedrawer-icon{gap:.25rem;padding:.25rem 0}.sidedrawer-icon button{width:44px;height:44px;min-width:44px;min-height:44px}.cide-lyt-sidedrawer-wrapper-child-holder{padding:.375rem;font-size:.8125rem}}@media screen and (min-width: 769px) and (max-width: 1024px){#cide-lyt-sidedrawer-wrapper{min-width:250px}.sidedrawer-icon{gap:.5rem}.sidedrawer-icon button{width:40px;height:40px;min-width:40px;min-height:40px}}@media screen and (max-width: 768px) and (orientation: landscape){#cide-lyt-sidedrawer-wrapper.mobile-open,#cide-lyt-sidedrawer-wrapper.expanded{width:300px;max-width:70vw}.sidedrawer-icon{gap:.25rem;padding:.25rem 0}}@media (hover: none) and (pointer: coarse){.sidedrawer-icon button{min-width:48px;min-height:48px}cide-ele-icon:hover{transform:none}.sidedrawer-icon button:active{transform:scale(.95);background-color:#3b82f61a}}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar{width:6px}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-track{background:transparent}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:3px}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb:hover{background-color:#9ca3af}:root[data-theme=dark] .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb,:root.dark-mode .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb{background-color:#4b5563}:root[data-theme=dark] .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb:hover,:root.dark-mode .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb:hover{background-color:#6b7280}\n"] }]
         }], ctorParameters: () => [], propDecorators: { notesContainer: [{
                 type: ViewChild,
                 args: ['notesContainer', { read: ViewContainerRef }]
@@ -5912,7 +5923,7 @@ class ShortcutsPanelComponent {
           type="button"
           cideEleButton
           variant="outline"
-          size="sm"
+          size="xs"
           (click)="loadShortcuts()"
           title="Refresh shortcuts">
           <cide-ele-icon>refresh</cide-ele-icon>
@@ -5922,7 +5933,7 @@ class ShortcutsPanelComponent {
           type="button"
           cideEleButton
           variant="outline"
-          size="sm"
+          size="xs"
           (click)="toggleView()">
           <cide-ele-icon>{{ viewMode() === 'grouped' ? 'view_list' : 'category' }}</cide-ele-icon>
           {{ viewMode() === 'grouped' ? 'List View' : 'Grouped View' }}
@@ -6050,7 +6061,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
           type="button"
           cideEleButton
           variant="outline"
-          size="sm"
+          size="xs"
           (click)="loadShortcuts()"
           title="Refresh shortcuts">
           <cide-ele-icon>refresh</cide-ele-icon>
@@ -6060,7 +6071,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
           type="button"
           cideEleButton
           variant="outline"
-          size="sm"
+          size="xs"
           (click)="toggleView()">
           <cide-ele-icon>{{ viewMode() === 'grouped' ? 'view_list' : 'category' }}</cide-ele-icon>
           {{ viewMode() === 'grouped' ? 'List View' : 'Grouped View' }}
@@ -6613,15 +6624,115 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 args: ['scrollContainer']
             }] } });
 
+class CideLytLazyAiDrawerHostComponent {
+    loader = inject(CIDE_AI_DRAWER_LOADER, { optional: true });
+    triggerService = inject(AiAssistantTriggerService, { optional: true });
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    loadedComponent = signal(null, ...(ngDevMode ? [{ debugName: "loadedComponent" }] : []));
+    loadTriggered = false;
+    constructor() {
+        // When open$ emits, trigger load if not yet loaded, then open
+        if (this.triggerService) {
+            this.triggerService.open$.pipe(takeUntilDestroyed()).subscribe(() => {
+                if (!this.loadTriggered) {
+                    this.loadTriggered = true;
+                    this.loadAndOpen();
+                }
+                else {
+                    // Component already loaded; trigger will open it via open$ subscription
+                    this.triggerService?.open();
+                }
+            });
+        }
+    }
+    ngOnInit() {
+        // If AI is allowed, we need the host in DOM. Load is triggered on first open$ emit.
+        // No eager load - wait for user to click AI in sidedrawer or Alt+A
+    }
+    ngOnDestroy() { }
+    async loadAndOpen() {
+        const loaderFn = this.loader;
+        if (!loaderFn)
+            return;
+        this.isLoading.set(true);
+        try {
+            const componentType = await loaderFn();
+            this.loadedComponent.set(componentType);
+            this.isLoading.set(false);
+            // Component will be created by ngComponentOutlet. We need to call openDrawer after it's created.
+            // Use setTimeout to allow Angular to create the component
+            setTimeout(() => {
+                // The component subscribes to open$ in constructor, so it may have already received the emit.
+                // Emit again to ensure it opens (in case timing was off)
+                this.triggerService?.open();
+            }, 0);
+        }
+        catch (err) {
+            console.error('Failed to load AI drawer:', err);
+            this.isLoading.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideLytLazyAiDrawerHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideLytLazyAiDrawerHostComponent, isStandalone: true, selector: "cide-lyt-lazy-ai-drawer-host", ngImport: i0, template: `
+    @if (isLoading()) {
+      <div class="ai-drawer-skeleton-wrapper" role="status" aria-label="Loading AI Assistant">
+        <div class="ai-drawer-skeleton-backdrop"></div>
+        <div class="ai-drawer-skeleton-panel">
+          <div class="ai-drawer-skeleton-header">
+            <cide-ele-skeleton-loader [width]="'8rem'" [height]="'1.25rem'" [borderRadius]="'0.25rem'"></cide-ele-skeleton-loader>
+            <cide-ele-skeleton-loader [width]="'2rem'" [height]="'2rem'" [circle]="true"></cide-ele-skeleton-loader>
+          </div>
+          <div class="ai-drawer-skeleton-body">
+            <cide-ele-skeleton-loader [width]="'100%'" [height]="'2rem'" [count]="4" [borderRadius]="'0.25rem'"></cide-ele-skeleton-loader>
+          </div>
+          <div class="ai-drawer-skeleton-footer">
+            <cide-ele-skeleton-loader [width]="'100%'" [height]="'2.5rem'" [borderRadius]="'0.5rem'"></cide-ele-skeleton-loader>
+          </div>
+        </div>
+      </div>
+    }
+    @if (loadedComponent() && !isLoading()) {
+      <ng-container [ngComponentOutlet]="loadedComponent()!"></ng-container>
+    }
+  `, isInline: true, styles: [".ai-drawer-skeleton-wrapper{position:fixed;inset:0;z-index:1050;pointer-events:none}.ai-drawer-skeleton-backdrop{position:absolute;inset:0;background:#0003}.ai-drawer-skeleton-panel{position:absolute;right:0;top:50%;transform:translateY(-50%);width:380px;height:420px;background:#fff;border-radius:12px 0 0 12px;box-shadow:-4px 0 24px #00000026;display:flex;flex-direction:column;padding:1rem;gap:1rem}.ai-drawer-skeleton-header{display:flex;justify-content:space-between;align-items:center}.ai-drawer-skeleton-body{flex:1;display:flex;flex-direction:column;gap:.75rem}.ai-drawer-skeleton-footer{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: CideEleSkeletonLoaderComponent, selector: "cide-ele-skeleton-loader", inputs: ["width", "height", "borderRadius", "count", "circle", "animation"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideLytLazyAiDrawerHostComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cide-lyt-lazy-ai-drawer-host', standalone: true, imports: [NgComponentOutlet, CideEleSkeletonLoaderComponent], template: `
+    @if (isLoading()) {
+      <div class="ai-drawer-skeleton-wrapper" role="status" aria-label="Loading AI Assistant">
+        <div class="ai-drawer-skeleton-backdrop"></div>
+        <div class="ai-drawer-skeleton-panel">
+          <div class="ai-drawer-skeleton-header">
+            <cide-ele-skeleton-loader [width]="'8rem'" [height]="'1.25rem'" [borderRadius]="'0.25rem'"></cide-ele-skeleton-loader>
+            <cide-ele-skeleton-loader [width]="'2rem'" [height]="'2rem'" [circle]="true"></cide-ele-skeleton-loader>
+          </div>
+          <div class="ai-drawer-skeleton-body">
+            <cide-ele-skeleton-loader [width]="'100%'" [height]="'2rem'" [count]="4" [borderRadius]="'0.25rem'"></cide-ele-skeleton-loader>
+          </div>
+          <div class="ai-drawer-skeleton-footer">
+            <cide-ele-skeleton-loader [width]="'100%'" [height]="'2.5rem'" [borderRadius]="'0.5rem'"></cide-ele-skeleton-loader>
+          </div>
+        </div>
+      </div>
+    }
+    @if (loadedComponent() && !isLoading()) {
+      <ng-container [ngComponentOutlet]="loadedComponent()!"></ng-container>
+    }
+  `, styles: [".ai-drawer-skeleton-wrapper{position:fixed;inset:0;z-index:1050;pointer-events:none}.ai-drawer-skeleton-backdrop{position:absolute;inset:0;background:#0003}.ai-drawer-skeleton-panel{position:absolute;right:0;top:50%;transform:translateY(-50%);width:380px;height:420px;background:#fff;border-radius:12px 0 0 12px;box-shadow:-4px 0 24px #00000026;display:flex;flex-direction:column;padding:1rem;gap:1rem}.ai-drawer-skeleton-header{display:flex;justify-content:space-between;align-items:center}.ai-drawer-skeleton-body{flex:1;display:flex;flex-direction:column;gap:.75rem}.ai-drawer-skeleton-footer{flex-shrink:0}\n"] }]
+        }], ctorParameters: () => [] });
+
 class CideLytLayoutWrapperComponent {
-    /** AI drawer component when provided via token (avoids direct cloud-ide-ai import). */
+    /** Lazy loader for AI drawer - preferred; shows skeleton until loaded. */
+    aiDrawerLoader = inject(CIDE_AI_DRAWER_LOADER, { optional: true });
+    /** AI drawer component when provided via token (fallback; avoids direct cloud-ide-ai import). */
     aiDrawerComponent = inject(CIDE_AI_DRAWER_COMPONENT, { optional: true });
     constructor() {
         // Ensure floating container shortcuts (including AI Alt+A) are registered when layout loads
         inject(FloatingContainerShortcutsService);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideLytLayoutWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideLytLayoutWrapperComponent, isStandalone: true, selector: "cide-lyt-layout-wrapper", ngImport: i0, template: "<div class=\"tw-w-full tw-table tw-h-screen tw-relative\" id=\"cide-lyt-layout-wrapper\">\n   @if (aiDrawerComponent) {\n      <ng-container [ngComponentOutlet]=\"aiDrawerComponent\"></ng-container>\n   }\n   <!-- We will use here Header  -->\n   <cide-lyt-header-wrapper class=\"tw-table-row tw-h-0\"></cide-lyt-header-wrapper>\n   <!-- we will use here request tabs -->\n   <div class=\"tw-table-row\" id=\"cide-lyt-sidebar-page-wrapper\">\n      <div class=\"cide-lyt-sidebar-page-wrapper tw-h-full  tw-w-screen\" id=\"cide-lyt-sidebar-page-inner-wrapper\">\n         <!-- We will use here Sidebar -->\n         <cide-lyt-sidebar-wrapper id=\"cide-lyt-sidebar-page\"\n            class=\"cide-lyt-sidebar-page-hide\"></cide-lyt-sidebar-wrapper>\n         <!-- We will use here Router Outlet -->\n         <div class=\"cide-lyt-page-wrapper tw-block tw-h-full tw-w-full\" id=\"cide-lyt-page-wrapper\">\n            <cide-lyt-request-wrapper class=\"tw-w-[inherit] tw-h-auto\"></cide-lyt-request-wrapper>\n            <div class=\"cide-lyt-outlet-sidedrawer-wrapper tw-table-row\" id=\"cide-lyt-outlet-sidedrawer-wrapper\">\n               <div class=\"tw-w-full tw-h-full tw-overflow-y-auto cide-scrollbar-width-thin\"\n                  id=\"cide-lyt-outlet-wrapper\">\n                  <cide-lyt-tab-content></cide-lyt-tab-content>\n               </div>\n               <!-- We will use here Side Drawer -->\n               <cide-lyt-sidedrawer-wrapper></cide-lyt-sidedrawer-wrapper>\n            </div>\n         </div>\n      </div>\n   </div>\n   <div class=\"cide-lyt-footer-console-wrapper cide-lyt-footer-console-wrapper-hide tw-relative tw-table-row tw-h-0\"\n      id=\"cide-lyt-footer-console-wrapper\">\n      <!-- We will use here footer -->\n      <cide-lyt-footer-wrapper></cide-lyt-footer-wrapper>\n      <!-- We will use here Console -->\n      <cide-lyt-console-wrapper></cide-lyt-console-wrapper>\n   </div>\n</div>", styles: ["#cide-lyt-layout-wrapper{display:table;width:100%;height:100vh;position:relative;overflow:hidden}#cide-lyt-layout-wrapper>*{display:table-row}#cide-lyt-sidebar-page-wrapper{display:table-row;height:100%}#cide-lyt-page-wrapper{display:block;height:100%;width:100%;overflow:hidden}#cide-lyt-outlet-wrapper{display:block;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}@media screen and (max-width: 768px){#cide-lyt-layout-wrapper{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{display:block;flex-shrink:0;height:auto;min-height:var(--cide-lyt-header-wrapper-height);width:100%}#cide-lyt-sidebar-page-wrapper{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.cide-lyt-sidebar-page-wrapper{display:flex;flex-direction:row;flex:1;min-height:0;width:100%;position:relative;overflow:hidden}#cide-lyt-sidebar-page{display:block;position:fixed;top:var(--cide-lyt-header-wrapper-height);left:0;bottom:0;right:0;z-index:9999;pointer-events:none;transform:none!important;transition:none!important}#cide-lyt-page-wrapper{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;width:100%;overflow:hidden}#cide-lyt-page-wrapper>cide-lyt-request-wrapper{flex-shrink:0;width:100%}#cide-lyt-outlet-sidedrawer-wrapper{display:flex;flex-direction:row;flex:1;min-height:0;overflow:hidden}#cide-lyt-outlet-wrapper{flex:1;min-width:0;min-height:0;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}#cide-lyt-footer-console-wrapper{display:flex;flex-direction:column;flex-shrink:0;height:auto;width:100%;overflow:hidden}#cide-lyt-footer-console-wrapper>cide-lyt-footer-wrapper{display:none;flex-shrink:0;height:var(--cide-lyt-footer-wrapper-height);width:100%}#cide-lyt-footer-console-wrapper>cide-lyt-console-wrapper{flex-shrink:0;height:auto;width:100%}body{overflow-x:hidden;width:100%}@supports (-webkit-touch-callout: none){#cide-lyt-layout-wrapper{height:-webkit-fill-available}}}@media screen and (min-width: 769px) and (max-width: 1024px){#cide-lyt-outlet-wrapper{padding:.75rem}.cide-lyt-sidebar-page-wrapper{max-width:100%}}@media screen and (max-width: 480px){#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{min-height:var(--cide-lyt-header-wrapper-height)}.cide-lyt-page-wrapper{padding:0}#cide-lyt-sidedrawer-wrapper{width:0!important;min-width:0!important;transform:translate(100%)}#cide-lyt-outlet-wrapper{width:100%}#cide-lyt-footer-console-wrapper{flex-direction:column}}@media screen and (max-width: 768px) and (orientation: landscape){#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{min-height:var(--cide-lyt-header-wrapper-height)}#cide-lyt-outlet-wrapper{padding:.5rem}}@media (hover: none) and (pointer: coarse){#cide-lyt-outlet-wrapper{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}#cide-lyt-layout-wrapper{-webkit-user-select:none;-moz-user-select:none;user-select:none}#cide-lyt-outlet-wrapper *{-webkit-user-select:text;-moz-user-select:text;user-select:text}}@media print{#cide-lyt-layout-wrapper{display:block;height:auto}#cide-lyt-sidebar-page-wrapper,#cide-lyt-footer-console-wrapper{display:none}#cide-lyt-outlet-wrapper{overflow:visible;height:auto}}\n"], dependencies: [{ kind: "component", type: CideLytHeaderWrapperComponent, selector: "cide-lyt-header-wrapper" }, { kind: "component", type: CideLytSidebarWrapperComponent, selector: "cide-lyt-sidebar-wrapper" }, { kind: "component", type: CideLytSidedrawerWrapperComponent, selector: "cide-lyt-sidedrawer-wrapper" }, { kind: "component", type: CideLytFooterWrapperComponent, selector: "cide-lyt-footer-wrapper" }, { kind: "component", type: CideLytConsoleWrapperComponent, selector: "cide-lyt-console-wrapper" }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: CideLytRequestWrapperComponent, selector: "cide-lyt-request-wrapper" }, { kind: "component", type: TabContentComponent, selector: "cide-lyt-tab-content" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideLytLayoutWrapperComponent, isStandalone: true, selector: "cide-lyt-layout-wrapper", ngImport: i0, template: "<div class=\"tw-w-full tw-table tw-h-screen tw-relative\" id=\"cide-lyt-layout-wrapper\">\n   @if (aiDrawerLoader) {\n      <cide-lyt-lazy-ai-drawer-host></cide-lyt-lazy-ai-drawer-host>\n   } @else if (aiDrawerComponent) {\n      <ng-container [ngComponentOutlet]=\"aiDrawerComponent\"></ng-container>\n   }\n   <!-- We will use here Header  -->\n   <cide-lyt-header-wrapper class=\"tw-table-row tw-h-0\"></cide-lyt-header-wrapper>\n   <!-- we will use here request tabs -->\n   <div class=\"tw-table-row\" id=\"cide-lyt-sidebar-page-wrapper\">\n      <div class=\"cide-lyt-sidebar-page-wrapper tw-h-full  tw-w-screen\" id=\"cide-lyt-sidebar-page-inner-wrapper\">\n         <!-- We will use here Sidebar -->\n         <cide-lyt-sidebar-wrapper id=\"cide-lyt-sidebar-page\"\n            class=\"cide-lyt-sidebar-page-hide\"></cide-lyt-sidebar-wrapper>\n         <!-- We will use here Router Outlet -->\n         <div class=\"cide-lyt-page-wrapper tw-block tw-h-full tw-w-full\" id=\"cide-lyt-page-wrapper\">\n            <cide-lyt-request-wrapper class=\"tw-w-[inherit] tw-h-auto\"></cide-lyt-request-wrapper>\n            <div class=\"cide-lyt-outlet-sidedrawer-wrapper tw-table-row\" id=\"cide-lyt-outlet-sidedrawer-wrapper\">\n               <div class=\"tw-w-full tw-h-full tw-overflow-y-auto cide-scrollbar-width-thin\"\n                  id=\"cide-lyt-outlet-wrapper\">\n                  <cide-lyt-tab-content></cide-lyt-tab-content>\n               </div>\n               <!-- We will use here Side Drawer -->\n               <cide-lyt-sidedrawer-wrapper></cide-lyt-sidedrawer-wrapper>\n            </div>\n         </div>\n      </div>\n   </div>\n   <div class=\"cide-lyt-footer-console-wrapper cide-lyt-footer-console-wrapper-hide tw-relative tw-table-row tw-h-0\"\n      id=\"cide-lyt-footer-console-wrapper\">\n      <!-- We will use here footer -->\n      <cide-lyt-footer-wrapper></cide-lyt-footer-wrapper>\n      <!-- We will use here Console -->\n      <cide-lyt-console-wrapper></cide-lyt-console-wrapper>\n   </div>\n</div>", styles: ["#cide-lyt-layout-wrapper{display:table;width:100%;height:100vh;position:relative;overflow:hidden}#cide-lyt-layout-wrapper>*{display:table-row}#cide-lyt-sidebar-page-wrapper{display:table-row;height:100%}#cide-lyt-page-wrapper{display:block;height:100%;width:100%;overflow:hidden}#cide-lyt-outlet-wrapper{display:block;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}@media screen and (max-width: 768px){#cide-lyt-layout-wrapper{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{display:block;flex-shrink:0;height:auto;min-height:var(--cide-lyt-header-wrapper-height);width:100%}#cide-lyt-sidebar-page-wrapper{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.cide-lyt-sidebar-page-wrapper{display:flex;flex-direction:row;flex:1;min-height:0;width:100%;position:relative;overflow:hidden}#cide-lyt-sidebar-page{display:block;position:fixed;top:var(--cide-lyt-header-wrapper-height);left:0;bottom:0;right:0;z-index:9999;pointer-events:none;transform:none!important;transition:none!important}#cide-lyt-page-wrapper{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;width:100%;overflow:hidden}#cide-lyt-page-wrapper>cide-lyt-request-wrapper{flex-shrink:0;width:100%}#cide-lyt-outlet-sidedrawer-wrapper{display:flex;flex-direction:row;flex:1;min-height:0;overflow:hidden}#cide-lyt-outlet-wrapper{flex:1;min-width:0;min-height:0;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}#cide-lyt-footer-console-wrapper{display:flex;flex-direction:column;flex-shrink:0;height:auto;width:100%;overflow:hidden}#cide-lyt-footer-console-wrapper>cide-lyt-footer-wrapper{display:none;flex-shrink:0;height:var(--cide-lyt-footer-wrapper-height);width:100%}#cide-lyt-footer-console-wrapper>cide-lyt-console-wrapper{flex-shrink:0;height:auto;width:100%}body{overflow-x:hidden;width:100%}@supports (-webkit-touch-callout: none){#cide-lyt-layout-wrapper{height:-webkit-fill-available}}}@media screen and (min-width: 769px) and (max-width: 1024px){#cide-lyt-outlet-wrapper{padding:.75rem}.cide-lyt-sidebar-page-wrapper{max-width:100%}}@media screen and (max-width: 480px){#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{min-height:var(--cide-lyt-header-wrapper-height)}.cide-lyt-page-wrapper{padding:0}#cide-lyt-sidedrawer-wrapper{width:0!important;min-width:0!important;transform:translate(100%)}#cide-lyt-outlet-wrapper{width:100%}#cide-lyt-footer-console-wrapper{flex-direction:column}}@media screen and (max-width: 768px) and (orientation: landscape){#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{min-height:var(--cide-lyt-header-wrapper-height)}#cide-lyt-outlet-wrapper{padding:.5rem}}@media (hover: none) and (pointer: coarse){#cide-lyt-outlet-wrapper{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}#cide-lyt-layout-wrapper{-webkit-user-select:none;-moz-user-select:none;user-select:none}#cide-lyt-outlet-wrapper *{-webkit-user-select:text;-moz-user-select:text;user-select:text}}@media print{#cide-lyt-layout-wrapper{display:block;height:auto}#cide-lyt-sidebar-page-wrapper,#cide-lyt-footer-console-wrapper{display:none}#cide-lyt-outlet-wrapper{overflow:visible;height:auto}}\n"], dependencies: [{ kind: "component", type: CideLytHeaderWrapperComponent, selector: "cide-lyt-header-wrapper" }, { kind: "component", type: CideLytSidebarWrapperComponent, selector: "cide-lyt-sidebar-wrapper" }, { kind: "component", type: CideLytSidedrawerWrapperComponent, selector: "cide-lyt-sidedrawer-wrapper" }, { kind: "component", type: CideLytFooterWrapperComponent, selector: "cide-lyt-footer-wrapper" }, { kind: "component", type: CideLytConsoleWrapperComponent, selector: "cide-lyt-console-wrapper" }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: CideLytRequestWrapperComponent, selector: "cide-lyt-request-wrapper" }, { kind: "component", type: TabContentComponent, selector: "cide-lyt-tab-content" }, { kind: "component", type: CideLytLazyAiDrawerHostComponent, selector: "cide-lyt-lazy-ai-drawer-host" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideLytLayoutWrapperComponent, decorators: [{
             type: Component,
@@ -6634,8 +6745,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         RouterModule,
                         CideLytRequestWrapperComponent,
                         TabContentComponent,
+                        CideLytLazyAiDrawerHostComponent,
                         NgComponentOutlet
-                    ], template: "<div class=\"tw-w-full tw-table tw-h-screen tw-relative\" id=\"cide-lyt-layout-wrapper\">\n   @if (aiDrawerComponent) {\n      <ng-container [ngComponentOutlet]=\"aiDrawerComponent\"></ng-container>\n   }\n   <!-- We will use here Header  -->\n   <cide-lyt-header-wrapper class=\"tw-table-row tw-h-0\"></cide-lyt-header-wrapper>\n   <!-- we will use here request tabs -->\n   <div class=\"tw-table-row\" id=\"cide-lyt-sidebar-page-wrapper\">\n      <div class=\"cide-lyt-sidebar-page-wrapper tw-h-full  tw-w-screen\" id=\"cide-lyt-sidebar-page-inner-wrapper\">\n         <!-- We will use here Sidebar -->\n         <cide-lyt-sidebar-wrapper id=\"cide-lyt-sidebar-page\"\n            class=\"cide-lyt-sidebar-page-hide\"></cide-lyt-sidebar-wrapper>\n         <!-- We will use here Router Outlet -->\n         <div class=\"cide-lyt-page-wrapper tw-block tw-h-full tw-w-full\" id=\"cide-lyt-page-wrapper\">\n            <cide-lyt-request-wrapper class=\"tw-w-[inherit] tw-h-auto\"></cide-lyt-request-wrapper>\n            <div class=\"cide-lyt-outlet-sidedrawer-wrapper tw-table-row\" id=\"cide-lyt-outlet-sidedrawer-wrapper\">\n               <div class=\"tw-w-full tw-h-full tw-overflow-y-auto cide-scrollbar-width-thin\"\n                  id=\"cide-lyt-outlet-wrapper\">\n                  <cide-lyt-tab-content></cide-lyt-tab-content>\n               </div>\n               <!-- We will use here Side Drawer -->\n               <cide-lyt-sidedrawer-wrapper></cide-lyt-sidedrawer-wrapper>\n            </div>\n         </div>\n      </div>\n   </div>\n   <div class=\"cide-lyt-footer-console-wrapper cide-lyt-footer-console-wrapper-hide tw-relative tw-table-row tw-h-0\"\n      id=\"cide-lyt-footer-console-wrapper\">\n      <!-- We will use here footer -->\n      <cide-lyt-footer-wrapper></cide-lyt-footer-wrapper>\n      <!-- We will use here Console -->\n      <cide-lyt-console-wrapper></cide-lyt-console-wrapper>\n   </div>\n</div>", styles: ["#cide-lyt-layout-wrapper{display:table;width:100%;height:100vh;position:relative;overflow:hidden}#cide-lyt-layout-wrapper>*{display:table-row}#cide-lyt-sidebar-page-wrapper{display:table-row;height:100%}#cide-lyt-page-wrapper{display:block;height:100%;width:100%;overflow:hidden}#cide-lyt-outlet-wrapper{display:block;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}@media screen and (max-width: 768px){#cide-lyt-layout-wrapper{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{display:block;flex-shrink:0;height:auto;min-height:var(--cide-lyt-header-wrapper-height);width:100%}#cide-lyt-sidebar-page-wrapper{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.cide-lyt-sidebar-page-wrapper{display:flex;flex-direction:row;flex:1;min-height:0;width:100%;position:relative;overflow:hidden}#cide-lyt-sidebar-page{display:block;position:fixed;top:var(--cide-lyt-header-wrapper-height);left:0;bottom:0;right:0;z-index:9999;pointer-events:none;transform:none!important;transition:none!important}#cide-lyt-page-wrapper{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;width:100%;overflow:hidden}#cide-lyt-page-wrapper>cide-lyt-request-wrapper{flex-shrink:0;width:100%}#cide-lyt-outlet-sidedrawer-wrapper{display:flex;flex-direction:row;flex:1;min-height:0;overflow:hidden}#cide-lyt-outlet-wrapper{flex:1;min-width:0;min-height:0;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}#cide-lyt-footer-console-wrapper{display:flex;flex-direction:column;flex-shrink:0;height:auto;width:100%;overflow:hidden}#cide-lyt-footer-console-wrapper>cide-lyt-footer-wrapper{display:none;flex-shrink:0;height:var(--cide-lyt-footer-wrapper-height);width:100%}#cide-lyt-footer-console-wrapper>cide-lyt-console-wrapper{flex-shrink:0;height:auto;width:100%}body{overflow-x:hidden;width:100%}@supports (-webkit-touch-callout: none){#cide-lyt-layout-wrapper{height:-webkit-fill-available}}}@media screen and (min-width: 769px) and (max-width: 1024px){#cide-lyt-outlet-wrapper{padding:.75rem}.cide-lyt-sidebar-page-wrapper{max-width:100%}}@media screen and (max-width: 480px){#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{min-height:var(--cide-lyt-header-wrapper-height)}.cide-lyt-page-wrapper{padding:0}#cide-lyt-sidedrawer-wrapper{width:0!important;min-width:0!important;transform:translate(100%)}#cide-lyt-outlet-wrapper{width:100%}#cide-lyt-footer-console-wrapper{flex-direction:column}}@media screen and (max-width: 768px) and (orientation: landscape){#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{min-height:var(--cide-lyt-header-wrapper-height)}#cide-lyt-outlet-wrapper{padding:.5rem}}@media (hover: none) and (pointer: coarse){#cide-lyt-outlet-wrapper{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}#cide-lyt-layout-wrapper{-webkit-user-select:none;-moz-user-select:none;user-select:none}#cide-lyt-outlet-wrapper *{-webkit-user-select:text;-moz-user-select:text;user-select:text}}@media print{#cide-lyt-layout-wrapper{display:block;height:auto}#cide-lyt-sidebar-page-wrapper,#cide-lyt-footer-console-wrapper{display:none}#cide-lyt-outlet-wrapper{overflow:visible;height:auto}}\n"] }]
+                    ], template: "<div class=\"tw-w-full tw-table tw-h-screen tw-relative\" id=\"cide-lyt-layout-wrapper\">\n   @if (aiDrawerLoader) {\n      <cide-lyt-lazy-ai-drawer-host></cide-lyt-lazy-ai-drawer-host>\n   } @else if (aiDrawerComponent) {\n      <ng-container [ngComponentOutlet]=\"aiDrawerComponent\"></ng-container>\n   }\n   <!-- We will use here Header  -->\n   <cide-lyt-header-wrapper class=\"tw-table-row tw-h-0\"></cide-lyt-header-wrapper>\n   <!-- we will use here request tabs -->\n   <div class=\"tw-table-row\" id=\"cide-lyt-sidebar-page-wrapper\">\n      <div class=\"cide-lyt-sidebar-page-wrapper tw-h-full  tw-w-screen\" id=\"cide-lyt-sidebar-page-inner-wrapper\">\n         <!-- We will use here Sidebar -->\n         <cide-lyt-sidebar-wrapper id=\"cide-lyt-sidebar-page\"\n            class=\"cide-lyt-sidebar-page-hide\"></cide-lyt-sidebar-wrapper>\n         <!-- We will use here Router Outlet -->\n         <div class=\"cide-lyt-page-wrapper tw-block tw-h-full tw-w-full\" id=\"cide-lyt-page-wrapper\">\n            <cide-lyt-request-wrapper class=\"tw-w-[inherit] tw-h-auto\"></cide-lyt-request-wrapper>\n            <div class=\"cide-lyt-outlet-sidedrawer-wrapper tw-table-row\" id=\"cide-lyt-outlet-sidedrawer-wrapper\">\n               <div class=\"tw-w-full tw-h-full tw-overflow-y-auto cide-scrollbar-width-thin\"\n                  id=\"cide-lyt-outlet-wrapper\">\n                  <cide-lyt-tab-content></cide-lyt-tab-content>\n               </div>\n               <!-- We will use here Side Drawer -->\n               <cide-lyt-sidedrawer-wrapper></cide-lyt-sidedrawer-wrapper>\n            </div>\n         </div>\n      </div>\n   </div>\n   <div class=\"cide-lyt-footer-console-wrapper cide-lyt-footer-console-wrapper-hide tw-relative tw-table-row tw-h-0\"\n      id=\"cide-lyt-footer-console-wrapper\">\n      <!-- We will use here footer -->\n      <cide-lyt-footer-wrapper></cide-lyt-footer-wrapper>\n      <!-- We will use here Console -->\n      <cide-lyt-console-wrapper></cide-lyt-console-wrapper>\n   </div>\n</div>", styles: ["#cide-lyt-layout-wrapper{display:table;width:100%;height:100vh;position:relative;overflow:hidden}#cide-lyt-layout-wrapper>*{display:table-row}#cide-lyt-sidebar-page-wrapper{display:table-row;height:100%}#cide-lyt-page-wrapper{display:block;height:100%;width:100%;overflow:hidden}#cide-lyt-outlet-wrapper{display:block;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}@media screen and (max-width: 768px){#cide-lyt-layout-wrapper{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{display:block;flex-shrink:0;height:auto;min-height:var(--cide-lyt-header-wrapper-height);width:100%}#cide-lyt-sidebar-page-wrapper{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.cide-lyt-sidebar-page-wrapper{display:flex;flex-direction:row;flex:1;min-height:0;width:100%;position:relative;overflow:hidden}#cide-lyt-sidebar-page{display:block;position:fixed;top:var(--cide-lyt-header-wrapper-height);left:0;bottom:0;right:0;z-index:9999;pointer-events:none;transform:none!important;transition:none!important}#cide-lyt-page-wrapper{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;width:100%;overflow:hidden}#cide-lyt-page-wrapper>cide-lyt-request-wrapper{flex-shrink:0;width:100%}#cide-lyt-outlet-sidedrawer-wrapper{display:flex;flex-direction:row;flex:1;min-height:0;overflow:hidden}#cide-lyt-outlet-wrapper{flex:1;min-width:0;min-height:0;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}#cide-lyt-footer-console-wrapper{display:flex;flex-direction:column;flex-shrink:0;height:auto;width:100%;overflow:hidden}#cide-lyt-footer-console-wrapper>cide-lyt-footer-wrapper{display:none;flex-shrink:0;height:var(--cide-lyt-footer-wrapper-height);width:100%}#cide-lyt-footer-console-wrapper>cide-lyt-console-wrapper{flex-shrink:0;height:auto;width:100%}body{overflow-x:hidden;width:100%}@supports (-webkit-touch-callout: none){#cide-lyt-layout-wrapper{height:-webkit-fill-available}}}@media screen and (min-width: 769px) and (max-width: 1024px){#cide-lyt-outlet-wrapper{padding:.75rem}.cide-lyt-sidebar-page-wrapper{max-width:100%}}@media screen and (max-width: 480px){#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{min-height:var(--cide-lyt-header-wrapper-height)}.cide-lyt-page-wrapper{padding:0}#cide-lyt-sidedrawer-wrapper{width:0!important;min-width:0!important;transform:translate(100%)}#cide-lyt-outlet-wrapper{width:100%}#cide-lyt-footer-console-wrapper{flex-direction:column}}@media screen and (max-width: 768px) and (orientation: landscape){#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{min-height:var(--cide-lyt-header-wrapper-height)}#cide-lyt-outlet-wrapper{padding:.5rem}}@media (hover: none) and (pointer: coarse){#cide-lyt-outlet-wrapper{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}#cide-lyt-layout-wrapper{-webkit-user-select:none;-moz-user-select:none;user-select:none}#cide-lyt-outlet-wrapper *{-webkit-user-select:text;-moz-user-select:text;user-select:text}}@media print{#cide-lyt-layout-wrapper{display:block;height:auto}#cide-lyt-sidebar-page-wrapper,#cide-lyt-footer-console-wrapper{display:none}#cide-lyt-outlet-wrapper{overflow:visible;height:auto}}\n"] }]
         }], ctorParameters: () => [] });
 
 class CloudIdeLayoutComponent {
@@ -7313,7 +7425,7 @@ const layoutControlPannelChildRoutes = [{
     },
     {
         path: "home",
-        loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-FU-NK-DL.mjs').then(c => c.CideLytHomeWrapperComponent),
+        loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-B-r-6PB0.mjs').then(c => c.CideLytHomeWrapperComponent),
         canActivate: [authGuard],
         data: {
             sypg_page_code: "cide_lyt_home" // Used by RequestService to fetch tab properties
@@ -7321,7 +7433,7 @@ const layoutControlPannelChildRoutes = [{
     },
     {
         path: "dashboard-manager",
-        loadComponent: () => import('./cloud-ide-layout-dashboard-manager.component-hb9Psx-5.mjs').then(c => c.DashboardManagerComponent),
+        loadComponent: () => import('./cloud-ide-layout-dashboard-manager.component-BG1xP557.mjs').then(c => c.DashboardManagerComponent),
         canActivate: [authGuard],
         data: {
             sypg_page_code: "cide_lyt_dashboard_manager"
@@ -7329,7 +7441,7 @@ const layoutControlPannelChildRoutes = [{
     },
     {
         path: "api-endpoint-manager",
-        loadComponent: () => import('./cloud-ide-layout-api-endpoint-manager.component-BMHh1Vnw.mjs').then(c => c.ApiEndpointManagerComponent),
+        loadComponent: () => import('./cloud-ide-layout-api-endpoint-manager.component-C8vamgHJ.mjs').then(c => c.ApiEndpointManagerComponent),
         canActivate: [authGuard],
         data: {
             sypg_page_code: "cide_lyt_api_endpoint_manager"
@@ -9155,4 +9267,4 @@ var floatingEntitySelection_component = /*#__PURE__*/Object.freeze({
  */
 
 export { AppStateHelperService as A, CideLytSharedWrapperComponent as C, ENVIRONMENT_CONFIG as E, NotificationSettingsService as N, RightsService as R, CideLytSidebarService as a, CideLytSidedrawerService as b, CideLytThemeService as c, CloudIdeLayoutService as d, CloudIdeLayoutComponent as e, CideLytSharedService as f, ComponentContextService as g, layoutControlPannelChildRoutes as h, CustomRouteReuseStrategy as i, CideLytRequestService as j, AppStateService as k, layoutRoutes as l, CideLytUserStatusService as m, CacheManagerService as n, CideLytFileManagerService as o, processThemeVariable as p, CideLytFloatingEntityRightsSharingComponent as q, CideLytFloatingEntityRightsSharingService as r, setCSSVariable as s, themeFactory as t, CideLytFloatingEntitySelectionComponent as u, CideLytFloatingEntitySelectionService as v };
-//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-DNrjjlPZ.mjs.map
+//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-Do7pXglf.mjs.map