@salesforce/templates 66.11.1 → 66.12.0

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/authentication/utils/auth-helpers.ts

@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { AUTH_REDIRECT_PARAM } from "../config/authentication.config";
+
+/**
+ * Extracts the startUrl from the current query params, defaulting to '/'.
+ *
+ * SECURITY NOTE: This function strictly validates the URL to prevent Open
+ * Redirect vulnerabilities. It allows only relative paths.
+ *
+ * Direct port of the React `getStartUrl`. The React version takes a
+ * `URLSearchParams`; Angular's `ParamMap` exposes the same `get(key)` contract,
+ * so this accepts a minimal `{ get(name): string | null }` shape and works with
+ * both an `ActivatedRoute` `ParamMap` and a `URLSearchParams`.
+ *
+ * @param params - The query-param map (e.g. ActivatedRoute.snapshot.queryParamMap).
+ * @returns The start URL for post-authentication redirect.
+ */
+export function getStartUrl(params: { get(name: string): string | null }): string {
+	const url = params.get(AUTH_REDIRECT_PARAM);
+	if (url && isValidRedirect(url)) {
+		return url;
+	}
+	return "/";
+}
+
+/**
+ * Security: Validates that the redirect URL is a relative path to prevent Open
+ * Redirect vulnerabilities.
+ *
+ * Security Checks:
+ * 1. Rejects protocol-relative URLs (//)
+ * 2. Rejects backslash usage which some browsers treat as slashes (/\)
+ * 3. Rejects control characters
+ *
+ * Ported from the React `isValidRedirect`, with one intentional hardening: the
+ * character-range ceiling is tightened from the React source's U+00FF to the
+ * printable-ASCII bound U+007E (~) so DEL / C1 controls / NBSP are rejected in
+ * line with check #3. Do not relax any of these checks without security review.
+ */
+export function isValidRedirect(url: string): boolean {
+	// Basic structure check
+	if (!url.startsWith("/") || url.startsWith("//")) return false;
+	// Security: Reject backslashes to prevent /\example.com bypasses
+	if (url.includes("\\")) return false;
+	// Robustness: Ensure it doesn't contain whitespace/control characters.
+	// Allowed range is the printable-ASCII band U+0021 (!) through U+007E (~).
+	// This deliberately tightens the React reference's U+00FF ceiling, which
+	// admitted U+007F (DEL), the C1 control block (U+0080-U+009F, incl. NEL),
+	// and U+00A0 (NBSP) - all of which contradict the "reject control
+	// characters" contract and are open-redirect / request-splitting vectors.
+	if (/[^!-~]/.test(url)) return false;
+	return true;
+}
+
+/**
+ * Shared response type for authentication endpoints (login/register). Success
+ * responses contain `success: true` and `redirectUrl`. Error responses contain
+ * an `errors` array.
+ */
+export interface AuthResponse {
+	success?: boolean;
+	redirectUrl?: string | null;
+	errors?: string[];
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/authentication/utils/auth-validators.ts

@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { AbstractControl, ValidationErrors, ValidatorFn } from "@angular/forms";
+
+/**
+ * Angular Reactive Forms validators that mirror the React feature's zod schemas
+ * (`authHelpers.ts`). The React port dropped zod in favour of native Angular
+ * validators; these reproduce the same rules and messages so the UX is
+ * identical. Each validator returns `{ <key>: message }` on failure and `null`
+ * on success; templates read the first message via `control.errors`.
+ */
+
+/** Mirrors zod `emailSchema`: trimmed, valid email. */
+export const emailValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
+	const value = (control.value ?? "").toString().trim();
+	if (value === "") {
+		return { email: "Please enter a valid email address" };
+	}
+	// Same intent as zod's email check: a single @ with non-empty local/domain
+	// parts and a dotted domain. Kept deliberately permissive, like zod.
+	const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+	return emailPattern.test(value) ? null : { email: "Please enter a valid email address" };
+};
+
+/** Mirrors zod `passwordSchema`: minimum 8 characters. */
+export const passwordMinValidator: ValidatorFn = (
+	control: AbstractControl,
+): ValidationErrors | null => {
+	const value = (control.value ?? "").toString();
+	return value.length >= 8 ? null : { password: "Password must be at least 8 characters" };
+};
+
+/** A required-with-custom-message validator (mirrors zod `min(1, message)`). */
+export function requiredWithMessage(message: string): ValidatorFn {
+	return (control: AbstractControl): ValidationErrors | null => {
+		const value = (control.value ?? "").toString().trim();
+		return value.length >= 1 ? null : { required: message };
+	};
+}
+
+/**
+ * Cross-field validator mirroring the `newPasswordSchema` refine: the
+ * `confirmPassword` control must equal the `newPassword` control. Attach to the
+ * FormGroup; sets `{ passwordMismatch: '...' }` on the confirm control (matching
+ * the zod `path: ['confirmPassword']`) so the error renders under that field.
+ */
+export function passwordsMatchValidator(
+	passwordKey = "newPassword",
+	confirmKey = "confirmPassword",
+): ValidatorFn {
+	return (group: AbstractControl): ValidationErrors | null => {
+		const password = group.get(passwordKey);
+		const confirm = group.get(confirmKey);
+		if (!password || !confirm) {
+			return null;
+		}
+		if (confirm.value !== password.value) {
+			const existing = confirm.errors ?? {};
+			confirm.setErrors({ ...existing, passwordMismatch: "Passwords do not match" });
+			return { passwordMismatch: "Passwords do not match" };
+		}
+		// Clear only our own error, preserving any other errors on the control.
+		if (confirm.errors) {
+			const { passwordMismatch: _removed, ...rest } = confirm.errors;
+			confirm.setErrors(Object.keys(rest).length ? rest : null);
+		}
+		return null;
+	};
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/authentication/utils/helpers.ts

@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/**
+ * Error thrown when the API returns a non-OK response with structured error
+ * messages. The `errors` array contains user-facing messages that are safe to
+ * display — backend Apex classes guarantee that system exceptions are never
+ * exposed. Direct port of the React `ApiError`.
+ */
+export class ApiError extends Error {
+	readonly errors: string[];
+	constructor(errors: string[]) {
+		super(errors[0]);
+		this.name = "ApiError";
+		this.errors = errors;
+	}
+}
+
+/**
+ * Helper to parse the fetch Response. Handles the distinction between success
+ * (JSON) and failure (throwing Error). Ported from the React `handleApiResponse`.
+ */
+export async function handleApiResponse<T = unknown>(response: Response): Promise<T> {
+	// Robustness: Handle 204 No Content gracefully
+	if (response.status === 204) {
+		return {} as T;
+	}
+
+	let data: { errors?: string[] } | null = null;
+
+	const contentType = response.headers.get("content-type");
+	if (contentType?.includes("application/json")) {
+		data = (await response.json()) as { errors?: string[] };
+	} else {
+		// If Salesforce returns HTML (e.g. standard error page), consume the text
+		// to avoid parsing errors.
+		await response.text();
+	}
+
+	if (!response.ok) {
+		console.error("API request failed", data);
+		if (data?.errors?.length) {
+			throw new ApiError(data.errors);
+		}
+		throw new Error("An unexpected error occurred");
+	}
+
+	return data as T;
+}
+
+/** UI API Record response structure. */
+export type RecordResponse = {
+	fields: Record<string, { value: string }>;
+};
+
+/**
+ * GraphQL can return a complex nested structure. This helper flattens it to a
+ * simple object for easier form binding. Ported from the React
+ * `flattenGraphQLRecord`.
+ *
+ * @param data - Extracted payload from the GraphQL response.
+ * @param fallbackError - Fallback error message if data is null/undefined or not an object.
+ * @throws {Error} If data is not valid.
+ * @returns Flattened object with values mapped directly to the fields.
+ */
+export function flattenGraphQLRecord<T>(
+	data: unknown,
+	fallbackError = "An unknown error occurred",
+): T {
+	if (!data || typeof data !== "object") {
+		throw new Error(fallbackError);
+	}
+
+	return Object.fromEntries(
+		Object.entries(data as Record<string, unknown>).map(([key, field]) => [
+			key,
+			field !== null && typeof field === "object" && "value" in field
+				? (field as { value: unknown }).value
+				: (field ?? null),
+		]),
+	) as T;
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/authentication/utils/session-time-servlet.ts

@@ -0,0 +1,130 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/**
+ * SessionTimeServlet API helpers — direct (pure-TS) port of the React
+ * `sessionTimeService.ts`. Handles communication with the session validation
+ * endpoint, strips the CSRF prefix, and subtracts the latency buffer. Returns
+ * `undefined` on any failure so the session-timeout feature never crashes the
+ * running application.
+ */
+
+import { SESSION_CONFIG } from "./session-timeout.config";
+
+/** Response from SessionTimeServlet API. */
+export interface SessionResponse {
+	/** Session phase. */
+	sp: number;
+	/** Seconds remaining in session. */
+	sr: number;
+}
+
+/**
+ * Parse the servlet response text into a SessionResponse object. Handles the
+ * CSRF protection prefix.
+ *
+ * @param text - Raw response text from servlet.
+ * @returns Parsed session response, or undefined if parsing fails.
+ */
+export function parseResponseResult(text: string): SessionResponse | undefined {
+	let cleanedText = text;
+
+	// Strip CSRF protection prefix if present.
+	if (cleanedText.startsWith(SESSION_CONFIG.CSRF_TOKEN)) {
+		cleanedText = cleanedText.substring(SESSION_CONFIG.CSRF_TOKEN.length);
+	}
+
+	// Trim whitespace.
+	cleanedText = cleanedText.trim();
+
+	try {
+		const parsed = JSON.parse(cleanedText) as SessionResponse;
+
+		// Validate response structure.
+		if (typeof parsed.sp !== "number" || typeof parsed.sr !== "number") {
+			throw new Error("Invalid response structure: missing sp or sr properties");
+		}
+
+		return parsed;
+	} catch (error) {
+		console.error("[sessionTimeService] Failed to parse response:", error, "Text:", cleanedText);
+		return undefined;
+	}
+}
+
+/**
+ * Call SessionTimeServlet API. Internal function used by both poll and extend.
+ * Returns undefined on any failure.
+ *
+ * @param basePath - Community base path (e.g., "/sfsites/c/").
+ * @param extend - Whether to extend the session (updateTimedOutSession param).
+ */
+async function callSessionTimeServlet(
+	basePath: string,
+	extend = false,
+): Promise<SessionResponse | undefined> {
+	// Build URL with cache-busting timestamp.
+	const timestamp = Date.now();
+	let url = `${basePath}${SESSION_CONFIG.SERVLET_URL}?buster=${timestamp}`;
+
+	if (extend) {
+		url += "&updateTimedOutSession=true";
+	}
+
+	try {
+		const response = await fetch(url, {
+			method: "GET",
+			credentials: "same-origin",
+			cache: "no-cache",
+			headers: {
+				"X-Requested-With": "XMLHttpRequest",
+			},
+		});
+
+		if (!response.ok) {
+			console.error(`[sessionTimeService] HTTP ${response.status}: ${response.statusText}`);
+			return undefined;
+		}
+
+		const contentType = response.headers.get("content-type");
+		if (contentType && !contentType.includes("text") && !contentType.includes("json")) {
+			console.error(`[sessionTimeService] Unexpected content type: ${contentType}`);
+			return undefined;
+		}
+
+		const text = await response.text();
+		const parsed = parseResponseResult(text);
+		if (!parsed) {
+			return undefined;
+		}
+
+		return {
+			sp: parsed.sp,
+			sr: Math.max(0, parsed.sr - SESSION_CONFIG.LATENCY_BUFFER_SECONDS),
+		};
+	} catch (error) {
+		console.error("[sessionTimeService] API call failed:", error);
+		return undefined;
+	}
+}
+
+/**
+ * Poll SessionTimeServlet to check remaining session time. Called periodically
+ * to monitor session status.
+ */
+export async function pollSessionTimeServlet(
+	basePath: string,
+): Promise<SessionResponse | undefined> {
+	return callSessionTimeServlet(basePath, false);
+}
+
+/**
+ * Extend the current session time. Called when the user clicks "Continue" in the
+ * warning modal.
+ */
+export async function extendSessionTime(basePath: string): Promise<SessionResponse | undefined> {
+	return callSessionTimeServlet(basePath, true);
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/authentication/utils/session-timeout.config.ts

@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/**
+ * Configuration constants for session timeout monitoring. Direct port of the
+ * React `sessionTimeoutConfig.ts` — values are byte-for-byte identical so the
+ * polling cadence, retry backoff, and warning window match exactly.
+ */
+
+// ---------------------------------------------------------------------------
+// Retry Configuration
+// ---------------------------------------------------------------------------
+
+/** Initial delay for first retry attempt (2 seconds). */
+export const INITIAL_RETRY_DELAY = 2000;
+
+/** Maximum number of retry attempts before giving up. */
+export const MAX_RETRY_ATTEMPTS = 10;
+
+/** Maximum retry delay (30 minutes). */
+export const MAX_RETRY_DELAY = 30 * 60 * 1000;
+
+// ---------------------------------------------------------------------------
+// Session Storage Keys
+// ---------------------------------------------------------------------------
+
+/** sessionStorage keys used by the session validator. */
+export const STORAGE_KEYS = {
+	/** Flag to show session expired message on login page. */
+	SHOW_SESSION_MESSAGE: "lwrSessionValidator.showSessionMessage",
+} as const;
+
+// ---------------------------------------------------------------------------
+// Servlet Configuration
+// ---------------------------------------------------------------------------
+
+/** SessionTimeServlet configuration. */
+export const SESSION_CONFIG = {
+	/** Relative URL to SessionTimeServlet. */
+	SERVLET_URL: "/sfsites/c/_nc_external/system/security/session/SessionTimeServlet",
+
+	/** Latency buffer to subtract from server response (seconds). */
+	LATENCY_BUFFER_SECONDS: 3,
+
+	/** CSRF protection prefix in servlet responses. */
+	CSRF_TOKEN: "while(1);\n",
+} as const;
+
+// ---------------------------------------------------------------------------
+// UI Labels
+// ---------------------------------------------------------------------------
+
+/** UI labels for session timeout components. */
+export const LABELS = {
+	/** Title for session warning modal. */
+	sessionWarningTitle: "Session Timeout Warning",
+
+	/** Message text in session warning modal. */
+	sessionWarningMessage:
+		"For security, we log you out if you’re inactive for too long. To continue working, click Continue before the time expires.",
+
+	/** Text for "Continue" button. */
+	continueButton: "Continue",
+
+	/** Text for "Log Out" button. */
+	logoutButton: "Log Out",
+
+	/** Message shown on login page after session expires. */
+	invalidSessionMessage: "Your session has expired. Please log in again.",
+
+	/** Accessibility label for close button. */
+	closeLabel: "Close",
+} as const;
+
+// ---------------------------------------------------------------------------
+// Session Timeout Configuration
+// ---------------------------------------------------------------------------
+
+/** Session warning time in seconds (30 seconds). */
+export const SESSION_WARNING_TIME = 30;

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/authentication/utils/session-timeout.service.ts

@@ -0,0 +1,201 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { Injectable, signal } from "@angular/core";
+import {
+	extendSessionTime,
+	pollSessionTimeServlet,
+	type SessionResponse,
+} from "./session-time-servlet";
+import {
+	INITIAL_RETRY_DELAY,
+	MAX_RETRY_ATTEMPTS,
+	MAX_RETRY_DELAY,
+	SESSION_WARNING_TIME,
+} from "./session-timeout.config";
+
+/**
+ * Session-timeout monitoring service — the Angular port of the React
+ * `useSessionTimeout` hook (plus the inlined `useRetryWithBackoff`). Polls
+ * SessionTimeServlet at calculated intervals, shows the warning window when the
+ * session nears expiry, and retries failed polls with exponential backoff.
+ *
+ * State is exposed as signals; the owning `SessionTimeoutValidatorComponent`
+ * reacts to them and performs navigation/logout (this service, like the React
+ * hook, never navigates — it only tracks time and schedules checks).
+ *
+ * NOT `providedIn: 'root'`: it is provided by the validator component so its
+ * timers are torn down with that component (mirrors the hook's unmount cleanup).
+ */
+@Injectable()
+export class SessionTimeoutService {
+	// -- Public session state (signals) --------------------------------------
+	/** Seconds remaining in the current session (null until first response). */
+	readonly timeLeftInSession = signal<number | null>(null);
+	/** Whether the warning modal should be displayed. */
+	readonly showWarningModal = signal<boolean>(false);
+	/** Whether a poll is currently in flight. */
+	readonly isPolling = signal<boolean>(false);
+
+	// -- Retry (exponential backoff) state ------------------------------------
+	private retryAttempts = 0;
+	private currentRetryDelay = INITIAL_RETRY_DELAY;
+
+	// -- Timer / guard bookkeeping --------------------------------------------
+	private basePath = "";
+	private pollTimeoutId: ReturnType<typeof setTimeout> | null = null;
+	private retryTimeoutId: ReturnType<typeof setTimeout> | null = null;
+	private isPollingGuard = false;
+
+	private get maxRetriesReached(): boolean {
+		return this.retryAttempts >= MAX_RETRY_ATTEMPTS;
+	}
+
+	private resetRetry(): void {
+		this.retryAttempts = 0;
+		this.currentRetryDelay = INITIAL_RETRY_DELAY;
+	}
+
+	private clearPollTimeout(): void {
+		if (this.pollTimeoutId) {
+			clearTimeout(this.pollTimeoutId);
+			this.pollTimeoutId = null;
+		}
+	}
+
+	private clearRetryTimeout(): void {
+		if (this.retryTimeoutId) {
+			clearTimeout(this.retryTimeoutId);
+			this.retryTimeoutId = null;
+		}
+	}
+
+	/**
+	 * Schedule the next session check, clearing any pending poll/retry to prevent
+	 * concurrent polling. Mirrors the hook's `scheduleCheck`.
+	 */
+	private scheduleCheck(delay: number): void {
+		this.clearPollTimeout();
+		this.clearRetryTimeout();
+		this.pollTimeoutId = setTimeout(() => {
+			void this.checkSession();
+		}, delay);
+	}
+
+	/**
+	 * Handle a failed poll/extend with exponential backoff. Mirrors the hook's
+	 * `handleRetryWithBackoff` + `useRetryWithBackoff.scheduleRetry`.
+	 */
+	private handleRetryWithBackoff(retryAction: () => void): void {
+		if (this.maxRetriesReached) {
+			console.error("[SessionTimeout] Max retry attempts reached. Stopping polling.");
+			this.isPolling.set(false);
+			this.isPollingGuard = false;
+			return;
+		}
+
+		if (this.isPollingGuard) {
+			console.warn("[SessionTimeout] Poll already in progress, skipping retry scheduling");
+			return;
+		}
+
+		this.clearRetryTimeout();
+
+		const delay = this.currentRetryDelay;
+		console.warn(
+			`[SessionTimeout] Scheduling retry attempt ${this.retryAttempts + 1}/${MAX_RETRY_ATTEMPTS} in ${delay}ms`,
+		);
+
+		this.retryTimeoutId = setTimeout(() => {
+			this.retryTimeoutId = null;
+			retryAction();
+		}, delay);
+
+		this.retryAttempts += 1;
+		// Double the delay for the next retry, capped at maxDelay.
+		this.currentRetryDelay = Math.min(this.currentRetryDelay * 2, MAX_RETRY_DELAY);
+	}
+
+	/**
+	 * Process a session response and schedule the next check. Mirrors the hook's
+	 * `processTimeoutResponse`. When `sr <= 0` the component's effect performs
+	 * logout; when within the warning window the modal is shown and a check is
+	 * scheduled for expiry; otherwise a check is scheduled for when the warning
+	 * should appear.
+	 */
+	private processTimeoutResponse(secondsRemaining: number): void {
+		this.timeLeftInSession.set(secondsRemaining);
+
+		if (secondsRemaining <= 0) {
+			this.showWarningModal.set(false);
+			// logout() is triggered by the component reacting to timeLeftInSession.
+			return;
+		}
+
+		const shouldShowWarning = secondsRemaining <= SESSION_WARNING_TIME;
+
+		if (shouldShowWarning) {
+			this.showWarningModal.set(true);
+			this.scheduleCheck(secondsRemaining * 1000);
+		} else {
+			const timeUntilWarning = (secondsRemaining - SESSION_WARNING_TIME) * 1000;
+			this.showWarningModal.set(false);
+			this.scheduleCheck(timeUntilWarning);
+		}
+	}
+
+	/** Check session status via the servlet. Mirrors the hook's `checkSession`. */
+	async checkSession(): Promise<void> {
+		if (this.isPollingGuard) {
+			return;
+		}
+
+		this.isPollingGuard = true;
+		this.isPolling.set(true);
+
+		const response = await pollSessionTimeServlet(this.basePath);
+		this.isPollingGuard = false;
+		this.isPolling.set(false);
+
+		this.applyResponse(response, () => void this.checkSession());
+	}
+
+	/** Extend the session (user clicked "Continue"). Mirrors `extendSession`. */
+	async extendSession(): Promise<void> {
+		const response = await extendSessionTime(this.basePath);
+		this.applyResponse(response, () => void this.extendSession());
+	}
+
+	private applyResponse(response: SessionResponse | undefined, retryAction: () => void): void {
+		if (response) {
+			this.resetRetry();
+			this.processTimeoutResponse(response.sr);
+		} else {
+			this.handleRetryWithBackoff(retryAction);
+		}
+	}
+
+	/**
+	 * Begin monitoring. Skips guests (mirrors the hook's guest short-circuit) and
+	 * kicks off the first check.
+	 */
+	start(basePath: string, isGuest: boolean): void {
+		this.basePath = basePath;
+		if (isGuest) {
+			return;
+		}
+		void this.checkSession();
+	}
+
+	/** Stop monitoring and reset state. Mirrors the hook's `logout` cleanup. */
+	stop(): void {
+		this.clearPollTimeout();
+		this.clearRetryTimeout();
+		this.showWarningModal.set(false);
+		this.timeLeftInSession.set(null);
+		this.isPolling.set(false);
+		this.isPollingGuard = false;
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/object-search/breadcrumb/breadcrumb.html

@@ -0,0 +1,54 @@
+<nav aria-label="Breadcrumb" class="mb-3">
+	<ol
+		class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5"
+	>
+		@if (includeHome()) {
+		<li class="inline-flex items-center gap-1.5">
+			<a [routerLink]="'/'" class="hover:text-foreground transition-colors">{{ homeLabel() }}</a>
+		</li>
+		<li aria-hidden="true" class="[&>svg]:size-3.5">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<polyline points="9 18 15 12 9 6" />
+			</svg>
+		</li>
+		} @if (isDetailView()) {
+		<li class="inline-flex items-center gap-1.5">
+			<a [routerLink]="listPath()" class="hover:text-foreground transition-colors"
+				>{{ listLabel() }}</a
+			>
+		</li>
+		<li aria-hidden="true" class="[&>svg]:size-3.5">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<polyline points="9 18 15 12 9 6" />
+			</svg>
+		</li>
+		<li class="inline-flex items-center gap-1.5">
+			@if (loading() && !recordName()) {
+			<app-skeleton class="h-4 w-32" />
+			} @else {
+			<span class="text-foreground font-normal" aria-current="page">{{ recordName() }}</span>
+			}
+		</li>
+		} @else {
+		<li class="inline-flex items-center gap-1.5">
+			<span class="text-foreground font-normal" aria-current="page">{{ listLabel() }}</span>
+		</li>
+		}
+	</ol>
+</nav>