@salesforce/ui-bundle-template-app-angular-template-b2e 11.30.0

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/pages/account-detail/account-detail-page.component.ts

@@ -0,0 +1,199 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+import { toSignal } from "@angular/core/rxjs-interop";
+import { map } from "rxjs/operators";
+// Base-app UI wrappers, inherited (not recreated) by this feature. Post-compose
+// they land at uiBundles/<target>/src/app/components/ui/..., three levels up from this
+// page folder (app/features/account-search/ -> app/components/ui/).
+import { AlertComponent } from "../../components/ui/alert/alert.component";
+import { ButtonComponent } from "../../components/ui/button/button.component";
+import {
+	CardComponent,
+	CardContentComponent,
+} from "../../components/ui/card/card.component";
+import { CollapsibleComponent } from "../../components/ui/collapsible/collapsible.component";
+import { SeparatorComponent } from "../../components/ui/separator/separator.component";
+import { SkeletonComponent } from "../../components/ui/skeleton/skeleton.component";
+// Object-search feature building blocks (Waves 1-2), two levels up.
+import { ObjectBreadcrumbComponent } from "../../features/object-search/components/object-breadcrumb/object-breadcrumb.component";
+import { createAsyncData } from "../../utils/async-data";
+import {
+	fieldValue,
+	getAddressFieldLines,
+	formatDateTimeField,
+} from "../../features/object-search/utils/field-utils";
+import { AccountSearchService } from "../../api/account/account-search.service";
+
+/** `Intl` options for the created / last-modified timestamps (matches React). */
+const DATE_TIME_OPTIONS: Intl.DateTimeFormatOptions = {
+	dateStyle: "medium",
+	timeStyle: "short",
+};
+
+/** A `{ label, value }` pair rendered in a field grid. */
+interface Field {
+	label: string;
+	value: string | null;
+	/** `true` renders the value as a `tel:` link (Phone / Fax). */
+	telephone?: boolean;
+}
+
+/**
+ * Account detail page. The Angular analogue of the React
+ * `AccountObjectDetailPage`: a breadcrumb plus a card of collapsible sections
+ * (top fields, Additional / Address / System information), with loading,
+ * error, and not-found states.
+ *
+ * The record id comes from the `:recordId` route param (reactively, so a
+ * client-side nav between two detail routes refetches). Data flows through
+ * {@link createAsyncData} for latest-wins fetching.
+ */
+@Component({
+	selector: "app-account-detail-page",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [
+		AlertComponent,
+		ButtonComponent,
+		CardComponent,
+		CardContentComponent,
+		CollapsibleComponent,
+		SeparatorComponent,
+		SkeletonComponent,
+		ObjectBreadcrumbComponent,
+	],
+	templateUrl: "./account-detail-page.component.html",
+	styleUrl: "./account-detail-page.component.scss",
+})
+export class AccountDetailPageComponent {
+	private readonly service = inject(AccountSearchService);
+	private readonly route = inject(ActivatedRoute);
+	private readonly router = inject(Router);
+
+	/** Reactive `:recordId` param — drives (and re-drives) the fetch. */
+	private readonly recordId = toSignal(
+		this.route.paramMap.pipe(map((p) => p.get("recordId") ?? "")),
+		{ initialValue: this.route.snapshot.paramMap.get("recordId") ?? "" },
+	);
+
+	private readonly result = createAsyncData(this.recordId, (id) =>
+		this.service.getAccountDetail(id),
+	);
+
+	protected readonly account = this.result.data;
+	protected readonly loading = this.result.loading;
+	protected readonly error = this.result.error;
+	/** True once a resolved fetch returned no record (distinct from loading). */
+	protected readonly notFound = computed(() => !this.loading() && !this.error() && !this.account());
+
+	/** Per-section collapsible open state (all default open, matching React). */
+	protected readonly additionalOpen = signal<boolean>(true);
+	protected readonly addressOpen = signal<boolean>(true);
+	protected readonly systemOpen = signal<boolean>(true);
+
+	/** Placeholder rows for skeleton field grids. */
+	protected readonly skeletonRows = [0, 1, 2];
+
+	// -- Breadcrumb leaf label -------------------------------------------------
+	protected readonly recordName = computed<string | undefined>(() => {
+		const a = this.account();
+		if (a) return fieldValue(a.Name) ?? "";
+		if (this.error()) return "Error";
+		if (this.loading()) return undefined;
+		return "Not Found";
+	});
+
+	// -- Header ----------------------------------------------------------------
+	protected readonly title = computed(() => fieldValue(this.account()?.Name ?? null) ?? "");
+
+	// -- Top field rows --------------------------------------------------------
+	protected readonly topRows = computed<Field[][]>(() => {
+		const a = this.account();
+		if (!a) return [];
+		return [
+			[
+				{ label: "Account Owner", value: fieldValue(a.Owner?.Name) },
+				{ label: "Phone", value: fieldValue(a.Phone), telephone: true },
+			],
+			[
+				{ label: "Account Name", value: fieldValue(a.Name) },
+				{ label: "Fax", value: fieldValue(a.Fax), telephone: true },
+			],
+			[
+				{ label: "Parent Account", value: fieldValue(a.Parent?.Name) },
+				{ label: "Website", value: fieldValue(a.Website) },
+			],
+		];
+	});
+
+	// -- Additional Information ------------------------------------------------
+	protected readonly additionalRows = computed<Field[][]>(() => {
+		const a = this.account();
+		if (!a) return [];
+		return [
+			[
+				{ label: "Type", value: fieldValue(a.Type) },
+				{ label: "Employees", value: fieldValue(a.NumberOfEmployees) },
+			],
+			[
+				{ label: "Industry", value: fieldValue(a.Industry) },
+				{ label: "Annual Revenue", value: fieldValue(a.AnnualRevenue) },
+			],
+		];
+	});
+	protected readonly description = computed(() => fieldValue(this.account()?.Description ?? null));
+
+	// -- Address Information ---------------------------------------------------
+	protected readonly billingAddress = computed<string[] | null>(() => {
+		const a = this.account();
+		if (!a) return null;
+		return getAddressFieldLines({
+			street: fieldValue(a.BillingStreet),
+			city: fieldValue(a.BillingCity),
+			state: fieldValue(a.BillingState),
+			postalCode: fieldValue(a.BillingPostalCode),
+			country: fieldValue(a.BillingCountry),
+		});
+	});
+	protected readonly shippingAddress = computed<string[] | null>(() => {
+		const a = this.account();
+		if (!a) return null;
+		return getAddressFieldLines({
+			street: fieldValue(a.ShippingStreet),
+			city: fieldValue(a.ShippingCity),
+			state: fieldValue(a.ShippingState),
+			postalCode: fieldValue(a.ShippingPostalCode),
+			country: fieldValue(a.ShippingCountry),
+		});
+	});
+
+	// -- System Information ----------------------------------------------------
+	protected readonly createdBy = computed(() =>
+		this.joinNameAndDate(this.account()?.CreatedBy?.Name, this.account()?.CreatedDate),
+	);
+	protected readonly lastModifiedBy = computed(() =>
+		this.joinNameAndDate(this.account()?.LastModifiedBy?.Name, this.account()?.LastModifiedDate),
+	);
+
+	private joinNameAndDate(
+		name: { value?: unknown; displayValue?: string | null } | null | undefined,
+		date: { value?: unknown; displayValue?: string | null } | null | undefined,
+	): string | null {
+		const formatted = formatDateTimeField(fieldValue(date ?? null), undefined, DATE_TIME_OPTIONS);
+		return [fieldValue(name ?? null), formatted].filter(Boolean).join(" ") || null;
+	}
+
+	/** Navigate back to the previous view (mirrors the React `navigate(-1)`). */
+	protected goBack(): void {
+		void this.router.navigate(["/accounts"]);
+	}
+
+	/** Full page reload retry, matching the React "Retry" affordance. */
+	protected reload(): void {
+		window.location.reload();
+	}
+}

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/pages/account-search/account-search-page.component.html

@@ -0,0 +1,111 @@
+<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+	<app-object-breadcrumb listPath="/accounts" listLabel="Accounts" />
+
+	<h1 class="text-2xl font-bold mb-4">Search Accounts</h1>
+
+	<div class="flex flex-col lg:flex-row gap-6">
+		<!-- Sidebar — Filter Panel -->
+		<aside class="w-full lg:w-80 shrink-0">
+			<app-collapsible title="Filters" [(open)]="filtersOpen">
+				<div class="space-y-1">
+					<app-search-filter [config]="searchConfig" />
+					<app-text-filter [config]="nameConfig" />
+					<app-select-filter [config]="industryConfig()" />
+					<app-multi-select-filter [config]="typeConfig()" />
+					<app-numeric-range-filter [config]="revenueConfig" />
+					<app-date-filter [config]="createdConfig" filterType="datetime" />
+					<app-date-range-filter [config]="lastModifiedConfig" filterType="datetimerange" />
+				</div>
+			</app-collapsible>
+		</aside>
+
+		<!-- Main area — Sort + Results -->
+		<div class="flex-1 min-w-0">
+			<div class="flex flex-wrap items-center gap-2 mb-4">
+				<app-sort-control [sortFields]="sortConfigs" />
+				<app-active-filters />
+			</div>
+
+			<div class="min-h-132" [attr.aria-busy]="loading()">
+				@if (loading()) {
+					<app-skeleton class="h-5 w-30 mb-3" />
+					<div class="divide-y">
+						@for (row of skeletonRows(); track row) {
+							<div class="flex items-center justify-between py-3">
+								<div class="space-y-2">
+									<app-skeleton class="h-5 w-40" />
+									<app-skeleton class="h-4 w-28" />
+								</div>
+								<div class="space-y-2 flex flex-col items-end">
+									<app-skeleton class="h-4 w-24" />
+									<app-skeleton class="h-4 w-20" />
+								</div>
+							</div>
+						}
+					</div>
+				} @else if (error()) {
+					<p class="text-sm text-muted-foreground mb-3">0 accounts found</p>
+					<app-alert
+						variant="destructive"
+						icon="error"
+						title="Failed to load accounts"
+						description="Something went wrong while loading accounts. Please try again later."
+					/>
+				} @else if (nodes().length > 0) {
+					<p class="text-sm text-muted-foreground mb-3">{{ resultCountLabel() }}</p>
+					<ul class="divide-y">
+						@for (node of nodes(); track node.Id) {
+							<li>
+								<a
+									[routerLink]="['/accounts', node.Id]"
+									class="flex items-center justify-between py-3 px-3 -mx-3 rounded-md transition-colors hover:bg-accent"
+								>
+									<div>
+										<span class="font-medium">{{ name(node) }}</span>
+										<p class="text-sm text-muted-foreground">{{ secondaryLine(node) }}</p>
+									</div>
+									<div class="text-right text-sm">
+										<p>{{ phone(node) }}</p>
+										<p class="text-muted-foreground">{{ ownerName(node) }}</p>
+									</div>
+								</a>
+							</li>
+						}
+					</ul>
+				} @else {
+					<div class="flex flex-col items-center justify-center py-16 text-center">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="size-12 text-muted-foreground mb-4"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							aria-hidden="true"
+						>
+							<path d="m13.5 8.5-5 5" />
+							<path d="m8.5 8.5 5 5" />
+							<circle cx="11" cy="11" r="8" />
+							<path d="m21 21-4.3-4.3" />
+						</svg>
+						<h2 class="text-lg font-semibold mb-1">No accounts found</h2>
+						<p class="text-sm text-muted-foreground">
+							Try adjusting your filters or search criteria.
+						</p>
+					</div>
+				}
+			</div>
+
+			<!-- Pagination — always visible, disabled while loading or on error -->
+			<app-pagination-controls
+				[totalCount]="totalCount()"
+				[hasNextPage]="hasNextPage()"
+				[endCursor]="endCursor()"
+				[pageSizeOptions]="pageSizeOptions"
+				[disabled]="controlsDisabled()"
+			/>
+		</div>
+	</div>
+</div>

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/pages/account-search/account-search-page.component.ts

@@ -0,0 +1,217 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from "@angular/core";
+import { RouterLink } from "@angular/router";
+// Base-app UI wrappers, inherited (not recreated) by this feature. Post-compose
+// they land at uiBundles/<target>/src/app/components/ui/..., three levels up from this
+// page folder (app/features/account-search/ -> app/components/ui/).
+import { AlertComponent } from "../../components/ui/alert/alert.component";
+import { CollapsibleComponent } from "../../components/ui/collapsible/collapsible.component";
+import { SkeletonComponent } from "../../components/ui/skeleton/skeleton.component";
+// Object-search feature building blocks (Waves 1-2), two levels up.
+import { ObjectBreadcrumbComponent } from "../../features/object-search/components/object-breadcrumb/object-breadcrumb.component";
+import { SortControlComponent } from "../../features/object-search/components/sort-control/sort-control.component";
+import { ActiveFiltersComponent } from "../../features/object-search/components/active-filters/active-filters.component";
+import { PaginationControlsComponent } from "../../features/object-search/components/pagination-controls/pagination-controls.component";
+import { SearchFilterComponent } from "../../features/object-search/components/filters/search-filter/search-filter.component";
+import { TextFilterComponent } from "../../features/object-search/components/filters/text-filter/text-filter.component";
+import { SelectFilterComponent } from "../../features/object-search/components/filters/select-filter/select-filter.component";
+import { MultiSelectFilterComponent } from "../../features/object-search/components/filters/multi-select-filter/multi-select-filter.component";
+import { NumericRangeFilterComponent } from "../../features/object-search/components/filters/numeric-range-filter/numeric-range-filter.component";
+import { DateFilterComponent } from "../../features/object-search/components/filters/date-filter/date-filter.component";
+import { DateRangeFilterComponent } from "../../features/object-search/components/filters/date-range-filter/date-range-filter.component";
+import {
+	ObjectSearchStateService,
+	type PaginationConfig,
+} from "../../features/object-search/object-search-state.service";
+import { createAsyncData } from "../../utils/async-data";
+import { fieldValue } from "../../features/object-search/utils/field-utils";
+import type { FilterFieldConfig } from "../../features/object-search/utils/filter-utils";
+import type { SortFieldConfig } from "../../features/object-search/utils/sort-utils";
+import { AccountSearchService, type AccountNode } from "../../api/account/account-search.service";
+
+/** Cursor-pagination config for the account search (mirrors the React reference). */
+const PAGINATION_CONFIG: PaginationConfig = {
+	defaultPageSize: 7,
+	validPageSizes: [7, 14, 28, 42],
+};
+
+/**
+ * Filter field configs — the single source of truth for URL (de)serialization
+ * and GraphQL `where` building. The picklist option lists for Industry / Type
+ * are filled in at runtime (see the component's computed configs) from the
+ * distinct-value aggregate queries.
+ */
+const FILTER_CONFIGS: FilterFieldConfig[] = [
+	{
+		field: "search",
+		label: "Search",
+		type: "search",
+		searchFields: ["Name", "Phone", "Industry"],
+		placeholder: "Search by name, phone, or industry...",
+	},
+	{ field: "Name", label: "Account Name", type: "text", placeholder: "Search by name..." },
+	{ field: "Industry", label: "Industry", type: "picklist" },
+	{ field: "Type", label: "Type", type: "multipicklist" },
+	{ field: "AnnualRevenue", label: "Annual Revenue", type: "numeric" },
+	{ field: "CreatedDate", label: "Created Date", type: "datetime", disableFuture: true },
+	{
+		field: "LastModifiedDate",
+		label: "Last Modified Date",
+		type: "datetimerange",
+		disableFuture: true,
+	},
+];
+
+/** Sortable fields exposed by the sort control (mirrors the React reference). */
+const ACCOUNT_SORT_CONFIGS: SortFieldConfig[] = [
+	{ field: "Name", label: "Name" },
+	{ field: "AnnualRevenue", label: "Annual Revenue" },
+	{ field: "Industry", label: "Industry" },
+	{ field: "CreatedDate", label: "Created Date" },
+];
+
+/**
+ * Account search / list page. The Angular analogue of the React `AccountSearch`
+ * example page: a sidebar filter panel (Card + Collapsible) plus a main results
+ * area with sort control, active-filter chips, a results list, and cursor
+ * pagination.
+ *
+ * State lives in a page-scoped {@link ObjectSearchStateService} (provided here,
+ * NOT in root) so each search page owns its own filters / sort / cursor stack.
+ * The filter components projected into the sidebar inject that same instance.
+ *
+ * Data flows through {@link createAsyncData}: whenever the derived query args
+ * (where / orderBy / pageSize / afterCursor) change, the search re-runs with
+ * latest-wins semantics.
+ */
+@Component({
+	selector: "app-account-search-page",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	providers: [ObjectSearchStateService],
+	imports: [
+		RouterLink,
+		AlertComponent,
+		CollapsibleComponent,
+		SkeletonComponent,
+		ObjectBreadcrumbComponent,
+		SortControlComponent,
+		ActiveFiltersComponent,
+		PaginationControlsComponent,
+		SearchFilterComponent,
+		TextFilterComponent,
+		SelectFilterComponent,
+		MultiSelectFilterComponent,
+		NumericRangeFilterComponent,
+		DateFilterComponent,
+		DateRangeFilterComponent,
+	],
+	templateUrl: "./account-search-page.component.html",
+})
+export class AccountSearchPageComponent {
+	private readonly service = inject(AccountSearchService);
+	private readonly state = inject(ObjectSearchStateService);
+
+	/** Sortable field configs surfaced to the sort control. */
+	protected readonly sortConfigs = ACCOUNT_SORT_CONFIGS;
+	/** Allowed page sizes forwarded to the pagination controls. */
+	protected readonly pageSizeOptions = PAGINATION_CONFIG.validPageSizes;
+
+	/** Collapsible open state for the sidebar filter panel. */
+	protected readonly filtersOpen = signal<boolean>(true);
+
+	/** Derived, API-ready `where` / `orderBy` signals from the shared state. */
+	private readonly query = this.state.init<unknown, unknown>(FILTER_CONFIGS, PAGINATION_CONFIG);
+
+	/** Live page-size / cursor signals from the shared state. */
+	protected readonly pageSize = this.state.pageSize;
+	protected readonly hasPreviousPage = this.state.hasPreviousPage;
+
+	// -- Distinct-value option loads (Industry / Type filters) -----------------
+	private readonly industries = createAsyncData(signal(0), () =>
+		this.service.fetchDistinctIndustries(),
+	);
+	private readonly types = createAsyncData(signal(0), () => this.service.fetchDistinctTypes());
+
+	// -- Per-filter configs (options merged in for the picklist filters) -------
+	protected readonly searchConfig = FILTER_CONFIGS[0];
+	protected readonly nameConfig = FILTER_CONFIGS[1];
+	protected readonly revenueConfig = FILTER_CONFIGS[4];
+	protected readonly createdConfig = FILTER_CONFIGS[5];
+	protected readonly lastModifiedConfig = FILTER_CONFIGS[6];
+	protected readonly industryConfig = computed<FilterFieldConfig>(() => ({
+		...FILTER_CONFIGS[2],
+		options: this.industries.data() ?? [],
+	}));
+	protected readonly typeConfig = computed<FilterFieldConfig>(() => ({
+		...FILTER_CONFIGS[3],
+		options: this.types.data() ?? [],
+	}));
+
+	// -- Search results --------------------------------------------------------
+	private readonly searchArgs = computed(() => ({
+		where: this.query.where(),
+		orderBy: this.query.orderBy(),
+		first: this.state.pageSize(),
+		after: this.state.afterCursor(),
+	}));
+	private readonly result = createAsyncData(this.searchArgs, (args) =>
+		this.service.searchAccounts(args),
+	);
+
+	protected readonly loading = this.result.loading;
+	protected readonly error = this.result.error;
+
+	private readonly pageInfo = computed(() => this.result.data()?.pageInfo);
+	protected readonly totalCount = computed(() => this.result.data()?.totalCount);
+	protected readonly hasNextPage = computed(() => this.pageInfo()?.hasNextPage ?? false);
+	protected readonly endCursor = computed(() => this.pageInfo()?.endCursor ?? undefined);
+
+	/** Non-null account nodes from the current page's edges. */
+	protected readonly nodes = computed<AccountNode[]>(() => {
+		const edges = this.result.data()?.edges ?? [];
+		const out: AccountNode[] = [];
+		for (const edge of edges) {
+			if (edge?.node) out.push(edge.node);
+		}
+		return out;
+	});
+
+	/** Pagination controls (and the results list) are inert while fetching/errored. */
+	protected readonly controlsDisabled = computed(() => this.loading() || !!this.error());
+
+	/** Placeholder rows for the loading skeleton — one per requested page size. */
+	protected readonly skeletonRows = computed(() =>
+		Array.from({ length: this.pageSize() }, (_, i) => i),
+	);
+
+	/** Result-count copy above the list, matching the React reference wording. */
+	protected readonly resultCountLabel = computed(() => {
+		const total = this.totalCount();
+		const shown = this.nodes().length;
+		if (total != null && (this.hasNextPage() || this.hasPreviousPage())) {
+			return `${total} account${total !== 1 ? "s" : ""} found`;
+		}
+		return `Showing ${shown} account${shown !== 1 ? "s" : ""}`;
+	});
+
+	/** Display helpers for the results list (mirrors `fieldValue` in the template). */
+	protected name(node: AccountNode): string {
+		return fieldValue(node.Name) ?? "—";
+	}
+
+	protected secondaryLine(node: AccountNode): string {
+		return [fieldValue(node.Industry), fieldValue(node.Type)].filter(Boolean).join(" · ") || "—";
+	}
+
+	protected phone(node: AccountNode): string {
+		return fieldValue(node.Phone) ?? "";
+	}
+
+	protected ownerName(node: AccountNode): string {
+		return fieldValue(node.Owner?.Name) ?? "";
+	}
+}

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/pages/home/home-page.component.html

@@ -0,0 +1,18 @@
+<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+	<div class="flex items-center gap-6 mb-6">
+		<h1 class="text-2xl font-bold">Account Search</h1>
+		<app-button appearance="outlined" size="sm" (clicked)="browseAll()"
+			>Browse All Accounts</app-button
+		>
+	</div>
+	<form class="flex gap-2 items-center" (submit)="onSubmit($event)">
+		<app-input
+			class="flex-1"
+			type="text"
+			placeholder="Search by name, phone, or industry..."
+			label="Search"
+			[(value)]="term"
+		/>
+		<app-button type="submit">Search</app-button>
+	</form>
+</div>

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/pages/home/home-page.component.ts

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, inject, signal } from "@angular/core";
+import { Router } from "@angular/router";
+// Base-app UI wrappers, inherited (not recreated) by this feature. Post-compose
+// they land at uiBundles/<target>/src/app/components/ui/{button,input}/..., three levels
+// up from this page folder (app/features/account-search/ -> app/components/ui/).
+import { ButtonComponent } from "../../components/ui/button/button.component";
+import { InputComponent } from "../../components/ui/input/input.component";
+
+/**
+ * Account-search landing page. Mirrors the React `Home` page: a single search
+ * box plus a "Browse All Accounts" shortcut. Submitting navigates to the
+ * `accounts` list, carrying the typed term as the `q` query param so the search
+ * page's {@link ObjectSearchStateService} seeds the multi-field search filter.
+ *
+ * This is intentionally NOT the state-service-driven `app-search-bar` — Home
+ * has no search state of its own; it just routes into the search page.
+ */
+@Component({
+	selector: "app-home-page",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [ButtonComponent, InputComponent],
+	templateUrl: "./home-page.component.html",
+})
+export class HomePageComponent {
+	private readonly router = inject(Router);
+
+	/** Bound to the search input; forwarded as `?q=` on submit. */
+	protected readonly term = signal<string>("");
+
+	/** Navigate to the search page, seeding the search term when present. */
+	protected onSubmit(event: Event): void {
+		event.preventDefault();
+		this.browseAll(this.term() || undefined);
+	}
+
+	/** Go to the accounts list, optionally with a seeded search term. */
+	protected browseAll(q?: string): void {
+		void this.router.navigate(["/accounts"], {
+			queryParams: q ? { q } : {},
+		});
+	}
+}

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/pages/home/home.component.html

@@ -0,0 +1,6 @@
+<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+	<div class="text-center">
+		<h1 class="text-4xl font-bold text-gray-900 mb-4">Home</h1>
+		<p class="text-lg text-gray-600 mb-8">Welcome to your Angular application.</p>
+	</div>
+</main>

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/pages/home/home.component.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [HomeComponent],
+		}).compileComponents();
+	});
+
+	it('should create the component', () => {
+		const fixture = TestBed.createComponent(HomeComponent);
+		const component = fixture.componentInstance;
+		expect(component).toBeTruthy();
+	});
+
+	it('should render main landmark', async () => {
+		const fixture = TestBed.createComponent(HomeComponent);
+		await fixture.whenStable();
+		const compiled = fixture.nativeElement as HTMLElement;
+		expect(compiled.querySelector('main')).toBeTruthy();
+	});
+});

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/pages/home/home.component.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+	selector: 'app-home',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	templateUrl: './home.component.html',
+})
+export class HomeComponent {}

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/pages/not-found/not-found.component.html

@@ -0,0 +1,12 @@
+<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+	<div class="text-center">
+		<h1 class="text-4xl font-bold text-gray-900 mb-4">404</h1>
+		<p class="text-lg text-gray-600 mb-8">Page not found</p>
+		<a
+			routerLink="/"
+			class="inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+		>
+			Go to Home
+		</a>
+	</div>
+</main>