cloud-ide-layout 1.0.106 → 1.0.107

package/fesm2022/{cloud-ide-layout-cloud-ide-layout-DLvP5juv.mjs → cloud-ide-layout-cloud-ide-layout-BaeUxU6C.mjs}

@@ -1268,7 +1268,7 @@ class CideLytFloatingEntitySelectionService {
         }
         try {
             // Use relative import to avoid circular dependency
-            const module = await import('./cloud-ide-layout-floating-entity-selection.component-B7-PEUCH.mjs');
+            const module = await import('./cloud-ide-layout-floating-entity-selection.component-D_BFF6Qt.mjs');
             if (module.CideLytFloatingEntitySelectionComponent) {
                 this.containerService.registerComponent('entity-selection-header', module.CideLytFloatingEntitySelectionComponent);
                 console.log('✅ Entity selection component registered successfully');
@@ -1591,7 +1591,7 @@ class NotificationSettingsComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NotificationSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: NotificationSettingsComponent, isStandalone: true, selector: "cide-lyt-notification-settings", ngImport: i0, template: `
-    <div class="tw-p-4 tw-space-y-6 tw-bg-white dark:tw-bg-gray-800">
+    <div class="tw-p-6 tw-space-y-6 tw-bg-white dark:tw-bg-gray-900">
       <!-- Header -->
       <div class="tw-flex tw-items-center tw-gap-2 tw-pb-3 tw-border-b tw-border-gray-200 dark:tw-border-gray-700">
         <div class="tw-w-8 tw-h-8 tw-bg-blue-500 tw-rounded-lg tw-flex tw-items-center tw-justify-center">
@@ -1609,7 +1609,7 @@ class NotificationSettingsComponent {
           <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Sound Settings</h4>
           
           <!-- Enable Sound -->
-          <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+          <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
             <div class="tw-flex tw-items-center tw-gap-2">
               <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">volume_up</cide-ele-icon>
               <div>
@@ -1629,7 +1629,7 @@ class NotificationSettingsComponent {
 
           @if (settingsForm.get('soundEnabled')?.value) {
             <!-- Sound Type -->
-            <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+            <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
               <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">Sound Type</label>
               <cide-ele-select
                 formControlName="soundType"
@@ -1639,7 +1639,7 @@ class NotificationSettingsComponent {
             </div>
 
             <!-- Sound Volume -->
-            <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+            <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
               <div class="tw-flex tw-items-center tw-justify-between tw-mb-2">
                 <label class="tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300">Volume</label>
                 <span class="tw-text-xs tw-text-gray-600 dark:tw-text-gray-400">{{ settingsForm.get('soundVolume')?.value }}%</span>
@@ -1676,7 +1676,7 @@ class NotificationSettingsComponent {
           <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Quiet Hours</h4>
           
           <!-- Enable Quiet Hours -->
-          <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+          <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
             <div class="tw-flex tw-items-center tw-gap-2">
               <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">schedule</cide-ele-icon>
               <div>
@@ -1695,7 +1695,7 @@ class NotificationSettingsComponent {
           </div>
 
           @if (settingsForm.get('quietHoursEnabled')?.value) {
-            <div class="tw-grid tw-grid-cols-2 tw-gap-3 tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+            <div class="tw-grid tw-grid-cols-2 tw-gap-3 tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
               <div>
                 <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">Start Time</label>
                 <cide-ele-input
@@ -1721,7 +1721,7 @@ class NotificationSettingsComponent {
           <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Snooze</h4>
           
           <!-- Enable Snooze -->
-          <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+          <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
             <div class="tw-flex tw-items-center tw-gap-2">
               <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">snooze</cide-ele-icon>
               <div>
@@ -1740,7 +1740,7 @@ class NotificationSettingsComponent {
           </div>
 
           @if (settingsForm.get('snoozeEnabled')?.value) {
-            <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+            <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
               <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">Snooze Duration (minutes)</label>
               <cide-ele-input
                 type="number"
@@ -1758,7 +1758,7 @@ class NotificationSettingsComponent {
           <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Other Settings</h4>
           
           <!-- Desktop Notifications -->
-          <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+          <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
             <div class="tw-flex tw-items-center tw-gap-2">
               <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">desktop_windows</cide-ele-icon>
               <div>
@@ -1812,7 +1812,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideInputComponent,
                         CideSelectComponent
                     ], template: `
-    <div class="tw-p-4 tw-space-y-6 tw-bg-white dark:tw-bg-gray-800">
+    <div class="tw-p-6 tw-space-y-6 tw-bg-white dark:tw-bg-gray-900">
       <!-- Header -->
       <div class="tw-flex tw-items-center tw-gap-2 tw-pb-3 tw-border-b tw-border-gray-200 dark:tw-border-gray-700">
         <div class="tw-w-8 tw-h-8 tw-bg-blue-500 tw-rounded-lg tw-flex tw-items-center tw-justify-center">
@@ -1830,7 +1830,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
           <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Sound Settings</h4>
           
           <!-- Enable Sound -->
-          <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+          <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
             <div class="tw-flex tw-items-center tw-gap-2">
               <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">volume_up</cide-ele-icon>
               <div>
@@ -1850,7 +1850,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
 
           @if (settingsForm.get('soundEnabled')?.value) {
             <!-- Sound Type -->
-            <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+            <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
               <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">Sound Type</label>
               <cide-ele-select
                 formControlName="soundType"
@@ -1860,7 +1860,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
             </div>
 
             <!-- Sound Volume -->
-            <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+            <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
               <div class="tw-flex tw-items-center tw-justify-between tw-mb-2">
                 <label class="tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300">Volume</label>
                 <span class="tw-text-xs tw-text-gray-600 dark:tw-text-gray-400">{{ settingsForm.get('soundVolume')?.value }}%</span>
@@ -1897,7 +1897,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
           <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Quiet Hours</h4>
           
           <!-- Enable Quiet Hours -->
-          <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+          <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
             <div class="tw-flex tw-items-center tw-gap-2">
               <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">schedule</cide-ele-icon>
               <div>
@@ -1916,7 +1916,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
           </div>
 
           @if (settingsForm.get('quietHoursEnabled')?.value) {
-            <div class="tw-grid tw-grid-cols-2 tw-gap-3 tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+            <div class="tw-grid tw-grid-cols-2 tw-gap-3 tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
               <div>
                 <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">Start Time</label>
                 <cide-ele-input
@@ -1942,7 +1942,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
           <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Snooze</h4>
           
           <!-- Enable Snooze -->
-          <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+          <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
             <div class="tw-flex tw-items-center tw-gap-2">
               <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">snooze</cide-ele-icon>
               <div>
@@ -1961,7 +1961,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
           </div>
 
           @if (settingsForm.get('snoozeEnabled')?.value) {
-            <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+            <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
               <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">Snooze Duration (minutes)</label>
               <cide-ele-input
                 type="number"
@@ -1979,7 +1979,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
           <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Other Settings</h4>
           
           <!-- Desktop Notifications -->
-          <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+          <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
             <div class="tw-flex tw-items-center tw-gap-2">
               <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">desktop_windows</cide-ele-icon>
               <div>
@@ -4701,8 +4701,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-ByBbXxXy.mjs').then(m => m.CideLytSidedrawerNotesComponent);
-        this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-NUZatXga.mjs').then(m => m.CideLytDrawerThemeComponent);
+        this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-CIwq4Ei_.mjs').then(m => m.CideLytSidedrawerNotesComponent);
+        this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-D46FeYqz.mjs').then(m => m.CideLytDrawerThemeComponent);
     }
     async loadComponent(configFor) {
         console.log('🔍 SIDEDRAWER - Loading component:', configFor, 'Current tab:', this.currentTabId);
@@ -4873,6 +4873,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
 class ShortcutsPanelComponent {
     keyboardShortcutService = inject(KeyboardShortcutService);
     sanitizer = inject(DomSanitizer);
+    refreshInterval;
     shortcuts = signal([], ...(ngDevMode ? [{ debugName: "shortcuts" }] : []));
     searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
     viewMode = signal('grouped', ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
@@ -4895,6 +4896,16 @@ class ShortcutsPanelComponent {
     }, ...(ngDevMode ? [{ debugName: "categories" }] : []));
     ngOnInit() {
         this.loadShortcuts();
+        // Reload shortcuts periodically to catch dynamically registered shortcuts
+        // This ensures floating container shortcuts and custom shortcuts are shown
+        this.refreshInterval = setInterval(() => {
+            this.loadShortcuts();
+        }, 3000); // Reload every 3 seconds
+    }
+    ngOnDestroy() {
+        if (this.refreshInterval) {
+            clearInterval(this.refreshInterval);
+        }
     }
     /**
      * Load all shortcuts from services
@@ -4922,16 +4933,50 @@ class ShortcutsPanelComponent {
      */
     convertToDisplay(shortcut) {
         const extended = shortcut;
+        // Auto-detect category based on shortcut ID
+        const autoCategory = this.detectCategory(shortcut.id);
         return {
             id: shortcut.id,
-            title: extended.title || shortcut.description || shortcut.id,
+            title: extended.title || shortcut.description || this.formatTitleFromId(shortcut.id),
             description: shortcut.description,
             keyCombination: this.formatKeyCombination(shortcut),
-            category: extended.category || 'general',
+            category: extended.category || autoCategory,
             isUserDefined: extended.isUserDefined || false,
             featuredHTML: extended.featuredHTML
         };
     }
+    /**
+     * Detect category from shortcut ID
+     */
+    detectCategory(shortcutId) {
+        const id = shortcutId.toLowerCase();
+        if (id.startsWith('floating-container-')) {
+            return 'Floating Containers';
+        }
+        if (id.startsWith('app-') || id.includes('sidebar') || id.includes('theme') || id.includes('settings')) {
+            return 'Application';
+        }
+        if (id.includes('navigation') || id.includes('navigate')) {
+            return 'Navigation';
+        }
+        if (id.includes('edit') || id.includes('save') || id.includes('delete')) {
+            return 'Editing';
+        }
+        if (id.includes('view') || id.includes('toggle') || id.includes('show') || id.includes('hide')) {
+            return 'View';
+        }
+        return 'General';
+    }
+    /**
+     * Format title from shortcut ID
+     */
+    formatTitleFromId(id) {
+        // Convert kebab-case to Title Case
+        return id
+            .split('-')
+            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ');
+    }
     /**
      * Format key combination string
      */
@@ -4983,8 +5028,18 @@ class ShortcutsPanelComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ShortcutsPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: ShortcutsPanelComponent, isStandalone: true, selector: "cide-lyt-shortcuts-panel", ngImport: i0, template: `
     <div class="tw-p-6 tw-space-y-4 tw-bg-white dark:tw-bg-gray-900">
-      <!-- View Toggle -->
-      <div class="tw-flex tw-items-center tw-justify-end tw-mb-4">
+      <!-- View Toggle and Refresh -->
+      <div class="tw-flex tw-items-center tw-justify-end tw-gap-2 tw-mb-4">
+        <button
+          type="button"
+          cideEleButton
+          variant="outline"
+          size="sm"
+          (click)="loadShortcuts()"
+          title="Refresh shortcuts">
+          <cide-ele-icon>refresh</cide-ele-icon>
+          Refresh
+        </button>
         <button
           type="button"
           cideEleButton
@@ -5004,7 +5059,7 @@ class ShortcutsPanelComponent {
           [value]="searchQuery()"
           (input)="searchQuery.set($any($event.target).value)"
           placeholder="Search shortcuts..."
-          class="tw-w-full tw-pl-8 tw-pr-3 tw-py-2 tw-text-sm tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-white dark:tw-bg-gray-700 tw-text-gray-900 dark:tw-text-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500">
+          class="tw-w-full tw-pl-8 tw-pr-3 tw-py-2 tw-text-sm tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-white dark:tw-bg-gray-800 tw-text-gray-900 dark:tw-text-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500">
       </div>
 
       <!-- Shortcuts Content -->
@@ -5023,9 +5078,9 @@ class ShortcutsPanelComponent {
               </h4>
               <div class="tw-space-y-2">
                 @for (shortcut of getShortcutsByCategory(category); track shortcut.id) {
-                  <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-600 hover:tw-border-blue-500 dark:hover:tw-border-blue-400 tw-transition-colors">
+                  <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 hover:tw-border-blue-500 dark:hover:tw-border-blue-400 tw-transition-colors">
                     @if (shortcut.featuredHTML) {
-                      <div class="tw-mb-2 tw-p-2 tw-bg-white dark:tw-bg-gray-800 tw-rounded tw-border tw-border-gray-200 dark:tw-border-gray-600">
+                      <div class="tw-mb-2 tw-p-2 tw-bg-white dark:tw-bg-gray-800 tw-rounded tw-border tw-border-gray-200 dark:tw-border-gray-700">
                         <div [innerHTML]="sanitizeHTML(shortcut.featuredHTML)"></div>
                       </div>
                     }
@@ -5063,9 +5118,9 @@ class ShortcutsPanelComponent {
           <!-- List View -->
           <div class="tw-space-y-2">
             @for (shortcut of filteredShortcuts(); track shortcut.id) {
-              <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-600 hover:tw-border-blue-500 dark:hover:tw-border-blue-400 tw-transition-colors">
+              <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 hover:tw-border-blue-500 dark:hover:tw-border-blue-400 tw-transition-colors">
                 @if (shortcut.featuredHTML) {
-                  <div class="tw-mb-2 tw-p-2 tw-bg-white dark:tw-bg-gray-800 tw-rounded tw-border tw-border-gray-200 dark:tw-border-gray-600">
+                  <div class="tw-mb-2 tw-p-2 tw-bg-white dark:tw-bg-gray-800 tw-rounded tw-border tw-border-gray-200 dark:tw-border-gray-700">
                     <div [innerHTML]="sanitizeHTML(shortcut.featuredHTML)"></div>
                   </div>
                 }
@@ -5111,8 +5166,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
             type: Component,
             args: [{ selector: 'cide-lyt-shortcuts-panel', standalone: true, imports: [CommonModule, FormsModule, CideIconComponent, CideEleButtonComponent], template: `
     <div class="tw-p-6 tw-space-y-4 tw-bg-white dark:tw-bg-gray-900">
-      <!-- View Toggle -->
-      <div class="tw-flex tw-items-center tw-justify-end tw-mb-4">
+      <!-- View Toggle and Refresh -->
+      <div class="tw-flex tw-items-center tw-justify-end tw-gap-2 tw-mb-4">
+        <button
+          type="button"
+          cideEleButton
+          variant="outline"
+          size="sm"
+          (click)="loadShortcuts()"
+          title="Refresh shortcuts">
+          <cide-ele-icon>refresh</cide-ele-icon>
+          Refresh
+        </button>
         <button
           type="button"
           cideEleButton
@@ -5132,7 +5197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
           [value]="searchQuery()"
           (input)="searchQuery.set($any($event.target).value)"
           placeholder="Search shortcuts..."
-          class="tw-w-full tw-pl-8 tw-pr-3 tw-py-2 tw-text-sm tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-white dark:tw-bg-gray-700 tw-text-gray-900 dark:tw-text-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500">
+          class="tw-w-full tw-pl-8 tw-pr-3 tw-py-2 tw-text-sm tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-white dark:tw-bg-gray-800 tw-text-gray-900 dark:tw-text-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500">
       </div>
 
       <!-- Shortcuts Content -->
@@ -5151,9 +5216,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
               </h4>
               <div class="tw-space-y-2">
                 @for (shortcut of getShortcutsByCategory(category); track shortcut.id) {
-                  <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-600 hover:tw-border-blue-500 dark:hover:tw-border-blue-400 tw-transition-colors">
+                  <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 hover:tw-border-blue-500 dark:hover:tw-border-blue-400 tw-transition-colors">
                     @if (shortcut.featuredHTML) {
-                      <div class="tw-mb-2 tw-p-2 tw-bg-white dark:tw-bg-gray-800 tw-rounded tw-border tw-border-gray-200 dark:tw-border-gray-600">
+                      <div class="tw-mb-2 tw-p-2 tw-bg-white dark:tw-bg-gray-800 tw-rounded tw-border tw-border-gray-200 dark:tw-border-gray-700">
                         <div [innerHTML]="sanitizeHTML(shortcut.featuredHTML)"></div>
                       </div>
                     }
@@ -5191,9 +5256,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
           <!-- List View -->
           <div class="tw-space-y-2">
             @for (shortcut of filteredShortcuts(); track shortcut.id) {
-              <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-600 hover:tw-border-blue-500 dark:hover:tw-border-blue-400 tw-transition-colors">
+              <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 hover:tw-border-blue-500 dark:hover:tw-border-blue-400 tw-transition-colors">
                 @if (shortcut.featuredHTML) {
-                  <div class="tw-mb-2 tw-p-2 tw-bg-white dark:tw-bg-gray-800 tw-rounded tw-border tw-border-gray-200 dark:tw-border-gray-600">
+                  <div class="tw-mb-2 tw-p-2 tw-bg-white dark:tw-bg-gray-800 tw-rounded tw-border tw-border-gray-200 dark:tw-border-gray-700">
                     <div [innerHTML]="sanitizeHTML(shortcut.featuredHTML)"></div>
                   </div>
                 }
@@ -5869,7 +5934,7 @@ const layoutControlPannelChildRoutes = [{
     },
     {
         path: "home",
-        loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-DkZyDgER.mjs').then(c => c.CideLytHomeWrapperComponent),
+        loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-C61ybzgc.mjs').then(c => c.CideLytHomeWrapperComponent),
         canActivate: [authGuard],
         data: {
             reuseTab: true, // For CustomRouteReuseStrategy
@@ -7437,4 +7502,4 @@ var floatingEntityRightsSharing_component = /*#__PURE__*/Object.freeze({
  */
 
 export { AppStateHelperService as A, CideLytSharedWrapperComponent as C, ENVIRONMENT_CONFIG as E, NotificationSettingsService as N, CideLytSidebarService as a, CideLytRequestService as b, CideLytSidedrawerService as c, CideLytThemeService as d, AppStateService as e, CloudIdeLayoutService as f, CloudIdeLayoutComponent as g, CideLytSharedService as h, layoutControlPannelChildRoutes as i, CustomRouteReuseStrategy as j, CideLytUserStatusService as k, layoutRoutes as l, CacheManagerService as m, CideLytFileManagerService as n, CideLytFloatingEntityRightsSharingComponent as o, processThemeVariable as p, CideLytFloatingEntityRightsSharingService as q, setCSSVariable as s, themeFactory as t };
-//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-DLvP5juv.mjs.map
+//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-BaeUxU6C.mjs.map