@mouryaamit/nx-polystack 0.0.0-stage → 1.0.1

package/dist/src/generators/lib/files/pii/src/lib/pii-mask.ts__template__

@@ -0,0 +1,117 @@
+/**
+ * PII masking without Angular: plain functions, unit-testable. A value that does not look like
+ * its format is masked completely (fail closed), never shown — in any script (Devanagari digits,
+ * full-width letters and names in Indian scripts are masked too).
+ */
+export interface PiiMaskRule {
+  /** The value must match (after trimming) or it is masked completely. */
+  valid?: RegExp;
+  /** Characters (letters and digits) left visible at the start. */
+  visibleStart?: number;
+  /** Characters left visible at the end. At least half of them stay masked whatever is set. */
+  visibleEnd?: number;
+  /** Full control: returns the masked text (`valid` is still checked first). */
+  mask?: (value: string, maskChar: string) => string;
+}
+
+export interface PiiMaskOptions {
+  /** Character that replaces hidden characters (default X; only its first character is used). */
+  maskChar?: string;
+  /** Extra or replacement formats, by name. */
+  rules?: Record<string, PiiMaskRule>;
+}
+
+/** Letters, combining marks (e.g. Devanagari vowel signs) and digits of every script. */
+const MASKABLE = /[\p{L}\p{M}\p{N}]/gu;
+
+const digitsOf = (v: string) => v.replace(/\D/g, '');
+
+/** Built-in formats. */
+export const PII_FORMATS: Readonly<Record<string, PiiMaskRule>> = {
+  /** PAN: ABCDE1234F → XXXXX1234F */
+  pan: {
+    valid: /^[A-Za-z]{5}\d{4}[A-Za-z]$/,
+    mask: (v, c) => c.repeat(5) + v.slice(5).toUpperCase(),
+  },
+  /** Aadhaar: 1234 5678 9012 → XXXX XXXX 9012 */
+  aadhaar: {
+    valid: /^\d{4}[\s-]?\d{4}[\s-]?\d{4}$/,
+    mask: (v, c) => `${c.repeat(4)} ${c.repeat(4)} ${digitsOf(v).slice(8)}`,
+  },
+  /** Mobile: +91 98765 43210 → +91 XXXXX X3210, +919876543210 → +91XXXXXX3210 */
+  mobile: {
+    valid: /^(\+\d{1,3}?[\s-]?)?\d{5}[\s-]?\d{5}$/,
+    mask: (v, c) => {
+      // The same anchored split as `valid`: the country code is the shortest prefix that leaves
+      // a ten-digit number.
+      const m = /^(\+\d{1,3}?[\s-]?)?(\d{5}[\s-]?\d{5})$/.exec(v);
+      return m ? (m[1] ?? '') + maskChars(m[2], c, 0, 4) : maskChars(v, c);
+    },
+  },
+  /** Email: asha.k@example.com → aXXX@example.com (one-letter names are masked too) */
+  email: {
+    valid: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+    mask: (v, c) => {
+      const at = v.lastIndexOf('@');
+      const local = Array.from(v.slice(0, at));
+      return `${local.length > 1 ? local[0] : c}${c.repeat(3)}${v.slice(at)}`;
+    },
+  },
+  /** Bank account number: last 4 visible */
+  account: { valid: /^\d{6,18}$/, visibleEnd: 4 },
+  /** Card number: 4111 1111 1111 1111 → XXXX XXXX XXXX 1111 */
+  card: {
+    valid: /^(?=(?:\D*\d){12,19}\D*$)[\d\s-]+$/,
+    visibleEnd: 4,
+  },
+  /** IFSC: not personal, shown as it is when valid */
+  ifsc: { valid: /^[A-Za-z]{4}0[A-Za-z0-9]{6}$/, mask: (v) => v.toUpperCase() },
+};
+
+/**
+ * Masks letters and digits (any script), keeping separators and the first/last visible ones;
+ * at most half of them are ever shown.
+ */
+export function maskChars(
+  value: string,
+  maskChar: string,
+  visibleStart = 0,
+  visibleEnd = 0,
+): string {
+  const total = (value.match(MASKABLE) ?? []).length;
+  const shown = Math.floor(total / 2);
+  const end = Math.min(Math.max(visibleEnd, 0), shown);
+  const start = Math.min(Math.max(visibleStart, 0), shown - end);
+  let seen = 0;
+  return value.replace(MASKABLE, (ch) => {
+    seen++;
+    return seen <= start || seen > total - end ? ch : maskChar;
+  });
+}
+
+/** The mask character: the first character of the option, else X. */
+function maskCharOf(option: unknown): string {
+  const first = Array.from(typeof option === 'string' ? option : '')[0];
+  return first && first.trim() !== '' ? first : 'X';
+}
+
+/** `value` masked as `format`; empty for null/undefined; fully masked when it does not match. */
+export function maskPii(value: unknown, format: string, options: PiiMaskOptions = {}): string {
+  if (value === null || value === undefined) return '';
+  const text = String(value).trim();
+  if (text === '') return '';
+  const maskChar = maskCharOf(options.maskChar);
+  const rules = options.rules ?? {};
+  const rule = Object.prototype.hasOwnProperty.call(rules, format)
+    ? rules[format]
+    : Object.prototype.hasOwnProperty.call(PII_FORMATS, format)
+    ? PII_FORMATS[format]
+    : undefined;
+  if (!rule) return maskChars(text, maskChar);
+  if (rule.valid) {
+    rule.valid.lastIndex = 0; // a /g or /y pattern keeps state between test() calls
+    if (!rule.valid.test(text)) return maskChars(text, maskChar);
+  }
+  if (rule.mask) return rule.mask(text, maskChar);
+  return maskChars(text, maskChar, rule.visibleStart ?? 0, rule.visibleEnd ?? 0);
+}

package/dist/src/generators/lib/files/session/README.md__template__

@@ -0,0 +1,39 @@
+# <%= importPath %>
+
+Session and idle timeout for Angular apps. It reports; it never signs anyone out — logout, tokens
+and server calls stay in the app.
+
+```ts
+// app.module.ts (root module only)
+imports: [SessionTimeoutModule.forRoot({ idleMs: 15 * 60_000, warningMs: 60_000, absoluteMs: 8 * 60 * 60_000 })]
+
+// after login (loginTime in milliseconds, persisted so a reload keeps the absolute limit)
+this.session.start(loginTime);
+this.session.timeout$.subscribe((reason) => this.auth.logout(reason));
+this.session.stoppedElsewhere$.subscribe(() => this.auth.logout('elsewhere'));
+// in auth.logout()
+this.session.stop();
+```
+
+```html
+<<%= prefix %>-session-warning (signOut)="auth.logout()"></<%= prefix %>-session-warning>
+```
+
+- **Idle**: mouse, keys, touch, wheel and scroll on the document count as activity
+  (`activityEvents`), also while the warning is shown; `idleMs` without activity times the
+  session out. Activity inside iframes is not seen.
+- **Warning**: `warningMs` before the timeout `state$` turns to `warning` and `warning$` counts
+  down the seconds; `extend()` (the component's "Stay signed in") counts as activity.
+- **Absolute limit** (`absoluteMs`, optional): the session ends that long after the `start()`
+  time, whatever the activity; "Stay signed in" is not offered then.
+- **States**: `stopped`, `active`, `warning`, `timedOut`. Sign out on `timeout$` (once per
+  session); `state$` is for the UI.
+- **Tabs**: activity, timeouts and logouts are shared between the app's tabs (BroadcastChannel,
+  or localStorage events where it is missing; the key includes the app's base path, so two apps
+  on one domain stay apart). A tab that slept checks the others' last activity before timing out.
+  `stoppedElsewhere$` fires when another tab signs out: sign this one out too.
+- **Warning component**: non-modal, moves focus to its first button, announces the time left to
+  screen readers when it opens and at 30, 10 and 5 seconds; `[texts]` replaces the English texts.
+- Timers and messages from other tabs run outside Angular's zone; the state is emitted only when
+  it changes (every second during the warning). Nothing runs during server-side rendering.
+- `sessionState()` in `session-clock.ts` is the timing logic without Angular, for tests.

package/dist/src/generators/lib/files/session/src/index.ts__template__

@@ -0,0 +1,5 @@
+export * from './lib/session-clock';
+export * from './lib/session-timeout.config';
+export * from './lib/session-timeout.service';
+export * from './lib/session-timeout.module';
+export * from './lib/session-warning/session-warning.component';

package/dist/src/generators/lib/files/session/src/lib/session-clock.ts__template__

@@ -0,0 +1,113 @@
+/**
+ * Session timing without Angular or RxJS: what the session looks like at a given moment.
+ * Kept separate so it can be unit-tested with plain numbers.
+ */
+export interface SessionTimeoutConfig {
+  /** Time without user activity before the session times out (ms). */
+  idleMs: number;
+  /** How long before the timeout the warning starts (ms). */
+  warningMs: number;
+  /** Maximum session length since start, whatever the activity (ms); unset: no limit. */
+  absoluteMs?: number;
+  /** DOM events on the document that count as activity. */
+  activityEvents: string[];
+  /**
+   * BroadcastChannel / localStorage key shared by the app's tabs. The app's base path is added,
+   * so two apps on one domain (/retail/, /corporate/) do not share sessions.
+   */
+  channelName: string;
+  /** How often the state is checked (ms). */
+  tickMs: number;
+}
+
+export const DEFAULT_SESSION_TIMEOUT: SessionTimeoutConfig = {
+  idleMs: 15 * 60 * 1000,
+  warningMs: 60 * 1000,
+  activityEvents: ['mousemove', 'mousedown', 'keydown', 'touchstart', 'wheel', 'scroll'],
+  channelName: 'session-timeout',
+  tickMs: 1000,
+};
+
+export type SessionStatus = 'stopped' | 'active' | 'warning' | 'timedOut';
+export type TimeoutReason = 'idle' | 'absolute';
+
+export interface SessionState {
+  status: SessionStatus;
+  /** Time left before the timeout (ms); 0 when stopped or timed out. */
+  remainingMs: number;
+  /** Which limit comes first: inactivity, or the absolute session length. */
+  reason?: TimeoutReason;
+}
+
+/** The session at `now`, given when it started and when the user was last active. */
+export function sessionState(
+  now: number,
+  startedAt: number,
+  lastActivity: number,
+  config: SessionTimeoutConfig,
+): SessionState {
+  // A clock that went back must not extend the session: times in the future count as now.
+  const last = Math.min(lastActivity, now);
+  const started = Math.min(startedAt, now);
+  const idleLeft = last + config.idleMs - now;
+  const absoluteLeft =
+    config.absoluteMs === undefined ? Infinity : started + config.absoluteMs - now;
+  const reason: TimeoutReason = absoluteLeft <= idleLeft ? 'absolute' : 'idle';
+  const remainingMs = Math.min(idleLeft, absoluteLeft);
+  // Fail closed: a timestamp that is not a number ends the session instead of keeping it alive.
+  if (!(remainingMs > 0)) return { status: 'timedOut', remainingMs: 0, reason };
+  if (remainingMs <= config.warningMs) return { status: 'warning', remainingMs, reason };
+  return { status: 'active', remainingMs, reason };
+}
+
+/** Problems with a configuration, empty when it is usable. */
+export function sessionConfigProblems(config: SessionTimeoutConfig): string[] {
+  const problems: string[] = [];
+  const positive = (n: unknown) => typeof n === 'number' && Number.isFinite(n) && n > 0;
+  if (!positive(config.idleMs)) problems.push('idleMs must be a positive number of milliseconds');
+  if (!(typeof config.warningMs === 'number' && config.warningMs >= 0)) {
+    problems.push('warningMs must be zero or more milliseconds');
+  } else if (positive(config.idleMs) && config.warningMs >= config.idleMs) {
+    problems.push('warningMs must be shorter than idleMs');
+  }
+  if (config.absoluteMs !== undefined && !positive(config.absoluteMs)) {
+    problems.push('absoluteMs must be a positive number of milliseconds when set');
+  }
+  if (!positive(config.tickMs)) problems.push('tickMs must be a positive number of milliseconds');
+  if (!Array.isArray(config.activityEvents) || config.activityEvents.length === 0) {
+    problems.push('activityEvents must list at least one event');
+  }
+  if (!config.channelName) problems.push('channelName must not be empty');
+  return problems;
+}
+
+/** Earliest accepted session start (catches seconds passed instead of milliseconds). */
+const EARLIEST = Date.UTC(2000, 0, 1);
+/** Clock difference between tabs that is tolerated for messages. */
+const MAX_SKEW_MS = 5000;
+
+/** Why `startedAt` cannot start a session, or null. */
+export function startedAtProblem(startedAt: unknown, now: number): string | null {
+  if (typeof startedAt !== 'number' || !Number.isFinite(startedAt)) {
+    return 'startedAt must be a time in milliseconds (e.g. Date.now())';
+  }
+  if (startedAt < EARLIEST) return 'startedAt is before 2000: pass milliseconds, not seconds';
+  if (startedAt > now + MAX_SKEW_MS) return 'startedAt is in the future';
+  return null;
+}
+
+/** An activity time from another tab: a finite number, not ahead of this tab's clock. */
+export function validActivityTime(at: unknown, now: number): at is number {
+  return typeof at === 'number' && Number.isFinite(at) && at >= EARLIEST && at <= now + MAX_SKEW_MS;
+}
+
+/** The channel / storage key for an app: the configured name plus the app's base path. */
+export function channelKey(channelName: string, baseURI: string | undefined): string {
+  let base = '/';
+  try {
+    base = baseURI ? new URL(baseURI).pathname : '/';
+  } catch {
+    // keep /
+  }
+  return `${channelName}:${base}`;
+}

package/dist/src/generators/lib/files/session/src/lib/session-timeout.config.ts__template__

@@ -0,0 +1,8 @@
+import { InjectionToken } from '@angular/core';
+
+import { SessionTimeoutConfig } from './session-clock';
+
+/** Overrides of DEFAULT_SESSION_TIMEOUT; provide it with SessionTimeoutModule.forRoot(…). */
+export const SESSION_TIMEOUT_CONFIG = new InjectionToken<Partial<SessionTimeoutConfig>>(
+  'SESSION_TIMEOUT_CONFIG',
+);

package/dist/src/generators/lib/files/session/src/lib/session-timeout.module.ts__template__

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { ModuleWithProviders, NgModule } from '@angular/core';
+
+import { SessionTimeoutConfig } from './session-clock';
+import { SESSION_TIMEOUT_CONFIG } from './session-timeout.config';
+import { SessionWarningComponent } from './session-warning/session-warning.component';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [SessionWarningComponent],
+  exports: [SessionWarningComponent],
+})
+export class SessionTimeoutModule {
+  /** In the root module: SessionTimeoutModule.forRoot({ idleMs: 10 * 60_000 }). */
+  static forRoot(
+    config: Partial<SessionTimeoutConfig> = {},
+  ): ModuleWithProviders<SessionTimeoutModule> {
+    return {
+      ngModule: SessionTimeoutModule,
+      providers: [{ provide: SESSION_TIMEOUT_CONFIG, useValue: config }],
+    };
+  }
+}

package/dist/src/generators/lib/files/session/src/lib/session-timeout.service.ts__template__

@@ -0,0 +1,289 @@
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { Inject, Injectable, NgZone, OnDestroy, Optional, PLATFORM_ID } from '@angular/core';
+import {
+  BehaviorSubject,
+  distinctUntilChanged,
+  filter,
+  fromEvent,
+  interval,
+  map,
+  merge,
+  Observable,
+  Subject,
+  Subscription,
+} from 'rxjs';
+
+import {
+  channelKey,
+  DEFAULT_SESSION_TIMEOUT,
+  SessionState,
+  sessionConfigProblems,
+  sessionState,
+  SessionTimeoutConfig,
+  startedAtProblem,
+  TimeoutReason,
+  validActivityTime,
+} from './session-clock';
+import { SESSION_TIMEOUT_CONFIG } from './session-timeout.config';
+
+type TabMessage =
+  | { type: 'activity'; at: number }
+  | { type: 'timeout'; reason: TimeoutReason }
+  | { type: 'stop' };
+
+/** Activity is recorded (and shared with other tabs) at most this often. */
+const ACTIVITY_THROTTLE_MS = 1000;
+
+/**
+ * Watches user activity and reports when the session is about to time out and when it has.
+ * It never signs anyone out: the app does that on `timeout$` and `stoppedElsewhere$`.
+ *
+ *   session.start(loginTime);              // after login
+ *   session.timeout$.subscribe(() => auth.logout());
+ *   session.stoppedElsewhere$.subscribe(() => auth.logout()); // logout in another tab
+ *   session.stop();                        // in auth.logout()
+ *
+ * Any user activity counts, also while the warning is shown (moving the mouse dismisses it).
+ * Without a persisted login time, the absolute limit restarts with every page load.
+ * Configure it once, in the root module: forRoot() in a lazy module is not seen.
+ */
+@Injectable({ providedIn: 'root' })
+export class SessionTimeoutService implements OnDestroy {
+  readonly config: SessionTimeoutConfig;
+
+  private readonly stateSubject = new BehaviorSubject<SessionState>({
+    status: 'stopped',
+    remainingMs: 0,
+  });
+  /** Current state; emitted on status changes, and every tick during the warning. */
+  readonly state$: Observable<SessionState> = this.stateSubject.asObservable();
+  /** Seconds left, while the warning is shown (restarts with every warning). */
+  readonly warning$: Observable<number> = this.state$.pipe(
+    map((s) => (s.status === 'warning' ? Math.ceil(s.remainingMs / 1000) : null)),
+    distinctUntilChanged(),
+    filter((s): s is number => s !== null),
+  );
+  private readonly timeoutSubject = new Subject<TimeoutReason>();
+  /** Emits once per session when it times out (here or in another tab). Sign out on it. */
+  readonly timeout$: Observable<TimeoutReason> = this.timeoutSubject.asObservable();
+  private readonly stoppedElsewhereSubject = new Subject<void>();
+  /** Another tab stopped the session (its user signed out): sign this tab out too. */
+  readonly stoppedElsewhere$: Observable<void> = this.stoppedElsewhereSubject.asObservable();
+
+  private readonly browser: boolean;
+  private readonly key: string;
+  private current: SessionState = { status: 'stopped', remainingMs: 0 };
+  private queue: SessionState[] = [];
+  private emitting = false;
+  private startedAt = 0;
+  private lastActivity = 0;
+  private timers = new Subscription();
+  private channel?: BroadcastChannel;
+  private storageListener?: (e: StorageEvent) => void;
+
+  constructor(
+    private readonly zone: NgZone,
+    @Inject(DOCUMENT) private readonly document: Document,
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    @Inject(PLATFORM_ID) platformId: Object,
+    @Optional() @Inject(SESSION_TIMEOUT_CONFIG) config: Partial<SessionTimeoutConfig> | null,
+  ) {
+    this.config = { ...DEFAULT_SESSION_TIMEOUT, ...(config ?? {}) };
+    const problems = sessionConfigProblems(this.config);
+    if (problems.length > 0) {
+      throw new Error(`SessionTimeoutService: ${problems.join('; ')}.`);
+    }
+    this.browser = isPlatformBrowser(platformId);
+    this.key = channelKey(this.config.channelName, this.document.baseURI);
+  }
+
+  get state(): SessionState {
+    return this.current;
+  }
+
+  /**
+   * Starts watching. `startedAt` (the login time, in milliseconds) is where the absolute limit
+   * counts from. Does nothing during server-side rendering.
+   */
+  start(startedAt = Date.now()): void {
+    const problem = startedAtProblem(startedAt, Date.now());
+    if (problem) throw new Error(`SessionTimeoutService.start: ${problem}.`);
+    this.stop(false);
+    if (!this.browser) return;
+    this.startedAt = startedAt;
+    this.lastActivity = Date.now();
+    this.zone.runOutsideAngular(() => {
+      const activity = merge(
+        ...this.config.activityEvents.map((name) =>
+          fromEvent(this.document, name, { passive: true, capture: true }),
+        ),
+      );
+      this.timers.add(activity.subscribe(() => this.recordActivity(Date.now(), true)));
+      // Timers are slowed down in background tabs: check again when the tab is shown.
+      this.timers.add(fromEvent(this.document, 'visibilitychange').subscribe(() => this.tick()));
+      this.timers.add(interval(this.config.tickMs).subscribe(() => this.tick()));
+      // Messages from other tabs arrive outside the zone (no change detection per message).
+      this.openChannel();
+    });
+    this.writeSharedActivity(this.lastActivity);
+    this.tick(true);
+  }
+
+  /** Stops watching (after logout); other tabs are told unless `broadcast` is false. */
+  stop(broadcast = true): void {
+    this.timers.unsubscribe();
+    this.timers = new Subscription();
+    const status = this.current.status;
+    if (broadcast && (status === 'active' || status === 'warning')) this.post({ type: 'stop' });
+    this.closeChannel();
+    if (status !== 'stopped') this.emit({ status: 'stopped', remainingMs: 0 });
+  }
+
+  /** Counts as activity (e.g. "Stay signed in"); does not lift the absolute limit. */
+  extend(): void {
+    if (this.current.status !== 'active' && this.current.status !== 'warning') return;
+    this.recordActivity(Date.now(), true, true);
+    this.tick(true);
+  }
+
+  ngOnDestroy(): void {
+    this.stop(false);
+    this.timeoutSubject.complete();
+    this.stoppedElsewhereSubject.complete();
+    this.stateSubject.complete();
+  }
+
+  /** States are delivered in order, also when a subscriber calls stop() while one is emitted. */
+  private emit(state: SessionState): void {
+    this.current = state;
+    this.queue.push(state);
+    if (this.emitting) return;
+    this.emitting = true;
+    try {
+      while (this.queue.length > 0) {
+        const next = this.queue.shift() as SessionState;
+        this.zone.run(() => this.stateSubject.next(next));
+      }
+    } finally {
+      this.emitting = false;
+    }
+  }
+
+  private recordActivity(at: number, share: boolean, force = false): void {
+    if (this.current.status !== 'active' && this.current.status !== 'warning') return;
+    if (!force && at - this.lastActivity < ACTIVITY_THROTTLE_MS) return;
+    this.lastActivity = Math.max(this.lastActivity, Math.min(at, Date.now()));
+    if (share) {
+      this.writeSharedActivity(this.lastActivity);
+      this.post({ type: 'activity', at: this.lastActivity });
+    }
+  }
+
+  private tick(force = false): void {
+    // start() forces the first tick while still stopped; afterwards a stopped session stays so.
+    if (this.current.status === 'timedOut') return;
+    if (this.current.status === 'stopped' && !force) return;
+    // A tab that slept missed the other tabs' messages: their last activity is in storage.
+    const shared = this.readSharedActivity();
+    if (shared !== undefined && shared > this.lastActivity) this.lastActivity = shared;
+    const next = sessionState(Date.now(), this.startedAt, this.lastActivity, this.config);
+    if (next.status === 'timedOut') {
+      if (this.current.status === 'stopped') this.emit({ ...next, status: 'active' });
+      this.timeOut(next.reason ?? 'idle', true);
+      return;
+    }
+    if (force || next.status !== this.current.status || next.status === 'warning') {
+      this.emit(next);
+    }
+  }
+
+  private timeOut(reason: TimeoutReason, share: boolean): void {
+    if (this.current.status !== 'active' && this.current.status !== 'warning') return;
+    this.timers.unsubscribe();
+    this.timers = new Subscription();
+    if (share) this.post({ type: 'timeout', reason });
+    this.closeChannel();
+    this.emit({ status: 'timedOut', remainingMs: 0, reason });
+    this.zone.run(() => this.timeoutSubject.next(reason));
+  }
+
+  private onMessage(message: TabMessage): void {
+    if (!message || typeof message !== 'object') return;
+    if (message.type === 'activity') {
+      if (validActivityTime(message.at, Date.now())) this.recordActivity(message.at, false, true);
+    } else if (message.type === 'timeout') {
+      // The absolute limit is the same everywhere; inactivity is checked against this tab's
+      // own activity too, so a tab waking from sleep cannot sign out the one in use.
+      if (message.reason === 'absolute') this.timeOut('absolute', false);
+      else this.tick();
+    } else if (message.type === 'stop') {
+      if (this.current.status !== 'active' && this.current.status !== 'warning') return;
+      this.stop(false);
+      this.zone.run(() => this.stoppedElsewhereSubject.next());
+    }
+  }
+
+  // ── tabs: BroadcastChannel, or storage events where it is missing ──────────────
+
+  private openChannel(): void {
+    const view = this.document.defaultView;
+    if (typeof BroadcastChannel !== 'undefined') {
+      this.channel = new BroadcastChannel(this.key);
+      this.channel.onmessage = (e: MessageEvent<TabMessage>) => this.onMessage(e.data);
+    } else if (view) {
+      this.storageListener = (e: StorageEvent) => {
+        if (e.key !== this.key || !e.newValue) return;
+        try {
+          this.onMessage(JSON.parse(e.newValue) as TabMessage);
+        } catch {
+          // not one of ours
+        }
+      };
+      view.addEventListener('storage', this.storageListener);
+    }
+  }
+
+  private closeChannel(): void {
+    this.channel?.close();
+    this.channel = undefined;
+    if (this.storageListener) {
+      this.document.defaultView?.removeEventListener('storage', this.storageListener);
+      this.storageListener = undefined;
+    }
+  }
+
+  private post(message: TabMessage): void {
+    if (this.channel) {
+      this.channel.postMessage(message);
+      return;
+    }
+    if (!this.storageListener) return; // no channel open: nobody to tell
+    try {
+      // A changing value makes the storage event fire in the other tabs.
+      this.document.defaultView?.localStorage.setItem(
+        this.key,
+        JSON.stringify({ ...message, n: Math.random() }),
+      );
+    } catch {
+      // storage blocked (private mode): this tab only
+    }
+  }
+
+  private writeSharedActivity(at: number): void {
+    try {
+      this.document.defaultView?.localStorage.setItem(`${this.key}:last`, String(at));
+    } catch {
+      // storage blocked: messages only
+    }
+  }
+
+  private readSharedActivity(): number | undefined {
+    try {
+      const raw = this.document.defaultView?.localStorage.getItem(`${this.key}:last`);
+      const at = raw === null || raw === undefined ? NaN : Number(raw);
+      return validActivityTime(at, Date.now()) ? at : undefined;
+    } catch {
+      return undefined;
+    }
+  }
+}

package/dist/src/generators/lib/files/session/src/lib/session-warning/session-warning.component.html__template__

@@ -0,0 +1,21 @@
+<ng-container *ngIf="{ view: view$ | async } as ctx">
+  <!-- Always present, so the first announcement is read. -->
+  <p class="session-warning__live" aria-live="assertive">{{ ctx.view?.announce }}</p>
+  <div
+    *ngIf="ctx.view as view"
+    class="session-warning"
+    role="dialog"
+    [attr.aria-labelledby]="id + '-title'"
+    [attr.aria-describedby]="id + '-text'"
+  >
+    <h2 class="session-warning__title" [id]="id + '-title'">{{ view.title }}</h2>
+    <p class="session-warning__text" [id]="id + '-text'">{{ view.message }}</p>
+    <div class="session-warning__actions">
+      <button *ngIf="view.idle" #firstButton type="button" (click)="stay()">{{ view.stay }}</button>
+      <button *ngIf="!view.idle" #firstButton type="button" (click)="signOut.emit()">
+        {{ view.signOut }}
+      </button>
+      <button *ngIf="view.idle" type="button" (click)="signOut.emit()">{{ view.signOut }}</button>
+    </div>
+  </div>
+</ng-container>

package/dist/src/generators/lib/files/session/src/lib/session-warning/session-warning.component.scss__template__

@@ -0,0 +1,40 @@
+:host {
+  display: contents;
+}
+
+.session-warning {
+  position: fixed;
+  inset: auto 1rem 1rem auto;
+  z-index: 1000;
+  max-width: 24rem;
+  padding: 1rem 1.25rem;
+  border-radius: 0.5rem;
+  background: #fff;
+  color: #1f2937;
+  box-shadow: 0 10px 30px rgb(0 0 0 / 20%);
+}
+
+.session-warning__title {
+  margin: 0 0 0.5rem;
+  font-size: 1.1rem;
+}
+
+.session-warning__text {
+  margin: 0 0 1rem;
+}
+
+.session-warning__actions {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+}
+
+/* Read by screen readers, not shown. */
+.session-warning__live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}