@memberjunction/ng-explorer-service-worker 0.0.1 → 5.32.0

package/README.md

@@ -1,45 +1,151 @@
 # @memberjunction/ng-explorer-service-worker
 
-## ⚠️ IMPORTANT NOTICE ⚠️
+Service worker app-shell pre-cache + update-notification toast for MJ Explorer-style apps.
 
-**This package is created solely for the purpose of setting up OIDC (OpenID Connect) trusted publishing with npm.**
+## What this package gives you
 
-This is **NOT** a functional package and contains **NO** code or functionality beyond the OIDC setup configuration.
+- **`ngsw-config.json`** shipped at the package root — pre-tuned cache strategy (app-shell, lazy assets, GraphQL exclusions) that updates with `npm update`.
+- **`MJServiceWorkerModule.forRoot({ enabled })`** — wraps `ServiceWorkerModule.register(...)` with sensible defaults (deferred registration so the SW doesn't fight initial boot for bandwidth).
+- **`UpdateNotificationService`** — RxJS-friendly wrapper around `SwUpdate`.
+- **`<mj-update-notification>`** — standalone toast component, MJ design tokens, OnPush.
 
-## Purpose
+If you're using `@memberjunction/ng-explorer-app`, `MJExplorerAppModule.forRoot(environment)` already wires this up internally. You only need to touch your shell directly if you're building a non-Explorer Angular app.
 
-This package exists to:
-1. Configure OIDC trusted publishing for the package name `@memberjunction/ng-explorer-service-worker`
-2. Enable secure, token-less publishing from CI/CD workflows
-3. Establish provenance for packages published under this name
+## Consumer setup
 
-## What is OIDC Trusted Publishing?
+For a typical MJ Explorer-style app, you only edit two files:
 
-OIDC trusted publishing allows package maintainers to publish packages directly from their CI/CD workflows without needing to manage npm access tokens. Instead, it uses OpenID Connect to establish trust between the CI/CD provider (like GitHub Actions) and npm.
+### 1. `angular.json` — point the SW config at our shipped file
 
-## Setup Instructions
+```json
+{
+  "projects": {
+    "your-app": {
+      "architect": {
+        "build": {
+          "configurations": {
+            "production": {
+              "serviceWorker": "node_modules/@memberjunction/ng-explorer-service-worker/ngsw-config.json"
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```
 
-To properly configure OIDC trusted publishing for this package:
+### 2. `environment.ts` — opt-in kill switch
 
-1. Go to [npmjs.com](https://www.npmjs.com/) and navigate to your package settings
-2. Configure the trusted publisher (e.g., GitHub Actions)
-3. Specify the repository and workflow that should be allowed to publish
-4. Use the configured workflow to publish your actual package
+```typescript
+export const environment = {
+    production: true,
+    enableServiceWorker: true,    // master kill switch — turn off in an emergency
+    // ...
+};
+```
 
-## DO NOT USE THIS PACKAGE
+That's it. `MJExplorerAppModule.forRoot(environment)` reads `environment.enableServiceWorker` and turns the SW on when (and only when) `production && enableServiceWorker` are both true.
 
-This package is a placeholder for OIDC configuration only. It:
-- Contains no executable code
-- Provides no functionality
-- Should not be installed as a dependency
-- Exists only for administrative purposes
+If you skip the angular.json edit, no `ngsw-worker.js` is built and the runtime registration silently no-ops. App behaves exactly as it does today.
 
-## More Information
+## Optional consumer enhancements
 
-For more details about npm's trusted publishing feature, see:
-- [npm Trusted Publishing Documentation](https://docs.npmjs.com/generating-provenance-statements)
-- [GitHub Actions OIDC Documentation](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect)
+These are recommended but not required. The SW works fine without them — they're polish items that depend on consumer-side files we can't reach from this npm package.
 
----
+### Backport for older versions: inline theme preload script
 
-**Maintained for OIDC setup purposes only**
+**MJExplorer ships this by default starting with the same release as this package** — new installs get instant correct theming for free, no action required.
+
+If you're maintaining an older MJExplorer-based app (or a non-Explorer app that uses MJ's theme system) and want the same benefit, add the snippet below to your app's `src/index.html` inside `<head>`, anywhere before any stylesheets. We can't inject HTML into your `index.html` from an npm package, so this lives on the consumer side.
+
+Without this, dark-mode users see a brief light-mode flash on every load before MJ's bootstrap code applies their saved theme. The Angular bootstrap path is too late to set the theme before first paint — the script must be inline in `<head>`.
+
+```html
+<script>
+  (function () {
+    try {
+      var saved = localStorage.getItem('mj-theme');
+      var isDark = saved
+        ? saved === 'dark'
+        : window.matchMedia('(prefers-color-scheme: dark)').matches;
+      if (isDark) document.documentElement.setAttribute('data-theme', 'dark');
+    } catch (e) { /* swallow — theme just falls back to light */ }
+  })();
+</script>
+```
+
+Reads `mj-theme`, the unified theme key written by:
+
+- `ThemeService.applyBaseThemeAttribute()` post-login — mirrors the resolved base theme (`light` or `dark`), including the OS-resolved value for `'system'` preference
+- `MJExplorerAppComponent.ToggleTheme()` when the user toggles theme on the login screen
+
+The three readers (this inline script, `MJExplorerAppComponent.applyLoginTheme`, `ThemeService`) all share `mj-theme` as the single source of truth, so they paint in sync with no flash.
+
+`mj-theme` is preserved across logout by `MJExplorerAuthBase.preservedLocalStorageKeys` so the login screen continues to show the user's last theme without flashing back to OS default.
+
+Falls back to OS `prefers-color-scheme` on true first visits with no saved preference. Wrapped in try/catch so localStorage exceptions (Safari private mode, disabled storage) can never block app load.
+
+Combined with the SW app-shell pre-cache, dark-mode users see correct theme paint within ~100ms of navigation start.
+
+### Backport for older versions: build-time SW cache-shape gate
+
+**MJExplorer ships this by default starting with the same release as this package** — new installs get the build-time defense automatically.
+
+If you're maintaining an older MJExplorer-based app and want the same safety net, add the snippet below to your `package.json`. The gate guards against future Angular releases that introduce new build-output filename prefixes (`runtime-*`, `vendor-*`, etc.) that our `ngsw-config.json` doesn't classify. Without it, such a change would silently bypass the SW cache for those new files. The gate fails the build with a diagnostic listing the unrecognized filenames so the issue is caught at your build time, not in production.
+
+Add to your app's `package.json` scripts:
+
+```json
+{
+  "scripts": {
+    "postbuild": "node node_modules/@memberjunction/ng-explorer-service-worker/scripts/verify-sw-cache-shape.js dist/<your-app-name>/browser"
+  }
+}
+```
+
+Replace `<your-app-name>` with whatever Angular emits to (check your `angular.json` `outputPath`).
+
+The script exits 0 when every root-level `.js` and `.css` file matches a known prefix (`main-`, `polyfills-`, `chunk-`, `styles-`) and ignores SW infrastructure files (`ngsw-worker.js`, `ngsw.json`, `safety-worker.js`, `worker-basic.min.js`). Exits 1 with a clear diagnostic on anything unrecognized.
+
+Without this opt-in, the regression tests inside the SW package (`ngsw-config-shape.test.ts`, `verify-sw-cache-shape.test.ts`) still catch config-edit regressions at MJ-monorepo PR review time — but only consumer build-time invocation can catch downstream Angular naming changes.
+
+## Manual wiring (non-Explorer apps)
+
+If you're not using `MJExplorerAppModule`, wire it yourself:
+
+```typescript
+import { MJServiceWorkerModule } from '@memberjunction/ng-explorer-service-worker';
+
+@NgModule({
+    imports: [
+        MJServiceWorkerModule.forRoot({
+            enabled: environment.production && environment.enableServiceWorker
+        })
+    ]
+})
+export class AppModule {}
+```
+
+And drop the toast somewhere in your shell template:
+
+```html
+<mj-update-notification />
+```
+
+## How update notifications work
+
+1. SW polls for new versions in the background (Angular default cadence).
+2. When a new version is fully downloaded, `SwUpdate.versionUpdates` emits `VERSION_READY`.
+3. `UpdateNotificationService` flips `updateAvailable$` to `true`.
+4. `<mj-update-notification>` renders a bottom-right toast with **Reload** / **Later**.
+5. **Reload** triggers `document.location.reload()`, which activates the new SW version.
+6. **Later** dismisses for the session; next reload picks up the update naturally.
+
+## Customization
+
+To override the cache strategy for your app, copy `ngsw-config.json` into your repo and point `angular.json` at the local copy. You'll lose automatic updates to the cache rules but can tune freely.
+
+## Ops runbook
+
+See `docs/operations/SERVICE_WORKER_RUNBOOK.md` in the MJ repo for kill-switch procedures, cache invalidation, and rollback playbook.

package/dist/lib/mj-service-worker.module.d.ts

@@ -0,0 +1,68 @@
+import { ModuleWithProviders } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "./update-notification.component";
+/**
+ * Options for configuring `MJServiceWorkerModule.forRoot()`.
+ */
+export interface MJServiceWorkerOptions {
+    /**
+     * Master enable flag — when `false`, no service worker is registered and
+     * `SwUpdate.isEnabled` resolves to `false`. The toast component is always
+     * exported, but it renders nothing when SW is disabled.
+     *
+     * Wire this to something like `environment.production && environment.enableServiceWorker`
+     * so dev builds and ops kill-switches both turn it off cleanly.
+     */
+    enabled: boolean;
+    /**
+     * The path to the generated SW worker script, relative to the deployed
+     * app root. Defaults to `'ngsw-worker.js'` (the Angular CLI default).
+     * Override only if you've customized the build output.
+     */
+    scriptPath?: string;
+    /**
+     * Registration strategy passed to `ServiceWorkerModule.register`.
+     * Defaults to `'registerWhenStable:30000'` — defer registration until
+     * the app is idle for 30s OR 30s have elapsed, whichever first. Avoids
+     * competing with initial app boot for network bandwidth.
+     */
+    registrationStrategy?: string;
+    /**
+     * How often (in ms) UpdateNotificationService should ask the SW to check
+     * for a new manifest while the tab is visible. Defaults to 15 minutes.
+     * Pass `0` to disable periodic checking entirely (the SW's internal poll
+     * still runs, but on a much longer cadence — typically hours).
+     *
+     * Note: this is wired by `UpdateNotificationService` itself in its
+     * constructor; we don't currently provide a DI token for it. To override
+     * at runtime, inject `UpdateNotificationService` and call
+     * `service.startAutoCheck(yourIntervalMs)`.
+     */
+    pollIntervalMs?: number;
+}
+/**
+ * Bundles MJ Explorer's service worker concerns into one module:
+ *   - Conditionally registers `@angular/service-worker` based on `enabled`
+ *   - Exports `UpdateNotificationComponent` (standalone toast)
+ *   - Exposes `UpdateNotificationService` via `providedIn: 'root'`
+ *
+ * Consumers should call `MJServiceWorkerModule.forRoot({ enabled: ... })`
+ * exactly once in their root NgModule. Typically this is done internally by
+ * `MJExplorerAppModule.forRoot(environment)` so MJExplorer (and downstream
+ * Explorer-style apps) don't have to wire it themselves.
+ *
+ * Pre-built `ngsw-config.json` ships at the package root; consumers point
+ * their `angular.json` `serviceWorker` field at:
+ *   `node_modules/@memberjunction/ng-explorer-service-worker/ngsw-config.json`
+ *
+ * If a consumer doesn't update `angular.json` (no SW worker built) AND
+ * doesn't flip `enabled` true in their environment, this module is a no-op.
+ * The app keeps working exactly as if the SW didn't exist.
+ */
+export declare class MJServiceWorkerModule {
+    static forRoot(options: MJServiceWorkerOptions): ModuleWithProviders<MJServiceWorkerModule>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJServiceWorkerModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MJServiceWorkerModule, never, [typeof i1.UpdateNotificationComponent], [typeof i1.UpdateNotificationComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MJServiceWorkerModule>;
+}
+//# sourceMappingURL=mj-service-worker.module.d.ts.map

package/dist/lib/mj-service-worker.module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mj-service-worker.module.d.ts","sourceRoot":"","sources":["../../src/lib/mj-service-worker.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,mBAAmB,EAAE,MAAM,eAAe,CAAC;;;AAI9D;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACnC;;;;;;;OAOG;IACH,OAAO,EAAE,OAAO,CAAC;IAEjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAIa,qBAAqB;IAC9B,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,sBAAsB,GAAG,mBAAmB,CAAC,qBAAqB,CAAC;yCADlF,qBAAqB;0CAArB,qBAAqB;0CAArB,qBAAqB;CAmBjC"}

package/dist/lib/mj-service-worker.module.js

@@ -0,0 +1,54 @@
+import { NgModule } from '@angular/core';
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { UpdateNotificationComponent } from './update-notification.component';
+import * as i0 from "@angular/core";
+/**
+ * Bundles MJ Explorer's service worker concerns into one module:
+ *   - Conditionally registers `@angular/service-worker` based on `enabled`
+ *   - Exports `UpdateNotificationComponent` (standalone toast)
+ *   - Exposes `UpdateNotificationService` via `providedIn: 'root'`
+ *
+ * Consumers should call `MJServiceWorkerModule.forRoot({ enabled: ... })`
+ * exactly once in their root NgModule. Typically this is done internally by
+ * `MJExplorerAppModule.forRoot(environment)` so MJExplorer (and downstream
+ * Explorer-style apps) don't have to wire it themselves.
+ *
+ * Pre-built `ngsw-config.json` ships at the package root; consumers point
+ * their `angular.json` `serviceWorker` field at:
+ *   `node_modules/@memberjunction/ng-explorer-service-worker/ngsw-config.json`
+ *
+ * If a consumer doesn't update `angular.json` (no SW worker built) AND
+ * doesn't flip `enabled` true in their environment, this module is a no-op.
+ * The app keeps working exactly as if the SW didn't exist.
+ */
+export class MJServiceWorkerModule {
+    static forRoot(options) {
+        // ServiceWorkerModule.register is always called — the `enabled` flag
+        // tells Angular whether to actually attempt registration. We pass the
+        // module reference into the providers chain so the SwUpdate token tree
+        // is set up regardless (so injection always succeeds; it just reports
+        // isEnabled = false when disabled).
+        const swModule = ServiceWorkerModule.register(options.scriptPath ?? 'ngsw-worker.js', {
+            enabled: options.enabled,
+            registrationStrategy: options.registrationStrategy ?? 'registerWhenStable:30000'
+        });
+        return {
+            ngModule: MJServiceWorkerModule,
+            providers: [
+                ...(swModule.providers ?? [])
+            ]
+        };
+    }
+    static ɵfac = function MJServiceWorkerModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJServiceWorkerModule)(); };
+    static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: MJServiceWorkerModule });
+    static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [UpdateNotificationComponent] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJServiceWorkerModule, [{
+        type: NgModule,
+        args: [{
+                imports: [UpdateNotificationComponent],
+                exports: [UpdateNotificationComponent]
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MJServiceWorkerModule, { imports: [UpdateNotificationComponent], exports: [UpdateNotificationComponent] }); })();
+//# sourceMappingURL=mj-service-worker.module.js.map

package/dist/lib/mj-service-worker.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mj-service-worker.module.js","sourceRoot":"","sources":["../../src/lib/mj-service-worker.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAuB,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAC;;AA6C9E;;;;;;;;;;;;;;;;;;GAkBG;AAKH,MAAM,OAAO,qBAAqB;IAC9B,MAAM,CAAC,OAAO,CAAC,OAA+B;QAC1C,qEAAqE;QACrE,sEAAsE;QACtE,uEAAuE;QACvE,sEAAsE;QACtE,oCAAoC;QACpC,MAAM,QAAQ,GAAG,mBAAmB,CAAC,QAAQ,CAAC,OAAO,CAAC,UAAU,IAAI,gBAAgB,EAAE;YAClF,OAAO,EAAE,OAAO,CAAC,OAAO;YACxB,oBAAoB,EAAE,OAAO,CAAC,oBAAoB,IAAI,0BAA0B;SACnF,CAAC,CAAC;QAEH,OAAO;YACH,QAAQ,EAAE,qBAAqB;YAC/B,SAAS,EAAE;gBACP,GAAG,CAAC,QAAQ,CAAC,SAAS,IAAI,EAAE,CAAC;aAChC;SACJ,CAAC;IACN,CAAC;+GAlBQ,qBAAqB;4DAArB,qBAAqB;gEAHpB,2BAA2B;;iFAG5B,qBAAqB;cAJjC,QAAQ;eAAC;gBACN,OAAO,EAAE,CAAC,2BAA2B,CAAC;gBACtC,OAAO,EAAE,CAAC,2BAA2B,CAAC;aACzC;;wFACY,qBAAqB,cAHpB,2BAA2B,aAC3B,2BAA2B","sourcesContent":["import { NgModule, ModuleWithProviders } from '@angular/core';\nimport { ServiceWorkerModule } from '@angular/service-worker';\nimport { UpdateNotificationComponent } from './update-notification.component';\n\n/**\n * Options for configuring `MJServiceWorkerModule.forRoot()`.\n */\nexport interface MJServiceWorkerOptions {\n    /**\n     * Master enable flag — when `false`, no service worker is registered and\n     * `SwUpdate.isEnabled` resolves to `false`. The toast component is always\n     * exported, but it renders nothing when SW is disabled.\n     *\n     * Wire this to something like `environment.production && environment.enableServiceWorker`\n     * so dev builds and ops kill-switches both turn it off cleanly.\n     */\n    enabled: boolean;\n\n    /**\n     * The path to the generated SW worker script, relative to the deployed\n     * app root. Defaults to `'ngsw-worker.js'` (the Angular CLI default).\n     * Override only if you've customized the build output.\n     */\n    scriptPath?: string;\n\n    /**\n     * Registration strategy passed to `ServiceWorkerModule.register`.\n     * Defaults to `'registerWhenStable:30000'` — defer registration until\n     * the app is idle for 30s OR 30s have elapsed, whichever first. Avoids\n     * competing with initial app boot for network bandwidth.\n     */\n    registrationStrategy?: string;\n\n    /**\n     * How often (in ms) UpdateNotificationService should ask the SW to check\n     * for a new manifest while the tab is visible. Defaults to 15 minutes.\n     * Pass `0` to disable periodic checking entirely (the SW's internal poll\n     * still runs, but on a much longer cadence — typically hours).\n     *\n     * Note: this is wired by `UpdateNotificationService` itself in its\n     * constructor; we don't currently provide a DI token for it. To override\n     * at runtime, inject `UpdateNotificationService` and call\n     * `service.startAutoCheck(yourIntervalMs)`.\n     */\n    pollIntervalMs?: number;\n}\n\n/**\n * Bundles MJ Explorer's service worker concerns into one module:\n *   - Conditionally registers `@angular/service-worker` based on `enabled`\n *   - Exports `UpdateNotificationComponent` (standalone toast)\n *   - Exposes `UpdateNotificationService` via `providedIn: 'root'`\n *\n * Consumers should call `MJServiceWorkerModule.forRoot({ enabled: ... })`\n * exactly once in their root NgModule. Typically this is done internally by\n * `MJExplorerAppModule.forRoot(environment)` so MJExplorer (and downstream\n * Explorer-style apps) don't have to wire it themselves.\n *\n * Pre-built `ngsw-config.json` ships at the package root; consumers point\n * their `angular.json` `serviceWorker` field at:\n *   `node_modules/@memberjunction/ng-explorer-service-worker/ngsw-config.json`\n *\n * If a consumer doesn't update `angular.json` (no SW worker built) AND\n * doesn't flip `enabled` true in their environment, this module is a no-op.\n * The app keeps working exactly as if the SW didn't exist.\n */\n@NgModule({\n    imports: [UpdateNotificationComponent],\n    exports: [UpdateNotificationComponent]\n})\nexport class MJServiceWorkerModule {\n    static forRoot(options: MJServiceWorkerOptions): ModuleWithProviders<MJServiceWorkerModule> {\n        // ServiceWorkerModule.register is always called — the `enabled` flag\n        // tells Angular whether to actually attempt registration. We pass the\n        // module reference into the providers chain so the SwUpdate token tree\n        // is set up regardless (so injection always succeeds; it just reports\n        // isEnabled = false when disabled).\n        const swModule = ServiceWorkerModule.register(options.scriptPath ?? 'ngsw-worker.js', {\n            enabled: options.enabled,\n            registrationStrategy: options.registrationStrategy ?? 'registerWhenStable:30000'\n        });\n\n        return {\n            ngModule: MJServiceWorkerModule,\n            providers: [\n                ...(swModule.providers ?? [])\n            ]\n        };\n    }\n}\n"]}

package/dist/lib/update-notification.component.d.ts

@@ -0,0 +1,21 @@
+import { UpdateNotificationService } from './update-notification.service';
+import * as i0 from "@angular/core";
+/**
+ * Renders a small bottom-right toast when a new app version is available.
+ * Two actions: "Reload" applies the update; "Later" dismisses for the session.
+ *
+ * Standalone component — no NgModule needed, drop into the shell template
+ * with `<mj-update-notification></mj-update-notification>`.
+ *
+ * Visual design uses MJ design tokens (no hardcoded colors) so it picks up
+ * dark mode + brand customization automatically. Slide-up entrance animation
+ * + subtle pulse on the icon to draw attention without being aggressive.
+ */
+export declare class UpdateNotificationComponent {
+    readonly updateService: UpdateNotificationService;
+    onReload(): void;
+    onDismiss(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UpdateNotificationComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UpdateNotificationComponent, "mj-update-notification", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=update-notification.component.d.ts.map

package/dist/lib/update-notification.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"update-notification.component.d.ts","sourceRoot":"","sources":["../../src/lib/update-notification.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,+BAA+B,CAAC;;AAE1E;;;;;;;;;;GAUG;AACH,qBA8Na,2BAA2B;IACpC,SAAgB,aAAa,4BAAqC;IAElE,QAAQ,IAAI,IAAI;IAIhB,SAAS,IAAI,IAAI;yCAPR,2BAA2B;2CAA3B,2BAA2B;CAUvC"}

package/dist/lib/update-notification.component.js

@@ -0,0 +1,109 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UpdateNotificationService } from './update-notification.service';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+function UpdateNotificationComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1);
+    i0.ɵɵdomElement(2, "i", 2);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "div", 3)(4, "div", 4);
+    i0.ɵɵtext(5, " Update available (test build #7) ");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(6, "div", 5);
+    i0.ɵɵtext(7, " A newer version of MemberJunction has been downloaded. Reload now to apply, or keep working and we'll prompt you again next time. ");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(8, "div", 6)(9, "button", 7);
+    i0.ɵɵdomListener("click", function UpdateNotificationComponent_Conditional_0_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onReload()); });
+    i0.ɵɵdomElement(10, "i", 8);
+    i0.ɵɵdomElementStart(11, "span");
+    i0.ɵɵtext(12, "Reload now");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(13, "button", 9);
+    i0.ɵɵdomListener("click", function UpdateNotificationComponent_Conditional_0_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDismiss()); });
+    i0.ɵɵtext(14, " Later ");
+    i0.ɵɵdomElementEnd()()();
+    i0.ɵɵdomElementStart(15, "button", 10);
+    i0.ɵɵdomListener("click", function UpdateNotificationComponent_Conditional_0_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDismiss()); });
+    i0.ɵɵdomElement(16, "i", 11);
+    i0.ɵɵdomElementEnd()();
+} }
+/**
+ * Renders a small bottom-right toast when a new app version is available.
+ * Two actions: "Reload" applies the update; "Later" dismisses for the session.
+ *
+ * Standalone component — no NgModule needed, drop into the shell template
+ * with `<mj-update-notification></mj-update-notification>`.
+ *
+ * Visual design uses MJ design tokens (no hardcoded colors) so it picks up
+ * dark mode + brand customization automatically. Slide-up entrance animation
+ * + subtle pulse on the icon to draw attention without being aggressive.
+ */
+export class UpdateNotificationComponent {
+    updateService = inject(UpdateNotificationService);
+    onReload() {
+        this.updateService.applyUpdate();
+    }
+    onDismiss() {
+        this.updateService.dismissForSession();
+    }
+    static ɵfac = function UpdateNotificationComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UpdateNotificationComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UpdateNotificationComponent, selectors: [["mj-update-notification"]], decls: 2, vars: 3, consts: [["role", "status", "aria-live", "polite", 1, "mj-sw-update-toast"], ["aria-hidden", "true", 1, "mj-sw-update-toast__icon"], [1, "fa-solid", "fa-arrows-rotate"], [1, "mj-sw-update-toast__content"], [1, "mj-sw-update-toast__title"], [1, "mj-sw-update-toast__subtitle"], [1, "mj-sw-update-toast__actions"], ["type", "button", 1, "mj-sw-update-toast__btn", "mj-sw-update-toast__btn--primary", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-rotate-right"], ["type", "button", 1, "mj-sw-update-toast__btn", "mj-sw-update-toast__btn--secondary", 3, "click"], ["type", "button", "aria-label", "Dismiss", 1, "mj-sw-update-toast__close", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-xmark"]], template: function UpdateNotificationComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, UpdateNotificationComponent_Conditional_0_Template, 17, 0, "div", 0);
+            i0.ɵɵpipe(1, "async");
+        } if (rf & 2) {
+            i0.ɵɵconditional(i0.ɵɵpipeBind1(1, 1, ctx.updateService.updateAvailable$) ? 0 : -1);
+        } }, dependencies: [CommonModule, i1.AsyncPipe], styles: ["[_nghost-%COMP%] {\n            position: fixed;\n            bottom: 24px;\n            right: 24px;\n            z-index: 1000;\n            pointer-events: none;\n            max-width: 100%;\n        }\n\n        @keyframes _ngcontent-%COMP%_mj-sw-toast-in {\n            from {\n                opacity: 0;\n                transform: translateY(16px) scale(0.98);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0) scale(1);\n            }\n        }\n\n        @keyframes _ngcontent-%COMP%_mj-sw-toast-pulse {\n            0%, 100% {\n                box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n            }\n            50% {\n                box-shadow: 0 0 0 8px color-mix(in srgb, var(--mj-brand-primary) 0%, transparent);\n            }\n        }\n\n        .mj-sw-update-toast[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: flex-start;\n            gap: 14px;\n            position: relative;\n            background: var(--mj-bg-surface-elevated);\n            color: var(--mj-text-primary);\n            border: 1px solid var(--mj-border-default);\n            border-radius: 12px;\n            padding: 16px 18px 16px 16px;\n            width: 380px;\n            max-width: calc(100vw - 48px);\n            box-shadow:\n                0 1px 2px color-mix(in srgb, var(--mj-text-primary) 6%, transparent),\n                0 12px 32px color-mix(in srgb, var(--mj-text-primary) 16%, transparent);\n            pointer-events: auto;\n            font-size: 13.5px;\n            line-height: 1.45;\n            animation: _ngcontent-%COMP%_mj-sw-toast-in 220ms cubic-bezier(0.2, 0.9, 0.32, 1.15) both;\n        }\n\n        .mj-sw-update-toast__icon[_ngcontent-%COMP%] {\n            flex: 0 0 auto;\n            width: 36px;\n            height: 36px;\n            border-radius: 50%;\n            display: grid;\n            place-items: center;\n            background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n            color: var(--mj-brand-primary);\n            font-size: 16px;\n            animation: _ngcontent-%COMP%_mj-sw-toast-pulse 2.4s ease-in-out 0.4s 2;\n        }\n\n        .mj-sw-update-toast__content[_ngcontent-%COMP%] {\n            flex: 1 1 auto;\n            min-width: 0;\n            display: flex;\n            flex-direction: column;\n            gap: 4px;\n        }\n\n        .mj-sw-update-toast__title[_ngcontent-%COMP%] {\n            color: var(--mj-text-primary);\n            font-weight: 600;\n            font-size: 14px;\n            letter-spacing: -0.005em;\n        }\n\n        .mj-sw-update-toast__subtitle[_ngcontent-%COMP%] {\n            color: var(--mj-text-secondary);\n            font-size: 12.5px;\n            line-height: 1.5;\n            margin-bottom: 4px;\n        }\n\n        .mj-sw-update-toast__actions[_ngcontent-%COMP%] {\n            display: flex;\n            gap: 8px;\n            margin-top: 8px;\n        }\n\n        .mj-sw-update-toast__btn[_ngcontent-%COMP%] {\n            font: inherit;\n            font-size: 13px;\n            font-weight: 500;\n            cursor: pointer;\n            padding: 7px 14px;\n            border-radius: 8px;\n            border: 1px solid transparent;\n            line-height: 1.2;\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.08s ease;\n        }\n        .mj-sw-update-toast__btn[_ngcontent-%COMP%]:active {\n            transform: translateY(1px);\n        }\n        .mj-sw-update-toast__btn[_ngcontent-%COMP%]:focus-visible {\n            outline: 2px solid var(--mj-border-focus);\n            outline-offset: 2px;\n        }\n\n        .mj-sw-update-toast__btn--primary[_ngcontent-%COMP%] {\n            background: var(--mj-brand-primary);\n            color: var(--mj-text-inverse);\n        }\n        .mj-sw-update-toast__btn--primary[_ngcontent-%COMP%]:hover {\n            background: var(--mj-brand-primary-hover);\n        }\n        .mj-sw-update-toast__btn--primary[_ngcontent-%COMP%]:active {\n            background: var(--mj-brand-primary-active);\n        }\n\n        .mj-sw-update-toast__btn--secondary[_ngcontent-%COMP%] {\n            background: transparent;\n            border-color: var(--mj-border-default);\n            color: var(--mj-text-secondary);\n        }\n        .mj-sw-update-toast__btn--secondary[_ngcontent-%COMP%]:hover {\n            background: var(--mj-bg-surface-hover);\n            color: var(--mj-text-primary);\n            border-color: var(--mj-border-strong);\n        }\n\n        .mj-sw-update-toast__close[_ngcontent-%COMP%] {\n            position: absolute;\n            top: 8px;\n            right: 8px;\n            width: 24px;\n            height: 24px;\n            border: none;\n            background: transparent;\n            color: var(--mj-text-muted);\n            border-radius: 6px;\n            cursor: pointer;\n            display: grid;\n            place-items: center;\n            font-size: 12px;\n            transition: background 0.15s ease, color 0.15s ease;\n        }\n        .mj-sw-update-toast__close[_ngcontent-%COMP%]:hover {\n            background: var(--mj-bg-surface-hover);\n            color: var(--mj-text-primary);\n        }\n        .mj-sw-update-toast__close[_ngcontent-%COMP%]:focus-visible {\n            outline: 2px solid var(--mj-border-focus);\n            outline-offset: 1px;\n        }\n\n        @media (prefers-reduced-motion: reduce) {\n            .mj-sw-update-toast[_ngcontent-%COMP%] {\n                animation: none;\n            }\n            .mj-sw-update-toast__icon[_ngcontent-%COMP%] {\n                animation: none;\n            }\n        }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UpdateNotificationComponent, [{
+        type: Component,
+        args: [{ standalone: true, selector: 'mj-update-notification', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+        @if (updateService.updateAvailable$ | async) {
+            <div
+                class="mj-sw-update-toast"
+                role="status"
+                aria-live="polite"
+            >
+                <div class="mj-sw-update-toast__icon" aria-hidden="true">
+                    <i class="fa-solid fa-arrows-rotate"></i>
+                </div>
+                <div class="mj-sw-update-toast__content">
+                    <div class="mj-sw-update-toast__title">
+                        Update available (test build #7)
+                    </div>
+                    <div class="mj-sw-update-toast__subtitle">
+                        A newer version of MemberJunction has been downloaded. Reload now to apply, or keep working and we'll prompt you again next time.
+                    </div>
+                    <div class="mj-sw-update-toast__actions">
+                        <button
+                            type="button"
+                            class="mj-sw-update-toast__btn mj-sw-update-toast__btn--primary"
+                            (click)="onReload()"
+                        >
+                            <i class="fa-solid fa-rotate-right" aria-hidden="true"></i>
+                            <span>Reload now</span>
+                        </button>
+                        <button
+                            type="button"
+                            class="mj-sw-update-toast__btn mj-sw-update-toast__btn--secondary"
+                            (click)="onDismiss()"
+                        >
+                            Later
+                        </button>
+                    </div>
+                </div>
+                <button
+                    type="button"
+                    class="mj-sw-update-toast__close"
+                    aria-label="Dismiss"
+                    (click)="onDismiss()"
+                >
+                    <i class="fa-solid fa-xmark" aria-hidden="true"></i>
+                </button>
+            </div>
+        }
+    `, styles: ["\n        :host {\n            position: fixed;\n            bottom: 24px;\n            right: 24px;\n            z-index: 1000;\n            pointer-events: none;\n            max-width: 100%;\n        }\n\n        @keyframes mj-sw-toast-in {\n            from {\n                opacity: 0;\n                transform: translateY(16px) scale(0.98);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0) scale(1);\n            }\n        }\n\n        @keyframes mj-sw-toast-pulse {\n            0%, 100% {\n                box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n            }\n            50% {\n                box-shadow: 0 0 0 8px color-mix(in srgb, var(--mj-brand-primary) 0%, transparent);\n            }\n        }\n\n        .mj-sw-update-toast {\n            display: flex;\n            align-items: flex-start;\n            gap: 14px;\n            position: relative;\n            background: var(--mj-bg-surface-elevated);\n            color: var(--mj-text-primary);\n            border: 1px solid var(--mj-border-default);\n            border-radius: 12px;\n            padding: 16px 18px 16px 16px;\n            width: 380px;\n            max-width: calc(100vw - 48px);\n            box-shadow:\n                0 1px 2px color-mix(in srgb, var(--mj-text-primary) 6%, transparent),\n                0 12px 32px color-mix(in srgb, var(--mj-text-primary) 16%, transparent);\n            pointer-events: auto;\n            font-size: 13.5px;\n            line-height: 1.45;\n            animation: mj-sw-toast-in 220ms cubic-bezier(0.2, 0.9, 0.32, 1.15) both;\n        }\n\n        .mj-sw-update-toast__icon {\n            flex: 0 0 auto;\n            width: 36px;\n            height: 36px;\n            border-radius: 50%;\n            display: grid;\n            place-items: center;\n            background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n            color: var(--mj-brand-primary);\n            font-size: 16px;\n            animation: mj-sw-toast-pulse 2.4s ease-in-out 0.4s 2;\n        }\n\n        .mj-sw-update-toast__content {\n            flex: 1 1 auto;\n            min-width: 0;\n            display: flex;\n            flex-direction: column;\n            gap: 4px;\n        }\n\n        .mj-sw-update-toast__title {\n            color: var(--mj-text-primary);\n            font-weight: 600;\n            font-size: 14px;\n            letter-spacing: -0.005em;\n        }\n\n        .mj-sw-update-toast__subtitle {\n            color: var(--mj-text-secondary);\n            font-size: 12.5px;\n            line-height: 1.5;\n            margin-bottom: 4px;\n        }\n\n        .mj-sw-update-toast__actions {\n            display: flex;\n            gap: 8px;\n            margin-top: 8px;\n        }\n\n        .mj-sw-update-toast__btn {\n            font: inherit;\n            font-size: 13px;\n            font-weight: 500;\n            cursor: pointer;\n            padding: 7px 14px;\n            border-radius: 8px;\n            border: 1px solid transparent;\n            line-height: 1.2;\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.08s ease;\n        }\n        .mj-sw-update-toast__btn:active {\n            transform: translateY(1px);\n        }\n        .mj-sw-update-toast__btn:focus-visible {\n            outline: 2px solid var(--mj-border-focus);\n            outline-offset: 2px;\n        }\n\n        .mj-sw-update-toast__btn--primary {\n            background: var(--mj-brand-primary);\n            color: var(--mj-text-inverse);\n        }\n        .mj-sw-update-toast__btn--primary:hover {\n            background: var(--mj-brand-primary-hover);\n        }\n        .mj-sw-update-toast__btn--primary:active {\n            background: var(--mj-brand-primary-active);\n        }\n\n        .mj-sw-update-toast__btn--secondary {\n            background: transparent;\n            border-color: var(--mj-border-default);\n            color: var(--mj-text-secondary);\n        }\n        .mj-sw-update-toast__btn--secondary:hover {\n            background: var(--mj-bg-surface-hover);\n            color: var(--mj-text-primary);\n            border-color: var(--mj-border-strong);\n        }\n\n        .mj-sw-update-toast__close {\n            position: absolute;\n            top: 8px;\n            right: 8px;\n            width: 24px;\n            height: 24px;\n            border: none;\n            background: transparent;\n            color: var(--mj-text-muted);\n            border-radius: 6px;\n            cursor: pointer;\n            display: grid;\n            place-items: center;\n            font-size: 12px;\n            transition: background 0.15s ease, color 0.15s ease;\n        }\n        .mj-sw-update-toast__close:hover {\n            background: var(--mj-bg-surface-hover);\n            color: var(--mj-text-primary);\n        }\n        .mj-sw-update-toast__close:focus-visible {\n            outline: 2px solid var(--mj-border-focus);\n            outline-offset: 1px;\n        }\n\n        @media (prefers-reduced-motion: reduce) {\n            .mj-sw-update-toast {\n                animation: none;\n            }\n            .mj-sw-update-toast__icon {\n                animation: none;\n            }\n        }\n    "] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UpdateNotificationComponent, { className: "UpdateNotificationComponent", filePath: "src/lib/update-notification.component.ts", lineNumber: 238 }); })();
+//# sourceMappingURL=update-notification.component.js.map

package/dist/lib/update-notification.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"update-notification.component.js","sourceRoot":"","sources":["../../src/lib/update-notification.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,yBAAyB,EAAE,MAAM,+BAA+B,CAAC;;;;;IAyB1D,AALJ,iCAIC,aAC4D;IACrD,0BAAyC;IAC7C,oBAAM;IAEF,AADJ,iCAAyC,aACE;IACnC,kDACJ;IAAA,oBAAM;IACN,iCAA0C;IACtC,mJACJ;IAAA,oBAAM;IAEF,AADJ,iCAAyC,gBAKpC;IADG,kMAAS,iBAAU,KAAC;IAEpB,2BAA2D;IAC3D,gCAAM;IAAA,2BAAU;IACpB,AADoB,oBAAO,EAClB;IACT,qCAIC;IADG,mMAAS,kBAAW,KAAC;IAErB,wBACJ;IAER,AADI,AADI,oBAAS,EACP,EACJ;IACN,sCAKC;IADG,mMAAS,kBAAW,KAAC;IAErB,4BAAoD;IAE5D,AADI,oBAAS,EACP;;AA3DlB;;;;;;;;;;GAUG;AA+NH,MAAM,OAAO,2BAA2B;IACpB,aAAa,GAAG,MAAM,CAAC,yBAAyB,CAAC,CAAC;IAElE,QAAQ;QACJ,IAAI,CAAC,aAAa,CAAC,WAAW,EAAE,CAAC;IACrC,CAAC;IAED,SAAS;QACL,IAAI,CAAC,aAAa,CAAC,iBAAiB,EAAE,CAAC;IAC3C,CAAC;qHATQ,2BAA2B;6DAA3B,2BAA2B;YAxNhC,8FAA8C;;;YAA9C,mFA2CC;4BA9CK,YAAY;;iFA2Nb,2BAA2B;cA9NvC,SAAS;6BACM,IAAI,YACN,wBAAwB,WACzB,CAAC,YAAY,CAAC,mBACN,uBAAuB,CAAC,MAAM,YACrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6CT;;kFA4KQ,2BAA2B","sourcesContent":["import { ChangeDetectionStrategy, Component, inject } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { UpdateNotificationService } from './update-notification.service';\n\n/**\n * Renders a small bottom-right toast when a new app version is available.\n * Two actions: \"Reload\" applies the update; \"Later\" dismisses for the session.\n *\n * Standalone component — no NgModule needed, drop into the shell template\n * with `<mj-update-notification></mj-update-notification>`.\n *\n * Visual design uses MJ design tokens (no hardcoded colors) so it picks up\n * dark mode + brand customization automatically. Slide-up entrance animation\n * + subtle pulse on the icon to draw attention without being aggressive.\n */\n@Component({\n    standalone: true,\n    selector: 'mj-update-notification',\n    imports: [CommonModule],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    template: `\n        @if (updateService.updateAvailable$ | async) {\n            <div\n                class=\"mj-sw-update-toast\"\n                role=\"status\"\n                aria-live=\"polite\"\n            >\n                <div class=\"mj-sw-update-toast__icon\" aria-hidden=\"true\">\n                    <i class=\"fa-solid fa-arrows-rotate\"></i>\n                </div>\n                <div class=\"mj-sw-update-toast__content\">\n                    <div class=\"mj-sw-update-toast__title\">\n                        Update available (test build #7)\n                    </div>\n                    <div class=\"mj-sw-update-toast__subtitle\">\n                        A newer version of MemberJunction has been downloaded. Reload now to apply, or keep working and we'll prompt you again next time.\n                    </div>\n                    <div class=\"mj-sw-update-toast__actions\">\n                        <button\n                            type=\"button\"\n                            class=\"mj-sw-update-toast__btn mj-sw-update-toast__btn--primary\"\n                            (click)=\"onReload()\"\n                        >\n                            <i class=\"fa-solid fa-rotate-right\" aria-hidden=\"true\"></i>\n                            <span>Reload now</span>\n                        </button>\n                        <button\n                            type=\"button\"\n                            class=\"mj-sw-update-toast__btn mj-sw-update-toast__btn--secondary\"\n                            (click)=\"onDismiss()\"\n                        >\n                            Later\n                        </button>\n                    </div>\n                </div>\n                <button\n                    type=\"button\"\n                    class=\"mj-sw-update-toast__close\"\n                    aria-label=\"Dismiss\"\n                    (click)=\"onDismiss()\"\n                >\n                    <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n                </button>\n            </div>\n        }\n    `,\n    styles: [`\n        :host {\n            position: fixed;\n            bottom: 24px;\n            right: 24px;\n            z-index: 1000;\n            pointer-events: none;\n            max-width: 100%;\n        }\n\n        @keyframes mj-sw-toast-in {\n            from {\n                opacity: 0;\n                transform: translateY(16px) scale(0.98);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0) scale(1);\n            }\n        }\n\n        @keyframes mj-sw-toast-pulse {\n            0%, 100% {\n                box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n            }\n            50% {\n                box-shadow: 0 0 0 8px color-mix(in srgb, var(--mj-brand-primary) 0%, transparent);\n            }\n        }\n\n        .mj-sw-update-toast {\n            display: flex;\n            align-items: flex-start;\n            gap: 14px;\n            position: relative;\n            background: var(--mj-bg-surface-elevated);\n            color: var(--mj-text-primary);\n            border: 1px solid var(--mj-border-default);\n            border-radius: 12px;\n            padding: 16px 18px 16px 16px;\n            width: 380px;\n            max-width: calc(100vw - 48px);\n            box-shadow:\n                0 1px 2px color-mix(in srgb, var(--mj-text-primary) 6%, transparent),\n                0 12px 32px color-mix(in srgb, var(--mj-text-primary) 16%, transparent);\n            pointer-events: auto;\n            font-size: 13.5px;\n            line-height: 1.45;\n            animation: mj-sw-toast-in 220ms cubic-bezier(0.2, 0.9, 0.32, 1.15) both;\n        }\n\n        .mj-sw-update-toast__icon {\n            flex: 0 0 auto;\n            width: 36px;\n            height: 36px;\n            border-radius: 50%;\n            display: grid;\n            place-items: center;\n            background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n            color: var(--mj-brand-primary);\n            font-size: 16px;\n            animation: mj-sw-toast-pulse 2.4s ease-in-out 0.4s 2;\n        }\n\n        .mj-sw-update-toast__content {\n            flex: 1 1 auto;\n            min-width: 0;\n            display: flex;\n            flex-direction: column;\n            gap: 4px;\n        }\n\n        .mj-sw-update-toast__title {\n            color: var(--mj-text-primary);\n            font-weight: 600;\n            font-size: 14px;\n            letter-spacing: -0.005em;\n        }\n\n        .mj-sw-update-toast__subtitle {\n            color: var(--mj-text-secondary);\n            font-size: 12.5px;\n            line-height: 1.5;\n            margin-bottom: 4px;\n        }\n\n        .mj-sw-update-toast__actions {\n            display: flex;\n            gap: 8px;\n            margin-top: 8px;\n        }\n\n        .mj-sw-update-toast__btn {\n            font: inherit;\n            font-size: 13px;\n            font-weight: 500;\n            cursor: pointer;\n            padding: 7px 14px;\n            border-radius: 8px;\n            border: 1px solid transparent;\n            line-height: 1.2;\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.08s ease;\n        }\n        .mj-sw-update-toast__btn:active {\n            transform: translateY(1px);\n        }\n        .mj-sw-update-toast__btn:focus-visible {\n            outline: 2px solid var(--mj-border-focus);\n            outline-offset: 2px;\n        }\n\n        .mj-sw-update-toast__btn--primary {\n            background: var(--mj-brand-primary);\n            color: var(--mj-text-inverse);\n        }\n        .mj-sw-update-toast__btn--primary:hover {\n            background: var(--mj-brand-primary-hover);\n        }\n        .mj-sw-update-toast__btn--primary:active {\n            background: var(--mj-brand-primary-active);\n        }\n\n        .mj-sw-update-toast__btn--secondary {\n            background: transparent;\n            border-color: var(--mj-border-default);\n            color: var(--mj-text-secondary);\n        }\n        .mj-sw-update-toast__btn--secondary:hover {\n            background: var(--mj-bg-surface-hover);\n            color: var(--mj-text-primary);\n            border-color: var(--mj-border-strong);\n        }\n\n        .mj-sw-update-toast__close {\n            position: absolute;\n            top: 8px;\n            right: 8px;\n            width: 24px;\n            height: 24px;\n            border: none;\n            background: transparent;\n            color: var(--mj-text-muted);\n            border-radius: 6px;\n            cursor: pointer;\n            display: grid;\n            place-items: center;\n            font-size: 12px;\n            transition: background 0.15s ease, color 0.15s ease;\n        }\n        .mj-sw-update-toast__close:hover {\n            background: var(--mj-bg-surface-hover);\n            color: var(--mj-text-primary);\n        }\n        .mj-sw-update-toast__close:focus-visible {\n            outline: 2px solid var(--mj-border-focus);\n            outline-offset: 1px;\n        }\n\n        @media (prefers-reduced-motion: reduce) {\n            .mj-sw-update-toast {\n                animation: none;\n            }\n            .mj-sw-update-toast__icon {\n                animation: none;\n            }\n        }\n    `]\n})\nexport class UpdateNotificationComponent {\n    public readonly updateService = inject(UpdateNotificationService);\n\n    onReload(): void {\n        this.updateService.applyUpdate();\n    }\n\n    onDismiss(): void {\n        this.updateService.dismissForSession();\n    }\n}\n"]}

package/dist/lib/update-notification.service.d.ts

@@ -0,0 +1,92 @@
+import { OnDestroy } from '@angular/core';
+import { VersionReadyEvent } from '@angular/service-worker';
+import { Observable } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare class UpdateNotificationService implements OnDestroy {
+    private readonly _updateAvailable$;
+    private readonly _destroy$;
+    private readonly _swUpdate;
+    /** Last `VERSION_READY` event captured (for diagnostics / tests). */
+    private _lastVersionEvent;
+    /** Handle from `setInterval` for the periodic poll; cleared in ngOnDestroy. */
+    private _pollHandle;
+    /** Bound listener for `visibilitychange`; needs the same reference for removal. */
+    private _visibilityListener;
+    /** Effective poll interval — set in `startAutoCheck()`. */
+    private _pollIntervalMs;
+    constructor();
+    /**
+     * Start a periodic update check on the given interval. Called automatically
+     * by the constructor with `DEFAULT_POLL_INTERVAL_MS`. Consumers may call
+     * this again with a different interval to retune at runtime — the previous
+     * timer is cleared first.
+     *
+     * Pass `0` (or any non-positive number) to disable periodic checking.
+     * Polling is automatically suspended while the tab is hidden and resumed
+     * (with an immediate check) when the tab becomes visible again.
+     */
+    startAutoCheck(intervalMs: number): void;
+    /** Stop the periodic poll started by `startAutoCheck()`. */
+    stopAutoCheck(): void;
+    /**
+     * Attach this service to `window.__mjUpdateNotificationService__` so it can
+     * be poked from the DevTools console. Useful for ops/QA verification of the
+     * update-detection roundtrip without code changes.
+     *
+     * No-op in non-browser contexts.
+     */
+    private exposeDebugHandle;
+    /**
+     * Emits `true` once a new SW-cached version is ready to activate.
+     * Stays `true` until either `applyUpdate()` (which reloads the page) or
+     * `dismissForSession()` (which resets the flag without reloading).
+     */
+    get updateAvailable$(): Observable<boolean>;
+    /** Synchronous accessor for current update-available state. */
+    get isUpdateAvailable(): boolean;
+    /** True if the underlying SwUpdate API is active (SW registered + supported). */
+    get isServiceWorkerEnabled(): boolean;
+    /** The most recent `VERSION_READY` event, if any. Useful for diagnostics. */
+    get lastVersionEvent(): VersionReadyEvent | null;
+    /**
+     * Reload the page to activate the newly-downloaded SW version.
+     *
+     * Implementation note: the SW activates new versions on the next
+     * navigation, not via any in-process API. So we just reload — `SwUpdate`
+     * doesn't expose a non-reload way to swap the running JS without losing
+     * application state, and any such mechanism would be unsafe anyway.
+     *
+     * This method is split out (vs. inlining `location.reload()`) so consumers
+     * can be tested without actually reloading the page.
+     */
+    applyUpdate(): void;
+    /**
+     * Dismiss the prompt for this session without reloading. The flag will
+     * re-fire on the next page load if the SW is still pointing at the
+     * pending version (which it will be, until something triggers a reload).
+     *
+     * Use case: a power user is in the middle of editing something and doesn't
+     * want to interrupt; they'll get prompted again on their next reload.
+     */
+    dismissForSession(): void;
+    /**
+     * Manually nudge the SW to check for an update. The Angular SW polls
+     * automatically on a schedule, but consumers can call this to force an
+     * immediate check (e.g., from a "Check for updates" menu item).
+     *
+     * Returns `true` if a new version was found and downloaded; `false` if
+     * we're already on the latest. Resolves to `false` if the SW is disabled.
+     */
+    checkForUpdate(): Promise<boolean>;
+    /**
+     * Indirection for test injection — overriding `location.reload` directly
+     * is not possible in a JSDOM/happy-dom environment without warnings, and
+     * spying on `globalThis.location` is brittle. This wrapper lets tests
+     * mock the reload via a subclass / `vi.spyOn(service as any, 'performReload')`.
+     */
+    protected performReload(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UpdateNotificationService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<UpdateNotificationService>;
+}
+//# sourceMappingURL=update-notification.service.d.ts.map

package/dist/lib/update-notification.service.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"update-notification.service.d.ts","sourceRoot":"","sources":["../../src/lib/update-notification.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,SAAS,EAAU,MAAM,eAAe,CAAC;AAC9D,OAAO,EAA0B,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACpF,OAAO,EAAmB,UAAU,EAAkB,MAAM,MAAM,CAAC;;AA2CnE,qBACa,yBAA0B,YAAW,SAAS;IACvD,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAuC;IACzE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAuB;IACjD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoB;IAE9C,qEAAqE;IACrE,OAAO,CAAC,iBAAiB,CAAkC;IAE3D,+EAA+E;IAC/E,OAAO,CAAC,WAAW,CAA+C;IAElE,mFAAmF;IACnF,OAAO,CAAC,mBAAmB,CAA6B;IAExD,2DAA2D;IAC3D,OAAO,CAAC,eAAe,CAA4B;;IA6BnD;;;;;;;;;OASG;IACI,cAAc,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IAqB/C,4DAA4D;IACrD,aAAa,IAAI,IAAI;IAW5B;;;;;;OAMG;IACH,OAAO,CAAC,iBAAiB;IAMzB;;;;OAIG;IACH,IAAW,gBAAgB,IAAI,UAAU,CAAC,OAAO,CAAC,CAEjD;IAED,+DAA+D;IAC/D,IAAW,iBAAiB,IAAI,OAAO,CAEtC;IAED,iFAAiF;IACjF,IAAW,sBAAsB,IAAI,OAAO,CAE3C;IAED,6EAA6E;IAC7E,IAAW,gBAAgB,IAAI,iBAAiB,GAAG,IAAI,CAEtD;IAED;;;;;;;;;;OAUG;IACI,WAAW,IAAI,IAAI;IAQ1B;;;;;;;OAOG;IACI,iBAAiB,IAAI,IAAI;IAIhC;;;;;;;OAOG;IACU,cAAc,IAAI,OAAO,CAAC,OAAO,CAAC;IAW/C;;;;;OAKG;IAEH,SAAS,CAAC,aAAa,IAAI,IAAI;IAO/B,WAAW,IAAI,IAAI;yCA5LV,yBAAyB;6CAAzB,yBAAyB;CAkMrC"}

package/dist/lib/update-notification.service.js

@@ -0,0 +1,226 @@
+import { Injectable, inject } from '@angular/core';
+import { SwUpdate } from '@angular/service-worker';
+import { BehaviorSubject, Subject, EMPTY } from 'rxjs';
+import { catchError, filter, takeUntil } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+/**
+ * Coordinates notifying the user when a new app-shell version has been
+ * downloaded by the service worker and is waiting to activate.
+ *
+ * Background — the Angular service worker downloads new versions silently in
+ * the background; the currently-loaded page keeps using the old cached version
+ * until a navigation reload activates the new one. This service watches for
+ * `VERSION_READY` events from `SwUpdate` and exposes them via an observable
+ * the shell can subscribe to (e.g. to render an "Update available" toast).
+ *
+ * Use in MJExplorer:
+ *   1. Inject this service in `AppComponent` (or wherever the shell lives)
+ *   2. Subscribe to `updateAvailable$` and render UI when it emits
+ *   3. Call `applyUpdate()` when the user accepts the prompt — this performs
+ *      a full page reload, which causes the SW to activate the new version
+ *
+ * **Dev note**: when the service worker is disabled (development builds, or
+ * `enableServiceWorker = false` in the environment), `SwUpdate.isEnabled`
+ * returns `false` and this service is effectively a no-op. The shell can
+ * always subscribe; it just never receives an emission.
+ */
+/**
+ * How often (in ms) to ask the SW to check for a new manifest while the tab
+ * is visible. 15 minutes balances responsiveness against pointless network
+ * chatter on idle tabs. Checks are skipped while the tab is hidden (Page
+ * Visibility API), and a check is also fired immediately when the tab becomes
+ * visible after being backgrounded.
+ *
+ * Override via `MJServiceWorkerOptions.pollIntervalMs`.
+ */
+const DEFAULT_POLL_INTERVAL_MS = 15 * 60 * 1000;
+/**
+ * Window-attached debug handle. Type-safe accessor avoids polluting the global
+ * namespace with `any`. Use from DevTools console:
+ *   __mjUpdateNotificationService__.checkForUpdate()
+ *   __mjUpdateNotificationService__.isUpdateAvailable
+ */
+const WINDOW_DEBUG_KEY = '__mjUpdateNotificationService__';
+export class UpdateNotificationService {
+    _updateAvailable$ = new BehaviorSubject(false);
+    _destroy$ = new Subject();
+    _swUpdate = inject(SwUpdate);
+    /** Last `VERSION_READY` event captured (for diagnostics / tests). */
+    _lastVersionEvent = null;
+    /** Handle from `setInterval` for the periodic poll; cleared in ngOnDestroy. */
+    _pollHandle = null;
+    /** Bound listener for `visibilitychange`; needs the same reference for removal. */
+    _visibilityListener = null;
+    /** Effective poll interval — set in `startAutoCheck()`. */
+    _pollIntervalMs = DEFAULT_POLL_INTERVAL_MS;
+    constructor() {
+        if (this._swUpdate.isEnabled) {
+            // Subscribe to all version events; filter to ones that mean a new
+            // version is fully downloaded and waiting to activate.
+            this._swUpdate.versionUpdates
+                .pipe(filter((e) => e.type === 'VERSION_READY'), catchError(err => {
+                // Defensive — observable should never error in practice, but if the
+                // SW connection breaks for any reason, swallow it. Caller can re-init
+                // the service later if needed.
+                // eslint-disable-next-line no-console
+                console.warn('[UpdateNotificationService] versionUpdates errored:', err);
+                return EMPTY;
+            }), takeUntil(this._destroy$))
+                .subscribe((event) => {
+                this._lastVersionEvent = event;
+                this._updateAvailable$.next(true);
+            });
+            this.startAutoCheck(DEFAULT_POLL_INTERVAL_MS);
+            this.exposeDebugHandle();
+        }
+    }
+    /**
+     * Start a periodic update check on the given interval. Called automatically
+     * by the constructor with `DEFAULT_POLL_INTERVAL_MS`. Consumers may call
+     * this again with a different interval to retune at runtime — the previous
+     * timer is cleared first.
+     *
+     * Pass `0` (or any non-positive number) to disable periodic checking.
+     * Polling is automatically suspended while the tab is hidden and resumed
+     * (with an immediate check) when the tab becomes visible again.
+     */
+    startAutoCheck(intervalMs) {
+        this.stopAutoCheck();
+        this._pollIntervalMs = intervalMs;
+        if (!this._swUpdate.isEnabled || intervalMs <= 0)
+            return;
+        this._pollHandle = setInterval(() => {
+            // Only fire when visible. Hidden tabs catch up via the
+            // visibilitychange handler.
+            if (typeof document === 'undefined' || !document.hidden) {
+                void this.checkForUpdate();
+            }
+        }, intervalMs);
+        if (typeof document !== 'undefined') {
+            this._visibilityListener = () => {
+                if (!document.hidden)
+                    void this.checkForUpdate();
+            };
+            document.addEventListener('visibilitychange', this._visibilityListener);
+        }
+    }
+    /** Stop the periodic poll started by `startAutoCheck()`. */
+    stopAutoCheck() {
+        if (this._pollHandle !== null) {
+            clearInterval(this._pollHandle);
+            this._pollHandle = null;
+        }
+        if (this._visibilityListener && typeof document !== 'undefined') {
+            document.removeEventListener('visibilitychange', this._visibilityListener);
+            this._visibilityListener = null;
+        }
+    }
+    /**
+     * Attach this service to `window.__mjUpdateNotificationService__` so it can
+     * be poked from the DevTools console. Useful for ops/QA verification of the
+     * update-detection roundtrip without code changes.
+     *
+     * No-op in non-browser contexts.
+     */
+    exposeDebugHandle() {
+        if (typeof window === 'undefined')
+            return;
+        // Cast through unknown to avoid a global declaration just for the debug hook.
+        window[WINDOW_DEBUG_KEY] = this;
+    }
+    /**
+     * Emits `true` once a new SW-cached version is ready to activate.
+     * Stays `true` until either `applyUpdate()` (which reloads the page) or
+     * `dismissForSession()` (which resets the flag without reloading).
+     */
+    get updateAvailable$() {
+        return this._updateAvailable$.asObservable();
+    }
+    /** Synchronous accessor for current update-available state. */
+    get isUpdateAvailable() {
+        return this._updateAvailable$.value;
+    }
+    /** True if the underlying SwUpdate API is active (SW registered + supported). */
+    get isServiceWorkerEnabled() {
+        return this._swUpdate.isEnabled;
+    }
+    /** The most recent `VERSION_READY` event, if any. Useful for diagnostics. */
+    get lastVersionEvent() {
+        return this._lastVersionEvent;
+    }
+    /**
+     * Reload the page to activate the newly-downloaded SW version.
+     *
+     * Implementation note: the SW activates new versions on the next
+     * navigation, not via any in-process API. So we just reload — `SwUpdate`
+     * doesn't expose a non-reload way to swap the running JS without losing
+     * application state, and any such mechanism would be unsafe anyway.
+     *
+     * This method is split out (vs. inlining `location.reload()`) so consumers
+     * can be tested without actually reloading the page.
+     */
+    applyUpdate() {
+        // Hide the prompt before reloading so it doesn't briefly flash again
+        // on the new page if anything in the shell renders before the SW
+        // activates.
+        this._updateAvailable$.next(false);
+        this.performReload();
+    }
+    /**
+     * Dismiss the prompt for this session without reloading. The flag will
+     * re-fire on the next page load if the SW is still pointing at the
+     * pending version (which it will be, until something triggers a reload).
+     *
+     * Use case: a power user is in the middle of editing something and doesn't
+     * want to interrupt; they'll get prompted again on their next reload.
+     */
+    dismissForSession() {
+        this._updateAvailable$.next(false);
+    }
+    /**
+     * Manually nudge the SW to check for an update. The Angular SW polls
+     * automatically on a schedule, but consumers can call this to force an
+     * immediate check (e.g., from a "Check for updates" menu item).
+     *
+     * Returns `true` if a new version was found and downloaded; `false` if
+     * we're already on the latest. Resolves to `false` if the SW is disabled.
+     */
+    async checkForUpdate() {
+        if (!this._swUpdate.isEnabled)
+            return false;
+        try {
+            return await this._swUpdate.checkForUpdate();
+        }
+        catch (err) {
+            // eslint-disable-next-line no-console
+            console.warn('[UpdateNotificationService] checkForUpdate failed:', err);
+            return false;
+        }
+    }
+    /**
+     * Indirection for test injection — overriding `location.reload` directly
+     * is not possible in a JSDOM/happy-dom environment without warnings, and
+     * spying on `globalThis.location` is brittle. This wrapper lets tests
+     * mock the reload via a subclass / `vi.spyOn(service as any, 'performReload')`.
+     */
+    /* istanbul ignore next — exercised manually, hard to unit-test cleanly */
+    performReload() {
+        // Use document.location for cross-environment reliability. `window`
+        // can be shadowed in test environments; `document.location` is more
+        // consistently available.
+        document.location.reload();
+    }
+    ngOnDestroy() {
+        this.stopAutoCheck();
+        this._destroy$.next();
+        this._destroy$.complete();
+        this._updateAvailable$.complete();
+    }
+    static ɵfac = function UpdateNotificationService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UpdateNotificationService)(); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: UpdateNotificationService, factory: UpdateNotificationService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UpdateNotificationService, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], () => [], null); })();
+//# sourceMappingURL=update-notification.service.js.map

package/dist/lib/update-notification.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"update-notification.service.js","sourceRoot":"","sources":["../../src/lib/update-notification.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAmC,MAAM,yBAAyB,CAAC;AACpF,OAAO,EAAE,eAAe,EAAc,OAAO,EAAE,KAAK,EAAE,MAAM,MAAM,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;;AAE/D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH;;;;;;;;GAQG;AACH,MAAM,wBAAwB,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AAEhD;;;;;GAKG;AACH,MAAM,gBAAgB,GAAG,iCAAiC,CAAC;AAG3D,MAAM,OAAO,yBAAyB;IACjB,iBAAiB,GAAG,IAAI,eAAe,CAAU,KAAK,CAAC,CAAC;IACxD,SAAS,GAAG,IAAI,OAAO,EAAQ,CAAC;IAChC,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAE9C,qEAAqE;IAC7D,iBAAiB,GAA6B,IAAI,CAAC;IAE3D,+EAA+E;IACvE,WAAW,GAA0C,IAAI,CAAC;IAElE,mFAAmF;IAC3E,mBAAmB,GAAwB,IAAI,CAAC;IAExD,2DAA2D;IACnD,eAAe,GAAG,wBAAwB,CAAC;IAEnD;QACI,IAAI,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC;YAC3B,kEAAkE;YAClE,uDAAuD;YACvD,IAAI,CAAC,SAAS,CAAC,cAAc;iBACxB,IAAI,CACD,MAAM,CAAC,CAAC,CAAe,EAA0B,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,eAAe,CAAC,EAC/E,UAAU,CAAC,GAAG,CAAC,EAAE;gBACb,oEAAoE;gBACpE,sEAAsE;gBACtE,+BAA+B;gBAC/B,sCAAsC;gBACtC,OAAO,CAAC,IAAI,CAAC,qDAAqD,EAAE,GAAG,CAAC,CAAC;gBACzE,OAAO,KAAK,CAAC;YACjB,CAAC,CAAC,EACF,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAC5B;iBACA,SAAS,CAAC,CAAC,KAAwB,EAAE,EAAE;gBACpC,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;gBAC/B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACtC,CAAC,CAAC,CAAC;YAEP,IAAI,CAAC,cAAc,CAAC,wBAAwB,CAAC,CAAC;YAC9C,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC7B,CAAC;IACL,CAAC;IAED;;;;;;;;;OASG;IACI,cAAc,CAAC,UAAkB;QACpC,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,eAAe,GAAG,UAAU,CAAC;QAClC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,IAAI,UAAU,IAAI,CAAC;YAAE,OAAO;QAEzD,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;YAChC,uDAAuD;YACvD,4BAA4B;YAC5B,IAAI,OAAO,QAAQ,KAAK,WAAW,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;gBACtD,KAAK,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/B,CAAC;QACL,CAAC,EAAE,UAAU,CAAC,CAAC;QAEf,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;YAClC,IAAI,CAAC,mBAAmB,GAAG,GAAG,EAAE;gBAC5B,IAAI,CAAC,QAAQ,CAAC,MAAM;oBAAE,KAAK,IAAI,CAAC,cAAc,EAAE,CAAC;YACrD,CAAC,CAAC;YACF,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAC5E,CAAC;IACL,CAAC;IAED,4DAA4D;IACrD,aAAa;QAChB,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,EAAE,CAAC;YAC5B,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAChC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QAC5B,CAAC;QACD,IAAI,IAAI,CAAC,mBAAmB,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;YAC9D,QAAQ,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;YAC3E,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;QACpC,CAAC;IACL,CAAC;IAED;;;;;;OAMG;IACK,iBAAiB;QACrB,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,OAAO;QAC1C,8EAA8E;QAC7E,MAA6C,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IAC5E,CAAC;IAED;;;;OAIG;IACH,IAAW,gBAAgB;QACvB,OAAO,IAAI,CAAC,iBAAiB,CAAC,YAAY,EAAE,CAAC;IACjD,CAAC;IAED,+DAA+D;IAC/D,IAAW,iBAAiB;QACxB,OAAO,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;IACxC,CAAC;IAED,iFAAiF;IACjF,IAAW,sBAAsB;QAC7B,OAAO,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC;IACpC,CAAC;IAED,6EAA6E;IAC7E,IAAW,gBAAgB;QACvB,OAAO,IAAI,CAAC,iBAAiB,CAAC;IAClC,CAAC;IAED;;;;;;;;;;OAUG;IACI,WAAW;QACd,qEAAqE;QACrE,iEAAiE;QACjE,aAAa;QACb,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,IAAI,CAAC,aAAa,EAAE,CAAC;IACzB,CAAC;IAED;;;;;;;OAOG;IACI,iBAAiB;QACpB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC;IAED;;;;;;;OAOG;IACI,KAAK,CAAC,cAAc;QACvB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS;YAAE,OAAO,KAAK,CAAC;QAC5C,IAAI,CAAC;YACD,OAAO,MAAM,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,CAAC;QACjD,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACX,sCAAsC;YACtC,OAAO,CAAC,IAAI,CAAC,oDAAoD,EAAE,GAAG,CAAC,CAAC;YACxE,OAAO,KAAK,CAAC;QACjB,CAAC;IACL,CAAC;IAED;;;;;OAKG;IACH,0EAA0E;IAChE,aAAa;QACnB,oEAAoE;QACpE,oEAAoE;QACpE,0BAA0B;QAC1B,QAAQ,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;IAC/B,CAAC;IAED,WAAW;QACP,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACtB,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;QAC1B,IAAI,CAAC,iBAAiB,CAAC,QAAQ,EAAE,CAAC;IACtC,CAAC;mHAjMQ,yBAAyB;gEAAzB,yBAAyB,WAAzB,yBAAyB,mBADZ,MAAM;;iFACnB,yBAAyB;cADrC,UAAU;eAAC,EAAE,UAAU,EAAE,MAAM,EAAE","sourcesContent":["import { Injectable, OnDestroy, inject } from '@angular/core';\nimport { SwUpdate, VersionEvent, VersionReadyEvent } from '@angular/service-worker';\nimport { BehaviorSubject, Observable, Subject, EMPTY } from 'rxjs';\nimport { catchError, filter, takeUntil } from 'rxjs/operators';\n\n/**\n * Coordinates notifying the user when a new app-shell version has been\n * downloaded by the service worker and is waiting to activate.\n *\n * Background — the Angular service worker downloads new versions silently in\n * the background; the currently-loaded page keeps using the old cached version\n * until a navigation reload activates the new one. This service watches for\n * `VERSION_READY` events from `SwUpdate` and exposes them via an observable\n * the shell can subscribe to (e.g. to render an \"Update available\" toast).\n *\n * Use in MJExplorer:\n *   1. Inject this service in `AppComponent` (or wherever the shell lives)\n *   2. Subscribe to `updateAvailable$` and render UI when it emits\n *   3. Call `applyUpdate()` when the user accepts the prompt — this performs\n *      a full page reload, which causes the SW to activate the new version\n *\n * **Dev note**: when the service worker is disabled (development builds, or\n * `enableServiceWorker = false` in the environment), `SwUpdate.isEnabled`\n * returns `false` and this service is effectively a no-op. The shell can\n * always subscribe; it just never receives an emission.\n */\n/**\n * How often (in ms) to ask the SW to check for a new manifest while the tab\n * is visible. 15 minutes balances responsiveness against pointless network\n * chatter on idle tabs. Checks are skipped while the tab is hidden (Page\n * Visibility API), and a check is also fired immediately when the tab becomes\n * visible after being backgrounded.\n *\n * Override via `MJServiceWorkerOptions.pollIntervalMs`.\n */\nconst DEFAULT_POLL_INTERVAL_MS = 15 * 60 * 1000;\n\n/**\n * Window-attached debug handle. Type-safe accessor avoids polluting the global\n * namespace with `any`. Use from DevTools console:\n *   __mjUpdateNotificationService__.checkForUpdate()\n *   __mjUpdateNotificationService__.isUpdateAvailable\n */\nconst WINDOW_DEBUG_KEY = '__mjUpdateNotificationService__';\n\n@Injectable({ providedIn: 'root' })\nexport class UpdateNotificationService implements OnDestroy {\n    private readonly _updateAvailable$ = new BehaviorSubject<boolean>(false);\n    private readonly _destroy$ = new Subject<void>();\n    private readonly _swUpdate = inject(SwUpdate);\n\n    /** Last `VERSION_READY` event captured (for diagnostics / tests). */\n    private _lastVersionEvent: VersionReadyEvent | null = null;\n\n    /** Handle from `setInterval` for the periodic poll; cleared in ngOnDestroy. */\n    private _pollHandle: ReturnType<typeof setInterval> | null = null;\n\n    /** Bound listener for `visibilitychange`; needs the same reference for removal. */\n    private _visibilityListener: (() => void) | null = null;\n\n    /** Effective poll interval — set in `startAutoCheck()`. */\n    private _pollIntervalMs = DEFAULT_POLL_INTERVAL_MS;\n\n    constructor() {\n        if (this._swUpdate.isEnabled) {\n            // Subscribe to all version events; filter to ones that mean a new\n            // version is fully downloaded and waiting to activate.\n            this._swUpdate.versionUpdates\n                .pipe(\n                    filter((e: VersionEvent): e is VersionReadyEvent => e.type === 'VERSION_READY'),\n                    catchError(err => {\n                        // Defensive — observable should never error in practice, but if the\n                        // SW connection breaks for any reason, swallow it. Caller can re-init\n                        // the service later if needed.\n                        // eslint-disable-next-line no-console\n                        console.warn('[UpdateNotificationService] versionUpdates errored:', err);\n                        return EMPTY;\n                    }),\n                    takeUntil(this._destroy$)\n                )\n                .subscribe((event: VersionReadyEvent) => {\n                    this._lastVersionEvent = event;\n                    this._updateAvailable$.next(true);\n                });\n\n            this.startAutoCheck(DEFAULT_POLL_INTERVAL_MS);\n            this.exposeDebugHandle();\n        }\n    }\n\n    /**\n     * Start a periodic update check on the given interval. Called automatically\n     * by the constructor with `DEFAULT_POLL_INTERVAL_MS`. Consumers may call\n     * this again with a different interval to retune at runtime — the previous\n     * timer is cleared first.\n     *\n     * Pass `0` (or any non-positive number) to disable periodic checking.\n     * Polling is automatically suspended while the tab is hidden and resumed\n     * (with an immediate check) when the tab becomes visible again.\n     */\n    public startAutoCheck(intervalMs: number): void {\n        this.stopAutoCheck();\n        this._pollIntervalMs = intervalMs;\n        if (!this._swUpdate.isEnabled || intervalMs <= 0) return;\n\n        this._pollHandle = setInterval(() => {\n            // Only fire when visible. Hidden tabs catch up via the\n            // visibilitychange handler.\n            if (typeof document === 'undefined' || !document.hidden) {\n                void this.checkForUpdate();\n            }\n        }, intervalMs);\n\n        if (typeof document !== 'undefined') {\n            this._visibilityListener = () => {\n                if (!document.hidden) void this.checkForUpdate();\n            };\n            document.addEventListener('visibilitychange', this._visibilityListener);\n        }\n    }\n\n    /** Stop the periodic poll started by `startAutoCheck()`. */\n    public stopAutoCheck(): void {\n        if (this._pollHandle !== null) {\n            clearInterval(this._pollHandle);\n            this._pollHandle = null;\n        }\n        if (this._visibilityListener && typeof document !== 'undefined') {\n            document.removeEventListener('visibilitychange', this._visibilityListener);\n            this._visibilityListener = null;\n        }\n    }\n\n    /**\n     * Attach this service to `window.__mjUpdateNotificationService__` so it can\n     * be poked from the DevTools console. Useful for ops/QA verification of the\n     * update-detection roundtrip without code changes.\n     *\n     * No-op in non-browser contexts.\n     */\n    private exposeDebugHandle(): void {\n        if (typeof window === 'undefined') return;\n        // Cast through unknown to avoid a global declaration just for the debug hook.\n        (window as unknown as Record<string, unknown>)[WINDOW_DEBUG_KEY] = this;\n    }\n\n    /**\n     * Emits `true` once a new SW-cached version is ready to activate.\n     * Stays `true` until either `applyUpdate()` (which reloads the page) or\n     * `dismissForSession()` (which resets the flag without reloading).\n     */\n    public get updateAvailable$(): Observable<boolean> {\n        return this._updateAvailable$.asObservable();\n    }\n\n    /** Synchronous accessor for current update-available state. */\n    public get isUpdateAvailable(): boolean {\n        return this._updateAvailable$.value;\n    }\n\n    /** True if the underlying SwUpdate API is active (SW registered + supported). */\n    public get isServiceWorkerEnabled(): boolean {\n        return this._swUpdate.isEnabled;\n    }\n\n    /** The most recent `VERSION_READY` event, if any. Useful for diagnostics. */\n    public get lastVersionEvent(): VersionReadyEvent | null {\n        return this._lastVersionEvent;\n    }\n\n    /**\n     * Reload the page to activate the newly-downloaded SW version.\n     *\n     * Implementation note: the SW activates new versions on the next\n     * navigation, not via any in-process API. So we just reload — `SwUpdate`\n     * doesn't expose a non-reload way to swap the running JS without losing\n     * application state, and any such mechanism would be unsafe anyway.\n     *\n     * This method is split out (vs. inlining `location.reload()`) so consumers\n     * can be tested without actually reloading the page.\n     */\n    public applyUpdate(): void {\n        // Hide the prompt before reloading so it doesn't briefly flash again\n        // on the new page if anything in the shell renders before the SW\n        // activates.\n        this._updateAvailable$.next(false);\n        this.performReload();\n    }\n\n    /**\n     * Dismiss the prompt for this session without reloading. The flag will\n     * re-fire on the next page load if the SW is still pointing at the\n     * pending version (which it will be, until something triggers a reload).\n     *\n     * Use case: a power user is in the middle of editing something and doesn't\n     * want to interrupt; they'll get prompted again on their next reload.\n     */\n    public dismissForSession(): void {\n        this._updateAvailable$.next(false);\n    }\n\n    /**\n     * Manually nudge the SW to check for an update. The Angular SW polls\n     * automatically on a schedule, but consumers can call this to force an\n     * immediate check (e.g., from a \"Check for updates\" menu item).\n     *\n     * Returns `true` if a new version was found and downloaded; `false` if\n     * we're already on the latest. Resolves to `false` if the SW is disabled.\n     */\n    public async checkForUpdate(): Promise<boolean> {\n        if (!this._swUpdate.isEnabled) return false;\n        try {\n            return await this._swUpdate.checkForUpdate();\n        } catch (err) {\n            // eslint-disable-next-line no-console\n            console.warn('[UpdateNotificationService] checkForUpdate failed:', err);\n            return false;\n        }\n    }\n\n    /**\n     * Indirection for test injection — overriding `location.reload` directly\n     * is not possible in a JSDOM/happy-dom environment without warnings, and\n     * spying on `globalThis.location` is brittle. This wrapper lets tests\n     * mock the reload via a subclass / `vi.spyOn(service as any, 'performReload')`.\n     */\n    /* istanbul ignore next — exercised manually, hard to unit-test cleanly */\n    protected performReload(): void {\n        // Use document.location for cross-environment reliability. `window`\n        // can be shadowed in test environments; `document.location` is more\n        // consistently available.\n        document.location.reload();\n    }\n\n    ngOnDestroy(): void {\n        this.stopAutoCheck();\n        this._destroy$.next();\n        this._destroy$.complete();\n        this._updateAvailable$.complete();\n    }\n}\n"]}

package/dist/public-api.d.ts

@@ -0,0 +1,4 @@
+export * from './lib/mj-service-worker.module';
+export * from './lib/update-notification.service';
+export * from './lib/update-notification.component';
+//# sourceMappingURL=public-api.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAIA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC"}

package/dist/public-api.js

@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of @memberjunction/ng-explorer-service-worker
+ */
+export * from './lib/mj-service-worker.module';
+export * from './lib/update-notification.service';
+export * from './lib/update-notification.component';
+//# sourceMappingURL=public-api.js.map

package/dist/public-api.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-api.js","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,gCAAgC,CAAC;AAC/C,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC","sourcesContent":["/*\n * Public API Surface of @memberjunction/ng-explorer-service-worker\n */\n\nexport * from './lib/mj-service-worker.module';\nexport * from './lib/update-notification.service';\nexport * from './lib/update-notification.component';\n"]}

package/ngsw-config.json

@@ -0,0 +1,52 @@
+{
+  "$schema": "../../../../node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app-shell",
+      "installMode": "prefetch",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.html",
+          "/manifest.webmanifest",
+          "/main-*.js",
+          "/polyfills-*.js",
+          "/styles-*.css"
+        ]
+      }
+    },
+    {
+      "name": "lazy-chunks",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/chunk-*.js"
+        ]
+      }
+    },
+    {
+      "name": "lazy-assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/**",
+          "/media/**",
+          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2|ico)"
+        ]
+      }
+    }
+  ],
+  "navigationUrls": [
+    "/**",
+    "!/**/graphql",
+    "!/**/graphql-ws",
+    "!/api/**",
+    "!/auth/**",
+    "!/**/?msal*",
+    "!/**/*__*"
+  ]
+}

package/package.json

@@ -1,10 +1,44 @@
 {
   "name": "@memberjunction/ng-explorer-service-worker",
-  "version": "0.0.1",
-  "description": "OIDC trusted publishing setup package for @memberjunction/ng-explorer-service-worker",
+  "version": "5.32.0",
+  "description": "MemberJunction: Service worker app-shell pre-cache + update notification UI for MJ Explorer",
+  "main": "./dist/public-api.js",
+  "typings": "./dist/public-api.d.ts",
+  "files": [
+    "/dist",
+    "/ngsw-config.json",
+    "/scripts"
+  ],
+  "scripts": {
+    "test": "vitest run",
+    "build": "ngc"
+  },
   "keywords": [
-    "oidc",
-    "trusted-publishing",
-    "setup"
-  ]
+    "MemberJunction",
+    "Angular",
+    "ServiceWorker",
+    "PWA",
+    "Explorer"
+  ],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@angular/compiler": "21.1.3",
+    "@angular/compiler-cli": "21.1.3",
+    "vitest": "^4.0.18"
+  },
+  "peerDependencies": {
+    "@angular/common": "21.1.3",
+    "@angular/core": "21.1.3",
+    "@angular/service-worker": "21.1.3",
+    "rxjs": "^7.8.0"
+  },
+  "dependencies": {
+    "tslib": "^2.8.1"
+  },
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MemberJunction/MJ"
+  }
 }

package/scripts/verify-sw-cache-shape.js

@@ -0,0 +1,107 @@
+#!/usr/bin/env node
+/**
+ * Verify that every root-level .js file in the consumer's prod build matches
+ * one of the filename prefixes that `ngsw-config.json` knows how to classify.
+ *
+ * Why this exists: Angular's `application` builder emits all bundles flat at
+ * the dist root with hashed filenames. Our `ngsw-config.json` uses prefix
+ * globs (`main-*.js`, `polyfills-*.js`, `chunk-*.js`, `styles-*.css`) to
+ * decide which group each file belongs to (eager prefetch vs lazy). If a
+ * future Angular release introduces a new prefix (`runtime-*`, `vendor-*`,
+ * something nobody saw coming), the SW would silently *not* cache those
+ * files — leaving offline users with a half-broken app. This gate fails the
+ * build the moment that happens, forcing a conscious update to the config.
+ *
+ * Usage:
+ *   node node_modules/@memberjunction/ng-explorer-service-worker/scripts/verify-sw-cache-shape.js \
+ *        path/to/dist/<app>/browser
+ *
+ * Suggested wire-up: add a `postbuild` script to your app's package.json:
+ *   "postbuild": "node node_modules/.../verify-sw-cache-shape.js dist/<app>/browser"
+ *
+ * Exits 0 on success (every root JS file matches a known prefix), 1 on
+ * failure (with a diagnostic listing the unrecognized files).
+ */
+
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+const KNOWN_JS_PREFIXES = ['main-', 'polyfills-', 'chunk-', 'styles-'];
+const KNOWN_CSS_PREFIXES = ['styles-'];
+
+// SW-infrastructure files that the SW itself manages — NOT application assets.
+// These live at the dist root but should never appear in any asset group.
+const SW_INFRASTRUCTURE_FILES = new Set([
+  'ngsw-worker.js',
+  'ngsw.json',
+  'safety-worker.js',
+  'worker-basic.min.js',
+]);
+
+function fail(message) {
+  // eslint-disable-next-line no-console
+  console.error('\n[verify-sw-cache-shape] ❌ ' + message + '\n');
+  process.exit(1);
+}
+
+function ok(message) {
+  // eslint-disable-next-line no-console
+  console.log('[verify-sw-cache-shape] ✅ ' + message);
+}
+
+const distArg = process.argv[2];
+if (!distArg) {
+  fail('Usage: verify-sw-cache-shape.js <path-to-browser-dist>');
+}
+
+const distDir = path.resolve(distArg);
+if (!fs.existsSync(distDir) || !fs.statSync(distDir).isDirectory()) {
+  fail('Directory not found: ' + distDir);
+}
+
+const entries = fs.readdirSync(distDir, { withFileTypes: true });
+const rootJs = entries
+  .filter((e) => e.isFile() && e.name.endsWith('.js'))
+  .map((e) => e.name);
+const rootCss = entries
+  .filter((e) => e.isFile() && e.name.endsWith('.css'))
+  .map((e) => e.name);
+
+const unknownJs = rootJs.filter((name) => {
+  if (SW_INFRASTRUCTURE_FILES.has(name)) return false;
+  return !KNOWN_JS_PREFIXES.some((p) => name.startsWith(p));
+});
+
+const unknownCss = rootCss.filter(
+  (name) => !KNOWN_CSS_PREFIXES.some((p) => name.startsWith(p))
+);
+
+if (unknownJs.length > 0 || unknownCss.length > 0) {
+  const lines = [
+    'Unrecognized root-level files in dist — these are NOT classified by',
+    'ngsw-config.json and will silently bypass the service worker cache:',
+    '',
+  ];
+  if (unknownJs.length > 0) {
+    lines.push('  Unrecognized .js prefixes:');
+    unknownJs.forEach((n) => lines.push('    - ' + n));
+  }
+  if (unknownCss.length > 0) {
+    lines.push('  Unrecognized .css prefixes:');
+    unknownCss.forEach((n) => lines.push('    - ' + n));
+  }
+  lines.push('');
+  lines.push('Either:');
+  lines.push('  1. Update @memberjunction/ng-explorer-service-worker/ngsw-config.json');
+  lines.push('     to add an asset-group entry for the new prefix.');
+  lines.push('  2. Update KNOWN_JS_PREFIXES / KNOWN_CSS_PREFIXES in this script');
+  lines.push('     if the file should be intentionally excluded from caching.');
+  fail(lines.join('\n'));
+}
+
+ok(
+  `${rootJs.length} root .js + ${rootCss.length} root .css verified ` +
+    `(${SW_INFRASTRUCTURE_FILES.size} SW infrastructure files ignored)`
+);