@memberjunction/ng-dashboards 6.2.0-edge.3 → 6.2.0-edge.4

package/dist/DashboardBrowser/dashboard-browser-resource.component.js

@@ -4,168 +4,43 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, ChangeDetectionStrategy, ViewChild } from '@angular/core';
-import { RegisterClass, UUIDsEqual } from '@memberjunction/global';
-import { CompositeKey } from '@memberjunction/core';
-import { BaseResourceComponent } from '@memberjunction/ng-shared';
-import { DashboardEngine } from '@memberjunction/core-entities';
+var DashboardBrowserResourceComponent_1;
+import { Component, ChangeDetectionStrategy, inject } from '@angular/core';
+import { skip, takeUntil } from 'rxjs/operators';
+import { LogError } from '@memberjunction/core';
+import { CountByUUID, GroupByUUID, IndexByUUID, RegisterClass, UUIDsEqual } from '@memberjunction/global';
+import { BaseResourceComponent, DashboardFavoritesService } from '@memberjunction/ng-shared';
+import { RecentAccessService } from '@memberjunction/ng-shared-generic';
+import { ApplicationManager } from '@memberjunction/ng-base-application';
+import { MJNotificationService } from '@memberjunction/ng-notifications';
+import { DashboardEngine, UserInfoEngine } from '@memberjunction/core-entities';
 import { BuildDashboardBrowserAgentContext, IsValidBrowserViewMode, } from './dashboard-browser-agent-context';
+import { BuildLibraryRailSections, CountDashboardsByCategory, CountLibraryDashboards, DASHBOARD_LIBRARY_FILTERS, FilterDashboardsForLibrary, IsBrowsableDashboard, IsCategoryFolderLocation, IsDashboardLibraryFilter, LibraryEmptyState, LocationQueryParams, ParseRailItemId, RailActiveItemId, ResolveBrowseLocation, SameBrowseLocation, ToggleExpandedId, UNCATEGORIZED_CATEGORY_ID, VisibleLibraryDashboards, WithExpandedAncestors, } from './dashboard-library-filter';
+import { LoadRecentDashboardIds, ObserveRecentDashboardIds } from '../shared/dashboard-recents';
+import { ObserveDashboardLibraryChanges } from '../shared/dashboard-library-changes';
+import { BuildOwnerLabels, LoadDashboardOwnerNames, OwnerIdsToLoad } from '../shared/dashboard-owner-names';
+import { CreateBlankDashboard, DashboardNameMaxLength, DashboardsAppOpenOptions } from '../shared/dashboards-app.helpers';
 import { ValidateStringParam, } from '../shared/agent-tool-validation';
-import { createDefaultDashboardConfig, extractPanelsFromLayout } from '@memberjunction/ng-dashboard-viewer';
+import { DASHBOARD_NAME_MAX_LENGTH } from '@memberjunction/ng-dashboard-viewer';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/forms";
+import * as i1 from "@memberjunction/ng-ui-components";
 import * as i2 from "@memberjunction/ng-dashboard-viewer";
-import * as i3 from "./dashboard-share-dialog.component";
-const _c0 = ["dashboardViewer"];
-function DashboardBrowserResourceComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-dashboard-browser", 3);
-    i0.ɵɵlistener("DashboardOpen", function DashboardBrowserResourceComponent_Conditional_1_Template_mj_dashboard_browser_DashboardOpen_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDashboardOpen($event)); })("DashboardEdit", function DashboardBrowserResourceComponent_Conditional_1_Template_mj_dashboard_browser_DashboardEdit_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDashboardEdit($event)); })("DashboardDelete", function DashboardBrowserResourceComponent_Conditional_1_Template_mj_dashboard_browser_DashboardDelete_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDashboardDelete($event)); })("DashboardMove", function DashboardBrowserResourceComponent_Conditional_1_Template_mj_dashboard_browser_DashboardMove_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDashboardMove($event)); })("DashboardCreate", function DashboardBrowserResourceComponent_Conditional_1_Template_mj_dashboard_browser_DashboardCreate_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDashboardCreate($event)); })("CategoryCreate", function DashboardBrowserResourceComponent_Conditional_1_Template_mj_dashboard_browser_CategoryCreate_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCategoryCreate($event)); })("CategoryDelete", function DashboardBrowserResourceComponent_Conditional_1_Template_mj_dashboard_browser_CategoryDelete_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCategoryDelete($event)); })("CategoryChange", function DashboardBrowserResourceComponent_Conditional_1_Template_mj_dashboard_browser_CategoryChange_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCategoryChange($event)); })("ViewPreferenceChange", function DashboardBrowserResourceComponent_Conditional_1_Template_mj_dashboard_browser_ViewPreferenceChange_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewPreferenceChange($event)); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("Dashboards", ctx_r1.dashboards)("Categories", ctx_r1.categories)("SelectedCategoryId", ctx_r1.selectedCategoryId)("ViewMode", ctx_r1.viewMode)("IsLoading", ctx_r1.isLoading)("ShowCreateButton", true)("AllowMultiSelect", true)("AllowDragDrop", true)("DashboardPermissions", ctx_r1.dashboardPermissionsMap)("EffectiveCategoryMap", ctx_r1.effectiveCategoryMap);
-} }
-function DashboardBrowserResourceComponent_Conditional_2_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 14);
-    i0.ɵɵelement(1, "i", 19);
-    i0.ɵɵtext(2, " Shared with you ");
-    i0.ɵɵelementEnd();
-} }
-function DashboardBrowserResourceComponent_Conditional_2_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 20);
-    i0.ɵɵlistener("click", function DashboardBrowserResourceComponent_Conditional_2_Conditional_0_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.openShareDialog()); });
-    i0.ɵɵelement(1, "i", 21);
-    i0.ɵɵelementEnd();
-} }
-function DashboardBrowserResourceComponent_Conditional_2_Conditional_0_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 22);
-    i0.ɵɵlistener("click", function DashboardBrowserResourceComponent_Conditional_2_Conditional_0_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleEditMode()); });
-    i0.ɵɵelement(1, "i", 23);
-    i0.ɵɵelementEnd();
-} }
-function DashboardBrowserResourceComponent_Conditional_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 4)(1, "mj-dashboard-breadcrumb", 12);
-    i0.ɵɵlistener("Navigate", function DashboardBrowserResourceComponent_Conditional_2_Conditional_0_Template_mj_dashboard_breadcrumb_Navigate_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onBreadcrumbNavigate($event)); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "div", 13);
-    i0.ɵɵconditionalCreate(3, DashboardBrowserResourceComponent_Conditional_2_Conditional_0_Conditional_3_Template, 3, 0, "span", 14);
-    i0.ɵɵelementStart(4, "button", 15);
-    i0.ɵɵlistener("click", function DashboardBrowserResourceComponent_Conditional_2_Conditional_0_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openInNewTab()); });
-    i0.ɵɵelement(5, "i", 16);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, DashboardBrowserResourceComponent_Conditional_2_Conditional_0_Conditional_6_Template, 2, 0, "button", 17);
-    i0.ɵɵconditionalCreate(7, DashboardBrowserResourceComponent_Conditional_2_Conditional_0_Conditional_7_Template, 2, 0, "button", 18);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("Categories", ctx_r1.categories)("CurrentCategoryId", (ctx_r1.selectedDashboard == null ? null : ctx_r1.selectedDashboard.CategoryID) || null)("CurrentDashboard", ctx_r1.selectedDashboard)("ShowDashboardName", true)("AllowDragDrop", false);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(!ctx_r1.selectedDashboardPermissions.IsOwner && ctx_r1.selectedDashboardPermissions.CanRead ? 3 : -1);
-    i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.selectedDashboardPermissions.CanShare ? 6 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.selectedDashboardPermissions.CanEdit ? 7 : -1);
-} }
-function DashboardBrowserResourceComponent_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 5)(1, "div", 24)(2, "button", 25);
-    i0.ɵɵlistener("click", function DashboardBrowserResourceComponent_Conditional_2_Conditional_1_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openAddPartDialog()); });
-    i0.ɵɵelement(3, "i", 26);
-    i0.ɵɵtext(4, " Add Part ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "div", 27);
-    i0.ɵɵelementStart(6, "div", 28)(7, "input", 29);
-    i0.ɵɵtwoWayListener("ngModelChange", function DashboardBrowserResourceComponent_Conditional_2_Conditional_1_Template_input_ngModelChange_7_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.editingName, $event) || (ctx_r1.editingName = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("blur", function DashboardBrowserResourceComponent_Conditional_2_Conditional_1_Template_input_blur_7_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onNameBlur()); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "input", 30);
-    i0.ɵɵtwoWayListener("ngModelChange", function DashboardBrowserResourceComponent_Conditional_2_Conditional_1_Template_input_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.editingDescription, $event) || (ctx_r1.editingDescription = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(9, "div", 31)(10, "button", 32);
-    i0.ɵɵlistener("click", function DashboardBrowserResourceComponent_Conditional_2_Conditional_1_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.saveDashboard()); });
-    i0.ɵɵelement(11, "i", 33);
-    i0.ɵɵtext(12, " Save ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "button", 34);
-    i0.ɵɵlistener("click", function DashboardBrowserResourceComponent_Conditional_2_Conditional_1_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.cancelEdit()); });
-    i0.ɵɵtext(14, " Cancel ");
-    i0.ɵɵelementEnd()()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(7);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.editingName);
-    i0.ɵɵadvance();
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.editingDescription);
-} }
-function DashboardBrowserResourceComponent_Conditional_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-add-panel-dialog", 35);
-    i0.ɵɵlistener("panelAdded", function DashboardBrowserResourceComponent_Conditional_2_Conditional_5_Template_mj_add_panel_dialog_panelAdded_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onPanelAdded($event)); })("cancelled", function DashboardBrowserResourceComponent_Conditional_2_Conditional_5_Template_mj_add_panel_dialog_cancelled_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onAddPanelCancelled()); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    i0.ɵɵnextContext();
-    const dashboardViewer_r9 = i0.ɵɵreference(4);
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("visible", ctx_r1.showAddPanelDialog)("partTypes", dashboardViewer_r9.getPartTypes());
-} }
-function DashboardBrowserResourceComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, DashboardBrowserResourceComponent_Conditional_2_Conditional_0_Template, 8, 8, "div", 4);
-    i0.ɵɵconditionalCreate(1, DashboardBrowserResourceComponent_Conditional_2_Conditional_1_Template, 15, 2, "div", 5);
-    i0.ɵɵelementStart(2, "div", 6)(3, "mj-dashboard-viewer", 7, 0);
-    i0.ɵɵlistener("panelInteraction", function DashboardBrowserResourceComponent_Conditional_2_Template_mj_dashboard_viewer_panelInteraction_3_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onPanelInteraction($event)); })("navigationRequested", function DashboardBrowserResourceComponent_Conditional_2_Template_mj_dashboard_viewer_navigationRequested_3_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onNavigationRequested($event)); });
-    i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(5, DashboardBrowserResourceComponent_Conditional_2_Conditional_5_Template, 1, 2, "mj-add-panel-dialog", 8);
-    i0.ɵɵelementStart(6, "mj-edit-part-dialog", 9);
-    i0.ɵɵlistener("Saved", function DashboardBrowserResourceComponent_Conditional_2_Template_mj_edit_part_dialog_Saved_6_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfigDialogSaved($event)); })("Cancelled", function DashboardBrowserResourceComponent_Conditional_2_Template_mj_edit_part_dialog_Cancelled_6_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfigDialogCancelled()); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "mj-confirm-dialog", 10);
-    i0.ɵɵlistener("confirmed", function DashboardBrowserResourceComponent_Conditional_2_Template_mj_confirm_dialog_confirmed_7_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRemoveConfirmed()); })("cancelled", function DashboardBrowserResourceComponent_Conditional_2_Template_mj_confirm_dialog_cancelled_7_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRemoveCancelled()); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "mj-dashboard-share-dialog", 11);
-    i0.ɵɵlistener("Result", function DashboardBrowserResourceComponent_Conditional_2_Template_mj_dashboard_share_dialog_Result_8_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onShareDialogResult($event)); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const dashboardViewer_r9 = i0.ɵɵreference(4);
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵconditional(ctx_r1.mode === "view" ? 0 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.mode === "edit" ? 1 : -1);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("dashboard", ctx_r1.selectedDashboard)("isEditing", ctx_r1.mode === "edit")("showToolbar", false)("showBreadcrumb", false);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(dashboardViewer_r9 ? 5 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("Visible", ctx_r1.showConfigDialog)("PartType", ctx_r1.configDialogPartType)("Panel", ctx_r1.configDialogPanel)("Config", (ctx_r1.configDialogPanel == null ? null : ctx_r1.configDialogPanel.config) || null);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("visible", ctx_r1.showConfirmDialog)("message", "Are you sure you want to remove '" + ctx_r1.confirmPanelTitle + "' from this dashboard?");
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("Visible", ctx_r1.showShareDialog)("Dashboard", ctx_r1.selectedDashboard);
-} }
 /**
- * Resource component for browsing, creating, and editing dashboards.
- * Uses the generic DashboardBrowserComponent for list mode and handles
- * view/edit mode internally with routing integration.
+ * Library page of the Dashboards app. A left rail picks a Library filter (All, Mine, Shared with
+ * me, Favorites, Recently opened), a category or Uncategorized; the generic
+ * DashboardBrowserComponent lists the result. Every list is flat, favorites first, then the
+ * dashboards opened last, then the rest; a category opens as a folder. Cards show a star the user
+ * can toggle and the owner ("You" or the owner's name). A click opens the dashboard in a tab of the
+ * Dashboards app, in place of the preview tab, so Back returns to the Library. A Shift, Ctrl or Cmd
+ * click opens it in a separate tab. New dashboard asks for the name first, then opens the new
+ * dashboard in edit mode.
  */
 let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent extends BaseResourceComponent {
+    static { DashboardBrowserResourceComponent_1 = this; }
     cdr;
     // ========================================
     // State
     // ========================================
-    Mode = 'list';
-    /** @deprecated Use {@link Mode}. */
-    get mode() {
-        return this.Mode;
-    }
-    /** @deprecated Use {@link Mode}. */
-    set mode(value) {
-        this.Mode = value;
-    }
     isLoading = false;
     Dashboards = [];
     /** @deprecated Use {@link Dashboards}. */
@@ -185,15 +60,6 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
     set categories(value) {
         this.Categories = value;
     }
-    SelectedDashboard = null;
-    /** @deprecated Use {@link SelectedDashboard}. */
-    get selectedDashboard() {
-        return this.SelectedDashboard;
-    }
-    /** @deprecated Use {@link SelectedDashboard}. */
-    set selectedDashboard(value) {
-        this.SelectedDashboard = value;
-    }
     SelectedCategoryId = null;
     /** @deprecated Use {@link SelectedCategoryId}. */
     get selectedCategoryId() {
@@ -212,144 +78,12 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
     set viewMode(value) {
         this.ViewMode = value;
     }
-    ShowAddPanelDialog = false;
-    /** @deprecated Use {@link ShowAddPanelDialog}. */
-    get showAddPanelDialog() {
-        return this.ShowAddPanelDialog;
-    }
-    /** @deprecated Use {@link ShowAddPanelDialog}. */
-    set showAddPanelDialog(value) {
-        this.ShowAddPanelDialog = value;
-    }
     /**
      * Free-text search the agent has applied to the dashboard list (via the
      * SearchDashboards tool). Reported in the agent context so the agent knows
      * how the visible list is currently narrowed; cleared by ClearDashboardFilters.
      */
     agentSearchText = '';
-    /**
-     * Which tool-set ('list' vs 'open') is currently registered with the agent.
-     * The Dashboard Browser exposes different tools depending on whether the user
-     * is browsing the list or has a dashboard open (mirrors the Data Explorer's
-     * mode-scoped tools). We only re-register on the flip — see
-     * {@link syncAgentToolsForMode}.
-     */
-    lastRegisteredToolMode = null;
-    // Config dialog state
-    ShowConfigDialog = false;
-    /** @deprecated Use {@link ShowConfigDialog}. */
-    get showConfigDialog() {
-        return this.ShowConfigDialog;
-    }
-    /** @deprecated Use {@link ShowConfigDialog}. */
-    set showConfigDialog(value) {
-        this.ShowConfigDialog = value;
-    }
-    ConfigDialogPanel = null;
-    /** @deprecated Use {@link ConfigDialogPanel}. */
-    get configDialogPanel() {
-        return this.ConfigDialogPanel;
-    }
-    /** @deprecated Use {@link ConfigDialogPanel}. */
-    set configDialogPanel(value) {
-        this.ConfigDialogPanel = value;
-    }
-    ConfigDialogPartType = null;
-    /** @deprecated Use {@link ConfigDialogPartType}. */
-    get configDialogPartType() {
-        return this.ConfigDialogPartType;
-    }
-    /** @deprecated Use {@link ConfigDialogPartType}. */
-    set configDialogPartType(value) {
-        this.ConfigDialogPartType = value;
-    }
-    ConfigDialogClass = '';
-    /** @deprecated Use {@link ConfigDialogClass}. */
-    get configDialogClass() {
-        return this.ConfigDialogClass;
-    }
-    /** @deprecated Use {@link ConfigDialogClass}. */
-    set configDialogClass(value) {
-        this.ConfigDialogClass = value;
-    }
-    // Confirm dialog state
-    ShowConfirmDialog = false;
-    /** @deprecated Use {@link ShowConfirmDialog}. */
-    get showConfirmDialog() {
-        return this.ShowConfirmDialog;
-    }
-    /** @deprecated Use {@link ShowConfirmDialog}. */
-    set showConfirmDialog(value) {
-        this.ShowConfirmDialog = value;
-    }
-    ConfirmPanelId = '';
-    /** @deprecated Use {@link ConfirmPanelId}. */
-    get confirmPanelId() {
-        return this.ConfirmPanelId;
-    }
-    /** @deprecated Use {@link ConfirmPanelId}. */
-    set confirmPanelId(value) {
-        this.ConfirmPanelId = value;
-    }
-    ConfirmPanelTitle = '';
-    /** @deprecated Use {@link ConfirmPanelTitle}. */
-    get confirmPanelTitle() {
-        return this.ConfirmPanelTitle;
-    }
-    /** @deprecated Use {@link ConfirmPanelTitle}. */
-    set confirmPanelTitle(value) {
-        this.ConfirmPanelTitle = value;
-    }
-    // Share dialog state
-    ShowShareDialog = false;
-    /** @deprecated Use {@link ShowShareDialog}. */
-    get showShareDialog() {
-        return this.ShowShareDialog;
-    }
-    /** @deprecated Use {@link ShowShareDialog}. */
-    set showShareDialog(value) {
-        this.ShowShareDialog = value;
-    }
-    // Edit mode state for name/description
-    EditingName = '';
-    /** @deprecated Use {@link EditingName}. */
-    get editingName() {
-        return this.EditingName;
-    }
-    /** @deprecated Use {@link EditingName}. */
-    set editingName(value) {
-        this.EditingName = value;
-    }
-    EditingDescription = '';
-    /** @deprecated Use {@link EditingDescription}. */
-    get editingDescription() {
-        return this.EditingDescription;
-    }
-    /** @deprecated Use {@link EditingDescription}. */
-    set editingDescription(value) {
-        this.EditingDescription = value;
-    }
-    originalName = '';
-    originalDescription = '';
-    originalConfig = '';
-    // Permission state for selected dashboard
-    SelectedDashboardPermissions = {
-        DashboardID: '',
-        CanRead: true,
-        CanEdit: true,
-        CanDelete: true,
-        CanShare: true,
-        IsOwner: true,
-        PermissionSource: 'owner'
-    };
-    /** @deprecated Use {@link SelectedDashboardPermissions}. */
-    get selectedDashboardPermissions() {
-        return this.SelectedDashboardPermissions;
-    }
-    /** @deprecated Use {@link SelectedDashboardPermissions}. */
-    set selectedDashboardPermissions(value) {
-        this.SelectedDashboardPermissions = value;
-    }
     // Permission map for all dashboards (used by browser component)
     DashboardPermissionsMap = new Map();
     /** @deprecated Use {@link DashboardPermissionsMap}. */
@@ -373,15 +107,48 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
     // Query params that arrived before the dashboard list finished loading (cold
     // load / deep link / pin navigation). Applied once loadDashboards() completes.
     _pendingQueryParams = null;
-    DashboardViewer;
-    /** @deprecated Use {@link DashboardViewer}. */
-    get dashboardViewer() {
-        return this.DashboardViewer;
-    }
-    /** @deprecated Use {@link DashboardViewer}. */
-    set dashboardViewer(value) {
-        this.DashboardViewer = value;
-    }
+    // True once a load has applied the tab's creation-time query params. That
+    // snapshot never changes, so later loads must not apply it again.
+    _initialQueryParamsApplied = false;
+    /** The ids of the dashboards the user opened, most recent first, as last read from the record logs. */
+    recentDashboardIds = [];
+    favorites = inject(DashboardFavoritesService);
+    recentAccess = inject(RecentAccessService);
+    appManager = inject(ApplicationManager);
+    notifications = inject(MJNotificationService);
+    /** The active Library filter. A category is only selected under `all`. */
+    LibraryFilter = 'all';
+    /** The dashboards given to the browser: the loaded list for the current location, in the Library order. */
+    VisibleDashboards = [];
+    /** IDs of the user's favorite dashboards, for the card stars. */
+    FavoriteIds = [];
+    /** Each dashboard's owner text ("You" or the owner's name), keyed by dashboard ID. */
+    OwnerLabels = new Map();
+    /** What an empty flat list shows at the current location. */
+    EmptyState = LibraryEmptyState({ Filter: 'all', CategoryId: null });
+    /** Owner names read so far, keyed by normalized user ID. '' = the read did not return the user. */
+    ownerNames = new Map();
+    /** Normalized IDs of the owners whose names are being read. */
+    ownerReadsInFlight = new Set();
+    /** How many dashboards the browser shows for each Library filter. */
+    LibraryCounts = { all: 0, mine: 0, shared: 0, favorites: 0, recent: 0 };
+    /** The rail's Library and Categories sections. */
+    RailSections = [];
+    /** Rail ids of the expanded category tree items. */
+    RailExpandedIds = [];
+    /** Whether the rail is collapsed to icons. Saved per user. */
+    RailCollapsed = false;
+    /** True while the New dashboard dialog is open. */
+    ShowNewDashboardDialog = false;
+    /** True while the dashboard named in the New dashboard dialog is being created. */
+    IsCreatingDashboard = false;
+    /** The longest name the New dashboard dialog accepts. */
+    NewDashboardNameMaxLength = DASHBOARD_NAME_MAX_LENGTH;
+    /** The category the dashboard named in the dialog is filed in; null for no category. */
+    newDashboardCategoryId = null;
+    static RAIL_COLLAPSED_SETTING = 'mj.dashboards.browseRailCollapsed';
+    // True once the top-level categories have been expanded on first load.
+    railExpansionInitialized = false;
     // ========================================
     // Constructor
     // ========================================
@@ -397,9 +164,24 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
         // super.ngOnInit() wires up the query-param delivery. Any deep-link/pin params
         // that arrive before loadDashboards() finishes are captured by OnQueryParamsChanged
         // into _pendingQueryParams and applied once the dashboard list is available.
+        // Favorites and recents change while the Library is also a background tab. RecentItems emits
+        // right after a dashboard open is logged, and each emission reads the recently opened
+        // dashboards again. It also replays its current list on subscribe; loadDashboards() reads
+        // the first list, so that replay is skipped.
+        this.favorites.Changed$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => this.onLibrarySourcesChanged());
+        ObserveRecentDashboardIds(this.ProviderToUse, this.recentAccess.RecentItems.pipe(skip(1)))
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(ids => this.onRecentDashboardIdsChanged(ids));
+        // The dashboard cache also changes while the Library is a background tab (saves and deletes
+        // in other tabs or sessions), so the Library re-reads it and refreshes the view.
+        ObserveDashboardLibraryChanges()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => this.onLibraryCacheChanged());
         this.loadDashboards();
         this.loadViewPreference();
-        this.syncAgentToolsForMode();
+        this.registerAgentTools();
         this.emitAgentContext();
     }
     ngOnDestroy() {
@@ -415,10 +197,16 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
      * ActivatedRoute subscription could not reliably cover.
      */
     OnQueryParamsChanged(params, _source) {
-        // Category is a cheap assignment with no list lookup — apply it eagerly either way.
-        this.SelectedCategoryId = params['category'] || null;
+        // The Library filter and category need no list lookup — apply them eagerly either way.
+        // Only a location change is reported to the agent, so the delivery that only removes the
+        // `dashboard` param (after a `?dashboard=` link opens its dashboard) reports nothing.
+        const previous = this.currentLocation;
+        this.applyLocation(ResolveBrowseLocation(params) ?? { Filter: 'all', CategoryId: null });
+        if (!SameBrowseLocation(previous, this.currentLocation)) {
+            this.emitAgentContext();
+        }
         if (params['dashboard'] && this.Dashboards.length === 0) {
-            // List not loaded yet — defer the dashboard selection until it is.
+            // List not loaded yet — defer the dashboard open until it is.
             this._pendingQueryParams = params;
             this.cdr.detectChanges();
             return;
@@ -426,129 +214,195 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
         this.applyDashboardSelectionFromParams(params);
     }
     /**
-     * Open/close the dashboard to match the `dashboard` query param. Requires the
-     * dashboard list to be loaded. URL pushes from openDashboard()/backToList() are
-     * auto-suppressed while delivering, so this reflects URL → state without looping.
+     * Opens the dashboard named by the `dashboard` query param,
+     * then removes the param, so a reload does not open it again and the same
+     * link opens it next time. Requires the dashboard list to be loaded.
      */
     applyDashboardSelectionFromParams(params) {
         const dashboardId = params['dashboard'] || null;
-        const currentDashboardId = this.SelectedDashboard?.ID || null;
-        if (dashboardId === currentDashboardId) {
-            this.cdr.detectChanges();
-            return;
-        }
         if (dashboardId) {
             const dashboard = this.Dashboards.find(d => UUIDsEqual(d.ID, dashboardId));
             if (dashboard) {
-                this.OpenDashboard(dashboard);
+                this.openDashboard(dashboard);
             }
+            this.clearDashboardQueryParam();
         }
-        else {
-            this.BackToList();
-        }
+        this.cdr.detectChanges();
+    }
+    /**
+     * Removes the `dashboard` query param from this tab. Deferred to a microtask
+     * because UpdateQueryParams does nothing while OnQueryParamsChanged is being
+     * delivered.
+     */
+    clearDashboardQueryParam() {
+        queueMicrotask(() => this.UpdateQueryParams({ dashboard: null }));
+    }
+    /**
+     * Opens a dashboard in a tab of the Dashboards app (see DashboardsAppOpenOptions), in edit mode
+     * when `openInEditMode` is set, and in a separate tab when `openInNewTab` is set. The Library
+     * itself stays on the list.
+     */
+    openDashboard(dashboard, openInEditMode = false, openInNewTab = false) {
+        this.navigationService.OpenDashboard(dashboard.ID, dashboard.Name, DashboardsAppOpenOptions(this.appManager, openInEditMode, openInNewTab));
     }
     // ========================================
     // BaseResourceComponent Implementation
     // ========================================
-    async GetResourceDisplayName(data) {
-        return 'Dashboards';
+    async GetResourceDisplayName(_data) {
+        return 'Library';
     }
-    async GetResourceIconClass(data) {
-        return 'fa-solid fa-gauge-high';
+    async GetResourceIconClass(_data) {
+        return 'fa-solid fa-layer-group';
+    }
+    // ========================================
+    // Library Rail
+    // ========================================
+    /** The rail item for the current Library filter or category. */
+    get RailActiveId() {
+        return RailActiveItemId(this.currentLocation, this.Categories);
+    }
+    /** True unless one category's folder is open: every other location is a flat list. */
+    get IsFlatView() {
+        return !IsCategoryFolderLocation(this.currentLocation);
+    }
+    /** Moves the Library to the Library filter, category or Uncategorized of the clicked rail item. */
+    OnRailItemClicked(item) {
+        const location = ParseRailItemId(item.id);
+        if (location) {
+            this.moveTo(location);
+        }
+    }
+    /** Expands or collapses a category in the rail tree. */
+    OnRailItemToggled(item) {
+        this.RailExpandedIds = ToggleExpandedId(this.RailExpandedIds, item.id);
+        this.cdr.detectChanges();
+    }
+    /** Collapses or expands the whole rail and saves the choice for the user. */
+    OnRailCollapsedChange(collapsed) {
+        this.RailCollapsed = collapsed;
+        UserInfoEngine.Instance.SetSettingDebounced(DashboardBrowserResourceComponent_1.RAIL_COLLAPSED_SETTING, String(collapsed));
+    }
+    get currentLocation() {
+        return { Filter: this.LibraryFilter, CategoryId: this.SelectedCategoryId };
+    }
+    /** Applies a location the user chose, writes it to the URL, and reports it to the agent. */
+    moveTo(location) {
+        this.applyLocation(location);
+        this.updateUrlQueryParams();
+        this.emitAgentContext();
+        this.cdr.detectChanges();
+    }
+    /** Sets the Library filter and category, then recomputes what the browser and the rail show. */
+    applyLocation(location) {
+        this.LibraryFilter = location.Filter;
+        this.SelectedCategoryId = location.CategoryId;
+        this.refreshLibraryView();
+    }
+    /**
+     * Recomputes what the browser and the rail show from the current state: the visible dashboards,
+     * the stars, the owners, the empty state, the counts and the rail sections.
+     */
+    refreshLibraryView() {
+        const context = this.libraryContext();
+        this.VisibleDashboards = VisibleLibraryDashboards(this.Dashboards, this.currentLocation, context, this.EffectiveCategoryMap);
+        this.FavoriteIds = context.FavoriteIds;
+        this.OwnerLabels = BuildOwnerLabels(this.Dashboards, context.CurrentUserId, this.ownerNames);
+        this.EmptyState = LibraryEmptyState(this.currentLocation);
+        this.LibraryCounts = CountLibraryDashboards(this.Dashboards, context);
+        const categoryCounts = CountDashboardsByCategory(this.Dashboards, this.Categories, this.EffectiveCategoryMap);
+        this.RailSections = BuildLibraryRailSections(this.LibraryCounts, this.Categories, categoryCounts.ByCategory, categoryCounts.Uncategorized);
+        this.refreshRailExpansion();
+    }
+    /**
+     * Expands the top-level categories the first time there are any, then keeps the user's
+     * choices, adding only the folders above the selected category so it stays visible.
+     */
+    refreshRailExpansion() {
+        if (!this.railExpansionInitialized && this.Categories.length > 0) {
+            const topLevelItems = this.RailSections.flatMap(section => section.items);
+            this.RailExpandedIds = topLevelItems.filter(item => item.children?.length).map(item => item.id);
+            this.railExpansionInitialized = true;
+        }
+        this.RailExpandedIds = WithExpandedAncestors(this.RailExpandedIds, this.SelectedCategoryId, this.Categories);
+    }
+    libraryContext() {
+        return {
+            CurrentUserId: this.ProviderToUse.CurrentUser.ID,
+            FavoriteIds: this.favorites.FavoriteIds(),
+            RecentIds: this.recentDashboardIds,
+        };
+    }
+    /**
+     * Favorites or recents changed: recompute the view, which re-sorts it, and re-render. Does not
+     * report to the agent, because these changes also arrive while the Library is a background tab
+     * and the agent context belongs to the active tab.
+     */
+    onLibrarySourcesChanged() {
+        this.refreshLibraryView();
+        this.cdr.detectChanges();
+    }
+    /** The recently opened dashboards were read again: keep them, then refresh as {@link onLibrarySourcesChanged} does. */
+    onRecentDashboardIdsChanged(ids) {
+        this.recentDashboardIds = ids;
+        this.onLibrarySourcesChanged();
+    }
+    /**
+     * The dashboard cache changed: re-read it, refresh the view and read the names of new owners.
+     * Does not report to the agent, because this also runs while the Library is a background tab.
+     */
+    onLibraryCacheChanged() {
+        this.readLibraryFromEngine();
+        this.refreshLibraryView();
+        this.cdr.detectChanges();
+        void this.refreshOwnerNames();
     }
     // ========================================
     // Agent Context & Client Tools
     //
-    // 🔒 SAFETY BOUNDARY: the Dashboard Browser exposes ONLY read-only /
-    // navigational tools to the AI agent. The tool-set is MODE-SCOPED (mirrors
-    // the Data Explorer):
-    //   COMMON (both modes): SearchDashboards, OpenDashboard (by name/id —
-    //     still useful while viewing, to switch dashboards), RefreshDashboardList.
-    //   LIST mode only: SelectCategory, FilterByCategory, ClearDashboardFilters,
-    //     SwitchViewMode.
-    //   OPEN mode only (a dashboard is open): BackToList, GetDashboardPanels,
-    //     GetDashboardDetail.
-    //   READ-ONLY DETAIL (registered in both modes alongside the above):
-    //     GetCategoryHierarchy, GetDashboardShares (and GetDashboardDetail).
+    // 🔒 SAFETY BOUNDARY: the Library page exposes ONLY read-only /
+    // navigational tools to the AI agent: SearchDashboards, OpenDashboard (opens
+    // the dashboard), RefreshDashboardList, SelectLibraryFilter,
+    // SelectCategory, FilterByCategory, ClearDashboardFilters, SwitchViewMode, and
+    // the read-only detail tools GetCategoryHierarchy and GetDashboardShares.
     //
     // Mutating operations — create / delete / save / share / move a dashboard,
-    // create / delete a category, add / remove / configure a panel — are
-    // intentionally NOT exposed. The agent helps the user find, open, and
-    // understand dashboards (including the panels on the open one, its owner,
-    // dates, access level, the category tree, and who it's shared with); the
-    // user performs every mutation from the UI. Do NOT add a mutating tool here
-    // without revisiting this boundary.
+    // create / delete a category, add or remove a favorite — are intentionally
+    // NOT exposed. The agent helps the user find, open, and understand dashboards
+    // (the category tree and who a dashboard is shared with); the user performs
+    // every mutation from the UI, including the star on a card. Do NOT add a
+    // mutating tool here without revisiting this boundary.
     // ========================================
     /**
      * Report the current browser state to the AI agent (async chat agent and
-     * realtime co-agent). Re-emit whenever mode, selection, category filter,
+     * realtime co-agent). Re-emit whenever the list, search, category filter,
      * view mode, or loading state changes.
      */
     emitAgentContext() {
-        // Keep the registered tool-set aligned with the current mode before we
-        // publish context, so the agent's tool manifest and context agree.
-        this.syncAgentToolsForMode();
-        const selectedCategory = this.SelectedCategoryId
-            ? this.Categories.find(c => UUIDsEqual(c.ID, this.SelectedCategoryId)) ?? null
-            : null;
-        const dashboardOpen = this.Mode !== 'list' && this.SelectedDashboard !== null;
+        const context = this.libraryContext();
         this.navigationService.SetAgentContext(this, BuildDashboardBrowserAgentContext({
-            Mode: this.Mode,
-            SelectedDashboardId: this.SelectedDashboard?.ID ?? null,
-            SelectedDashboardName: this.SelectedDashboard?.Name ?? null,
-            VisibleDashboardNames: this.Dashboards.map(d => d.Name || '(untitled)'),
+            VisibleDashboardNames: this.VisibleDashboards.map(d => d.Name || '(untitled)'),
             TotalDashboardCount: this.totalAccessibleDashboardCount,
-            FilteredDashboardCount: this.Dashboards.length,
+            FilteredDashboardCount: this.VisibleDashboards.length,
+            LibraryFilter: this.LibraryFilter,
+            LibraryCounts: this.LibraryCounts,
+            RecentlyOpenedNames: FilterDashboardsForLibrary(this.Dashboards.filter(IsBrowsableDashboard), 'recent', context).map(d => d.Name),
             SearchText: this.agentSearchText,
             AvailableCategoryNames: this.Categories.map(c => c.Name),
             SelectedCategoryId: this.SelectedCategoryId,
-            SelectedCategoryName: selectedCategory?.Name ?? null,
+            SelectedCategoryName: this.selectedCategoryName,
             ViewMode: this.ViewMode,
             IsLoading: this.isLoading,
-            // Opened-dashboard awareness (only meaningful when a dashboard is open)
-            OpenedDashboardName: dashboardOpen ? (this.SelectedDashboard?.Name ?? null) : null,
-            OpenedDashboardId: dashboardOpen ? (this.SelectedDashboard?.ID ?? null) : null,
-            OpenedDashboardIsEditing: this.Mode === 'edit',
-            OpenedDashboardCanEdit: dashboardOpen ? this.SelectedDashboardPermissions.CanEdit : false,
-            OpenedDashboardPanels: dashboardOpen ? this.readOpenedDashboardPanels() : [],
         }));
     }
-    /**
-     * Read the panels/widgets on the currently-open dashboard from the viewer.
-     *
-     * The viewer holds the live `DashboardConfig` whose `layout` embeds each
-     * panel in Golden Layout's componentState; {@link extractPanelsFromLayout}
-     * pulls them out. We resolve each panel's part-type name via the viewer's
-     * `getPartTypeForPanel`. Tolerant by design — if the viewer isn't mounted
-     * yet (e.g. context emitted before @ViewChild resolves) we return an empty
-     * list rather than throwing.
-     *
-     * @returns a descriptive panel summary list (never null)
-     */
-    readOpenedDashboardPanels() {
-        const viewer = this.DashboardViewer;
-        if (!viewer)
-            return [];
-        try {
-            const config = viewer.getConfig();
-            const panels = extractPanelsFromLayout(config?.layout ?? null);
-            return panels.map(panel => {
-                const partType = viewer.getPartTypeForPanel(panel.id);
-                const summary = {
-                    Title: panel.title || '(untitled panel)',
-                    PartTypeName: partType?.Name || panel.config?.type || 'Unknown',
-                };
-                const icon = panel.icon || partType?.Icon || undefined;
-                if (icon) {
-                    summary.Icon = icon;
-                }
-                return summary;
-            });
-        }
-        catch {
-            // Reading panels is best-effort; never let it break context emission.
-            return [];
+    /** The name of the selected category, "Uncategorized" for that list, or null for none. */
+    get selectedCategoryName() {
+        if (this.SelectedCategoryId === UNCATEGORIZED_CATEGORY_ID) {
+            return 'Uncategorized';
         }
+        const selectedCategory = this.SelectedCategoryId
+            ? this.Categories.find(c => UUIDsEqual(c.ID, this.SelectedCategoryId)) ?? null
+            : null;
+        return selectedCategory?.Name ?? null;
     }
     /**
      * The total number of dashboards accessible to the current user, independent
@@ -561,30 +415,15 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
         return DashboardEngine.Instance.GetAccessibleDashboards(md.CurrentUser.ID).length;
     }
     /**
-     * Re-register the agent client tools when the effective tool-mode flips.
-     *
-     * The Dashboard Browser surfaces different tools depending on whether the
-     * user is browsing the list ('list') or has a dashboard open ('open' — the
-     * view/edit modes collapse to one tool-mode here). We compute the effective
-     * mode, and only when it differs from {@link lastRegisteredToolMode} do we
-     * call `SetAgentClientTools` with `[...common, ...(list ? list : open)]`.
-     * Guarding on the flip avoids re-registering on every context emission.
-     *
-     * Mirrors the Data Explorer's mode-scoped tool approach.
+     * Registers the agent client tools. The Library always shows the list, so the
+     * tool set never changes and is registered once.
      */
-    syncAgentToolsForMode() {
-        const effective = this.Mode === 'list' ? 'list' : 'open';
-        if (effective === this.lastRegisteredToolMode) {
-            return;
-        }
-        this.lastRegisteredToolMode = effective;
-        const scoped = effective === 'list' ? this.listModeTools() : this.openModeTools();
-        this.navigationService.SetAgentClientTools(this, [...this.commonTools(), ...scoped]);
+    registerAgentTools() {
+        this.navigationService.SetAgentClientTools(this, [...this.commonTools(), ...this.listModeTools()]);
     }
     /**
-     * Tools available in BOTH modes — find, switch to, and reload dashboards.
-     * OpenDashboard stays available while viewing so the agent can switch to
-     * another dashboard without first going back to the list.
+     * Tools to find, open, and reload dashboards, plus the read-only detail
+     * tools (category tree, shares).
      */
     commonTools() {
         return [
@@ -601,7 +440,7 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
             },
             {
                 Name: 'OpenDashboard',
-                Description: 'Open a dashboard for viewing (inline). Accepts either the dashboard NAME (as listed in VisibleDashboards) or its ID. Works from the list and while another dashboard is open (to switch).',
+                Description: 'Open a dashboard. Accepts either the dashboard NAME (as listed in VisibleDashboards) or its ID.',
                 ParameterSchema: { type: 'object', properties: { dashboard: { type: 'string', description: 'The dashboard name or ID to open.' }, dashboardId: { type: 'string', description: 'Deprecated alias for "dashboard" — the dashboard ID.' } } },
                 Handler: async (params) => {
                     const v = ValidateStringParam(params['dashboard'] ?? params['dashboardId'], 'dashboard');
@@ -631,8 +470,8 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
             },
             {
                 Name: 'GetDashboardShares',
-                Description: 'List who a dashboard is shared with and their access level (read/edit/delete/share). Defaults to the open dashboard; pass a dashboardId (or name) to inspect another accessible dashboard. Read-only — returns no secrets.',
-                ParameterSchema: { type: 'object', properties: { dashboardId: { type: 'string', description: 'Optional dashboard ID or name. Defaults to the open dashboard.' } } },
+                Description: 'List who a dashboard is shared with and their access level (read/edit/delete/share). Pass the dashboard ID or name. Read-only — returns no secrets.',
+                ParameterSchema: { type: 'object', properties: { dashboardId: { type: 'string', description: 'The dashboard ID or name.' } }, required: ['dashboardId'] },
                 Handler: async (params) => {
                     return this.agentGetDashboardShares(params['dashboardId']);
                 },
@@ -640,16 +479,23 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
         ];
     }
     /**
-     * Tools available only while browsing the LIST — category filtering, clear
-     * filters, and view-mode toggling. These have no meaning while a single
-     * dashboard is open, so they're scoped out of the OPEN tool-set.
+     * Tools that shape the list — the Library filter, category filtering, clear
+     * filters, and view-mode toggling.
      */
     listModeTools() {
         return [
+            {
+                Name: 'SelectLibraryFilter',
+                Description: 'Show one Library list from the rail: "all" (every dashboard: favorites first, then the ones opened last, then the rest), "mine" (dashboards the user owns), "shared" (dashboards shared with the user), "favorites", or "recent" (recently opened, the most recent first). Clears any category filter.',
+                ParameterSchema: { type: 'object', properties: { filter: { type: 'string', enum: [...DASHBOARD_LIBRARY_FILTERS] } }, required: ['filter'] },
+                Handler: async (params) => {
+                    return this.agentSelectLibraryFilter(params['filter']);
+                },
+            },
             {
                 Name: 'SelectCategory',
-                Description: 'Filter the dashboard list to a category. Accepts either the category NAME (as listed in AvailableCategories) or its ID. Pass an empty string to clear the category filter (show root).',
-                ParameterSchema: { type: 'object', properties: { category: { type: 'string', description: 'The category name or ID to filter by. Empty string clears the filter.' } }, required: ['category'] },
+                Description: 'Filter the dashboard list to a category. Accepts either the category NAME (as listed in AvailableCategories) or its ID, or "Uncategorized" for the dashboards in no category. Pass an empty string to clear the category filter (show the whole list).',
+                ParameterSchema: { type: 'object', properties: { category: { type: 'string', description: 'The category name or ID to filter by, or "Uncategorized". Empty string clears the filter.' } }, required: ['category'] },
                 Handler: async (params) => {
                     const v = ValidateStringParam(params['category'], 'category');
                     if (!v.ok)
@@ -659,7 +505,7 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
             },
             {
                 Name: 'FilterByCategory',
-                Description: 'Filter the dashboard list to a category by its ID. Pass an empty string to clear the category filter (show root). Prefer SelectCategory, which also accepts a category name.',
+                Description: 'Filter the dashboard list to a category by its ID. Pass an empty string to clear the category filter (show the whole list). Prefer SelectCategory, which also accepts a category name.',
                 ParameterSchema: { type: 'object', properties: { categoryId: { type: 'string' } }, required: ['categoryId'] },
                 Handler: async (params) => {
                     const v = ValidateStringParam(params['categoryId'], 'categoryId');
@@ -670,7 +516,7 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
             },
             {
                 Name: 'ClearDashboardFilters',
-                Description: 'Clear all active dashboard-list filters — both the text search and the category filter — and return to the full list at the root category.',
+                Description: 'Clear all active dashboard-list filters — the text search, the Library filter and the category filter — and return to the full list (All dashboards).',
                 ParameterSchema: { type: 'object', properties: {} },
                 Handler: async () => this.agentClearDashboardFilters(),
             },
@@ -684,42 +530,6 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
             },
         ];
     }
-    /**
-     * Tools available only while a dashboard is OPEN (view/edit) — go back to
-     * the list, inspect the open dashboard's panels, and read its detail
-     * (owner, dates, access level). Scoped out of the LIST tool-set because
-     * there's no open dashboard there.
-     */
-    openModeTools() {
-        return [
-            {
-                Name: 'BackToList',
-                Description: 'Return from a dashboard view/edit back to the dashboard list.',
-                ParameterSchema: { type: 'object', properties: {} },
-                Handler: async () => {
-                    this.BackToList();
-                    this.emitAgentContext();
-                    return { Success: true };
-                },
-            },
-            {
-                Name: 'GetDashboardPanels',
-                Description: 'List the panels/widgets on a dashboard — each panel\'s title, part-type, and icon. Defaults to the open dashboard; pass a dashboardId (or name) to inspect another accessible dashboard. Read-only.',
-                ParameterSchema: { type: 'object', properties: { dashboardId: { type: 'string', description: 'Optional dashboard ID or name. Defaults to the open dashboard.' } } },
-                Handler: async (params) => {
-                    return this.agentGetDashboardPanels(params['dashboardId']);
-                },
-            },
-            {
-                Name: 'GetDashboardDetail',
-                Description: 'Get detail about a dashboard — owner, created/updated dates, category, and the current user\'s access level (CanRead/Edit/Delete/Share, IsOwner). Defaults to the open dashboard; pass a dashboardId (or name) for another accessible dashboard. Read-only.',
-                ParameterSchema: { type: 'object', properties: { dashboardId: { type: 'string', description: 'Optional dashboard ID or name. Defaults to the open dashboard.' } } },
-                Handler: async (params) => {
-                    return this.agentGetDashboardDetail(params['dashboardId']);
-                },
-            },
-        ];
-    }
     /**
      * Filter the dashboard list by a text query against name + description.
      * The generic browser owns the category/view chrome; this surfaces a
@@ -727,94 +537,68 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
      * applicable, so we narrow the in-memory list the browser renders.
      */
     agentSearchDashboards(query) {
-        const q = query.trim().toLowerCase();
-        const engine = DashboardEngine.Instance;
-        const md = this.ProviderToUse;
-        const all = [...engine.GetAccessibleDashboards(md.CurrentUser.ID)];
-        const matched = q
-            ? all.filter(d => (d.Name || '').toLowerCase().includes(q) ||
-                (d.Description || '').toLowerCase().includes(q))
-            : all;
         this.agentSearchText = query.trim();
-        this.Dashboards = matched.sort((a, b) => new Date(b.__mj_UpdatedAt).getTime() - new Date(a.__mj_UpdatedAt).getTime());
-        this.Mode = 'list';
-        this.SelectedDashboard = null;
+        this.Dashboards = this.readSearchedDashboards();
+        this.refreshLibraryView();
         this.emitAgentContext();
         this.cdr.detectChanges();
         return { Success: true };
     }
+    /** Show one Library list; clears any category filter. */
+    agentSelectLibraryFilter(rawFilter) {
+        if (!IsDashboardLibraryFilter(rawFilter)) {
+            return { Success: false, ErrorMessage: `filter must be one of: ${DASHBOARD_LIBRARY_FILTERS.join(', ')}.` };
+        }
+        this.moveTo({ Filter: rawFilter, CategoryId: null });
+        return { Success: true };
+    }
     /**
-     * Apply a category filter by NAME or ID (empty string clears it) and return
-     * to the list. Resolves a supplied name (case-insensitive) to its id against
-     * the loaded, accessible category list — mirroring the Data Explorer's
-     * SelectView name→id resolution.
+     * Apply a category filter by NAME or ID (empty string clears it). Resolves a
+     * supplied name (case-insensitive) to its id against the loaded, accessible
+     * category list — mirroring the Data Explorer's SelectView name→id resolution.
+     * "Uncategorized" (when no category has that name) shows the dashboards in no
+     * category. A category is shown under the All Library filter.
      */
     agentSelectCategory(categoryNameOrId) {
         const raw = categoryNameOrId.trim();
         // Empty string clears the filter.
         if (!raw) {
-            this.SelectedCategoryId = null;
-            this.Mode = 'list';
-            this.SelectedDashboard = null;
-            this.updateUrlQueryParams();
-            this.emitAgentContext();
-            this.cdr.detectChanges();
+            this.moveTo({ Filter: this.LibraryFilter, CategoryId: null });
             return { Success: true };
         }
         // Prefer an exact id match, then fall back to a case-insensitive name match.
         const lowered = raw.toLowerCase();
         const match = this.Categories.find(c => UUIDsEqual(c.ID, raw)) ??
             this.Categories.find(c => (c.Name || '').toLowerCase() === lowered);
+        if (!match && lowered === UNCATEGORIZED_CATEGORY_ID) {
+            this.moveTo({ Filter: 'all', CategoryId: UNCATEGORIZED_CATEGORY_ID });
+            return { Success: true };
+        }
         if (!match) {
             const available = this.Categories.map(c => c.Name).join(', ') || '(none)';
             return { Success: false, ErrorMessage: `No accessible category named or identified by "${raw}". Available categories: ${available}.` };
         }
-        this.SelectedCategoryId = match.ID;
-        this.Mode = 'list';
-        this.SelectedDashboard = null;
-        this.updateUrlQueryParams();
-        this.emitAgentContext();
-        this.cdr.detectChanges();
+        this.moveTo({ Filter: 'all', CategoryId: match.ID });
         return { Success: true };
     }
-    /** Clear both the text search and the category filter, returning to the full root list. */
+    /** Clear the text search, the Library filter and the category filter, returning to All dashboards. */
     agentClearDashboardFilters() {
         this.agentSearchText = '';
-        this.SelectedCategoryId = null;
-        this.Mode = 'list';
-        this.SelectedDashboard = null;
         // Restore the full accessible list (the search may have narrowed this.dashboards).
-        const engine = DashboardEngine.Instance;
-        const md = this.ProviderToUse;
-        this.Dashboards = [...engine.GetAccessibleDashboards(md.CurrentUser.ID)].sort((a, b) => new Date(b.__mj_UpdatedAt).getTime() - new Date(a.__mj_UpdatedAt).getTime());
-        this.updateUrlQueryParams();
-        this.emitAgentContext();
-        this.cdr.detectChanges();
+        this.Dashboards = this.readSearchedDashboards();
+        this.moveTo({ Filter: 'all', CategoryId: null });
         return { Success: true };
     }
     /**
-     * Open a dashboard for inline viewing by NAME or ID. Resolves a supplied name
-     * (case-insensitive) to its dashboard against the loaded, accessible list —
-     * mirroring the Data Explorer's SelectView name→id resolution.
+     * Open a dashboard by NAME or ID. Resolves against the full
+     * accessible list (see {@link resolveDashboardForTool}), so a prior search
+     * that narrowed the visible list does not hide it.
      */
     agentOpenDashboard(dashboardNameOrId) {
-        const raw = dashboardNameOrId.trim();
-        if (!raw)
-            return { Success: false, ErrorMessage: 'A dashboard name or ID is required.' };
-        // Search against the full accessible set (not just this.dashboards, which a
-        // prior search may have narrowed) so the agent can open any dashboard by name.
-        const engine = DashboardEngine.Instance;
-        const md = this.ProviderToUse;
-        const accessible = engine.GetAccessibleDashboards(md.CurrentUser.ID);
-        const lowered = raw.toLowerCase();
-        const dashboard = accessible.find(d => UUIDsEqual(d.ID, raw)) ??
-            accessible.find(d => (d.Name || '').toLowerCase() === lowered);
-        if (!dashboard) {
-            const available = accessible.map(d => d.Name || '(untitled)').slice(0, 25).join(', ') || '(none)';
-            return { Success: false, ErrorMessage: `No accessible dashboard named or identified by "${raw}". Available dashboards include: ${available}.` };
-        }
-        this.OpenDashboard(dashboard);
-        this.emitAgentContext();
+        const resolved = this.resolveDashboardForTool(dashboardNameOrId);
+        if (!resolved.ok)
+            return resolved.result;
+        this.openDashboard(resolved.dashboard);
         return { Success: true };
     }
     /** Switch and persist the list view mode (cards | list). */
@@ -829,31 +613,24 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
         return { Success: true };
     }
     // ========================================
-    // Read-only detail tools (GetDashboardPanels / GetDashboardDetail /
-    // GetCategoryHierarchy / GetDashboardShares).
+    // Read-only detail tools (GetCategoryHierarchy / GetDashboardShares).
     // These return descriptive data only — no mutations, never throw.
     // ========================================
     /**
-     * Resolve an optional `dashboardId` tool param (ID **or** name, or omitted)
-     * to a concrete accessible dashboard. When omitted/empty, defaults to the
-     * currently-open dashboard. Returns null with a tolerant error result when
-     * nothing matches.
+     * Resolve a tool's dashboard param (ID **or** name) to an accessible
+     * dashboard: an exact ID match first, then a case-insensitive name match.
+     * Returns a tolerant error result when the param is missing or nothing
+     * matches.
      */
     resolveDashboardForTool(rawParam) {
-        const engine = DashboardEngine.Instance;
-        const md = this.ProviderToUse;
-        const accessible = engine.GetAccessibleDashboards(md.CurrentUser.ID);
         const raw = typeof rawParam === 'string' ? rawParam.trim() : '';
-        // No param → default to the open dashboard.
         if (!raw) {
-            if (this.SelectedDashboard) {
-                return { ok: true, dashboard: this.SelectedDashboard };
-            }
-            return {
-                ok: false,
-                result: { Success: false, ErrorMessage: 'No dashboard is open. Provide a dashboardId (or name) to inspect a specific dashboard.' },
-            };
+            return { ok: false, result: { Success: false, ErrorMessage: 'A dashboard ID or name is required.' } };
         }
+        // Search the full accessible set (not this.Dashboards, which a prior
+        // search may have narrowed).
+        const md = this.ProviderToUse;
+        const accessible = DashboardEngine.Instance.GetAccessibleDashboards(md.CurrentUser.ID);
         const lowered = raw.toLowerCase();
         const dashboard = accessible.find(d => UUIDsEqual(d.ID, raw)) ??
             accessible.find(d => (d.Name || '').toLowerCase() === lowered);
@@ -866,96 +643,6 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
         }
         return { ok: true, dashboard };
     }
-    /**
-     * Return the panel list for the open (or named) dashboard. For the open
-     * dashboard we read live panels from the viewer; for another dashboard we
-     * parse its persisted UIConfigDetails. Read-only.
-     */
-    agentGetDashboardPanels(rawDashboardId) {
-        const resolved = this.resolveDashboardForTool(rawDashboardId);
-        if (!resolved.ok)
-            return resolved.result;
-        const dashboard = resolved.dashboard;
-        // If this is the currently-open dashboard, read the viewer's live panels
-        // (reflects any in-session, unsaved layout edits).
-        const isOpen = this.SelectedDashboard !== null && UUIDsEqual(dashboard.ID, this.SelectedDashboard.ID);
-        const panels = isOpen
-            ? this.readOpenedDashboardPanels()
-            : this.readPanelsFromPersistedConfig(dashboard);
-        return {
-            Success: true,
-            Data: {
-                DashboardId: dashboard.ID,
-                DashboardName: dashboard.Name,
-                PanelCount: panels.length,
-                Panels: panels,
-            },
-        };
-    }
-    /**
-     * Parse a dashboard's persisted UIConfigDetails into a descriptive panel
-     * summary list, resolving each panel's part-type name from the engine's
-     * cached part types. Tolerant — returns [] on missing/invalid config.
-     */
-    readPanelsFromPersistedConfig(dashboard) {
-        const raw = dashboard.UIConfigDetails;
-        if (!raw)
-            return [];
-        try {
-            const parsed = JSON.parse(raw);
-            const panels = extractPanelsFromLayout(parsed?.layout ?? null);
-            const partTypes = DashboardEngine.Instance.DashboardPartTypes;
-            return panels.map(panel => {
-                const partType = partTypes.find(pt => UUIDsEqual(pt.ID, panel.partTypeId)) ?? null;
-                const summary = {
-                    Title: panel.title || '(untitled panel)',
-                    PartTypeName: partType?.Name || panel.config?.type || 'Unknown',
-                };
-                const icon = panel.icon || partType?.Icon || undefined;
-                if (icon) {
-                    summary.Icon = icon;
-                }
-                return summary;
-            });
-        }
-        catch {
-            return [];
-        }
-    }
-    /**
-     * Return owner / dates / category / access-level detail for the open (or
-     * named) dashboard. Access level comes from the DashboardEngine permissions
-     * already computed by the browser. Read-only.
-     */
-    agentGetDashboardDetail(rawDashboardId) {
-        const resolved = this.resolveDashboardForTool(rawDashboardId);
-        if (!resolved.ok)
-            return resolved.result;
-        const dashboard = resolved.dashboard;
-        const md = this.ProviderToUse;
-        const perms = DashboardEngine.Instance.GetDashboardPermissions(dashboard.ID, md.CurrentUser.ID);
-        return {
-            Success: true,
-            Data: {
-                DashboardId: dashboard.ID,
-                DashboardName: dashboard.Name,
-                Description: dashboard.Description ?? null,
-                Owner: dashboard.User ?? null,
-                CategoryName: dashboard.Category ?? null,
-                CategoryId: dashboard.CategoryID ?? null,
-                CreatedAt: this.toIsoOrNull(dashboard.__mj_CreatedAt),
-                UpdatedAt: this.toIsoOrNull(dashboard.__mj_UpdatedAt),
-                Access: {
-                    CanRead: perms.CanRead,
-                    CanEdit: perms.CanEdit,
-                    CanDelete: perms.CanDelete,
-                    CanShare: perms.CanShare,
-                    IsOwner: perms.IsOwner,
-                    PermissionSource: perms.PermissionSource,
-                },
-            },
-        };
-    }
     /**
      * Return the accessible category tree (name, ID, parent ID, and per-category
      * count of accessible dashboards filed directly under it). Read-only.
@@ -965,11 +652,12 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
         const engine = DashboardEngine.Instance;
         const categories = engine.GetAccessibleCategories(md.CurrentUser.ID);
         const accessible = engine.GetAccessibleDashboards(md.CurrentUser.ID);
+        const dashboardCountByCategory = CountByUUID(accessible.filter(d => d.CategoryID), d => d.CategoryID);
         const tree = categories.map(cat => ({
             Name: cat.Name,
             Id: cat.ID,
             ParentId: cat.ParentID ?? null,
-            DashboardCount: accessible.filter(d => d.CategoryID && UUIDsEqual(d.CategoryID, cat.ID)).length,
+            DashboardCount: dashboardCountByCategory.Get(cat.ID) ?? 0,
         }));
         // Dashboards with no (accessible) category sit at the root.
         const rootDashboardCount = accessible.filter(d => !d.CategoryID).length;
@@ -1012,46 +700,25 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
             },
         };
     }
-    /** Format a date to ISO, tolerant of null/invalid values. */
-    toIsoOrNull(value) {
-        if (!value)
-            return null;
-        const time = new Date(value).getTime();
-        return Number.isFinite(time) ? new Date(time).toISOString() : null;
-    }
     // ========================================
     // Event Handlers from Generic Browser
     // ========================================
     /**
-     * Handle dashboard open request from generic browser
+     * Handle dashboard open request from generic browser: open the dashboard, in a separate tab for a
+     * Shift, Ctrl or Cmd click.
      */
     OnDashboardOpen(event) {
-        if (event.OpenInNewTab) {
-            // Open in a dedicated Explorer tab via NavigationService
-            this.navigationService.OpenDashboard(event.Dashboard.ID, event.Dashboard.Name, { forceNewTab: true });
-        }
-        else {
-            // Open inline in the browser's view pane
-            this.OpenDashboard(event.Dashboard);
-        }
+        this.openDashboard(event.Dashboard, false, event.OpenInNewTab);
     }
     /** @deprecated Use {@link OnDashboardOpen}. */
     onDashboardOpen(event) {
         return this.OnDashboardOpen(event);
     }
     /**
-     * Open the current dashboard in its own dedicated Explorer tab
-     */
-    openInNewTab() {
-        if (this.SelectedDashboard) {
-            this.navigationService.OpenDashboard(this.SelectedDashboard.ID, this.SelectedDashboard.Name, { forceNewTab: true });
-        }
-    }
-    /**
-     * Handle dashboard edit request from generic browser
+     * Handle dashboard edit request from generic browser: open it in edit mode.
      */
     OnDashboardEdit(event) {
-        this.EditDashboard(event.Dashboard);
+        this.openDashboard(event.Dashboard, true);
     }
     /** @deprecated Use {@link OnDashboardEdit}. */
     onDashboardEdit(event) {
@@ -1077,6 +744,7 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
             if (await tg.Submit()) {
                 const deletedIds = new Set(event.Dashboards.map(d => d.ID));
                 this.Dashboards = this.Dashboards.filter(d => !deletedIds.has(d.ID));
+                this.refreshLibraryView();
             }
             else {
                 console.error('Failed to delete dashboards — all changes rolled back');
@@ -1087,6 +755,7 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
         }
         finally {
             this.isLoading = false;
+            this.emitAgentContext();
             this.cdr.detectChanges();
         }
     }
@@ -1109,6 +778,9 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
             const currentUserId = md.CurrentUser.ID;
             const tg = await md.CreateTransactionGroup();
             const sharedDashboardIds = [];
+            // The user's links, grouped once. Links created below are queued in the transaction group,
+            // not added to the engine's list, so the grouping matches the per-dashboard filter it replaces.
+            const userLinksByDashboard = GroupByUUID(DashboardEngine.Instance.DashboardCategoryLinks.filter(link => UUIDsEqual(link.UserID, currentUserId)), link => link.DashboardID);
             for (const dashboard of event.Dashboards) {
                 const permissions = DashboardEngine.Instance.GetDashboardPermissions(dashboard.ID, currentUserId);
                 if (permissions.IsOwner) {
@@ -1119,7 +791,7 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
                 }
                 else {
                     // Non-owner: create or update a category link instead
-                    const existingLinks = DashboardEngine.Instance.DashboardCategoryLinks.filter(link => UUIDsEqual(link.DashboardID, dashboard.ID) && UUIDsEqual(link.UserID, currentUserId));
+                    const existingLinks = userLinksByDashboard.Get(dashboard.ID) ?? [];
                     let link;
                     if (existingLinks.length > 0) {
                         link = existingLinks[0];
@@ -1143,7 +815,8 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
                 }
                 this.EffectiveCategoryMap = new Map(this.EffectiveCategoryMap);
                 this.Dashboards = [...this.Dashboards];
-                this.SelectedCategoryId = event.TargetCategoryId;
+                // The folder view follows the moved dashboards; a flat Library list still shows them.
+                this.applyLocation(this.IsFlatView ? this.currentLocation : { Filter: 'all', CategoryId: event.TargetCategoryId });
                 this.updateUrlQueryParams();
             }
             else {
@@ -1155,6 +828,7 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
         }
         finally {
             this.isLoading = false;
+            this.emitAgentContext();
             this.cdr.detectChanges();
         }
     }
@@ -1162,23 +836,35 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
     async onDashboardMove(event) {
         return this.OnDashboardMove(event);
     }
-    /**
-     * Handle create dashboard request from generic browser
-     */
+    /** The generic browser asks for a new dashboard (its New menu or an empty state): asks for the name first. */
     async OnDashboardCreate(event) {
-        await this.CreateDashboard(event.CategoryId);
+        this.OpenNewDashboardDialog(event.CategoryId);
     }
     /** @deprecated Use {@link OnDashboardCreate}. */
     async onDashboardCreate(event) {
         return this.OnDashboardCreate(event);
     }
+    /** Stars or unstars a dashboard from its card. Changed$ then re-sorts the Library. */
+    async OnDashboardFavoriteToggle(event) {
+        const dashboard = event.Dashboard;
+        try {
+            const isFavorite = await this.favorites.Toggle(dashboard.ID);
+            const message = isFavorite ? `Added "${dashboard.Name}" to favorites` : `Removed "${dashboard.Name}" from favorites`;
+            this.notifications.CreateSimpleNotification(message, 'success', 2000);
+            this.emitAgentContext();
+        }
+        catch (error) {
+            LogError(`Dashboards Library: could not change the favorite: ${error instanceof Error ? error.message : String(error)}`);
+            this.notifications.CreateSimpleNotification('Could not change the favorite', 'error', 3000);
+        }
+    }
     /**
-     * Handle category change from generic browser - update URL
+     * Handle folder navigation in the generic browser and update the URL. Entering a
+     * folder shows it under the All Library filter; going back to the root shows the
+     * current Library filter's flat list.
      */
     OnCategoryChange(event) {
-        this.SelectedCategoryId = event.CategoryId;
-        this.updateUrlQueryParams();
-        this.emitAgentContext();
+        this.moveTo({ Filter: event.CategoryId ? 'all' : this.LibraryFilter, CategoryId: event.CategoryId });
     }
     /** @deprecated Use {@link OnCategoryChange}. */
     onCategoryChange(event) {
@@ -1241,6 +927,7 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
                 // Add to local array - engine will self-update
                 this.Categories.push(category);
                 this.Categories = [...this.Categories].sort((a, b) => a.Name.localeCompare(b.Name));
+                this.refreshLibraryView();
             }
             else {
                 const errorMessage = category.LatestResult?.Message || 'Unknown error saving category';
@@ -1256,6 +943,7 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
         }
         finally {
             this.isLoading = false;
+            this.emitAgentContext();
             this.cdr.detectChanges();
         }
     }
@@ -1296,6 +984,7 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
             if (await tg.Submit()) {
                 this.Categories = this.Categories.filter(c => !categoryIds.has(c.ID));
                 this.Dashboards = [...this.Dashboards];
+                this.refreshLibraryView();
             }
             else {
                 console.error('[DashboardBrowserResource] Failed to delete categories — all changes rolled back');
@@ -1306,6 +995,7 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
         }
         finally {
             this.isLoading = false;
+            this.emitAgentContext();
             this.cdr.detectChanges();
         }
     }
@@ -1313,585 +1003,215 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
     async onCategoryDelete(event) {
         return this.OnCategoryDelete(event);
     }
-    /**
-     * Handle breadcrumb navigation event
-     * Navigates back to list view with optional category selection
-     */
-    OnBreadcrumbNavigate(event) {
-        console.debug('[DashboardBrowserResource] Breadcrumb navigate:', event);
-        // CategoryId is null for root, or a category ID string
-        this.SelectedCategoryId = event.CategoryId;
-        this.BackToList();
-        this.updateUrlQueryParams();
-    }
-    /** @deprecated Use {@link OnBreadcrumbNavigate}. */
-    onBreadcrumbNavigate(event) {
-        return this.OnBreadcrumbNavigate(event);
-    }
     // ========================================
-    // Public Methods - Navigation
+    // Public Methods - Dashboard CRUD
     // ========================================
     /**
-     * Open a dashboard for viewing
+     * Opens the New dashboard dialog. The dashboard is filed in `categoryId`, else in the open
+     * category folder, else in no category.
      */
-    OpenDashboard(dashboard) {
-        this.SelectedDashboard = dashboard;
-        this.Mode = 'view';
-        // Compute permissions for the selected dashboard
-        const md = this.ProviderToUse;
-        this.SelectedDashboardPermissions = DashboardEngine.Instance.GetDashboardPermissions(dashboard.ID, md.CurrentUser.ID);
-        this.updateUrlQueryParams();
-        this.NotifyDisplayNameChanged(dashboard.Name || 'Dashboard');
-        this.emitAgentContext();
+    OpenNewDashboardDialog(categoryId) {
+        this.newDashboardCategoryId = categoryId ?? (IsCategoryFolderLocation(this.currentLocation) ? this.SelectedCategoryId : null);
+        this.NewDashboardNameMaxLength = DashboardNameMaxLength(this.ProviderToUse);
+        this.ShowNewDashboardDialog = true;
         this.cdr.detectChanges();
     }
-    /** @deprecated Use {@link OpenDashboard}. */
-    openDashboard(dashboard) {
-        return this.OpenDashboard(dashboard);
-    }
-    /**
-     * Open a dashboard for editing
-     */
-    EditDashboard(dashboard) {
-        // Check if user has edit permission
-        const md = this.ProviderToUse;
-        const permissions = DashboardEngine.Instance.GetDashboardPermissions(dashboard.ID, md.CurrentUser.ID);
-        if (!permissions.CanEdit) {
-            console.warn('User does not have permission to edit this dashboard');
-            return;
-        }
-        this.SelectedDashboard = dashboard;
-        this.SelectedDashboardPermissions = permissions;
-        this.Mode = 'edit';
-        // Initialize editing fields
-        this.EditingName = dashboard.Name;
-        this.EditingDescription = dashboard.Description || '';
-        // Store originals for cancel
-        this.originalName = dashboard.Name;
-        this.originalDescription = dashboard.Description || '';
-        this.originalConfig = dashboard.UIConfigDetails || '';
-        this.emitAgentContext();
+    /** Closes the New dashboard dialog and creates nothing. */
+    OnNewDashboardCancelled() {
+        this.ShowNewDashboardDialog = false;
         this.cdr.detectChanges();
     }
-    /** @deprecated Use {@link EditDashboard}. */
-    editDashboard(dashboard) {
-        return this.EditDashboard(dashboard);
-    }
     /**
-     * Go back to list view
+     * Creates the dashboard named in the dialog, reloads the cache the dashboard tab reads from, puts
+     * the dashboard first in the list, and opens it in edit mode in a tab of the Dashboards app. When
+     * the save fails, the dialog stays open with the name and the user is told. A second call while
+     * the dashboard is being created does nothing.
      */
-    BackToList() {
-        this.SelectedDashboard = null;
-        this.Mode = 'list';
-        this.updateUrlQueryParams();
-        this.NotifyDisplayNameChanged('Dashboards');
-        this.emitAgentContext();
-        this.cdr.detectChanges();
-    }
-    /** @deprecated Use {@link BackToList}. */
-    backToList() {
-        return this.BackToList();
-    }
-    /**
-     * Toggle edit mode for current dashboard
-     */
-    ToggleEditMode() {
-        if (this.Mode === 'view' && this.SelectedDashboard) {
-            this.EditDashboard(this.SelectedDashboard);
-        }
-        else if (this.Mode === 'edit') {
-            this.Mode = 'view';
-            this.cdr.detectChanges();
-        }
-    }
-    /** @deprecated Use {@link ToggleEditMode}. */
-    toggleEditMode() {
-        return this.ToggleEditMode();
-    }
-    /**
-     * Open the share dialog for the current dashboard
-     */
-    OpenShareDialog() {
-        if (!this.SelectedDashboard)
-            return;
-        // Verify user has share permission
-        if (!this.SelectedDashboardPermissions.CanShare) {
-            console.warn('User does not have permission to share this dashboard');
+    async OnNewDashboardNamed(name) {
+        if (this.IsCreatingDashboard)
             return;
+        this.setCreatingDashboard(true);
+        try {
+            const dashboard = await CreateBlankDashboard(this.ProviderToUse, name, this.newDashboardCategoryId);
+            if (!dashboard) {
+                this.notifications.CreateSimpleNotification('Could not create the dashboard', 'error', 3000);
+                return;
+            }
+            await this.reloadDashboardCache();
+            this.ShowNewDashboardDialog = false;
+            this.Dashboards = [dashboard, ...this.Dashboards.filter(d => !UUIDsEqual(d.ID, dashboard.ID))];
+            this.refreshLibraryView();
+            this.emitAgentContext();
+            this.openDashboard(dashboard, true);
+        }
+        finally {
+            this.setCreatingDashboard(false);
         }
-        this.ShowShareDialog = true;
-        this.cdr.detectChanges();
-    }
-    /** @deprecated Use {@link OpenShareDialog}. */
-    openShareDialog() {
-        return this.OpenShareDialog();
     }
-    /**
-     * Close the share dialog
-     */
-    CloseShareDialog() {
-        this.ShowShareDialog = false;
-        this.cdr.detectChanges();
+    /** @deprecated Use {@link OpenNewDashboardDialog}. */
+    async CreateDashboard(categoryId) {
+        this.OpenNewDashboardDialog(categoryId);
     }
-    /** @deprecated Use {@link CloseShareDialog}. */
-    closeShareDialog() {
-        return this.CloseShareDialog();
+    /** @deprecated Use {@link OpenNewDashboardDialog}. */
+    async createDashboard(categoryId) {
+        return this.CreateDashboard(categoryId);
     }
-    /**
-     * Handle share dialog result
-     */
-    OnShareDialogResult(result) {
-        this.ShowShareDialog = false;
-        if (result.Action === 'save' && this.SelectedDashboard) {
-            // Recompute permissions after sharing changes
-            const md = this.ProviderToUse;
-            this.SelectedDashboardPermissions = DashboardEngine.Instance.GetDashboardPermissions(this.SelectedDashboard.ID, md.CurrentUser.ID);
-        }
+    /** Sets whether the named dashboard is being created, and re-renders the dialog. */
+    setCreatingDashboard(creating) {
+        this.IsCreatingDashboard = creating;
         this.cdr.detectChanges();
     }
-    /** @deprecated Use {@link OnShareDialogResult}. */
-    onShareDialogResult(result) {
-        return this.OnShareDialogResult(result);
-    }
     // ========================================
-    // Public Methods - Dashboard CRUD
+    // Private Methods - Data Loading
     // ========================================
-    /**
-     * Create a new dashboard
-     */
-    async CreateDashboard(categoryId) {
+    /** Reloads the dashboard cache before the new dashboard's tab opens: the tab reads the dashboard from it. A failure is only logged. */
+    async reloadDashboardCache() {
         try {
-            this.isLoading = true;
-            this.cdr.detectChanges();
-            const md = this.ProviderToUse;
-            const dashboard = await md.GetEntityObject('MJ: Dashboards');
-            dashboard.Name = 'New Dashboard';
-            dashboard.Description = '';
-            dashboard.UserID = md.CurrentUser.ID;
-            dashboard.UIConfigDetails = JSON.stringify(createDefaultDashboardConfig());
-            if (categoryId) {
-                dashboard.CategoryID = categoryId;
-            }
-            else if (this.SelectedCategoryId) {
-                dashboard.CategoryID = this.SelectedCategoryId;
-            }
-            const saved = await dashboard.Save();
-            if (saved) {
-                this.Dashboards.unshift(dashboard);
-                this.Dashboards = [...this.Dashboards];
-                this.EditDashboard(dashboard);
-            }
-            else {
-                console.error('Failed to save dashboard:', dashboard.LatestResult);
-            }
-        }
-        catch (err) {
-            console.error('Failed to create dashboard:', err);
+            await DashboardEngine.Instance.Config(true, this.ProviderToUse.CurrentUser, this.ProviderToUse);
         }
-        finally {
-            this.isLoading = false;
-            this.cdr.detectChanges();
+        catch (error) {
+            LogError(`Dashboards Library: could not reload the dashboards: ${error instanceof Error ? error.message : String(error)}`);
         }
     }
-    /** @deprecated Use {@link CreateDashboard}. */
-    async createDashboard(categoryId) {
-        return this.CreateDashboard(categoryId);
-    }
-    /**
-     * Save the current dashboard
-     */
-    async SaveDashboard() {
-        if (!this.SelectedDashboard)
-            return;
+    async loadDashboards() {
         try {
             this.isLoading = true;
             this.cdr.detectChanges();
-            this.SelectedDashboard.Name = this.EditingName;
-            this.SelectedDashboard.Description = this.EditingDescription;
-            if (this.DashboardViewer) {
-                await this.DashboardViewer.save();
+            // Use DashboardEngine for consistent cached data. Recently opened reads the user's dashboard
+            // record logs (LoadRecentDashboardIds); RecentAccessService is only its change trigger.
+            const engine = DashboardEngine.Instance;
+            const [, recentDashboardIds] = await Promise.all([
+                engine.Config(false),
+                LoadRecentDashboardIds(this.ProviderToUse),
+            ]);
+            this.recentDashboardIds = recentDashboardIds;
+            this.readLibraryFromEngine();
+            console.debug('[DashboardBrowserResource] Loaded from DashboardEngine:', {
+                dashboardCount: this.Dashboards.length,
+                categoryCount: this.Categories.length,
+                sharedDashboardsInEffectiveMap: this.EffectiveCategoryMap.size,
+                categories: this.Categories.map(c => ({ id: c.ID, name: c.Name, parentId: c.ParentID }))
+            });
+            // List is now loaded — apply any query-param selection. Use params deferred by
+            // OnQueryParamsChanged during the load if present. Otherwise the first load reads
+            // the tab's creation-time params (covers hosts that give no tab id); later loads
+            // skip that snapshot, which would reopen a dashboard that was already opened.
+            const params = this._pendingQueryParams ?? (this._initialQueryParamsApplied ? null : this.GetQueryParams());
+            this._pendingQueryParams = null;
+            this._initialQueryParamsApplied = true;
+            // Params without `lib` or `category` keep the current location.
+            this.applyLocation((params && ResolveBrowseLocation(params)) ?? this.currentLocation);
+            if (params && Object.keys(params).length > 0) {
+                this.applyDashboardSelectionFromParams(params);
             }
-            this.originalName = this.EditingName;
-            this.originalDescription = this.EditingDescription;
-            this.originalConfig = this.SelectedDashboard.UIConfigDetails || '';
-            // Update the dashboard in the list
-            this.Dashboards = [...this.Dashboards];
-            this.Mode = 'view';
+            this.emitAgentContext();
+            void this.refreshOwnerNames();
         }
         catch (err) {
-            console.error('Failed to save dashboard:', err);
+            console.error('Failed to load dashboards:', err);
         }
         finally {
             this.isLoading = false;
+            this.NotifyLoadComplete();
             this.cdr.detectChanges();
         }
     }
-    /** @deprecated Use {@link SaveDashboard}. */
-    async saveDashboard() {
-        return this.SaveDashboard();
-    }
-    /**
-     * Cancel editing and revert changes
-     */
-    CancelEdit() {
-        if (!this.SelectedDashboard) {
-            this.BackToList();
-            return;
-        }
-        this.SelectedDashboard.Name = this.originalName;
-        this.SelectedDashboard.Description = this.originalDescription;
-        this.SelectedDashboard.UIConfigDetails = this.originalConfig;
-        this.EditingName = '';
-        this.EditingDescription = '';
-        this.Mode = 'view';
-        this.cdr.detectChanges();
-    }
-    /** @deprecated Use {@link CancelEdit}. */
-    cancelEdit() {
-        return this.CancelEdit();
-    }
-    /**
-     * Handle name input blur - validate name is not empty
-     */
-    OnNameBlur() {
-        if (!this.EditingName.trim()) {
-            this.EditingName = this.originalName || 'Untitled Dashboard';
-        }
-    }
-    /** @deprecated Use {@link OnNameBlur}. */
-    onNameBlur() {
-        return this.OnNameBlur();
-    }
-    // ========================================
-    // Public Methods - Part Management
-    // ========================================
-    /**
-     * Open the Add Part dialog
-     */
-    OpenAddPartDialog() {
-        this.ShowAddPanelDialog = true;
-        this.cdr.detectChanges();
-    }
-    /** @deprecated Use {@link OpenAddPartDialog}. */
-    openAddPartDialog() {
-        return this.OpenAddPartDialog();
-    }
-    /**
-     * Handle panel interaction events from the viewer
-     */
-    OnPanelInteraction(event) {
-        if (event.interactionType !== 'custom')
-            return;
-        const action = event.payload?.['action'];
-        switch (action) {
-            case 'add-panel-requested':
-                this.OpenAddPartDialog();
-                break;
-            case 'configure-part-requested':
-                this.OpenConfigDialog(event.panelId);
-                break;
-            case 'remove-part-requested':
-                this.OpenRemoveConfirmDialog(event.panelId, event.payload?.['panelTitle'] || 'this part');
-                break;
-        }
-    }
-    /** @deprecated Use {@link OnPanelInteraction}. */
-    onPanelInteraction(event) {
-        return this.OnPanelInteraction(event);
-    }
-    /**
-     * Handle navigation events from panels
-     */
-    OnNavigationRequested(event) {
-        const request = event.request;
-        const openInNewTab = request.openInNewTab || false;
-        switch (request.type) {
-            case 'OpenEntityRecord': {
-                // Navigate to entity record
-                // recordId is either a full "F1|v1||F2|v2" segment or a bare value; a bare value maps onto
-                // the entity's real key column, whatever it is called
-                const entity = this.ProviderToUse.Entities.find(e => e.Name === request.entityName);
-                const compositeKey = CompositeKey.FromURLSegment(entity, request.recordId);
-                this.navigationService.OpenEntityRecord(request.entityName, compositeKey, { forceNewTab: openInNewTab });
-                break;
-            }
-            case 'OpenDashboard': {
-                // Navigate to another dashboard
-                const targetDashboard = this.Dashboards.find(d => UUIDsEqual(d.ID, request.dashboardId));
-                if (targetDashboard) {
-                    if (openInNewTab) {
-                        this.navigationService.OpenDashboard(targetDashboard.ID, targetDashboard.Name, { forceNewTab: true });
-                    }
-                    else {
-                        this.OpenDashboard(targetDashboard);
-                    }
-                }
-                break;
-            }
-            case 'OpenQuery': {
-                // Navigate to query viewer
-                const md = this.ProviderToUse;
-                const queryInfo = md.Queries.find(q => UUIDsEqual(q.ID, request.queryId));
-                if (queryInfo) {
-                    this.navigationService.OpenQuery(request.queryId, queryInfo.Name, { forceNewTab: openInNewTab });
-                }
-                break;
-            }
-            case 'OpenNavItem': {
-                // Navigate to a specific nav item within an application
-                const appId = request.appName ? this.resolveAppId(request.appName) : undefined;
-                this.navigationService.OpenNavItemByName(request.navItemName, undefined, appId, {
-                    queryParams: request.queryParams
-                });
-                break;
-            }
-        }
-    }
-    /** @deprecated Use {@link OnNavigationRequested}. */
-    onNavigationRequested(event) {
-        return this.OnNavigationRequested(event);
-    }
-    /**
-     * Resolve an application name to its ID
-     */
-    resolveAppId(appName) {
-        const md = this.ProviderToUse;
-        const app = md.Applications.find(a => a.Name.toLowerCase() === appName.toLowerCase());
-        return app?.ID;
-    }
     /**
-     * Handle add panel dialog result
+     * Reads the library from the engine cache: the dashboards the user can access (narrowed by an
+     * agent search), the categories owned by or shared with the user (by name), and the permission
+     * and effective-category maps.
      */
-    async OnPanelAdded(result) {
-        if (this.DashboardViewer) {
-            await this.DashboardViewer.addPanel(result.PartType.ID, result.Config, result.Title, result.Icon);
-        }
-        this.ShowAddPanelDialog = false;
-        // Panel set changed — refresh opened-dashboard context for the agent.
-        this.emitAgentContext();
-        this.cdr.detectChanges();
-    }
-    /** @deprecated Use {@link OnPanelAdded}. */
-    async onPanelAdded(result) {
-        return this.OnPanelAdded(result);
+    readLibraryFromEngine() {
+        const engine = DashboardEngine.Instance;
+        const currentUserId = this.ProviderToUse.CurrentUser.ID;
+        this.Dashboards = this.readSearchedDashboards();
+        this.Categories = [...engine.GetAccessibleCategories(currentUserId)].sort((a, b) => a.Name.localeCompare(b.Name));
+        this.buildPermissionMaps(engine, currentUserId);
     }
     /**
-     * Handle add panel dialog cancel
+     * The dashboards the user can access whose name or description contains the agent's search text
+     * (all when there is none). The Library order is applied when the view is refreshed.
      */
-    OnAddPanelCancelled() {
-        this.ShowAddPanelDialog = false;
-        this.cdr.detectChanges();
-    }
-    /** @deprecated Use {@link OnAddPanelCancelled}. */
-    onAddPanelCancelled() {
-        return this.OnAddPanelCancelled();
+    readSearchedDashboards() {
+        const accessible = DashboardEngine.Instance.GetAccessibleDashboards(this.ProviderToUse.CurrentUser.ID);
+        const q = this.agentSearchText.toLowerCase();
+        return q
+            ? accessible.filter(d => (d.Name || '').toLowerCase().includes(q) ||
+                (d.Description || '').toLowerCase().includes(q))
+            : [...accessible];
     }
-    // ========================================
-    // Public Methods - Config Dialog
-    // ========================================
     /**
-     * Open the config dialog for a panel
+     * Reads the names of owners not read yet and not being read, then shows them on the cards.
+     * Never throws.
      */
-    OpenConfigDialog(panelId) {
-        if (!this.DashboardViewer)
-            return;
-        const panel = this.DashboardViewer.getPanel(panelId);
-        const partType = this.DashboardViewer.getPartTypeForPanel(panelId);
-        if (!panel || !partType) {
-            console.warn('Could not find panel or part type for config dialog');
+    async refreshOwnerNames() {
+        const provider = this.ProviderToUse;
+        const userId = provider.CurrentUser.ID;
+        const missing = OwnerIdsToLoad(DashboardEngine.Instance.GetAccessibleDashboards(userId), userId, this.ownerNames)
+            .filter(id => !this.ownerReadsInFlight.has(id));
+        if (missing.length === 0)
             return;
+        missing.forEach(id => this.ownerReadsInFlight.add(id));
+        try {
+            const loaded = await LoadDashboardOwnerNames(provider, missing);
+            for (const id of missing)
+                this.ownerNames.set(id, loaded.get(id) ?? '');
+            this.refreshLibraryView();
+            this.cdr.detectChanges();
         }
-        this.ConfigDialogPanel = panel;
-        this.ConfigDialogPartType = partType;
-        this.ConfigDialogClass = partType.ConfigDialogClass || '';
-        this.ShowConfigDialog = true;
-        this.cdr.detectChanges();
-    }
-    /** @deprecated Use {@link OpenConfigDialog}. */
-    openConfigDialog(panelId) {
-        return this.OpenConfigDialog(panelId);
-    }
-    /**
-     * Handle config dialog save
-     */
-    OnConfigDialogSaved(result) {
-        if (this.DashboardViewer && this.ConfigDialogPanel) {
-            this.DashboardViewer.updatePanelConfig(this.ConfigDialogPanel.id, result.Config, result.Title, result.Icon);
+        catch (error) {
+            LogError(`Dashboards Library: could not read the dashboard owners: ${error instanceof Error ? error.message : String(error)}`);
         }
-        this.closeConfigDialog();
-        // A panel's title/icon/config may have changed — refresh agent context.
-        this.emitAgentContext();
-    }
-    /** @deprecated Use {@link OnConfigDialogSaved}. */
-    onConfigDialogSaved(result) {
-        return this.OnConfigDialogSaved(result);
-    }
-    /**
-     * Handle config dialog cancel
-     */
-    OnConfigDialogCancelled() {
-        this.closeConfigDialog();
-    }
-    /** @deprecated Use {@link OnConfigDialogCancelled}. */
-    onConfigDialogCancelled() {
-        return this.OnConfigDialogCancelled();
-    }
-    /**
-     * Close the config dialog
-     */
-    closeConfigDialog() {
-        this.ShowConfigDialog = false;
-        this.ConfigDialogPanel = null;
-        this.ConfigDialogPartType = null;
-        this.ConfigDialogClass = '';
-        this.cdr.detectChanges();
-    }
-    // ========================================
-    // Public Methods - Remove Confirm Dialog
-    // ========================================
-    /**
-     * Open the remove confirmation dialog
-     */
-    OpenRemoveConfirmDialog(panelId, panelTitle) {
-        this.ConfirmPanelId = panelId;
-        this.ConfirmPanelTitle = panelTitle;
-        this.ShowConfirmDialog = true;
-        this.cdr.detectChanges();
-    }
-    /** @deprecated Use {@link OpenRemoveConfirmDialog}. */
-    openRemoveConfirmDialog(panelId, panelTitle) {
-        return this.OpenRemoveConfirmDialog(panelId, panelTitle);
-    }
-    /**
-     * Handle remove confirmation
-     */
-    OnRemoveConfirmed() {
-        if (this.DashboardViewer && this.ConfirmPanelId) {
-            this.DashboardViewer.confirmRemovePanel(this.ConfirmPanelId);
+        finally {
+            missing.forEach(id => this.ownerReadsInFlight.delete(id));
         }
-        this.closeRemoveConfirmDialog();
-        // Panel set changed — refresh opened-dashboard context for the agent.
-        this.emitAgentContext();
-    }
-    /** @deprecated Use {@link OnRemoveConfirmed}. */
-    onRemoveConfirmed() {
-        return this.OnRemoveConfirmed();
-    }
-    /**
-     * Handle remove cancel
-     */
-    OnRemoveCancelled() {
-        this.closeRemoveConfirmDialog();
-    }
-    /** @deprecated Use {@link OnRemoveCancelled}. */
-    onRemoveCancelled() {
-        return this.OnRemoveCancelled();
     }
     /**
-     * Close the remove confirm dialog
+     * Builds the permission map, and the effective category of each shared dashboard, for every
+     * dashboard the user can access. An agent search that narrows the list does not narrow the maps.
      */
-    closeRemoveConfirmDialog() {
-        this.ShowConfirmDialog = false;
-        this.ConfirmPanelId = '';
-        this.ConfirmPanelTitle = '';
-        this.cdr.detectChanges();
-    }
-    // ========================================
-    // Private Methods - Data Loading
-    // ========================================
-    async loadDashboards() {
-        try {
-            this.isLoading = true;
-            this.cdr.detectChanges();
-            // Use DashboardEngine for consistent cached data
-            const engine = DashboardEngine.Instance;
-            await engine.Config(false); // Wait for engine to load data
-            const md = this.ProviderToUse;
-            const currentUserId = md.CurrentUser.ID;
-            // Get data from engine - sort dashboards by updated date, categories by name
-            // Filter dashboards to only those accessible to the current user
-            this.Dashboards = [...engine.GetAccessibleDashboards(currentUserId)].sort((a, b) => new Date(b.__mj_UpdatedAt).getTime() - new Date(a.__mj_UpdatedAt).getTime());
-            // Filter categories to only those owned by or shared with the current user
-            this.Categories = [...engine.GetAccessibleCategories(currentUserId)].sort((a, b) => a.Name.localeCompare(b.Name));
-            // Build permissions map and effective category map for all dashboards
-            this.DashboardPermissionsMap = new Map();
-            this.EffectiveCategoryMap = new Map();
-            // Get category links for current user (from engine's cached data)
-            const userCategoryLinks = engine.DashboardCategoryLinks.filter(link => UUIDsEqual(link.UserID, currentUserId));
-            for (const dashboard of this.Dashboards) {
-                const perms = engine.GetDashboardPermissions(dashboard.ID, currentUserId);
-                this.DashboardPermissionsMap.set(dashboard.ID, perms);
-                // For shared dashboards (not owned), determine effective category
-                if (!perms.IsOwner) {
-                    // Look for a category link for this dashboard
-                    const categoryLink = userCategoryLinks.find(link => UUIDsEqual(link.DashboardID, dashboard.ID));
-                    if (categoryLink) {
-                        // User has explicitly organized this shared dashboard
-                        this.EffectiveCategoryMap.set(dashboard.ID, categoryLink.DashboardCategoryID);
-                    }
-                    else {
-                        // No link exists - show in root (null category)
-                        this.EffectiveCategoryMap.set(dashboard.ID, null);
-                    }
+    buildPermissionMaps(engine, currentUserId) {
+        this.DashboardPermissionsMap = new Map();
+        this.EffectiveCategoryMap = new Map();
+        // Get category links for current user (from engine's cached data)
+        const userCategoryLinksByDashboard = IndexByUUID(engine.DashboardCategoryLinks.filter(link => UUIDsEqual(link.UserID, currentUserId)), link => link.DashboardID);
+        for (const dashboard of engine.GetAccessibleDashboards(currentUserId)) {
+            const perms = engine.GetDashboardPermissions(dashboard.ID, currentUserId);
+            this.DashboardPermissionsMap.set(dashboard.ID, perms);
+            // For shared dashboards (not owned), determine effective category
+            if (!perms.IsOwner) {
+                // Look for a category link for this dashboard
+                const categoryLink = userCategoryLinksByDashboard.Get(dashboard.ID);
+                if (categoryLink) {
+                    // User has explicitly organized this shared dashboard
+                    this.EffectiveCategoryMap.set(dashboard.ID, categoryLink.DashboardCategoryID);
+                }
+                else {
+                    // No link exists - show in root (null category)
+                    this.EffectiveCategoryMap.set(dashboard.ID, null);
                 }
-                // For owned dashboards, we don't add to effectiveCategoryMap
-                // so the browser will use the dashboard's actual CategoryID
-            }
-            console.debug('[DashboardBrowserResource] Loaded from DashboardEngine:', {
-                dashboardCount: this.Dashboards.length,
-                categoryCount: this.Categories.length,
-                sharedDashboardsInEffectiveMap: this.EffectiveCategoryMap.size,
-                categories: this.Categories.map(c => ({ id: c.ID, name: c.Name, parentId: c.ParentID }))
-            });
-            // List is now loaded — apply any query-param selection. Use params deferred by
-            // OnQueryParamsChanged during the cold load if present, otherwise read the tab's
-            // current params (covers deep links and Home pin navigation).
-            const params = this._pendingQueryParams ?? this.GetQueryParams();
-            this._pendingQueryParams = null;
-            if (params && Object.keys(params).length > 0) {
-                this.SelectedCategoryId = params['category'] || this.SelectedCategoryId;
-                this.applyDashboardSelectionFromParams(params);
             }
-            this.emitAgentContext();
-            this.NotifyLoadComplete();
-        }
-        catch (err) {
-            console.error('Failed to load dashboards:', err);
-        }
-        finally {
-            this.isLoading = false;
-            this.cdr.detectChanges();
+            // For owned dashboards, we don't add to effectiveCategoryMap
+            // so the browser will use the dashboard's actual CategoryID
         }
     }
     // ========================================
     // Private Methods - URL Query Params
     // ========================================
     /**
-     * Update the URL query params for the current tab.
+     * Update the URL query params for the current tab: the Library filter (`lib`,
+     * omitted for All), the category filter, and no `dashboard` param (the Library
+     * never shows a dashboard itself).
      * Routes through BaseResourceComponent.UpdateQueryParams, which updates the tab
      * configuration (triggering the shell's URL sync while respecting app-scoped
      * routes) and is auto-suppressed while delivering OnQueryParamsChanged so
      * reflecting URL → state never loops back into a redundant URL push.
      */
     updateUrlQueryParams() {
-        const queryParams = {};
-        // Track category
-        if (this.SelectedCategoryId) {
-            queryParams['category'] = this.SelectedCategoryId;
-        }
-        else {
-            queryParams['category'] = null;
-        }
-        // Track dashboard (for browser back/forward support)
-        if (this.SelectedDashboard) {
-            queryParams['dashboard'] = this.SelectedDashboard.ID;
-        }
-        else {
-            queryParams['dashboard'] = null;
-        }
-        // Push via the base-class method (auto-suppressed during OnQueryParamsChanged
-        // delivery) so the URL update respects app-scoped routes without loop-back.
-        this.UpdateQueryParams(queryParams);
+        this.UpdateQueryParams({
+            ...LocationQueryParams(this.currentLocation),
+            dashboard: null,
+        });
     }
     // ========================================
     // Private Methods - Category Helpers
@@ -1917,39 +1237,46 @@ let DashboardBrowserResourceComponent = class DashboardBrowserResourceComponent
         if (stored === 'cards' || stored === 'list') {
             this.ViewMode = stored;
         }
+        this.RailCollapsed = UserInfoEngine.Instance.GetSetting(DashboardBrowserResourceComponent_1.RAIL_COLLAPSED_SETTING) === 'true';
     }
     saveViewPreference(mode) {
         // TODO: Save to User Settings entity
         localStorage.setItem('dashboard-browser-view-mode', mode);
     }
     static ɵfac = function DashboardBrowserResourceComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DashboardBrowserResourceComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DashboardBrowserResourceComponent, selectors: [["mj-dashboard-browser-resource"]], viewQuery: function DashboardBrowserResourceComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0, 5);
-        } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.DashboardViewer = _t.first);
-        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 2, consts: [["dashboardViewer", ""], [1, "dashboard-browser-resource"], [3, "Dashboards", "Categories", "SelectedCategoryId", "ViewMode", "IsLoading", "ShowCreateButton", "AllowMultiSelect", "AllowDragDrop", "DashboardPermissions", "EffectiveCategoryMap"], [3, "DashboardOpen", "DashboardEdit", "DashboardDelete", "DashboardMove", "DashboardCreate", "CategoryCreate", "CategoryDelete", "CategoryChange", "ViewPreferenceChange", "Dashboards", "Categories", "SelectedCategoryId", "ViewMode", "IsLoading", "ShowCreateButton", "AllowMultiSelect", "AllowDragDrop", "DashboardPermissions", "EffectiveCategoryMap"], [1, "viewer-toolbar"], [1, "viewer-header", "editing"], [1, "viewer-content"], [3, "panelInteraction", "navigationRequested", "dashboard", "isEditing", "showToolbar", "showBreadcrumb"], [3, "visible", "partTypes"], [3, "Saved", "Cancelled", "Visible", "PartType", "Panel", "Config"], ["type", "danger", "title", "Remove Part", "confirmText", "Remove", "cancelText", "Cancel", 3, "confirmed", "cancelled", "visible", "message"], [3, "Result", "Visible", "Dashboard"], ["Size", "large", "RootIcon", "fa-solid fa-gauge-high", "RootLabel", "Dashboards", 3, "Navigate", "Categories", "CurrentCategoryId", "CurrentDashboard", "ShowDashboardName", "AllowDragDrop"], [1, "toolbar-actions"], [1, "shared-indicator"], ["title", "Open in its own tab", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-up-right-from-square"], ["title", "Share Dashboard", 1, "btn-icon"], ["title", "Edit Dashboard", 1, "btn-icon"], [1, "fa-solid", "fa-share-nodes"], ["title", "Share Dashboard", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-user-plus"], ["title", "Edit Dashboard", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-edit"], [1, "header-left"], [1, "btn-add-part", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "header-separator"], [1, "dashboard-info-edit"], ["type", "text", "placeholder", "Dashboard name", 1, "dashboard-name-input", 3, "ngModelChange", "blur", "ngModel"], ["type", "text", "placeholder", "Add a description...", 1, "dashboard-description-input", 3, "ngModelChange", "ngModel"], [1, "header-right"], [1, "btn-primary", 3, "click"], [1, "fa-solid", "fa-save"], [1, "btn-cancel", 3, "click"], [3, "panelAdded", "cancelled", "visible", "partTypes"]], template: function DashboardBrowserResourceComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 1);
-            i0.ɵɵconditionalCreate(1, DashboardBrowserResourceComponent_Conditional_1_Template, 1, 10, "mj-dashboard-browser", 2);
-            i0.ɵɵconditionalCreate(2, DashboardBrowserResourceComponent_Conditional_2_Template, 9, 15);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DashboardBrowserResourceComponent, selectors: [["mj-dashboard-browser-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 9, vars: 30, consts: [["Title", "Library", "Icon", "fa-solid fa-layer-group", "Subtitle", "Every dashboard you own or that is shared with you"], ["meta", ""], ["Label", "dashboards", 3, "Count", "Total"], ["Direction", "row", 3, "Flex", "Padding"], ["MobileTitle", "Dashboards", 3, "CollapsedChange", "ItemClicked", "ItemToggled", "Sections", "ActiveId", "ExpandedIds", "Collapsible", "Collapsed"], [3, "DashboardOpen", "DashboardEdit", "DashboardDelete", "DashboardMove", "DashboardCreate", "DashboardFavoriteToggle", "CategoryCreate", "CategoryDelete", "CategoryChange", "ViewPreferenceChange", "Dashboards", "Categories", "SelectedCategoryId", "FlatMode", "ViewMode", "IsLoading", "ShowCreateButton", "AllowMultiSelect", "AllowDragDrop", "DashboardPermissions", "EffectiveCategoryMap", "FavoriteIds", "ShowFavorites", "OwnerLabels", "FlatEmptyIcon", "FlatEmptyTitle", "FlatEmptyMessage", "FlatEmptyWelcome"], [3, "Confirmed", "Cancelled", "Visible", "MaxLength", "Processing"]], template: function DashboardBrowserResourceComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 0)(2, "div", 1);
+            i0.ɵɵelement(3, "mj-stat-badge", 2);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(4, "mj-page-body", 3)(5, "mj-left-nav", 4);
+            i0.ɵɵlistener("CollapsedChange", function DashboardBrowserResourceComponent_Template_mj_left_nav_CollapsedChange_5_listener($event) { return ctx.OnRailCollapsedChange($event); })("ItemClicked", function DashboardBrowserResourceComponent_Template_mj_left_nav_ItemClicked_5_listener($event) { return ctx.OnRailItemClicked($event); })("ItemToggled", function DashboardBrowserResourceComponent_Template_mj_left_nav_ItemToggled_5_listener($event) { return ctx.OnRailItemToggled($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(6, "mj-left-nav-content")(7, "mj-dashboard-browser", 5);
+            i0.ɵɵlistener("DashboardOpen", function DashboardBrowserResourceComponent_Template_mj_dashboard_browser_DashboardOpen_7_listener($event) { return ctx.OnDashboardOpen($event); })("DashboardEdit", function DashboardBrowserResourceComponent_Template_mj_dashboard_browser_DashboardEdit_7_listener($event) { return ctx.OnDashboardEdit($event); })("DashboardDelete", function DashboardBrowserResourceComponent_Template_mj_dashboard_browser_DashboardDelete_7_listener($event) { return ctx.OnDashboardDelete($event); })("DashboardMove", function DashboardBrowserResourceComponent_Template_mj_dashboard_browser_DashboardMove_7_listener($event) { return ctx.OnDashboardMove($event); })("DashboardCreate", function DashboardBrowserResourceComponent_Template_mj_dashboard_browser_DashboardCreate_7_listener($event) { return ctx.OnDashboardCreate($event); })("DashboardFavoriteToggle", function DashboardBrowserResourceComponent_Template_mj_dashboard_browser_DashboardFavoriteToggle_7_listener($event) { return ctx.OnDashboardFavoriteToggle($event); })("CategoryCreate", function DashboardBrowserResourceComponent_Template_mj_dashboard_browser_CategoryCreate_7_listener($event) { return ctx.OnCategoryCreate($event); })("CategoryDelete", function DashboardBrowserResourceComponent_Template_mj_dashboard_browser_CategoryDelete_7_listener($event) { return ctx.OnCategoryDelete($event); })("CategoryChange", function DashboardBrowserResourceComponent_Template_mj_dashboard_browser_CategoryChange_7_listener($event) { return ctx.OnCategoryChange($event); })("ViewPreferenceChange", function DashboardBrowserResourceComponent_Template_mj_dashboard_browser_ViewPreferenceChange_7_listener($event) { return ctx.OnViewPreferenceChange($event); });
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(8, "mj-dashboard-name-dialog", 6);
+            i0.ɵɵlistener("Confirmed", function DashboardBrowserResourceComponent_Template_mj_dashboard_name_dialog_Confirmed_8_listener($event) { return ctx.OnNewDashboardNamed($event); })("Cancelled", function DashboardBrowserResourceComponent_Template_mj_dashboard_name_dialog_Cancelled_8_listener() { return ctx.OnNewDashboardCancelled(); });
             i0.ɵɵelementEnd();
         } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("Count", ctx.LibraryCounts[ctx.LibraryFilter])("Total", ctx.LibraryCounts.all);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Flex", true)("Padding", false);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.mode === "list" ? 1 : -1);
+            i0.ɵɵproperty("Sections", ctx.RailSections)("ActiveId", ctx.RailActiveId)("ExpandedIds", ctx.RailExpandedIds)("Collapsible", true)("Collapsed", ctx.RailCollapsed);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("Dashboards", ctx.VisibleDashboards)("Categories", ctx.Categories)("SelectedCategoryId", ctx.IsFlatView ? null : ctx.SelectedCategoryId)("FlatMode", ctx.IsFlatView)("ViewMode", ctx.ViewMode)("IsLoading", ctx.isLoading)("ShowCreateButton", true)("AllowMultiSelect", true)("AllowDragDrop", true)("DashboardPermissions", ctx.DashboardPermissionsMap)("EffectiveCategoryMap", ctx.EffectiveCategoryMap)("FavoriteIds", ctx.FavoriteIds)("ShowFavorites", true)("OwnerLabels", ctx.OwnerLabels)("FlatEmptyIcon", ctx.EmptyState.Icon)("FlatEmptyTitle", ctx.EmptyState.Title)("FlatEmptyMessage", ctx.EmptyState.Message)("FlatEmptyWelcome", ctx.EmptyState.Welcome);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.mode === "view" || ctx.mode === "edit" ? 2 : -1);
-        } }, dependencies: [i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgModel, i2.DashboardViewerComponent, i2.DashboardBrowserComponent, i2.DashboardBreadcrumbComponent, i2.AddPanelDialogComponent, i2.EditPartDialogComponent, i2.ConfirmDialogComponent, i3.DashboardShareDialogComponent], styles: ["\n\n\n[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n    width: 100%;\n}\n\n.dashboard-browser-resource[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    width: 100%;\n    background: var(--mj-bg-surface-card);\n    position: relative;\n}\n\n\n.dashboard-browser-resource[_ngcontent-%COMP%]   mj-dashboard-browser[_ngcontent-%COMP%] {\n    display: block;\n    height: 100%;\n    width: 100%;\n}\n\n\n\n\n\n.viewer-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0 24px 0 0;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    gap: 16px;\n}\n\n.viewer-toolbar[_ngcontent-%COMP%]   .toolbar-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n\n.shared-indicator[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: var(--mj-bg-info);\n    border-radius: 16px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-brand-primary);\n    white-space: nowrap;\n}\n\n.shared-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 11px;\n}\n\n\n\n\n\n.viewer-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 24px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    transition: background 0.2s, border-color 0.2s;\n}\n\n\n.viewer-header.editing[_ngcontent-%COMP%] {\n    background: var(--mj-bg-brand);\n    border-bottom: 2px solid var(--mj-brand-primary);\n}\n\n.viewer-header[_ngcontent-%COMP%]   .header-left[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex: 1;\n}\n\n.viewer-header[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 18px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.viewer-header[_ngcontent-%COMP%]   .header-right[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.back-btn[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    border-radius: 6px;\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.back-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-border-default);\n    color: var(--mj-text-primary);\n}\n\n\n.btn-add-part[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    border: none;\n    border-radius: 6px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.2s, transform 0.1s;\n    box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.btn-add-part[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary-hover);\n    transform: translateY(-1px);\n    box-shadow: 0 3px 6px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n.btn-add-part[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n\n.header-separator[_ngcontent-%COMP%] {\n    width: 1px;\n    height: 28px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    margin: 0 4px;\n}\n\n\n\n\n\n.btn-primary[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 18px;\n    border: none;\n    border-radius: 6px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.2s;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.btn-icon.active[_ngcontent-%COMP%] {\n    background: var(--mj-bg-info);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n\n.btn-cancel[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 18px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-cancel[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n    border-color: var(--mj-border-strong);\n    color: var(--mj-text-primary);\n}\n\n\n\n\n\n.dashboard-info-edit[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex: 1;\n}\n\n.dashboard-name-input[_ngcontent-%COMP%] {\n    border: 1px solid transparent;\n    border-radius: 4px;\n    padding: 6px 12px;\n    font-size: 16px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    background: color-mix(in srgb, var(--mj-bg-surface) 70%, transparent);\n    outline: none;\n    min-width: 200px;\n    max-width: 300px;\n    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;\n}\n\n.dashboard-name-input[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-bg-surface) 90%, transparent);\n}\n\n.dashboard-name-input[_ngcontent-%COMP%]:focus {\n    background: var(--mj-bg-surface);\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.dashboard-description-input[_ngcontent-%COMP%] {\n    border: 1px solid transparent;\n    border-radius: 4px;\n    padding: 6px 12px;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    background: color-mix(in srgb, var(--mj-bg-surface) 50%, transparent);\n    outline: none;\n    flex: 1;\n    min-width: 150px;\n    max-width: 400px;\n    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;\n}\n\n.dashboard-description-input[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n}\n\n.dashboard-description-input[_ngcontent-%COMP%]:focus {\n    background: var(--mj-bg-surface);\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.dashboard-description-input[_ngcontent-%COMP%]::placeholder {\n    color: var(--mj-text-disabled);\n    font-style: normal;\n}\n\n\n\n\n\n.viewer-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow: hidden;\n    min-height: 0;\n}\n\n.viewer-content[_ngcontent-%COMP%]   mj-dashboard-viewer[_ngcontent-%COMP%] {\n    display: block;\n    width: 100%;\n    height: 100%;\n}\n\n\n\n\n\n@media (max-width: 768px) {\n    .viewer-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        gap: 12px;\n        align-items: stretch;\n    }\n\n    .viewer-header[_ngcontent-%COMP%]   .header-left[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n    }\n\n    .dashboard-info-edit[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n    }\n\n    .dashboard-name-input[_ngcontent-%COMP%], \n   .dashboard-description-input[_ngcontent-%COMP%] {\n        max-width: none;\n    }\n}"], changeDetection: 0 });
+            i0.ɵɵproperty("Visible", ctx.ShowNewDashboardDialog)("MaxLength", ctx.NewDashboardNameMaxLength)("Processing", ctx.IsCreatingDashboard);
+        } }, dependencies: [i1.MJPageHeaderComponent, i1.MJPageLayoutComponent, i1.MJPageBodyComponent, i1.MJStatBadgeComponent, i1.MJLeftNavComponent, i1.MJLeftNavContentComponent, i2.DashboardBrowserComponent, i2.DashboardNameDialogComponent], styles: ["\n\n\n\n[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n    width: 100%;\n}"], changeDetection: 0 });
 };
-DashboardBrowserResourceComponent = __decorate([
+DashboardBrowserResourceComponent = DashboardBrowserResourceComponent_1 = __decorate([
     RegisterClass(BaseResourceComponent, 'DashboardBrowserResource')
 ], DashboardBrowserResourceComponent);
 export { DashboardBrowserResourceComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DashboardBrowserResourceComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-dashboard-browser-resource', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Dashboard Browser Resource -->\n<div class=\"dashboard-browser-resource\">\n  <!-- List Mode - Uses Generic DashboardBrowserComponent -->\n  @if (mode === 'list') {\n    <mj-dashboard-browser\n      [Dashboards]=\"dashboards\"\n      [Categories]=\"categories\"\n      [SelectedCategoryId]=\"selectedCategoryId\"\n      [ViewMode]=\"viewMode\"\n      [IsLoading]=\"isLoading\"\n      [ShowCreateButton]=\"true\"\n      [AllowMultiSelect]=\"true\"\n      [AllowDragDrop]=\"true\"\n      [DashboardPermissions]=\"dashboardPermissionsMap\"\n      [EffectiveCategoryMap]=\"effectiveCategoryMap\"\n      (DashboardOpen)=\"onDashboardOpen($event)\"\n      (DashboardEdit)=\"onDashboardEdit($event)\"\n      (DashboardDelete)=\"onDashboardDelete($event)\"\n      (DashboardMove)=\"onDashboardMove($event)\"\n      (DashboardCreate)=\"onDashboardCreate($event)\"\n      (CategoryCreate)=\"onCategoryCreate($event)\"\n      (CategoryDelete)=\"onCategoryDelete($event)\"\n      (CategoryChange)=\"onCategoryChange($event)\"\n      (ViewPreferenceChange)=\"onViewPreferenceChange($event)\">\n    </mj-dashboard-browser>\n  }\n\n  <!-- View/Edit Mode -->\n  @if (mode === 'view' || mode === 'edit') {\n    <!-- View Mode Toolbar - matches browser toolbar structure -->\n    @if (mode === 'view') {\n      <div class=\"viewer-toolbar\">\n        <!-- Breadcrumb navigation (includes its own padding/styling) -->\n        <mj-dashboard-breadcrumb\n          [Categories]=\"categories\"\n          [CurrentCategoryId]=\"selectedDashboard?.CategoryID || null\"\n          [CurrentDashboard]=\"selectedDashboard\"\n          [ShowDashboardName]=\"true\"\n          [AllowDragDrop]=\"false\"\n          Size=\"large\"\n          RootIcon=\"fa-solid fa-gauge-high\"\n          RootLabel=\"Dashboards\"\n          (Navigate)=\"onBreadcrumbNavigate($event)\">\n        </mj-dashboard-breadcrumb>\n        <!-- Right-side Actions -->\n        <div class=\"toolbar-actions\">\n          <!-- Shared indicator for non-owned dashboards -->\n          @if (!selectedDashboardPermissions.IsOwner && selectedDashboardPermissions.CanRead) {\n            <span class=\"shared-indicator\">\n              <i class=\"fa-solid fa-share-nodes\"></i>\n              Shared with you\n            </span>\n          }\n          <button\n            class=\"btn-icon\"\n            title=\"Open in its own tab\"\n            (click)=\"openInNewTab()\">\n            <i class=\"fa-solid fa-up-right-from-square\"></i>\n          </button>\n          <!-- Share button - only shown if user can share -->\n          @if (selectedDashboardPermissions.CanShare) {\n            <button\n              class=\"btn-icon\"\n              title=\"Share Dashboard\"\n              (click)=\"openShareDialog()\">\n              <i class=\"fa-solid fa-user-plus\"></i>\n            </button>\n          }\n          <!-- Edit button - only shown if user can edit -->\n          @if (selectedDashboardPermissions.CanEdit) {\n            <button\n              class=\"btn-icon\"\n              title=\"Edit Dashboard\"\n              (click)=\"toggleEditMode()\">\n              <i class=\"fa-solid fa-edit\"></i>\n            </button>\n          }\n        </div>\n      </div>\n    }\n    <!-- Edit Mode Header - different layout -->\n    @if (mode === 'edit') {\n      <div class=\"viewer-header editing\">\n        <div class=\"header-left\">\n          <!-- Add Part button on the left -->\n          <button\n            class=\"btn-add-part\"\n            (click)=\"openAddPartDialog()\">\n            <i class=\"fa-solid fa-plus\"></i>\n            Add Part\n          </button>\n          <!-- Separator -->\n          <div class=\"header-separator\"></div>\n          <!-- Editable name/description -->\n          <div class=\"dashboard-info-edit\">\n            <input\n              type=\"text\"\n              class=\"dashboard-name-input\"\n              [(ngModel)]=\"editingName\"\n              placeholder=\"Dashboard name\"\n              (blur)=\"onNameBlur()\">\n            <input\n              type=\"text\"\n              class=\"dashboard-description-input\"\n              [(ngModel)]=\"editingDescription\"\n              placeholder=\"Add a description...\">\n          </div>\n        </div>\n        <div class=\"header-right\">\n          <!-- Save, Cancel buttons -->\n          <button\n            class=\"btn-primary\"\n            (click)=\"saveDashboard()\">\n            <i class=\"fa-solid fa-save\"></i>\n            Save\n          </button>\n          <button\n            class=\"btn-cancel\"\n            (click)=\"cancelEdit()\">\n            Cancel\n          </button>\n        </div>\n      </div>\n    }\n    <!-- Dashboard Viewer -->\n    <div class=\"viewer-content\">\n      <mj-dashboard-viewer\n        #dashboardViewer\n        [dashboard]=\"selectedDashboard\"\n        [isEditing]=\"mode === 'edit'\"\n        [showToolbar]=\"false\"\n        [showBreadcrumb]=\"false\"\n        (panelInteraction)=\"onPanelInteraction($event)\"\n        (navigationRequested)=\"onNavigationRequested($event)\">\n      </mj-dashboard-viewer>\n    </div>\n    <!-- Add Panel Dialog -->\n    @if (dashboardViewer) {\n      <mj-add-panel-dialog\n        [visible]=\"showAddPanelDialog\"\n        [partTypes]=\"dashboardViewer.getPartTypes()\"\n        (panelAdded)=\"onPanelAdded($event)\"\n        (cancelled)=\"onAddPanelCancelled()\">\n      </mj-add-panel-dialog>\n    }\n    <!-- Generic Edit Part Dialog - dynamically loads config panels via ClassFactory -->\n    <mj-edit-part-dialog\n      [Visible]=\"showConfigDialog\"\n      [PartType]=\"configDialogPartType\"\n      [Panel]=\"configDialogPanel\"\n      [Config]=\"configDialogPanel?.config || null\"\n      (Saved)=\"onConfigDialogSaved($event)\"\n      (Cancelled)=\"onConfigDialogCancelled()\">\n    </mj-edit-part-dialog>\n    <!-- Remove Part Confirmation Dialog -->\n    <mj-confirm-dialog\n      [visible]=\"showConfirmDialog\"\n      type=\"danger\"\n      title=\"Remove Part\"\n      [message]=\"'Are you sure you want to remove \\'' + confirmPanelTitle + '\\' from this dashboard?'\"\n      confirmText=\"Remove\"\n      cancelText=\"Cancel\"\n      (confirmed)=\"onRemoveConfirmed()\"\n      (cancelled)=\"onRemoveCancelled()\">\n    </mj-confirm-dialog>\n    <!-- Share Dashboard Dialog -->\n    <mj-dashboard-share-dialog\n      [Visible]=\"showShareDialog\"\n      [Dashboard]=\"selectedDashboard\"\n      (Result)=\"onShareDialogResult($event)\">\n    </mj-dashboard-share-dialog>\n  }\n</div>\n", styles: ["/* Dashboard Browser Resource Styles */\n/* This is a thin wrapper - list mode styles are in the generic DashboardBrowserComponent */\n\n:host {\n    display: block;\n    height: 100%;\n    width: 100%;\n}\n\n.dashboard-browser-resource {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    width: 100%;\n    background: var(--mj-bg-surface-card);\n    position: relative;\n}\n\n/* Generic browser fills the container in list mode */\n.dashboard-browser-resource mj-dashboard-browser {\n    display: block;\n    height: 100%;\n    width: 100%;\n}\n\n/* ========================================\n   Viewer Toolbar (View Mode) - Matches Browser Toolbar\n   ======================================== */\n\n.viewer-toolbar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0 24px 0 0;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    gap: 16px;\n}\n\n.viewer-toolbar .toolbar-actions {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n/* Shared with you indicator */\n.shared-indicator {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: var(--mj-bg-info);\n    border-radius: 16px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-brand-primary);\n    white-space: nowrap;\n}\n\n.shared-indicator i {\n    font-size: 11px;\n}\n\n/* ========================================\n   Viewer Header (Edit Mode)\n   ======================================== */\n\n.viewer-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 24px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    transition: background 0.2s, border-color 0.2s;\n}\n\n/* Edit mode header styling */\n.viewer-header.editing {\n    background: var(--mj-bg-brand);\n    border-bottom: 2px solid var(--mj-brand-primary);\n}\n\n.viewer-header .header-left {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex: 1;\n}\n\n.viewer-header h2 {\n    margin: 0;\n    font-size: 18px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.viewer-header .header-right {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.back-btn {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    border-radius: 6px;\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.back-btn:hover {\n    background: var(--mj-border-default);\n    color: var(--mj-text-primary);\n}\n\n/* Add Part button (left side in edit mode) */\n.btn-add-part {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    border: none;\n    border-radius: 6px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.2s, transform 0.1s;\n    box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.btn-add-part:hover {\n    background: var(--mj-brand-primary-hover);\n    transform: translateY(-1px);\n    box-shadow: 0 3px 6px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n.btn-add-part i {\n    font-size: 12px;\n}\n\n/* Header separator */\n.header-separator {\n    width: 1px;\n    height: 28px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    margin: 0 4px;\n}\n\n/* ========================================\n   Buttons\n   ======================================== */\n\n.btn-primary {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 18px;\n    border: none;\n    border-radius: 6px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.2s;\n}\n\n.btn-primary:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n.btn-icon {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-icon:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.btn-icon.active {\n    background: var(--mj-bg-info);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n/* Cancel button styling */\n.btn-cancel {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 18px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-cancel:hover {\n    background: var(--mj-bg-surface-card);\n    border-color: var(--mj-border-strong);\n    color: var(--mj-text-primary);\n}\n\n/* ========================================\n   Dashboard Info Edit (Edit Mode)\n   ======================================== */\n\n.dashboard-info-edit {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex: 1;\n}\n\n.dashboard-name-input {\n    border: 1px solid transparent;\n    border-radius: 4px;\n    padding: 6px 12px;\n    font-size: 16px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    background: color-mix(in srgb, var(--mj-bg-surface) 70%, transparent);\n    outline: none;\n    min-width: 200px;\n    max-width: 300px;\n    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;\n}\n\n.dashboard-name-input:hover {\n    background: color-mix(in srgb, var(--mj-bg-surface) 90%, transparent);\n}\n\n.dashboard-name-input:focus {\n    background: var(--mj-bg-surface);\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.dashboard-description-input {\n    border: 1px solid transparent;\n    border-radius: 4px;\n    padding: 6px 12px;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    background: color-mix(in srgb, var(--mj-bg-surface) 50%, transparent);\n    outline: none;\n    flex: 1;\n    min-width: 150px;\n    max-width: 400px;\n    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;\n}\n\n.dashboard-description-input:hover {\n    background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n}\n\n.dashboard-description-input:focus {\n    background: var(--mj-bg-surface);\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.dashboard-description-input::placeholder {\n    color: var(--mj-text-disabled);\n    font-style: normal;\n}\n\n/* ========================================\n   Viewer Content\n   ======================================== */\n\n.viewer-content {\n    flex: 1;\n    overflow: hidden;\n    min-height: 0;\n}\n\n.viewer-content mj-dashboard-viewer {\n    display: block;\n    width: 100%;\n    height: 100%;\n}\n\n/* ========================================\n   Responsive\n   ======================================== */\n\n@media (max-width: 768px) {\n    .viewer-header {\n        flex-direction: column;\n        gap: 12px;\n        align-items: stretch;\n    }\n\n    .viewer-header .header-left {\n        flex-wrap: wrap;\n    }\n\n    .dashboard-info-edit {\n        flex-direction: column;\n        align-items: stretch;\n    }\n\n    .dashboard-name-input,\n    .dashboard-description-input {\n        max-width: none;\n    }\n}\n"] }]
-    }], () => [{ type: i0.ChangeDetectorRef }], { DashboardViewer: [{
-            type: ViewChild,
-            args: ['dashboardViewer']
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DashboardBrowserResourceComponent, { className: "DashboardBrowserResourceComponent", filePath: "src/DashboardBrowser/dashboard-browser-resource.component.ts", lineNumber: 77 }); })();
+        args: [{ standalone: false, selector: 'mj-dashboard-browser-resource', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Library page of the Dashboards app -->\n<mj-page-layout>\n  <mj-page-header Title=\"Library\" Icon=\"fa-solid fa-layer-group\" Subtitle=\"Every dashboard you own or that is shared with you\">\n    <div meta>\n      <mj-stat-badge [Count]=\"LibraryCounts[LibraryFilter]\" [Total]=\"LibraryCounts.all\" Label=\"dashboards\"></mj-stat-badge>\n    </div>\n  </mj-page-header>\n\n  <mj-page-body [Flex]=\"true\" [Padding]=\"false\" Direction=\"row\">\n    <!-- Library filters and the category tree -->\n    <mj-left-nav\n      MobileTitle=\"Dashboards\"\n      [Sections]=\"RailSections\"\n      [ActiveId]=\"RailActiveId\"\n      [ExpandedIds]=\"RailExpandedIds\"\n      [Collapsible]=\"true\"\n      [Collapsed]=\"RailCollapsed\"\n      (CollapsedChange)=\"OnRailCollapsedChange($event)\"\n      (ItemClicked)=\"OnRailItemClicked($event)\"\n      (ItemToggled)=\"OnRailItemToggled($event)\">\n    </mj-left-nav>\n\n    <mj-left-nav-content>\n      <!-- Generic browser: a flat list for every Library filter and Uncategorized, a folder for a category. A click opens the dashboard in the preview tab; a Shift, Ctrl or Cmd click opens it in a separate tab. -->\n      <mj-dashboard-browser\n        [Dashboards]=\"VisibleDashboards\"\n        [Categories]=\"Categories\"\n        [SelectedCategoryId]=\"IsFlatView ? null : SelectedCategoryId\"\n        [FlatMode]=\"IsFlatView\"\n        [ViewMode]=\"ViewMode\"\n        [IsLoading]=\"isLoading\"\n        [ShowCreateButton]=\"true\"\n        [AllowMultiSelect]=\"true\"\n        [AllowDragDrop]=\"true\"\n        [DashboardPermissions]=\"DashboardPermissionsMap\"\n        [EffectiveCategoryMap]=\"EffectiveCategoryMap\"\n        [FavoriteIds]=\"FavoriteIds\"\n        [ShowFavorites]=\"true\"\n        [OwnerLabels]=\"OwnerLabels\"\n        [FlatEmptyIcon]=\"EmptyState.Icon\"\n        [FlatEmptyTitle]=\"EmptyState.Title\"\n        [FlatEmptyMessage]=\"EmptyState.Message\"\n        [FlatEmptyWelcome]=\"EmptyState.Welcome\"\n        (DashboardOpen)=\"OnDashboardOpen($event)\"\n        (DashboardEdit)=\"OnDashboardEdit($event)\"\n        (DashboardDelete)=\"OnDashboardDelete($event)\"\n        (DashboardMove)=\"OnDashboardMove($event)\"\n        (DashboardCreate)=\"OnDashboardCreate($event)\"\n        (DashboardFavoriteToggle)=\"OnDashboardFavoriteToggle($event)\"\n        (CategoryCreate)=\"OnCategoryCreate($event)\"\n        (CategoryDelete)=\"OnCategoryDelete($event)\"\n        (CategoryChange)=\"OnCategoryChange($event)\"\n        (ViewPreferenceChange)=\"OnViewPreferenceChange($event)\">\n      </mj-dashboard-browser>\n    </mj-left-nav-content>\n  </mj-page-body>\n</mj-page-layout>\n\n<!-- New dashboard: asks for the name first; Cancel creates nothing -->\n<mj-dashboard-name-dialog\n  [Visible]=\"ShowNewDashboardDialog\"\n  [MaxLength]=\"NewDashboardNameMaxLength\"\n  [Processing]=\"IsCreatingDashboard\"\n  (Confirmed)=\"OnNewDashboardNamed($event)\"\n  (Cancelled)=\"OnNewDashboardCancelled()\">\n</mj-dashboard-name-dialog>\n", styles: ["/* Dashboard Browser Resource Styles */\n/* The page chrome, the rail and the generic browser own their layout. The host fills the tab.\n   <mj-page-body Direction=\"row\"> stacks the rail above the content at narrow widths. */\n\n:host {\n    display: block;\n    height: 100%;\n    width: 100%;\n}\n"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DashboardBrowserResourceComponent, { className: "DashboardBrowserResourceComponent", filePath: "src/DashboardBrowser/dashboard-browser-resource.component.ts", lineNumber: 101 }); })();
 //# sourceMappingURL=dashboard-browser-resource.component.js.map