npm - @memberjunction/ng-explorer-core - Versions diffs - 5.25.0 → 5.27.0 - Mend

@memberjunction/ng-explorer-core 5.25.0 → 5.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/dist/generated/lazy-feature-config.d.ts CHANGED Viewed

@@ -15,5 +15,5 @@
  * Covers all @RegisterClass decorated classes in lazy-loaded packages.
  */
 export declare const LAZY_FEATURE_CONFIG: Record<string, () => Promise<void>>;
-export declare const LAZY_FEATURE_CONFIG_COUNT = 77;
+export declare const LAZY_FEATURE_CONFIG_COUNT = 78;
 //# sourceMappingURL=lazy-feature-config.d.ts.map

package/dist/generated/lazy-feature-config.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"lazy-feature-config.d.ts","sourceRoot":"","sources":["../../src/generated/lazy-feature-config.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAoDH;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,~~CA4GnE~~,CAAC;AAEF,eAAO,MAAM,yBAAyB,KAAK,CAAC"}
1	+ {"version":3,"file":"lazy-feature-config.d.ts","sourceRoot":"","sources":["../../src/generated/lazy-feature-config.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAoDH;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CA6GnE,CAAC;AAEF,eAAO,MAAM,yBAAyB,KAAK,CAAC"}

package/dist/generated/lazy-feature-config.js CHANGED Viewed

@@ -16,7 +16,7 @@ function featureLoader(importFn) {
 }
 // --- @memberjunction/ng-dashboards → ./actions-dashboards.module (7 entries) ---
 const loadActionsDashboardsModule = featureLoader(() => import('@memberjunction/ng-dashboards/actions-dashboards.module'));
-// --- @memberjunction/ng-dashboards → ./ai-dashboards.module (13 entries) ---
+// --- @memberjunction/ng-dashboards → ./ai-dashboards.module (14 entries) ---
 const loadAiDashboardsModule = featureLoader(() => import('@memberjunction/ng-dashboards/ai-dashboards.module'));
 // --- @memberjunction/ng-dashboards → ./communication-dashboards.module (6 entries) ---
 const loadCommunicationDashboardsModule = featureLoader(() => import('@memberjunction/ng-dashboards/communication-dashboards.module'));
@@ -60,6 +60,7 @@ export const LAZY_FEATURE_CONFIG = {
     // @memberjunction/ng-dashboards → ./ai-dashboards.module
     'BaseResourceComponent::AIAgentRequestsResource': loadAiDashboardsModule,
     'BaseResourceComponent::AIAgentsResource': loadAiDashboardsModule,
+    'BaseResourceComponent::AIAnalyticsResource': loadAiDashboardsModule,
     'BaseResourceComponent::AIConfigResource': loadAiDashboardsModule,
     'BaseResourceComponent::AIModelsResource': loadAiDashboardsModule,
     'BaseResourceComponent::AIMonitorResource': loadAiDashboardsModule,
@@ -142,5 +143,5 @@ export const LAZY_FEATURE_CONFIG = {
     // @memberjunction/ng-react → .
     'RuntimeUtilities::RuntimeUtilities': loadNgReact,
 };
-export const LAZY_FEATURE_CONFIG_COUNT = 77;
+export const LAZY_FEATURE_CONFIG_COUNT = 78;
 //# sourceMappingURL=lazy-feature-config.js.map

package/dist/generated/lazy-feature-config.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"lazy-feature-config.js","sourceRoot":"","sources":["../../src/generated/lazy-feature-config.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n AUTO-GENERATED FILE — DO NOT EDIT\n * Generated by: mj codegen manifest --lazy-config\n * Regenerate with: npm run mj:manifest:explorer\n \n Maps @RegisterClass entries to their lazy-loading chunks using compound keys.\n * Compound key format: \"BaseClassName::Key\" (e.g., \"BaseResourceComponent::HomeDashboard\").\n \n When ClassFactory.GetRegistrationAsync() or CreateInstanceAsync() cannot find a\n * registration synchronously, the registered lazy loader builds the compound key and\n * looks it up here to dynamically import the chunk containing the class.\n /\n\n/* Helper to create a loader that all entries in a feature share. /\nfunction featureLoader(importFn: () => Promise<unknown>): () => Promise<void> {\n return () => importFn().then(() => {});\n}\n\n// --- @memberjunction/ng-dashboards → ./actions-dashboards.module (7 entries) ---\nconst loadActionsDashboardsModule = featureLoader(() => import('@memberjunction/ng-dashboards/actions-dashboards.module'));\n\n// --- @memberjunction/ng-dashboards → ./ai-dashboards.module (13 entries) ---\nconst loadAiDashboardsModule = featureLoader(() => import('@memberjunction/ng-dashboards/ai-dashboards.module'));\n\n// --- @memberjunction/ng-dashboards → ./communication-dashboards.module (6 entries) ---\nconst loadCommunicationDashboardsModule = featureLoader(() => import('@memberjunction/ng-dashboards/communication-dashboards.module'));\n\n// --- @memberjunction/ng-dashboards → ./component-studio-dashboards.module (1 entries) ---\nconst loadComponentStudioDashboardsModule = featureLoader(() => import('@memberjunction/ng-dashboards/component-studio-dashboards.module'));\n\n// --- @memberjunction/ng-dashboards → ./core-dashboards.module (12 entries) ---\nconst loadCoreDashboardsModule = featureLoader(() => import('@memberjunction/ng-dashboards/core-dashboards.module'));\n\n// --- @memberjunction/ng-dashboards → ./credentials-dashboards.module (6 entries) ---\nconst loadCredentialsDashboardsModule = featureLoader(() => import('@memberjunction/ng-dashboards/credentials-dashboards.module'));\n\n// --- @memberjunction/ng-dashboards → ./data-explorer-dashboards.module (2 entries) ---\nconst loadDataExplorerDashboardsModule = featureLoader(() => import('@memberjunction/ng-dashboards/data-explorer-dashboards.module'));\n\n// --- @memberjunction/ng-dashboards → ./integration.module (6 entries) ---\nconst loadIntegrationModule = featureLoader(() => import('@memberjunction/ng-dashboards/integration.module'));\n\n// --- @memberjunction/ng-dashboards → ./lists-dashboards.module (4 entries) ---\nconst loadListsDashboardsModule = featureLoader(() => import('@memberjunction/ng-dashboards/lists-dashboards.module'));\n\n// --- @memberjunction/ng-dashboards → ./mcp.module (2 entries) ---\nconst loadMcpModule = featureLoader(() => import('@memberjunction/ng-dashboards/mcp.module'));\n\n// --- @memberjunction/ng-dashboards → ./scheduling-dashboards.module (4 entries) ---\nconst loadSchedulingDashboardsModule = featureLoader(() => import('@memberjunction/ng-dashboards/scheduling-dashboards.module'));\n\n// --- @memberjunction/ng-dashboards → ./testing-dashboards.module (6 entries) ---\nconst loadTestingDashboardsModule = featureLoader(() => import('@memberjunction/ng-dashboards/testing-dashboards.module'));\n\n// --- @memberjunction/ng-explorer-settings → ./settings.module (6 entries) ---\nconst loadSettingsModule = featureLoader(() => import('@memberjunction/ng-explorer-settings/settings.module'));\n\n// --- @memberjunction/ng-file-storage → ./file-storage.module (1 entries) ---\nconst loadFileStorageModule = featureLoader(() => import('@memberjunction/ng-file-storage/file-storage.module'));\n\n// --- @memberjunction/ng-react → . (1 entries) ---\nconst loadNgReact = featureLoader(() => import('@memberjunction/ng-react'));\n\n/\n Complete mapping of compound keys (BaseClassName::Key) to lazy-loading functions.\n * Covers all @RegisterClass decorated classes in lazy-loaded packages.\n */\nexport const LAZY_FEATURE_CONFIG: Record<string, () => Promise<void>> = {\n // @memberjunction/ng-dashboards → ./actions-dashboards.module\n 'BaseResourceComponent::ActionExplorerResource': loadActionsDashboardsModule,\n 'BaseResourceComponent::ActionsCodeResource': loadActionsDashboardsModule,\n 'BaseResourceComponent::ActionsEntitiesResource': loadActionsDashboardsModule,\n 'BaseResourceComponent::ActionsMonitorResource': loadActionsDashboardsModule,\n 'BaseResourceComponent::ActionsOverviewResource': loadActionsDashboardsModule,\n 'BaseResourceComponent::ActionsScheduleResource': loadActionsDashboardsModule,\n 'BaseResourceComponent::ActionsSecurityResource': loadActionsDashboardsModule,\n\n // @memberjunction/ng-dashboards → ./ai-dashboards.module\n 'BaseResourceComponent::AIAgentRequestsResource': loadAiDashboardsModule,\n 'BaseResourceComponent::AIAgentsResource': loadAiDashboardsModule,\n 'BaseResourceComponent::AIConfigResource': loadAiDashboardsModule,\n 'BaseResourceComponent::AIModelsResource': loadAiDashboardsModule,\n 'BaseResourceComponent::AIMonitorResource': loadAiDashboardsModule,\n 'BaseResourceComponent::AIPromptsResource': loadAiDashboardsModule,\n 'BaseResourceComponent::AnalyticsResource': loadAiDashboardsModule,\n 'BaseResourceComponent::AutotaggingPipelineResource': loadAiDashboardsModule,\n 'BaseResourceComponent::ClusterVisualizationResource': loadAiDashboardsModule,\n 'BaseResourceComponent::DuplicateDetectionResource': loadAiDashboardsModule,\n 'BaseResourceComponent::KnowledgeConfigResource': loadAiDashboardsModule,\n 'BaseResourceComponent::SchedulingResource': loadAiDashboardsModule,\n 'BaseResourceComponent::VectorManagementResource': loadAiDashboardsModule,\n\n // @memberjunction/ng-dashboards → ./communication-dashboards.module\n 'BaseDashboard::CommunicationDashboard': loadCommunicationDashboardsModule,\n 'BaseResourceComponent::CommunicationLogsResource': loadCommunicationDashboardsModule,\n 'BaseResourceComponent::CommunicationMonitorResource': loadCommunicationDashboardsModule,\n 'BaseResourceComponent::CommunicationProvidersResource': loadCommunicationDashboardsModule,\n 'BaseResourceComponent::CommunicationRunsResource': loadCommunicationDashboardsModule,\n 'BaseResourceComponent::CommunicationTemplatesResource': loadCommunicationDashboardsModule,\n\n // @memberjunction/ng-dashboards → ./component-studio-dashboards.module\n 'BaseDashboard::ComponentStudioDashboard': loadComponentStudioDashboardsModule,\n\n // @memberjunction/ng-dashboards → ./core-dashboards.module\n 'BaseApplication::HomeApplication': loadCoreDashboardsModule,\n 'BaseDashboard::EntityAdmin': loadCoreDashboardsModule,\n 'BaseResourceComponent::APIKeysResource': loadCoreDashboardsModule,\n 'BaseResourceComponent::ApplicationRolesResource': loadCoreDashboardsModule,\n 'BaseResourceComponent::DashboardBrowserResource': loadCoreDashboardsModule,\n 'BaseResourceComponent::HomeDashboard': loadCoreDashboardsModule,\n 'BaseResourceComponent::QueryBrowserResource': loadCoreDashboardsModule,\n 'BaseResourceComponent::SystemDiagnosticsResource': loadCoreDashboardsModule,\n 'BaseResourceComponent::VersionHistoryDiffResource': loadCoreDashboardsModule,\n 'BaseResourceComponent::VersionHistoryGraphResource': loadCoreDashboardsModule,\n 'BaseResourceComponent::VersionHistoryLabelsResource': loadCoreDashboardsModule,\n 'BaseResourceComponent::VersionHistoryRestoreResource': loadCoreDashboardsModule,\n\n // @memberjunction/ng-dashboards → ./credentials-dashboards.module\n 'BaseDashboard::CredentialsDashboard': loadCredentialsDashboardsModule,\n 'BaseResourceComponent::CredentialsAuditResource': loadCredentialsDashboardsModule,\n 'BaseResourceComponent::CredentialsCategoriesResource': loadCredentialsDashboardsModule,\n 'BaseResourceComponent::CredentialsListResource': loadCredentialsDashboardsModule,\n 'BaseResourceComponent::CredentialsOverviewResource': loadCredentialsDashboardsModule,\n 'BaseResourceComponent::CredentialsTypesResource': loadCredentialsDashboardsModule,\n\n // @memberjunction/ng-dashboards → ./data-explorer-dashboards.module\n 'BaseDashboard::DataExplorer': loadDataExplorerDashboardsModule,\n 'BaseResourceComponent::DataExplorerResource': loadDataExplorerDashboardsModule,\n\n // @memberjunction/ng-dashboards → ./integration.module\n 'BaseResourceComponent::IntegrationActivity': loadIntegrationModule,\n 'BaseResourceComponent::IntegrationConnections': loadIntegrationModule,\n 'BaseResourceComponent::IntegrationMappingWorkspace': loadIntegrationModule,\n 'BaseResourceComponent::IntegrationOverview': loadIntegrationModule,\n 'BaseResourceComponent::IntegrationPipelines': loadIntegrationModule,\n 'BaseResourceComponent::IntegrationSchedules': loadIntegrationModule,\n\n // @memberjunction/ng-dashboards → ./lists-dashboards.module\n 'BaseResourceComponent::ListsBrowseResource': loadListsDashboardsModule,\n 'BaseResourceComponent::ListsCategoriesResource': loadListsDashboardsModule,\n 'BaseResourceComponent::ListsMyListsResource': loadListsDashboardsModule,\n 'BaseResourceComponent::ListsOperationsResource': loadListsDashboardsModule,\n\n // @memberjunction/ng-dashboards → ./mcp.module\n 'BaseDashboard::MCPDashboard': loadMcpModule,\n 'BaseResourceComponent::MCPResource': loadMcpModule,\n\n // @memberjunction/ng-dashboards → ./scheduling-dashboards.module\n 'BaseDashboard::SchedulingDashboard': loadSchedulingDashboardsModule,\n 'BaseResourceComponent::SchedulingActivityResource': loadSchedulingDashboardsModule,\n 'BaseResourceComponent::SchedulingDashboardResource': loadSchedulingDashboardsModule,\n 'BaseResourceComponent::SchedulingJobsResource': loadSchedulingDashboardsModule,\n\n // @memberjunction/ng-dashboards → ./testing-dashboards.module\n 'BaseDashboard::TestingDashboard': loadTestingDashboardsModule,\n 'BaseResourceComponent::TestingAnalyticsResource': loadTestingDashboardsModule,\n 'BaseResourceComponent::TestingDashboardTabResource': loadTestingDashboardsModule,\n 'BaseResourceComponent::TestingExplorerResource': loadTestingDashboardsModule,\n 'BaseResourceComponent::TestingReviewResource': loadTestingDashboardsModule,\n 'BaseResourceComponent::TestingRunsResource': loadTestingDashboardsModule,\n\n // @memberjunction/ng-explorer-settings → ./settings.module\n 'BaseDashboard::ApplicationManagement': loadSettingsModule,\n 'BaseDashboard::EntityPermissions': loadSettingsModule,\n 'BaseDashboard::RoleManagement': loadSettingsModule,\n 'BaseDashboard::SqlLogging': loadSettingsModule,\n 'BaseDashboard::UserManagement': loadSettingsModule,\n 'BaseNavigationComponent::Settings': loadSettingsModule,\n\n // @memberjunction/ng-file-storage → ./file-storage.module\n 'BaseResourceComponent::FileBrowserResource': loadFileStorageModule,\n\n // @memberjunction/ng-react → .\n 'RuntimeUtilities::RuntimeUtilities': loadNgReact,\n\n};\n\nexport const LAZY_FEATURE_CONFIG_COUNT = 77;\n"]}
1	+ {"version":3,"file":"lazy-feature-config.js","sourceRoot":"","sources":["../../src/generated/lazy-feature-config.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n AUTO-GENERATED FILE — DO NOT EDIT\n * Generated by: mj codegen manifest --lazy-config\n * Regenerate with: npm run mj:manifest:explorer\n \n Maps @RegisterClass entries to their lazy-loading chunks using compound keys.\n * Compound key format: \"BaseClassName::Key\" (e.g., \"BaseResourceComponent::HomeDashboard\").\n \n When ClassFactory.GetRegistrationAsync() or CreateInstanceAsync() cannot find a\n * registration synchronously, the registered lazy loader builds the compound key and\n * looks it up here to dynamically import the chunk containing the class.\n /\n\n/* Helper to create a loader that all entries in a feature share. /\nfunction featureLoader(importFn: () => Promise<unknown>): () => Promise<void> {\n return () => importFn().then(() => {});\n}\n\n// --- @memberjunction/ng-dashboards → ./actions-dashboards.module (7 entries) ---\nconst loadActionsDashboardsModule = featureLoader(() => import('@memberjunction/ng-dashboards/actions-dashboards.module'));\n\n// --- @memberjunction/ng-dashboards → ./ai-dashboards.module (14 entries) ---\nconst loadAiDashboardsModule = featureLoader(() => import('@memberjunction/ng-dashboards/ai-dashboards.module'));\n\n// --- @memberjunction/ng-dashboards → ./communication-dashboards.module (6 entries) ---\nconst loadCommunicationDashboardsModule = featureLoader(() => import('@memberjunction/ng-dashboards/communication-dashboards.module'));\n\n// --- @memberjunction/ng-dashboards → ./component-studio-dashboards.module (1 entries) ---\nconst loadComponentStudioDashboardsModule = featureLoader(() => import('@memberjunction/ng-dashboards/component-studio-dashboards.module'));\n\n// --- @memberjunction/ng-dashboards → ./core-dashboards.module (12 entries) ---\nconst loadCoreDashboardsModule = featureLoader(() => import('@memberjunction/ng-dashboards/core-dashboards.module'));\n\n// --- @memberjunction/ng-dashboards → ./credentials-dashboards.module (6 entries) ---\nconst loadCredentialsDashboardsModule = featureLoader(() => import('@memberjunction/ng-dashboards/credentials-dashboards.module'));\n\n// --- @memberjunction/ng-dashboards → ./data-explorer-dashboards.module (2 entries) ---\nconst loadDataExplorerDashboardsModule = featureLoader(() => import('@memberjunction/ng-dashboards/data-explorer-dashboards.module'));\n\n// --- @memberjunction/ng-dashboards → ./integration.module (6 entries) ---\nconst loadIntegrationModule = featureLoader(() => import('@memberjunction/ng-dashboards/integration.module'));\n\n// --- @memberjunction/ng-dashboards → ./lists-dashboards.module (4 entries) ---\nconst loadListsDashboardsModule = featureLoader(() => import('@memberjunction/ng-dashboards/lists-dashboards.module'));\n\n// --- @memberjunction/ng-dashboards → ./mcp.module (2 entries) ---\nconst loadMcpModule = featureLoader(() => import('@memberjunction/ng-dashboards/mcp.module'));\n\n// --- @memberjunction/ng-dashboards → ./scheduling-dashboards.module (4 entries) ---\nconst loadSchedulingDashboardsModule = featureLoader(() => import('@memberjunction/ng-dashboards/scheduling-dashboards.module'));\n\n// --- @memberjunction/ng-dashboards → ./testing-dashboards.module (6 entries) ---\nconst loadTestingDashboardsModule = featureLoader(() => import('@memberjunction/ng-dashboards/testing-dashboards.module'));\n\n// --- @memberjunction/ng-explorer-settings → ./settings.module (6 entries) ---\nconst loadSettingsModule = featureLoader(() => import('@memberjunction/ng-explorer-settings/settings.module'));\n\n// --- @memberjunction/ng-file-storage → ./file-storage.module (1 entries) ---\nconst loadFileStorageModule = featureLoader(() => import('@memberjunction/ng-file-storage/file-storage.module'));\n\n// --- @memberjunction/ng-react → . (1 entries) ---\nconst loadNgReact = featureLoader(() => import('@memberjunction/ng-react'));\n\n/\n Complete mapping of compound keys (BaseClassName::Key) to lazy-loading functions.\n * Covers all @RegisterClass decorated classes in lazy-loaded packages.\n */\nexport const LAZY_FEATURE_CONFIG: Record<string, () => Promise<void>> = {\n // @memberjunction/ng-dashboards → ./actions-dashboards.module\n 'BaseResourceComponent::ActionExplorerResource': loadActionsDashboardsModule,\n 'BaseResourceComponent::ActionsCodeResource': loadActionsDashboardsModule,\n 'BaseResourceComponent::ActionsEntitiesResource': loadActionsDashboardsModule,\n 'BaseResourceComponent::ActionsMonitorResource': loadActionsDashboardsModule,\n 'BaseResourceComponent::ActionsOverviewResource': loadActionsDashboardsModule,\n 'BaseResourceComponent::ActionsScheduleResource': loadActionsDashboardsModule,\n 'BaseResourceComponent::ActionsSecurityResource': loadActionsDashboardsModule,\n\n // @memberjunction/ng-dashboards → ./ai-dashboards.module\n 'BaseResourceComponent::AIAgentRequestsResource': loadAiDashboardsModule,\n 'BaseResourceComponent::AIAgentsResource': loadAiDashboardsModule,\n 'BaseResourceComponent::AIAnalyticsResource': loadAiDashboardsModule,\n 'BaseResourceComponent::AIConfigResource': loadAiDashboardsModule,\n 'BaseResourceComponent::AIModelsResource': loadAiDashboardsModule,\n 'BaseResourceComponent::AIMonitorResource': loadAiDashboardsModule,\n 'BaseResourceComponent::AIPromptsResource': loadAiDashboardsModule,\n 'BaseResourceComponent::AnalyticsResource': loadAiDashboardsModule,\n 'BaseResourceComponent::AutotaggingPipelineResource': loadAiDashboardsModule,\n 'BaseResourceComponent::ClusterVisualizationResource': loadAiDashboardsModule,\n 'BaseResourceComponent::DuplicateDetectionResource': loadAiDashboardsModule,\n 'BaseResourceComponent::KnowledgeConfigResource': loadAiDashboardsModule,\n 'BaseResourceComponent::SchedulingResource': loadAiDashboardsModule,\n 'BaseResourceComponent::VectorManagementResource': loadAiDashboardsModule,\n\n // @memberjunction/ng-dashboards → ./communication-dashboards.module\n 'BaseDashboard::CommunicationDashboard': loadCommunicationDashboardsModule,\n 'BaseResourceComponent::CommunicationLogsResource': loadCommunicationDashboardsModule,\n 'BaseResourceComponent::CommunicationMonitorResource': loadCommunicationDashboardsModule,\n 'BaseResourceComponent::CommunicationProvidersResource': loadCommunicationDashboardsModule,\n 'BaseResourceComponent::CommunicationRunsResource': loadCommunicationDashboardsModule,\n 'BaseResourceComponent::CommunicationTemplatesResource': loadCommunicationDashboardsModule,\n\n // @memberjunction/ng-dashboards → ./component-studio-dashboards.module\n 'BaseDashboard::ComponentStudioDashboard': loadComponentStudioDashboardsModule,\n\n // @memberjunction/ng-dashboards → ./core-dashboards.module\n 'BaseApplication::HomeApplication': loadCoreDashboardsModule,\n 'BaseDashboard::EntityAdmin': loadCoreDashboardsModule,\n 'BaseResourceComponent::APIKeysResource': loadCoreDashboardsModule,\n 'BaseResourceComponent::ApplicationRolesResource': loadCoreDashboardsModule,\n 'BaseResourceComponent::DashboardBrowserResource': loadCoreDashboardsModule,\n 'BaseResourceComponent::HomeDashboard': loadCoreDashboardsModule,\n 'BaseResourceComponent::QueryBrowserResource': loadCoreDashboardsModule,\n 'BaseResourceComponent::SystemDiagnosticsResource': loadCoreDashboardsModule,\n 'BaseResourceComponent::VersionHistoryDiffResource': loadCoreDashboardsModule,\n 'BaseResourceComponent::VersionHistoryGraphResource': loadCoreDashboardsModule,\n 'BaseResourceComponent::VersionHistoryLabelsResource': loadCoreDashboardsModule,\n 'BaseResourceComponent::VersionHistoryRestoreResource': loadCoreDashboardsModule,\n\n // @memberjunction/ng-dashboards → ./credentials-dashboards.module\n 'BaseDashboard::CredentialsDashboard': loadCredentialsDashboardsModule,\n 'BaseResourceComponent::CredentialsAuditResource': loadCredentialsDashboardsModule,\n 'BaseResourceComponent::CredentialsCategoriesResource': loadCredentialsDashboardsModule,\n 'BaseResourceComponent::CredentialsListResource': loadCredentialsDashboardsModule,\n 'BaseResourceComponent::CredentialsOverviewResource': loadCredentialsDashboardsModule,\n 'BaseResourceComponent::CredentialsTypesResource': loadCredentialsDashboardsModule,\n\n // @memberjunction/ng-dashboards → ./data-explorer-dashboards.module\n 'BaseDashboard::DataExplorer': loadDataExplorerDashboardsModule,\n 'BaseResourceComponent::DataExplorerResource': loadDataExplorerDashboardsModule,\n\n // @memberjunction/ng-dashboards → ./integration.module\n 'BaseResourceComponent::IntegrationActivity': loadIntegrationModule,\n 'BaseResourceComponent::IntegrationConnections': loadIntegrationModule,\n 'BaseResourceComponent::IntegrationMappingWorkspace': loadIntegrationModule,\n 'BaseResourceComponent::IntegrationOverview': loadIntegrationModule,\n 'BaseResourceComponent::IntegrationPipelines': loadIntegrationModule,\n 'BaseResourceComponent::IntegrationSchedules': loadIntegrationModule,\n\n // @memberjunction/ng-dashboards → ./lists-dashboards.module\n 'BaseResourceComponent::ListsBrowseResource': loadListsDashboardsModule,\n 'BaseResourceComponent::ListsCategoriesResource': loadListsDashboardsModule,\n 'BaseResourceComponent::ListsMyListsResource': loadListsDashboardsModule,\n 'BaseResourceComponent::ListsOperationsResource': loadListsDashboardsModule,\n\n // @memberjunction/ng-dashboards → ./mcp.module\n 'BaseDashboard::MCPDashboard': loadMcpModule,\n 'BaseResourceComponent::MCPResource': loadMcpModule,\n\n // @memberjunction/ng-dashboards → ./scheduling-dashboards.module\n 'BaseDashboard::SchedulingDashboard': loadSchedulingDashboardsModule,\n 'BaseResourceComponent::SchedulingActivityResource': loadSchedulingDashboardsModule,\n 'BaseResourceComponent::SchedulingDashboardResource': loadSchedulingDashboardsModule,\n 'BaseResourceComponent::SchedulingJobsResource': loadSchedulingDashboardsModule,\n\n // @memberjunction/ng-dashboards → ./testing-dashboards.module\n 'BaseDashboard::TestingDashboard': loadTestingDashboardsModule,\n 'BaseResourceComponent::TestingAnalyticsResource': loadTestingDashboardsModule,\n 'BaseResourceComponent::TestingDashboardTabResource': loadTestingDashboardsModule,\n 'BaseResourceComponent::TestingExplorerResource': loadTestingDashboardsModule,\n 'BaseResourceComponent::TestingReviewResource': loadTestingDashboardsModule,\n 'BaseResourceComponent::TestingRunsResource': loadTestingDashboardsModule,\n\n // @memberjunction/ng-explorer-settings → ./settings.module\n 'BaseDashboard::ApplicationManagement': loadSettingsModule,\n 'BaseDashboard::EntityPermissions': loadSettingsModule,\n 'BaseDashboard::RoleManagement': loadSettingsModule,\n 'BaseDashboard::SqlLogging': loadSettingsModule,\n 'BaseDashboard::UserManagement': loadSettingsModule,\n 'BaseNavigationComponent::Settings': loadSettingsModule,\n\n // @memberjunction/ng-file-storage → ./file-storage.module\n 'BaseResourceComponent::FileBrowserResource': loadFileStorageModule,\n\n // @memberjunction/ng-react → .\n 'RuntimeUtilities::RuntimeUtilities': loadNgReact,\n\n};\n\nexport const LAZY_FEATURE_CONFIG_COUNT = 78;\n"]}

package/dist/lib/server-connectivity/server-connectivity-banner.component.d.ts ADDED Viewed

@@ -0,0 +1,24 @@
+import { OnInit, OnDestroy } from '@angular/core';
+import { AnimationEvent } from '@angular/animations';
+import { ServerConnectivityService } from '../services/server-connectivity.service';
+import * as i0 from "@angular/core";
+/**
+ * When visible, this banner sets --mj-connectivity-banner-height on <html>
+ * so that any position:fixed element referencing the shell header offset
+ * (e.g. app-switcher mobile dropdown) can account for the banner.
+ */
+export declare class ServerConnectivityBannerComponent implements OnInit, OnDestroy {
+    private connectivityService;
+    private static readonly CSS_VAR;
+    IsConnected: boolean;
+    private subscription;
+    constructor(connectivityService: ServerConnectivityService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /** After the enter/leave animation finishes, publish the banner height as a CSS custom property */
+    OnAnimationDone(event: AnimationEvent): void;
+    private setBannerHeight;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ServerConnectivityBannerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ServerConnectivityBannerComponent, "mj-server-connectivity-banner", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=server-connectivity-banner.component.d.ts.map

package/dist/lib/server-connectivity/server-connectivity-banner.component.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"server-connectivity-banner.component.d.ts","sourceRoot":"","sources":["../../../src/lib/server-connectivity/server-connectivity-banner.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAuC,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1F,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;;AAEpF;;;;GAIG;AACH,qBA0Da,iCAAkC,YAAW,MAAM,EAAE,SAAS;IAM7D,OAAO,CAAC,mBAAmB;IALvC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAqC;IAE7D,WAAW,UAAQ;IAC1B,OAAO,CAAC,YAAY,CAA2B;gBAE3B,mBAAmB,EAAE,yBAAyB;IAElE,QAAQ,IAAI,IAAI;IAMhB,WAAW,IAAI,IAAI;IAOnB,mGAAmG;IACnG,eAAe,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IAS5C,OAAO,CAAC,eAAe;yCA/BZ,iCAAiC;2CAAjC,iCAAiC;CAqC7C"}

package/dist/lib/server-connectivity/server-connectivity-banner.component.js ADDED Viewed

@@ -0,0 +1,92 @@
+import { Component } from '@angular/core';
+import { trigger, transition, style, animate } from '@angular/animations';
+import * as i0 from "@angular/core";
+import * as i1 from "../services/server-connectivity.service";
+function ServerConnectivityBannerComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 0);
+    i0.ɵɵlistener("@slideDown.done", function ServerConnectivityBannerComponent_Conditional_0_Template_div_animation_slideDown_done_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnAnimationDone($event)); });
+    i0.ɵɵdomElement(1, "i", 1);
+    i0.ɵɵdomElementStart(2, "span");
+    i0.ɵɵtext(3, "Server unavailable \u2014 viewing cached data. Some features may not work.");
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    i0.ɵɵproperty("@slideDown", undefined);
+} }
+/**
+ * When visible, this banner sets --mj-connectivity-banner-height on <html>
+ * so that any position:fixed element referencing the shell header offset
+ * (e.g. app-switcher mobile dropdown) can account for the banner.
+ */
+export class ServerConnectivityBannerComponent {
+    connectivityService;
+    static CSS_VAR = '--mj-connectivity-banner-height';
+    IsConnected = true;
+    subscription;
+    constructor(connectivityService) {
+        this.connectivityService = connectivityService;
+    }
+    ngOnInit() {
+        this.subscription = this.connectivityService.IsConnected$.subscribe(connected => {
+            this.IsConnected = connected;
+        });
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+        this.setBannerHeight(0);
+    }
+    /** After the enter/leave animation finishes, publish the banner height as a CSS custom property */
+    OnAnimationDone(event) {
+        if (event.toState === 'void') {
+            this.setBannerHeight(0);
+        }
+        else {
+            const height = event.element.offsetHeight;
+            this.setBannerHeight(height);
+        }
+    }
+    setBannerHeight(px) {
+        document.documentElement.style.setProperty(ServerConnectivityBannerComponent.CSS_VAR, `${px}px`);
+    }
+    static ɵfac = function ServerConnectivityBannerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ServerConnectivityBannerComponent)(i0.ɵɵdirectiveInject(i1.ServerConnectivityService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ServerConnectivityBannerComponent, selectors: [["mj-server-connectivity-banner"]], decls: 1, vars: 1, consts: [[1, "connectivity-banner"], [1, "fa-solid", "fa-triangle-exclamation"]], template: function ServerConnectivityBannerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, ServerConnectivityBannerComponent_Conditional_0_Template, 4, 1, "div", 0);
+        } if (rf & 2) {
+            i0.ɵɵconditional(!ctx.IsConnected ? 0 : -1);
+        } }, styles: ["[_nghost-%COMP%] {\n      flex-shrink: 0;\n      width: 100%;\n    }\n\n    .connectivity-banner[_ngcontent-%COMP%] {\n      background: var(--mj-status-warning-bg);\n      color: var(--mj-status-warning-text);\n      border-bottom: 2px solid var(--mj-status-warning-border);\n      padding: 8px 16px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      font-size: 14px;\n      font-weight: 500;\n    }\n\n    .connectivity-banner[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 16px;\n      flex-shrink: 0;\n    }\n\n    .connectivity-banner[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      text-align: center;\n    }\n\n    @media (max-width: 480px) {\n      .connectivity-banner[_ngcontent-%COMP%] {\n        padding: 6px 12px;\n        font-size: 13px;\n      }\n    }"], data: { animation: [
+                trigger('slideDown', [
+                    transition(':enter', [
+                        style({ height: 0, opacity: 0, overflow: 'hidden' }),
+                        animate('300ms ease-out', style({ height: '*', opacity: 1 }))
+                    ]),
+                    transition(':leave', [
+                        animate('200ms ease-in', style({ height: 0, opacity: 0, overflow: 'hidden' }))
+                    ])
+                ])
+            ] } });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ServerConnectivityBannerComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-server-connectivity-banner', standalone: true, animations: [
+                    trigger('slideDown', [
+                        transition(':enter', [
+                            style({ height: 0, opacity: 0, overflow: 'hidden' }),
+                            animate('300ms ease-out', style({ height: '*', opacity: 1 }))
+                        ]),
+                        transition(':leave', [
+                            animate('200ms ease-in', style({ height: 0, opacity: 0, overflow: 'hidden' }))
+                        ])
+                    ])
+                ], template: `
+    @if (!IsConnected) {
+      <div class="connectivity-banner" @slideDown (@slideDown.done)="OnAnimationDone($event)">
+        <i class="fa-solid fa-triangle-exclamation"></i>
+        <span>Server unavailable &mdash; viewing cached data. Some features may not work.</span>
+      </div>
+    }
+  `, styles: ["\n    :host {\n      flex-shrink: 0;\n      width: 100%;\n    }\n\n    .connectivity-banner {\n      background: var(--mj-status-warning-bg);\n      color: var(--mj-status-warning-text);\n      border-bottom: 2px solid var(--mj-status-warning-border);\n      padding: 8px 16px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      font-size: 14px;\n      font-weight: 500;\n    }\n\n    .connectivity-banner i {\n      font-size: 16px;\n      flex-shrink: 0;\n    }\n\n    .connectivity-banner span {\n      text-align: center;\n    }\n\n    @media (max-width: 480px) {\n      .connectivity-banner {\n        padding: 6px 12px;\n        font-size: 13px;\n      }\n    }\n  "] }]
+    }], () => [{ type: i1.ServerConnectivityService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ServerConnectivityBannerComponent, { className: "ServerConnectivityBannerComponent", filePath: "src/lib/server-connectivity/server-connectivity-banner.component.ts", lineNumber: 69 }); })();
+//# sourceMappingURL=server-connectivity-banner.component.js.map

package/dist/lib/server-connectivity/server-connectivity-banner.component.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"server-connectivity-banner.component.js","sourceRoot":"","sources":["../../../src/lib/server-connectivity/server-connectivity-banner.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, OnInit, OnDestroy } from '@angular/core';\nimport { trigger, transition, style, animate, AnimationEvent } from '@angular/animations';\nimport { Subscription } from 'rxjs';\nimport { ServerConnectivityService } from '../services/server-connectivity.service';\n\n/**\n * When visible, this banner sets --mj-connectivity-banner-height on <html>\n * so that any position:fixed element referencing the shell header offset\n * (e.g. app-switcher mobile dropdown) can account for the banner.\n */\n@Component({\n selector: 'mj-server-connectivity-banner',\n standalone: true,\n animations: [\n trigger('slideDown', [\n transition(':enter', [\n style({ height: 0, opacity: 0, overflow: 'hidden' }),\n animate('300ms ease-out', style({ height: '*', opacity: 1 }))\n ]),\n transition(':leave', [\n animate('200ms ease-in', style({ height: 0, opacity: 0, overflow: 'hidden' }))\n ])\n ])\n ],\n template: `\n @if (!IsConnected) {\n <div class=\"connectivity-banner\" @slideDown (@slideDown.done)=\"OnAnimationDone($event)\">\n <i class=\"fa-solid fa-triangle-exclamation\"></i>\n <span>Server unavailable — viewing cached data. Some features may not work.</span>\n </div>\n }\n `,\n styles: [`\n :host {\n flex-shrink: 0;\n width: 100%;\n }\n\n .connectivity-banner {\n background: var(--mj-status-warning-bg);\n color: var(--mj-status-warning-text);\n border-bottom: 2px solid var(--mj-status-warning-border);\n padding: 8px 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 500;\n }\n\n .connectivity-banner i {\n font-size: 16px;\n flex-shrink: 0;\n }\n\n .connectivity-banner span {\n text-align: center;\n }\n\n @media (max-width: 480px) {\n .connectivity-banner {\n padding: 6px 12px;\n font-size: 13px;\n }\n }\n `]\n})\nexport class ServerConnectivityBannerComponent implements OnInit, OnDestroy {\n private static readonly CSS_VAR = '--mj-connectivity-banner-height';\n\n public IsConnected = true;\n private subscription: Subscription | undefined;\n\n constructor(private connectivityService: ServerConnectivityService) {}\n\n ngOnInit(): void {\n this.subscription = this.connectivityService.IsConnected$.subscribe(connected => {\n this.IsConnected = connected;\n });\n }\n\n ngOnDestroy(): void {\n if (this.subscription) {\n this.subscription.unsubscribe();\n }\n this.setBannerHeight(0);\n }\n\n /** After the enter/leave animation finishes, publish the banner height as a CSS custom property */\n OnAnimationDone(event: AnimationEvent): void {\n if (event.toState === 'void') {\n this.setBannerHeight(0);\n } else {\n const height = (event.element as HTMLElement).offsetHeight;\n this.setBannerHeight(height);\n }\n }\n\n private setBannerHeight(px: number): void {\n document.documentElement.style.setProperty(\n ServerConnectivityBannerComponent.CSS_VAR,\n `${px}px`\n );\n }\n}\n"]}

package/dist/lib/services/server-connectivity.service.d.ts ADDED Viewed

@@ -0,0 +1,50 @@
+import { OnDestroy } from '@angular/core';
+import { Observable } from 'rxjs';
+import * as i0 from "@angular/core";
+/**
+ * Polls MJAPI's /healthcheck endpoint and exposes connectivity state.
+ *
+ * Start polling after workspace initialization with `Start(healthCheckUrl)`.
+ * Subscribe to `IsConnected$` for reactive updates.
+ *
+ * Rules:
+ *  - 2 consecutive failures -> disconnected
+ *  - 1 success -> connected
+ *  - Pauses when tab is hidden, checks immediately on focus
+ */
+export declare class ServerConnectivityService implements OnDestroy {
+    private static readonly POLL_INTERVAL_CONNECTED_MS;
+    private static readonly POLL_INTERVAL_DISCONNECTED_MS;
+    private static readonly FETCH_TIMEOUT_MS;
+    private static readonly FAILURES_BEFORE_DISCONNECT;
+    private readonly isConnected;
+    readonly IsConnected$: Observable<boolean>;
+    private healthCheckUrl;
+    private consecutiveFailures;
+    private pollingTimerId;
+    private boundVisibilityHandler;
+    /** Synchronous getter for the current connectivity state */
+    get IsConnected(): boolean;
+    /**
+     * Begin polling the health check endpoint.
+     * Call once after workspace initialization succeeds.
+     */
+    Start(healthCheckUrl: string): void;
+    /** Stop polling and clean up resources */
+    Stop(): void;
+    /** Force an immediate health check and return the result */
+    CheckNow(): Promise<boolean>;
+    ngOnDestroy(): void;
+    private ping;
+    private applyPingResult;
+    private onPingSuccess;
+    private onPingFailure;
+    private scheduleNextPoll;
+    private clearPollTimer;
+    private attachVisibilityListener;
+    private detachVisibilityListener;
+    private onVisibilityChange;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ServerConnectivityService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ServerConnectivityService>;
+}
+//# sourceMappingURL=server-connectivity.service.d.ts.map

package/dist/lib/services/server-connectivity.service.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"server-connectivity.service.d.ts","sourceRoot":"","sources":["../../../src/lib/services/server-connectivity.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,SAAS,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAmB,UAAU,EAAE,MAAM,MAAM,CAAC;;AAGnD;;;;;;;;;;GAUG;AACH,qBAGa,yBAA0B,YAAW,SAAS;IACzD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,0BAA0B,CAAU;IAC5D,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,6BAA6B,CAAU;IAC/D,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAS;IACjD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,0BAA0B,CAAK;IAEvD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAsC;IAClE,SAAgB,YAAY,EAAE,UAAU,CAAC,OAAO,CAAC,CAAmC;IAEpF,OAAO,CAAC,cAAc,CAAuB;IAC7C,OAAO,CAAC,mBAAmB,CAAK;IAChC,OAAO,CAAC,cAAc,CAA8C;IACpE,OAAO,CAAC,sBAAsB,CAA6B;IAE3D,4DAA4D;IAC5D,IAAW,WAAW,IAAI,OAAO,CAEhC;IAED;;;OAGG;IACI,KAAK,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI;IAY1C,0CAA0C;IACnC,IAAI,IAAI,IAAI;IAMnB,4DAA4D;IAC/C,QAAQ,IAAI,OAAO,CAAC,OAAO,CAAC;IASzC,WAAW,IAAI,IAAI;YAML,IAAI;IAuBlB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,wBAAwB;IAOhC,OAAO,CAAC,wBAAwB;IAOhC,OAAO,CAAC,kBAAkB;yCAnJf,yBAAyB;6CAAzB,yBAAyB;CA6JrC"}

package/dist/lib/services/server-connectivity.service.js ADDED Viewed

@@ -0,0 +1,159 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { LogError, LogStatus } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+/**
+ * Polls MJAPI's /healthcheck endpoint and exposes connectivity state.
+ *
+ * Start polling after workspace initialization with `Start(healthCheckUrl)`.
+ * Subscribe to `IsConnected$` for reactive updates.
+ *
+ * Rules:
+ *  - 2 consecutive failures -> disconnected
+ *  - 1 success -> connected
+ *  - Pauses when tab is hidden, checks immediately on focus
+ */
+export class ServerConnectivityService {
+    static POLL_INTERVAL_CONNECTED_MS = 30_000;
+    static POLL_INTERVAL_DISCONNECTED_MS = 10_000;
+    static FETCH_TIMEOUT_MS = 5_000;
+    static FAILURES_BEFORE_DISCONNECT = 2;
+    isConnected = new BehaviorSubject(true);
+    IsConnected$ = this.isConnected.asObservable();
+    healthCheckUrl = null;
+    consecutiveFailures = 0;
+    pollingTimerId = null;
+    boundVisibilityHandler = null;
+    /** Synchronous getter for the current connectivity state */
+    get IsConnected() {
+        return this.isConnected.value;
+    }
+    /**
+     * Begin polling the health check endpoint.
+     * Call once after workspace initialization succeeds.
+     */
+    Start(healthCheckUrl) {
+        if (this.healthCheckUrl) {
+            this.Stop(); // idempotent restart
+        }
+        this.healthCheckUrl = healthCheckUrl;
+        this.consecutiveFailures = 0;
+        this.isConnected.next(true);
+        this.attachVisibilityListener();
+        this.scheduleNextPoll();
+    }
+    /** Stop polling and clean up resources */
+    Stop() {
+        this.clearPollTimer();
+        this.detachVisibilityListener();
+        this.healthCheckUrl = null;
+    }
+    /** Force an immediate health check and return the result */
+    async CheckNow() {
+        if (!this.healthCheckUrl) {
+            return this.isConnected.value;
+        }
+        const reachable = await this.ping();
+        this.applyPingResult(reachable);
+        return this.isConnected.value;
+    }
+    ngOnDestroy() {
+        this.Stop();
+    }
+    // ── Private helpers ──────────────────────────────────────────────
+    async ping() {
+        if (!this.healthCheckUrl)
+            return false;
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), ServerConnectivityService.FETCH_TIMEOUT_MS);
+        try {
+            const response = await fetch(this.healthCheckUrl, {
+                method: 'GET',
+                signal: controller.signal,
+                cache: 'no-store',
+            });
+            return response.ok;
+        }
+        catch {
+            return false;
+        }
+        finally {
+            clearTimeout(timeoutId);
+        }
+    }
+    applyPingResult(reachable) {
+        if (reachable) {
+            this.onPingSuccess();
+        }
+        else {
+            this.onPingFailure();
+        }
+    }
+    onPingSuccess() {
+        this.consecutiveFailures = 0;
+        if (!this.isConnected.value) {
+            this.isConnected.next(true);
+            LogStatus('Server connectivity restored');
+        }
+    }
+    onPingFailure() {
+        this.consecutiveFailures++;
+        if (this.isConnected.value &&
+            this.consecutiveFailures >= ServerConnectivityService.FAILURES_BEFORE_DISCONNECT) {
+            this.isConnected.next(false);
+            LogError(`Server connectivity lost after ${this.consecutiveFailures} consecutive failures`);
+        }
+    }
+    scheduleNextPoll() {
+        this.clearPollTimer();
+        // Don't poll while the tab is hidden — we'll check on focus
+        if (typeof document !== 'undefined' && document.hidden) {
+            return;
+        }
+        const interval = this.isConnected.value
+            ? ServerConnectivityService.POLL_INTERVAL_CONNECTED_MS
+            : ServerConnectivityService.POLL_INTERVAL_DISCONNECTED_MS;
+        this.pollingTimerId = setTimeout(async () => {
+            await this.CheckNow();
+            this.scheduleNextPoll();
+        }, interval);
+    }
+    clearPollTimer() {
+        if (this.pollingTimerId != null) {
+            clearTimeout(this.pollingTimerId);
+            this.pollingTimerId = null;
+        }
+    }
+    attachVisibilityListener() {
+        if (typeof document === 'undefined')
+            return;
+        this.boundVisibilityHandler = () => this.onVisibilityChange();
+        document.addEventListener('visibilitychange', this.boundVisibilityHandler);
+    }
+    detachVisibilityListener() {
+        if (this.boundVisibilityHandler && typeof document !== 'undefined') {
+            document.removeEventListener('visibilitychange', this.boundVisibilityHandler);
+            this.boundVisibilityHandler = null;
+        }
+    }
+    onVisibilityChange() {
+        if (!this.healthCheckUrl)
+            return;
+        if (document.hidden) {
+            this.clearPollTimer();
+        }
+        else {
+            // Tab became visible — check immediately, then resume polling
+            this.CheckNow().then(() => this.scheduleNextPoll());
+        }
+    }
+    static ɵfac = function ServerConnectivityService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ServerConnectivityService)(); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ServerConnectivityService, factory: ServerConnectivityService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ServerConnectivityService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
+    }], null, null); })();
+//# sourceMappingURL=server-connectivity.service.js.map

package/dist/lib/services/server-connectivity.service.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"server-connectivity.service.js","sourceRoot":"","sources":["../../../src/lib/services/server-connectivity.service.ts"],"names":[],"mappings":"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","sourcesContent":["import { Injectable, OnDestroy } from '@angular/core';\nimport { BehaviorSubject, Observable } from 'rxjs';\nimport { LogError, LogStatus } from '@memberjunction/core';\n\n/**\n * Polls MJAPI's /healthcheck endpoint and exposes connectivity state.\n *\n * Start polling after workspace initialization with `Start(healthCheckUrl)`.\n * Subscribe to `IsConnected$` for reactive updates.\n *\n * Rules:\n * - 2 consecutive failures -> disconnected\n * - 1 success -> connected\n * - Pauses when tab is hidden, checks immediately on focus\n */\n@Injectable({\n providedIn: 'root'\n})\nexport class ServerConnectivityService implements OnDestroy {\n private static readonly POLL_INTERVAL_CONNECTED_MS = 30_000;\n private static readonly POLL_INTERVAL_DISCONNECTED_MS = 10_000;\n private static readonly FETCH_TIMEOUT_MS = 5_000;\n private static readonly FAILURES_BEFORE_DISCONNECT = 2;\n\n private readonly isConnected = new BehaviorSubject<boolean>(true);\n public readonly IsConnected$: Observable<boolean> = this.isConnected.asObservable();\n\n private healthCheckUrl: string | null = null;\n private consecutiveFailures = 0;\n private pollingTimerId: ReturnType<typeof setTimeout> | null = null;\n private boundVisibilityHandler: (() => void) | null = null;\n\n /** Synchronous getter for the current connectivity state */\n public get IsConnected(): boolean {\n return this.isConnected.value;\n }\n\n /**\n * Begin polling the health check endpoint.\n * Call once after workspace initialization succeeds.\n */\n public Start(healthCheckUrl: string): void {\n if (this.healthCheckUrl) {\n this.Stop(); // idempotent restart\n }\n this.healthCheckUrl = healthCheckUrl;\n this.consecutiveFailures = 0;\n this.isConnected.next(true);\n\n this.attachVisibilityListener();\n this.scheduleNextPoll();\n }\n\n /** Stop polling and clean up resources */\n public Stop(): void {\n this.clearPollTimer();\n this.detachVisibilityListener();\n this.healthCheckUrl = null;\n }\n\n /** Force an immediate health check and return the result */\n public async CheckNow(): Promise<boolean> {\n if (!this.healthCheckUrl) {\n return this.isConnected.value;\n }\n const reachable = await this.ping();\n this.applyPingResult(reachable);\n return this.isConnected.value;\n }\n\n ngOnDestroy(): void {\n this.Stop();\n }\n\n // ── Private helpers ──────────────────────────────────────────────\n\n private async ping(): Promise<boolean> {\n if (!this.healthCheckUrl) return false;\n\n const controller = new AbortController();\n const timeoutId = setTimeout(\n () => controller.abort(),\n ServerConnectivityService.FETCH_TIMEOUT_MS\n );\n\n try {\n const response = await fetch(this.healthCheckUrl, {\n method: 'GET',\n signal: controller.signal,\n cache: 'no-store',\n });\n return response.ok;\n } catch {\n return false;\n } finally {\n clearTimeout(timeoutId);\n }\n }\n\n private applyPingResult(reachable: boolean): void {\n if (reachable) {\n this.onPingSuccess();\n } else {\n this.onPingFailure();\n }\n }\n\n private onPingSuccess(): void {\n this.consecutiveFailures = 0;\n if (!this.isConnected.value) {\n this.isConnected.next(true);\n LogStatus('Server connectivity restored');\n }\n }\n\n private onPingFailure(): void {\n this.consecutiveFailures++;\n if (\n this.isConnected.value &&\n this.consecutiveFailures >= ServerConnectivityService.FAILURES_BEFORE_DISCONNECT\n ) {\n this.isConnected.next(false);\n LogError(`Server connectivity lost after ${this.consecutiveFailures} consecutive failures`);\n }\n }\n\n private scheduleNextPoll(): void {\n this.clearPollTimer();\n\n // Don't poll while the tab is hidden — we'll check on focus\n if (typeof document !== 'undefined' && document.hidden) {\n return;\n }\n\n const interval = this.isConnected.value\n ? ServerConnectivityService.POLL_INTERVAL_CONNECTED_MS\n : ServerConnectivityService.POLL_INTERVAL_DISCONNECTED_MS;\n\n this.pollingTimerId = setTimeout(async () => {\n await this.CheckNow();\n this.scheduleNextPoll();\n }, interval);\n }\n\n private clearPollTimer(): void {\n if (this.pollingTimerId != null) {\n clearTimeout(this.pollingTimerId);\n this.pollingTimerId = null;\n }\n }\n\n private attachVisibilityListener(): void {\n if (typeof document === 'undefined') return;\n\n this.boundVisibilityHandler = () => this.onVisibilityChange();\n document.addEventListener('visibilitychange', this.boundVisibilityHandler);\n }\n\n private detachVisibilityListener(): void {\n if (this.boundVisibilityHandler && typeof document !== 'undefined') {\n document.removeEventListener('visibilitychange', this.boundVisibilityHandler);\n this.boundVisibilityHandler = null;\n }\n }\n\n private onVisibilityChange(): void {\n if (!this.healthCheckUrl) return;\n\n if (document.hidden) {\n this.clearPollTimer();\n } else {\n // Tab became visible — check immediately, then resume polling\n this.CheckNow().then(() => this.scheduleNextPoll());\n }\n }\n}\n"]}

package/dist/lib/shell/components/header/app-switcher.component.js CHANGED Viewed

@@ -177,11 +177,11 @@ export class AppSwitcherComponent {
             i0.ɵɵconditional(ctx.showDropdown ? 5 : -1);
             i0.ɵɵadvance();
             i0.ɵɵtwoWayProperty("ShowDialog", ctx.showConfigDialog);
-        } }, dependencies: [i2.UserAppConfigComponent], styles: [".app-switcher-container[_ngcontent-%COMP%] {\n  position: relative;\n  margin-left: -2px; \n\n}\n\n.app-switcher-button[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 10px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.15s;\n  user-select: none;\n  position: relative;\n}\n.app-switcher-button[_ngcontent-%COMP%]   .app-icon[_ngcontent-%COMP%] {\n  font-size: 20px;\n  width: 24px;\n  text-align: center;\n  position: relative;\n}\n\n\n.app-switcher-button[_ngcontent-%COMP%]   .app-icon[_ngcontent-%COMP%]::after {\n  content: \"\";\n  position: absolute;\n  bottom: -6px;\n  left: 2px;\n  right: 2px;\n  height: 3px;\n  border-radius: 2px;\n  background-color: var(--active-color, var(--mj-text-muted));\n}\n.app-switcher-button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.app-switcher-button[_ngcontent-%COMP%]   .dropdown-arrow[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n}\n\n.app-switcher-dropdown[_ngcontent-%COMP%] {\n  position: absolute;\n  top: calc(100% + 8px);\n  left: 0;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 220px;\n  width: max-content;\n  overflow: hidden;\n  z-index: 10000;\n  max-height: calc(100vh - 80px);\n  display: flex;\n  flex-direction: column;\n}\n.app-switcher-list[_ngcontent-%COMP%] {\n  overflow-y: auto;\n  flex: 1 1 auto;\n  min-height: 0;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  cursor: pointer;\n  transition: all 0.15s;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  position: relative;\n  white-space: nowrap;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%]::before {\n  content: \"\";\n  position: absolute;\n  left: 4px;\n  top: 8px;\n  bottom: 8px;\n  width: 3px;\n  border-radius: 2px;\n  background-color: var(--item-color, var(--mj-text-muted));\n  opacity: 0.8;\n  transition: all 0.15s;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 18px;\n  color: var(--item-color, var(--mj-text-muted));\n  width: 20px;\n  text-align: center;\n  opacity: 1;\n  transition: all 0.15s;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%]:hover::before {\n  opacity: 1;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--item-color, var(--mj-brand-primary)) 10%, var(--mj-bg-surface-elevated));\n  color: var(--item-color, var(--mj-brand-primary));\n  font-weight: 600;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.active[_ngcontent-%COMP%]::before {\n  width: 4px;\n  left: 3px;\n  opacity: 1;\n}\n\n\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.configure-item[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.configure-item[_ngcontent-%COMP%]::before {\n  display: none;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.configure-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.configure-item[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.configure-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-divider[_ngcontent-%COMP%] {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 12px;\n}\n\n\n\n.app-switcher-button[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n.app-switcher-button[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%]::after {\n  \n\n  display: none;\n}\n\n\n\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.loading[_ngcontent-%COMP%] {\n  pointer-events: none;\n  opacity: 0.7;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--item-color, var(--mj-text-muted));\n}\n\n\n\n@media (max-width: 600px) {\n  .app-switcher-dropdown[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 60px;\n    left: 0;\n    right: 0;\n    width: 100%;\n    min-width: unset;\n    height: calc(100vh - 60px);\n    overflow-y: auto;\n    border-radius: 0;\n    border-top: none;\n    padding: 0.25rem 0;\n  }\n\n  .app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%] {\n    padding: 14px 20px;\n    gap: 14px;\n    min-height: 48px;\n    font-size: 0.9375rem;\n  }\n\n  .app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    width: 24px;\n  }\n\n  .app-switcher-list[_ngcontent-%COMP%] {\n    overflow-y: visible;\n    flex: none;\n  }\n}"] });
+        } }, dependencies: [i2.UserAppConfigComponent], styles: [".app-switcher-container[_ngcontent-%COMP%] {\n  position: relative;\n  margin-left: -2px; \n\n}\n\n.app-switcher-button[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 10px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.15s;\n  user-select: none;\n  position: relative;\n}\n.app-switcher-button[_ngcontent-%COMP%]   .app-icon[_ngcontent-%COMP%] {\n  font-size: 20px;\n  width: 24px;\n  text-align: center;\n  position: relative;\n}\n\n\n.app-switcher-button[_ngcontent-%COMP%]   .app-icon[_ngcontent-%COMP%]::after {\n  content: \"\";\n  position: absolute;\n  bottom: -6px;\n  left: 2px;\n  right: 2px;\n  height: 3px;\n  border-radius: 2px;\n  background-color: var(--active-color, var(--mj-text-muted));\n}\n.app-switcher-button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.app-switcher-button[_ngcontent-%COMP%]   .dropdown-arrow[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n}\n\n.app-switcher-dropdown[_ngcontent-%COMP%] {\n  position: absolute;\n  top: calc(100% + 8px);\n  left: 0;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 220px;\n  width: max-content;\n  overflow: hidden;\n  z-index: 10000;\n  max-height: calc(100vh - 80px - var(--mj-connectivity-banner-height, 0px));\n  display: flex;\n  flex-direction: column;\n}\n.app-switcher-list[_ngcontent-%COMP%] {\n  overflow-y: auto;\n  flex: 1 1 auto;\n  min-height: 0;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  cursor: pointer;\n  transition: all 0.15s;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  position: relative;\n  white-space: nowrap;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%]::before {\n  content: \"\";\n  position: absolute;\n  left: 4px;\n  top: 8px;\n  bottom: 8px;\n  width: 3px;\n  border-radius: 2px;\n  background-color: var(--item-color, var(--mj-text-muted));\n  opacity: 0.8;\n  transition: all 0.15s;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 18px;\n  color: var(--item-color, var(--mj-text-muted));\n  width: 20px;\n  text-align: center;\n  opacity: 1;\n  transition: all 0.15s;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%]:hover::before {\n  opacity: 1;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--item-color, var(--mj-brand-primary)) 10%, var(--mj-bg-surface-elevated));\n  color: var(--item-color, var(--mj-brand-primary));\n  font-weight: 600;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.active[_ngcontent-%COMP%]::before {\n  width: 4px;\n  left: 3px;\n  opacity: 1;\n}\n\n\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.configure-item[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.configure-item[_ngcontent-%COMP%]::before {\n  display: none;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.configure-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.configure-item[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.configure-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-divider[_ngcontent-%COMP%] {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 12px;\n}\n\n\n\n.app-switcher-button[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n.app-switcher-button[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%]::after {\n  \n\n  display: none;\n}\n\n\n\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.loading[_ngcontent-%COMP%] {\n  pointer-events: none;\n  opacity: 0.7;\n}\n.app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item.loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--item-color, var(--mj-text-muted));\n}\n\n\n\n@media (max-width: 600px) {\n  .app-switcher-dropdown[_ngcontent-%COMP%] {\n    position: fixed;\n    top: calc(60px + var(--mj-connectivity-banner-height, 0px));\n    left: 0;\n    right: 0;\n    width: 100%;\n    min-width: unset;\n    height: calc(100vh - 60px - var(--mj-connectivity-banner-height, 0px));\n    overflow-y: auto;\n    border-radius: 0;\n    border-top: none;\n    padding: 0.25rem 0;\n  }\n\n  .app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%] {\n    padding: 14px 20px;\n    gap: 14px;\n    min-height: 48px;\n    font-size: 0.9375rem;\n  }\n\n  .app-switcher-dropdown[_ngcontent-%COMP%]   .app-switcher-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    width: 24px;\n  }\n\n  .app-switcher-list[_ngcontent-%COMP%] {\n    overflow-y: visible;\n    flex: none;\n  }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AppSwitcherComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-app-switcher', template: "<div class=\"app-switcher-container\" [class.loading]=\"isLoading\">\n  <div class=\"app-switcher-button\"\n    (click)=\"toggleDropdown()\">\n    <!-- Show spinner when loading, otherwise show app icon -->\n    @if (isLoading) {\n      <i class=\"app-icon loading-spinner fa-solid fa-spinner fa-spin\"></i>\n    }\n    @if (!isLoading) {\n      <i class=\"app-icon\" [class]=\"activeApp?.Icon || 'fa-solid fa-cube'\"\n        [style.color]=\"activeApp?.GetColor()\"\n      [style.--active-color]=\"activeApp?.GetColor()\"></i>\n    }\n    <i class=\"dropdown-arrow fa-solid fa-chevron-down\"></i>\n  </div>\n\n  @if (showDropdown) {\n    <div class=\"app-switcher-dropdown\">\n      <div class=\"app-switcher-list\">\n        @for (app of apps; track app) {\n          <div\n            class=\"app-switcher-item\"\n            [class.active]=\"IsActiveApp(app)\"\n            [class.loading]=\"IsLoadingApp(app)\"\n            [style.--item-color]=\"app.GetColor()\"\n            (click)=\"selectApp(app)\">\n            @if (IsLoadingApp(app)) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            }\n            @if (!IsLoadingApp(app)) {\n              <i [class]=\"app.Icon || 'fa-solid fa-cube'\"></i>\n            }\n            <span>{{ app.Name }}</span>\n          </div>\n        }\n      </div>\n      <!-- Divider + Configure pinned at bottom -->\n      <div class=\"app-switcher-divider\"></div>\n      <div class=\"app-switcher-item configure-item\" (click)=\"openConfigDialog()\">\n        <i class=\"fa-solid fa-gear\"></i>\n        <span>Configure...</span>\n      </div>\n    </div>\n  }\n</div>\n\n<!-- App Configuration Dialog -->\n<mj-user-app-config\n  #appConfigDialog\n  [(ShowDialog)]=\"showConfigDialog\"\n  (ConfigSaved)=\"onConfigSaved()\">\n</mj-user-app-config>\n", styles: [".app-switcher-container {\n  position: relative;\n  margin-left: -2px; /* Fine-tune alignment when no nav-bar icons to the left */\n}\n\n.app-switcher-button {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 10px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.15s;\n  user-select: none;\n  position: relative;\n}\n.app-switcher-button .app-icon {\n  font-size: 20px;\n  width: 24px;\n  text-align: center;\n  position: relative;\n}\n/* Color underline under the icon only, not the caret */\n.app-switcher-button .app-icon::after {\n  content: \"\";\n  position: absolute;\n  bottom: -6px;\n  left: 2px;\n  right: 2px;\n  height: 3px;\n  border-radius: 2px;\n  background-color: var(--active-color, var(--mj-text-muted));\n}\n.app-switcher-button:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.app-switcher-button .dropdown-arrow {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n}\n\n.app-switcher-dropdown {\n  position: absolute;\n  top: calc(100% + 8px);\n  left: 0;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 220px;\n  width: max-content;\n  overflow: hidden;\n  z-index: 10000;\n  max-height: calc(100vh - 80px);\n  display: flex;\n  flex-direction: column;\n}\n.app-switcher-list {\n  overflow-y: auto;\n  flex: 1 1 auto;\n  min-height: 0;\n}\n.app-switcher-dropdown .app-switcher-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  cursor: pointer;\n  transition: all 0.15s;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  position: relative;\n  white-space: nowrap;\n}\n.app-switcher-dropdown .app-switcher-item::before {\n  content: \"\";\n  position: absolute;\n  left: 4px;\n  top: 8px;\n  bottom: 8px;\n  width: 3px;\n  border-radius: 2px;\n  background-color: var(--item-color, var(--mj-text-muted));\n  opacity: 0.8;\n  transition: all 0.15s;\n}\n.app-switcher-dropdown .app-switcher-item i {\n  font-size: 18px;\n  color: var(--item-color, var(--mj-text-muted));\n  width: 20px;\n  text-align: center;\n  opacity: 1;\n  transition: all 0.15s;\n}\n.app-switcher-dropdown .app-switcher-item:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.app-switcher-dropdown .app-switcher-item:hover::before {\n  opacity: 1;\n}\n.app-switcher-dropdown .app-switcher-item.active {\n  background: color-mix(in srgb, var(--item-color, var(--mj-brand-primary)) 10%, var(--mj-bg-surface-elevated));\n  color: var(--item-color, var(--mj-brand-primary));\n  font-weight: 600;\n}\n.app-switcher-dropdown .app-switcher-item.active::before {\n  width: 4px;\n  left: 3px;\n  opacity: 1;\n}\n/* Configure option - no color line, neutral gray styling */\n.app-switcher-dropdown .app-switcher-item.configure-item {\n  color: var(--mj-text-secondary);\n}\n.app-switcher-dropdown .app-switcher-item.configure-item::before {\n  display: none;\n}\n.app-switcher-dropdown .app-switcher-item.configure-item i {\n  color: var(--mj-text-muted);\n}\n.app-switcher-dropdown .app-switcher-item.configure-item:hover {\n  color: var(--mj-text-primary);\n}\n.app-switcher-dropdown .app-switcher-item.configure-item:hover i {\n  color: var(--mj-text-primary);\n}\n.app-switcher-dropdown .app-switcher-divider {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 12px;\n}\n\n/* Loading state for app switcher button */\n.app-switcher-button .loading-spinner {\n  color: var(--mj-text-muted);\n}\n.app-switcher-button .loading-spinner::after {\n  /* Hide the underline when showing spinner */\n  display: none;\n}\n\n/* Loading state for dropdown items */\n.app-switcher-dropdown .app-switcher-item.loading {\n  pointer-events: none;\n  opacity: 0.7;\n}\n.app-switcher-dropdown .app-switcher-item.loading i {\n  color: var(--item-color, var(--mj-text-muted));\n}\n\n/* Mobile: full-width dropdown with scroll */\n@media (max-width: 600px) {\n  .app-switcher-dropdown {\n    position: fixed;\n    top: 60px;\n    left: 0;\n    right: 0;\n    width: 100%;\n    min-width: unset;\n    height: calc(100vh - 60px);\n    overflow-y: auto;\n    border-radius: 0;\n    border-top: none;\n    padding: 0.25rem 0;\n  }\n\n  .app-switcher-dropdown .app-switcher-item {\n    padding: 14px 20px;\n    gap: 14px;\n    min-height: 48px;\n    font-size: 0.9375rem;\n  }\n\n  .app-switcher-dropdown .app-switcher-item i {\n    font-size: 20px;\n    width: 24px;\n  }\n\n  .app-switcher-list {\n    overflow-y: visible;\n    flex: none;\n  }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-app-switcher', template: "<div class=\"app-switcher-container\" [class.loading]=\"isLoading\">\n  <div class=\"app-switcher-button\"\n    (click)=\"toggleDropdown()\">\n    <!-- Show spinner when loading, otherwise show app icon -->\n    @if (isLoading) {\n      <i class=\"app-icon loading-spinner fa-solid fa-spinner fa-spin\"></i>\n    }\n    @if (!isLoading) {\n      <i class=\"app-icon\" [class]=\"activeApp?.Icon || 'fa-solid fa-cube'\"\n        [style.color]=\"activeApp?.GetColor()\"\n      [style.--active-color]=\"activeApp?.GetColor()\"></i>\n    }\n    <i class=\"dropdown-arrow fa-solid fa-chevron-down\"></i>\n  </div>\n\n  @if (showDropdown) {\n    <div class=\"app-switcher-dropdown\">\n      <div class=\"app-switcher-list\">\n        @for (app of apps; track app) {\n          <div\n            class=\"app-switcher-item\"\n            [class.active]=\"IsActiveApp(app)\"\n            [class.loading]=\"IsLoadingApp(app)\"\n            [style.--item-color]=\"app.GetColor()\"\n            (click)=\"selectApp(app)\">\n            @if (IsLoadingApp(app)) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            }\n            @if (!IsLoadingApp(app)) {\n              <i [class]=\"app.Icon || 'fa-solid fa-cube'\"></i>\n            }\n            <span>{{ app.Name }}</span>\n          </div>\n        }\n      </div>\n      <!-- Divider + Configure pinned at bottom -->\n      <div class=\"app-switcher-divider\"></div>\n      <div class=\"app-switcher-item configure-item\" (click)=\"openConfigDialog()\">\n        <i class=\"fa-solid fa-gear\"></i>\n        <span>Configure...</span>\n      </div>\n    </div>\n  }\n</div>\n\n<!-- App Configuration Dialog -->\n<mj-user-app-config\n  #appConfigDialog\n  [(ShowDialog)]=\"showConfigDialog\"\n  (ConfigSaved)=\"onConfigSaved()\">\n</mj-user-app-config>\n", styles: [".app-switcher-container {\n  position: relative;\n  margin-left: -2px; /* Fine-tune alignment when no nav-bar icons to the left */\n}\n\n.app-switcher-button {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 10px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.15s;\n  user-select: none;\n  position: relative;\n}\n.app-switcher-button .app-icon {\n  font-size: 20px;\n  width: 24px;\n  text-align: center;\n  position: relative;\n}\n/* Color underline under the icon only, not the caret */\n.app-switcher-button .app-icon::after {\n  content: \"\";\n  position: absolute;\n  bottom: -6px;\n  left: 2px;\n  right: 2px;\n  height: 3px;\n  border-radius: 2px;\n  background-color: var(--active-color, var(--mj-text-muted));\n}\n.app-switcher-button:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.app-switcher-button .dropdown-arrow {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n}\n\n.app-switcher-dropdown {\n  position: absolute;\n  top: calc(100% + 8px);\n  left: 0;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 220px;\n  width: max-content;\n  overflow: hidden;\n  z-index: 10000;\n  max-height: calc(100vh - 80px - var(--mj-connectivity-banner-height, 0px));\n  display: flex;\n  flex-direction: column;\n}\n.app-switcher-list {\n  overflow-y: auto;\n  flex: 1 1 auto;\n  min-height: 0;\n}\n.app-switcher-dropdown .app-switcher-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  cursor: pointer;\n  transition: all 0.15s;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  position: relative;\n  white-space: nowrap;\n}\n.app-switcher-dropdown .app-switcher-item::before {\n  content: \"\";\n  position: absolute;\n  left: 4px;\n  top: 8px;\n  bottom: 8px;\n  width: 3px;\n  border-radius: 2px;\n  background-color: var(--item-color, var(--mj-text-muted));\n  opacity: 0.8;\n  transition: all 0.15s;\n}\n.app-switcher-dropdown .app-switcher-item i {\n  font-size: 18px;\n  color: var(--item-color, var(--mj-text-muted));\n  width: 20px;\n  text-align: center;\n  opacity: 1;\n  transition: all 0.15s;\n}\n.app-switcher-dropdown .app-switcher-item:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.app-switcher-dropdown .app-switcher-item:hover::before {\n  opacity: 1;\n}\n.app-switcher-dropdown .app-switcher-item.active {\n  background: color-mix(in srgb, var(--item-color, var(--mj-brand-primary)) 10%, var(--mj-bg-surface-elevated));\n  color: var(--item-color, var(--mj-brand-primary));\n  font-weight: 600;\n}\n.app-switcher-dropdown .app-switcher-item.active::before {\n  width: 4px;\n  left: 3px;\n  opacity: 1;\n}\n/* Configure option - no color line, neutral gray styling */\n.app-switcher-dropdown .app-switcher-item.configure-item {\n  color: var(--mj-text-secondary);\n}\n.app-switcher-dropdown .app-switcher-item.configure-item::before {\n  display: none;\n}\n.app-switcher-dropdown .app-switcher-item.configure-item i {\n  color: var(--mj-text-muted);\n}\n.app-switcher-dropdown .app-switcher-item.configure-item:hover {\n  color: var(--mj-text-primary);\n}\n.app-switcher-dropdown .app-switcher-item.configure-item:hover i {\n  color: var(--mj-text-primary);\n}\n.app-switcher-dropdown .app-switcher-divider {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 12px;\n}\n\n/* Loading state for app switcher button */\n.app-switcher-button .loading-spinner {\n  color: var(--mj-text-muted);\n}\n.app-switcher-button .loading-spinner::after {\n  /* Hide the underline when showing spinner */\n  display: none;\n}\n\n/* Loading state for dropdown items */\n.app-switcher-dropdown .app-switcher-item.loading {\n  pointer-events: none;\n  opacity: 0.7;\n}\n.app-switcher-dropdown .app-switcher-item.loading i {\n  color: var(--item-color, var(--mj-text-muted));\n}\n\n/* Mobile: full-width dropdown with scroll */\n@media (max-width: 600px) {\n  .app-switcher-dropdown {\n    position: fixed;\n    top: calc(60px + var(--mj-connectivity-banner-height, 0px));\n    left: 0;\n    right: 0;\n    width: 100%;\n    min-width: unset;\n    height: calc(100vh - 60px - var(--mj-connectivity-banner-height, 0px));\n    overflow-y: auto;\n    border-radius: 0;\n    border-top: none;\n    padding: 0.25rem 0;\n  }\n\n  .app-switcher-dropdown .app-switcher-item {\n    padding: 14px 20px;\n    gap: 14px;\n    min-height: 48px;\n    font-size: 0.9375rem;\n  }\n\n  .app-switcher-dropdown .app-switcher-item i {\n    font-size: 20px;\n    width: 24px;\n  }\n\n  .app-switcher-list {\n    overflow-y: visible;\n    flex: none;\n  }\n}\n"] }]
     }], () => [{ type: i1.ApplicationManager }], { activeApp: [{
             type: Input
         }], isViewingSystemTab: [{

package/dist/lib/shell/shell.component.js CHANGED Viewed

@@ -2910,11 +2910,11 @@ export class ShellComponent {
             i0.ɵɵconditional(ctx.loading ? 47 : -1);
             i0.ɵɵadvance(4);
             i0.ɵɵconditional(ctx.PinProgressVisible ? 51 : -1);
-        } }, dependencies: [i9.NgControlStatus, i9.NgModel, i10.MJDropdownComponent, i11.LoadingComponent, i12.SearchCompositeComponent, i13.AppSwitcherComponent, i14.AppNavComponent, i15.TabContainerComponent, i16.AppAccessDialogComponent, i17.CommandPaletteComponent], styles: ["[_nghost-%COMP%] {\n  display: block;\n  height: 100vh;\n  width: 100%;\n  overflow: hidden;\n}\n\n\n\n.mj-logo[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 18px;\n  background-image: var(--mj-logo-mark);\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n  flex-shrink: 0;\n}\n\n.shell-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n  width: 100%;\n  overflow: hidden;\n}\n\n\n\n\n.shell-container.hidden[_ngcontent-%COMP%] {\n  visibility: hidden;\n  position: absolute;\n  pointer-events: none;\n}\n\nmj-tab-container[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  transition: all 0.2s ease-in-out;\n}\n\n\n\nmj-tab-container.hide-tab-bar[_ngcontent-%COMP%]     .lm_header {\n  display: none;\n}\n\n\n\nmj-tab-container[_ngcontent-%COMP%]:not(.hide-tab-bar)     .lm_header {\n  opacity: 1;\n  max-height: 40px;\n  transition: opacity 0.2s ease-in-out, max-height 0.2s ease-in-out;\n}\n\n\n\nmj-tab-container.hide-tab-bar[_ngcontent-%COMP%]     .lm_content {\n  height: 100% !important;\n}\n\n\n\nmj-tab-container[_ngcontent-%COMP%]     .lm_stack {\n  transition: all 0.2s ease-in-out;\n}\n\n.shell-header[_ngcontent-%COMP%] {\n  height: 60px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  align-items: center;\n  padding: 0 16px;\n  gap: 16px;\n  box-shadow: var(--mj-shadow-sm);\n  flex-shrink: 0;\n  \n\n\n  position: relative;\n  z-index: 500;\n}\n\n\n\n.nav-bar-apps[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.nav-bar-apps.left-of-switcher[_ngcontent-%COMP%] {\n  \n\n  \n\n}\n\n.nav-bar-apps.left-of-user-menu[_ngcontent-%COMP%] {\n  margin-right: 8px;\n}\n\n.nav-bar-app-btn[_ngcontent-%COMP%] {\n  --app-color: var(--mj-text-muted);\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-secondary);\n  font-size: 18px;\n  transition: all 0.15s ease;\n  position: relative;\n}\n\n.nav-bar-app-btn[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--app-color) 15%, transparent);\n  color: var(--app-color);\n}\n\n.nav-bar-app-btn.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--app-color) 20%, transparent);\n  color: var(--app-color);\n}\n\n.nav-bar-app-btn.active[_ngcontent-%COMP%]::after {\n  content: '';\n  position: absolute;\n  bottom: 6px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 16px;\n  height: 3px;\n  background: var(--app-color);\n  border-radius: 2px;\n}\n\n.nav-bar-app-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  transition: transform 0.15s ease;\n  margin-top: 2px; \n\n}\n\n.nav-bar-app-btn[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  transform: scale(1.1);\n}\n\n.spacer[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.icon-btn[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  border: none;\n  background: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: 18px;\n  transition: background 0.15s;\n}\n\n.icon-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n\n\n.notification-btn[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.notification-badge[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 4px;\n  right: 4px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n}\n\n.user-menu[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: box-shadow 0.15s, transform 0.15s;\n  padding: 0;\n  overflow: hidden;\n}\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%]:hover {\n  transform: scale(1.05);\n}\n\n\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%]   .icon-fallback[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  border: 2px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-hover);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: border-color 0.15s;\n}\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%]:hover   .icon-fallback[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n}\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%]   .icon-fallback[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 16px;\n}\n\n\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%]   .avatar-img[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  object-fit: cover;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%]:hover   .avatar-img[_ngcontent-%COMP%] {\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.user-menu-header[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.user-menu-header[_ngcontent-%COMP%]   .user-info[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.user-menu-header[_ngcontent-%COMP%]   .user-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n}\n\n.user-menu-header[_ngcontent-%COMP%]   .user-email[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.user-menu-header[_ngcontent-%COMP%]   .user-subtitle[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n\n\n.user-context-menu[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 8px;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 180px;\n  z-index: 10000;\n  overflow: hidden;\n}\n\n.user-menu-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  cursor: pointer;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  transition: background 0.15s;\n}\n\n.user-menu-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 18px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n}\n\n.user-menu-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.user-menu-item.danger[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.user-menu-item.danger[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.user-menu-item.danger[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface-elevated));\n}\n\n.user-menu-divider[_ngcontent-%COMP%] {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 0;\n}\n\n\n\n.user-menu-item.disabled[_ngcontent-%COMP%] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.user-menu-item.disabled[_ngcontent-%COMP%]:hover {\n  background: transparent;\n}\n\n\n\n.theme-toggle-item[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.theme-toggle-track[_ngcontent-%COMP%] {\n  position: relative;\n  width: 40px;\n  height: 22px;\n  border-radius: 11px;\n  background: var(--mj-bg-surface-active);\n  margin-left: auto;\n  transition: background 0.2s ease;\n  flex-shrink: 0;\n}\n\n.theme-toggle-track.dark[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n}\n\n.theme-toggle-thumb[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform 0.2s ease;\n}\n\n.theme-toggle-track.dark[_ngcontent-%COMP%]   .theme-toggle-thumb[_ngcontent-%COMP%] {\n  transform: translateX(18px);\n}\n\n.theme-toggle-icon[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n.theme-toggle-track.dark[_ngcontent-%COMP%]   .theme-toggle-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n}\n\n\n\n.user-menu-item[_ngcontent-%COMP%]   .menu-shortcut[_ngcontent-%COMP%] {\n  margin-left: auto;\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  font-family: monospace;\n}\n\n\n\n.user-context-menu.menu-fade[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_menuFadeIn 0.15s ease-out;\n}\n\n.user-context-menu.menu-slide[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_menuSlideIn 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_menuFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes _ngcontent-%COMP%_menuSlideIn {\n  from {\n    opacity: 0;\n    transform: translateY(-16px) scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n.shell-loading[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100vh;\n  padding-bottom: 15vh;\n  background: var(--mj-bg-page);\n}\n\n\n\n.loading-reset-panel[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--mj-space-3);\n  margin-top: var(--mj-space-10);\n  padding: var(--mj-space-8);\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  box-shadow: var(--mj-shadow-md);\n  max-width: 420px;\n  animation: _ngcontent-%COMP%_resetPanelFadeIn 0.4s ease-out;\n}\n\n.loading-reset-message[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  margin: 0;\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n.loading-reset-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-lg);\n  color: var(--mj-status-warning);\n}\n\n.loading-reset-hint[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n  text-align: center;\n  line-height: var(--mj-leading-relaxed);\n}\n\n.loading-reset-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  margin-top: var(--mj-space-3);\n  padding: var(--mj-space-3) var(--mj-space-6);\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-medium);\n  font-family: var(--mj-font-family);\n  color: var(--mj-text-inverse);\n  background: var(--mj-brand-primary);\n  border: 1px solid var(--mj-brand-primary);\n  border-radius: var(--mj-radius-md);\n  cursor: pointer;\n  transition: var(--mj-transition-colors);\n}\n\n.loading-reset-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary-hover);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.loading-reset-btn[_ngcontent-%COMP%]:active {\n  background: var(--mj-brand-primary-active);\n  color: var(--mj-text-inverse);\n  transform: scale(0.98);\n}\n\n.loading-reset-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n}\n\n@keyframes _ngcontent-%COMP%_resetPanelFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n\n\n.hamburger-btn[_ngcontent-%COMP%] {\n  display: none;\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-secondary);\n  font-size: 20px;\n  transition: background 0.15s;\n}\n.hamburger-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n\n\n.mobile-nav-overlay[_ngcontent-%COMP%] {\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 9998;\n}\n\n\n\n.mobile-nav-drawer[_ngcontent-%COMP%] {\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 280px;\n  max-width: 85vw;\n  background: var(--mj-bg-surface);\n  box-shadow: var(--mj-shadow-xl);\n  z-index: 9999;\n  flex-direction: column;\n  transform: translateX(-100%);\n  transition: transform 0.3s ease;\n}\n.mobile-nav-drawer.open[_ngcontent-%COMP%] {\n  transform: translateX(0);\n}\n\n.mobile-nav-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n.mobile-nav-header[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-weight: 600;\n  font-size: 16px;\n  color: var(--mj-text-primary);\n}\n.mobile-nav-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  border: none;\n  background: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: 18px;\n  transition: background 0.15s;\n}\n.mobile-nav-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-active);\n}\n\n.mobile-nav-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px 0;\n}\n\n.mobile-nav-section-title[_ngcontent-%COMP%] {\n  padding: 8px 20px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.mobile-nav-footer[_ngcontent-%COMP%] {\n  border-top: 1px solid var(--mj-border-default);\n  padding: 12px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.mobile-nav-action[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  border-radius: 8px;\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n  transition: background 0.15s;\n  width: 100%;\n  text-align: left;\n}\n.mobile-nav-action[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.mobile-nav-action[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n  width: 20px;\n  text-align: center;\n}\n\n\n\n@media (max-width: 768px) {\n  .hamburger-btn[_ngcontent-%COMP%] {\n    display: flex;\n  }\n\n  .desktop-nav[_ngcontent-%COMP%] {\n    display: none !important;\n  }\n\n  .desktop-only[_ngcontent-%COMP%] {\n    display: none !important;\n  }\n\n  .mobile-nav-overlay[_ngcontent-%COMP%] {\n    display: block;\n  }\n\n  .mobile-nav-drawer[_ngcontent-%COMP%] {\n    display: flex;\n  }\n\n  .shell-header[_ngcontent-%COMP%] {\n    padding: 0 12px;\n    gap: 8px;\n  }\n}\n\n\n\n  .settings-fullscreen-window {\n  \n\n  box-shadow: none !important;\n  border: none !important;\n}\n\n  .settings-fullscreen-window .k-window-titlebar {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 12px 16px;\n}\n\n  .settings-fullscreen-window .k-window-title {\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n  .settings-fullscreen-window .k-window-titlebar-actions {\n  gap: 4px;\n}\n\n  .settings-fullscreen-window .k-window-titlebar-action {\n  width: 32px;\n  height: 32px;\n  border-radius: 6px;\n}\n\n  .settings-fullscreen-window .k-window-titlebar-action:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n  .settings-fullscreen-window .k-window-content {\n  padding: 0;\n  overflow: auto;\n  background: var(--mj-bg-page);\n}\n\n\n\n  .settings-fullscreen-window .k-window-titlebar-action[title=\"Minimize\"], \n  .settings-fullscreen-window .k-window-titlebar-action[title=\"Maximize\"], \n  .settings-fullscreen-window .k-window-titlebar-action .k-i-window-minimize, \n  .settings-fullscreen-window .k-window-titlebar-action .k-i-window-maximize, \n  .settings-fullscreen-window .k-window-titlebar-action .k-i-window {\n  display: none !important;\n}\n\n\n\n\n\n.shell-search-bar[_ngcontent-%COMP%] {\n    flex: 0 1 420px;\n    min-width: 200px;\n    max-width: 520px;\n    margin: 0 12px;\n    position: relative;\n    z-index: 99999;\n}\n@media (max-width: 768px) {\n    .shell-search-bar[_ngcontent-%COMP%] { display: none; }\n}\n\n\n\n\n\n\n.search-popup-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: 9999;\n  animation: _ngcontent-%COMP%_fadeIn 0.15s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.search-popup[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 60px; \n\n  right: 16px;\n  width: 480px;\n  max-width: calc(100vw - 32px);\n  background: var(--mj-bg-surface-elevated);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-xl);\n  z-index: 10000;\n  opacity: 0;\n  transform: translateY(-10px);\n  pointer-events: none;\n  transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.search-popup.open[_ngcontent-%COMP%] {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: all;\n}\n\n.search-popup-content[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px;\n}\n\n.search-entity-dropdown[_ngcontent-%COMP%] {\n  min-width: 140px;\n  max-width: 180px;\n  flex-shrink: 0;\n}\n\n.search-input[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  height: 40px;\n  padding: 8px 12px;\n  font-size: 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  outline: none;\n  display: block !important;\n  box-sizing: border-box;\n}\n\n.search-input[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.search-submit-btn[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\n  border: none;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  transition: background 0.15s;\n  flex-shrink: 0;\n}\n\n.search-submit-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n}\n\n.search-submit-btn[_ngcontent-%COMP%]:active {\n  background: var(--mj-brand-primary-hover);\n}\n\n\n\n.notification-badge-mobile[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  font-size: 11px;\n  font-weight: 600;\n  border-radius: 9px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n}\n\n\n\n@media (max-width: 768px) {\n  .search-popup[_ngcontent-%COMP%] {\n    top: 60px;\n    left: 16px;\n    right: 16px;\n    width: auto;\n    max-width: none;\n  }\n\n  .search-popup-content[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n  }\n\n  .search-entity-dropdown[_ngcontent-%COMP%] {\n    width: 100%;\n  }\n\n  .search-input[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n  }\n}\n\n\n\n\n\n.pin-progress-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-text-primary) 40%, transparent);\n  z-index: 100000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  animation: _ngcontent-%COMP%_pinBackdropIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_pinBackdropIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.pin-progress-modal[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-xl);\n  padding: 28px 40px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  box-shadow: 0 16px 48px color-mix(in srgb, var(--mj-text-primary) 30%, transparent);\n  animation: _ngcontent-%COMP%_pinModalIn 0.25s ease;\n}\n\n@keyframes _ngcontent-%COMP%_pinModalIn {\n  from { opacity: 0; transform: scale(0.9) translateY(8px); }\n  to { opacity: 1; transform: scale(1) translateY(0); }\n}\n\n.pin-progress-text[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-secondary);\n  white-space: nowrap;\n}"] });
+        } }, dependencies: [i9.NgControlStatus, i9.NgModel, i10.MJDropdownComponent, i11.LoadingComponent, i12.SearchCompositeComponent, i13.AppSwitcherComponent, i14.AppNavComponent, i15.TabContainerComponent, i16.AppAccessDialogComponent, i17.CommandPaletteComponent], styles: ["[_nghost-%COMP%] {\n  display: block;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n\n\n.mj-logo[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 18px;\n  background-image: var(--mj-logo-mark);\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n  flex-shrink: 0;\n}\n\n.shell-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n\n\n\n.shell-container.hidden[_ngcontent-%COMP%] {\n  visibility: hidden;\n  position: absolute;\n  pointer-events: none;\n}\n\nmj-tab-container[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  transition: all 0.2s ease-in-out;\n}\n\n\n\nmj-tab-container.hide-tab-bar[_ngcontent-%COMP%]     .lm_header {\n  display: none;\n}\n\n\n\nmj-tab-container[_ngcontent-%COMP%]:not(.hide-tab-bar)     .lm_header {\n  opacity: 1;\n  max-height: 40px;\n  transition: opacity 0.2s ease-in-out, max-height 0.2s ease-in-out;\n}\n\n\n\nmj-tab-container.hide-tab-bar[_ngcontent-%COMP%]     .lm_content {\n  height: 100% !important;\n}\n\n\n\nmj-tab-container[_ngcontent-%COMP%]     .lm_stack {\n  transition: all 0.2s ease-in-out;\n}\n\n.shell-header[_ngcontent-%COMP%] {\n  height: 60px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  align-items: center;\n  padding: 0 16px;\n  gap: 16px;\n  box-shadow: var(--mj-shadow-sm);\n  flex-shrink: 0;\n  \n\n\n  position: relative;\n  z-index: 500;\n}\n\n\n\n.nav-bar-apps[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.nav-bar-apps.left-of-switcher[_ngcontent-%COMP%] {\n  \n\n  \n\n}\n\n.nav-bar-apps.left-of-user-menu[_ngcontent-%COMP%] {\n  margin-right: 8px;\n}\n\n.nav-bar-app-btn[_ngcontent-%COMP%] {\n  --app-color: var(--mj-text-muted);\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-secondary);\n  font-size: 18px;\n  transition: all 0.15s ease;\n  position: relative;\n}\n\n.nav-bar-app-btn[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--app-color) 15%, transparent);\n  color: var(--app-color);\n}\n\n.nav-bar-app-btn.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--app-color) 20%, transparent);\n  color: var(--app-color);\n}\n\n.nav-bar-app-btn.active[_ngcontent-%COMP%]::after {\n  content: '';\n  position: absolute;\n  bottom: 6px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 16px;\n  height: 3px;\n  background: var(--app-color);\n  border-radius: 2px;\n}\n\n.nav-bar-app-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  transition: transform 0.15s ease;\n  margin-top: 2px; \n\n}\n\n.nav-bar-app-btn[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  transform: scale(1.1);\n}\n\n.spacer[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.icon-btn[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  border: none;\n  background: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: 18px;\n  transition: background 0.15s;\n}\n\n.icon-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n\n\n.notification-btn[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.notification-badge[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 4px;\n  right: 4px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n}\n\n.user-menu[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: box-shadow 0.15s, transform 0.15s;\n  padding: 0;\n  overflow: hidden;\n}\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%]:hover {\n  transform: scale(1.05);\n}\n\n\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%]   .icon-fallback[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  border: 2px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-hover);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: border-color 0.15s;\n}\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%]:hover   .icon-fallback[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n}\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%]   .icon-fallback[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 16px;\n}\n\n\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%]   .avatar-img[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  object-fit: cover;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n.user-menu[_ngcontent-%COMP%]   .avatar-btn[_ngcontent-%COMP%]:hover   .avatar-img[_ngcontent-%COMP%] {\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.user-menu-header[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.user-menu-header[_ngcontent-%COMP%]   .user-info[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.user-menu-header[_ngcontent-%COMP%]   .user-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n}\n\n.user-menu-header[_ngcontent-%COMP%]   .user-email[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.user-menu-header[_ngcontent-%COMP%]   .user-subtitle[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n\n\n.user-context-menu[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 8px;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 180px;\n  z-index: 10000;\n  overflow: hidden;\n}\n\n.user-menu-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  cursor: pointer;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  transition: background 0.15s;\n}\n\n.user-menu-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 18px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n}\n\n.user-menu-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.user-menu-item.danger[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.user-menu-item.danger[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.user-menu-item.danger[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface-elevated));\n}\n\n.user-menu-divider[_ngcontent-%COMP%] {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 0;\n}\n\n\n\n.user-menu-item.disabled[_ngcontent-%COMP%] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.user-menu-item.disabled[_ngcontent-%COMP%]:hover {\n  background: transparent;\n}\n\n\n\n.theme-toggle-item[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.theme-toggle-track[_ngcontent-%COMP%] {\n  position: relative;\n  width: 40px;\n  height: 22px;\n  border-radius: 11px;\n  background: var(--mj-bg-surface-active);\n  margin-left: auto;\n  transition: background 0.2s ease;\n  flex-shrink: 0;\n}\n\n.theme-toggle-track.dark[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n}\n\n.theme-toggle-thumb[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform 0.2s ease;\n}\n\n.theme-toggle-track.dark[_ngcontent-%COMP%]   .theme-toggle-thumb[_ngcontent-%COMP%] {\n  transform: translateX(18px);\n}\n\n.theme-toggle-icon[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n.theme-toggle-track.dark[_ngcontent-%COMP%]   .theme-toggle-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n}\n\n\n\n.user-menu-item[_ngcontent-%COMP%]   .menu-shortcut[_ngcontent-%COMP%] {\n  margin-left: auto;\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  font-family: monospace;\n}\n\n\n\n.user-context-menu.menu-fade[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_menuFadeIn 0.15s ease-out;\n}\n\n.user-context-menu.menu-slide[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_menuSlideIn 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_menuFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes _ngcontent-%COMP%_menuSlideIn {\n  from {\n    opacity: 0;\n    transform: translateY(-16px) scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n.shell-loading[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100vh;\n  padding-bottom: 15vh;\n  background: var(--mj-bg-page);\n}\n\n\n\n.loading-reset-panel[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--mj-space-3);\n  margin-top: var(--mj-space-10);\n  padding: var(--mj-space-8);\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  box-shadow: var(--mj-shadow-md);\n  max-width: 420px;\n  animation: _ngcontent-%COMP%_resetPanelFadeIn 0.4s ease-out;\n}\n\n.loading-reset-message[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  margin: 0;\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n.loading-reset-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-lg);\n  color: var(--mj-status-warning);\n}\n\n.loading-reset-hint[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n  text-align: center;\n  line-height: var(--mj-leading-relaxed);\n}\n\n.loading-reset-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  margin-top: var(--mj-space-3);\n  padding: var(--mj-space-3) var(--mj-space-6);\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-medium);\n  font-family: var(--mj-font-family);\n  color: var(--mj-text-inverse);\n  background: var(--mj-brand-primary);\n  border: 1px solid var(--mj-brand-primary);\n  border-radius: var(--mj-radius-md);\n  cursor: pointer;\n  transition: var(--mj-transition-colors);\n}\n\n.loading-reset-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary-hover);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.loading-reset-btn[_ngcontent-%COMP%]:active {\n  background: var(--mj-brand-primary-active);\n  color: var(--mj-text-inverse);\n  transform: scale(0.98);\n}\n\n.loading-reset-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n}\n\n@keyframes _ngcontent-%COMP%_resetPanelFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n\n\n.hamburger-btn[_ngcontent-%COMP%] {\n  display: none;\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-secondary);\n  font-size: 20px;\n  transition: background 0.15s;\n}\n.hamburger-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n\n\n.mobile-nav-overlay[_ngcontent-%COMP%] {\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 9998;\n}\n\n\n\n.mobile-nav-drawer[_ngcontent-%COMP%] {\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 280px;\n  max-width: 85vw;\n  background: var(--mj-bg-surface);\n  box-shadow: var(--mj-shadow-xl);\n  z-index: 9999;\n  flex-direction: column;\n  transform: translateX(-100%);\n  transition: transform 0.3s ease;\n}\n.mobile-nav-drawer.open[_ngcontent-%COMP%] {\n  transform: translateX(0);\n}\n\n.mobile-nav-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n.mobile-nav-header[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-weight: 600;\n  font-size: 16px;\n  color: var(--mj-text-primary);\n}\n.mobile-nav-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  border: none;\n  background: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: 18px;\n  transition: background 0.15s;\n}\n.mobile-nav-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-active);\n}\n\n.mobile-nav-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px 0;\n}\n\n.mobile-nav-section-title[_ngcontent-%COMP%] {\n  padding: 8px 20px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.mobile-nav-footer[_ngcontent-%COMP%] {\n  border-top: 1px solid var(--mj-border-default);\n  padding: 12px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.mobile-nav-action[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  border-radius: 8px;\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n  transition: background 0.15s;\n  width: 100%;\n  text-align: left;\n}\n.mobile-nav-action[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.mobile-nav-action[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n  width: 20px;\n  text-align: center;\n}\n\n\n\n@media (max-width: 768px) {\n  .hamburger-btn[_ngcontent-%COMP%] {\n    display: flex;\n  }\n\n  .desktop-nav[_ngcontent-%COMP%] {\n    display: none !important;\n  }\n\n  .desktop-only[_ngcontent-%COMP%] {\n    display: none !important;\n  }\n\n  .mobile-nav-overlay[_ngcontent-%COMP%] {\n    display: block;\n  }\n\n  .mobile-nav-drawer[_ngcontent-%COMP%] {\n    display: flex;\n  }\n\n  .shell-header[_ngcontent-%COMP%] {\n    padding: 0 12px;\n    gap: 8px;\n  }\n}\n\n\n\n  .settings-fullscreen-window {\n  \n\n  box-shadow: none !important;\n  border: none !important;\n}\n\n  .settings-fullscreen-window .k-window-titlebar {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 12px 16px;\n}\n\n  .settings-fullscreen-window .k-window-title {\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n  .settings-fullscreen-window .k-window-titlebar-actions {\n  gap: 4px;\n}\n\n  .settings-fullscreen-window .k-window-titlebar-action {\n  width: 32px;\n  height: 32px;\n  border-radius: 6px;\n}\n\n  .settings-fullscreen-window .k-window-titlebar-action:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n  .settings-fullscreen-window .k-window-content {\n  padding: 0;\n  overflow: auto;\n  background: var(--mj-bg-page);\n}\n\n\n\n  .settings-fullscreen-window .k-window-titlebar-action[title=\"Minimize\"], \n  .settings-fullscreen-window .k-window-titlebar-action[title=\"Maximize\"], \n  .settings-fullscreen-window .k-window-titlebar-action .k-i-window-minimize, \n  .settings-fullscreen-window .k-window-titlebar-action .k-i-window-maximize, \n  .settings-fullscreen-window .k-window-titlebar-action .k-i-window {\n  display: none !important;\n}\n\n\n\n\n\n.shell-search-bar[_ngcontent-%COMP%] {\n    flex: 0 1 420px;\n    min-width: 200px;\n    max-width: 520px;\n    margin: 0 12px;\n    position: relative;\n    z-index: 99999;\n}\n@media (max-width: 768px) {\n    .shell-search-bar[_ngcontent-%COMP%] { display: none; }\n}\n\n\n\n\n\n\n.search-popup-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: 9999;\n  animation: _ngcontent-%COMP%_fadeIn 0.15s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.search-popup[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 60px; \n\n  right: 16px;\n  width: 480px;\n  max-width: calc(100vw - 32px);\n  background: var(--mj-bg-surface-elevated);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-xl);\n  z-index: 10000;\n  opacity: 0;\n  transform: translateY(-10px);\n  pointer-events: none;\n  transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.search-popup.open[_ngcontent-%COMP%] {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: all;\n}\n\n.search-popup-content[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px;\n}\n\n.search-entity-dropdown[_ngcontent-%COMP%] {\n  min-width: 140px;\n  max-width: 180px;\n  flex-shrink: 0;\n}\n\n.search-input[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  height: 40px;\n  padding: 8px 12px;\n  font-size: 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  outline: none;\n  display: block !important;\n  box-sizing: border-box;\n}\n\n.search-input[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.search-submit-btn[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\n  border: none;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  transition: background 0.15s;\n  flex-shrink: 0;\n}\n\n.search-submit-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n}\n\n.search-submit-btn[_ngcontent-%COMP%]:active {\n  background: var(--mj-brand-primary-hover);\n}\n\n\n\n.notification-badge-mobile[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  font-size: 11px;\n  font-weight: 600;\n  border-radius: 9px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n}\n\n\n\n@media (max-width: 768px) {\n  .search-popup[_ngcontent-%COMP%] {\n    top: 60px;\n    left: 16px;\n    right: 16px;\n    width: auto;\n    max-width: none;\n  }\n\n  .search-popup-content[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n  }\n\n  .search-entity-dropdown[_ngcontent-%COMP%] {\n    width: 100%;\n  }\n\n  .search-input[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n  }\n}\n\n\n\n\n\n.pin-progress-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-text-primary) 40%, transparent);\n  z-index: 100000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  animation: _ngcontent-%COMP%_pinBackdropIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_pinBackdropIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.pin-progress-modal[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-xl);\n  padding: 28px 40px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  box-shadow: 0 16px 48px color-mix(in srgb, var(--mj-text-primary) 30%, transparent);\n  animation: _ngcontent-%COMP%_pinModalIn 0.25s ease;\n}\n\n@keyframes _ngcontent-%COMP%_pinModalIn {\n  from { opacity: 0; transform: scale(0.9) translateY(8px); }\n  to { opacity: 1; transform: scale(1) translateY(0); }\n}\n\n.pin-progress-text[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-secondary);\n  white-space: nowrap;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ShellComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-shell', template: "<div class=\"shell-container\" [class.hidden]=\"loading\" [class.tabs-visible]=\"tabBarVisible\">\n  <!-- Header -->\n  <header class=\"shell-header\">\n    <!-- MJ Logo -->\n    <div class=\"mj-logo\" title=\"MemberJunction\"></div>\n\n    <!-- Mobile Hamburger Button -->\n    <button class=\"hamburger-btn\" (click)=\"toggleMobileNav()\" title=\"Menu\">\n      <i class=\"fa-solid fa-bars\"></i>\n    </button>\n\n    <!-- Nav Bar Apps: Left of App Switcher -->\n    @if (leftOfSwitcherApps.length > 0) {\n      <div class=\"nav-bar-apps left-of-switcher\">\n        @for (app of leftOfSwitcherApps; track app) {\n          <button\n            class=\"nav-bar-app-btn\"\n            [class.active]=\"IsActiveApp(app)\"\n            [title]=\"app.Name\"\n            [style.--app-color]=\"app.GetColor()\"\n            (click)=\"onNavBarAppClick(app, $event)\"\n            (dblclick)=\"onNavBarAppDblClick(app, $event)\">\n            <i [class]=\"app.Icon\"></i>\n          </button>\n        }\n      </div>\n    }\n\n    <!-- App Switcher -->\n    <mj-app-switcher\n      [activeApp]=\"activeApp\"\n      [isViewingSystemTab]=\"isViewingSystemTab\"\n      [loadingAppId]=\"loadingAppId\"\n      (appSelected)=\"onAppSwitch($event)\">\n    </mj-app-switcher>\n\n    <!-- App Navigation (desktop only) -->\n    @if (activeApp) {\n      <mj-app-nav\n        class=\"desktop-nav\"\n        [app]=\"activeApp\"\n        (navItemClick)=\"onNavItemClick($event)\"\n        (navItemDismiss)=\"onNavItemDismiss($event)\">\n      </mj-app-nav>\n    }\n\n    <!-- Universal Search Bar -->\n    @if (ShowSearchBar) {\n      <div class=\"shell-search-bar desktop-only\">\n        <mj-search-composite\n          #shellSearchComposite\n          Placeholder=\"Search everything...\"\n          [ShowShortcutHint]=\"true\"\n          [EnablePreview]=\"ShowSearchPreview\"\n          [EnableRecent]=\"true\"\n          [MaxPreviewResults]=\"8\"\n          (ResultSelected)=\"OnSearchResultSelected($event)\"\n          (SearchSubmitted)=\"OnSearchSubmitted($event)\"\n          (SeeAllRequested)=\"OnSeeAllSearch($event)\">\n        </mj-search-composite>\n      </div>\n    }\n    <!-- Spacer -->\n    <div class=\"spacer\"></div>\n    <!-- Actions (notifications, user menu) -->\n    <div class=\"header-actions\">\n      <button class=\"icon-btn desktop-only notification-btn\" title=\"Notifications\" (click)=\"showNotifications()\">\n        <i class=\"fa-solid fa-bell\"></i>\n        @if (unreadNotificationCount > 0) {\n          <span class=\"notification-badge\">\n            {{ unreadNotificationCount > 99 ? '99+' : unreadNotificationCount }}\n          </span>\n        }\n      </button>\n\n      <!-- Nav Bar Apps: Left of User Menu -->\n      @if (leftOfUserMenuApps.length > 0) {\n        <div class=\"nav-bar-apps left-of-user-menu\">\n          @for (app of leftOfUserMenuApps; track app) {\n            <button\n              class=\"nav-bar-app-btn\"\n              [class.active]=\"IsActiveApp(app)\"\n              [title]=\"app.Name\"\n              [style.--app-color]=\"app.GetColor()\"\n              (click)=\"onNavBarAppClick(app, $event)\"\n              (dblclick)=\"onNavBarAppDblClick(app, $event)\">\n              <i [class]=\"app.Icon\"></i>\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"user-menu\">\n        <button class=\"avatar-btn\" (click)=\"toggleUserMenu($event)\">\n          @if (userImageURL) {\n            <img [src]=\"userImageURL\" alt=\"User avatar\" class=\"avatar-img\" />\n          } @else {\n            <div class=\"icon-fallback\">\n              <i [class]=\"userIconClass || 'fa-solid fa-user'\"></i>\n            </div>\n          }\n        </button>\n        <!-- User Context Menu (Dynamic) -->\n        @if (userMenuVisible) {\n          <div class=\"user-context-menu\"\n            [class.menu-fade]=\"getUserMenuOptions()?.animationStyle === 'fade'\"\n            [class.menu-slide]=\"getUserMenuOptions()?.animationStyle === 'slide'\">\n            <!-- User Header -->\n            @if (getUserMenuOptions()?.showUserName) {\n              <div class=\"user-menu-header\">\n                <div class=\"user-info\">\n                  <span class=\"user-name\">{{ getUserDisplayInfo()?.name || userName }}</span>\n                  @if (getUserMenuOptions()?.showUserEmail && getUserDisplayInfo()?.email) {\n                    <span class=\"user-email\">\n                      {{ getUserDisplayInfo()?.email }}\n                    </span>\n                  }\n                  @if (getUserDisplayInfo()?.subtitle) {\n                    <span class=\"user-subtitle\">{{ getUserDisplayInfo()?.subtitle }}</span>\n                  }\n                </div>\n              </div>\n              <div class=\"user-menu-divider\"></div>\n            }\n            <!-- Dynamic Menu Items -->\n            @for (element of userMenuElements; track element) {\n              <!-- Divider -->\n              @if (isMenuDivider(element)) {\n                <div class=\"user-menu-divider\"></div>\n              }\n              <!-- Menu Item -->\n              @if (!isMenuDivider(element)) {\n                @if (asMenuItem(element); as item) {\n                  @if (item.id === 'toggle-theme') {\n                    <div class=\"user-menu-item theme-toggle-item\"\n                      [title]=\"item.tooltip || ''\"\n                      (click)=\"onUserMenuItemClick(item.id)\">\n                      <i [class]=\"item.icon\"></i>\n                      <span class=\"menu-label\">{{ item.label }}</span>\n                      <div class=\"theme-toggle-track\" [class.dark]=\"IsDarkMode\">\n                        <div class=\"theme-toggle-thumb\">\n                          <i [class]=\"IsDarkMode ? 'fa-solid fa-moon' : 'fa-solid fa-sun'\" class=\"theme-toggle-icon\"></i>\n                        </div>\n                      </div>\n                    </div>\n                  } @else {\n                    <div class=\"user-menu-item\"\n                      [class.disabled]=\"!item.enabled\"\n                      [class.danger]=\"item.cssClass === 'danger'\"\n                      [style.color]=\"item.color || null\"\n                      [title]=\"item.tooltip || ''\"\n                      (click)=\"item.enabled && onUserMenuItemClick(item.id)\">\n                      <i [class]=\"item.icon\"></i>\n                      <span class=\"menu-label\">{{ item.label }}</span>\n                      @if (item.shortcut) {\n                        <span class=\"menu-shortcut\">{{ item.shortcut }}</span>\n                      }\n                    </div>\n                  }\n                }\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </header>\n\n  <!-- Search Popup -->\n  @if (isSearchOpen) {\n    <div class=\"search-popup-overlay\" (click)=\"closeSearch()\"></div>\n  }\n  <div class=\"search-popup\" [class.open]=\"isSearchOpen\">\n    <div class=\"search-popup-content\" (click)=\"$event.stopPropagation()\">\n      <mj-dropdown\n        [Data]=\"searchableEntities\"\n        TextField=\"Name\"\n        ValueField=\"ID\"\n        class=\"search-entity-dropdown\"\n        [(ngModel)]=\"selectedEntity\">\n      </mj-dropdown>\n      <input\n        type=\"text\"\n        #searchInput\n        placeholder=\"Search...\"\n        class=\"mj-input search-input\"\n        (keydown.enter)=\"onSearch($event)\"\n        />\n      <button class=\"search-submit-btn\" (click)=\"onSearch($event)\" title=\"Search\">\n        <i class=\"fa-solid fa-search\"></i>\n      </button>\n    </div>\n  </div>\n\n  <!-- Mobile Navigation Drawer -->\n  @if (mobileNavOpen) {\n    <div class=\"mobile-nav-overlay\" (click)=\"closeMobileNav()\"></div>\n  }\n  <div class=\"mobile-nav-drawer\" [class.open]=\"mobileNavOpen\">\n    <div class=\"mobile-nav-header\">\n      <span>Navigation</span>\n      <button class=\"close-btn\" (click)=\"closeMobileNav()\">\n        <i class=\"fa-solid fa-xmark\"></i>\n      </button>\n    </div>\n    @if (activeApp) {\n      <div class=\"mobile-nav-content\">\n        <div class=\"mobile-nav-section-title\">{{ activeApp.Name }}</div>\n        <mj-app-nav\n          [app]=\"activeApp\"\n          (navItemClick)=\"onNavItemClick($event)\"\n          (navItemDismiss)=\"onNavItemDismiss($event)\">\n        </mj-app-nav>\n      </div>\n    }\n    <div class=\"mobile-nav-footer\">\n      <button class=\"mobile-nav-action\" title=\"Search\" (click)=\"toggleSearch(); closeMobileNav()\">\n        <i class=\"fa-solid fa-search\"></i>\n        <span>Search</span>\n      </button>\n      <button class=\"mobile-nav-action\" title=\"Notifications\" (click)=\"showNotifications(); closeMobileNav()\">\n        <i class=\"fa-solid fa-bell\"></i>\n        <span>Notifications</span>\n        @if (unreadNotificationCount > 0) {\n          <span class=\"notification-badge-mobile\">\n            {{ unreadNotificationCount > 99 ? '99+' : unreadNotificationCount }}\n          </span>\n        }\n      </button>\n    </div>\n  </div>\n\n  <!-- Tab Container - with dynamic tab bar visibility -->\n  <mj-tab-container\n    [class.hide-tab-bar]=\"!tabBarVisible\"\n    (firstResourceLoadComplete)=\"onFirstResourceLoadComplete()\"\n    (layoutInitError)=\"handleLayoutError()\">\n  </mj-tab-container>\n</div>\n\n<!-- Loading State -->\n@if (loading) {\n  <div class=\"shell-loading\">\n    <mj-loading\n      [text]=\"currentLoadingText\"\n      [textColor]=\"currentLoadingTextColor\"\n      [logoColor]=\"currentLoadingColor\"\n      [logoGradient]=\"currentLoadingGradient\"\n      [animation]=\"currentLoadingAnimation\"\n      size=\"large\">\n    </mj-loading>\n    @if (ShowResetOption) {\n      <div class=\"loading-reset-panel\">\n        <p class=\"loading-reset-message\">\n          <i class=\"fa-regular fa-clock\"></i>\n          Taking longer than expected\n        </p>\n        <p class=\"loading-reset-hint\">\n          This can happen after updates or due to cached data issues.\n        </p>\n        <button class=\"loading-reset-btn\" (click)=\"ResetApplication()\">\n          <i class=\"fa-solid fa-arrows-rotate\"></i>\n          Reset\n        </button>\n      </div>\n    }\n  </div>\n}\n\n<!-- App Access Error Dialog -->\n<mj-app-access-dialog\n  #appAccessDialog\n  (result)=\"onAppAccessDialogResult($event)\">\n</mj-app-access-dialog>\n\n<!-- Command Palette -->\n<mj-command-palette (AppSelected)=\"onAppSwitch($event)\"></mj-command-palette>\n\n<!-- Pin Progress Overlay -->\n@if (PinProgressVisible) {\n  <div class=\"pin-progress-backdrop\">\n    <div class=\"pin-progress-modal\">\n      <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n      <span class=\"pin-progress-text\">{{ PinProgressText }}</span>\n    </div>\n  </div>\n}\n", styles: [":host {\n  display: block;\n  height: 100vh;\n  width: 100%;\n  overflow: hidden;\n}\n\n/* MJ Logo - uses design token for theme switching & white-labeling */\n.mj-logo {\n  width: 32px;\n  height: 18px;\n  background-image: var(--mj-logo-mark);\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n  flex-shrink: 0;\n}\n\n.shell-container {\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n  width: 100%;\n  overflow: hidden;\n}\n\n/* Hide shell container while loading - allows tab container to render and load\n   first resource in background while shell loading indicator is visible */\n.shell-container.hidden {\n  visibility: hidden;\n  position: absolute;\n  pointer-events: none;\n}\n\nmj-tab-container {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  transition: all 0.2s ease-in-out;\n}\n\n/* Hide Golden Layout tab headers when only one tab */\nmj-tab-container.hide-tab-bar ::ng-deep .lm_header {\n  display: none;\n}\n\n/* Show tab headers when multiple tabs */\nmj-tab-container:not(.hide-tab-bar) ::ng-deep .lm_header {\n  opacity: 1;\n  max-height: 40px;\n  transition: opacity 0.2s ease-in-out, max-height 0.2s ease-in-out;\n}\n\n/* Adjust content area height when tabs hidden */\nmj-tab-container.hide-tab-bar ::ng-deep .lm_content {\n  height: 100% !important;\n}\n\n/* Ensure smooth transitions */\nmj-tab-container ::ng-deep .lm_stack {\n  transition: all 0.2s ease-in-out;\n}\n\n.shell-header {\n  height: 60px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  align-items: center;\n  padding: 0 16px;\n  gap: 16px;\n  box-shadow: var(--mj-shadow-sm);\n  flex-shrink: 0;\n  /* Creates a stacking context so children (search bar z-index: 99999, dropdown)\n     are contained within this level. Modal overlays (z-index: 1000+) sit above. */\n  position: relative;\n  z-index: 500;\n}\n\n/* Nav Bar Apps - permanent app icons in the header */\n.nav-bar-apps {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.nav-bar-apps.left-of-switcher {\n  /* No extra margin - header gap handles spacing */\n  /* This prevents the app switcher from shifting when icons are hidden */\n}\n\n.nav-bar-apps.left-of-user-menu {\n  margin-right: 8px;\n}\n\n.nav-bar-app-btn {\n  --app-color: var(--mj-text-muted);\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-secondary);\n  font-size: 18px;\n  transition: all 0.15s ease;\n  position: relative;\n}\n\n.nav-bar-app-btn:hover {\n  background: color-mix(in srgb, var(--app-color) 15%, transparent);\n  color: var(--app-color);\n}\n\n.nav-bar-app-btn.active {\n  background: color-mix(in srgb, var(--app-color) 20%, transparent);\n  color: var(--app-color);\n}\n\n.nav-bar-app-btn.active::after {\n  content: '';\n  position: absolute;\n  bottom: 6px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 16px;\n  height: 3px;\n  background: var(--app-color);\n  border-radius: 2px;\n}\n\n.nav-bar-app-btn i {\n  transition: transform 0.15s ease;\n  margin-top: 2px; /* Align with app switcher icon */\n}\n\n.nav-bar-app-btn:hover i {\n  transform: scale(1.1);\n}\n\n.spacer {\n  flex: 1;\n}\n\n.header-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.icon-btn {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  border: none;\n  background: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: 18px;\n  transition: background 0.15s;\n}\n\n.icon-btn:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n/* Notification button with badge */\n.notification-btn {\n  position: relative;\n}\n\n.notification-badge {\n  position: absolute;\n  top: 4px;\n  right: 4px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n}\n\n.user-menu {\n  position: relative;\n}\n\n.user-menu .avatar-btn {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: box-shadow 0.15s, transform 0.15s;\n  padding: 0;\n  overflow: hidden;\n}\n\n.user-menu .avatar-btn:hover {\n  transform: scale(1.05);\n}\n\n/* Icon fallback styling - shows gray circle with icon */\n.user-menu .avatar-btn .icon-fallback {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  border: 2px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-hover);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: border-color 0.15s;\n}\n\n.user-menu .avatar-btn:hover .icon-fallback {\n  border-color: var(--mj-brand-primary);\n}\n\n.user-menu .avatar-btn .icon-fallback i {\n  color: var(--mj-text-muted);\n  font-size: 16px;\n}\n\n/* Avatar image - replaces the gray circle entirely */\n.user-menu .avatar-btn .avatar-img {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  object-fit: cover;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n.user-menu .avatar-btn:hover .avatar-img {\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);\n}\n\n/* User Menu Header */\n.user-menu-header {\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.user-menu-header .user-info {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.user-menu-header .user-name {\n  font-weight: 600;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n}\n\n.user-menu-header .user-email {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.user-menu-header .user-subtitle {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n/* User Context Menu */\n.user-context-menu {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 8px;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 180px;\n  z-index: 10000;\n  overflow: hidden;\n}\n\n.user-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  cursor: pointer;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  transition: background 0.15s;\n}\n\n.user-menu-item i {\n  width: 18px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n}\n\n.user-menu-item:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.user-menu-item.danger {\n  color: var(--mj-status-error);\n}\n\n.user-menu-item.danger i {\n  color: var(--mj-status-error);\n}\n\n.user-menu-item.danger:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface-elevated));\n}\n\n.user-menu-divider {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 0;\n}\n\n/* Menu item disabled state */\n.user-menu-item.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.user-menu-item.disabled:hover {\n  background: transparent;\n}\n\n/* Theme Toggle Switch */\n.theme-toggle-item {\n  cursor: pointer;\n}\n\n.theme-toggle-track {\n  position: relative;\n  width: 40px;\n  height: 22px;\n  border-radius: 11px;\n  background: var(--mj-bg-surface-active);\n  margin-left: auto;\n  transition: background 0.2s ease;\n  flex-shrink: 0;\n}\n\n.theme-toggle-track.dark {\n  background: var(--mj-brand-primary);\n}\n\n.theme-toggle-thumb {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform 0.2s ease;\n}\n\n.theme-toggle-track.dark .theme-toggle-thumb {\n  transform: translateX(18px);\n}\n\n.theme-toggle-icon {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n.theme-toggle-track.dark .theme-toggle-icon {\n  color: var(--mj-text-inverse);\n}\n\n/* Menu shortcut hint */\n.user-menu-item .menu-shortcut {\n  margin-left: auto;\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  font-family: monospace;\n}\n\n/* Menu animations */\n.user-context-menu.menu-fade {\n  animation: menuFadeIn 0.15s ease-out;\n}\n\n.user-context-menu.menu-slide {\n  animation: menuSlideIn 0.2s ease-out;\n}\n\n@keyframes menuFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes menuSlideIn {\n  from {\n    opacity: 0;\n    transform: translateY(-16px) scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n.shell-loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100vh;\n  padding-bottom: 15vh;\n  background: var(--mj-bg-page);\n}\n\n/* Loading Recovery Reset Panel */\n.loading-reset-panel {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--mj-space-3);\n  margin-top: var(--mj-space-10);\n  padding: var(--mj-space-8);\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  box-shadow: var(--mj-shadow-md);\n  max-width: 420px;\n  animation: resetPanelFadeIn 0.4s ease-out;\n}\n\n.loading-reset-message {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  margin: 0;\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n.loading-reset-message i {\n  font-size: var(--mj-text-lg);\n  color: var(--mj-status-warning);\n}\n\n.loading-reset-hint {\n  margin: 0;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n  text-align: center;\n  line-height: var(--mj-leading-relaxed);\n}\n\n.loading-reset-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  margin-top: var(--mj-space-3);\n  padding: var(--mj-space-3) var(--mj-space-6);\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-medium);\n  font-family: var(--mj-font-family);\n  color: var(--mj-text-inverse);\n  background: var(--mj-brand-primary);\n  border: 1px solid var(--mj-brand-primary);\n  border-radius: var(--mj-radius-md);\n  cursor: pointer;\n  transition: var(--mj-transition-colors);\n}\n\n.loading-reset-btn:hover {\n  background: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary-hover);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.loading-reset-btn:active {\n  background: var(--mj-brand-primary-active);\n  color: var(--mj-text-inverse);\n  transform: scale(0.98);\n}\n\n.loading-reset-btn i {\n  font-size: var(--mj-text-sm);\n}\n\n@keyframes resetPanelFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Hamburger button - hidden on desktop */\n.hamburger-btn {\n  display: none;\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-secondary);\n  font-size: 20px;\n  transition: background 0.15s;\n}\n.hamburger-btn:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n/* Mobile Navigation Overlay */\n.mobile-nav-overlay {\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 9998;\n}\n\n/* Mobile Navigation Drawer */\n.mobile-nav-drawer {\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 280px;\n  max-width: 85vw;\n  background: var(--mj-bg-surface);\n  box-shadow: var(--mj-shadow-xl);\n  z-index: 9999;\n  flex-direction: column;\n  transform: translateX(-100%);\n  transition: transform 0.3s ease;\n}\n.mobile-nav-drawer.open {\n  transform: translateX(0);\n}\n\n.mobile-nav-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n.mobile-nav-header span {\n  font-weight: 600;\n  font-size: 16px;\n  color: var(--mj-text-primary);\n}\n.mobile-nav-header .close-btn {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  border: none;\n  background: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: 18px;\n  transition: background 0.15s;\n}\n.mobile-nav-header .close-btn:hover {\n  background: var(--mj-bg-surface-active);\n}\n\n.mobile-nav-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px 0;\n}\n\n.mobile-nav-section-title {\n  padding: 8px 20px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.mobile-nav-footer {\n  border-top: 1px solid var(--mj-border-default);\n  padding: 12px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.mobile-nav-action {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  border-radius: 8px;\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n  transition: background 0.15s;\n  width: 100%;\n  text-align: left;\n}\n.mobile-nav-action:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.mobile-nav-action i {\n  font-size: 16px;\n  width: 20px;\n  text-align: center;\n}\n\n/* Mobile Responsive Styles */\n@media (max-width: 768px) {\n  .hamburger-btn {\n    display: flex;\n  }\n\n  .desktop-nav {\n    display: none !important;\n  }\n\n  .desktop-only {\n    display: none !important;\n  }\n\n  .mobile-nav-overlay {\n    display: block;\n  }\n\n  .mobile-nav-drawer {\n    display: flex;\n  }\n\n  .shell-header {\n    padding: 0 12px;\n    gap: 8px;\n  }\n}\n\n/* Settings Full-Screen Window Styles */\n::ng-deep .settings-fullscreen-window {\n  /* Remove window chrome for full-screen feel */\n  box-shadow: none !important;\n  border: none !important;\n}\n\n::ng-deep .settings-fullscreen-window .k-window-titlebar {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 12px 16px;\n}\n\n::ng-deep .settings-fullscreen-window .k-window-title {\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n::ng-deep .settings-fullscreen-window .k-window-titlebar-actions {\n  gap: 4px;\n}\n\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action {\n  width: 32px;\n  height: 32px;\n  border-radius: 6px;\n}\n\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n::ng-deep .settings-fullscreen-window .k-window-content {\n  padding: 0;\n  overflow: auto;\n  background: var(--mj-bg-page);\n}\n\n/* Hide minimize/maximize buttons - only show close */\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action[title=\"Minimize\"],\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action[title=\"Maximize\"],\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action .k-i-window-minimize,\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action .k-i-window-maximize,\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action .k-i-window {\n  display: none !important;\n}\n\n/* ========================================\n   UNIVERSAL SEARCH BAR\n   ======================================== */\n.shell-search-bar {\n    flex: 0 1 420px;\n    min-width: 200px;\n    max-width: 520px;\n    margin: 0 12px;\n    position: relative;\n    z-index: 99999;\n}\n@media (max-width: 768px) {\n    .shell-search-bar { display: none; }\n}\n\n/* ========================================\n   SEARCH POPUP\n   ======================================== */\n\n.search-popup-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: 9999;\n  animation: fadeIn 0.15s ease;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.search-popup {\n  position: fixed;\n  top: 60px; /* Below header */\n  right: 16px;\n  width: 480px;\n  max-width: calc(100vw - 32px);\n  background: var(--mj-bg-surface-elevated);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-xl);\n  z-index: 10000;\n  opacity: 0;\n  transform: translateY(-10px);\n  pointer-events: none;\n  transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.search-popup.open {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: all;\n}\n\n.search-popup-content {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px;\n}\n\n.search-entity-dropdown {\n  min-width: 140px;\n  max-width: 180px;\n  flex-shrink: 0;\n}\n\n.search-input {\n  flex: 1;\n  min-width: 0;\n  height: 40px;\n  padding: 8px 12px;\n  font-size: 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  outline: none;\n  display: block !important;\n  box-sizing: border-box;\n}\n\n.search-input:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.search-submit-btn {\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\n  border: none;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  transition: background 0.15s;\n  flex-shrink: 0;\n}\n\n.search-submit-btn:hover {\n  background: var(--mj-brand-primary-hover);\n}\n\n.search-submit-btn:active {\n  background: var(--mj-brand-primary-hover);\n}\n\n/* Mobile notification badge */\n.notification-badge-mobile {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  font-size: 11px;\n  font-weight: 600;\n  border-radius: 9px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n}\n\n/* Mobile-specific search popup adjustments */\n@media (max-width: 768px) {\n  .search-popup {\n    top: 60px;\n    left: 16px;\n    right: 16px;\n    width: auto;\n    max-width: none;\n  }\n\n  .search-popup-content {\n    flex-wrap: wrap;\n  }\n\n  .search-entity-dropdown {\n    width: 100%;\n  }\n\n  .search-input {\n    flex: 1;\n    min-width: 0;\n  }\n}\n\n/* ========================================\n   PIN PROGRESS OVERLAY\n   ======================================== */\n.pin-progress-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-text-primary) 40%, transparent);\n  z-index: 100000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  animation: pinBackdropIn 0.2s ease;\n}\n\n@keyframes pinBackdropIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.pin-progress-modal {\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-xl);\n  padding: 28px 40px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  box-shadow: 0 16px 48px color-mix(in srgb, var(--mj-text-primary) 30%, transparent);\n  animation: pinModalIn 0.25s ease;\n}\n\n@keyframes pinModalIn {\n  from { opacity: 0; transform: scale(0.9) translateY(8px); }\n  to { opacity: 1; transform: scale(1) translateY(0); }\n}\n\n.pin-progress-text {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-secondary);\n  white-space: nowrap;\n}"] }]
+        args: [{ standalone: false, selector: 'mj-shell', template: "<div class=\"shell-container\" [class.hidden]=\"loading\" [class.tabs-visible]=\"tabBarVisible\">\n  <!-- Header -->\n  <header class=\"shell-header\">\n    <!-- MJ Logo -->\n    <div class=\"mj-logo\" title=\"MemberJunction\"></div>\n\n    <!-- Mobile Hamburger Button -->\n    <button class=\"hamburger-btn\" (click)=\"toggleMobileNav()\" title=\"Menu\">\n      <i class=\"fa-solid fa-bars\"></i>\n    </button>\n\n    <!-- Nav Bar Apps: Left of App Switcher -->\n    @if (leftOfSwitcherApps.length > 0) {\n      <div class=\"nav-bar-apps left-of-switcher\">\n        @for (app of leftOfSwitcherApps; track app) {\n          <button\n            class=\"nav-bar-app-btn\"\n            [class.active]=\"IsActiveApp(app)\"\n            [title]=\"app.Name\"\n            [style.--app-color]=\"app.GetColor()\"\n            (click)=\"onNavBarAppClick(app, $event)\"\n            (dblclick)=\"onNavBarAppDblClick(app, $event)\">\n            <i [class]=\"app.Icon\"></i>\n          </button>\n        }\n      </div>\n    }\n\n    <!-- App Switcher -->\n    <mj-app-switcher\n      [activeApp]=\"activeApp\"\n      [isViewingSystemTab]=\"isViewingSystemTab\"\n      [loadingAppId]=\"loadingAppId\"\n      (appSelected)=\"onAppSwitch($event)\">\n    </mj-app-switcher>\n\n    <!-- App Navigation (desktop only) -->\n    @if (activeApp) {\n      <mj-app-nav\n        class=\"desktop-nav\"\n        [app]=\"activeApp\"\n        (navItemClick)=\"onNavItemClick($event)\"\n        (navItemDismiss)=\"onNavItemDismiss($event)\">\n      </mj-app-nav>\n    }\n\n    <!-- Universal Search Bar -->\n    @if (ShowSearchBar) {\n      <div class=\"shell-search-bar desktop-only\">\n        <mj-search-composite\n          #shellSearchComposite\n          Placeholder=\"Search everything...\"\n          [ShowShortcutHint]=\"true\"\n          [EnablePreview]=\"ShowSearchPreview\"\n          [EnableRecent]=\"true\"\n          [MaxPreviewResults]=\"8\"\n          (ResultSelected)=\"OnSearchResultSelected($event)\"\n          (SearchSubmitted)=\"OnSearchSubmitted($event)\"\n          (SeeAllRequested)=\"OnSeeAllSearch($event)\">\n        </mj-search-composite>\n      </div>\n    }\n    <!-- Spacer -->\n    <div class=\"spacer\"></div>\n    <!-- Actions (notifications, user menu) -->\n    <div class=\"header-actions\">\n      <button class=\"icon-btn desktop-only notification-btn\" title=\"Notifications\" (click)=\"showNotifications()\">\n        <i class=\"fa-solid fa-bell\"></i>\n        @if (unreadNotificationCount > 0) {\n          <span class=\"notification-badge\">\n            {{ unreadNotificationCount > 99 ? '99+' : unreadNotificationCount }}\n          </span>\n        }\n      </button>\n\n      <!-- Nav Bar Apps: Left of User Menu -->\n      @if (leftOfUserMenuApps.length > 0) {\n        <div class=\"nav-bar-apps left-of-user-menu\">\n          @for (app of leftOfUserMenuApps; track app) {\n            <button\n              class=\"nav-bar-app-btn\"\n              [class.active]=\"IsActiveApp(app)\"\n              [title]=\"app.Name\"\n              [style.--app-color]=\"app.GetColor()\"\n              (click)=\"onNavBarAppClick(app, $event)\"\n              (dblclick)=\"onNavBarAppDblClick(app, $event)\">\n              <i [class]=\"app.Icon\"></i>\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"user-menu\">\n        <button class=\"avatar-btn\" (click)=\"toggleUserMenu($event)\">\n          @if (userImageURL) {\n            <img [src]=\"userImageURL\" alt=\"User avatar\" class=\"avatar-img\" />\n          } @else {\n            <div class=\"icon-fallback\">\n              <i [class]=\"userIconClass || 'fa-solid fa-user'\"></i>\n            </div>\n          }\n        </button>\n        <!-- User Context Menu (Dynamic) -->\n        @if (userMenuVisible) {\n          <div class=\"user-context-menu\"\n            [class.menu-fade]=\"getUserMenuOptions()?.animationStyle === 'fade'\"\n            [class.menu-slide]=\"getUserMenuOptions()?.animationStyle === 'slide'\">\n            <!-- User Header -->\n            @if (getUserMenuOptions()?.showUserName) {\n              <div class=\"user-menu-header\">\n                <div class=\"user-info\">\n                  <span class=\"user-name\">{{ getUserDisplayInfo()?.name || userName }}</span>\n                  @if (getUserMenuOptions()?.showUserEmail && getUserDisplayInfo()?.email) {\n                    <span class=\"user-email\">\n                      {{ getUserDisplayInfo()?.email }}\n                    </span>\n                  }\n                  @if (getUserDisplayInfo()?.subtitle) {\n                    <span class=\"user-subtitle\">{{ getUserDisplayInfo()?.subtitle }}</span>\n                  }\n                </div>\n              </div>\n              <div class=\"user-menu-divider\"></div>\n            }\n            <!-- Dynamic Menu Items -->\n            @for (element of userMenuElements; track element) {\n              <!-- Divider -->\n              @if (isMenuDivider(element)) {\n                <div class=\"user-menu-divider\"></div>\n              }\n              <!-- Menu Item -->\n              @if (!isMenuDivider(element)) {\n                @if (asMenuItem(element); as item) {\n                  @if (item.id === 'toggle-theme') {\n                    <div class=\"user-menu-item theme-toggle-item\"\n                      [title]=\"item.tooltip || ''\"\n                      (click)=\"onUserMenuItemClick(item.id)\">\n                      <i [class]=\"item.icon\"></i>\n                      <span class=\"menu-label\">{{ item.label }}</span>\n                      <div class=\"theme-toggle-track\" [class.dark]=\"IsDarkMode\">\n                        <div class=\"theme-toggle-thumb\">\n                          <i [class]=\"IsDarkMode ? 'fa-solid fa-moon' : 'fa-solid fa-sun'\" class=\"theme-toggle-icon\"></i>\n                        </div>\n                      </div>\n                    </div>\n                  } @else {\n                    <div class=\"user-menu-item\"\n                      [class.disabled]=\"!item.enabled\"\n                      [class.danger]=\"item.cssClass === 'danger'\"\n                      [style.color]=\"item.color || null\"\n                      [title]=\"item.tooltip || ''\"\n                      (click)=\"item.enabled && onUserMenuItemClick(item.id)\">\n                      <i [class]=\"item.icon\"></i>\n                      <span class=\"menu-label\">{{ item.label }}</span>\n                      @if (item.shortcut) {\n                        <span class=\"menu-shortcut\">{{ item.shortcut }}</span>\n                      }\n                    </div>\n                  }\n                }\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </header>\n\n  <!-- Search Popup -->\n  @if (isSearchOpen) {\n    <div class=\"search-popup-overlay\" (click)=\"closeSearch()\"></div>\n  }\n  <div class=\"search-popup\" [class.open]=\"isSearchOpen\">\n    <div class=\"search-popup-content\" (click)=\"$event.stopPropagation()\">\n      <mj-dropdown\n        [Data]=\"searchableEntities\"\n        TextField=\"Name\"\n        ValueField=\"ID\"\n        class=\"search-entity-dropdown\"\n        [(ngModel)]=\"selectedEntity\">\n      </mj-dropdown>\n      <input\n        type=\"text\"\n        #searchInput\n        placeholder=\"Search...\"\n        class=\"mj-input search-input\"\n        (keydown.enter)=\"onSearch($event)\"\n        />\n      <button class=\"search-submit-btn\" (click)=\"onSearch($event)\" title=\"Search\">\n        <i class=\"fa-solid fa-search\"></i>\n      </button>\n    </div>\n  </div>\n\n  <!-- Mobile Navigation Drawer -->\n  @if (mobileNavOpen) {\n    <div class=\"mobile-nav-overlay\" (click)=\"closeMobileNav()\"></div>\n  }\n  <div class=\"mobile-nav-drawer\" [class.open]=\"mobileNavOpen\">\n    <div class=\"mobile-nav-header\">\n      <span>Navigation</span>\n      <button class=\"close-btn\" (click)=\"closeMobileNav()\">\n        <i class=\"fa-solid fa-xmark\"></i>\n      </button>\n    </div>\n    @if (activeApp) {\n      <div class=\"mobile-nav-content\">\n        <div class=\"mobile-nav-section-title\">{{ activeApp.Name }}</div>\n        <mj-app-nav\n          [app]=\"activeApp\"\n          (navItemClick)=\"onNavItemClick($event)\"\n          (navItemDismiss)=\"onNavItemDismiss($event)\">\n        </mj-app-nav>\n      </div>\n    }\n    <div class=\"mobile-nav-footer\">\n      <button class=\"mobile-nav-action\" title=\"Search\" (click)=\"toggleSearch(); closeMobileNav()\">\n        <i class=\"fa-solid fa-search\"></i>\n        <span>Search</span>\n      </button>\n      <button class=\"mobile-nav-action\" title=\"Notifications\" (click)=\"showNotifications(); closeMobileNav()\">\n        <i class=\"fa-solid fa-bell\"></i>\n        <span>Notifications</span>\n        @if (unreadNotificationCount > 0) {\n          <span class=\"notification-badge-mobile\">\n            {{ unreadNotificationCount > 99 ? '99+' : unreadNotificationCount }}\n          </span>\n        }\n      </button>\n    </div>\n  </div>\n\n  <!-- Tab Container - with dynamic tab bar visibility -->\n  <mj-tab-container\n    [class.hide-tab-bar]=\"!tabBarVisible\"\n    (firstResourceLoadComplete)=\"onFirstResourceLoadComplete()\"\n    (layoutInitError)=\"handleLayoutError()\">\n  </mj-tab-container>\n</div>\n\n<!-- Loading State -->\n@if (loading) {\n  <div class=\"shell-loading\">\n    <mj-loading\n      [text]=\"currentLoadingText\"\n      [textColor]=\"currentLoadingTextColor\"\n      [logoColor]=\"currentLoadingColor\"\n      [logoGradient]=\"currentLoadingGradient\"\n      [animation]=\"currentLoadingAnimation\"\n      size=\"large\">\n    </mj-loading>\n    @if (ShowResetOption) {\n      <div class=\"loading-reset-panel\">\n        <p class=\"loading-reset-message\">\n          <i class=\"fa-regular fa-clock\"></i>\n          Taking longer than expected\n        </p>\n        <p class=\"loading-reset-hint\">\n          This can happen after updates or due to cached data issues.\n        </p>\n        <button class=\"loading-reset-btn\" (click)=\"ResetApplication()\">\n          <i class=\"fa-solid fa-arrows-rotate\"></i>\n          Reset\n        </button>\n      </div>\n    }\n  </div>\n}\n\n<!-- App Access Error Dialog -->\n<mj-app-access-dialog\n  #appAccessDialog\n  (result)=\"onAppAccessDialogResult($event)\">\n</mj-app-access-dialog>\n\n<!-- Command Palette -->\n<mj-command-palette (AppSelected)=\"onAppSwitch($event)\"></mj-command-palette>\n\n<!-- Pin Progress Overlay -->\n@if (PinProgressVisible) {\n  <div class=\"pin-progress-backdrop\">\n    <div class=\"pin-progress-modal\">\n      <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n      <span class=\"pin-progress-text\">{{ PinProgressText }}</span>\n    </div>\n  </div>\n}\n", styles: [":host {\n  display: block;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n/* MJ Logo - uses design token for theme switching & white-labeling */\n.mj-logo {\n  width: 32px;\n  height: 18px;\n  background-image: var(--mj-logo-mark);\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n  flex-shrink: 0;\n}\n\n.shell-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n/* Hide shell container while loading - allows tab container to render and load\n   first resource in background while shell loading indicator is visible */\n.shell-container.hidden {\n  visibility: hidden;\n  position: absolute;\n  pointer-events: none;\n}\n\nmj-tab-container {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  transition: all 0.2s ease-in-out;\n}\n\n/* Hide Golden Layout tab headers when only one tab */\nmj-tab-container.hide-tab-bar ::ng-deep .lm_header {\n  display: none;\n}\n\n/* Show tab headers when multiple tabs */\nmj-tab-container:not(.hide-tab-bar) ::ng-deep .lm_header {\n  opacity: 1;\n  max-height: 40px;\n  transition: opacity 0.2s ease-in-out, max-height 0.2s ease-in-out;\n}\n\n/* Adjust content area height when tabs hidden */\nmj-tab-container.hide-tab-bar ::ng-deep .lm_content {\n  height: 100% !important;\n}\n\n/* Ensure smooth transitions */\nmj-tab-container ::ng-deep .lm_stack {\n  transition: all 0.2s ease-in-out;\n}\n\n.shell-header {\n  height: 60px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  align-items: center;\n  padding: 0 16px;\n  gap: 16px;\n  box-shadow: var(--mj-shadow-sm);\n  flex-shrink: 0;\n  /* Creates a stacking context so children (search bar z-index: 99999, dropdown)\n     are contained within this level. Modal overlays (z-index: 1000+) sit above. */\n  position: relative;\n  z-index: 500;\n}\n\n/* Nav Bar Apps - permanent app icons in the header */\n.nav-bar-apps {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.nav-bar-apps.left-of-switcher {\n  /* No extra margin - header gap handles spacing */\n  /* This prevents the app switcher from shifting when icons are hidden */\n}\n\n.nav-bar-apps.left-of-user-menu {\n  margin-right: 8px;\n}\n\n.nav-bar-app-btn {\n  --app-color: var(--mj-text-muted);\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-secondary);\n  font-size: 18px;\n  transition: all 0.15s ease;\n  position: relative;\n}\n\n.nav-bar-app-btn:hover {\n  background: color-mix(in srgb, var(--app-color) 15%, transparent);\n  color: var(--app-color);\n}\n\n.nav-bar-app-btn.active {\n  background: color-mix(in srgb, var(--app-color) 20%, transparent);\n  color: var(--app-color);\n}\n\n.nav-bar-app-btn.active::after {\n  content: '';\n  position: absolute;\n  bottom: 6px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 16px;\n  height: 3px;\n  background: var(--app-color);\n  border-radius: 2px;\n}\n\n.nav-bar-app-btn i {\n  transition: transform 0.15s ease;\n  margin-top: 2px; /* Align with app switcher icon */\n}\n\n.nav-bar-app-btn:hover i {\n  transform: scale(1.1);\n}\n\n.spacer {\n  flex: 1;\n}\n\n.header-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.icon-btn {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  border: none;\n  background: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: 18px;\n  transition: background 0.15s;\n}\n\n.icon-btn:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n/* Notification button with badge */\n.notification-btn {\n  position: relative;\n}\n\n.notification-badge {\n  position: absolute;\n  top: 4px;\n  right: 4px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n}\n\n.user-menu {\n  position: relative;\n}\n\n.user-menu .avatar-btn {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: box-shadow 0.15s, transform 0.15s;\n  padding: 0;\n  overflow: hidden;\n}\n\n.user-menu .avatar-btn:hover {\n  transform: scale(1.05);\n}\n\n/* Icon fallback styling - shows gray circle with icon */\n.user-menu .avatar-btn .icon-fallback {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  border: 2px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-hover);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: border-color 0.15s;\n}\n\n.user-menu .avatar-btn:hover .icon-fallback {\n  border-color: var(--mj-brand-primary);\n}\n\n.user-menu .avatar-btn .icon-fallback i {\n  color: var(--mj-text-muted);\n  font-size: 16px;\n}\n\n/* Avatar image - replaces the gray circle entirely */\n.user-menu .avatar-btn .avatar-img {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  object-fit: cover;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n.user-menu .avatar-btn:hover .avatar-img {\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);\n}\n\n/* User Menu Header */\n.user-menu-header {\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.user-menu-header .user-info {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.user-menu-header .user-name {\n  font-weight: 600;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n}\n\n.user-menu-header .user-email {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.user-menu-header .user-subtitle {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n/* User Context Menu */\n.user-context-menu {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 8px;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 180px;\n  z-index: 10000;\n  overflow: hidden;\n}\n\n.user-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  cursor: pointer;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  transition: background 0.15s;\n}\n\n.user-menu-item i {\n  width: 18px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n}\n\n.user-menu-item:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.user-menu-item.danger {\n  color: var(--mj-status-error);\n}\n\n.user-menu-item.danger i {\n  color: var(--mj-status-error);\n}\n\n.user-menu-item.danger:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface-elevated));\n}\n\n.user-menu-divider {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 4px 0;\n}\n\n/* Menu item disabled state */\n.user-menu-item.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.user-menu-item.disabled:hover {\n  background: transparent;\n}\n\n/* Theme Toggle Switch */\n.theme-toggle-item {\n  cursor: pointer;\n}\n\n.theme-toggle-track {\n  position: relative;\n  width: 40px;\n  height: 22px;\n  border-radius: 11px;\n  background: var(--mj-bg-surface-active);\n  margin-left: auto;\n  transition: background 0.2s ease;\n  flex-shrink: 0;\n}\n\n.theme-toggle-track.dark {\n  background: var(--mj-brand-primary);\n}\n\n.theme-toggle-thumb {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform 0.2s ease;\n}\n\n.theme-toggle-track.dark .theme-toggle-thumb {\n  transform: translateX(18px);\n}\n\n.theme-toggle-icon {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n.theme-toggle-track.dark .theme-toggle-icon {\n  color: var(--mj-text-inverse);\n}\n\n/* Menu shortcut hint */\n.user-menu-item .menu-shortcut {\n  margin-left: auto;\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  font-family: monospace;\n}\n\n/* Menu animations */\n.user-context-menu.menu-fade {\n  animation: menuFadeIn 0.15s ease-out;\n}\n\n.user-context-menu.menu-slide {\n  animation: menuSlideIn 0.2s ease-out;\n}\n\n@keyframes menuFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes menuSlideIn {\n  from {\n    opacity: 0;\n    transform: translateY(-16px) scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n.shell-loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100vh;\n  padding-bottom: 15vh;\n  background: var(--mj-bg-page);\n}\n\n/* Loading Recovery Reset Panel */\n.loading-reset-panel {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--mj-space-3);\n  margin-top: var(--mj-space-10);\n  padding: var(--mj-space-8);\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  box-shadow: var(--mj-shadow-md);\n  max-width: 420px;\n  animation: resetPanelFadeIn 0.4s ease-out;\n}\n\n.loading-reset-message {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  margin: 0;\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n.loading-reset-message i {\n  font-size: var(--mj-text-lg);\n  color: var(--mj-status-warning);\n}\n\n.loading-reset-hint {\n  margin: 0;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n  text-align: center;\n  line-height: var(--mj-leading-relaxed);\n}\n\n.loading-reset-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  margin-top: var(--mj-space-3);\n  padding: var(--mj-space-3) var(--mj-space-6);\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-medium);\n  font-family: var(--mj-font-family);\n  color: var(--mj-text-inverse);\n  background: var(--mj-brand-primary);\n  border: 1px solid var(--mj-brand-primary);\n  border-radius: var(--mj-radius-md);\n  cursor: pointer;\n  transition: var(--mj-transition-colors);\n}\n\n.loading-reset-btn:hover {\n  background: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary-hover);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.loading-reset-btn:active {\n  background: var(--mj-brand-primary-active);\n  color: var(--mj-text-inverse);\n  transform: scale(0.98);\n}\n\n.loading-reset-btn i {\n  font-size: var(--mj-text-sm);\n}\n\n@keyframes resetPanelFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Hamburger button - hidden on desktop */\n.hamburger-btn {\n  display: none;\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-secondary);\n  font-size: 20px;\n  transition: background 0.15s;\n}\n.hamburger-btn:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n/* Mobile Navigation Overlay */\n.mobile-nav-overlay {\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 9998;\n}\n\n/* Mobile Navigation Drawer */\n.mobile-nav-drawer {\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 280px;\n  max-width: 85vw;\n  background: var(--mj-bg-surface);\n  box-shadow: var(--mj-shadow-xl);\n  z-index: 9999;\n  flex-direction: column;\n  transform: translateX(-100%);\n  transition: transform 0.3s ease;\n}\n.mobile-nav-drawer.open {\n  transform: translateX(0);\n}\n\n.mobile-nav-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n.mobile-nav-header span {\n  font-weight: 600;\n  font-size: 16px;\n  color: var(--mj-text-primary);\n}\n.mobile-nav-header .close-btn {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  border: none;\n  background: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: 18px;\n  transition: background 0.15s;\n}\n.mobile-nav-header .close-btn:hover {\n  background: var(--mj-bg-surface-active);\n}\n\n.mobile-nav-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px 0;\n}\n\n.mobile-nav-section-title {\n  padding: 8px 20px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.mobile-nav-footer {\n  border-top: 1px solid var(--mj-border-default);\n  padding: 12px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.mobile-nav-action {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  border-radius: 8px;\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n  transition: background 0.15s;\n  width: 100%;\n  text-align: left;\n}\n.mobile-nav-action:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.mobile-nav-action i {\n  font-size: 16px;\n  width: 20px;\n  text-align: center;\n}\n\n/* Mobile Responsive Styles */\n@media (max-width: 768px) {\n  .hamburger-btn {\n    display: flex;\n  }\n\n  .desktop-nav {\n    display: none !important;\n  }\n\n  .desktop-only {\n    display: none !important;\n  }\n\n  .mobile-nav-overlay {\n    display: block;\n  }\n\n  .mobile-nav-drawer {\n    display: flex;\n  }\n\n  .shell-header {\n    padding: 0 12px;\n    gap: 8px;\n  }\n}\n\n/* Settings Full-Screen Window Styles */\n::ng-deep .settings-fullscreen-window {\n  /* Remove window chrome for full-screen feel */\n  box-shadow: none !important;\n  border: none !important;\n}\n\n::ng-deep .settings-fullscreen-window .k-window-titlebar {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 12px 16px;\n}\n\n::ng-deep .settings-fullscreen-window .k-window-title {\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n::ng-deep .settings-fullscreen-window .k-window-titlebar-actions {\n  gap: 4px;\n}\n\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action {\n  width: 32px;\n  height: 32px;\n  border-radius: 6px;\n}\n\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n::ng-deep .settings-fullscreen-window .k-window-content {\n  padding: 0;\n  overflow: auto;\n  background: var(--mj-bg-page);\n}\n\n/* Hide minimize/maximize buttons - only show close */\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action[title=\"Minimize\"],\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action[title=\"Maximize\"],\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action .k-i-window-minimize,\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action .k-i-window-maximize,\n::ng-deep .settings-fullscreen-window .k-window-titlebar-action .k-i-window {\n  display: none !important;\n}\n\n/* ========================================\n   UNIVERSAL SEARCH BAR\n   ======================================== */\n.shell-search-bar {\n    flex: 0 1 420px;\n    min-width: 200px;\n    max-width: 520px;\n    margin: 0 12px;\n    position: relative;\n    z-index: 99999;\n}\n@media (max-width: 768px) {\n    .shell-search-bar { display: none; }\n}\n\n/* ========================================\n   SEARCH POPUP\n   ======================================== */\n\n.search-popup-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: 9999;\n  animation: fadeIn 0.15s ease;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.search-popup {\n  position: absolute;\n  top: 60px; /* Below header */\n  right: 16px;\n  width: 480px;\n  max-width: calc(100vw - 32px);\n  background: var(--mj-bg-surface-elevated);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-xl);\n  z-index: 10000;\n  opacity: 0;\n  transform: translateY(-10px);\n  pointer-events: none;\n  transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.search-popup.open {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: all;\n}\n\n.search-popup-content {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px;\n}\n\n.search-entity-dropdown {\n  min-width: 140px;\n  max-width: 180px;\n  flex-shrink: 0;\n}\n\n.search-input {\n  flex: 1;\n  min-width: 0;\n  height: 40px;\n  padding: 8px 12px;\n  font-size: 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  outline: none;\n  display: block !important;\n  box-sizing: border-box;\n}\n\n.search-input:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.search-submit-btn {\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\n  border: none;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  transition: background 0.15s;\n  flex-shrink: 0;\n}\n\n.search-submit-btn:hover {\n  background: var(--mj-brand-primary-hover);\n}\n\n.search-submit-btn:active {\n  background: var(--mj-brand-primary-hover);\n}\n\n/* Mobile notification badge */\n.notification-badge-mobile {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  font-size: 11px;\n  font-weight: 600;\n  border-radius: 9px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n}\n\n/* Mobile-specific search popup adjustments */\n@media (max-width: 768px) {\n  .search-popup {\n    top: 60px;\n    left: 16px;\n    right: 16px;\n    width: auto;\n    max-width: none;\n  }\n\n  .search-popup-content {\n    flex-wrap: wrap;\n  }\n\n  .search-entity-dropdown {\n    width: 100%;\n  }\n\n  .search-input {\n    flex: 1;\n    min-width: 0;\n  }\n}\n\n/* ========================================\n   PIN PROGRESS OVERLAY\n   ======================================== */\n.pin-progress-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-text-primary) 40%, transparent);\n  z-index: 100000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  animation: pinBackdropIn 0.2s ease;\n}\n\n@keyframes pinBackdropIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.pin-progress-modal {\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-xl);\n  padding: 28px 40px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  box-shadow: 0 16px 48px color-mix(in srgb, var(--mj-text-primary) 30%, transparent);\n  animation: pinModalIn 0.25s ease;\n}\n\n@keyframes pinModalIn {\n  from { opacity: 0; transform: scale(0.9) translateY(8px); }\n  to { opacity: 1; transform: scale(1) translateY(0); }\n}\n\n.pin-progress-text {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-secondary);\n  white-space: nowrap;\n}"] }]
     }], () => [{ type: i1.ApplicationManager }, { type: i1.WorkspaceStateManager }, { type: i1.GoldenLayoutManager }, { type: i1.TabService }, { type: i2.NavigationService }, { type: i3.ActivatedRoute }, { type: i3.Router }, { type: i4.MJAuthBase }, { type: i0.ChangeDetectorRef }, { type: i5.UserAvatarService }, { type: i6.SettingsDialogService }, { type: i0.ViewContainerRef }, { type: i2.TitleService }, { type: i2.DeveloperModeService }, { type: i7.CommandPaletteService }, { type: i2.ThemeService }, { type: i2.HomeAppPinService }, { type: i8.FileOpenService }], { searchInput: [{
             type: ViewChild,
             args: ['searchInput']

package/dist/public-api.d.ts CHANGED Viewed

@@ -26,6 +26,8 @@ export * from './lib/single-query/single-query.component';
 export * from './lib/resource-wrappers/query-resource.component';
 export * from './lib/services/system-validation.service';
 export * from './lib/services/startup-validation.service';
+export * from './lib/services/server-connectivity.service';
+export * from './lib/server-connectivity/server-connectivity-banner.component';
 export * from './lib/services/lazy-module-registry';
 export * from './generated/lazy-feature-config';
 export * from './lib/system-validation/system-validation-banner.component';

package/dist/public-api.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAIA,cAAc,4CAA4C,CAAC;AAE3D,cAAc,sDAAsD,CAAA;AACpE,cAAc,2EAA2E,CAAA;AACzF,cAAc,mDAAmD,CAAA;AAEjE,cAAc,2DAA2D,CAAA;AACzE,cAAc,iDAAiD,CAAA;AAC/D,cAAc,wDAAwD,CAAA;AACtE,cAAc,+DAA+D,CAAA;AAC7E,cAAc,qDAAqD,CAAA;AAGnE,cAAc,iDAAiD,CAAC;AAChE,cAAc,+CAA+C,CAAC;AAG9D,cAAc,0BAA0B,CAAA;AACxC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6CAA6C,CAAA;AAC3D,cAAc,2DAA2D,CAAA;AACzE,cAAc,mDAAmD,CAAA;AACjE,cAAc,+DAA+D,CAAA;AAC7E,cAAc,qEAAqE,CAAA;AACnF,cAAc,2EAA2E,CAAA;AACzF,cAAc,uDAAuD,CAAA;AACrE,cAAc,2CAA2C,CAAA;AACzD,cAAc,uDAAuD,CAAC;AACtE,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAE5C,cAAc,2CAA2C,CAAA;AACzD,cAAc,kDAAkD,CAAA;AAGhE,cAAc,0CAA0C,CAAA;AACxD,cAAc,2CAA2C,CAAA;AAGzD,cAAc,qCAAqC,CAAA;AACnD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,4DAA4D,CAAA;AAG1E,cAAc,iBAAiB,CAAA;AAG/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,sCAAsC,CAAA;AAGpD,cAAc,sBAAsB,CAAA;AAEpC,cAAc,UAAU,CAAC"}
1	+ {"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAIA,cAAc,4CAA4C,CAAC;AAE3D,cAAc,sDAAsD,CAAA;AACpE,cAAc,2EAA2E,CAAA;AACzF,cAAc,mDAAmD,CAAA;AAEjE,cAAc,2DAA2D,CAAA;AACzE,cAAc,iDAAiD,CAAA;AAC/D,cAAc,wDAAwD,CAAA;AACtE,cAAc,+DAA+D,CAAA;AAC7E,cAAc,qDAAqD,CAAA;AAGnE,cAAc,iDAAiD,CAAC;AAChE,cAAc,+CAA+C,CAAC;AAG9D,cAAc,0BAA0B,CAAA;AACxC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6CAA6C,CAAA;AAC3D,cAAc,2DAA2D,CAAA;AACzE,cAAc,mDAAmD,CAAA;AACjE,cAAc,+DAA+D,CAAA;AAC7E,cAAc,qEAAqE,CAAA;AACnF,cAAc,2EAA2E,CAAA;AACzF,cAAc,uDAAuD,CAAA;AACrE,cAAc,2CAA2C,CAAA;AACzD,cAAc,uDAAuD,CAAC;AACtE,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAE5C,cAAc,2CAA2C,CAAA;AACzD,cAAc,kDAAkD,CAAA;AAGhE,cAAc,0CAA0C,CAAA;AACxD,cAAc,2CAA2C,CAAA;AAGzD,cAAc,4CAA4C,CAAA;AAC1D,cAAc,gEAAgE,CAAA;AAG9E,cAAc,qCAAqC,CAAA;AACnD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,4DAA4D,CAAA;AAG1E,cAAc,iBAAiB,CAAA;AAG/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,sCAAsC,CAAA;AAGpD,cAAc,sBAAsB,CAAA;AAEpC,cAAc,UAAU,CAAC"}

package/dist/public-api.js CHANGED Viewed

@@ -33,6 +33,9 @@ export * from './lib/resource-wrappers/query-resource.component';
 // Validation services
 export * from './lib/services/system-validation.service';
 export * from './lib/services/startup-validation.service';
+// Server connectivity
+export * from './lib/services/server-connectivity.service';
+export * from './lib/server-connectivity/server-connectivity-banner.component';
 // Lazy loading infrastructure
 export * from './lib/services/lazy-module-registry';
 export * from './generated/lazy-feature-config';

package/dist/public-api.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"public-api.js","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,4CAA4C,CAAC;AAE3D,cAAc,sDAAsD,CAAA;AACpE,cAAc,2EAA2E,CAAA;AACzF,cAAc,mDAAmD,CAAA;AACjE,mEAAmE;AACnE,cAAc,2DAA2D,CAAA;AACzE,cAAc,iDAAiD,CAAA;AAC/D,cAAc,wDAAwD,CAAA;AACtE,cAAc,+DAA+D,CAAA;AAC7E,cAAc,qDAAqD,CAAA;AAEnE,0DAA0D;AAC1D,cAAc,iDAAiD,CAAC;AAChE,cAAc,+CAA+C,CAAC;AAE9D,qCAAqC;AACrC,cAAc,0BAA0B,CAAA;AACxC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6CAA6C,CAAA;AAC3D,cAAc,2DAA2D,CAAA;AACzE,cAAc,mDAAmD,CAAA;AACjE,cAAc,+DAA+D,CAAA;AAC7E,cAAc,qEAAqE,CAAA;AACnF,cAAc,2EAA2E,CAAA;AACzF,cAAc,uDAAuD,CAAA;AACrE,cAAc,2CAA2C,CAAA;AACzD,cAAc,uDAAuD,CAAC;AACtE,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAE5C,cAAc,2CAA2C,CAAA;AACzD,cAAc,kDAAkD,CAAA;AAEhE,sBAAsB;AACtB,cAAc,0CAA0C,CAAA;AACxD,cAAc,2CAA2C,CAAA;AAEzD,8BAA8B;AAC9B,cAAc,qCAAqC,CAAA;AACnD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,4DAA4D,CAAA;AAE1E,0BAA0B;AAC1B,cAAc,iBAAiB,CAAA;AAE/B,eAAe;AACf,cAAc,0BAA0B,CAAA;AACxC,cAAc,sCAAsC,CAAA;AAEpD,gEAAgE;AAChE,cAAc,sBAAsB,CAAA;AAEpC,cAAc,UAAU,CAAC","sourcesContent":["/\n Public API Surface \n /\n\nexport from './lib/generic/resource-container-component';\n\nexport * from './lib/resource-wrappers/dashboard-resource.component'\nexport * from './lib/dashboard-preferences-dialog/dashboard-preferences-dialog.component'\nexport * from './lib/resource-wrappers/record-resource.component'\n// export * from './lib/resource-wrappers/resource-wrappers-loader'\nexport * from './lib/resource-wrappers/search-results-resource.component'\nexport * from './lib/resource-wrappers/view-resource.component'\nexport * from './lib/resource-wrappers/list-detail-resource.component'\nexport * from './lib/resource-wrappers/chat-conversations-resource.component'\nexport * from './lib/resource-wrappers/artifact-resource.component'\n\n// Command Palette (only component and service, no module)\nexport * from './lib/command-palette/command-palette.component';\nexport * from './lib/command-palette/command-palette.service';\n\n// New Shell Module (New Explorer UX)\nexport * from './lib/shell/shell.module'\nexport * from './lib/shell/shell.component'\nexport * from './lib/single-record/single-record.component'\nexport * from './lib/single-search-result/single-search-result.component'\nexport * from './lib/single-dashboard/single-dashboard.component'\nexport * from './lib/single-dashboard/Components/add-item/add-item.component'\nexport * from './lib/single-dashboard/Components/delete-item/delete-item.component'\nexport * from './lib/single-dashboard/Components/edit-dashboard/edit-dashboard.component'\nexport * from './lib/single-list-detail/single-list-detail.component'\nexport * from './lib/user-profile/user-profile.component'\nexport * from './lib/user-notifications/user-notifications.component';\nexport * from './lib/guards/auth-guard.service';\nexport * from './lib/guards/entities.guard';\n\nexport * from './lib/single-query/single-query.component'\nexport * from './lib/resource-wrappers/query-resource.component'\n\n// Validation services\nexport * from './lib/services/system-validation.service'\nexport * from './lib/services/startup-validation.service'\n\n// Lazy loading infrastructure\nexport * from './lib/services/lazy-module-registry'\nexport * from './generated/lazy-feature-config'\nexport * from './lib/system-validation/system-validation-banner.component'\n\n// User Menu Plugin System\nexport * from './lib/user-menu'\n\n// OAuth Module\nexport * from './lib/oauth/oauth.module'\nexport * from './lib/oauth/oauth-callback.component'\n\n// Routing Module - must be imported directly in root app module\nexport * from './app-routing.module'\n\nexport * from './module';"]}
1	+ {"version":3,"file":"public-api.js","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,4CAA4C,CAAC;AAE3D,cAAc,sDAAsD,CAAA;AACpE,cAAc,2EAA2E,CAAA;AACzF,cAAc,mDAAmD,CAAA;AACjE,mEAAmE;AACnE,cAAc,2DAA2D,CAAA;AACzE,cAAc,iDAAiD,CAAA;AAC/D,cAAc,wDAAwD,CAAA;AACtE,cAAc,+DAA+D,CAAA;AAC7E,cAAc,qDAAqD,CAAA;AAEnE,0DAA0D;AAC1D,cAAc,iDAAiD,CAAC;AAChE,cAAc,+CAA+C,CAAC;AAE9D,qCAAqC;AACrC,cAAc,0BAA0B,CAAA;AACxC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6CAA6C,CAAA;AAC3D,cAAc,2DAA2D,CAAA;AACzE,cAAc,mDAAmD,CAAA;AACjE,cAAc,+DAA+D,CAAA;AAC7E,cAAc,qEAAqE,CAAA;AACnF,cAAc,2EAA2E,CAAA;AACzF,cAAc,uDAAuD,CAAA;AACrE,cAAc,2CAA2C,CAAA;AACzD,cAAc,uDAAuD,CAAC;AACtE,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAE5C,cAAc,2CAA2C,CAAA;AACzD,cAAc,kDAAkD,CAAA;AAEhE,sBAAsB;AACtB,cAAc,0CAA0C,CAAA;AACxD,cAAc,2CAA2C,CAAA;AAEzD,sBAAsB;AACtB,cAAc,4CAA4C,CAAA;AAC1D,cAAc,gEAAgE,CAAA;AAE9E,8BAA8B;AAC9B,cAAc,qCAAqC,CAAA;AACnD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,4DAA4D,CAAA;AAE1E,0BAA0B;AAC1B,cAAc,iBAAiB,CAAA;AAE/B,eAAe;AACf,cAAc,0BAA0B,CAAA;AACxC,cAAc,sCAAsC,CAAA;AAEpD,gEAAgE;AAChE,cAAc,sBAAsB,CAAA;AAEpC,cAAc,UAAU,CAAC","sourcesContent":["/\n Public API Surface \n /\n\nexport from './lib/generic/resource-container-component';\n\nexport * from './lib/resource-wrappers/dashboard-resource.component'\nexport * from './lib/dashboard-preferences-dialog/dashboard-preferences-dialog.component'\nexport * from './lib/resource-wrappers/record-resource.component'\n// export * from './lib/resource-wrappers/resource-wrappers-loader'\nexport * from './lib/resource-wrappers/search-results-resource.component'\nexport * from './lib/resource-wrappers/view-resource.component'\nexport * from './lib/resource-wrappers/list-detail-resource.component'\nexport * from './lib/resource-wrappers/chat-conversations-resource.component'\nexport * from './lib/resource-wrappers/artifact-resource.component'\n\n// Command Palette (only component and service, no module)\nexport * from './lib/command-palette/command-palette.component';\nexport * from './lib/command-palette/command-palette.service';\n\n// New Shell Module (New Explorer UX)\nexport * from './lib/shell/shell.module'\nexport * from './lib/shell/shell.component'\nexport * from './lib/single-record/single-record.component'\nexport * from './lib/single-search-result/single-search-result.component'\nexport * from './lib/single-dashboard/single-dashboard.component'\nexport * from './lib/single-dashboard/Components/add-item/add-item.component'\nexport * from './lib/single-dashboard/Components/delete-item/delete-item.component'\nexport * from './lib/single-dashboard/Components/edit-dashboard/edit-dashboard.component'\nexport * from './lib/single-list-detail/single-list-detail.component'\nexport * from './lib/user-profile/user-profile.component'\nexport * from './lib/user-notifications/user-notifications.component';\nexport * from './lib/guards/auth-guard.service';\nexport * from './lib/guards/entities.guard';\n\nexport * from './lib/single-query/single-query.component'\nexport * from './lib/resource-wrappers/query-resource.component'\n\n// Validation services\nexport * from './lib/services/system-validation.service'\nexport * from './lib/services/startup-validation.service'\n\n// Server connectivity\nexport * from './lib/services/server-connectivity.service'\nexport * from './lib/server-connectivity/server-connectivity-banner.component'\n\n// Lazy loading infrastructure\nexport * from './lib/services/lazy-module-registry'\nexport * from './generated/lazy-feature-config'\nexport * from './lib/system-validation/system-validation-banner.component'\n\n// User Menu Plugin System\nexport * from './lib/user-menu'\n\n// OAuth Module\nexport * from './lib/oauth/oauth.module'\nexport * from './lib/oauth/oauth-callback.component'\n\n// Routing Module - must be imported directly in root app module\nexport * from './app-routing.module'\n\nexport * from './module';"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/ng-explorer-core",
-  "version": "5.25.0",
+  "version": "5.27.0",
   "description": "MemberJunction Explorer: Core Angular Components",
   "main": "./dist/public-api.js",
   "typings": "./dist/public-api.d.ts",
@@ -28,48 +28,49 @@
     "@angular/router": "21.1.3"
   },
   "dependencies": {
-    "@memberjunction/ng-ui-components": "5.25.0",
+    "@angular/animations": "21.1.3",
     "@angular/cdk": "21.1.3",
     "@angular/platform-browser": "21.1.3",
     "@auth0/auth0-angular": "^2.6.0",
-    "@memberjunction/ai-core-plus": "5.25.0",
-    "@memberjunction/ai-engine-base": "5.25.0",
-    "@memberjunction/communication-types": "5.25.0",
-    "@memberjunction/core": "5.25.0",
-    "@memberjunction/core-entities": "5.25.0",
-    "@memberjunction/entity-communications-client": "5.25.0",
-    "@memberjunction/export-engine": "5.25.0",
-    "@memberjunction/global": "5.25.0",
-    "@memberjunction/graphql-dataprovider": "5.25.0",
-    "@memberjunction/ng-ai-test-harness": "5.25.0",
-    "@memberjunction/ng-artifacts": "5.25.0",
-    "@memberjunction/ng-auth-services": "5.25.0",
-    "@memberjunction/ng-base-application": "5.25.0",
-    "@memberjunction/ng-base-forms": "5.25.0",
-    "@memberjunction/ng-container-directives": "5.25.0",
-    "@memberjunction/ng-conversations": "5.25.0",
-    "@memberjunction/ng-dashboard-viewer": "5.25.0",
-    "@memberjunction/ng-dashboards": "5.25.0",
-    "@memberjunction/ng-entity-form-dialog": "5.25.0",
-    "@memberjunction/ng-entity-permissions": "5.25.0",
-    "@memberjunction/ng-entity-viewer": "5.25.0",
-    "@memberjunction/ng-explorer-settings": "5.25.0",
-    "@memberjunction/ng-export-service": "5.25.0",
-    "@memberjunction/ng-file-storage": "5.25.0",
-    "@memberjunction/ng-generic-dialog": "5.25.0",
-    "@memberjunction/ng-list-detail-grid": "5.25.0",
-    "@memberjunction/ng-notifications": "5.25.0",
-    "@memberjunction/ng-query-viewer": "5.25.0",
-    "@memberjunction/ng-record-changes": "5.25.0",
-    "@memberjunction/ng-record-tags": "5.25.0",
-    "@memberjunction/ng-search": "5.25.0",
-    "@memberjunction/ng-word-cloud": "5.25.0",
-    "@memberjunction/ng-record-selector": "5.25.0",
-    "@memberjunction/ng-resource-permissions": "5.25.0",
-    "@memberjunction/ng-shared": "5.25.0",
-    "@memberjunction/ng-shared-generic": "5.25.0",
-    "@memberjunction/ng-user-avatar": "5.25.0",
-    "@memberjunction/templates-base-types": "5.25.0",
+    "@memberjunction/ai-core-plus": "5.27.0",
+    "@memberjunction/ai-engine-base": "5.27.0",
+    "@memberjunction/communication-types": "5.27.0",
+    "@memberjunction/core": "5.27.0",
+    "@memberjunction/core-entities": "5.27.0",
+    "@memberjunction/entity-communications-client": "5.27.0",
+    "@memberjunction/export-engine": "5.27.0",
+    "@memberjunction/global": "5.27.0",
+    "@memberjunction/graphql-dataprovider": "5.27.0",
+    "@memberjunction/ng-ai-test-harness": "5.27.0",
+    "@memberjunction/ng-artifacts": "5.27.0",
+    "@memberjunction/ng-auth-services": "5.27.0",
+    "@memberjunction/ng-base-application": "5.27.0",
+    "@memberjunction/ng-base-forms": "5.27.0",
+    "@memberjunction/ng-container-directives": "5.27.0",
+    "@memberjunction/ng-conversations": "5.27.0",
+    "@memberjunction/ng-dashboard-viewer": "5.27.0",
+    "@memberjunction/ng-dashboards": "5.27.0",
+    "@memberjunction/ng-entity-form-dialog": "5.27.0",
+    "@memberjunction/ng-entity-permissions": "5.27.0",
+    "@memberjunction/ng-entity-viewer": "5.27.0",
+    "@memberjunction/ng-explorer-settings": "5.27.0",
+    "@memberjunction/ng-export-service": "5.27.0",
+    "@memberjunction/ng-file-storage": "5.27.0",
+    "@memberjunction/ng-generic-dialog": "5.27.0",
+    "@memberjunction/ng-list-detail-grid": "5.27.0",
+    "@memberjunction/ng-notifications": "5.27.0",
+    "@memberjunction/ng-query-viewer": "5.27.0",
+    "@memberjunction/ng-record-changes": "5.27.0",
+    "@memberjunction/ng-record-selector": "5.27.0",
+    "@memberjunction/ng-record-tags": "5.27.0",
+    "@memberjunction/ng-resource-permissions": "5.27.0",
+    "@memberjunction/ng-search": "5.27.0",
+    "@memberjunction/ng-shared": "5.27.0",
+    "@memberjunction/ng-shared-generic": "5.27.0",
+    "@memberjunction/ng-ui-components": "5.27.0",
+    "@memberjunction/ng-user-avatar": "5.27.0",
+    "@memberjunction/ng-word-cloud": "5.27.0",
+    "@memberjunction/templates-base-types": "5.27.0",
     "golden-layout": "^2.6.0",
     "rxjs": "^7.8.2",
     "tslib": "^2.8.1"