@memberjunction/ng-file-storage 6.2.0-edge.0 → 6.2.0-edge.1

package/dist/lib/file-browser/file-grid.component.js

@@ -11,7 +11,7 @@ import * as i4 from "@memberjunction/ng-ui-components";
 const _forTrack0 = ($index, $item) => $item.path;
 const _forTrack1 = ($index, $item) => $item.account.ID;
 const _forTrack2 = ($index, $item) => $item.accountID;
-const _forTrack3 = ($index, $item) => $item.key;
+const _forTrack3 = ($index, $item) => $item.Key;
 function FileGridComponent_Conditional_1_For_10_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 43);
     i0.ɵɵtext(1, "/");
@@ -195,7 +195,7 @@ function FileGridComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate2("", ctx_r1.selectedItems.length, " item", ctx_r1.selectedItems.length === 1 ? "" : "s", " selected");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.selectedItems.length === 1 && ((tmp_3_0 = ctx_r1.getSelectedItem()) == null ? null : tmp_3_0.type) === "file" ? 7 : -1);
+    i0.ɵɵconditional(ctx_r1.selectedItems.length === 1 && ((tmp_3_0 = ctx_r1.getSelectedItem()) == null ? null : tmp_3_0.Type) === "file" ? 7 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.selectedItems.length === 1 ? 8 : -1);
 } }
@@ -341,13 +341,13 @@ function FileGridComponent_Conditional_3_Conditional_22_Template(rf, ctx) { if (
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r1.multiProviderSearchResults.totalResultsReturned);
+    i0.ɵɵtextInterpolate(ctx_r1.multiProviderSearchResults.TotalResultsReturned);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" result", ctx_r1.multiProviderSearchResults.totalResultsReturned === 1 ? "" : "s", " found ");
+    i0.ɵɵtextInterpolate1(" result", ctx_r1.multiProviderSearchResults.TotalResultsReturned === 1 ? "" : "s", " found ");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate2(" (", ctx_r1.multiProviderSearchResults.successfulAccounts, " account", ctx_r1.multiProviderSearchResults.successfulAccounts === 1 ? "" : "s", " searched) ");
+    i0.ɵɵtextInterpolate2(" (", ctx_r1.multiProviderSearchResults.SuccessfulAccounts, " account", ctx_r1.multiProviderSearchResults.SuccessfulAccounts === 1 ? "" : "s", " searched) ");
     i0.ɵɵadvance(5);
-    i0.ɵɵrepeater(ctx_r1.multiProviderSearchResults.accountResults);
+    i0.ɵɵrepeater(ctx_r1.multiProviderSearchResults.AccountResults);
 } }
 function FileGridComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
@@ -447,12 +447,12 @@ function FileGridComponent_Conditional_6_For_2_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const item_r19 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("selected", ctx_r1.selectedItems.includes(item_r19.key));
+    i0.ɵɵclassProp("selected", ctx_r1.selectedItems.includes(item_r19.Key));
     i0.ɵɵproperty("title", item_r19.name);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("checked", ctx_r1.selectedItems.includes(item_r19.key));
+    i0.ɵɵproperty("checked", ctx_r1.selectedItems.includes(item_r19.Key));
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(item_r19.type === "file" ? 5 : -1);
+    i0.ɵɵconditional(item_r19.Type === "file" ? 5 : -1);
     i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r1.getItemColorClass(item_r19));
     i0.ɵɵadvance();
@@ -460,9 +460,9 @@ function FileGridComponent_Conditional_6_For_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(item_r19.name);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(item_r19.type === "folder" ? "Folder" : ctx_r1.formatFileSize(item_r19.size));
+    i0.ɵɵtextInterpolate(item_r19.Type === "folder" ? "Folder" : ctx_r1.formatFileSize(item_r19.Size));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.formatDate(item_r19.lastModified));
+    i0.ɵɵtextInterpolate(ctx_r1.formatDate(item_r19.LastModified));
 } }
 function FileGridComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 6);
@@ -516,9 +516,9 @@ function FileGridComponent_Conditional_7_For_24_Template(rf, ctx) { if (rf & 1)
 } if (rf & 2) {
     const item_r23 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("selected", ctx_r1.selectedItems.includes(item_r23.key));
+    i0.ɵɵclassProp("selected", ctx_r1.selectedItems.includes(item_r23.Key));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("checked", ctx_r1.selectedItems.includes(item_r23.key));
+    i0.ɵɵproperty("checked", ctx_r1.selectedItems.includes(item_r23.Key));
     i0.ɵɵadvance(3);
     i0.ɵɵclassMap(ctx_r1.getItemColorClass(item_r23));
     i0.ɵɵadvance();
@@ -530,11 +530,11 @@ function FileGridComponent_Conditional_7_For_24_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r1.getFileType(item_r23));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(item_r23.type === "folder" ? "\u2014" : ctx_r1.formatFileSize(item_r23.size));
+    i0.ɵɵtextInterpolate(item_r23.Type === "folder" ? "\u2014" : ctx_r1.formatFileSize(item_r23.Size));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r1.formatDate(item_r23.lastModified));
+    i0.ɵɵtextInterpolate(ctx_r1.formatDate(item_r23.LastModified));
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(item_r23.type === "file" ? 20 : -1);
+    i0.ɵɵconditional(item_r23.Type === "file" ? 20 : -1);
 } }
 function FileGridComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
@@ -775,7 +775,7 @@ function FileGridComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r1.previewItem.name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate2("", ctx_r1.formatFileSize(ctx_r1.previewItem.size), " \u2022 ", ctx_r1.formatDate(ctx_r1.previewItem.lastModified));
+    i0.ɵɵtextInterpolate2("", ctx_r1.formatFileSize(ctx_r1.previewItem.Size), " \u2022 ", ctx_r1.formatDate(ctx_r1.previewItem.LastModified));
     i0.ɵɵadvance(9);
     i0.ɵɵconditional(ctx_r1.isLoadingPreview ? 19 : ctx_r1.previewUrl ? 20 : 21);
 } }
@@ -871,11 +871,11 @@ function FileGridComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1("Delete ", ctx_r1.itemToDelete.type === "folder" ? "Folder" : "File", "?");
+    i0.ɵɵtextInterpolate1("Delete ", ctx_r1.itemToDelete.Type === "folder" ? "Folder" : "File", "?");
     i0.ɵɵadvance(7);
     i0.ɵɵtextInterpolate(ctx_r1.itemToDelete.name);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.itemToDelete.type === "folder" ? 13 : -1);
+    i0.ɵɵconditional(ctx_r1.itemToDelete.Type === "folder" ? 13 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", ctx_r1.isDeleting);
     i0.ɵɵadvance(2);
@@ -921,7 +921,7 @@ function FileGridComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1("Rename ", ctx_r1.itemToRename.type === "folder" ? "Folder" : "File");
+    i0.ɵɵtextInterpolate1("Rename ", ctx_r1.itemToRename.Type === "folder" ? "Folder" : "File");
     i0.ɵɵadvance(6);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.newItemName);
     i0.ɵɵproperty("disabled", ctx_r1.isRenaming);
@@ -975,7 +975,7 @@ function FileGridComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1("Copy ", ctx_r1.itemToCopy.type === "folder" ? "Folder" : "File");
+    i0.ɵɵtextInterpolate1("Copy ", ctx_r1.itemToCopy.Type === "folder" ? "Folder" : "File");
     i0.ɵɵadvance(7);
     i0.ɵɵtextInterpolate(ctx_r1.itemToCopy.name);
     i0.ɵɵadvance(3);
@@ -1031,7 +1031,7 @@ function FileGridComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1("Move ", ctx_r1.itemToMove.type === "folder" ? "Folder" : "File");
+    i0.ɵɵtextInterpolate1("Move ", ctx_r1.itemToMove.Type === "folder" ? "Folder" : "File");
     i0.ɵɵadvance(7);
     i0.ɵɵtextInterpolate(ctx_r1.itemToMove.name);
     i0.ɵɵadvance(3);
@@ -1160,28 +1160,76 @@ export class FileGridComponent {
     /**
      * The storage account to list files from (includes provider details)
      */
-    account = null;
+    Account = null;
+    /** @deprecated Use {@link Account}. */
+    set account(value) {
+        this.Account = value;
+    }
+    /** @deprecated Use {@link Account}. */
+    get account() {
+        return this.Account;
+    }
     /**
      * The current folder path to display
      */
-    folderPath = '';
+    FolderPath = '';
+    /** @deprecated Use {@link FolderPath}. */
+    set folderPath(value) {
+        this.FolderPath = value;
+    }
+    /** @deprecated Use {@link FolderPath}. */
+    get folderPath() {
+        return this.FolderPath;
+    }
     /**
      * Emits when a folder is double-clicked for navigation
      */
-    folderNavigate = new EventEmitter();
+    FolderNavigate = new EventEmitter();
+    /**
+     * @deprecated Use {@link FolderNavigate}.
+     *
+     * The same emitter under the old binding name, so a template still binding
+     * (folderNavigate) keeps working. Must stay AFTER FolderNavigate: class fields
+     * initialise in order, and the other way round this captures undefined.
+     */
+    folderNavigate = this.FolderNavigate;
     /**
      * Emits when the folder structure has changed (e.g., new folder created)
      * This signals that the folder tree should refresh
      */
-    folderStructureChanged = new EventEmitter();
+    FolderStructureChanged = new EventEmitter();
+    /**
+     * @deprecated Use {@link FolderStructureChanged}.
+     *
+     * The same emitter under the old binding name, so a template still binding
+     * (folderStructureChanged) keeps working. Must stay AFTER FolderStructureChanged: class fields
+     * initialise in order, and the other way round this captures undefined.
+     */
+    folderStructureChanged = this.FolderStructureChanged;
     /**
      * List of files and folders in the current directory
      */
-    items = [];
+    Items = [];
+    /** @deprecated Use {@link Items}. */
+    get items() {
+        return this.Items;
+    }
+    /** @deprecated Use {@link Items}. */
+    set items(value) {
+        this.Items = value;
+    }
     /**
      * Currently selected item keys in the grid (Kendo stores keys, not full objects)
      */
-    selectedItems = [];
+    SelectedItems = [];
+    /** @deprecated Use {@link SelectedItems}. */
+    get selectedItems() {
+        return this.SelectedItems;
+    }
+    /** @deprecated Use {@link SelectedItems}. */
+    set selectedItems(value) {
+        this.SelectedItems = value;
+    }
     cdr = inject(ChangeDetectorRef);
     /**
      * Loading state indicator
@@ -1194,94 +1242,438 @@ export class FileGridComponent {
     /**
      * View mode: 'grid' or 'list'
      */
-    viewMode = 'list';
+    ViewMode = 'list';
+    /** @deprecated Use {@link ViewMode}. */
+    get viewMode() {
+        return this.ViewMode;
+    }
+    /** @deprecated Use {@link ViewMode}. */
+    set viewMode(value) {
+        this.ViewMode = value;
+    }
     /**
      * Sort configuration for the grid
      */
-    sort = [
+    Sort = [
         { field: 'name', dir: 'asc' }
     ];
+    /** @deprecated Use {@link Sort}. */
+    get sort() {
+        return this.Sort;
+    }
+    /** @deprecated Use {@link Sort}. */
+    set sort(value) {
+        this.Sort = value;
+    }
     /**
      * Search query for filtering files/folders
      */
-    searchQuery = '';
+    SearchQuery = '';
+    /** @deprecated Use {@link SearchQuery}. */
+    get searchQuery() {
+        return this.SearchQuery;
+    }
+    /** @deprecated Use {@link SearchQuery}. */
+    set searchQuery(value) {
+        this.SearchQuery = value;
+    }
     /**
      * File type filter ('all', 'files', 'folders')
      */
-    fileTypeFilter = 'all';
+    FileTypeFilter = 'all';
+    /** @deprecated Use {@link FileTypeFilter}. */
+    get fileTypeFilter() {
+        return this.FileTypeFilter;
+    }
+    /** @deprecated Use {@link FileTypeFilter}. */
+    set fileTypeFilter(value) {
+        this.FileTypeFilter = value;
+    }
     /**
      * Filtered list of items based on search and filter criteria
      */
-    filteredItems = [];
+    FilteredItems = [];
+    /** @deprecated Use {@link FilteredItems}. */
+    get filteredItems() {
+        return this.FilteredItems;
+    }
+    /** @deprecated Use {@link FilteredItems}. */
+    set filteredItems(value) {
+        this.FilteredItems = value;
+    }
     /**
      * Drag-and-drop state
      */
-    isDragging = false;
+    IsDragging = false;
+    /** @deprecated Use {@link IsDragging}. */
+    get isDragging() {
+        return this.IsDragging;
+    }
+    /** @deprecated Use {@link IsDragging}. */
+    set isDragging(value) {
+        this.IsDragging = value;
+    }
     /**
      * Upload progress state
      */
-    isUploading = false;
-    uploadProgress = 0;
-    uploadingFileName = '';
+    IsUploading = false;
+    /** @deprecated Use {@link IsUploading}. */
+    get isUploading() {
+        return this.IsUploading;
+    }
+    /** @deprecated Use {@link IsUploading}. */
+    set isUploading(value) {
+        this.IsUploading = value;
+    }
+    UploadProgress = 0;
+    /** @deprecated Use {@link UploadProgress}. */
+    get uploadProgress() {
+        return this.UploadProgress;
+    }
+    /** @deprecated Use {@link UploadProgress}. */
+    set uploadProgress(value) {
+        this.UploadProgress = value;
+    }
+    UploadingFileName = '';
+    /** @deprecated Use {@link UploadingFileName}. */
+    get uploadingFileName() {
+        return this.UploadingFileName;
+    }
+    /** @deprecated Use {@link UploadingFileName}. */
+    set uploadingFileName(value) {
+        this.UploadingFileName = value;
+    }
     /**
      * New folder dialog state
      */
-    showNewFolderDialog = false;
-    newFolderName = '';
-    isCreatingFolder = false;
+    ShowNewFolderDialog = false;
+    /** @deprecated Use {@link ShowNewFolderDialog}. */
+    get showNewFolderDialog() {
+        return this.ShowNewFolderDialog;
+    }
+    /** @deprecated Use {@link ShowNewFolderDialog}. */
+    set showNewFolderDialog(value) {
+        this.ShowNewFolderDialog = value;
+    }
+    NewFolderName = '';
+    /** @deprecated Use {@link NewFolderName}. */
+    get newFolderName() {
+        return this.NewFolderName;
+    }
+    /** @deprecated Use {@link NewFolderName}. */
+    set newFolderName(value) {
+        this.NewFolderName = value;
+    }
+    IsCreatingFolder = false;
+    /** @deprecated Use {@link IsCreatingFolder}. */
+    get isCreatingFolder() {
+        return this.IsCreatingFolder;
+    }
+    /** @deprecated Use {@link IsCreatingFolder}. */
+    set isCreatingFolder(value) {
+        this.IsCreatingFolder = value;
+    }
     /**
      * Delete confirmation dialog state
      */
     showDeleteDialog = false;
-    itemToDelete = null;
-    isDeleting = false;
+    ItemToDelete = null;
+    /** @deprecated Use {@link ItemToDelete}. */
+    get itemToDelete() {
+        return this.ItemToDelete;
+    }
+    /** @deprecated Use {@link ItemToDelete}. */
+    set itemToDelete(value) {
+        this.ItemToDelete = value;
+    }
+    IsDeleting = false;
+    /** @deprecated Use {@link IsDeleting}. */
+    get isDeleting() {
+        return this.IsDeleting;
+    }
+    /** @deprecated Use {@link IsDeleting}. */
+    set isDeleting(value) {
+        this.IsDeleting = value;
+    }
     /**
      * Rename dialog state
      */
-    showRenameDialog = false;
-    itemToRename = null;
-    newItemName = '';
-    isRenaming = false;
+    ShowRenameDialog = false;
+    /** @deprecated Use {@link ShowRenameDialog}. */
+    get showRenameDialog() {
+        return this.ShowRenameDialog;
+    }
+    /** @deprecated Use {@link ShowRenameDialog}. */
+    set showRenameDialog(value) {
+        this.ShowRenameDialog = value;
+    }
+    ItemToRename = null;
+    /** @deprecated Use {@link ItemToRename}. */
+    get itemToRename() {
+        return this.ItemToRename;
+    }
+    /** @deprecated Use {@link ItemToRename}. */
+    set itemToRename(value) {
+        this.ItemToRename = value;
+    }
+    NewItemName = '';
+    /** @deprecated Use {@link NewItemName}. */
+    get newItemName() {
+        return this.NewItemName;
+    }
+    /** @deprecated Use {@link NewItemName}. */
+    set newItemName(value) {
+        this.NewItemName = value;
+    }
+    IsRenaming = false;
+    /** @deprecated Use {@link IsRenaming}. */
+    get isRenaming() {
+        return this.IsRenaming;
+    }
+    /** @deprecated Use {@link IsRenaming}. */
+    set isRenaming(value) {
+        this.IsRenaming = value;
+    }
     /**
      * Copy dialog state
      */
-    showCopyDialog = false;
-    itemToCopy = null;
-    copyDestinationPath = '';
-    isCopying = false;
+    ShowCopyDialog = false;
+    /** @deprecated Use {@link ShowCopyDialog}. */
+    get showCopyDialog() {
+        return this.ShowCopyDialog;
+    }
+    /** @deprecated Use {@link ShowCopyDialog}. */
+    set showCopyDialog(value) {
+        this.ShowCopyDialog = value;
+    }
+    ItemToCopy = null;
+    /** @deprecated Use {@link ItemToCopy}. */
+    get itemToCopy() {
+        return this.ItemToCopy;
+    }
+    /** @deprecated Use {@link ItemToCopy}. */
+    set itemToCopy(value) {
+        this.ItemToCopy = value;
+    }
+    CopyDestinationPath = '';
+    /** @deprecated Use {@link CopyDestinationPath}. */
+    get copyDestinationPath() {
+        return this.CopyDestinationPath;
+    }
+    /** @deprecated Use {@link CopyDestinationPath}. */
+    set copyDestinationPath(value) {
+        this.CopyDestinationPath = value;
+    }
+    IsCopying = false;
+    /** @deprecated Use {@link IsCopying}. */
+    get isCopying() {
+        return this.IsCopying;
+    }
+    /** @deprecated Use {@link IsCopying}. */
+    set isCopying(value) {
+        this.IsCopying = value;
+    }
     /**
      * Move dialog state
      */
-    showMoveDialog = false;
-    itemToMove = null;
-    moveDestinationPath = '';
-    isMoving = false;
+    ShowMoveDialog = false;
+    /** @deprecated Use {@link ShowMoveDialog}. */
+    get showMoveDialog() {
+        return this.ShowMoveDialog;
+    }
+    /** @deprecated Use {@link ShowMoveDialog}. */
+    set showMoveDialog(value) {
+        this.ShowMoveDialog = value;
+    }
+    ItemToMove = null;
+    /** @deprecated Use {@link ItemToMove}. */
+    get itemToMove() {
+        return this.ItemToMove;
+    }
+    /** @deprecated Use {@link ItemToMove}. */
+    set itemToMove(value) {
+        this.ItemToMove = value;
+    }
+    MoveDestinationPath = '';
+    /** @deprecated Use {@link MoveDestinationPath}. */
+    get moveDestinationPath() {
+        return this.MoveDestinationPath;
+    }
+    /** @deprecated Use {@link MoveDestinationPath}. */
+    set moveDestinationPath(value) {
+        this.MoveDestinationPath = value;
+    }
+    IsMoving = false;
+    /** @deprecated Use {@link IsMoving}. */
+    get isMoving() {
+        return this.IsMoving;
+    }
+    /** @deprecated Use {@link IsMoving}. */
+    set isMoving(value) {
+        this.IsMoving = value;
+    }
     /**
      * Copy to provider dialog state
      */
-    showCopyToProviderDialog = false;
-    itemToCopyToProvider = null;
-    availableAccounts = [];
-    selectedDestinationAccounts = new Set();
-    copyToAccountDestinationPath = '';
-    isCopyingToAccount = false;
-    copyToAccountProgress = null;
+    ShowCopyToProviderDialog = false;
+    /** @deprecated Use {@link ShowCopyToProviderDialog}. */
+    get showCopyToProviderDialog() {
+        return this.ShowCopyToProviderDialog;
+    }
+    /** @deprecated Use {@link ShowCopyToProviderDialog}. */
+    set showCopyToProviderDialog(value) {
+        this.ShowCopyToProviderDialog = value;
+    }
+    ItemToCopyToProvider = null;
+    /** @deprecated Use {@link ItemToCopyToProvider}. */
+    get itemToCopyToProvider() {
+        return this.ItemToCopyToProvider;
+    }
+    /** @deprecated Use {@link ItemToCopyToProvider}. */
+    set itemToCopyToProvider(value) {
+        this.ItemToCopyToProvider = value;
+    }
+    AvailableAccounts = [];
+    /** @deprecated Use {@link AvailableAccounts}. */
+    get availableAccounts() {
+        return this.AvailableAccounts;
+    }
+    /** @deprecated Use {@link AvailableAccounts}. */
+    set availableAccounts(value) {
+        this.AvailableAccounts = value;
+    }
+    SelectedDestinationAccounts = new Set();
+    /** @deprecated Use {@link SelectedDestinationAccounts}. */
+    get selectedDestinationAccounts() {
+        return this.SelectedDestinationAccounts;
+    }
+    /** @deprecated Use {@link SelectedDestinationAccounts}. */
+    set selectedDestinationAccounts(value) {
+        this.SelectedDestinationAccounts = value;
+    }
+    CopyToAccountDestinationPath = '';
+    /** @deprecated Use {@link CopyToAccountDestinationPath}. */
+    get copyToAccountDestinationPath() {
+        return this.CopyToAccountDestinationPath;
+    }
+    /** @deprecated Use {@link CopyToAccountDestinationPath}. */
+    set copyToAccountDestinationPath(value) {
+        this.CopyToAccountDestinationPath = value;
+    }
+    IsCopyingToAccount = false;
+    /** @deprecated Use {@link IsCopyingToAccount}. */
+    get isCopyingToAccount() {
+        return this.IsCopyingToAccount;
+    }
+    /** @deprecated Use {@link IsCopyingToAccount}. */
+    set isCopyingToAccount(value) {
+        this.IsCopyingToAccount = value;
+    }
+    CopyToAccountProgress = null;
+    /** @deprecated Use {@link CopyToAccountProgress}. */
+    get copyToAccountProgress() {
+        return this.CopyToAccountProgress;
+    }
+    /** @deprecated Use {@link CopyToAccountProgress}. */
+    set copyToAccountProgress(value) {
+        this.CopyToAccountProgress = value;
+    }
     /**
      * Multi-provider search state
      */
-    isMultiProviderSearchMode = false;
-    multiProviderSearchQuery = '';
-    selectedSearchProviders = new Set();
-    isSearching = false;
-    multiProviderSearchResults = null;
+    IsMultiProviderSearchMode = false;
+    /** @deprecated Use {@link IsMultiProviderSearchMode}. */
+    get isMultiProviderSearchMode() {
+        return this.IsMultiProviderSearchMode;
+    }
+    /** @deprecated Use {@link IsMultiProviderSearchMode}. */
+    set isMultiProviderSearchMode(value) {
+        this.IsMultiProviderSearchMode = value;
+    }
+    MultiProviderSearchQuery = '';
+    /** @deprecated Use {@link MultiProviderSearchQuery}. */
+    get multiProviderSearchQuery() {
+        return this.MultiProviderSearchQuery;
+    }
+    /** @deprecated Use {@link MultiProviderSearchQuery}. */
+    set multiProviderSearchQuery(value) {
+        this.MultiProviderSearchQuery = value;
+    }
+    SelectedSearchProviders = new Set();
+    /** @deprecated Use {@link SelectedSearchProviders}. */
+    get selectedSearchProviders() {
+        return this.SelectedSearchProviders;
+    }
+    /** @deprecated Use {@link SelectedSearchProviders}. */
+    set selectedSearchProviders(value) {
+        this.SelectedSearchProviders = value;
+    }
+    IsSearching = false;
+    /** @deprecated Use {@link IsSearching}. */
+    get isSearching() {
+        return this.IsSearching;
+    }
+    /** @deprecated Use {@link IsSearching}. */
+    set isSearching(value) {
+        this.IsSearching = value;
+    }
+    MultiProviderSearchResults = null;
+    /** @deprecated Use {@link MultiProviderSearchResults}. */
+    get multiProviderSearchResults() {
+        return this.MultiProviderSearchResults;
+    }
+    /** @deprecated Use {@link MultiProviderSearchResults}. */
+    set multiProviderSearchResults(value) {
+        this.MultiProviderSearchResults = value;
+    }
     /**
      * Preview modal state
      */
-    showPreviewModal = false;
-    previewItem = null;
-    previewUrl = null;
-    isLoadingPreview = false;
-    previewMediaType = 'unknown';
+    ShowPreviewModal = false;
+    /** @deprecated Use {@link ShowPreviewModal}. */
+    get showPreviewModal() {
+        return this.ShowPreviewModal;
+    }
+    /** @deprecated Use {@link ShowPreviewModal}. */
+    set showPreviewModal(value) {
+        this.ShowPreviewModal = value;
+    }
+    PreviewItem = null;
+    /** @deprecated Use {@link PreviewItem}. */
+    get previewItem() {
+        return this.PreviewItem;
+    }
+    /** @deprecated Use {@link PreviewItem}. */
+    set previewItem(value) {
+        this.PreviewItem = value;
+    }
+    PreviewUrl = null;
+    /** @deprecated Use {@link PreviewUrl}. */
+    get previewUrl() {
+        return this.PreviewUrl;
+    }
+    /** @deprecated Use {@link PreviewUrl}. */
+    set previewUrl(value) {
+        this.PreviewUrl = value;
+    }
+    IsLoadingPreview = false;
+    /** @deprecated Use {@link IsLoadingPreview}. */
+    get isLoadingPreview() {
+        return this.IsLoadingPreview;
+    }
+    /** @deprecated Use {@link IsLoadingPreview}. */
+    set isLoadingPreview(value) {
+        this.IsLoadingPreview = value;
+    }
+    PreviewMediaType = 'unknown';
+    /** @deprecated Use {@link PreviewMediaType}. */
+    get previewMediaType() {
+        return this.PreviewMediaType;
+    }
+    /** @deprecated Use {@link PreviewMediaType}. */
+    set previewMediaType(value) {
+        this.PreviewMediaType = value;
+    }
     /**
      * GraphQL client for file storage operations
      */
@@ -1306,21 +1698,21 @@ export class FileGridComponent {
      * Loads files and folders from the current path
      */
     async loadItems() {
-        if (!this.account) {
-            this.items = [];
+        if (!this.Account) {
+            this.Items = [];
             return;
         }
-        const previousItemCount = this.items.length;
-        const previousItemNames = this.items.map(i => i.name);
+        const previousItemCount = this.Items.length;
+        const previousItemNames = this.Items.map(i => i.name);
         this.isLoading = true;
         this.cdr.detectChanges();
         this.errorMessage = null;
         try {
-            console.log('[FileGrid] Loading items for account:', this.account.account.ID, 'path:', this.folderPath);
+            console.log('[FileGrid] Loading items for account:', this.Account.account.ID, 'path:', this.FolderPath);
             console.log('[FileGrid] Previous items:', { count: previousItemCount, names: previousItemNames });
-            const listResult = await this.storageClient.ListObjects(this.account.account.ID, this.folderPath || '', '/');
+            const listResult = await this.storageClient.ListObjects(this.Account.account.ID, this.FolderPath || '', '/');
             console.log('[FileGrid] ListObjects result:', listResult);
-            this.items = [];
+            this.Items = [];
             // Add folders from prefixes first (so they appear before files)
             if (listResult.prefixes) {
                 for (const prefix of listResult.prefixes) {
@@ -1330,13 +1722,13 @@ export class FileGridComponent {
                         ? prefix.slice(0, -1).split('/').pop()
                         : prefix.split('/').pop();
                     if (folderName) {
-                        this.items.push({
-                            key: prefix,
+                        this.Items.push({
+                            Key: prefix,
                             name: folderName,
-                            type: 'folder',
-                            size: 0,
-                            lastModified: new Date(),
-                            contentType: 'application/x-directory'
+                            Type: 'folder',
+                            Size: 0,
+                            LastModified: new Date(),
+                            ContentType: 'application/x-directory'
                         });
                     }
                 }
@@ -1348,14 +1740,14 @@ export class FileGridComponent {
                     if (obj.isDirectory) {
                         continue;
                     }
-                    this.items.push({
-                        key: obj.fullPath,
+                    this.Items.push({
+                        Key: obj.fullPath,
                         name: obj.name,
-                        type: 'file',
-                        size: obj.size,
-                        lastModified: obj.lastModified,
-                        contentType: obj.contentType,
-                        etag: obj.etag
+                        Type: 'file',
+                        Size: obj.size,
+                        LastModified: obj.lastModified,
+                        ContentType: obj.contentType,
+                        Etag: obj.etag
                     });
                 }
             }
@@ -1375,46 +1767,58 @@ export class FileGridComponent {
      * Applies search and filter criteria to the items list
      */
     applyFilters() {
-        let filtered = [...this.items];
+        let filtered = [...this.Items];
         // Apply file type filter
-        if (this.fileTypeFilter === 'files') {
-            filtered = filtered.filter(item => item.type === 'file');
+        if (this.FileTypeFilter === 'files') {
+            filtered = filtered.filter(item => item.Type === 'file');
         }
-        else if (this.fileTypeFilter === 'folders') {
-            filtered = filtered.filter(item => item.type === 'folder');
+        else if (this.FileTypeFilter === 'folders') {
+            filtered = filtered.filter(item => item.Type === 'folder');
         }
         // Apply search query
-        if (this.searchQuery.trim()) {
-            const query = this.searchQuery.toLowerCase();
+        if (this.SearchQuery.trim()) {
+            const query = this.SearchQuery.toLowerCase();
             filtered = filtered.filter(item => item.name.toLowerCase().includes(query));
         }
-        this.filteredItems = filtered;
+        this.FilteredItems = filtered;
     }
     /**
      * Handles search query changes
      */
-    onSearchChange(query) {
-        this.searchQuery = query;
+    OnSearchChange(query) {
+        this.SearchQuery = query;
         this.applyFilters();
     }
+    /** @deprecated Use {@link OnSearchChange}. */
+    onSearchChange(query) {
+        return this.OnSearchChange(query);
+    }
     /**
      * Clears the search query
      */
-    clearSearch() {
-        this.searchQuery = '';
+    ClearSearch() {
+        this.SearchQuery = '';
         this.applyFilters();
     }
+    /** @deprecated Use {@link ClearSearch}. */
+    clearSearch() {
+        return this.ClearSearch();
+    }
     /**
      * Handles file type filter changes
      */
-    onFileTypeFilterChange(filterType) {
-        this.fileTypeFilter = filterType;
+    OnFileTypeFilterChange(filterType) {
+        this.FileTypeFilter = filterType;
         this.applyFilters();
     }
+    /** @deprecated Use {@link OnFileTypeFilterChange}. */
+    onFileTypeFilterChange(filterType) {
+        return this.OnFileTypeFilterChange(filterType);
+    }
     /**
      * Formats a file size in bytes to a human-readable string
      */
-    formatFileSize(bytes) {
+    FormatFileSize(bytes) {
         if (bytes === 0)
             return '0 B';
         const k = 1024;
@@ -1422,6 +1826,10 @@ export class FileGridComponent {
         const i = Math.floor(Math.log(bytes) / Math.log(k));
         return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
     }
+    /** @deprecated Use {@link FormatFileSize}. */
+    formatFileSize(bytes) {
+        return this.FormatFileSize(bytes);
+    }
     /**
      * Formats a date to a readable string
      */
@@ -1431,11 +1839,11 @@ export class FileGridComponent {
     /**
      * Gets the icon class for a file or folder
      */
-    getItemIcon(item) {
+    GetItemIcon(item) {
         if (!item || !item.name) {
             return 'fa-solid fa-file';
         }
-        if (item.type === 'folder') {
+        if (item.Type === 'folder') {
             return 'fa-solid fa-folder';
         }
         // Determine file icon based on content type or extension
@@ -1474,68 +1882,84 @@ export class FileGridComponent {
             return 'fa-solid fa-file';
         }
     }
+    /** @deprecated Use {@link GetItemIcon}. */
+    getItemIcon(item) {
+        return this.GetItemIcon(item);
+    }
     /**
      * Handles item selection change (not used - Kendo handles selection internally)
      */
+    OnSelectionChange(selectedKeys) {
+        this.SelectedItems = selectedKeys;
+    }
+    /** @deprecated Use {@link OnSelectionChange}. */
     onSelectionChange(selectedKeys) {
-        this.selectedItems = selectedKeys;
+        return this.OnSelectionChange(selectedKeys);
     }
     /**
      * Handles tile click in grid view for selection
      */
-    onTileClick(item, event) {
+    OnTileClick(item, event) {
         if (event.ctrlKey || event.metaKey) {
             // Multi-select: toggle item key
-            const index = this.selectedItems.indexOf(item.key);
+            const index = this.SelectedItems.indexOf(item.Key);
             if (index >= 0) {
-                this.selectedItems.splice(index, 1);
+                this.SelectedItems.splice(index, 1);
             }
             else {
-                this.selectedItems.push(item.key);
+                this.SelectedItems.push(item.Key);
             }
         }
-        else if (event.shiftKey && this.selectedItems.length > 0) {
+        else if (event.shiftKey && this.SelectedItems.length > 0) {
             // Range select: select from last selected to current
-            const lastSelectedKey = this.selectedItems[this.selectedItems.length - 1];
-            const lastSelected = this.items.find(i => i.key === lastSelectedKey);
+            const lastSelectedKey = this.SelectedItems[this.SelectedItems.length - 1];
+            const lastSelected = this.Items.find(i => i.Key === lastSelectedKey);
             if (lastSelected) {
-                const lastIndex = this.items.indexOf(lastSelected);
-                const currentIndex = this.items.indexOf(item);
+                const lastIndex = this.Items.indexOf(lastSelected);
+                const currentIndex = this.Items.indexOf(item);
                 const start = Math.min(lastIndex, currentIndex);
                 const end = Math.max(lastIndex, currentIndex);
-                this.selectedItems = this.items.slice(start, end + 1).map(i => i.key);
+                this.SelectedItems = this.Items.slice(start, end + 1).map(i => i.Key);
             }
         }
         else {
             // Single select: replace selection
-            this.selectedItems = [item.key];
+            this.SelectedItems = [item.Key];
         }
     }
+    /** @deprecated Use {@link OnTileClick}. */
+    onTileClick(item, event) {
+        return this.OnTileClick(item, event);
+    }
     /**
      * Handles double-click on an item
      * For folders, navigate into them. For files, open in-browser preview.
      */
-    onItemDoubleClick(item) {
-        if (item.type === 'folder') {
+    OnItemDoubleClick(item) {
+        if (item.Type === 'folder') {
             // Navigate into folder by emitting the folder path
-            console.log('[FileGrid] Navigating to folder:', item.key);
-            this.folderNavigate.emit(item.key);
+            console.log('[FileGrid] Navigating to folder:', item.Key);
+            this.FolderNavigate.emit(item.Key);
         }
         else {
             // Open in-browser preview
-            this.openPreview(item);
+            this.OpenPreview(item);
         }
     }
+    /** @deprecated Use {@link OnItemDoubleClick}. */
+    onItemDoubleClick(item) {
+        return this.OnItemDoubleClick(item);
+    }
     /**
      * Downloads a file by creating a pre-authenticated download URL
      */
-    async downloadFile(item) {
-        if (!this.account) {
+    async DownloadFile(item) {
+        if (!this.Account) {
             return;
         }
         try {
-            console.log('[FileGrid] Downloading file:', item.key);
-            const downloadUrl = await this.storageClient.CreatePreAuthDownloadUrl(this.account.account.ID, item.key);
+            console.log('[FileGrid] Downloading file:', item.Key);
+            const downloadUrl = await this.storageClient.CreatePreAuthDownloadUrl(this.Account.account.ID, item.Key);
             console.log('[FileGrid] Download URL created:', downloadUrl ? 'success' : 'failed');
             if (downloadUrl) {
                 // Open file in new browser tab for viewing/download
@@ -1552,54 +1976,78 @@ export class FileGridComponent {
             this.notifications.CreateSimpleNotification(`Failed to download ${item.name}: ${errorMessage}`, 'error');
         }
     }
+    /** @deprecated Use {@link DownloadFile}. */
+    async downloadFile(item) {
+        return this.DownloadFile(item);
+    }
     /**
      * Toggles between grid and list view
      */
+    ToggleViewMode() {
+        this.ViewMode = this.ViewMode === 'grid' ? 'list' : 'grid';
+    }
+    /** @deprecated Use {@link ToggleViewMode}. */
     toggleViewMode() {
-        this.viewMode = this.viewMode === 'grid' ? 'list' : 'grid';
+        return this.ToggleViewMode();
     }
     /**
      * Refreshes the current directory
      */
-    refresh() {
+    Refresh() {
         this.loadItems();
     }
+    /** @deprecated Use {@link Refresh}. */
+    refresh() {
+        return this.Refresh();
+    }
     /**
      * Navigates up to the parent directory
      */
-    navigateUp() {
-        if (!this.folderPath) {
+    NavigateUp() {
+        if (!this.FolderPath) {
             // Already at root
             return;
         }
         // Remove trailing slash if present
-        const cleanPath = this.folderPath.endsWith('/')
-            ? this.folderPath.slice(0, -1)
-            : this.folderPath;
+        const cleanPath = this.FolderPath.endsWith('/')
+            ? this.FolderPath.slice(0, -1)
+            : this.FolderPath;
         // Get parent path by removing last segment
         const segments = cleanPath.split('/').filter(s => s.length > 0);
         segments.pop(); // Remove last segment
         const parentPath = segments.length > 0 ? segments.join('/') + '/' : '';
         // Emit navigation event to update the folder tree and path
-        this.folderNavigate.emit(parentPath);
+        this.FolderNavigate.emit(parentPath);
+    }
+    /** @deprecated Use {@link NavigateUp}. */
+    navigateUp() {
+        return this.NavigateUp();
     }
     /**
      * Checks if we can navigate up (not at root)
      */
+    CanNavigateUp() {
+        return this.FolderPath !== '' && this.FolderPath !== '/';
+    }
+    /** @deprecated Use {@link CanNavigateUp}. */
     canNavigateUp() {
-        return this.folderPath !== '' && this.folderPath !== '/';
+        return this.CanNavigateUp();
     }
     /**
      * Handles sort change event from the grid
      */
+    OnSortChange(sort) {
+        this.Sort = sort;
+    }
+    /** @deprecated Use {@link OnSortChange}. */
     onSortChange(sort) {
-        this.sort = sort;
+        return this.OnSortChange(sort);
     }
     /**
      * Gets a human-readable file type based on extension
      */
-    getFileType(item) {
-        if (item.type === 'folder') {
+    GetFileType(item) {
+        if (item.Type === 'folder') {
             return 'Folder';
         }
         const extension = item.name.split('.').pop()?.toLowerCase() || '';
@@ -1645,10 +2093,14 @@ export class FileGridComponent {
         };
         return typeMap[extension] || `${extension.toUpperCase()} File`;
     }
+    /** @deprecated Use {@link GetFileType}. */
+    getFileType(item) {
+        return this.GetFileType(item);
+    }
     /**
      * Handles upload button click - triggers file input
      */
-    onUploadClick() {
+    OnUploadClick() {
         const fileInput = document.createElement('input');
         fileInput.type = 'file';
         fileInput.multiple = true;
@@ -1660,49 +2112,69 @@ export class FileGridComponent {
         };
         fileInput.click();
     }
+    /** @deprecated Use {@link OnUploadClick}. */
+    onUploadClick() {
+        return this.OnUploadClick();
+    }
     /**
      * Handles drag enter event
      */
-    onDragEnter(event) {
+    OnDragEnter(event) {
         event.preventDefault();
         event.stopPropagation();
-        this.isDragging = true;
+        this.IsDragging = true;
+    }
+    /** @deprecated Use {@link OnDragEnter}. */
+    onDragEnter(event) {
+        return this.OnDragEnter(event);
     }
     /**
      * Handles drag over event
      */
-    onDragOver(event) {
+    OnDragOver(event) {
         event.preventDefault();
         event.stopPropagation();
     }
+    /** @deprecated Use {@link OnDragOver}. */
+    onDragOver(event) {
+        return this.OnDragOver(event);
+    }
     /**
      * Handles drag leave event
      */
-    onDragLeave(event) {
+    OnDragLeave(event) {
         event.preventDefault();
         event.stopPropagation();
         // Only hide if leaving the container itself, not child elements
         if (event.currentTarget === event.target) {
-            this.isDragging = false;
+            this.IsDragging = false;
         }
     }
+    /** @deprecated Use {@link OnDragLeave}. */
+    onDragLeave(event) {
+        return this.OnDragLeave(event);
+    }
     /**
      * Handles drop event
      */
-    onDrop(event) {
+    OnDrop(event) {
         event.preventDefault();
         event.stopPropagation();
-        this.isDragging = false;
+        this.IsDragging = false;
         const files = event.dataTransfer?.files;
         if (files && files.length > 0) {
             this.uploadFiles(Array.from(files));
         }
     }
+    /** @deprecated Use {@link OnDrop}. */
+    onDrop(event) {
+        return this.OnDrop(event);
+    }
     /**
      * Uploads multiple files to the current folder
      */
     async uploadFiles(files) {
-        if (!this.account) {
+        if (!this.Account) {
             return;
         }
         console.log('[FileGrid] Uploading files:', files.map(f => f.name));
@@ -1717,16 +2189,16 @@ export class FileGridComponent {
      * Uploads a single file using server-side MJ Storage (supports all providers)
      */
     async uploadSingleFile(file, current, total) {
-        if (!this.account) {
+        if (!this.Account) {
             return;
         }
-        this.isUploading = true;
-        this.uploadingFileName = `${file.name} (${current}/${total})`;
-        this.uploadProgress = 0;
+        this.IsUploading = true;
+        this.UploadingFileName = `${file.name} (${current}/${total})`;
+        this.UploadProgress = 0;
         try {
             let cleanPath = '';
-            if (this.folderPath && this.folderPath !== '/') {
-                cleanPath = this.folderPath.endsWith('/') ? this.folderPath.slice(0, -1) : this.folderPath;
+            if (this.FolderPath && this.FolderPath !== '/') {
+                cleanPath = this.FolderPath.endsWith('/') ? this.FolderPath.slice(0, -1) : this.FolderPath;
                 if (cleanPath.startsWith('/')) {
                     cleanPath = cleanPath.substring(1);
                 }
@@ -1737,13 +2209,13 @@ export class FileGridComponent {
                 FileName: file.name,
                 Base64Data: base64Data,
                 MimeType: file.type || 'application/octet-stream',
-                AccountID: this.account.account.ID,
+                AccountID: this.Account.account.ID,
                 PathPrefix: cleanPath || undefined,
             });
             if (!result.Success) {
                 throw new Error(result.ErrorMessage || 'Upload failed');
             }
-            this.uploadProgress = 100;
+            this.UploadProgress = 100;
             console.log('[FileGrid] File uploaded successfully via MJ Storage:', file.name);
         }
         catch (error) {
@@ -1758,9 +2230,9 @@ export class FileGridComponent {
             }, 5000);
         }
         finally {
-            this.isUploading = false;
-            this.uploadProgress = 0;
-            this.uploadingFileName = '';
+            this.IsUploading = false;
+            this.UploadProgress = 0;
+            this.UploadingFileName = '';
         }
     }
     /**
@@ -1791,7 +2263,7 @@ export class FileGridComponent {
             const xhr = new XMLHttpRequest();
             xhr.upload.addEventListener('progress', (event) => {
                 if (event.lengthComputable) {
-                    this.uploadProgress = Math.round((event.loaded / event.total) * 100);
+                    this.UploadProgress = Math.round((event.loaded / event.total) * 100);
                 }
             });
             xhr.addEventListener('load', () => {
@@ -1826,49 +2298,57 @@ export class FileGridComponent {
     /**
      * Opens the new folder dialog
      */
+    OnNewFolderClick() {
+        this.NewFolderName = '';
+        this.ShowNewFolderDialog = true;
+    }
+    /** @deprecated Use {@link OnNewFolderClick}. */
     onNewFolderClick() {
-        this.newFolderName = '';
-        this.showNewFolderDialog = true;
+        return this.OnNewFolderClick();
     }
     /**
      * Closes the new folder dialog
      */
+    OnCancelNewFolder() {
+        this.ShowNewFolderDialog = false;
+        this.NewFolderName = '';
+    }
+    /** @deprecated Use {@link OnCancelNewFolder}. */
     onCancelNewFolder() {
-        this.showNewFolderDialog = false;
-        this.newFolderName = '';
+        return this.OnCancelNewFolder();
     }
     /**
      * Creates a new folder in the current directory
      */
-    async onCreateFolder() {
-        if (!this.account || !this.newFolderName.trim()) {
+    async OnCreateFolder() {
+        if (!this.Account || !this.NewFolderName.trim()) {
             return;
         }
-        this.isCreatingFolder = true;
+        this.IsCreatingFolder = true;
         try {
             // Construct the full folder path
             // Remove trailing slash from folderPath to avoid double slashes
             let folderPath;
-            if (this.folderPath) {
-                const cleanPath = this.folderPath.endsWith('/')
-                    ? this.folderPath.slice(0, -1)
-                    : this.folderPath;
-                folderPath = `${cleanPath}/${this.newFolderName.trim()}`;
+            if (this.FolderPath) {
+                const cleanPath = this.FolderPath.endsWith('/')
+                    ? this.FolderPath.slice(0, -1)
+                    : this.FolderPath;
+                folderPath = `${cleanPath}/${this.NewFolderName.trim()}`;
             }
             else {
-                folderPath = this.newFolderName.trim();
+                folderPath = this.NewFolderName.trim();
             }
             console.log('[FileGrid] Creating folder:', folderPath);
-            const success = await this.storageClient.CreateDirectory(this.account.account.ID, folderPath);
+            const success = await this.storageClient.CreateDirectory(this.Account.account.ID, folderPath);
             if (success) {
                 console.log('[FileGrid] Folder created successfully:', folderPath);
-                const createdName = this.newFolderName.trim();
+                const createdName = this.NewFolderName.trim();
                 // Close dialog and refresh
-                this.showNewFolderDialog = false;
-                this.newFolderName = '';
+                this.ShowNewFolderDialog = false;
+                this.NewFolderName = '';
                 this.notifications.CreateSimpleNotification(`Created folder "${createdName}"`, 'success');
                 // Notify parent that folder structure changed
-                this.folderStructureChanged.emit();
+                this.FolderStructureChanged.emit();
                 // Refresh the file grid
                 this.loadItems();
             }
@@ -1882,63 +2362,75 @@ export class FileGridComponent {
             this.notifications.CreateSimpleNotification(`Failed to create folder: ${errorMessage}`, 'error');
         }
         finally {
-            this.isCreatingFolder = false;
+            this.IsCreatingFolder = false;
         }
     }
+    /** @deprecated Use {@link OnCreateFolder}. */
+    async onCreateFolder() {
+        return this.OnCreateFolder();
+    }
     /**
      * Opens the delete confirmation dialog for the selected items
      */
-    onDeleteClick() {
-        if (this.selectedItems.length === 0) {
+    OnDeleteClick() {
+        if (this.SelectedItems.length === 0) {
             return;
         }
         // selectedItems contains keys (strings), not full objects
         // Find the actual item object from the items array
-        const selectedKey = this.selectedItems[0];
-        const item = this.items.find(i => i.key === selectedKey);
+        const selectedKey = this.SelectedItems[0];
+        const item = this.Items.find(i => i.Key === selectedKey);
         if (!item) {
             console.error('[FileGrid] Could not find selected item with key:', selectedKey);
             return;
         }
-        this.itemToDelete = item;
+        this.ItemToDelete = item;
         this.showDeleteDialog = true;
     }
+    /** @deprecated Use {@link OnDeleteClick}. */
+    onDeleteClick() {
+        return this.OnDeleteClick();
+    }
     /**
      * Closes the delete confirmation dialog
      */
-    onCancelDelete() {
+    OnCancelDelete() {
         this.showDeleteDialog = false;
-        this.itemToDelete = null;
+        this.ItemToDelete = null;
+    }
+    /** @deprecated Use {@link OnCancelDelete}. */
+    onCancelDelete() {
+        return this.OnCancelDelete();
     }
     /**
      * Deletes the selected item after confirmation
      */
-    async onConfirmDelete() {
-        if (!this.account || !this.itemToDelete) {
+    async OnConfirmDelete() {
+        if (!this.Account || !this.ItemToDelete) {
             return;
         }
-        this.isDeleting = true;
+        this.IsDeleting = true;
         try {
             // Construct the full path to the item
-            const itemPath = this.constructItemPath(this.itemToDelete);
+            const itemPath = this.constructItemPath(this.ItemToDelete);
             console.log('[FileGrid] Deleting item:', itemPath);
-            const success = await this.storageClient.DeleteObject(this.account.account.ID, itemPath);
+            const success = await this.storageClient.DeleteObject(this.Account.account.ID, itemPath);
             console.log('[FileGrid] Delete result:', { success });
             if (success) {
                 console.log('[FileGrid] Item deleted successfully:', itemPath);
                 // Check if we deleted a folder (before clearing itemToDelete)
-                const wasFolder = this.itemToDelete.type === 'folder';
-                const deletedName = this.itemToDelete.name;
+                const wasFolder = this.ItemToDelete.Type === 'folder';
+                const deletedName = this.ItemToDelete.name;
                 // Close dialog
                 this.showDeleteDialog = false;
-                this.itemToDelete = null;
+                this.ItemToDelete = null;
                 // Clear selection
-                this.selectedItems = [];
+                this.SelectedItems = [];
                 this.notifications.CreateSimpleNotification(`Deleted "${deletedName}"`, 'info');
                 // If we deleted a folder, notify parent that folder structure changed
                 if (wasFolder) {
                     console.log('[FileGrid] Emitting folderStructureChanged event');
-                    this.folderStructureChanged.emit();
+                    this.FolderStructureChanged.emit();
                 }
                 // Refresh the file grid
                 console.log('[FileGrid] Calling loadItems() to refresh grid');
@@ -1946,7 +2438,7 @@ export class FileGridComponent {
             }
             else {
                 console.error('[FileGrid] Delete operation returned false');
-                this.notifications.CreateSimpleNotification(`Failed to delete ${this.itemToDelete.type}`, 'error');
+                this.notifications.CreateSimpleNotification(`Failed to delete ${this.ItemToDelete.Type}`, 'error');
             }
         }
         catch (error) {
@@ -1955,76 +2447,88 @@ export class FileGridComponent {
             this.notifications.CreateSimpleNotification(`Failed to delete: ${errorMessage}`, 'error');
         }
         finally {
-            this.isDeleting = false;
+            this.IsDeleting = false;
         }
     }
+    /** @deprecated Use {@link OnConfirmDelete}. */
+    async onConfirmDelete() {
+        return this.OnConfirmDelete();
+    }
     /**
      * Opens the rename dialog for the selected item
      */
-    onRenameClick() {
-        if (this.selectedItems.length !== 1) {
+    OnRenameClick() {
+        if (this.SelectedItems.length !== 1) {
             return;
         }
         // selectedItems contains keys (strings), not full objects
         // Find the actual item object from the items array
-        const selectedKey = this.selectedItems[0];
-        const item = this.items.find(i => i.key === selectedKey);
+        const selectedKey = this.SelectedItems[0];
+        const item = this.Items.find(i => i.Key === selectedKey);
         if (!item) {
             console.error('[FileGrid] Could not find selected item with key:', selectedKey);
             return;
         }
-        this.itemToRename = item;
-        this.newItemName = item.name;
-        this.showRenameDialog = true;
+        this.ItemToRename = item;
+        this.NewItemName = item.name;
+        this.ShowRenameDialog = true;
+    }
+    /** @deprecated Use {@link OnRenameClick}. */
+    onRenameClick() {
+        return this.OnRenameClick();
     }
     /**
      * Closes the rename dialog
      */
+    OnCancelRename() {
+        this.ShowRenameDialog = false;
+        this.ItemToRename = null;
+        this.NewItemName = '';
+    }
+    /** @deprecated Use {@link OnCancelRename}. */
     onCancelRename() {
-        this.showRenameDialog = false;
-        this.itemToRename = null;
-        this.newItemName = '';
+        return this.OnCancelRename();
     }
     /**
      * Renames the selected item after confirmation
      */
-    async onConfirmRename() {
-        if (!this.account || !this.itemToRename || !this.newItemName.trim()) {
+    async OnConfirmRename() {
+        if (!this.Account || !this.ItemToRename || !this.NewItemName.trim()) {
             return;
         }
         // Check if name actually changed
-        if (this.newItemName.trim() === this.itemToRename.name) {
-            this.onCancelRename();
+        if (this.NewItemName.trim() === this.ItemToRename.name) {
+            this.OnCancelRename();
             return;
         }
-        this.isRenaming = true;
+        this.IsRenaming = true;
         try {
             // Construct the old and new paths
-            const oldPath = this.constructItemPath(this.itemToRename);
+            const oldPath = this.constructItemPath(this.ItemToRename);
             // Build the new path by replacing the old name with the new name
             const pathParts = oldPath.split('/');
-            pathParts[pathParts.length - 1] = this.newItemName.trim();
+            pathParts[pathParts.length - 1] = this.NewItemName.trim();
             const newPath = pathParts.join('/');
             console.log('[FileGrid] Renaming item:', { oldPath, newPath });
-            const success = await this.storageClient.MoveObject(this.account.account.ID, oldPath, newPath);
+            const success = await this.storageClient.MoveObject(this.Account.account.ID, oldPath, newPath);
             console.log('[FileGrid] Rename result:', { success });
             if (success) {
                 console.log('[FileGrid] Item renamed successfully:', { oldPath, newPath });
                 // Check if we renamed a folder (before clearing itemToRename)
-                const wasFolder = this.itemToRename.type === 'folder';
-                const oldName = this.itemToRename.name;
-                const newName = this.newItemName.trim();
+                const wasFolder = this.ItemToRename.Type === 'folder';
+                const oldName = this.ItemToRename.name;
+                const newName = this.NewItemName.trim();
                 // Close dialog
-                this.showRenameDialog = false;
-                this.itemToRename = null;
-                this.newItemName = '';
+                this.ShowRenameDialog = false;
+                this.ItemToRename = null;
+                this.NewItemName = '';
                 // Clear selection
-                this.selectedItems = [];
+                this.SelectedItems = [];
                 this.notifications.CreateSimpleNotification(`Renamed "${oldName}" to "${newName}"`, 'success');
                 // If we renamed a folder, notify parent that folder structure changed
                 if (wasFolder) {
                     console.log('[FileGrid] Emitting folderStructureChanged event');
-                    this.folderStructureChanged.emit();
+                    this.FolderStructureChanged.emit();
                 }
                 // Refresh the file grid
                 console.log('[FileGrid] Calling loadItems() to refresh grid');
@@ -2032,7 +2536,7 @@ export class FileGridComponent {
             }
             else {
                 console.error('[FileGrid] Rename operation returned false');
-                this.notifications.CreateSimpleNotification(`Failed to rename ${this.itemToRename.type}`, 'error');
+                this.notifications.CreateSimpleNotification(`Failed to rename ${this.ItemToRename.Type}`, 'error');
             }
         }
         catch (error) {
@@ -2041,35 +2545,39 @@ export class FileGridComponent {
             this.notifications.CreateSimpleNotification(`Failed to rename: ${errorMessage}`, 'error');
         }
         finally {
-            this.isRenaming = false;
+            this.IsRenaming = false;
         }
     }
+    /** @deprecated Use {@link OnConfirmRename}. */
+    async onConfirmRename() {
+        return this.OnConfirmRename();
+    }
     /**
      * Downloads the selected file
      */
-    async onDownloadClick() {
-        if (this.selectedItems.length !== 1) {
+    async OnDownloadClick() {
+        if (this.SelectedItems.length !== 1) {
             return;
         }
         // Find the selected item
-        const selectedKey = this.selectedItems[0];
-        const item = this.items.find(i => i.key === selectedKey);
+        const selectedKey = this.SelectedItems[0];
+        const item = this.Items.find(i => i.Key === selectedKey);
         if (!item) {
             console.error('[FileGrid] Could not find selected item with key:', selectedKey);
             return;
         }
         // Can only download files, not folders
-        if (item.type === 'folder') {
+        if (item.Type === 'folder') {
             this.notifications.CreateSimpleNotification('Cannot download folders. Please select a file.', 'warning');
             return;
         }
-        if (!this.account) {
+        if (!this.Account) {
             return;
         }
         try {
             const itemPath = this.constructItemPath(item);
             console.log('[FileGrid] Creating download URL for:', itemPath);
-            const downloadUrl = await this.storageClient.CreatePreAuthDownloadUrl(this.account.account.ID, itemPath);
+            const downloadUrl = await this.storageClient.CreatePreAuthDownloadUrl(this.Account.account.ID, itemPath);
             if (downloadUrl) {
                 console.log('[FileGrid] Download URL created, opening in new tab');
                 window.open(downloadUrl, '_blank', 'noopener,noreferrer');
@@ -2085,49 +2593,61 @@ export class FileGridComponent {
             this.notifications.CreateSimpleNotification(`Failed to download: ${errorMessage}`, 'error');
         }
     }
+    /** @deprecated Use {@link OnDownloadClick}. */
+    async onDownloadClick() {
+        return this.OnDownloadClick();
+    }
     /**
      * Opens the copy dialog for the selected item
      */
-    onCopyClick() {
-        if (this.selectedItems.length !== 1) {
+    OnCopyClick() {
+        if (this.SelectedItems.length !== 1) {
             return;
         }
-        const selectedKey = this.selectedItems[0];
-        const item = this.items.find(i => i.key === selectedKey);
+        const selectedKey = this.SelectedItems[0];
+        const item = this.Items.find(i => i.Key === selectedKey);
         if (!item) {
             console.error('[FileGrid] Could not find selected item with key:', selectedKey);
             return;
         }
-        this.itemToCopy = item;
-        this.copyDestinationPath = this.folderPath + item.name + '-copy';
-        this.showCopyDialog = true;
+        this.ItemToCopy = item;
+        this.CopyDestinationPath = this.FolderPath + item.name + '-copy';
+        this.ShowCopyDialog = true;
+    }
+    /** @deprecated Use {@link OnCopyClick}. */
+    onCopyClick() {
+        return this.OnCopyClick();
     }
     /**
      * Cancels the copy operation
      */
+    OnCancelCopy() {
+        this.ShowCopyDialog = false;
+        this.ItemToCopy = null;
+        this.CopyDestinationPath = '';
+    }
+    /** @deprecated Use {@link OnCancelCopy}. */
     onCancelCopy() {
-        this.showCopyDialog = false;
-        this.itemToCopy = null;
-        this.copyDestinationPath = '';
+        return this.OnCancelCopy();
     }
     /**
      * Confirms and executes the copy operation
      */
-    async onConfirmCopy() {
-        if (!this.account || !this.itemToCopy || !this.copyDestinationPath.trim()) {
+    async OnConfirmCopy() {
+        if (!this.Account || !this.ItemToCopy || !this.CopyDestinationPath.trim()) {
             return;
         }
-        this.isCopying = true;
+        this.IsCopying = true;
         try {
-            const sourcePath = this.constructItemPath(this.itemToCopy);
-            const success = await this.storageClient.CopyObject(this.account.account.ID, sourcePath, this.copyDestinationPath.trim());
+            const sourcePath = this.constructItemPath(this.ItemToCopy);
+            const success = await this.storageClient.CopyObject(this.Account.account.ID, sourcePath, this.CopyDestinationPath.trim());
             if (success) {
                 // Close dialog
-                this.showCopyDialog = false;
-                this.itemToCopy = null;
-                this.copyDestinationPath = '';
+                this.ShowCopyDialog = false;
+                this.ItemToCopy = null;
+                this.CopyDestinationPath = '';
                 // Clear selection
-                this.selectedItems = [];
+                this.SelectedItems = [];
                 this.notifications.CreateSimpleNotification('Item copied successfully', 'success');
                 // Refresh the file grid
                 this.loadItems();
@@ -2142,61 +2662,73 @@ export class FileGridComponent {
             this.notifications.CreateSimpleNotification(`Failed to copy: ${errorMessage}`, 'error');
         }
         finally {
-            this.isCopying = false;
+            this.IsCopying = false;
         }
     }
+    /** @deprecated Use {@link OnConfirmCopy}. */
+    async onConfirmCopy() {
+        return this.OnConfirmCopy();
+    }
     /**
      * Opens the move dialog for the selected item
      */
-    onMoveClick() {
-        if (this.selectedItems.length !== 1) {
+    OnMoveClick() {
+        if (this.SelectedItems.length !== 1) {
             return;
         }
-        const selectedKey = this.selectedItems[0];
-        const item = this.items.find(i => i.key === selectedKey);
+        const selectedKey = this.SelectedItems[0];
+        const item = this.Items.find(i => i.Key === selectedKey);
         if (!item) {
             console.error('[FileGrid] Could not find selected item with key:', selectedKey);
             return;
         }
-        this.itemToMove = item;
+        this.ItemToMove = item;
         // Suggest a different folder path
-        this.moveDestinationPath = this.folderPath;
-        this.showMoveDialog = true;
+        this.MoveDestinationPath = this.FolderPath;
+        this.ShowMoveDialog = true;
+    }
+    /** @deprecated Use {@link OnMoveClick}. */
+    onMoveClick() {
+        return this.OnMoveClick();
     }
     /**
      * Cancels the move operation
      */
+    OnCancelMove() {
+        this.ShowMoveDialog = false;
+        this.ItemToMove = null;
+        this.MoveDestinationPath = '';
+    }
+    /** @deprecated Use {@link OnCancelMove}. */
     onCancelMove() {
-        this.showMoveDialog = false;
-        this.itemToMove = null;
-        this.moveDestinationPath = '';
+        return this.OnCancelMove();
     }
     /**
      * Confirms and executes the move operation
      */
-    async onConfirmMove() {
-        if (!this.account || !this.itemToMove || !this.moveDestinationPath.trim()) {
+    async OnConfirmMove() {
+        if (!this.Account || !this.ItemToMove || !this.MoveDestinationPath.trim()) {
             return;
         }
-        this.isMoving = true;
+        this.IsMoving = true;
         try {
-            const sourcePath = this.constructItemPath(this.itemToMove);
-            const destPath = this.moveDestinationPath.trim().endsWith('/')
-                ? this.moveDestinationPath.trim() + this.itemToMove.name
-                : this.moveDestinationPath.trim();
-            const success = await this.storageClient.MoveObject(this.account.account.ID, sourcePath, destPath);
+            const sourcePath = this.constructItemPath(this.ItemToMove);
+            const destPath = this.MoveDestinationPath.trim().endsWith('/')
+                ? this.MoveDestinationPath.trim() + this.ItemToMove.name
+                : this.MoveDestinationPath.trim();
+            const success = await this.storageClient.MoveObject(this.Account.account.ID, sourcePath, destPath);
             if (success) {
-                const wasFolder = this.itemToMove.type === 'folder';
+                const wasFolder = this.ItemToMove.Type === 'folder';
                 // Close dialog
-                this.showMoveDialog = false;
-                this.itemToMove = null;
-                this.moveDestinationPath = '';
+                this.ShowMoveDialog = false;
+                this.ItemToMove = null;
+                this.MoveDestinationPath = '';
                 // Clear selection
-                this.selectedItems = [];
+                this.SelectedItems = [];
                 this.notifications.CreateSimpleNotification('Item moved successfully', 'success');
                 // If we moved a folder, notify parent that folder structure changed
                 if (wasFolder) {
-                    this.folderStructureChanged.emit();
+                    this.FolderStructureChanged.emit();
                 }
                 // Refresh the file grid
                 this.loadItems();
@@ -2211,32 +2743,36 @@ export class FileGridComponent {
             this.notifications.CreateSimpleNotification(`Failed to move: ${errorMessage}`, 'error');
         }
         finally {
-            this.isMoving = false;
+            this.IsMoving = false;
         }
     }
+    /** @deprecated Use {@link OnConfirmMove}. */
+    async onConfirmMove() {
+        return this.OnConfirmMove();
+    }
     /**
      * Constructs the full path for an item
      */
     constructItemPath(item) {
         // Validate that we have either key or name
-        if (!item.key && !item.name) {
+        if (!item.Key && !item.name) {
             console.error('[FileGrid] Cannot construct path - item has no key or name:', item);
             throw new Error('Cannot construct path for item without key or name');
         }
         // If item.key exists and is at root level, use it directly
-        if (!this.folderPath || this.folderPath === '/') {
-            return item.key || item.name;
+        if (!this.FolderPath || this.FolderPath === '/') {
+            return item.Key || item.name;
         }
         // If the item key already includes the folder path, use it as is
-        if (item.key && item.key.startsWith(this.folderPath)) {
-            return item.key;
+        if (item.Key && item.Key.startsWith(this.FolderPath)) {
+            return item.Key;
         }
         // Otherwise, combine folder path with item name
-        const normalizedFolderPath = this.folderPath.endsWith('/')
-            ? this.folderPath.slice(0, -1)
-            : this.folderPath;
+        const normalizedFolderPath = this.FolderPath.endsWith('/')
+            ? this.FolderPath.slice(0, -1)
+            : this.FolderPath;
         // Make sure we have a name to use
-        const itemName = item.name || item.key;
+        const itemName = item.name || item.Key;
         if (!itemName) {
             console.error('[FileGrid] Cannot construct path - item has no usable name:', item);
             throw new Error('Cannot construct path for item without name');
@@ -2246,96 +2782,116 @@ export class FileGridComponent {
     /**
      * Gets the currently selected item (if exactly one is selected)
      */
-    getSelectedItem() {
-        if (this.selectedItems.length !== 1) {
+    GetSelectedItem() {
+        if (this.SelectedItems.length !== 1) {
             return null;
         }
-        return this.items.find(item => item.key === this.selectedItems[0]) || null;
+        return this.Items.find(item => item.Key === this.SelectedItems[0]) || null;
+    }
+    /** @deprecated Use {@link GetSelectedItem}. */
+    getSelectedItem() {
+        return this.GetSelectedItem();
     }
     /**
      * Opens the copy to account dialog
      */
-    async onCopyToAccountClick() {
-        const item = this.getSelectedItem();
-        if (!item || item.type === 'folder') {
+    async OnCopyToAccountClick() {
+        const item = this.GetSelectedItem();
+        if (!item || item.Type === 'folder') {
             return;
         }
         try {
             const engine = FileStorageEngineBase.Instance;
             await engine.Config(false); // Use cached data if available
             // Build available accounts (excluding current account)
-            this.availableAccounts = engine.AccountsWithProviders
-                .filter(a => !UUIDsEqual(a.account.ID, this.account?.account.ID));
-            if (this.availableAccounts.length === 0) {
+            this.AvailableAccounts = engine.AccountsWithProviders
+                .filter(a => !UUIDsEqual(a.account.ID, this.Account?.account.ID));
+            if (this.AvailableAccounts.length === 0) {
                 this.notifications.CreateSimpleNotification('No other storage accounts available', 'warning');
                 return;
             }
-            this.itemToCopyToProvider = item;
-            this.copyToAccountDestinationPath = item.name; // Default to same filename
-            this.selectedDestinationAccounts.clear();
-            this.copyToAccountProgress = null;
-            this.showCopyToProviderDialog = true;
+            this.ItemToCopyToProvider = item;
+            this.CopyToAccountDestinationPath = item.name; // Default to same filename
+            this.SelectedDestinationAccounts.clear();
+            this.CopyToAccountProgress = null;
+            this.ShowCopyToProviderDialog = true;
         }
         catch (error) {
             console.error('[FileGrid] Error loading accounts:', error);
             this.notifications.CreateSimpleNotification('Failed to load storage accounts', 'error');
         }
     }
+    /** @deprecated Use {@link OnCopyToAccountClick}. */
+    async onCopyToAccountClick() {
+        return this.OnCopyToAccountClick();
+    }
     /**
      * Cancels the copy to account dialog
      */
+    OnCancelCopyToAccount() {
+        this.ShowCopyToProviderDialog = false;
+        this.ItemToCopyToProvider = null;
+        this.SelectedDestinationAccounts.clear();
+        this.CopyToAccountDestinationPath = '';
+        this.CopyToAccountProgress = null;
+    }
+    /** @deprecated Use {@link OnCancelCopyToAccount}. */
     onCancelCopyToAccount() {
-        this.showCopyToProviderDialog = false;
-        this.itemToCopyToProvider = null;
-        this.selectedDestinationAccounts.clear();
-        this.copyToAccountDestinationPath = '';
-        this.copyToAccountProgress = null;
+        return this.OnCancelCopyToAccount();
     }
     /**
      * Toggles selection of a destination account for copying
      */
-    toggleDestinationAccount(accountId) {
-        if (this.selectedDestinationAccounts.has(accountId)) {
-            this.selectedDestinationAccounts.delete(accountId);
+    ToggleDestinationAccount(accountId) {
+        if (this.SelectedDestinationAccounts.has(accountId)) {
+            this.SelectedDestinationAccounts.delete(accountId);
         }
         else {
-            this.selectedDestinationAccounts.add(accountId);
+            this.SelectedDestinationAccounts.add(accountId);
         }
     }
+    /** @deprecated Use {@link ToggleDestinationAccount}. */
+    toggleDestinationAccount(accountId) {
+        return this.ToggleDestinationAccount(accountId);
+    }
     /**
      * Checks if an account is selected as a destination
      */
+    IsDestinationAccountSelected(accountId) {
+        return this.SelectedDestinationAccounts.has(accountId);
+    }
+    /** @deprecated Use {@link IsDestinationAccountSelected}. */
     isDestinationAccountSelected(accountId) {
-        return this.selectedDestinationAccounts.has(accountId);
+        return this.IsDestinationAccountSelected(accountId);
     }
     /**
      * Executes the cross-account copy to multiple selected accounts
      */
-    async onConfirmCopyToAccount() {
-        if (!this.itemToCopyToProvider || this.selectedDestinationAccounts.size === 0 || !this.account) {
+    async OnConfirmCopyToAccount() {
+        if (!this.ItemToCopyToProvider || this.SelectedDestinationAccounts.size === 0 || !this.Account) {
             return;
         }
-        this.isCopyingToAccount = true;
+        this.IsCopyingToAccount = true;
         // Get selected accounts
-        const selectedAccounts = this.availableAccounts.filter(a => this.selectedDestinationAccounts.has(a.account.ID));
+        const selectedAccounts = this.AvailableAccounts.filter(a => this.SelectedDestinationAccounts.has(a.account.ID));
         const successfulCopies = [];
         const failedCopies = [];
         try {
             // Construct source path and normalize it
-            const rawSourcePath = this.constructItemPath(this.itemToCopyToProvider);
+            const rawSourcePath = this.constructItemPath(this.ItemToCopyToProvider);
             const sourcePath = rawSourcePath.replace(/^\/+|\/+$/g, '').replace(/\/+/g, '/');
             console.log('[FileGrid] Cross-account copy sourcePath:', { raw: rawSourcePath, normalized: sourcePath });
             // Copy to each selected account
             for (let i = 0; i < selectedAccounts.length; i++) {
                 const destAccount = selectedAccounts[i];
-                this.copyToAccountProgress = {
+                this.CopyToAccountProgress = {
                     current: i + 1,
                     total: selectedAccounts.length,
                     currentAccount: destAccount.account.Name
                 };
                 try {
                     console.log('[FileGrid] Copying to account:', destAccount.account.Name);
-                    const copyResult = await this.storageClient.CopyObjectBetweenAccounts(this.account.account.ID, destAccount.account.ID, sourcePath, this.copyToAccountDestinationPath);
+                    const copyResult = await this.storageClient.CopyObjectBetweenAccounts(this.Account.account.ID, destAccount.account.ID, sourcePath, this.CopyToAccountDestinationPath);
                     if (copyResult.success) {
                         successfulCopies.push(destAccount.account.Name);
                     }
@@ -2359,11 +2915,11 @@ export class FileGridComponent {
                 this.notifications.CreateSimpleNotification(`Copied to ${successfulCopies.length} account(s). Failed: ${failedCopies.map(f => f.account).join(', ')}`, 'warning');
             }
             // Close dialog
-            this.showCopyToProviderDialog = false;
-            this.itemToCopyToProvider = null;
-            this.selectedDestinationAccounts.clear();
-            this.copyToAccountDestinationPath = '';
-            this.copyToAccountProgress = null;
+            this.ShowCopyToProviderDialog = false;
+            this.ItemToCopyToProvider = null;
+            this.SelectedDestinationAccounts.clear();
+            this.CopyToAccountDestinationPath = '';
+            this.CopyToAccountProgress = null;
         }
         catch (error) {
             console.error('[FileGrid] Error copying to accounts:', error);
@@ -2371,34 +2927,42 @@ export class FileGridComponent {
             this.notifications.CreateSimpleNotification(`Copy failed: ${errorMessage}`, 'error');
         }
         finally {
-            this.isCopyingToAccount = false;
-            this.copyToAccountProgress = null;
+            this.IsCopyingToAccount = false;
+            this.CopyToAccountProgress = null;
         }
     }
+    /** @deprecated Use {@link OnConfirmCopyToAccount}. */
+    async onConfirmCopyToAccount() {
+        return this.OnConfirmCopyToAccount();
+    }
     // ==========================================
     // Multi-Account Search Methods
     // ==========================================
     /**
      * Toggles multi-account search mode
      */
-    toggleMultiAccountSearchMode() {
-        this.isMultiProviderSearchMode = !this.isMultiProviderSearchMode;
-        if (this.isMultiProviderSearchMode) {
+    ToggleMultiAccountSearchMode() {
+        this.IsMultiProviderSearchMode = !this.IsMultiProviderSearchMode;
+        if (this.IsMultiProviderSearchMode) {
             // Load available accounts if not already loaded
-            if (this.availableAccounts.length === 0) {
+            if (this.AvailableAccounts.length === 0) {
                 this.loadAvailableAccountsForSearch();
             }
             // Pre-select current account if available
-            if (this.account) {
-                this.selectedSearchProviders.add(this.account.account.ID);
+            if (this.Account) {
+                this.SelectedSearchProviders.add(this.Account.account.ID);
             }
         }
         else {
             // Clear search results when exiting search mode
-            this.multiProviderSearchResults = null;
-            this.multiProviderSearchQuery = '';
+            this.MultiProviderSearchResults = null;
+            this.MultiProviderSearchQuery = '';
         }
     }
+    /** @deprecated Use {@link ToggleMultiAccountSearchMode}. */
+    toggleMultiAccountSearchMode() {
+        return this.ToggleMultiAccountSearchMode();
+    }
     /**
      * Loads available accounts for search selection
      */
@@ -2406,7 +2970,7 @@ export class FileGridComponent {
         try {
             const engine = FileStorageEngineBase.Instance;
             await engine.Config(false); // Use cached data if available
-            this.availableAccounts = engine.AccountsWithProviders;
+            this.AvailableAccounts = engine.AccountsWithProviders;
         }
         catch (error) {
             console.error('[FileGrid] Error loading accounts for search:', error);
@@ -2415,45 +2979,57 @@ export class FileGridComponent {
     /**
      * Toggles account selection for search
      */
-    toggleSearchAccount(accountID) {
-        if (this.selectedSearchProviders.has(accountID)) {
-            this.selectedSearchProviders.delete(accountID);
+    ToggleSearchAccount(accountID) {
+        if (this.SelectedSearchProviders.has(accountID)) {
+            this.SelectedSearchProviders.delete(accountID);
         }
         else {
-            this.selectedSearchProviders.add(accountID);
+            this.SelectedSearchProviders.add(accountID);
         }
     }
+    /** @deprecated Use {@link ToggleSearchAccount}. */
+    toggleSearchAccount(accountID) {
+        return this.ToggleSearchAccount(accountID);
+    }
     /**
      * Checks if an account is selected for search
      */
+    IsAccountSelectedForSearch(accountID) {
+        return this.SelectedSearchProviders.has(accountID);
+    }
+    /** @deprecated Use {@link IsAccountSelectedForSearch}. */
     isAccountSelectedForSearch(accountID) {
-        return this.selectedSearchProviders.has(accountID);
+        return this.IsAccountSelectedForSearch(accountID);
     }
     /**
      * Checks if an account's provider supports search
      */
-    accountSupportsSearch(accountWithProvider) {
+    AccountSupportsSearch(accountWithProvider) {
         return accountWithProvider.provider.SupportsSearch === true;
     }
+    /** @deprecated Use {@link AccountSupportsSearch}. */
+    accountSupportsSearch(accountWithProvider) {
+        return this.AccountSupportsSearch(accountWithProvider);
+    }
     /**
      * Executes multi-account search
      */
-    async executeMultiAccountSearch() {
-        if (!this.multiProviderSearchQuery.trim() || this.selectedSearchProviders.size === 0) {
+    async ExecuteMultiAccountSearch() {
+        if (!this.MultiProviderSearchQuery.trim() || this.SelectedSearchProviders.size === 0) {
             return;
         }
-        this.isSearching = true;
-        this.multiProviderSearchResults = null;
+        this.IsSearching = true;
+        this.MultiProviderSearchResults = null;
         try {
             console.log('[FileGrid] Executing multi-account search:', {
-                accountIds: Array.from(this.selectedSearchProviders),
-                query: this.multiProviderSearchQuery
+                accountIds: Array.from(this.SelectedSearchProviders),
+                query: this.MultiProviderSearchQuery
             });
-            const searchResult = await this.storageClient.SearchFiles(Array.from(this.selectedSearchProviders), this.multiProviderSearchQuery, { maxResultsPerAccount: 50 });
+            const searchResult = await this.storageClient.SearchFiles(Array.from(this.SelectedSearchProviders), this.MultiProviderSearchQuery, { maxResultsPerAccount: 50 });
             console.log('[FileGrid] Multi-account search result:', searchResult);
             // Map the client result to the component's expected format
-            this.multiProviderSearchResults = {
-                accountResults: searchResult.accountResults.map((ar) => ({
+            this.MultiProviderSearchResults = {
+                AccountResults: searchResult.accountResults.map((ar) => ({
                     accountID: ar.accountId,
                     accountName: ar.accountName,
                     success: ar.success,
@@ -2473,9 +3049,9 @@ export class FileGridComponent {
                     hasMore: ar.hasMore,
                     nextPageToken: ar.nextPageToken
                 })),
-                totalResultsReturned: searchResult.totalResultsReturned,
-                successfulAccounts: searchResult.successfulAccounts,
-                failedAccounts: searchResult.failedAccounts
+                TotalResultsReturned: searchResult.totalResultsReturned,
+                SuccessfulAccounts: searchResult.successfulAccounts,
+                FailedAccounts: searchResult.failedAccounts
             };
         }
         catch (error) {
@@ -2488,20 +3064,28 @@ export class FileGridComponent {
             }, 5000);
         }
         finally {
-            this.isSearching = false;
+            this.IsSearching = false;
         }
     }
+    /** @deprecated Use {@link ExecuteMultiAccountSearch}. */
+    async executeMultiAccountSearch() {
+        return this.ExecuteMultiAccountSearch();
+    }
     /**
      * Clears multi-provider search results
      */
+    ClearMultiProviderSearch() {
+        this.MultiProviderSearchQuery = '';
+        this.MultiProviderSearchResults = null;
+    }
+    /** @deprecated Use {@link ClearMultiProviderSearch}. */
     clearMultiProviderSearch() {
-        this.multiProviderSearchQuery = '';
-        this.multiProviderSearchResults = null;
+        return this.ClearMultiProviderSearch();
     }
     /**
      * Gets icon for a search result based on content type
      */
-    getSearchResultIcon(result) {
+    GetSearchResultIcon(result) {
         const extension = result.name.split('.').pop()?.toLowerCase() || '';
         if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg'].includes(extension)) {
             return 'fa-solid fa-file-image';
@@ -2531,24 +3115,36 @@ export class FileGridComponent {
             return 'fa-solid fa-file';
         }
     }
+    /** @deprecated Use {@link GetSearchResultIcon}. */
+    getSearchResultIcon(result) {
+        return this.GetSearchResultIcon(result);
+    }
     /**
      * Formats file size for search results
      */
+    FormatSearchResultSize(bytes) {
+        return this.FormatFileSize(bytes);
+    }
+    /** @deprecated Use {@link FormatSearchResultSize}. */
     formatSearchResultSize(bytes) {
-        return this.formatFileSize(bytes);
+        return this.FormatSearchResultSize(bytes);
     }
     /**
      * Formats date for search results
      */
-    formatSearchResultDate(dateStr) {
+    FormatSearchResultDate(dateStr) {
         return new Date(dateStr).toLocaleString();
     }
+    /** @deprecated Use {@link FormatSearchResultDate}. */
+    formatSearchResultDate(dateStr) {
+        return this.FormatSearchResultDate(dateStr);
+    }
     /**
      * Determines media category for a file item
      */
-    getMediaType(item) {
+    GetMediaType(item) {
         const ext = item.name.split('.').pop()?.toLowerCase() || '';
-        const mime = item.contentType?.toLowerCase() || '';
+        const mime = item.ContentType?.toLowerCase() || '';
         if (mime.startsWith('image/') || ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'ico'].includes(ext)) {
             return 'image';
         }
@@ -2572,21 +3168,29 @@ export class FileGridComponent {
         }
         return 'unknown';
     }
+    /** @deprecated Use {@link GetMediaType}. */
+    getMediaType(item) {
+        return this.GetMediaType(item);
+    }
     /**
      * Gets specific badge class for media type
      */
-    getItemColorClass(item) {
-        if (item.type === 'folder') {
+    GetItemColorClass(item) {
+        if (item.Type === 'folder') {
             return 'mj-file-thumb--folder';
         }
-        const mediaType = this.getMediaType(item);
+        const mediaType = this.GetMediaType(item);
         return `mj-file-thumb--${mediaType}`;
     }
+    /** @deprecated Use {@link GetItemColorClass}. */
+    getItemColorClass(item) {
+        return this.GetItemColorClass(item);
+    }
     /**
      * Generates clickable path breadcrumbs
      */
-    getPathBreadcrumbs() {
-        const raw = (this.folderPath || '').trim();
+    GetPathBreadcrumbs() {
+        const raw = (this.FolderPath || '').trim();
         if (!raw || raw === '/') {
             return [{ name: 'Root', path: '/' }];
         }
@@ -2602,87 +3206,119 @@ export class FileGridComponent {
         }
         return crumbs;
     }
+    /** @deprecated Use {@link GetPathBreadcrumbs}. */
+    getPathBreadcrumbs() {
+        return this.GetPathBreadcrumbs();
+    }
     /**
      * Navigates to a specific breadcrumb path
      */
+    NavigateToBreadcrumb(path) {
+        this.FolderNavigate.emit(path);
+    }
+    /** @deprecated Use {@link NavigateToBreadcrumb}. */
     navigateToBreadcrumb(path) {
-        this.folderNavigate.emit(path);
+        return this.NavigateToBreadcrumb(path);
     }
     /**
      * Toggles selection of a file/folder item
      */
-    toggleItemSelection(item, event) {
+    ToggleItemSelection(item, event) {
         if (event) {
             event.stopPropagation();
         }
-        const idx = this.selectedItems.indexOf(item.key);
+        const idx = this.SelectedItems.indexOf(item.Key);
         if (idx >= 0) {
-            this.selectedItems = this.selectedItems.filter((k) => k !== item.key);
+            this.SelectedItems = this.SelectedItems.filter((k) => k !== item.Key);
         }
         else {
-            this.selectedItems = [...this.selectedItems, item.key];
+            this.SelectedItems = [...this.SelectedItems, item.Key];
         }
         this.cdr.markForCheck();
     }
+    /** @deprecated Use {@link ToggleItemSelection}. */
+    toggleItemSelection(item, event) {
+        return this.ToggleItemSelection(item, event);
+    }
     /**
      * Selects all current filtered items
      */
-    selectAll() {
-        this.selectedItems = this.filteredItems.map((i) => i.key);
+    SelectAll() {
+        this.SelectedItems = this.FilteredItems.map((i) => i.Key);
         this.cdr.markForCheck();
     }
+    /** @deprecated Use {@link SelectAll}. */
+    selectAll() {
+        return this.SelectAll();
+    }
     /**
      * Clears selection
      */
-    deselectAll() {
-        this.selectedItems = [];
+    DeselectAll() {
+        this.SelectedItems = [];
         this.cdr.markForCheck();
     }
+    /** @deprecated Use {@link DeselectAll}. */
+    deselectAll() {
+        return this.DeselectAll();
+    }
     /**
      * Checks if all items are selected
      */
+    AreAllSelected() {
+        return (this.FilteredItems.length > 0 &&
+            this.SelectedItems.length === this.FilteredItems.length);
+    }
+    /** @deprecated Use {@link AreAllSelected}. */
     areAllSelected() {
-        return (this.filteredItems.length > 0 &&
-            this.selectedItems.length === this.filteredItems.length);
+        return this.AreAllSelected();
     }
     /**
      * Opens in-browser preview modal
      */
-    async openPreview(item) {
-        if (item.type === 'folder' || !this.account) {
+    async OpenPreview(item) {
+        if (item.Type === 'folder' || !this.Account) {
             return;
         }
-        this.previewItem = item;
-        this.previewMediaType = this.getMediaType(item);
-        this.showPreviewModal = true;
-        this.isLoadingPreview = true;
-        this.previewUrl = null;
+        this.PreviewItem = item;
+        this.PreviewMediaType = this.GetMediaType(item);
+        this.ShowPreviewModal = true;
+        this.IsLoadingPreview = true;
+        this.PreviewUrl = null;
         this.cdr.markForCheck();
         try {
             const itemPath = this.constructItemPath(item);
-            const url = await this.storageClient.CreatePreAuthDownloadUrl(this.account.account.ID, itemPath);
-            this.previewUrl = url;
+            const url = await this.storageClient.CreatePreAuthDownloadUrl(this.Account.account.ID, itemPath);
+            this.PreviewUrl = url;
         }
         catch (err) {
             console.error('[FileGrid] Preview error:', err);
         }
         finally {
-            this.isLoadingPreview = false;
+            this.IsLoadingPreview = false;
             this.cdr.markForCheck();
         }
     }
+    /** @deprecated Use {@link OpenPreview}. */
+    async openPreview(item) {
+        return this.OpenPreview(item);
+    }
     /**
      * Closes the preview modal
      */
-    closePreview() {
-        this.showPreviewModal = false;
-        this.previewItem = null;
-        this.previewUrl = null;
-        this.isLoadingPreview = false;
+    ClosePreview() {
+        this.ShowPreviewModal = false;
+        this.PreviewItem = null;
+        this.PreviewUrl = null;
+        this.IsLoadingPreview = false;
         this.cdr.markForCheck();
     }
+    /** @deprecated Use {@link ClosePreview}. */
+    closePreview() {
+        return this.ClosePreview();
+    }
     static ɵfac = function FileGridComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FileGridComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FileGridComponent, selectors: [["mj-file-grid"]], inputs: { account: "account", folderPath: "folderPath" }, outputs: { folderNavigate: "folderNavigate", folderStructureChanged: "folderStructureChanged" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 19, vars: 18, consts: [[1, "file-grid-container", 3, "dragenter", "dragover", "dragleave", "drop"], [1, "command-bar", "breadcrumb-bar"], [1, "selection-bar"], [1, "multi-search-card", "multi-provider-search-panel"], [1, "grid-loading-container", "loading-state"], ["Variant", "error", "Icon", "fa-solid fa-triangle-exclamation", "Title", "Unable to load files", "ActionText", "Retry", "ActionIcon", "fa-solid fa-arrows-rotate", 1, "file-grid-empty-fill", 3, "Message"], [1, "file-cards-grid", "file-grid", "file-grid-wrapper"], [1, "file-table-container", "file-table-wrapper"], ["Icon", "fa-solid fa-folder-open", "Title", "This folder is empty", "Message", "Drop files here to upload or create a new folder", "ActionText", "Upload Files", "ActionIcon", "fa-solid fa-cloud-arrow-up"], [1, "status-bar"], [1, "drag-drop-overlay"], [1, "upload-progress-bar-wrap"], [1, "mj-modal-backdrop"], [1, "mj-modal-backdrop", "modal-overlay"], [1, "command-bar-left"], [1, "nav-btn-group", "nav-buttons"], ["type", "button", "title", "Go up to parent folder", 1, "mj-tool-btn", "nav-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-arrow-up"], ["type", "button", "title", "Refresh current folder", 1, "mj-tool-btn", "nav-btn", 3, "click"], [1, "fa-solid", "fa-arrows-rotate"], ["aria-label", "Folder Path", 1, "breadcrumb-trail", "breadcrumb-path"], [1, "fa-solid", "fa-folder-open", "trail-root-icon"], [1, "command-bar-right"], [1, "search-pill", "search-bar"], [1, "fa-solid", "fa-magnifying-glass", "search-icon"], ["type", "text", "placeholder", "Search files...", 1, "search-input", 3, "ngModelChange", "ngModel", "disabled"], ["type", "button", "title", "Clear search", 1, "search-clear-btn"], [1, "type-filter-select", "file-type-filter", 3, "ngModelChange", "ngModel", "disabled"], ["value", "all"], ["value", "files"], ["value", "folders"], ["type", "button", "title", "Search across all storage accounts", 1, "mj-btn-search-toggle", "multi-search-btn", 3, "click"], [1, "fa-solid", "fa-layer-group"], [1, "view-mode-toggle", "view-toggle"], ["type", "button", "title", "List View", 1, "view-mode-btn", "view-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["type", "button", "title", "Grid View", 1, "view-mode-btn", "view-btn", 3, "click"], [1, "fa-solid", "fa-table-cells-large"], ["type", "button", "title", "Create New Folder", 1, "mj-action-btn", "mj-action-btn--secondary", "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-folder-plus"], ["type", "button", "title", "Upload Files", 1, "mj-action-btn", "mj-action-btn--primary", "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-cloud-arrow-up"], ["type", "button", 1, "crumb-btn", 3, "click", "title"], [1, "crumb-separator"], ["type", "button", "title", "Clear search", 1, "search-clear-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "selection-bar-left"], [1, "selection-checkbox-wrap", 3, "click"], ["type", "checkbox", 3, "change", "checked"], [1, "selection-count"], [1, "selection-bar-right"], ["type", "button", "title", "Delete selected item(s)", 1, "sel-action-btn", "sel-action-btn--danger", 3, "click"], [1, "fa-solid", "fa-trash"], ["type", "button", "title", "Deselect all", 1, "sel-action-btn", "sel-action-btn--ghost", 3, "click"], ["type", "button", "title", "Preview file", 1, "sel-action-btn", 3, "click"], [1, "fa-solid", "fa-eye"], ["type", "button", "title", "Download file", 1, "sel-action-btn", 3, "click"], [1, "fa-solid", "fa-download"], ["type", "button", "title", "Copy to another storage account", 1, "sel-action-btn", 3, "click"], ["type", "button", "title", "Rename item", 1, "sel-action-btn", 3, "click"], [1, "fa-solid", "fa-pen"], ["type", "button", "title", "Copy to path", 1, "sel-action-btn", 3, "click"], [1, "fa-solid", "fa-copy"], ["type", "button", "title", "Move item", 1, "sel-action-btn", 3, "click"], [1, "fa-solid", "fa-arrows-up-down-left-right"], [1, "multi-search-header", "search-panel-header"], [1, "multi-search-title"], ["type", "button", "title", "Close search", 1, "modal-close-btn", "close-panel-btn", 3, "click"], [1, "multi-search-body", "search-panel-body"], [1, "multi-search-bar", "search-input-row"], ["type", "text", "placeholder", "Type query to search across connected accounts...", 1, "multi-search-text", "multi-search-input", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], ["type", "button", 1, "mj-action-btn", "mj-action-btn--primary", "search-execute-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-magnifying-glass"], [1, "multi-search-accounts", "provider-selection"], [1, "account-select-label", "provider-selection-label"], [1, "account-pill-list", "provider-checkboxes"], [1, "account-select-pill", "provider-checkbox", 3, "disabled", "checked"], [1, "multi-search-results", "search-results-container"], [1, "account-select-pill", "provider-checkbox"], ["type", "checkbox", 3, "change", "checked", "disabled"], [1, "pill-account-name", "provider-name"], [1, "pill-provider-tag", "provider-type"], [1, "pill-no-search", "no-search-badge"], [1, "results-meta-bar", "search-results-summary"], [1, "meta-count", "result-count"], [1, "meta-stats", "provider-stats"], ["type", "button", 1, "clear-results-btn", 3, "click"], [1, "results-groups", "provider-results-list"], [1, "result-group", "provider-result-group", 3, "failed"], [1, "result-group", "provider-result-group"], [1, "result-group-head", "provider-result-header"], [1, "fa-solid", "fa-cloud-bolt", "group-icon"], [1, "group-account-name", "provider-name"], [1, "group-count-badge", "result-count"], [1, "group-error-badge", "error-badge"], [1, "result-items-grid", "provider-result-files"], [1, "group-empty-text", "no-results-message"], [1, "search-item-row", "search-result-item"], [1, "search-item-icon", "file-icon"], [1, "search-item-info", "file-info"], [1, "search-item-name", "file-name"], [1, "search-item-path", "file-path"], [1, "search-item-size", "file-size"], [1, "search-item-date", "file-date"], ["text", "Loading files..."], ["Variant", "error", "Icon", "fa-solid fa-triangle-exclamation", "Title", "Unable to load files", "ActionText", "Retry", "ActionIcon", "fa-solid fa-arrows-rotate", 1, "file-grid-empty-fill", 3, "Action", "Message"], [1, "file-card", "grid-item", 3, "selected", "title"], [1, "file-card", "grid-item", 3, "click", "dblclick", "title"], [1, "file-card-header"], [1, "file-card-checkbox", 3, "click"], [1, "file-card-quick-actions", 3, "click"], [1, "file-card-icon-container", "grid-icon"], [1, "file-card-body"], [1, "file-card-name", "grid-name"], [1, "file-card-meta", "grid-meta"], [1, "meta-size"], [1, "meta-date"], ["type", "button", "title", "Preview", 1, "quick-action-btn", 3, "click"], ["type", "button", "title", "Download", 1, "quick-action-btn", 3, "click"], [1, "file-table"], [1, "th-check"], [1, "th-name", "col-name", 3, "click"], [1, "fa-solid", "sort-arrow", "sort-icon"], [1, "th-type", "col-type"], [1, "th-size", "col-size", 3, "click"], [1, "th-date", "col-modified", 3, "click"], [1, "th-actions"], [1, "file-table-row", "file-row", 3, "selected"], [1, "file-table-row", "file-row", 3, "click", "dblclick"], [1, "td-check", 3, "click"], [1, "td-name", "col-name"], [1, "row-name-wrap"], [1, "row-icon-badge"], [1, "item-icon"], [1, "row-file-name", "item-name", 3, "title"], [1, "td-type", "col-type"], [1, "type-badge", "item-type"], [1, "td-size", "col-size"], [1, "size-text", "item-size"], [1, "td-date", "col-modified"], [1, "date-text", "item-date"], [1, "td-actions", 3, "click"], [1, "row-action-buttons"], ["type", "button", "title", "Preview", 1, "row-act-btn", 3, "click"], ["type", "button", "title", "Download", 1, "row-act-btn", 3, "click"], ["Icon", "fa-solid fa-folder-open", "Title", "This folder is empty", "Message", "Drop files here to upload or create a new folder", "ActionText", "Upload Files", "ActionIcon", "fa-solid fa-cloud-arrow-up", 3, "Action"], [1, "status-count"], ["class", "status-account-badge", 4, "ngIf"], [1, "status-account-badge"], [1, "fa-solid", "fa-cloud"], [1, "drag-drop-content"], [1, "fa-solid", "fa-cloud-arrow-up", "drag-icon"], [1, "upload-progress-card"], [1, "upload-info"], [1, "fa-solid", "fa-spinner", "fa-spin", "upload-spinner"], [1, "upload-text"], [1, "progress-track"], [1, "progress-fill"], [1, "mj-modal-backdrop", 3, "click"], [1, "mj-modal-window", "preview-modal-window", 3, "click"], [1, "mj-modal-header"], [1, "modal-title-wrap"], [1, "modal-title"], [1, "modal-subtitle"], [1, "modal-header-actions"], ["type", "button", "title", "Download file", 1, "mj-action-btn", "mj-action-btn--secondary", 3, "click"], ["type", "button", "title", "Close preview", 1, "modal-close-btn", 3, "click"], [1, "preview-modal-body"], [1, "preview-loading"], [1, "preview-fallback"], ["text", "Loading preview..."], [1, "preview-media-wrap", "image-preview-wrap"], [1, "preview-media-wrap", "pdf-preview-wrap"], [1, "preview-media-wrap", "video-preview-wrap"], [1, "preview-media-wrap", "audio-preview-wrap"], [1, "preview-img", 3, "src", "alt"], ["title", "PDF Preview", 1, "preview-iframe", 3, "src"], ["controls", "", "autoplay", "", 1, "preview-video", 3, "src"], [1, "fa-solid", "fa-music", "preview-audio-icon"], ["controls", "", 1, "preview-audio", 3, "src"], [1, "preview-fallback-icon"], ["type", "button", 1, "mj-action-btn", "mj-action-btn--primary", 3, "click"], [1, "fa-solid", "fa-triangle-exclamation", "preview-fallback-icon"], [1, "mj-modal-backdrop", "modal-overlay", 3, "click"], [1, "mj-modal-window", "modal-compact", "modal-dialog", 3, "click"], [1, "mj-modal-header", "modal-header"], ["type", "button", 1, "modal-close-btn", "modal-close", 3, "click"], [1, "mj-modal-body", "modal-body"], [1, "form-label"], ["type", "text", "placeholder", "Enter folder name", "autofocus", "", 1, "form-input", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "mj-modal-footer", "modal-footer"], ["type", "button", 1, "mj-action-btn", "mj-action-btn--secondary", 3, "click", "disabled"], ["type", "button", 1, "mj-action-btn", "mj-action-btn--primary", 3, "click", "disabled"], [1, "modal-body-text"], [1, "modal-warning-banner", "warning"], ["type", "button", 1, "mj-action-btn", "mj-action-btn--danger", "danger", 3, "click", "disabled"], [1, "fa-solid", "fa-triangle-exclamation"], ["type", "text", "placeholder", "Enter new name", "autofocus", "", 1, "form-input", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "mj-modal-window", "modal-compact", 3, "click"], ["type", "button", 1, "modal-close-btn", 3, "click"], [1, "mj-modal-body"], ["type", "text", "placeholder", "path/to/destination", 1, "form-input", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "mj-modal-footer"], ["type", "text", "placeholder", "destination/folder/", 1, "form-input", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "mj-modal-window", 3, "click"], [1, "account-picker-list"], [1, "account-picker-item", 3, "for"], [1, "form-label", 2, "margin-top", "14px"], ["type", "text", "placeholder", "Filename", 1, "form-input", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "copy-progress-indicator"], ["type", "checkbox", 3, "change", "id", "checked", "disabled"], [1, "picker-name"], [1, "picker-badge"]], template: function FileGridComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FileGridComponent, selectors: [["mj-file-grid"]], inputs: { Account: "Account", account: "account", FolderPath: "FolderPath", folderPath: "folderPath" }, outputs: { FolderNavigate: "FolderNavigate", folderNavigate: "folderNavigate", FolderStructureChanged: "FolderStructureChanged", folderStructureChanged: "folderStructureChanged" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 19, vars: 18, consts: [[1, "file-grid-container", 3, "dragenter", "dragover", "dragleave", "drop"], [1, "command-bar", "breadcrumb-bar"], [1, "selection-bar"], [1, "multi-search-card", "multi-provider-search-panel"], [1, "grid-loading-container", "loading-state"], ["Variant", "error", "Icon", "fa-solid fa-triangle-exclamation", "Title", "Unable to load files", "ActionText", "Retry", "ActionIcon", "fa-solid fa-arrows-rotate", 1, "file-grid-empty-fill", 3, "Message"], [1, "file-cards-grid", "file-grid", "file-grid-wrapper"], [1, "file-table-container", "file-table-wrapper"], ["Icon", "fa-solid fa-folder-open", "Title", "This folder is empty", "Message", "Drop files here to upload or create a new folder", "ActionText", "Upload Files", "ActionIcon", "fa-solid fa-cloud-arrow-up"], [1, "status-bar"], [1, "drag-drop-overlay"], [1, "upload-progress-bar-wrap"], [1, "mj-modal-backdrop"], [1, "mj-modal-backdrop", "modal-overlay"], [1, "command-bar-left"], [1, "nav-btn-group", "nav-buttons"], ["type", "button", "title", "Go up to parent folder", 1, "mj-tool-btn", "nav-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-arrow-up"], ["type", "button", "title", "Refresh current folder", 1, "mj-tool-btn", "nav-btn", 3, "click"], [1, "fa-solid", "fa-arrows-rotate"], ["aria-label", "Folder Path", 1, "breadcrumb-trail", "breadcrumb-path"], [1, "fa-solid", "fa-folder-open", "trail-root-icon"], [1, "command-bar-right"], [1, "search-pill", "search-bar"], [1, "fa-solid", "fa-magnifying-glass", "search-icon"], ["type", "text", "placeholder", "Search files...", 1, "search-input", 3, "ngModelChange", "ngModel", "disabled"], ["type", "button", "title", "Clear search", 1, "search-clear-btn"], [1, "type-filter-select", "file-type-filter", 3, "ngModelChange", "ngModel", "disabled"], ["value", "all"], ["value", "files"], ["value", "folders"], ["type", "button", "title", "Search across all storage accounts", 1, "mj-btn-search-toggle", "multi-search-btn", 3, "click"], [1, "fa-solid", "fa-layer-group"], [1, "view-mode-toggle", "view-toggle"], ["type", "button", "title", "List View", 1, "view-mode-btn", "view-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["type", "button", "title", "Grid View", 1, "view-mode-btn", "view-btn", 3, "click"], [1, "fa-solid", "fa-table-cells-large"], ["type", "button", "title", "Create New Folder", 1, "mj-action-btn", "mj-action-btn--secondary", "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-folder-plus"], ["type", "button", "title", "Upload Files", 1, "mj-action-btn", "mj-action-btn--primary", "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-cloud-arrow-up"], ["type", "button", 1, "crumb-btn", 3, "click", "title"], [1, "crumb-separator"], ["type", "button", "title", "Clear search", 1, "search-clear-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "selection-bar-left"], [1, "selection-checkbox-wrap", 3, "click"], ["type", "checkbox", 3, "change", "checked"], [1, "selection-count"], [1, "selection-bar-right"], ["type", "button", "title", "Delete selected item(s)", 1, "sel-action-btn", "sel-action-btn--danger", 3, "click"], [1, "fa-solid", "fa-trash"], ["type", "button", "title", "Deselect all", 1, "sel-action-btn", "sel-action-btn--ghost", 3, "click"], ["type", "button", "title", "Preview file", 1, "sel-action-btn", 3, "click"], [1, "fa-solid", "fa-eye"], ["type", "button", "title", "Download file", 1, "sel-action-btn", 3, "click"], [1, "fa-solid", "fa-download"], ["type", "button", "title", "Copy to another storage account", 1, "sel-action-btn", 3, "click"], ["type", "button", "title", "Rename item", 1, "sel-action-btn", 3, "click"], [1, "fa-solid", "fa-pen"], ["type", "button", "title", "Copy to path", 1, "sel-action-btn", 3, "click"], [1, "fa-solid", "fa-copy"], ["type", "button", "title", "Move item", 1, "sel-action-btn", 3, "click"], [1, "fa-solid", "fa-arrows-up-down-left-right"], [1, "multi-search-header", "search-panel-header"], [1, "multi-search-title"], ["type", "button", "title", "Close search", 1, "modal-close-btn", "close-panel-btn", 3, "click"], [1, "multi-search-body", "search-panel-body"], [1, "multi-search-bar", "search-input-row"], ["type", "text", "placeholder", "Type query to search across connected accounts...", 1, "multi-search-text", "multi-search-input", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], ["type", "button", 1, "mj-action-btn", "mj-action-btn--primary", "search-execute-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-magnifying-glass"], [1, "multi-search-accounts", "provider-selection"], [1, "account-select-label", "provider-selection-label"], [1, "account-pill-list", "provider-checkboxes"], [1, "account-select-pill", "provider-checkbox", 3, "disabled", "checked"], [1, "multi-search-results", "search-results-container"], [1, "account-select-pill", "provider-checkbox"], ["type", "checkbox", 3, "change", "checked", "disabled"], [1, "pill-account-name", "provider-name"], [1, "pill-provider-tag", "provider-type"], [1, "pill-no-search", "no-search-badge"], [1, "results-meta-bar", "search-results-summary"], [1, "meta-count", "result-count"], [1, "meta-stats", "provider-stats"], ["type", "button", 1, "clear-results-btn", 3, "click"], [1, "results-groups", "provider-results-list"], [1, "result-group", "provider-result-group", 3, "failed"], [1, "result-group", "provider-result-group"], [1, "result-group-head", "provider-result-header"], [1, "fa-solid", "fa-cloud-bolt", "group-icon"], [1, "group-account-name", "provider-name"], [1, "group-count-badge", "result-count"], [1, "group-error-badge", "error-badge"], [1, "result-items-grid", "provider-result-files"], [1, "group-empty-text", "no-results-message"], [1, "search-item-row", "search-result-item"], [1, "search-item-icon", "file-icon"], [1, "search-item-info", "file-info"], [1, "search-item-name", "file-name"], [1, "search-item-path", "file-path"], [1, "search-item-size", "file-size"], [1, "search-item-date", "file-date"], ["text", "Loading files..."], ["Variant", "error", "Icon", "fa-solid fa-triangle-exclamation", "Title", "Unable to load files", "ActionText", "Retry", "ActionIcon", "fa-solid fa-arrows-rotate", 1, "file-grid-empty-fill", 3, "Action", "Message"], [1, "file-card", "grid-item", 3, "selected", "title"], [1, "file-card", "grid-item", 3, "click", "dblclick", "title"], [1, "file-card-header"], [1, "file-card-checkbox", 3, "click"], [1, "file-card-quick-actions", 3, "click"], [1, "file-card-icon-container", "grid-icon"], [1, "file-card-body"], [1, "file-card-name", "grid-name"], [1, "file-card-meta", "grid-meta"], [1, "meta-size"], [1, "meta-date"], ["type", "button", "title", "Preview", 1, "quick-action-btn", 3, "click"], ["type", "button", "title", "Download", 1, "quick-action-btn", 3, "click"], [1, "file-table"], [1, "th-check"], [1, "th-name", "col-name", 3, "click"], [1, "fa-solid", "sort-arrow", "sort-icon"], [1, "th-type", "col-type"], [1, "th-size", "col-size", 3, "click"], [1, "th-date", "col-modified", 3, "click"], [1, "th-actions"], [1, "file-table-row", "file-row", 3, "selected"], [1, "file-table-row", "file-row", 3, "click", "dblclick"], [1, "td-check", 3, "click"], [1, "td-name", "col-name"], [1, "row-name-wrap"], [1, "row-icon-badge"], [1, "item-icon"], [1, "row-file-name", "item-name", 3, "title"], [1, "td-type", "col-type"], [1, "type-badge", "item-type"], [1, "td-size", "col-size"], [1, "size-text", "item-size"], [1, "td-date", "col-modified"], [1, "date-text", "item-date"], [1, "td-actions", 3, "click"], [1, "row-action-buttons"], ["type", "button", "title", "Preview", 1, "row-act-btn", 3, "click"], ["type", "button", "title", "Download", 1, "row-act-btn", 3, "click"], ["Icon", "fa-solid fa-folder-open", "Title", "This folder is empty", "Message", "Drop files here to upload or create a new folder", "ActionText", "Upload Files", "ActionIcon", "fa-solid fa-cloud-arrow-up", 3, "Action"], [1, "status-count"], ["class", "status-account-badge", 4, "ngIf"], [1, "status-account-badge"], [1, "fa-solid", "fa-cloud"], [1, "drag-drop-content"], [1, "fa-solid", "fa-cloud-arrow-up", "drag-icon"], [1, "upload-progress-card"], [1, "upload-info"], [1, "fa-solid", "fa-spinner", "fa-spin", "upload-spinner"], [1, "upload-text"], [1, "progress-track"], [1, "progress-fill"], [1, "mj-modal-backdrop", 3, "click"], [1, "mj-modal-window", "preview-modal-window", 3, "click"], [1, "mj-modal-header"], [1, "modal-title-wrap"], [1, "modal-title"], [1, "modal-subtitle"], [1, "modal-header-actions"], ["type", "button", "title", "Download file", 1, "mj-action-btn", "mj-action-btn--secondary", 3, "click"], ["type", "button", "title", "Close preview", 1, "modal-close-btn", 3, "click"], [1, "preview-modal-body"], [1, "preview-loading"], [1, "preview-fallback"], ["text", "Loading preview..."], [1, "preview-media-wrap", "image-preview-wrap"], [1, "preview-media-wrap", "pdf-preview-wrap"], [1, "preview-media-wrap", "video-preview-wrap"], [1, "preview-media-wrap", "audio-preview-wrap"], [1, "preview-img", 3, "src", "alt"], ["title", "PDF Preview", 1, "preview-iframe", 3, "src"], ["controls", "", "autoplay", "", 1, "preview-video", 3, "src"], [1, "fa-solid", "fa-music", "preview-audio-icon"], ["controls", "", 1, "preview-audio", 3, "src"], [1, "preview-fallback-icon"], ["type", "button", 1, "mj-action-btn", "mj-action-btn--primary", 3, "click"], [1, "fa-solid", "fa-triangle-exclamation", "preview-fallback-icon"], [1, "mj-modal-backdrop", "modal-overlay", 3, "click"], [1, "mj-modal-window", "modal-compact", "modal-dialog", 3, "click"], [1, "mj-modal-header", "modal-header"], ["type", "button", 1, "modal-close-btn", "modal-close", 3, "click"], [1, "mj-modal-body", "modal-body"], [1, "form-label"], ["type", "text", "placeholder", "Enter folder name", "autofocus", "", 1, "form-input", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "mj-modal-footer", "modal-footer"], ["type", "button", 1, "mj-action-btn", "mj-action-btn--secondary", 3, "click", "disabled"], ["type", "button", 1, "mj-action-btn", "mj-action-btn--primary", 3, "click", "disabled"], [1, "modal-body-text"], [1, "modal-warning-banner", "warning"], ["type", "button", 1, "mj-action-btn", "mj-action-btn--danger", "danger", 3, "click", "disabled"], [1, "fa-solid", "fa-triangle-exclamation"], ["type", "text", "placeholder", "Enter new name", "autofocus", "", 1, "form-input", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "mj-modal-window", "modal-compact", 3, "click"], ["type", "button", 1, "modal-close-btn", 3, "click"], [1, "mj-modal-body"], ["type", "text", "placeholder", "path/to/destination", 1, "form-input", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "mj-modal-footer"], ["type", "text", "placeholder", "destination/folder/", 1, "form-input", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "mj-modal-window", 3, "click"], [1, "account-picker-list"], [1, "account-picker-item", 3, "for"], [1, "form-label", 2, "margin-top", "14px"], ["type", "text", "placeholder", "Filename", 1, "form-input", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "copy-progress-indicator"], ["type", "checkbox", 3, "change", "id", "checked", "disabled"], [1, "picker-name"], [1, "picker-badge"]], template: function FileGridComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵlistener("dragenter", function FileGridComponent_Template_div_dragenter_0_listener($event) { return ctx.onDragEnter($event); })("dragover", function FileGridComponent_Template_div_dragover_0_listener($event) { return ctx.onDragOver($event); })("dragleave", function FileGridComponent_Template_div_dragleave_0_listener($event) { return ctx.onDragLeave($event); })("drop", function FileGridComponent_Template_div_drop_0_listener($event) { return ctx.onDrop($event); });
             i0.ɵɵconditionalCreate(1, FileGridComponent_Conditional_1_Template, 40, 12, "div", 1);
@@ -2745,13 +3381,21 @@ export class FileGridComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FileGridComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-file-grid', template: "<div class=\"file-grid-container\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\">\n\n  <!-- Top Command Bar: Breadcrumbs & Primary Actions -->\n  @if (!isLoading && !errorMessage) {\n    <div class=\"command-bar breadcrumb-bar\">\n      <!-- Left: Breadcrumb Navigation Trail -->\n      <div class=\"command-bar-left\">\n        <div class=\"nav-btn-group nav-buttons\">\n          <button\n            type=\"button\"\n            class=\"mj-tool-btn nav-btn\"\n            [disabled]=\"!canNavigateUp()\"\n            (click)=\"navigateUp()\"\n            title=\"Go up to parent folder\">\n            <i class=\"fa-solid fa-arrow-up\"></i>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mj-tool-btn nav-btn\"\n            (click)=\"refresh()\"\n            title=\"Refresh current folder\">\n            <i class=\"fa-solid fa-arrows-rotate\"></i>\n          </button>\n        </div>\n\n        <nav class=\"breadcrumb-trail breadcrumb-path\" aria-label=\"Folder Path\">\n          <i class=\"fa-solid fa-folder-open trail-root-icon\"></i>\n          @for (crumb of getPathBreadcrumbs(); track crumb.path; let last = $last) {\n            <button\n              type=\"button\"\n              class=\"crumb-btn\"\n              [class.current]=\"last\"\n              (click)=\"navigateToBreadcrumb(crumb.path)\"\n              [title]=\"crumb.name\">\n              {{ crumb.name }}\n            </button>\n            @if (!last) {\n              <span class=\"crumb-separator\">/</span>\n            }\n          }\n        </nav>\n      </div>\n\n      <!-- Right: Search, Filter, View Mode & Action Buttons -->\n      <div class=\"command-bar-right\">\n        <!-- Search & Filter Bar -->\n        <div class=\"search-pill search-bar\">\n          <i class=\"fa-solid fa-magnifying-glass search-icon\"></i>\n          <input\n            type=\"text\"\n            class=\"search-input\"\n            [(ngModel)]=\"searchQuery\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            placeholder=\"Search files...\"\n            [disabled]=\"isLoading || isMultiProviderSearchMode\" />\n          @if (searchQuery && !isMultiProviderSearchMode) {\n            <button\n              type=\"button\"\n              class=\"search-clear-btn\"\n              (click)=\"clearSearch()\"\n              title=\"Clear search\">\n              <i class=\"fa-solid fa-xmark\"></i>\n            </button>\n          }\n          <select\n            class=\"type-filter-select file-type-filter\"\n            [(ngModel)]=\"fileTypeFilter\"\n            (ngModelChange)=\"onFileTypeFilterChange($event)\"\n            [disabled]=\"isLoading || isMultiProviderSearchMode\">\n            <option value=\"all\">All Items</option>\n            <option value=\"files\">Files only</option>\n            <option value=\"folders\">Folders only</option>\n          </select>\n        </div>\n\n        <!-- Search Across Accounts Toggle -->\n        <button\n          type=\"button\"\n          class=\"mj-btn-search-toggle multi-search-btn\"\n          [class.active]=\"isMultiProviderSearchMode\"\n          (click)=\"toggleMultiAccountSearchMode()\"\n          title=\"Search across all storage accounts\">\n          <i class=\"fa-solid fa-layer-group\"></i>\n          <span>All Accounts</span>\n        </button>\n\n        <!-- View Switcher -->\n        <div class=\"view-mode-toggle view-toggle\">\n          <button\n            type=\"button\"\n            class=\"view-mode-btn view-btn\"\n            [class.active]=\"viewMode === 'list'\"\n            (click)=\"viewMode = 'list'\"\n            title=\"List View\">\n            <i class=\"fa-solid fa-list\"></i>\n          </button>\n          <button\n            type=\"button\"\n            class=\"view-mode-btn view-btn\"\n            [class.active]=\"viewMode === 'grid'\"\n            (click)=\"viewMode = 'grid'\"\n            title=\"Grid View\">\n            <i class=\"fa-solid fa-table-cells-large\"></i>\n          </button>\n        </div>\n\n        <!-- Primary Action CTAs -->\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--secondary toolbar-btn\"\n          (click)=\"onNewFolderClick()\"\n          title=\"Create New Folder\">\n          <i class=\"fa-solid fa-folder-plus\"></i>\n          <span>New Folder</span>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--primary toolbar-btn\"\n          (click)=\"onUploadClick()\"\n          title=\"Upload Files\">\n          <i class=\"fa-solid fa-cloud-arrow-up\"></i>\n          <span>Upload</span>\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Selection Action Bar (Appears when 1+ items selected) -->\n  @if (selectedItems.length > 0 && !isMultiProviderSearchMode) {\n    <div class=\"selection-bar\">\n      <div class=\"selection-bar-left\">\n        <label class=\"selection-checkbox-wrap\" (click)=\"$event.stopPropagation()\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"areAllSelected()\"\n            (change)=\"areAllSelected() ? deselectAll() : selectAll()\" />\n          <span class=\"selection-count\">{{ selectedItems.length }} item{{ selectedItems.length === 1 ? '' : 's' }} selected</span>\n        </label>\n      </div>\n\n      <div class=\"selection-bar-right\">\n        @if (selectedItems.length === 1 && getSelectedItem()?.type === 'file') {\n          <button\n            type=\"button\"\n            class=\"sel-action-btn\"\n            (click)=\"openPreview(getSelectedItem()!)\"\n            title=\"Preview file\">\n            <i class=\"fa-solid fa-eye\"></i>\n            <span>Preview</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sel-action-btn\"\n            (click)=\"onDownloadClick()\"\n            title=\"Download file\">\n            <i class=\"fa-solid fa-download\"></i>\n            <span>Download</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sel-action-btn\"\n            (click)=\"onCopyToAccountClick()\"\n            title=\"Copy to another storage account\">\n            <i class=\"fa-solid fa-cloud-arrow-up\"></i>\n            <span>Copy to...</span>\n          </button>\n        }\n        @if (selectedItems.length === 1) {\n          <button\n            type=\"button\"\n            class=\"sel-action-btn\"\n            (click)=\"onRenameClick()\"\n            title=\"Rename item\">\n            <i class=\"fa-solid fa-pen\"></i>\n            <span>Rename</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sel-action-btn\"\n            (click)=\"onCopyClick()\"\n            title=\"Copy to path\">\n            <i class=\"fa-solid fa-copy\"></i>\n            <span>Copy</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sel-action-btn\"\n            (click)=\"onMoveClick()\"\n            title=\"Move item\">\n            <i class=\"fa-solid fa-arrows-up-down-left-right\"></i>\n            <span>Move</span>\n          </button>\n        }\n        <button\n          type=\"button\"\n          class=\"sel-action-btn sel-action-btn--danger\"\n          (click)=\"onDeleteClick()\"\n          title=\"Delete selected item(s)\">\n          <i class=\"fa-solid fa-trash\"></i>\n          <span>Delete</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"sel-action-btn sel-action-btn--ghost\"\n          (click)=\"deselectAll()\"\n          title=\"Deselect all\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Multi-Provider Search Panel -->\n  @if (isMultiProviderSearchMode) {\n    <div class=\"multi-search-card multi-provider-search-panel\">\n      <div class=\"multi-search-header search-panel-header\">\n        <div class=\"multi-search-title\">\n          <i class=\"fa-solid fa-layer-group\"></i>\n          <h3>Search Across Storage Accounts</h3>\n        </div>\n        <button\n          type=\"button\"\n          class=\"modal-close-btn close-panel-btn\"\n          (click)=\"toggleMultiAccountSearchMode()\"\n          title=\"Close search\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n\n      <div class=\"multi-search-body search-panel-body\">\n        <div class=\"multi-search-bar search-input-row\">\n          <input\n            type=\"text\"\n            class=\"multi-search-text multi-search-input\"\n            [(ngModel)]=\"multiProviderSearchQuery\"\n            placeholder=\"Type query to search across connected accounts...\"\n            (keydown.enter)=\"executeMultiAccountSearch()\"\n            [disabled]=\"isSearching\" />\n          <button\n            type=\"button\"\n            class=\"mj-action-btn mj-action-btn--primary search-execute-btn\"\n            (click)=\"executeMultiAccountSearch()\"\n            [disabled]=\"isSearching || !multiProviderSearchQuery.trim() || selectedSearchProviders.size === 0\">\n            @if (isSearching) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            } @else {\n              <i class=\"fa-solid fa-magnifying-glass\"></i>\n            }\n            <span>{{ isSearching ? 'Searching...' : 'Search Accounts' }}</span>\n          </button>\n        </div>\n\n        <div class=\"multi-search-accounts provider-selection\">\n          <span class=\"account-select-label provider-selection-label\">Target Accounts:</span>\n          <div class=\"account-pill-list provider-checkboxes\">\n            @for (a of availableAccounts; track a.account.ID) {\n              <label\n                class=\"account-select-pill provider-checkbox\"\n                [class.disabled]=\"!accountSupportsSearch(a)\"\n                [class.checked]=\"isAccountSelectedForSearch(a.account.ID)\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isAccountSelectedForSearch(a.account.ID)\"\n                  (change)=\"toggleSearchAccount(a.account.ID)\"\n                  [disabled]=\"!accountSupportsSearch(a)\" />\n                <span class=\"pill-account-name provider-name\">{{ a.account.Name }}</span>\n                <span class=\"pill-provider-tag provider-type\">{{ a.provider.Name }}</span>\n                @if (!accountSupportsSearch(a)) {\n                  <span class=\"pill-no-search no-search-badge\">(no search)</span>\n                }\n              </label>\n            }\n          </div>\n        </div>\n      </div>\n\n      <!-- Search Results -->\n      @if (multiProviderSearchResults) {\n        <div class=\"multi-search-results search-results-container\">\n          <div class=\"results-meta-bar search-results-summary\">\n            <span class=\"meta-count result-count\">\n              <strong>{{ multiProviderSearchResults.totalResultsReturned }}</strong> result{{ multiProviderSearchResults.totalResultsReturned === 1 ? '' : 's' }} found\n            </span>\n            <span class=\"meta-stats provider-stats\">\n              ({{ multiProviderSearchResults.successfulAccounts }} account{{ multiProviderSearchResults.successfulAccounts === 1 ? '' : 's' }} searched)\n            </span>\n            <button\n              type=\"button\"\n              class=\"clear-results-btn\"\n              (click)=\"clearMultiProviderSearch()\">\n              <i class=\"fa-solid fa-xmark\"></i> Clear Results\n            </button>\n          </div>\n\n          <div class=\"results-groups provider-results-list\">\n            @for (accountResult of multiProviderSearchResults.accountResults; track accountResult.accountID) {\n              <div class=\"result-group provider-result-group\" [class.failed]=\"!accountResult.success\">\n                <div class=\"result-group-head provider-result-header\">\n                  <i class=\"fa-solid fa-cloud-bolt group-icon\"></i>\n                  <span class=\"group-account-name provider-name\">{{ accountResult.accountName }}</span>\n                  @if (accountResult.success) {\n                    <span class=\"group-count-badge result-count\">{{ accountResult.results.length }}</span>\n                  } @else {\n                    <span class=\"group-error-badge error-badge\">{{ accountResult.errorMessage }}</span>\n                  }\n                </div>\n\n                @if (accountResult.success && accountResult.results.length > 0) {\n                  <div class=\"result-items-grid provider-result-files\">\n                    @for (file of accountResult.results; track file.path) {\n                      <div class=\"search-item-row search-result-item\">\n                        <i [class]=\"getSearchResultIcon(file)\" class=\"search-item-icon file-icon\"></i>\n                        <div class=\"search-item-info file-info\">\n                          <span class=\"search-item-name file-name\">{{ file.name }}</span>\n                          <span class=\"search-item-path file-path\">{{ file.path }}</span>\n                        </div>\n                        <span class=\"search-item-size file-size\">{{ formatSearchResultSize(file.size) }}</span>\n                        <span class=\"search-item-date file-date\">{{ formatSearchResultDate(file.lastModified) }}</span>\n                      </div>\n                    }\n                  </div>\n                }\n                @if (accountResult.success && accountResult.results.length === 0) {\n                  <div class=\"group-empty-text no-results-message\">No matching files found in this account</div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Loading State -->\n  @if (isLoading && !isMultiProviderSearchMode) {\n    <div class=\"grid-loading-container loading-state\">\n      <mj-loading text=\"Loading files...\"></mj-loading>\n    </div>\n  }\n\n  <!-- Error State -->\n  @if (errorMessage && !isLoading) {\n    <mj-empty-state\n      class=\"file-grid-empty-fill\"\n      Variant=\"error\"\n      Icon=\"fa-solid fa-triangle-exclamation\"\n      Title=\"Unable to load files\"\n      [Message]=\"errorMessage\"\n      ActionText=\"Retry\"\n      ActionIcon=\"fa-solid fa-arrows-rotate\"\n      (Action)=\"refresh()\" />\n  }\n\n  <!-- Grid View -->\n  @if (!isLoading && !errorMessage && filteredItems.length > 0 && viewMode === 'grid') {\n    <div class=\"file-cards-grid file-grid file-grid-wrapper\">\n      @for (item of filteredItems; track item.key) {\n        <div\n          class=\"file-card grid-item\"\n          [class.selected]=\"selectedItems.includes(item.key)\"\n          (click)=\"onTileClick(item, $event)\"\n          (dblclick)=\"onItemDoubleClick(item)\"\n          [title]=\"item.name\">\n\n          <!-- Card Top Row: Checkbox & Quick Actions -->\n          <div class=\"file-card-header\">\n            <label class=\"file-card-checkbox\" (click)=\"$event.stopPropagation()\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"selectedItems.includes(item.key)\"\n                (change)=\"toggleItemSelection(item, $event)\" />\n            </label>\n            <div class=\"file-card-quick-actions\" (click)=\"$event.stopPropagation()\">\n              @if (item.type === 'file') {\n                <button\n                  type=\"button\"\n                  class=\"quick-action-btn\"\n                  (click)=\"openPreview(item)\"\n                  title=\"Preview\">\n                  <i class=\"fa-solid fa-eye\"></i>\n                </button>\n                <button\n                  type=\"button\"\n                  class=\"quick-action-btn\"\n                  (click)=\"downloadFile(item)\"\n                  title=\"Download\">\n                  <i class=\"fa-solid fa-download\"></i>\n                </button>\n              }\n            </div>\n          </div>\n\n          <!-- Card Thumbnail/Icon -->\n          <div class=\"file-card-icon-container grid-icon\" [class]=\"getItemColorClass(item)\">\n            <i [class]=\"getItemIcon(item)\"></i>\n          </div>\n\n          <!-- Card Body: Name & Meta -->\n          <div class=\"file-card-body\">\n            <span class=\"file-card-name grid-name\">{{ item.name }}</span>\n            <div class=\"file-card-meta grid-meta\">\n              <span class=\"meta-size\">{{ item.type === 'folder' ? 'Folder' : formatFileSize(item.size) }}</span>\n              <span class=\"meta-date\">{{ formatDate(item.lastModified) }}</span>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- List View Table -->\n  @if (!isLoading && !errorMessage && filteredItems.length > 0 && viewMode === 'list') {\n    <div class=\"file-table-container file-table-wrapper\">\n      <table class=\"file-table\">\n        <thead>\n          <tr>\n            <th class=\"th-check\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"areAllSelected()\"\n                (change)=\"areAllSelected() ? deselectAll() : selectAll()\" />\n            </th>\n            <th class=\"th-name col-name\" (click)=\"onSortChange([{ field: 'name', dir: sort[0].field === 'name' && sort[0].dir === 'asc' ? 'desc' : 'asc' }])\">\n              <span>Name</span>\n              <i class=\"fa-solid sort-arrow sort-icon\"\n                [class.fa-caret-up]=\"sort[0].field === 'name' && sort[0].dir === 'asc'\"\n                [class.fa-caret-down]=\"sort[0].field === 'name' && sort[0].dir === 'desc'\"\n                [class.fa-sort]=\"sort[0].field !== 'name'\"></i>\n            </th>\n            <th class=\"th-type col-type\">Type</th>\n            <th class=\"th-size col-size\" (click)=\"onSortChange([{ field: 'size', dir: sort[0].field === 'size' && sort[0].dir === 'asc' ? 'desc' : 'asc' }])\">\n              <span>Size</span>\n              <i class=\"fa-solid sort-arrow sort-icon\"\n                [class.fa-caret-up]=\"sort[0].field === 'size' && sort[0].dir === 'asc'\"\n                [class.fa-caret-down]=\"sort[0].field === 'size' && sort[0].dir === 'desc'\"\n                [class.fa-sort]=\"sort[0].field !== 'size'\"></i>\n            </th>\n            <th class=\"th-date col-modified\" (click)=\"onSortChange([{ field: 'lastModified', dir: sort[0].field === 'lastModified' && sort[0].dir === 'asc' ? 'desc' : 'asc' }])\">\n              <span>Modified</span>\n              <i class=\"fa-solid sort-arrow sort-icon\"\n                [class.fa-caret-up]=\"sort[0].field === 'lastModified' && sort[0].dir === 'asc'\"\n                [class.fa-caret-down]=\"sort[0].field === 'lastModified' && sort[0].dir === 'desc'\"\n                [class.fa-sort]=\"sort[0].field !== 'lastModified'\"></i>\n            </th>\n            <th class=\"th-actions\">Actions</th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (item of filteredItems; track item.key) {\n            <tr\n              class=\"file-table-row file-row\"\n              [class.selected]=\"selectedItems.includes(item.key)\"\n              (click)=\"onTileClick(item, $event)\"\n              (dblclick)=\"onItemDoubleClick(item)\">\n              <td class=\"td-check\" (click)=\"$event.stopPropagation()\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"selectedItems.includes(item.key)\"\n                  (change)=\"toggleItemSelection(item, $event)\" />\n              </td>\n              <td class=\"td-name col-name\">\n                <div class=\"row-name-wrap\">\n                  <div class=\"row-icon-badge\" [class]=\"getItemColorClass(item)\">\n                    <i [class]=\"getItemIcon(item)\" class=\"item-icon\"></i>\n                  </div>\n                  <span class=\"row-file-name item-name\" [title]=\"item.name\">{{ item.name }}</span>\n                </div>\n              </td>\n              <td class=\"td-type col-type\">\n                <span class=\"type-badge item-type\">{{ getFileType(item) }}</span>\n              </td>\n              <td class=\"td-size col-size\">\n                <span class=\"size-text item-size\">{{ item.type === 'folder' ? '\u2014' : formatFileSize(item.size) }}</span>\n              </td>\n              <td class=\"td-date col-modified\">\n                <span class=\"date-text item-date\">{{ formatDate(item.lastModified) }}</span>\n              </td>\n              <td class=\"td-actions\" (click)=\"$event.stopPropagation()\">\n                <div class=\"row-action-buttons\">\n                  @if (item.type === 'file') {\n                    <button\n                      type=\"button\"\n                      class=\"row-act-btn\"\n                      (click)=\"openPreview(item)\"\n                      title=\"Preview\">\n                      <i class=\"fa-solid fa-eye\"></i>\n                    </button>\n                    <button\n                      type=\"button\"\n                      class=\"row-act-btn\"\n                      (click)=\"downloadFile(item)\"\n                      title=\"Download\">\n                      <i class=\"fa-solid fa-download\"></i>\n                    </button>\n                  }\n                </div>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  }\n\n  <!-- Empty State -->\n  @if (!isLoading && !errorMessage && filteredItems.length === 0 && !isMultiProviderSearchMode) {\n    <mj-empty-state\n      Icon=\"fa-solid fa-folder-open\"\n      Title=\"This folder is empty\"\n      Message=\"Drop files here to upload or create a new folder\"\n      ActionText=\"Upload Files\"\n      ActionIcon=\"fa-solid fa-cloud-arrow-up\"\n      (Action)=\"onUploadClick()\" />\n  }\n\n  <!-- Bottom Status Bar -->\n  @if (!isLoading && !errorMessage) {\n    <div class=\"status-bar\">\n      <span class=\"status-count\">\n        {{ filteredItems.length }} item{{ filteredItems.length === 1 ? '' : 's' }}\n        @if (searchQuery) {\n          (filtered)\n        }\n      </span>\n      <div class=\"status-account-badge\" *ngIf=\"account\">\n        <i class=\"fa-solid fa-cloud\"></i>\n        <span>{{ account.account.Name }} ({{ account.provider.Name }})</span>\n      </div>\n    </div>\n  }\n\n  <!-- Drag & Drop Upload Overlay -->\n  @if (isDragging) {\n    <div class=\"drag-drop-overlay\">\n      <div class=\"drag-drop-content\">\n        <i class=\"fa-solid fa-cloud-arrow-up drag-icon\"></i>\n        <h3>Drop files here to upload</h3>\n        <p>Files will be stored in {{ folderPath || 'Root' }}</p>\n      </div>\n    </div>\n  }\n\n  <!-- Upload Progress Bar -->\n  @if (isUploading) {\n    <div class=\"upload-progress-bar-wrap\">\n      <div class=\"upload-progress-card\">\n        <div class=\"upload-info\">\n          <i class=\"fa-solid fa-spinner fa-spin upload-spinner\"></i>\n          <span class=\"upload-text\">Uploading {{ uploadingFileName }}...</span>\n        </div>\n        <div class=\"progress-track\">\n          <div class=\"progress-fill\" [style.width.%]=\"uploadProgress\"></div>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n\n<!-- ==========================================================================\n     MODAL DIALOGS (Design Tokens, Smooth Animations, Backdrop Blurs)\n     ========================================================================== -->\n\n<!-- File Preview Modal -->\n@if (showPreviewModal && previewItem) {\n  <div class=\"mj-modal-backdrop\" (click)=\"closePreview()\">\n    <div class=\"mj-modal-window preview-modal-window\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mj-modal-header\">\n        <div class=\"modal-title-wrap\">\n          <div class=\"row-icon-badge\" [class]=\"getItemColorClass(previewItem)\">\n            <i [class]=\"getItemIcon(previewItem)\"></i>\n          </div>\n          <div>\n            <h3 class=\"modal-title\">{{ previewItem.name }}</h3>\n            <span class=\"modal-subtitle\">{{ formatFileSize(previewItem.size) }} &bull; {{ formatDate(previewItem.lastModified) }}</span>\n          </div>\n        </div>\n        <div class=\"modal-header-actions\">\n          <button\n            type=\"button\"\n            class=\"mj-action-btn mj-action-btn--secondary\"\n            (click)=\"downloadFile(previewItem)\"\n            title=\"Download file\">\n            <i class=\"fa-solid fa-download\"></i>\n            <span>Download</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"modal-close-btn\"\n            (click)=\"closePreview()\"\n            title=\"Close preview\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n      </div>\n\n      <div class=\"preview-modal-body\">\n        @if (isLoadingPreview) {\n          <div class=\"preview-loading\">\n            <mj-loading text=\"Loading preview...\"></mj-loading>\n          </div>\n        } @else if (previewUrl) {\n          @switch (previewMediaType) {\n            @case ('image') {\n              <div class=\"preview-media-wrap image-preview-wrap\">\n                <img [src]=\"previewUrl\" [alt]=\"previewItem.name\" class=\"preview-img\" />\n              </div>\n            }\n            @case ('pdf') {\n              <div class=\"preview-media-wrap pdf-preview-wrap\">\n                <iframe [src]=\"previewUrl\" class=\"preview-iframe\" title=\"PDF Preview\"></iframe>\n              </div>\n            }\n            @case ('video') {\n              <div class=\"preview-media-wrap video-preview-wrap\">\n                <video [src]=\"previewUrl\" controls autoplay class=\"preview-video\"></video>\n              </div>\n            }\n            @case ('audio') {\n              <div class=\"preview-media-wrap audio-preview-wrap\">\n                <i class=\"fa-solid fa-music preview-audio-icon\"></i>\n                <audio [src]=\"previewUrl\" controls class=\"preview-audio\"></audio>\n              </div>\n            }\n            @default {\n              <div class=\"preview-fallback\">\n                <i [class]=\"getItemIcon(previewItem)\" class=\"preview-fallback-icon\"></i>\n                <h4>{{ previewItem.name }}</h4>\n                <p>Preview is not supported for this file type.</p>\n                <button\n                  type=\"button\"\n                  class=\"mj-action-btn mj-action-btn--primary\"\n                  (click)=\"downloadFile(previewItem)\">\n                  <i class=\"fa-solid fa-download\"></i>\n                  <span>Download File</span>\n                </button>\n              </div>\n            }\n          }\n        } @else {\n          <div class=\"preview-fallback\">\n            <i class=\"fa-solid fa-triangle-exclamation preview-fallback-icon\"></i>\n            <h4>Preview unavailable</h4>\n            <p>Could not generate a preview link for this file.</p>\n            <button\n              type=\"button\"\n              class=\"mj-action-btn mj-action-btn--primary\"\n              (click)=\"downloadFile(previewItem)\">\n              <i class=\"fa-solid fa-download\"></i>\n              <span>Download File</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- New Folder Modal -->\n@if (showNewFolderDialog) {\n  <div class=\"mj-modal-backdrop modal-overlay\" (click)=\"onCancelNewFolder()\">\n    <div class=\"mj-modal-window modal-compact modal-dialog\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mj-modal-header modal-header\">\n        <h3 class=\"modal-title\">Create New Folder</h3>\n        <button type=\"button\" class=\"modal-close-btn modal-close\" (click)=\"onCancelNewFolder()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n      <div class=\"mj-modal-body modal-body\">\n        <label class=\"form-label\">Folder name:</label>\n        <input\n          type=\"text\"\n          class=\"form-input\"\n          [(ngModel)]=\"newFolderName\"\n          [disabled]=\"isCreatingFolder\"\n          placeholder=\"Enter folder name\"\n          (keydown.enter)=\"onCreateFolder()\"\n          autofocus />\n      </div>\n      <div class=\"mj-modal-footer modal-footer\">\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--secondary\"\n          (click)=\"onCancelNewFolder()\"\n          [disabled]=\"isCreatingFolder\">\n          Cancel\n        </button>\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--primary\"\n          (click)=\"onCreateFolder()\"\n          [disabled]=\"!newFolderName.trim() || isCreatingFolder\">\n          @if (isCreatingFolder) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          }\n          <span>{{ isCreatingFolder ? 'Creating...' : 'Create' }}</span>\n        </button>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Delete Confirmation Modal -->\n@if (showDeleteDialog && itemToDelete) {\n  <div class=\"mj-modal-backdrop modal-overlay\" (click)=\"onCancelDelete()\">\n    <div class=\"mj-modal-window modal-compact modal-dialog\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mj-modal-header modal-header\">\n        <h3 class=\"modal-title\">Delete {{ itemToDelete.type === 'folder' ? 'Folder' : 'File' }}?</h3>\n        <button type=\"button\" class=\"modal-close-btn modal-close\" (click)=\"onCancelDelete()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n      <div class=\"mj-modal-body modal-body\">\n        <p class=\"modal-body-text\">\n          Are you sure you want to delete <strong>{{ itemToDelete.name }}</strong>?\n        </p>\n        @if (itemToDelete.type === 'folder') {\n          <div class=\"modal-warning-banner warning\">\n            <i class=\"fa-solid fa-triangle-exclamation\"></i>\n            <span>This will delete the folder and all its contents.</span>\n          </div>\n        }\n      </div>\n      <div class=\"mj-modal-footer modal-footer\">\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--secondary\"\n          (click)=\"onCancelDelete()\"\n          [disabled]=\"isDeleting\">\n          Cancel\n        </button>\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--danger danger\"\n          (click)=\"onConfirmDelete()\"\n          [disabled]=\"isDeleting\">\n          @if (isDeleting) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          }\n          <span>{{ isDeleting ? 'Deleting...' : 'Delete' }}</span>\n        </button>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Rename Modal -->\n@if (showRenameDialog && itemToRename) {\n  <div class=\"mj-modal-backdrop modal-overlay\" (click)=\"onCancelRename()\">\n    <div class=\"mj-modal-window modal-compact modal-dialog\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mj-modal-header modal-header\">\n        <h3 class=\"modal-title\">Rename {{ itemToRename.type === 'folder' ? 'Folder' : 'File' }}</h3>\n        <button type=\"button\" class=\"modal-close-btn modal-close\" (click)=\"onCancelRename()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n      <div class=\"mj-modal-body modal-body\">\n        <label class=\"form-label\">New name:</label>\n        <input\n          type=\"text\"\n          class=\"form-input\"\n          [(ngModel)]=\"newItemName\"\n          [disabled]=\"isRenaming\"\n          placeholder=\"Enter new name\"\n          (keydown.enter)=\"onConfirmRename()\"\n          autofocus />\n      </div>\n      <div class=\"mj-modal-footer modal-footer\">\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--secondary\"\n          (click)=\"onCancelRename()\"\n          [disabled]=\"isRenaming\">\n          Cancel\n        </button>\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--primary\"\n          (click)=\"onConfirmRename()\"\n          [disabled]=\"isRenaming || !newItemName.trim()\">\n          @if (isRenaming) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          }\n          <span>{{ isRenaming ? 'Renaming...' : 'Rename' }}</span>\n        </button>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Copy Modal -->\n@if (showCopyDialog && itemToCopy) {\n  <div class=\"mj-modal-backdrop\" (click)=\"onCancelCopy()\">\n    <div class=\"mj-modal-window modal-compact\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mj-modal-header\">\n        <h3 class=\"modal-title\">Copy {{ itemToCopy.type === 'folder' ? 'Folder' : 'File' }}</h3>\n        <button type=\"button\" class=\"modal-close-btn\" (click)=\"onCancelCopy()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n      <div class=\"mj-modal-body\">\n        <p class=\"modal-body-text\">Copying <strong>{{ itemToCopy.name }}</strong></p>\n        <label class=\"form-label\">Destination Path</label>\n        <input\n          type=\"text\"\n          class=\"form-input\"\n          [(ngModel)]=\"copyDestinationPath\"\n          [disabled]=\"isCopying\"\n          placeholder=\"path/to/destination\"\n          (keydown.enter)=\"onConfirmCopy()\" />\n      </div>\n      <div class=\"mj-modal-footer\">\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--secondary\"\n          (click)=\"onCancelCopy()\"\n          [disabled]=\"isCopying\">\n          Cancel\n        </button>\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--primary\"\n          (click)=\"onConfirmCopy()\"\n          [disabled]=\"isCopying || !copyDestinationPath.trim()\">\n          @if (isCopying) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          }\n          <span>{{ isCopying ? 'Copying...' : 'Copy' }}</span>\n        </button>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Move Modal -->\n@if (showMoveDialog && itemToMove) {\n  <div class=\"mj-modal-backdrop\" (click)=\"onCancelMove()\">\n    <div class=\"mj-modal-window modal-compact\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mj-modal-header\">\n        <h3 class=\"modal-title\">Move {{ itemToMove.type === 'folder' ? 'Folder' : 'File' }}</h3>\n        <button type=\"button\" class=\"modal-close-btn\" (click)=\"onCancelMove()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n      <div class=\"mj-modal-body\">\n        <p class=\"modal-body-text\">Moving <strong>{{ itemToMove.name }}</strong></p>\n        <label class=\"form-label\">Destination Folder</label>\n        <input\n          type=\"text\"\n          class=\"form-input\"\n          [(ngModel)]=\"moveDestinationPath\"\n          [disabled]=\"isMoving\"\n          placeholder=\"destination/folder/\"\n          (keydown.enter)=\"onConfirmMove()\" />\n      </div>\n      <div class=\"mj-modal-footer\">\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--secondary\"\n          (click)=\"onCancelMove()\"\n          [disabled]=\"isMoving\">\n          Cancel\n        </button>\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--primary\"\n          (click)=\"onConfirmMove()\"\n          [disabled]=\"isMoving || !moveDestinationPath.trim()\">\n          @if (isMoving) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          }\n          <span>{{ isMoving ? 'Moving...' : 'Move' }}</span>\n        </button>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Copy to Account Modal -->\n@if (showCopyToProviderDialog && itemToCopyToProvider) {\n  <div class=\"mj-modal-backdrop\" (click)=\"onCancelCopyToAccount()\">\n    <div class=\"mj-modal-window\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mj-modal-header\">\n        <h3 class=\"modal-title\">Copy to Another Account</h3>\n        <button type=\"button\" class=\"modal-close-btn\" (click)=\"onCancelCopyToAccount()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n      <div class=\"mj-modal-body\">\n        <p class=\"modal-body-text\">\n          Copying <strong>{{ itemToCopyToProvider.name }}</strong> from <strong>{{ account?.account?.Name }}</strong>\n        </p>\n\n        <label class=\"form-label\">Select Destination Storage Accounts</label>\n        <div class=\"account-picker-list\">\n          @for (a of availableAccounts; track a.account.ID) {\n            <label class=\"account-picker-item\" [for]=\"'dest-acc-' + a.account.ID\">\n              <input\n                type=\"checkbox\"\n                [id]=\"'dest-acc-' + a.account.ID\"\n                [checked]=\"isDestinationAccountSelected(a.account.ID)\"\n                [disabled]=\"isCopyingToAccount\"\n                (change)=\"toggleDestinationAccount(a.account.ID)\" />\n              <span class=\"picker-name\">{{ a.account.Name }}</span>\n              <span class=\"picker-badge\">{{ a.provider.Name }}</span>\n            </label>\n          }\n        </div>\n\n        <label class=\"form-label\" style=\"margin-top: 14px;\">Destination Filename</label>\n        <input\n          type=\"text\"\n          class=\"form-input\"\n          [(ngModel)]=\"copyToAccountDestinationPath\"\n          [disabled]=\"isCopyingToAccount\"\n          placeholder=\"Filename\"\n          (keydown.enter)=\"onConfirmCopyToAccount()\" />\n\n        @if (copyToAccountProgress) {\n          <div class=\"copy-progress-indicator\">\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            <span>Copying to {{ copyToAccountProgress.currentAccount }} ({{ copyToAccountProgress.current }}/{{ copyToAccountProgress.total }})...</span>\n          </div>\n        }\n      </div>\n      <div class=\"mj-modal-footer\">\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--secondary\"\n          (click)=\"onCancelCopyToAccount()\"\n          [disabled]=\"isCopyingToAccount\">\n          Cancel\n        </button>\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--primary\"\n          (click)=\"onConfirmCopyToAccount()\"\n          [disabled]=\"isCopyingToAccount || selectedDestinationAccounts.size === 0 || !copyToAccountDestinationPath.trim()\">\n          @if (isCopyingToAccount) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          }\n          <span>{{ isCopyingToAccount ? 'Copying...' : 'Copy to ' + selectedDestinationAccounts.size + ' Account' + (selectedDestinationAccounts.size !== 1 ? 's' : '') }}</span>\n        </button>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["/* ==========================================================================\n   File Grid & Table Component Styles\n   Modern macOS Finder / Cloud Storage with Design Tokens\n   ========================================================================== */\n\n:host {\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.file-grid-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background-color: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  position: relative;\n  overflow: hidden;\n}\n\n/* ==========================================================================\n   Command Bar (Top Navigation, Search & Primary Actions)\n   ========================================================================== */\n\n.command-bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 10px 16px;\n  background-color: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  flex-wrap: wrap;\n}\n\n.command-bar-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n  flex: 1;\n}\n\n.nav-btn-group {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-shrink: 0;\n}\n\n.mj-tool-btn {\n  width: 32px;\n  height: 32px;\n  min-width: 32px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--mj-radius-sm, 6px);\n  border: 1px solid var(--mj-border-default);\n  background-color: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.mj-tool-btn:hover:not([disabled]) {\n  background-color: color-mix(in srgb, var(--mj-text-primary) 6%, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.mj-tool-btn[disabled] {\n  opacity: 0.4;\n  cursor: not-allowed;\n  background-color: transparent;\n}\n\n/* Breadcrumb Trail */\n.breadcrumb-trail {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n  min-width: 0;\n  padding: 2px 4px;\n}\n\n.breadcrumb-trail::-webkit-scrollbar {\n  display: none;\n}\n\n.trail-root-icon {\n  color: var(--mj-status-warning, #f59e0b);\n  font-size: 0.95rem;\n  margin-right: 2px;\n  flex-shrink: 0;\n}\n\n.crumb-btn {\n  background: transparent;\n  border: none;\n  color: var(--mj-text-secondary);\n  font-size: 0.82rem;\n  font-weight: 500;\n  padding: 4px 8px;\n  border-radius: var(--mj-radius-sm, 6px);\n  cursor: pointer;\n  white-space: nowrap;\n  transition: all 0.12s ease;\n}\n\n.crumb-btn:hover {\n  background-color: color-mix(in srgb, var(--mj-text-primary) 6%, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n}\n\n.crumb-btn.current {\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.crumb-separator {\n  color: var(--mj-text-muted);\n  font-size: 0.75rem;\n}\n\n/* Command Bar Right */\n.command-bar-right {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n/* Search Pill */\n.search-pill {\n  display: flex;\n  align-items: center;\n  background-color: var(--mj-bg-surface-sunken, color-mix(in srgb, var(--mj-text-primary) 4%, var(--mj-bg-surface)));\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-full, 9999px);\n  padding: 2px 10px;\n  gap: 6px;\n  transition: border-color 0.15s ease;\n}\n\n.search-pill:focus-within {\n  border-color: var(--mj-brand-primary);\n}\n\n.search-icon {\n  font-size: 0.78rem;\n  color: var(--mj-text-muted);\n}\n\n.search-input {\n  border: none;\n  background: transparent;\n  outline: none;\n  font-size: 0.82rem;\n  color: var(--mj-text-primary);\n  width: 150px;\n  padding: 4px 0;\n}\n\n.search-input::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.search-clear-btn {\n  background: transparent;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  padding: 0 4px;\n  font-size: 0.75rem;\n}\n\n.search-clear-btn:hover {\n  color: var(--mj-text-primary);\n}\n\n.type-filter-select {\n  border: none;\n  background: transparent;\n  font-size: 0.76rem;\n  color: var(--mj-text-secondary);\n  outline: none;\n  cursor: pointer;\n  padding: 2px 4px;\n  border-left: 1px solid var(--mj-border-default);\n}\n\n/* Toggle Multi-Search Button */\n.mj-btn-search-toggle {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n  font-size: 0.8rem;\n  font-weight: 500;\n  padding: 6px 12px;\n  border-radius: var(--mj-radius-full, 9999px);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.mj-btn-search-toggle:hover {\n  background-color: color-mix(in srgb, var(--mj-text-primary) 6%, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n}\n\n.mj-btn-search-toggle.active {\n  background-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #ffffff);\n  border-color: var(--mj-brand-primary);\n}\n\n/* View Mode Toggle */\n.view-mode-toggle {\n  display: flex;\n  background-color: var(--mj-bg-surface-sunken, color-mix(in srgb, var(--mj-text-primary) 4%, var(--mj-bg-surface)));\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm, 6px);\n  padding: 2px;\n  gap: 2px;\n}\n\n.view-mode-btn {\n  background: transparent;\n  border: none;\n  color: var(--mj-text-secondary);\n  padding: 5px 8px;\n  font-size: 0.8rem;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.12s ease;\n}\n\n.view-mode-btn:hover {\n  color: var(--mj-text-primary);\n}\n\n.view-mode-btn.active {\n  background-color: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);\n}\n\n/* Action Buttons */\n.mj-action-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  font-size: 0.82rem;\n  font-weight: 500;\n  border-radius: var(--mj-radius-sm, 6px);\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid transparent;\n  white-space: nowrap;\n}\n\n.mj-action-btn--primary {\n  background-color: var(--mj-brand-primary, #3b82f6);\n  color: var(--mj-text-inverse, #ffffff);\n  border-color: var(--mj-brand-primary, #3b82f6);\n}\n\n.mj-action-btn--primary:hover:not([disabled]) {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 85%, var(--mj-text-primary, #000000));\n}\n\n.mj-action-btn--secondary {\n  background-color: var(--mj-bg-surface);\n  border-color: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n.mj-action-btn--secondary:hover:not([disabled]) {\n  background-color: color-mix(in srgb, var(--mj-text-primary) 6%, var(--mj-bg-surface));\n}\n\n.mj-action-btn--danger {\n  background-color: var(--mj-status-error, #ef4444);\n  color: var(--mj-text-inverse, #ffffff);\n  border-color: var(--mj-status-error, #ef4444);\n}\n\n.mj-action-btn--danger:hover:not([disabled]) {\n  background-color: color-mix(in srgb, var(--mj-status-error, #ef4444) 85%, var(--mj-text-primary, #000000));\n}\n\n.mj-action-btn[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* ==========================================================================\n   Selection Action Bar\n   ========================================================================== */\n\n.selection-bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 16px;\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  gap: 12px;\n  flex-shrink: 0;\n  animation: slideDown 0.18s ease-out;\n}\n\n@keyframes slideDown {\n  from { transform: translateY(-100%); opacity: 0; }\n  to { transform: translateY(0); opacity: 1; }\n}\n\n.selection-bar-left {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.selection-checkbox-wrap {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.selection-count {\n  font-size: 0.82rem;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n}\n\n.selection-bar-right {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.sel-action-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 10px;\n  font-size: 0.76rem;\n  font-weight: 500;\n  border-radius: var(--mj-radius-sm, 6px);\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  transition: all 0.12s ease;\n}\n\n.sel-action-btn:hover {\n  background-color: color-mix(in srgb, var(--mj-text-primary) 6%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.sel-action-btn--danger:hover {\n  background-color: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  border-color: var(--mj-status-error);\n  color: var(--mj-status-error);\n}\n\n.sel-action-btn--ghost {\n  background: transparent;\n  border-color: transparent;\n}\n\n/* ==========================================================================\n   Multi-Account Search Card\n   ========================================================================== */\n\n.multi-search-card {\n  margin: 12px 16px;\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg, 10px);\n  box-shadow: var(--mj-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));\n  overflow: hidden;\n  animation: fadeIn 0.2s ease;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; transform: translateY(-6px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.multi-search-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  background-color: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.multi-search-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-brand-primary);\n}\n\n.multi-search-title h3 {\n  margin: 0;\n  font-size: 0.88rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.multi-search-body {\n  padding: 14px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.multi-search-bar {\n  display: flex;\n  gap: 8px;\n}\n\n.multi-search-text {\n  flex: 1;\n  padding: 8px 12px;\n  border-radius: var(--mj-radius-sm, 6px);\n  border: 1px solid var(--mj-border-default);\n  background-color: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: 0.85rem;\n  outline: none;\n}\n\n.multi-search-text:focus {\n  border-color: var(--mj-brand-primary);\n}\n\n.multi-search-accounts {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.account-select-label {\n  font-size: 0.74rem;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n}\n\n.account-pill-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.account-select-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px solid var(--mj-border-default);\n  background-color: var(--mj-bg-surface-sunken);\n  font-size: 0.76rem;\n  cursor: pointer;\n  transition: all 0.12s ease;\n}\n\n.account-select-pill.checked {\n  border-color: var(--mj-brand-primary);\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.account-select-pill.disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.pill-account-name {\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.pill-provider-tag {\n  font-size: 0.68rem;\n  color: var(--mj-text-muted);\n}\n\n.pill-no-search {\n  font-size: 0.68rem;\n  color: var(--mj-status-warning);\n}\n\n/* Results */\n.multi-search-results {\n  border-top: 1px solid var(--mj-border-default);\n  padding: 12px 16px;\n  max-height: 400px;\n  overflow-y: auto;\n}\n\n.results-meta-bar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 12px;\n  font-size: 0.8rem;\n}\n\n.meta-count {\n  color: var(--mj-text-primary);\n}\n\n.meta-stats {\n  color: var(--mj-text-secondary);\n}\n\n.clear-results-btn {\n  margin-left: auto;\n  background: transparent;\n  border: none;\n  color: var(--mj-text-secondary);\n  font-size: 0.76rem;\n  cursor: pointer;\n}\n\n.clear-results-btn:hover {\n  color: var(--mj-text-primary);\n}\n\n.results-groups {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.result-group {\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm, 6px);\n  overflow: hidden;\n}\n\n.result-group-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background-color: var(--mj-bg-surface-sunken);\n  font-size: 0.8rem;\n}\n\n.group-account-name {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.group-count-badge {\n  margin-left: auto;\n  background-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #ffffff);\n  font-size: 0.7rem;\n  font-weight: 600;\n  padding: 1px 6px;\n  border-radius: 9999px;\n}\n\n.group-error-badge {\n  margin-left: auto;\n  color: var(--mj-status-error);\n  font-size: 0.72rem;\n}\n\n.result-items-grid {\n  display: flex;\n  flex-direction: column;\n}\n\n.search-item-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--mj-border-default);\n  font-size: 0.8rem;\n}\n\n.search-item-row:last-child {\n  border-bottom: none;\n}\n\n.search-item-icon {\n  color: var(--mj-brand-primary);\n}\n\n.search-item-info {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n}\n\n.search-item-name {\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.search-item-path {\n  font-size: 0.7rem;\n  color: var(--mj-text-muted);\n}\n\n.search-item-size, .search-item-date {\n  font-size: 0.74rem;\n  color: var(--mj-text-secondary);\n}\n\n.group-empty-text {\n  padding: 12px;\n  font-size: 0.78rem;\n  color: var(--mj-text-muted);\n  text-align: center;\n}\n\n/* ==========================================================================\n   Cards Grid View\n   ========================================================================== */\n\n.file-cards-grid {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));\n  gap: 14px;\n  align-content: start;\n}\n\n.file-card {\n  display: flex;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg, 10px);\n  padding: 10px;\n  cursor: pointer;\n  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n  position: relative;\n  user-select: none;\n}\n\n.file-card:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));\n  transform: translateY(-2px);\n}\n\n.file-card.selected {\n  border-color: var(--mj-brand-primary);\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface));\n  box-shadow: 0 0 0 1px var(--mj-brand-primary);\n}\n\n.file-card-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 22px;\n  margin-bottom: 6px;\n}\n\n.file-card-checkbox {\n  cursor: pointer;\n}\n\n.file-card-quick-actions {\n  display: flex;\n  gap: 4px;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n\n.file-card:hover .file-card-quick-actions {\n  opacity: 1;\n}\n\n.quick-action-btn {\n  width: 22px;\n  height: 22px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  color: var(--mj-text-secondary);\n  font-size: 0.68rem;\n  cursor: pointer;\n  transition: all 0.12s ease;\n}\n\n.quick-action-btn:hover {\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n/* Card Icon / Thumbnail */\n.file-card-icon-container {\n  height: 74px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--mj-radius-md, 8px);\n  margin-bottom: 8px;\n  font-size: 2rem;\n  transition: transform 0.15s ease;\n}\n\n.file-card:hover .file-card-icon-container {\n  transform: scale(1.04);\n}\n\n/* Card Body */\n.file-card-body {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.file-card-name {\n  font-size: 0.8rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  line-height: 1.25;\n  min-height: 2em;\n}\n\n.file-card-meta {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 0.7rem;\n  color: var(--mj-text-muted);\n}\n\n/* ==========================================================================\n   List View Table\n   ========================================================================== */\n\n.file-table-container {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 16px;\n}\n\n.file-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 0.82rem;\n}\n\n.file-table th {\n  text-align: left;\n  padding: 8px 10px;\n  border-bottom: 1px solid var(--mj-border-default);\n  color: var(--mj-text-muted);\n  font-size: 0.72rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  user-select: none;\n  cursor: pointer;\n}\n\n.file-table th.th-check {\n  width: 32px;\n  cursor: default;\n}\n\n.file-table th.th-actions {\n  width: 70px;\n  text-align: right;\n  cursor: default;\n}\n\n.sort-arrow {\n  margin-left: 4px;\n  font-size: 0.65rem;\n}\n\n.file-table-row {\n  border-bottom: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  transition: background-color 0.12s ease;\n}\n\n.file-table-row:hover {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 4%, var(--mj-bg-surface));\n}\n\n.file-table-row.selected {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.file-table-row td {\n  padding: 8px 10px;\n  vertical-align: middle;\n}\n\n.row-name-wrap {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n}\n\n.row-icon-badge {\n  width: 28px;\n  height: 28px;\n  min-width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--mj-radius-sm, 6px);\n  font-size: 0.9rem;\n}\n\n.row-file-name {\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.type-badge {\n  display: inline-block;\n  padding: 2px 6px;\n  border-radius: 4px;\n  background-color: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  font-size: 0.7rem;\n}\n\n.size-text, .date-text {\n  color: var(--mj-text-secondary);\n  font-size: 0.76rem;\n  white-space: nowrap;\n}\n\n.row-action-buttons {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 4px;\n  opacity: 0;\n  transition: opacity 0.12s ease;\n}\n\n.file-table-row:hover .row-action-buttons {\n  opacity: 1;\n}\n\n.row-act-btn {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  color: var(--mj-text-secondary);\n  font-size: 0.7rem;\n  cursor: pointer;\n}\n\n.row-act-btn:hover {\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n/* ==========================================================================\n   Media Color Badges\n   ========================================================================== */\n\n.mj-file-thumb--folder {\n  background-color: color-mix(in srgb, var(--mj-status-warning, #f59e0b) 14%, transparent);\n  color: var(--mj-status-warning, #f59e0b);\n}\n\n.mj-file-thumb--pdf {\n  background-color: color-mix(in srgb, var(--mj-status-error, #ef4444) 14%, transparent);\n  color: var(--mj-status-error, #ef4444);\n}\n\n.mj-file-thumb--image {\n  background-color: color-mix(in srgb, var(--mj-media-image, #8b5cf6) 14%, transparent);\n  color: var(--mj-media-image, #8b5cf6);\n}\n\n.mj-file-thumb--video {\n  background-color: color-mix(in srgb, var(--mj-brand-primary, #3b82f6) 14%, transparent);\n  color: var(--mj-brand-primary, #3b82f6);\n}\n\n.mj-file-thumb--audio {\n  background-color: color-mix(in srgb, var(--mj-status-warning, #f59e0b) 14%, transparent);\n  color: var(--mj-status-warning, #f59e0b);\n}\n\n.mj-file-thumb--code {\n  background-color: color-mix(in srgb, var(--mj-status-success, #10b981) 14%, transparent);\n  color: var(--mj-status-success, #10b981);\n}\n\n.mj-file-thumb--text {\n  background-color: color-mix(in srgb, var(--mj-text-muted, #6b7280) 14%, transparent);\n  color: var(--mj-text-muted, #6b7280);\n}\n\n.mj-file-thumb--document {\n  background-color: color-mix(in srgb, var(--mj-brand-primary-hover, #2563eb) 14%, transparent);\n  color: var(--mj-brand-primary-hover, #2563eb);\n}\n\n/* ==========================================================================\n   Status Bar (Bottom Information)\n   ========================================================================== */\n\n.status-bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 16px;\n  background-color: var(--mj-bg-surface-sunken, color-mix(in srgb, var(--mj-text-primary) 3%, var(--mj-bg-surface)));\n  border-top: 1px solid var(--mj-border-default);\n  font-size: 0.72rem;\n  color: var(--mj-text-secondary);\n  flex-shrink: 0;\n}\n\n.status-account-badge {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--mj-brand-primary);\n  font-weight: 500;\n}\n\n/* ==========================================================================\n   Drag & Drop Overlay & Progress\n   ========================================================================== */\n\n.drag-drop-overlay {\n  position: absolute;\n  inset: 0;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, rgba(255, 255, 255, 0.9));\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n.drag-drop-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 32px 48px;\n  background-color: var(--mj-bg-surface);\n  border: 2px dashed var(--mj-brand-primary);\n  border-radius: var(--mj-radius-lg, 12px);\n  box-shadow: var(--mj-shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.15));\n}\n\n.drag-icon {\n  font-size: 3rem;\n  color: var(--mj-brand-primary);\n  margin-bottom: 12px;\n}\n\n.drag-drop-content h3 {\n  margin: 0 0 6px 0;\n  font-size: 1.1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.drag-drop-content p {\n  margin: 0;\n  font-size: 0.8rem;\n  color: var(--mj-text-secondary);\n}\n\n.upload-progress-bar-wrap {\n  position: absolute;\n  bottom: 36px;\n  right: 20px;\n  z-index: 90;\n}\n\n.upload-progress-card {\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  padding: 10px 14px;\n  box-shadow: var(--mj-shadow-lg, 0 8px 20px rgba(0, 0, 0, 0.15));\n  width: 260px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.upload-info {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.upload-spinner {\n  color: var(--mj-brand-primary);\n}\n\n.upload-text {\n  font-size: 0.78rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.progress-track {\n  height: 4px;\n  background-color: var(--mj-bg-surface-sunken);\n  border-radius: 9999px;\n  overflow: hidden;\n}\n\n.progress-fill {\n  height: 100%;\n  background-color: var(--mj-brand-primary);\n  transition: width 0.15s ease;\n}\n\n.grid-loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n}\n\n/* ==========================================================================\n   Modals (Design Tokens & Glass Backdrop)\n   ========================================================================== */\n\n.mj-modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1050;\n  padding: 20px;\n  animation: modalFadeIn 0.18s ease-out;\n}\n\n@keyframes modalFadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.mj-modal-window {\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg, 12px);\n  box-shadow: var(--mj-shadow-xl, 0 20px 35px rgba(0, 0, 0, 0.25));\n  width: 100%;\n  max-width: 500px;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.mj-modal-window.modal-compact {\n  max-width: 420px;\n}\n\n.mj-modal-window.preview-modal-window {\n  max-width: 850px;\n  max-height: 85vh;\n  height: 80vh;\n}\n\n.mj-modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 18px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background-color: var(--mj-bg-surface);\n}\n\n.modal-title-wrap {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.modal-title {\n  margin: 0;\n  font-size: 0.95rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.modal-subtitle {\n  font-size: 0.72rem;\n  color: var(--mj-text-muted);\n}\n\n.modal-header-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.modal-close-btn {\n  background: transparent;\n  border: none;\n  color: var(--mj-text-secondary);\n  font-size: 1rem;\n  cursor: pointer;\n  padding: 4px;\n  border-radius: 4px;\n}\n\n.modal-close-btn:hover {\n  color: var(--mj-text-primary);\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.mj-modal-body {\n  padding: 18px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.form-label {\n  font-size: 0.78rem;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.form-input {\n  padding: 8px 12px;\n  border-radius: var(--mj-radius-sm, 6px);\n  border: 1px solid var(--mj-border-default);\n  background-color: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: 0.85rem;\n  outline: none;\n}\n\n.form-input:focus {\n  border-color: var(--mj-brand-primary);\n}\n\n.modal-body-text {\n  margin: 0;\n  font-size: 0.85rem;\n  color: var(--mj-text-primary);\n}\n\n.modal-warning-banner {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background-color: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n  border: 1px solid var(--mj-status-warning);\n  border-radius: var(--mj-radius-sm, 6px);\n  font-size: 0.76rem;\n  color: var(--mj-text-primary);\n}\n\n.mj-modal-footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px 18px;\n  border-top: 1px solid var(--mj-border-default);\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n/* Preview Modal Body */\n.preview-modal-body {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--mj-bg-surface-sunken);\n  padding: 16px;\n  overflow: hidden;\n}\n\n.preview-media-wrap {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.preview-img {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n  border-radius: var(--mj-radius-md, 8px);\n}\n\n.preview-iframe {\n  width: 100%;\n  height: 100%;\n  border: none;\n  border-radius: var(--mj-radius-md, 8px);\n}\n\n.preview-video {\n  max-width: 100%;\n  max-height: 100%;\n  border-radius: var(--mj-radius-md, 8px);\n}\n\n.audio-preview-wrap {\n  flex-direction: column;\n  gap: 16px;\n}\n\n.preview-audio-icon {\n  font-size: 3rem;\n  color: var(--mj-brand-primary);\n}\n\n.preview-audio {\n  width: 320px;\n}\n\n.preview-fallback {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  text-align: center;\n  color: var(--mj-text-secondary);\n}\n\n.preview-fallback-icon {\n  font-size: 3rem;\n  color: var(--mj-text-muted);\n  margin-bottom: 8px;\n}\n\n.preview-fallback h4 {\n  margin: 0;\n  font-size: 0.95rem;\n  color: var(--mj-text-primary);\n}\n\n.preview-fallback p {\n  margin: 0;\n  font-size: 0.8rem;\n}\n\n.account-picker-list {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  max-height: 180px;\n  overflow-y: auto;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm, 6px);\n  padding: 6px;\n}\n\n.account-picker-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 8px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.account-picker-item:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.picker-name {\n  font-size: 0.82rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.picker-badge {\n  margin-left: auto;\n  font-size: 0.7rem;\n  color: var(--mj-text-muted);\n}\n\n.copy-progress-indicator {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 0.78rem;\n  color: var(--mj-brand-primary);\n  margin-top: 8px;\n}\n"] }]
-    }], () => [], { account: [{
+        args: [{ standalone: false, selector: 'mj-file-grid', template: "<div class=\"file-grid-container\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\">\n\n  <!-- Top Command Bar: Breadcrumbs & Primary Actions -->\n  @if (!isLoading && !errorMessage) {\n    <div class=\"command-bar breadcrumb-bar\">\n      <!-- Left: Breadcrumb Navigation Trail -->\n      <div class=\"command-bar-left\">\n        <div class=\"nav-btn-group nav-buttons\">\n          <button\n            type=\"button\"\n            class=\"mj-tool-btn nav-btn\"\n            [disabled]=\"!canNavigateUp()\"\n            (click)=\"navigateUp()\"\n            title=\"Go up to parent folder\">\n            <i class=\"fa-solid fa-arrow-up\"></i>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mj-tool-btn nav-btn\"\n            (click)=\"refresh()\"\n            title=\"Refresh current folder\">\n            <i class=\"fa-solid fa-arrows-rotate\"></i>\n          </button>\n        </div>\n\n        <nav class=\"breadcrumb-trail breadcrumb-path\" aria-label=\"Folder Path\">\n          <i class=\"fa-solid fa-folder-open trail-root-icon\"></i>\n          @for (crumb of getPathBreadcrumbs(); track crumb.path; let last = $last) {\n            <button\n              type=\"button\"\n              class=\"crumb-btn\"\n              [class.current]=\"last\"\n              (click)=\"navigateToBreadcrumb(crumb.path)\"\n              [title]=\"crumb.name\">\n              {{ crumb.name }}\n            </button>\n            @if (!last) {\n              <span class=\"crumb-separator\">/</span>\n            }\n          }\n        </nav>\n      </div>\n\n      <!-- Right: Search, Filter, View Mode & Action Buttons -->\n      <div class=\"command-bar-right\">\n        <!-- Search & Filter Bar -->\n        <div class=\"search-pill search-bar\">\n          <i class=\"fa-solid fa-magnifying-glass search-icon\"></i>\n          <input\n            type=\"text\"\n            class=\"search-input\"\n            [(ngModel)]=\"searchQuery\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            placeholder=\"Search files...\"\n            [disabled]=\"isLoading || isMultiProviderSearchMode\" />\n          @if (searchQuery && !isMultiProviderSearchMode) {\n            <button\n              type=\"button\"\n              class=\"search-clear-btn\"\n              (click)=\"clearSearch()\"\n              title=\"Clear search\">\n              <i class=\"fa-solid fa-xmark\"></i>\n            </button>\n          }\n          <select\n            class=\"type-filter-select file-type-filter\"\n            [(ngModel)]=\"fileTypeFilter\"\n            (ngModelChange)=\"onFileTypeFilterChange($event)\"\n            [disabled]=\"isLoading || isMultiProviderSearchMode\">\n            <option value=\"all\">All Items</option>\n            <option value=\"files\">Files only</option>\n            <option value=\"folders\">Folders only</option>\n          </select>\n        </div>\n\n        <!-- Search Across Accounts Toggle -->\n        <button\n          type=\"button\"\n          class=\"mj-btn-search-toggle multi-search-btn\"\n          [class.active]=\"isMultiProviderSearchMode\"\n          (click)=\"toggleMultiAccountSearchMode()\"\n          title=\"Search across all storage accounts\">\n          <i class=\"fa-solid fa-layer-group\"></i>\n          <span>All Accounts</span>\n        </button>\n\n        <!-- View Switcher -->\n        <div class=\"view-mode-toggle view-toggle\">\n          <button\n            type=\"button\"\n            class=\"view-mode-btn view-btn\"\n            [class.active]=\"viewMode === 'list'\"\n            (click)=\"viewMode = 'list'\"\n            title=\"List View\">\n            <i class=\"fa-solid fa-list\"></i>\n          </button>\n          <button\n            type=\"button\"\n            class=\"view-mode-btn view-btn\"\n            [class.active]=\"viewMode === 'grid'\"\n            (click)=\"viewMode = 'grid'\"\n            title=\"Grid View\">\n            <i class=\"fa-solid fa-table-cells-large\"></i>\n          </button>\n        </div>\n\n        <!-- Primary Action CTAs -->\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--secondary toolbar-btn\"\n          (click)=\"onNewFolderClick()\"\n          title=\"Create New Folder\">\n          <i class=\"fa-solid fa-folder-plus\"></i>\n          <span>New Folder</span>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--primary toolbar-btn\"\n          (click)=\"onUploadClick()\"\n          title=\"Upload Files\">\n          <i class=\"fa-solid fa-cloud-arrow-up\"></i>\n          <span>Upload</span>\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Selection Action Bar (Appears when 1+ items selected) -->\n  @if (selectedItems.length > 0 && !isMultiProviderSearchMode) {\n    <div class=\"selection-bar\">\n      <div class=\"selection-bar-left\">\n        <label class=\"selection-checkbox-wrap\" (click)=\"$event.stopPropagation()\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"areAllSelected()\"\n            (change)=\"areAllSelected() ? deselectAll() : selectAll()\" />\n          <span class=\"selection-count\">{{ selectedItems.length }} item{{ selectedItems.length === 1 ? '' : 's' }} selected</span>\n        </label>\n      </div>\n\n      <div class=\"selection-bar-right\">\n        @if (selectedItems.length === 1 && getSelectedItem()?.Type === 'file') {\n          <button\n            type=\"button\"\n            class=\"sel-action-btn\"\n            (click)=\"openPreview(getSelectedItem()!)\"\n            title=\"Preview file\">\n            <i class=\"fa-solid fa-eye\"></i>\n            <span>Preview</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sel-action-btn\"\n            (click)=\"onDownloadClick()\"\n            title=\"Download file\">\n            <i class=\"fa-solid fa-download\"></i>\n            <span>Download</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sel-action-btn\"\n            (click)=\"onCopyToAccountClick()\"\n            title=\"Copy to another storage account\">\n            <i class=\"fa-solid fa-cloud-arrow-up\"></i>\n            <span>Copy to...</span>\n          </button>\n        }\n        @if (selectedItems.length === 1) {\n          <button\n            type=\"button\"\n            class=\"sel-action-btn\"\n            (click)=\"onRenameClick()\"\n            title=\"Rename item\">\n            <i class=\"fa-solid fa-pen\"></i>\n            <span>Rename</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sel-action-btn\"\n            (click)=\"onCopyClick()\"\n            title=\"Copy to path\">\n            <i class=\"fa-solid fa-copy\"></i>\n            <span>Copy</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sel-action-btn\"\n            (click)=\"onMoveClick()\"\n            title=\"Move item\">\n            <i class=\"fa-solid fa-arrows-up-down-left-right\"></i>\n            <span>Move</span>\n          </button>\n        }\n        <button\n          type=\"button\"\n          class=\"sel-action-btn sel-action-btn--danger\"\n          (click)=\"onDeleteClick()\"\n          title=\"Delete selected item(s)\">\n          <i class=\"fa-solid fa-trash\"></i>\n          <span>Delete</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"sel-action-btn sel-action-btn--ghost\"\n          (click)=\"deselectAll()\"\n          title=\"Deselect all\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Multi-Provider Search Panel -->\n  @if (isMultiProviderSearchMode) {\n    <div class=\"multi-search-card multi-provider-search-panel\">\n      <div class=\"multi-search-header search-panel-header\">\n        <div class=\"multi-search-title\">\n          <i class=\"fa-solid fa-layer-group\"></i>\n          <h3>Search Across Storage Accounts</h3>\n        </div>\n        <button\n          type=\"button\"\n          class=\"modal-close-btn close-panel-btn\"\n          (click)=\"toggleMultiAccountSearchMode()\"\n          title=\"Close search\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n\n      <div class=\"multi-search-body search-panel-body\">\n        <div class=\"multi-search-bar search-input-row\">\n          <input\n            type=\"text\"\n            class=\"multi-search-text multi-search-input\"\n            [(ngModel)]=\"multiProviderSearchQuery\"\n            placeholder=\"Type query to search across connected accounts...\"\n            (keydown.enter)=\"executeMultiAccountSearch()\"\n            [disabled]=\"isSearching\" />\n          <button\n            type=\"button\"\n            class=\"mj-action-btn mj-action-btn--primary search-execute-btn\"\n            (click)=\"executeMultiAccountSearch()\"\n            [disabled]=\"isSearching || !multiProviderSearchQuery.trim() || selectedSearchProviders.size === 0\">\n            @if (isSearching) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            } @else {\n              <i class=\"fa-solid fa-magnifying-glass\"></i>\n            }\n            <span>{{ isSearching ? 'Searching...' : 'Search Accounts' }}</span>\n          </button>\n        </div>\n\n        <div class=\"multi-search-accounts provider-selection\">\n          <span class=\"account-select-label provider-selection-label\">Target Accounts:</span>\n          <div class=\"account-pill-list provider-checkboxes\">\n            @for (a of availableAccounts; track a.account.ID) {\n              <label\n                class=\"account-select-pill provider-checkbox\"\n                [class.disabled]=\"!accountSupportsSearch(a)\"\n                [class.checked]=\"isAccountSelectedForSearch(a.account.ID)\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isAccountSelectedForSearch(a.account.ID)\"\n                  (change)=\"toggleSearchAccount(a.account.ID)\"\n                  [disabled]=\"!accountSupportsSearch(a)\" />\n                <span class=\"pill-account-name provider-name\">{{ a.account.Name }}</span>\n                <span class=\"pill-provider-tag provider-type\">{{ a.provider.Name }}</span>\n                @if (!accountSupportsSearch(a)) {\n                  <span class=\"pill-no-search no-search-badge\">(no search)</span>\n                }\n              </label>\n            }\n          </div>\n        </div>\n      </div>\n\n      <!-- Search Results -->\n      @if (multiProviderSearchResults) {\n        <div class=\"multi-search-results search-results-container\">\n          <div class=\"results-meta-bar search-results-summary\">\n            <span class=\"meta-count result-count\">\n              <strong>{{ multiProviderSearchResults.TotalResultsReturned }}</strong> result{{ multiProviderSearchResults.TotalResultsReturned === 1 ? '' : 's' }} found\n            </span>\n            <span class=\"meta-stats provider-stats\">\n              ({{ multiProviderSearchResults.SuccessfulAccounts }} account{{ multiProviderSearchResults.SuccessfulAccounts === 1 ? '' : 's' }} searched)\n            </span>\n            <button\n              type=\"button\"\n              class=\"clear-results-btn\"\n              (click)=\"clearMultiProviderSearch()\">\n              <i class=\"fa-solid fa-xmark\"></i> Clear Results\n            </button>\n          </div>\n\n          <div class=\"results-groups provider-results-list\">\n            @for (accountResult of multiProviderSearchResults.AccountResults; track accountResult.accountID) {\n              <div class=\"result-group provider-result-group\" [class.failed]=\"!accountResult.success\">\n                <div class=\"result-group-head provider-result-header\">\n                  <i class=\"fa-solid fa-cloud-bolt group-icon\"></i>\n                  <span class=\"group-account-name provider-name\">{{ accountResult.accountName }}</span>\n                  @if (accountResult.success) {\n                    <span class=\"group-count-badge result-count\">{{ accountResult.results.length }}</span>\n                  } @else {\n                    <span class=\"group-error-badge error-badge\">{{ accountResult.errorMessage }}</span>\n                  }\n                </div>\n\n                @if (accountResult.success && accountResult.results.length > 0) {\n                  <div class=\"result-items-grid provider-result-files\">\n                    @for (file of accountResult.results; track file.path) {\n                      <div class=\"search-item-row search-result-item\">\n                        <i [class]=\"getSearchResultIcon(file)\" class=\"search-item-icon file-icon\"></i>\n                        <div class=\"search-item-info file-info\">\n                          <span class=\"search-item-name file-name\">{{ file.name }}</span>\n                          <span class=\"search-item-path file-path\">{{ file.path }}</span>\n                        </div>\n                        <span class=\"search-item-size file-size\">{{ formatSearchResultSize(file.size) }}</span>\n                        <span class=\"search-item-date file-date\">{{ formatSearchResultDate(file.lastModified) }}</span>\n                      </div>\n                    }\n                  </div>\n                }\n                @if (accountResult.success && accountResult.results.length === 0) {\n                  <div class=\"group-empty-text no-results-message\">No matching files found in this account</div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Loading State -->\n  @if (isLoading && !isMultiProviderSearchMode) {\n    <div class=\"grid-loading-container loading-state\">\n      <mj-loading text=\"Loading files...\"></mj-loading>\n    </div>\n  }\n\n  <!-- Error State -->\n  @if (errorMessage && !isLoading) {\n    <mj-empty-state\n      class=\"file-grid-empty-fill\"\n      Variant=\"error\"\n      Icon=\"fa-solid fa-triangle-exclamation\"\n      Title=\"Unable to load files\"\n      [Message]=\"errorMessage\"\n      ActionText=\"Retry\"\n      ActionIcon=\"fa-solid fa-arrows-rotate\"\n      (Action)=\"refresh()\" />\n  }\n\n  <!-- Grid View -->\n  @if (!isLoading && !errorMessage && filteredItems.length > 0 && viewMode === 'grid') {\n    <div class=\"file-cards-grid file-grid file-grid-wrapper\">\n      @for (item of filteredItems; track item.Key) {\n        <div\n          class=\"file-card grid-item\"\n          [class.selected]=\"selectedItems.includes(item.Key)\"\n          (click)=\"onTileClick(item, $event)\"\n          (dblclick)=\"onItemDoubleClick(item)\"\n          [title]=\"item.name\">\n\n          <!-- Card Top Row: Checkbox & Quick Actions -->\n          <div class=\"file-card-header\">\n            <label class=\"file-card-checkbox\" (click)=\"$event.stopPropagation()\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"selectedItems.includes(item.Key)\"\n                (change)=\"toggleItemSelection(item, $event)\" />\n            </label>\n            <div class=\"file-card-quick-actions\" (click)=\"$event.stopPropagation()\">\n              @if (item.Type === 'file') {\n                <button\n                  type=\"button\"\n                  class=\"quick-action-btn\"\n                  (click)=\"openPreview(item)\"\n                  title=\"Preview\">\n                  <i class=\"fa-solid fa-eye\"></i>\n                </button>\n                <button\n                  type=\"button\"\n                  class=\"quick-action-btn\"\n                  (click)=\"downloadFile(item)\"\n                  title=\"Download\">\n                  <i class=\"fa-solid fa-download\"></i>\n                </button>\n              }\n            </div>\n          </div>\n\n          <!-- Card Thumbnail/Icon -->\n          <div class=\"file-card-icon-container grid-icon\" [class]=\"getItemColorClass(item)\">\n            <i [class]=\"getItemIcon(item)\"></i>\n          </div>\n\n          <!-- Card Body: Name & Meta -->\n          <div class=\"file-card-body\">\n            <span class=\"file-card-name grid-name\">{{ item.name }}</span>\n            <div class=\"file-card-meta grid-meta\">\n              <span class=\"meta-size\">{{ item.Type === 'folder' ? 'Folder' : formatFileSize(item.Size) }}</span>\n              <span class=\"meta-date\">{{ formatDate(item.LastModified) }}</span>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- List View Table -->\n  @if (!isLoading && !errorMessage && filteredItems.length > 0 && viewMode === 'list') {\n    <div class=\"file-table-container file-table-wrapper\">\n      <table class=\"file-table\">\n        <thead>\n          <tr>\n            <th class=\"th-check\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"areAllSelected()\"\n                (change)=\"areAllSelected() ? deselectAll() : selectAll()\" />\n            </th>\n            <th class=\"th-name col-name\" (click)=\"onSortChange([{ field: 'name', dir: sort[0].field === 'name' && sort[0].dir === 'asc' ? 'desc' : 'asc' }])\">\n              <span>Name</span>\n              <i class=\"fa-solid sort-arrow sort-icon\"\n                [class.fa-caret-up]=\"sort[0].field === 'name' && sort[0].dir === 'asc'\"\n                [class.fa-caret-down]=\"sort[0].field === 'name' && sort[0].dir === 'desc'\"\n                [class.fa-sort]=\"sort[0].field !== 'name'\"></i>\n            </th>\n            <th class=\"th-type col-type\">Type</th>\n            <th class=\"th-size col-size\" (click)=\"onSortChange([{ field: 'size', dir: sort[0].field === 'size' && sort[0].dir === 'asc' ? 'desc' : 'asc' }])\">\n              <span>Size</span>\n              <i class=\"fa-solid sort-arrow sort-icon\"\n                [class.fa-caret-up]=\"sort[0].field === 'size' && sort[0].dir === 'asc'\"\n                [class.fa-caret-down]=\"sort[0].field === 'size' && sort[0].dir === 'desc'\"\n                [class.fa-sort]=\"sort[0].field !== 'size'\"></i>\n            </th>\n            <th class=\"th-date col-modified\" (click)=\"onSortChange([{ field: 'lastModified', dir: sort[0].field === 'lastModified' && sort[0].dir === 'asc' ? 'desc' : 'asc' }])\">\n              <span>Modified</span>\n              <i class=\"fa-solid sort-arrow sort-icon\"\n                [class.fa-caret-up]=\"sort[0].field === 'lastModified' && sort[0].dir === 'asc'\"\n                [class.fa-caret-down]=\"sort[0].field === 'lastModified' && sort[0].dir === 'desc'\"\n                [class.fa-sort]=\"sort[0].field !== 'lastModified'\"></i>\n            </th>\n            <th class=\"th-actions\">Actions</th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (item of filteredItems; track item.Key) {\n            <tr\n              class=\"file-table-row file-row\"\n              [class.selected]=\"selectedItems.includes(item.Key)\"\n              (click)=\"onTileClick(item, $event)\"\n              (dblclick)=\"onItemDoubleClick(item)\">\n              <td class=\"td-check\" (click)=\"$event.stopPropagation()\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"selectedItems.includes(item.Key)\"\n                  (change)=\"toggleItemSelection(item, $event)\" />\n              </td>\n              <td class=\"td-name col-name\">\n                <div class=\"row-name-wrap\">\n                  <div class=\"row-icon-badge\" [class]=\"getItemColorClass(item)\">\n                    <i [class]=\"getItemIcon(item)\" class=\"item-icon\"></i>\n                  </div>\n                  <span class=\"row-file-name item-name\" [title]=\"item.name\">{{ item.name }}</span>\n                </div>\n              </td>\n              <td class=\"td-type col-type\">\n                <span class=\"type-badge item-type\">{{ getFileType(item) }}</span>\n              </td>\n              <td class=\"td-size col-size\">\n                <span class=\"size-text item-size\">{{ item.Type === 'folder' ? '\u2014' : formatFileSize(item.Size) }}</span>\n              </td>\n              <td class=\"td-date col-modified\">\n                <span class=\"date-text item-date\">{{ formatDate(item.LastModified) }}</span>\n              </td>\n              <td class=\"td-actions\" (click)=\"$event.stopPropagation()\">\n                <div class=\"row-action-buttons\">\n                  @if (item.Type === 'file') {\n                    <button\n                      type=\"button\"\n                      class=\"row-act-btn\"\n                      (click)=\"openPreview(item)\"\n                      title=\"Preview\">\n                      <i class=\"fa-solid fa-eye\"></i>\n                    </button>\n                    <button\n                      type=\"button\"\n                      class=\"row-act-btn\"\n                      (click)=\"downloadFile(item)\"\n                      title=\"Download\">\n                      <i class=\"fa-solid fa-download\"></i>\n                    </button>\n                  }\n                </div>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  }\n\n  <!-- Empty State -->\n  @if (!isLoading && !errorMessage && filteredItems.length === 0 && !isMultiProviderSearchMode) {\n    <mj-empty-state\n      Icon=\"fa-solid fa-folder-open\"\n      Title=\"This folder is empty\"\n      Message=\"Drop files here to upload or create a new folder\"\n      ActionText=\"Upload Files\"\n      ActionIcon=\"fa-solid fa-cloud-arrow-up\"\n      (Action)=\"onUploadClick()\" />\n  }\n\n  <!-- Bottom Status Bar -->\n  @if (!isLoading && !errorMessage) {\n    <div class=\"status-bar\">\n      <span class=\"status-count\">\n        {{ filteredItems.length }} item{{ filteredItems.length === 1 ? '' : 's' }}\n        @if (searchQuery) {\n          (filtered)\n        }\n      </span>\n      <div class=\"status-account-badge\" *ngIf=\"account\">\n        <i class=\"fa-solid fa-cloud\"></i>\n        <span>{{ account.account.Name }} ({{ account.provider.Name }})</span>\n      </div>\n    </div>\n  }\n\n  <!-- Drag & Drop Upload Overlay -->\n  @if (isDragging) {\n    <div class=\"drag-drop-overlay\">\n      <div class=\"drag-drop-content\">\n        <i class=\"fa-solid fa-cloud-arrow-up drag-icon\"></i>\n        <h3>Drop files here to upload</h3>\n        <p>Files will be stored in {{ folderPath || 'Root' }}</p>\n      </div>\n    </div>\n  }\n\n  <!-- Upload Progress Bar -->\n  @if (isUploading) {\n    <div class=\"upload-progress-bar-wrap\">\n      <div class=\"upload-progress-card\">\n        <div class=\"upload-info\">\n          <i class=\"fa-solid fa-spinner fa-spin upload-spinner\"></i>\n          <span class=\"upload-text\">Uploading {{ uploadingFileName }}...</span>\n        </div>\n        <div class=\"progress-track\">\n          <div class=\"progress-fill\" [style.width.%]=\"uploadProgress\"></div>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n\n<!-- ==========================================================================\n     MODAL DIALOGS (Design Tokens, Smooth Animations, Backdrop Blurs)\n     ========================================================================== -->\n\n<!-- File Preview Modal -->\n@if (showPreviewModal && previewItem) {\n  <div class=\"mj-modal-backdrop\" (click)=\"closePreview()\">\n    <div class=\"mj-modal-window preview-modal-window\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mj-modal-header\">\n        <div class=\"modal-title-wrap\">\n          <div class=\"row-icon-badge\" [class]=\"getItemColorClass(previewItem)\">\n            <i [class]=\"getItemIcon(previewItem)\"></i>\n          </div>\n          <div>\n            <h3 class=\"modal-title\">{{ previewItem.name }}</h3>\n            <span class=\"modal-subtitle\">{{ formatFileSize(previewItem.Size) }} &bull; {{ formatDate(previewItem.LastModified) }}</span>\n          </div>\n        </div>\n        <div class=\"modal-header-actions\">\n          <button\n            type=\"button\"\n            class=\"mj-action-btn mj-action-btn--secondary\"\n            (click)=\"downloadFile(previewItem)\"\n            title=\"Download file\">\n            <i class=\"fa-solid fa-download\"></i>\n            <span>Download</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"modal-close-btn\"\n            (click)=\"closePreview()\"\n            title=\"Close preview\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n      </div>\n\n      <div class=\"preview-modal-body\">\n        @if (isLoadingPreview) {\n          <div class=\"preview-loading\">\n            <mj-loading text=\"Loading preview...\"></mj-loading>\n          </div>\n        } @else if (previewUrl) {\n          @switch (previewMediaType) {\n            @case ('image') {\n              <div class=\"preview-media-wrap image-preview-wrap\">\n                <img [src]=\"previewUrl\" [alt]=\"previewItem.name\" class=\"preview-img\" />\n              </div>\n            }\n            @case ('pdf') {\n              <div class=\"preview-media-wrap pdf-preview-wrap\">\n                <iframe [src]=\"previewUrl\" class=\"preview-iframe\" title=\"PDF Preview\"></iframe>\n              </div>\n            }\n            @case ('video') {\n              <div class=\"preview-media-wrap video-preview-wrap\">\n                <video [src]=\"previewUrl\" controls autoplay class=\"preview-video\"></video>\n              </div>\n            }\n            @case ('audio') {\n              <div class=\"preview-media-wrap audio-preview-wrap\">\n                <i class=\"fa-solid fa-music preview-audio-icon\"></i>\n                <audio [src]=\"previewUrl\" controls class=\"preview-audio\"></audio>\n              </div>\n            }\n            @default {\n              <div class=\"preview-fallback\">\n                <i [class]=\"getItemIcon(previewItem)\" class=\"preview-fallback-icon\"></i>\n                <h4>{{ previewItem.name }}</h4>\n                <p>Preview is not supported for this file type.</p>\n                <button\n                  type=\"button\"\n                  class=\"mj-action-btn mj-action-btn--primary\"\n                  (click)=\"downloadFile(previewItem)\">\n                  <i class=\"fa-solid fa-download\"></i>\n                  <span>Download File</span>\n                </button>\n              </div>\n            }\n          }\n        } @else {\n          <div class=\"preview-fallback\">\n            <i class=\"fa-solid fa-triangle-exclamation preview-fallback-icon\"></i>\n            <h4>Preview unavailable</h4>\n            <p>Could not generate a preview link for this file.</p>\n            <button\n              type=\"button\"\n              class=\"mj-action-btn mj-action-btn--primary\"\n              (click)=\"downloadFile(previewItem)\">\n              <i class=\"fa-solid fa-download\"></i>\n              <span>Download File</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- New Folder Modal -->\n@if (showNewFolderDialog) {\n  <div class=\"mj-modal-backdrop modal-overlay\" (click)=\"onCancelNewFolder()\">\n    <div class=\"mj-modal-window modal-compact modal-dialog\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mj-modal-header modal-header\">\n        <h3 class=\"modal-title\">Create New Folder</h3>\n        <button type=\"button\" class=\"modal-close-btn modal-close\" (click)=\"onCancelNewFolder()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n      <div class=\"mj-modal-body modal-body\">\n        <label class=\"form-label\">Folder name:</label>\n        <input\n          type=\"text\"\n          class=\"form-input\"\n          [(ngModel)]=\"newFolderName\"\n          [disabled]=\"isCreatingFolder\"\n          placeholder=\"Enter folder name\"\n          (keydown.enter)=\"onCreateFolder()\"\n          autofocus />\n      </div>\n      <div class=\"mj-modal-footer modal-footer\">\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--secondary\"\n          (click)=\"onCancelNewFolder()\"\n          [disabled]=\"isCreatingFolder\">\n          Cancel\n        </button>\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--primary\"\n          (click)=\"onCreateFolder()\"\n          [disabled]=\"!newFolderName.trim() || isCreatingFolder\">\n          @if (isCreatingFolder) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          }\n          <span>{{ isCreatingFolder ? 'Creating...' : 'Create' }}</span>\n        </button>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Delete Confirmation Modal -->\n@if (showDeleteDialog && itemToDelete) {\n  <div class=\"mj-modal-backdrop modal-overlay\" (click)=\"onCancelDelete()\">\n    <div class=\"mj-modal-window modal-compact modal-dialog\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mj-modal-header modal-header\">\n        <h3 class=\"modal-title\">Delete {{ itemToDelete.Type === 'folder' ? 'Folder' : 'File' }}?</h3>\n        <button type=\"button\" class=\"modal-close-btn modal-close\" (click)=\"onCancelDelete()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n      <div class=\"mj-modal-body modal-body\">\n        <p class=\"modal-body-text\">\n          Are you sure you want to delete <strong>{{ itemToDelete.name }}</strong>?\n        </p>\n        @if (itemToDelete.Type === 'folder') {\n          <div class=\"modal-warning-banner warning\">\n            <i class=\"fa-solid fa-triangle-exclamation\"></i>\n            <span>This will delete the folder and all its contents.</span>\n          </div>\n        }\n      </div>\n      <div class=\"mj-modal-footer modal-footer\">\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--secondary\"\n          (click)=\"onCancelDelete()\"\n          [disabled]=\"isDeleting\">\n          Cancel\n        </button>\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--danger danger\"\n          (click)=\"onConfirmDelete()\"\n          [disabled]=\"isDeleting\">\n          @if (isDeleting) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          }\n          <span>{{ isDeleting ? 'Deleting...' : 'Delete' }}</span>\n        </button>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Rename Modal -->\n@if (showRenameDialog && itemToRename) {\n  <div class=\"mj-modal-backdrop modal-overlay\" (click)=\"onCancelRename()\">\n    <div class=\"mj-modal-window modal-compact modal-dialog\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mj-modal-header modal-header\">\n        <h3 class=\"modal-title\">Rename {{ itemToRename.Type === 'folder' ? 'Folder' : 'File' }}</h3>\n        <button type=\"button\" class=\"modal-close-btn modal-close\" (click)=\"onCancelRename()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n      <div class=\"mj-modal-body modal-body\">\n        <label class=\"form-label\">New name:</label>\n        <input\n          type=\"text\"\n          class=\"form-input\"\n          [(ngModel)]=\"newItemName\"\n          [disabled]=\"isRenaming\"\n          placeholder=\"Enter new name\"\n          (keydown.enter)=\"onConfirmRename()\"\n          autofocus />\n      </div>\n      <div class=\"mj-modal-footer modal-footer\">\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--secondary\"\n          (click)=\"onCancelRename()\"\n          [disabled]=\"isRenaming\">\n          Cancel\n        </button>\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--primary\"\n          (click)=\"onConfirmRename()\"\n          [disabled]=\"isRenaming || !newItemName.trim()\">\n          @if (isRenaming) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          }\n          <span>{{ isRenaming ? 'Renaming...' : 'Rename' }}</span>\n        </button>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Copy Modal -->\n@if (showCopyDialog && itemToCopy) {\n  <div class=\"mj-modal-backdrop\" (click)=\"onCancelCopy()\">\n    <div class=\"mj-modal-window modal-compact\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mj-modal-header\">\n        <h3 class=\"modal-title\">Copy {{ itemToCopy.Type === 'folder' ? 'Folder' : 'File' }}</h3>\n        <button type=\"button\" class=\"modal-close-btn\" (click)=\"onCancelCopy()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n      <div class=\"mj-modal-body\">\n        <p class=\"modal-body-text\">Copying <strong>{{ itemToCopy.name }}</strong></p>\n        <label class=\"form-label\">Destination Path</label>\n        <input\n          type=\"text\"\n          class=\"form-input\"\n          [(ngModel)]=\"copyDestinationPath\"\n          [disabled]=\"isCopying\"\n          placeholder=\"path/to/destination\"\n          (keydown.enter)=\"onConfirmCopy()\" />\n      </div>\n      <div class=\"mj-modal-footer\">\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--secondary\"\n          (click)=\"onCancelCopy()\"\n          [disabled]=\"isCopying\">\n          Cancel\n        </button>\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--primary\"\n          (click)=\"onConfirmCopy()\"\n          [disabled]=\"isCopying || !copyDestinationPath.trim()\">\n          @if (isCopying) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          }\n          <span>{{ isCopying ? 'Copying...' : 'Copy' }}</span>\n        </button>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Move Modal -->\n@if (showMoveDialog && itemToMove) {\n  <div class=\"mj-modal-backdrop\" (click)=\"onCancelMove()\">\n    <div class=\"mj-modal-window modal-compact\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mj-modal-header\">\n        <h3 class=\"modal-title\">Move {{ itemToMove.Type === 'folder' ? 'Folder' : 'File' }}</h3>\n        <button type=\"button\" class=\"modal-close-btn\" (click)=\"onCancelMove()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n      <div class=\"mj-modal-body\">\n        <p class=\"modal-body-text\">Moving <strong>{{ itemToMove.name }}</strong></p>\n        <label class=\"form-label\">Destination Folder</label>\n        <input\n          type=\"text\"\n          class=\"form-input\"\n          [(ngModel)]=\"moveDestinationPath\"\n          [disabled]=\"isMoving\"\n          placeholder=\"destination/folder/\"\n          (keydown.enter)=\"onConfirmMove()\" />\n      </div>\n      <div class=\"mj-modal-footer\">\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--secondary\"\n          (click)=\"onCancelMove()\"\n          [disabled]=\"isMoving\">\n          Cancel\n        </button>\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--primary\"\n          (click)=\"onConfirmMove()\"\n          [disabled]=\"isMoving || !moveDestinationPath.trim()\">\n          @if (isMoving) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          }\n          <span>{{ isMoving ? 'Moving...' : 'Move' }}</span>\n        </button>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Copy to Account Modal -->\n@if (showCopyToProviderDialog && itemToCopyToProvider) {\n  <div class=\"mj-modal-backdrop\" (click)=\"onCancelCopyToAccount()\">\n    <div class=\"mj-modal-window\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mj-modal-header\">\n        <h3 class=\"modal-title\">Copy to Another Account</h3>\n        <button type=\"button\" class=\"modal-close-btn\" (click)=\"onCancelCopyToAccount()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n      <div class=\"mj-modal-body\">\n        <p class=\"modal-body-text\">\n          Copying <strong>{{ itemToCopyToProvider.name }}</strong> from <strong>{{ account?.account?.Name }}</strong>\n        </p>\n\n        <label class=\"form-label\">Select Destination Storage Accounts</label>\n        <div class=\"account-picker-list\">\n          @for (a of availableAccounts; track a.account.ID) {\n            <label class=\"account-picker-item\" [for]=\"'dest-acc-' + a.account.ID\">\n              <input\n                type=\"checkbox\"\n                [id]=\"'dest-acc-' + a.account.ID\"\n                [checked]=\"isDestinationAccountSelected(a.account.ID)\"\n                [disabled]=\"isCopyingToAccount\"\n                (change)=\"toggleDestinationAccount(a.account.ID)\" />\n              <span class=\"picker-name\">{{ a.account.Name }}</span>\n              <span class=\"picker-badge\">{{ a.provider.Name }}</span>\n            </label>\n          }\n        </div>\n\n        <label class=\"form-label\" style=\"margin-top: 14px;\">Destination Filename</label>\n        <input\n          type=\"text\"\n          class=\"form-input\"\n          [(ngModel)]=\"copyToAccountDestinationPath\"\n          [disabled]=\"isCopyingToAccount\"\n          placeholder=\"Filename\"\n          (keydown.enter)=\"onConfirmCopyToAccount()\" />\n\n        @if (copyToAccountProgress) {\n          <div class=\"copy-progress-indicator\">\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            <span>Copying to {{ copyToAccountProgress.currentAccount }} ({{ copyToAccountProgress.current }}/{{ copyToAccountProgress.total }})...</span>\n          </div>\n        }\n      </div>\n      <div class=\"mj-modal-footer\">\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--secondary\"\n          (click)=\"onCancelCopyToAccount()\"\n          [disabled]=\"isCopyingToAccount\">\n          Cancel\n        </button>\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--primary\"\n          (click)=\"onConfirmCopyToAccount()\"\n          [disabled]=\"isCopyingToAccount || selectedDestinationAccounts.size === 0 || !copyToAccountDestinationPath.trim()\">\n          @if (isCopyingToAccount) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          }\n          <span>{{ isCopyingToAccount ? 'Copying...' : 'Copy to ' + selectedDestinationAccounts.size + ' Account' + (selectedDestinationAccounts.size !== 1 ? 's' : '') }}</span>\n        </button>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["/* ==========================================================================\n   File Grid & Table Component Styles\n   Modern macOS Finder / Cloud Storage with Design Tokens\n   ========================================================================== */\n\n:host {\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.file-grid-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background-color: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  position: relative;\n  overflow: hidden;\n}\n\n/* ==========================================================================\n   Command Bar (Top Navigation, Search & Primary Actions)\n   ========================================================================== */\n\n.command-bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 10px 16px;\n  background-color: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  flex-wrap: wrap;\n}\n\n.command-bar-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n  flex: 1;\n}\n\n.nav-btn-group {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-shrink: 0;\n}\n\n.mj-tool-btn {\n  width: 32px;\n  height: 32px;\n  min-width: 32px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--mj-radius-sm, 6px);\n  border: 1px solid var(--mj-border-default);\n  background-color: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.mj-tool-btn:hover:not([disabled]) {\n  background-color: color-mix(in srgb, var(--mj-text-primary) 6%, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.mj-tool-btn[disabled] {\n  opacity: 0.4;\n  cursor: not-allowed;\n  background-color: transparent;\n}\n\n/* Breadcrumb Trail */\n.breadcrumb-trail {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n  min-width: 0;\n  padding: 2px 4px;\n}\n\n.breadcrumb-trail::-webkit-scrollbar {\n  display: none;\n}\n\n.trail-root-icon {\n  color: var(--mj-status-warning, #f59e0b);\n  font-size: 0.95rem;\n  margin-right: 2px;\n  flex-shrink: 0;\n}\n\n.crumb-btn {\n  background: transparent;\n  border: none;\n  color: var(--mj-text-secondary);\n  font-size: 0.82rem;\n  font-weight: 500;\n  padding: 4px 8px;\n  border-radius: var(--mj-radius-sm, 6px);\n  cursor: pointer;\n  white-space: nowrap;\n  transition: all 0.12s ease;\n}\n\n.crumb-btn:hover {\n  background-color: color-mix(in srgb, var(--mj-text-primary) 6%, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n}\n\n.crumb-btn.current {\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.crumb-separator {\n  color: var(--mj-text-muted);\n  font-size: 0.75rem;\n}\n\n/* Command Bar Right */\n.command-bar-right {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n/* Search Pill */\n.search-pill {\n  display: flex;\n  align-items: center;\n  background-color: var(--mj-bg-surface-sunken, color-mix(in srgb, var(--mj-text-primary) 4%, var(--mj-bg-surface)));\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-full, 9999px);\n  padding: 2px 10px;\n  gap: 6px;\n  transition: border-color 0.15s ease;\n}\n\n.search-pill:focus-within {\n  border-color: var(--mj-brand-primary);\n}\n\n.search-icon {\n  font-size: 0.78rem;\n  color: var(--mj-text-muted);\n}\n\n.search-input {\n  border: none;\n  background: transparent;\n  outline: none;\n  font-size: 0.82rem;\n  color: var(--mj-text-primary);\n  width: 150px;\n  padding: 4px 0;\n}\n\n.search-input::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.search-clear-btn {\n  background: transparent;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  padding: 0 4px;\n  font-size: 0.75rem;\n}\n\n.search-clear-btn:hover {\n  color: var(--mj-text-primary);\n}\n\n.type-filter-select {\n  border: none;\n  background: transparent;\n  font-size: 0.76rem;\n  color: var(--mj-text-secondary);\n  outline: none;\n  cursor: pointer;\n  padding: 2px 4px;\n  border-left: 1px solid var(--mj-border-default);\n}\n\n/* Toggle Multi-Search Button */\n.mj-btn-search-toggle {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n  font-size: 0.8rem;\n  font-weight: 500;\n  padding: 6px 12px;\n  border-radius: var(--mj-radius-full, 9999px);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.mj-btn-search-toggle:hover {\n  background-color: color-mix(in srgb, var(--mj-text-primary) 6%, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n}\n\n.mj-btn-search-toggle.active {\n  background-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #ffffff);\n  border-color: var(--mj-brand-primary);\n}\n\n/* View Mode Toggle */\n.view-mode-toggle {\n  display: flex;\n  background-color: var(--mj-bg-surface-sunken, color-mix(in srgb, var(--mj-text-primary) 4%, var(--mj-bg-surface)));\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm, 6px);\n  padding: 2px;\n  gap: 2px;\n}\n\n.view-mode-btn {\n  background: transparent;\n  border: none;\n  color: var(--mj-text-secondary);\n  padding: 5px 8px;\n  font-size: 0.8rem;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.12s ease;\n}\n\n.view-mode-btn:hover {\n  color: var(--mj-text-primary);\n}\n\n.view-mode-btn.active {\n  background-color: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);\n}\n\n/* Action Buttons */\n.mj-action-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  font-size: 0.82rem;\n  font-weight: 500;\n  border-radius: var(--mj-radius-sm, 6px);\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid transparent;\n  white-space: nowrap;\n}\n\n.mj-action-btn--primary {\n  background-color: var(--mj-brand-primary, #3b82f6);\n  color: var(--mj-text-inverse, #ffffff);\n  border-color: var(--mj-brand-primary, #3b82f6);\n}\n\n.mj-action-btn--primary:hover:not([disabled]) {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 85%, var(--mj-text-primary, #000000));\n}\n\n.mj-action-btn--secondary {\n  background-color: var(--mj-bg-surface);\n  border-color: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n.mj-action-btn--secondary:hover:not([disabled]) {\n  background-color: color-mix(in srgb, var(--mj-text-primary) 6%, var(--mj-bg-surface));\n}\n\n.mj-action-btn--danger {\n  background-color: var(--mj-status-error, #ef4444);\n  color: var(--mj-text-inverse, #ffffff);\n  border-color: var(--mj-status-error, #ef4444);\n}\n\n.mj-action-btn--danger:hover:not([disabled]) {\n  background-color: color-mix(in srgb, var(--mj-status-error, #ef4444) 85%, var(--mj-text-primary, #000000));\n}\n\n.mj-action-btn[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* ==========================================================================\n   Selection Action Bar\n   ========================================================================== */\n\n.selection-bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 16px;\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  gap: 12px;\n  flex-shrink: 0;\n  animation: slideDown 0.18s ease-out;\n}\n\n@keyframes slideDown {\n  from { transform: translateY(-100%); opacity: 0; }\n  to { transform: translateY(0); opacity: 1; }\n}\n\n.selection-bar-left {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.selection-checkbox-wrap {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.selection-count {\n  font-size: 0.82rem;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n}\n\n.selection-bar-right {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.sel-action-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 10px;\n  font-size: 0.76rem;\n  font-weight: 500;\n  border-radius: var(--mj-radius-sm, 6px);\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  transition: all 0.12s ease;\n}\n\n.sel-action-btn:hover {\n  background-color: color-mix(in srgb, var(--mj-text-primary) 6%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.sel-action-btn--danger:hover {\n  background-color: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  border-color: var(--mj-status-error);\n  color: var(--mj-status-error);\n}\n\n.sel-action-btn--ghost {\n  background: transparent;\n  border-color: transparent;\n}\n\n/* ==========================================================================\n   Multi-Account Search Card\n   ========================================================================== */\n\n.multi-search-card {\n  margin: 12px 16px;\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg, 10px);\n  box-shadow: var(--mj-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));\n  overflow: hidden;\n  animation: fadeIn 0.2s ease;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; transform: translateY(-6px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.multi-search-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  background-color: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.multi-search-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-brand-primary);\n}\n\n.multi-search-title h3 {\n  margin: 0;\n  font-size: 0.88rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.multi-search-body {\n  padding: 14px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.multi-search-bar {\n  display: flex;\n  gap: 8px;\n}\n\n.multi-search-text {\n  flex: 1;\n  padding: 8px 12px;\n  border-radius: var(--mj-radius-sm, 6px);\n  border: 1px solid var(--mj-border-default);\n  background-color: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: 0.85rem;\n  outline: none;\n}\n\n.multi-search-text:focus {\n  border-color: var(--mj-brand-primary);\n}\n\n.multi-search-accounts {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.account-select-label {\n  font-size: 0.74rem;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n}\n\n.account-pill-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.account-select-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px solid var(--mj-border-default);\n  background-color: var(--mj-bg-surface-sunken);\n  font-size: 0.76rem;\n  cursor: pointer;\n  transition: all 0.12s ease;\n}\n\n.account-select-pill.checked {\n  border-color: var(--mj-brand-primary);\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.account-select-pill.disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.pill-account-name {\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.pill-provider-tag {\n  font-size: 0.68rem;\n  color: var(--mj-text-muted);\n}\n\n.pill-no-search {\n  font-size: 0.68rem;\n  color: var(--mj-status-warning);\n}\n\n/* Results */\n.multi-search-results {\n  border-top: 1px solid var(--mj-border-default);\n  padding: 12px 16px;\n  max-height: 400px;\n  overflow-y: auto;\n}\n\n.results-meta-bar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 12px;\n  font-size: 0.8rem;\n}\n\n.meta-count {\n  color: var(--mj-text-primary);\n}\n\n.meta-stats {\n  color: var(--mj-text-secondary);\n}\n\n.clear-results-btn {\n  margin-left: auto;\n  background: transparent;\n  border: none;\n  color: var(--mj-text-secondary);\n  font-size: 0.76rem;\n  cursor: pointer;\n}\n\n.clear-results-btn:hover {\n  color: var(--mj-text-primary);\n}\n\n.results-groups {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.result-group {\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm, 6px);\n  overflow: hidden;\n}\n\n.result-group-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background-color: var(--mj-bg-surface-sunken);\n  font-size: 0.8rem;\n}\n\n.group-account-name {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.group-count-badge {\n  margin-left: auto;\n  background-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #ffffff);\n  font-size: 0.7rem;\n  font-weight: 600;\n  padding: 1px 6px;\n  border-radius: 9999px;\n}\n\n.group-error-badge {\n  margin-left: auto;\n  color: var(--mj-status-error);\n  font-size: 0.72rem;\n}\n\n.result-items-grid {\n  display: flex;\n  flex-direction: column;\n}\n\n.search-item-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--mj-border-default);\n  font-size: 0.8rem;\n}\n\n.search-item-row:last-child {\n  border-bottom: none;\n}\n\n.search-item-icon {\n  color: var(--mj-brand-primary);\n}\n\n.search-item-info {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n}\n\n.search-item-name {\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.search-item-path {\n  font-size: 0.7rem;\n  color: var(--mj-text-muted);\n}\n\n.search-item-size, .search-item-date {\n  font-size: 0.74rem;\n  color: var(--mj-text-secondary);\n}\n\n.group-empty-text {\n  padding: 12px;\n  font-size: 0.78rem;\n  color: var(--mj-text-muted);\n  text-align: center;\n}\n\n/* ==========================================================================\n   Cards Grid View\n   ========================================================================== */\n\n.file-cards-grid {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));\n  gap: 14px;\n  align-content: start;\n}\n\n.file-card {\n  display: flex;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg, 10px);\n  padding: 10px;\n  cursor: pointer;\n  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n  position: relative;\n  user-select: none;\n}\n\n.file-card:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));\n  transform: translateY(-2px);\n}\n\n.file-card.selected {\n  border-color: var(--mj-brand-primary);\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface));\n  box-shadow: 0 0 0 1px var(--mj-brand-primary);\n}\n\n.file-card-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 22px;\n  margin-bottom: 6px;\n}\n\n.file-card-checkbox {\n  cursor: pointer;\n}\n\n.file-card-quick-actions {\n  display: flex;\n  gap: 4px;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n\n.file-card:hover .file-card-quick-actions {\n  opacity: 1;\n}\n\n.quick-action-btn {\n  width: 22px;\n  height: 22px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  color: var(--mj-text-secondary);\n  font-size: 0.68rem;\n  cursor: pointer;\n  transition: all 0.12s ease;\n}\n\n.quick-action-btn:hover {\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n/* Card Icon / Thumbnail */\n.file-card-icon-container {\n  height: 74px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--mj-radius-md, 8px);\n  margin-bottom: 8px;\n  font-size: 2rem;\n  transition: transform 0.15s ease;\n}\n\n.file-card:hover .file-card-icon-container {\n  transform: scale(1.04);\n}\n\n/* Card Body */\n.file-card-body {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.file-card-name {\n  font-size: 0.8rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  line-height: 1.25;\n  min-height: 2em;\n}\n\n.file-card-meta {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 0.7rem;\n  color: var(--mj-text-muted);\n}\n\n/* ==========================================================================\n   List View Table\n   ========================================================================== */\n\n.file-table-container {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 16px;\n}\n\n.file-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 0.82rem;\n}\n\n.file-table th {\n  text-align: left;\n  padding: 8px 10px;\n  border-bottom: 1px solid var(--mj-border-default);\n  color: var(--mj-text-muted);\n  font-size: 0.72rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  user-select: none;\n  cursor: pointer;\n}\n\n.file-table th.th-check {\n  width: 32px;\n  cursor: default;\n}\n\n.file-table th.th-actions {\n  width: 70px;\n  text-align: right;\n  cursor: default;\n}\n\n.sort-arrow {\n  margin-left: 4px;\n  font-size: 0.65rem;\n}\n\n.file-table-row {\n  border-bottom: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  transition: background-color 0.12s ease;\n}\n\n.file-table-row:hover {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 4%, var(--mj-bg-surface));\n}\n\n.file-table-row.selected {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.file-table-row td {\n  padding: 8px 10px;\n  vertical-align: middle;\n}\n\n.row-name-wrap {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n}\n\n.row-icon-badge {\n  width: 28px;\n  height: 28px;\n  min-width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--mj-radius-sm, 6px);\n  font-size: 0.9rem;\n}\n\n.row-file-name {\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.type-badge {\n  display: inline-block;\n  padding: 2px 6px;\n  border-radius: 4px;\n  background-color: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  font-size: 0.7rem;\n}\n\n.size-text, .date-text {\n  color: var(--mj-text-secondary);\n  font-size: 0.76rem;\n  white-space: nowrap;\n}\n\n.row-action-buttons {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 4px;\n  opacity: 0;\n  transition: opacity 0.12s ease;\n}\n\n.file-table-row:hover .row-action-buttons {\n  opacity: 1;\n}\n\n.row-act-btn {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  color: var(--mj-text-secondary);\n  font-size: 0.7rem;\n  cursor: pointer;\n}\n\n.row-act-btn:hover {\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n/* ==========================================================================\n   Media Color Badges\n   ========================================================================== */\n\n.mj-file-thumb--folder {\n  background-color: color-mix(in srgb, var(--mj-status-warning, #f59e0b) 14%, transparent);\n  color: var(--mj-status-warning, #f59e0b);\n}\n\n.mj-file-thumb--pdf {\n  background-color: color-mix(in srgb, var(--mj-status-error, #ef4444) 14%, transparent);\n  color: var(--mj-status-error, #ef4444);\n}\n\n.mj-file-thumb--image {\n  background-color: color-mix(in srgb, var(--mj-media-image, #8b5cf6) 14%, transparent);\n  color: var(--mj-media-image, #8b5cf6);\n}\n\n.mj-file-thumb--video {\n  background-color: color-mix(in srgb, var(--mj-brand-primary, #3b82f6) 14%, transparent);\n  color: var(--mj-brand-primary, #3b82f6);\n}\n\n.mj-file-thumb--audio {\n  background-color: color-mix(in srgb, var(--mj-status-warning, #f59e0b) 14%, transparent);\n  color: var(--mj-status-warning, #f59e0b);\n}\n\n.mj-file-thumb--code {\n  background-color: color-mix(in srgb, var(--mj-status-success, #10b981) 14%, transparent);\n  color: var(--mj-status-success, #10b981);\n}\n\n.mj-file-thumb--text {\n  background-color: color-mix(in srgb, var(--mj-text-muted, #6b7280) 14%, transparent);\n  color: var(--mj-text-muted, #6b7280);\n}\n\n.mj-file-thumb--document {\n  background-color: color-mix(in srgb, var(--mj-brand-primary-hover, #2563eb) 14%, transparent);\n  color: var(--mj-brand-primary-hover, #2563eb);\n}\n\n/* ==========================================================================\n   Status Bar (Bottom Information)\n   ========================================================================== */\n\n.status-bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 16px;\n  background-color: var(--mj-bg-surface-sunken, color-mix(in srgb, var(--mj-text-primary) 3%, var(--mj-bg-surface)));\n  border-top: 1px solid var(--mj-border-default);\n  font-size: 0.72rem;\n  color: var(--mj-text-secondary);\n  flex-shrink: 0;\n}\n\n.status-account-badge {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--mj-brand-primary);\n  font-weight: 500;\n}\n\n/* ==========================================================================\n   Drag & Drop Overlay & Progress\n   ========================================================================== */\n\n.drag-drop-overlay {\n  position: absolute;\n  inset: 0;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, rgba(255, 255, 255, 0.9));\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n.drag-drop-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 32px 48px;\n  background-color: var(--mj-bg-surface);\n  border: 2px dashed var(--mj-brand-primary);\n  border-radius: var(--mj-radius-lg, 12px);\n  box-shadow: var(--mj-shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.15));\n}\n\n.drag-icon {\n  font-size: 3rem;\n  color: var(--mj-brand-primary);\n  margin-bottom: 12px;\n}\n\n.drag-drop-content h3 {\n  margin: 0 0 6px 0;\n  font-size: 1.1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.drag-drop-content p {\n  margin: 0;\n  font-size: 0.8rem;\n  color: var(--mj-text-secondary);\n}\n\n.upload-progress-bar-wrap {\n  position: absolute;\n  bottom: 36px;\n  right: 20px;\n  z-index: 90;\n}\n\n.upload-progress-card {\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  padding: 10px 14px;\n  box-shadow: var(--mj-shadow-lg, 0 8px 20px rgba(0, 0, 0, 0.15));\n  width: 260px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.upload-info {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.upload-spinner {\n  color: var(--mj-brand-primary);\n}\n\n.upload-text {\n  font-size: 0.78rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.progress-track {\n  height: 4px;\n  background-color: var(--mj-bg-surface-sunken);\n  border-radius: 9999px;\n  overflow: hidden;\n}\n\n.progress-fill {\n  height: 100%;\n  background-color: var(--mj-brand-primary);\n  transition: width 0.15s ease;\n}\n\n.grid-loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n}\n\n/* ==========================================================================\n   Modals (Design Tokens & Glass Backdrop)\n   ========================================================================== */\n\n.mj-modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1050;\n  padding: 20px;\n  animation: modalFadeIn 0.18s ease-out;\n}\n\n@keyframes modalFadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.mj-modal-window {\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg, 12px);\n  box-shadow: var(--mj-shadow-xl, 0 20px 35px rgba(0, 0, 0, 0.25));\n  width: 100%;\n  max-width: 500px;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.mj-modal-window.modal-compact {\n  max-width: 420px;\n}\n\n.mj-modal-window.preview-modal-window {\n  max-width: 850px;\n  max-height: 85vh;\n  height: 80vh;\n}\n\n.mj-modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 18px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background-color: var(--mj-bg-surface);\n}\n\n.modal-title-wrap {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.modal-title {\n  margin: 0;\n  font-size: 0.95rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.modal-subtitle {\n  font-size: 0.72rem;\n  color: var(--mj-text-muted);\n}\n\n.modal-header-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.modal-close-btn {\n  background: transparent;\n  border: none;\n  color: var(--mj-text-secondary);\n  font-size: 1rem;\n  cursor: pointer;\n  padding: 4px;\n  border-radius: 4px;\n}\n\n.modal-close-btn:hover {\n  color: var(--mj-text-primary);\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.mj-modal-body {\n  padding: 18px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.form-label {\n  font-size: 0.78rem;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.form-input {\n  padding: 8px 12px;\n  border-radius: var(--mj-radius-sm, 6px);\n  border: 1px solid var(--mj-border-default);\n  background-color: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: 0.85rem;\n  outline: none;\n}\n\n.form-input:focus {\n  border-color: var(--mj-brand-primary);\n}\n\n.modal-body-text {\n  margin: 0;\n  font-size: 0.85rem;\n  color: var(--mj-text-primary);\n}\n\n.modal-warning-banner {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background-color: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n  border: 1px solid var(--mj-status-warning);\n  border-radius: var(--mj-radius-sm, 6px);\n  font-size: 0.76rem;\n  color: var(--mj-text-primary);\n}\n\n.mj-modal-footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px 18px;\n  border-top: 1px solid var(--mj-border-default);\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n/* Preview Modal Body */\n.preview-modal-body {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--mj-bg-surface-sunken);\n  padding: 16px;\n  overflow: hidden;\n}\n\n.preview-media-wrap {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.preview-img {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n  border-radius: var(--mj-radius-md, 8px);\n}\n\n.preview-iframe {\n  width: 100%;\n  height: 100%;\n  border: none;\n  border-radius: var(--mj-radius-md, 8px);\n}\n\n.preview-video {\n  max-width: 100%;\n  max-height: 100%;\n  border-radius: var(--mj-radius-md, 8px);\n}\n\n.audio-preview-wrap {\n  flex-direction: column;\n  gap: 16px;\n}\n\n.preview-audio-icon {\n  font-size: 3rem;\n  color: var(--mj-brand-primary);\n}\n\n.preview-audio {\n  width: 320px;\n}\n\n.preview-fallback {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  text-align: center;\n  color: var(--mj-text-secondary);\n}\n\n.preview-fallback-icon {\n  font-size: 3rem;\n  color: var(--mj-text-muted);\n  margin-bottom: 8px;\n}\n\n.preview-fallback h4 {\n  margin: 0;\n  font-size: 0.95rem;\n  color: var(--mj-text-primary);\n}\n\n.preview-fallback p {\n  margin: 0;\n  font-size: 0.8rem;\n}\n\n.account-picker-list {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  max-height: 180px;\n  overflow-y: auto;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm, 6px);\n  padding: 6px;\n}\n\n.account-picker-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 8px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.account-picker-item:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.picker-name {\n  font-size: 0.82rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.picker-badge {\n  margin-left: auto;\n  font-size: 0.7rem;\n  color: var(--mj-text-muted);\n}\n\n.copy-progress-indicator {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 0.78rem;\n  color: var(--mj-brand-primary);\n  margin-top: 8px;\n}\n"] }]
+    }], () => [], { Account: [{
+            type: Input
+        }], account: [{
+            type: Input
+        }], FolderPath: [{
             type: Input
         }], folderPath: [{
             type: Input
+        }], FolderNavigate: [{
+            type: Output
         }], folderNavigate: [{
             type: Output
+        }], FolderStructureChanged: [{
+            type: Output
         }], folderStructureChanged: [{
             type: Output
         }] }); })();