@salesforce/ui-bundle-template-app-angular-template-b2e 11.31.11 → 11.31.13

package/dist/force-app/main/default/uiBundles/{angularinternalapp/src/app/features/object-search/components/filters/numeric-range-filter/numeric-range-filter.component.ts → angularintapp/src/app/features/object-search/filters/numeric-range-filter.ts}

@@ -21,11 +21,11 @@ import { MatFormFieldModule } from "@angular/material/form-field";
 import { FormsModule } from "@angular/forms";
 // Base-app UI wrapper, inherited (not recreated) by this feature. Post-compose
 // it lands at uiBundles/<target>/src/app/components/ui/input/..., three levels up.
-import { InputComponent } from "../../../../../components/ui/input/input.component";
-import { ObjectSearchStateService } from "../../../object-search-state.service";
-import { FILTER_DEBOUNCE_MS } from "../../../utils/debounce";
-import type { FilterFieldConfig } from "../../../utils/filter-utils";
-import { FilterFieldWrapperComponent } from "../filter-field-wrapper/filter-field-wrapper.component";
+import { InputComponent } from "../../../components/ui/input/input";
+import { ObjectSearchStateService } from "../object-search-state.service";
+import { FILTER_DEBOUNCE_MS } from "../utils/debounce";
+import type { FilterFieldConfig } from "../utils/filter-utils";
+import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
 
 /**
  * Numeric range filter — paired `min` / `max` inputs whose committed values are
@@ -47,7 +47,7 @@ import { FilterFieldWrapperComponent } from "../filter-field-wrapper/filter-fiel
 		MatFormFieldModule,
 		MatInputModule,
 	],
-	templateUrl: "./numeric-range-filter.component.html",
+	templateUrl: "./numeric-range-filter.html",
 })
 export class NumericRangeFilterComponent {
 	private readonly state = inject(ObjectSearchStateService);

package/dist/force-app/main/default/uiBundles/{angularinternalapp/src/app/features/object-search/components/filters/search-filter/search-filter.component.ts → angularintapp/src/app/features/object-search/filters/search-filter.ts}

@@ -17,11 +17,11 @@ import { Subject } from "rxjs";
 import { debounceTime } from "rxjs/operators";
 // Base-app UI wrapper, inherited (not recreated) by this feature. Post-compose
 // it lands at uiBundles/<target>/src/app/components/ui/input/..., three levels up.
-import { InputComponent } from "../../../../../components/ui/input/input.component";
-import { ObjectSearchStateService } from "../../../object-search-state.service";
-import { FILTER_DEBOUNCE_MS } from "../../../utils/debounce";
-import type { FilterFieldConfig } from "../../../utils/filter-utils";
-import { FilterFieldWrapperComponent } from "../filter-field-wrapper/filter-field-wrapper.component";
+import { InputComponent } from "../../../components/ui/input/input";
+import { ObjectSearchStateService } from "../object-search-state.service";
+import { FILTER_DEBOUNCE_MS } from "../utils/debounce";
+import type { FilterFieldConfig } from "../utils/filter-utils";
+import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
 
 /**
  * Multi-field search filter — a debounced input whose value is applied via
@@ -35,7 +35,7 @@ import { FilterFieldWrapperComponent } from "../filter-field-wrapper/filter-fiel
 	selector: "app-search-filter",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [InputComponent, FilterFieldWrapperComponent],
-	templateUrl: "./search-filter.component.html",
+	templateUrl: "./search-filter.html",
 })
 export class SearchFilterComponent {
 	private readonly state = inject(ObjectSearchStateService);

package/dist/force-app/main/default/uiBundles/{angularinternalapp/src/app/features/object-search/components/filters/select-filter/select-filter.component.ts → angularintapp/src/app/features/object-search/filters/select-filter.ts}

@@ -9,10 +9,10 @@ import { ChangeDetectionStrategy, Component, computed, inject, input } from "@an
 import {
 	SelectComponent,
 	type AppSelectOption,
-} from "../../../../../components/ui/select/select.component";
-import { ObjectSearchStateService } from "../../../object-search-state.service";
-import type { FilterFieldConfig } from "../../../utils/filter-utils";
-import { FilterFieldWrapperComponent } from "../filter-field-wrapper/filter-field-wrapper.component";
+} from "../../../components/ui/select/select";
+import { ObjectSearchStateService } from "../object-search-state.service";
+import type { FilterFieldConfig } from "../utils/filter-utils";
+import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
 
 /**
  * Single-value picklist filter — a select rendered from `config.options` with
@@ -27,7 +27,7 @@ const ALL_VALUE = "";
 	selector: "app-select-filter",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [SelectComponent, FilterFieldWrapperComponent],
-	templateUrl: "./select-filter.component.html",
+	templateUrl: "./select-filter.html",
 })
 export class SelectFilterComponent {
 	private readonly state = inject(ObjectSearchStateService);

package/dist/force-app/main/default/uiBundles/{angularinternalapp/src/app/features/object-search/components/filters/text-filter/text-filter.component.ts → angularintapp/src/app/features/object-search/filters/text-filter.ts}

@@ -17,11 +17,11 @@ import { Subject } from "rxjs";
 import { debounceTime } from "rxjs/operators";
 // Base-app UI wrapper, inherited (not recreated) by this feature. Post-compose
 // it lands at uiBundles/<target>/src/app/components/ui/input/..., three levels up.
-import { InputComponent } from "../../../../../components/ui/input/input.component";
-import { ObjectSearchStateService } from "../../../object-search-state.service";
-import { FILTER_DEBOUNCE_MS } from "../../../utils/debounce";
-import type { FilterFieldConfig } from "../../../utils/filter-utils";
-import { FilterFieldWrapperComponent } from "../filter-field-wrapper/filter-field-wrapper.component";
+import { InputComponent } from "../../../components/ui/input/input";
+import { ObjectSearchStateService } from "../object-search-state.service";
+import { FILTER_DEBOUNCE_MS } from "../utils/debounce";
+import type { FilterFieldConfig } from "../utils/filter-utils";
+import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
 
 /**
  * Text filter — free-text input that writes a `like %value%` clause via
@@ -36,7 +36,7 @@ import { FilterFieldWrapperComponent } from "../filter-field-wrapper/filter-fiel
 	selector: "app-text-filter",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [InputComponent, FilterFieldWrapperComponent],
-	templateUrl: "./text-filter.component.html",
+	templateUrl: "./text-filter.html",
 })
 export class TextFilterComponent {
 	private readonly state = inject(ObjectSearchStateService);

package/dist/force-app/main/default/uiBundles/{angularinternalapp/src/app/features/object-search/components/pagination-controls/pagination-controls.component.ts → angularintapp/src/app/features/object-search/pagination/pagination.ts}

@@ -5,8 +5,8 @@
  */
 import { ChangeDetectionStrategy, Component, inject, input } from "@angular/core";
 import type { PageEvent } from "@angular/material/paginator";
-import { PaginatorComponent } from "../../../../components/ui/paginator/paginator.component";
-import { ObjectSearchStateService } from "../../object-search-state.service";
+import { PaginatorComponent } from "../../../components/ui/paginator/paginator";
+import { ObjectSearchStateService } from "../object-search-state.service";
 
 /**
  * Cursor-pagination bridge. Feeds the shared cursor state into the presentational
@@ -23,7 +23,7 @@ import { ObjectSearchStateService } from "../../object-search-state.service";
 	selector: "app-pagination-controls",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [PaginatorComponent],
-	templateUrl: "./pagination-controls.component.html",
+	templateUrl: "./pagination.html",
 })
 export class PaginationControlsComponent {
 	/** Total row count from the latest fetch; drives the paginator's range label. */

package/dist/force-app/main/default/uiBundles/{angularinternalapp/src/app/features/object-search/components/search-bar/search-bar.component.html → angularintapp/src/app/features/object-search/search-bar/search-bar.html}

@@ -45,11 +45,11 @@
 			</svg>
 			<span>Filters</span>
 			@if (nonSearchFilterCount() > 0) {
-				<span
-					class="inline-flex items-center justify-center h-5 min-w-5 rounded-full bg-primary text-primary-foreground text-xs px-1"
-				>
-					{{ nonSearchFilterCount() }}
-				</span>
+			<span
+				class="inline-flex items-center justify-center h-5 min-w-5 rounded-full bg-primary text-primary-foreground text-xs px-1"
+			>
+				{{ nonSearchFilterCount() }}
+			</span>
 			}
 		</app-button>
 		<div class="p-3 min-w-72 max-w-96 space-y-3">

package/dist/force-app/main/default/uiBundles/{angularinternalapp/src/app/features/object-search/components/search-bar/search-bar.component.ts → angularintapp/src/app/features/object-search/search-bar/search-bar.ts}

@@ -15,11 +15,11 @@ import {
 } from "@angular/core";
 import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
 import { debounceTime } from "rxjs/operators";
-import { ButtonComponent } from "../../../../components/ui/button/button.component";
-import { InputComponent } from "../../../../components/ui/input/input.component";
-import { PopoverComponent } from "../../../../components/ui/popover/popover.component";
-import { ObjectSearchStateService } from "../../object-search-state.service";
-import type { FilterFieldConfig } from "../../utils/filter-utils";
+import { ButtonComponent } from "../../../components/ui/button/button";
+import { InputComponent } from "../../../components/ui/input/input";
+import { PopoverComponent } from "../../../components/ui/popover/popover";
+import { ObjectSearchStateService } from "../object-search-state.service";
+import type { FilterFieldConfig } from "../utils/filter-utils";
 
 /** How long to wait after the last keystroke before writing to state. */
 const SEARCH_DEBOUNCE_MS = 300;
@@ -48,7 +48,7 @@ const SEARCH_DEBOUNCE_MS = 300;
 	selector: "app-search-bar",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [ButtonComponent, InputComponent, PopoverComponent],
-	templateUrl: "./search-bar.component.html",
+	templateUrl: "./search-bar.html",
 })
 export class SearchBarComponent implements OnInit {
 	/** Config for the multi-field search filter (its label, placeholder, etc.). */

package/dist/force-app/main/default/uiBundles/angularintapp/src/app/features/object-search/sort-control/sort-control.html

@@ -0,0 +1,50 @@
+<div class="flex items-center gap-2">
+	<span class="text-sm text-muted-foreground whitespace-nowrap">{{ label() }}</span>
+	<app-select
+		class="w-[160px]"
+		[options]="options()"
+		[value]="selectedValue()"
+		(valueChange)="onFieldChange($event)"
+		placeholder="Default"
+	/>
+	@if (sort(); as active) {
+	<app-button
+		appearance="text"
+		size="icon-sm"
+		[attr.aria-label]="'Sort ' + (active.direction === 'ASC' ? 'descending' : 'ascending')"
+		(clicked)="toggleDirection()"
+	>
+		@if (active.direction === "ASC") {
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="h-4 w-4"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			aria-hidden="true"
+		>
+			<path d="m5 12 7-7 7 7" />
+			<path d="M12 19V5" />
+		</svg>
+		} @else {
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="h-4 w-4"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			aria-hidden="true"
+		>
+			<path d="M12 5v14" />
+			<path d="m19 12-7 7-7-7" />
+		</svg>
+		}
+	</app-button>
+	}
+</div>

package/dist/force-app/main/default/uiBundles/{angularinternalapp/src/app/features/object-search/components/sort-control/sort-control.component.ts → angularintapp/src/app/features/object-search/sort-control/sort-control.ts}

@@ -4,13 +4,13 @@
  * For full license text, see the LICENSE.txt file
  */
 import { ChangeDetectionStrategy, Component, computed, inject, input } from "@angular/core";
-import { ButtonComponent } from "../../../../components/ui/button/button.component";
+import { ButtonComponent } from "../../../components/ui/button/button";
 import {
 	SelectComponent,
 	type AppSelectOption,
-} from "../../../../components/ui/select/select.component";
-import { ObjectSearchStateService } from "../../object-search-state.service";
-import type { SortFieldConfig, SortState } from "../../utils/sort-utils";
+} from "../../../components/ui/select/select";
+import { ObjectSearchStateService } from "../object-search-state.service";
+import type { SortFieldConfig, SortState } from "../utils/sort-utils";
 
 /** Sentinel value used in the select to represent "no sort". */
 const NONE_VALUE = "__none__";
@@ -27,7 +27,7 @@ const NONE_VALUE = "__none__";
 	selector: "app-sort-control",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [ButtonComponent, SelectComponent],
-	templateUrl: "./sort-control.component.html",
+	templateUrl: "./sort-control.html",
 })
 export class SortControlComponent {
 	/** Sortable fields to expose in the select. */

package/dist/force-app/main/default/uiBundles/angularintapp/src/app/pages/account-detail/account-detail-page.html

@@ -0,0 +1,164 @@
+<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6" [attr.aria-busy]="loading()">
+	<app-object-breadcrumb
+		listPath="/accounts"
+		listLabel="Accounts"
+		[loading]="loading()"
+		[recordName]="recordName()"
+	/>
+
+	@if (loading()) {
+	<!-- Loading state -->
+	<app-skeleton class="h-8 w-56 mb-4" />
+	<app-card>
+		<app-card-content class="space-y-8">
+			<div class="space-y-4">
+				@for (row of skeletonRows; track row) {
+				<div class="grid grid-cols-2 gap-x-8 gap-y-4">
+					<div>
+						<app-skeleton class="h-4 w-24 mb-1.5" />
+						<app-skeleton class="h-5 w-40" />
+					</div>
+					<div>
+						<app-skeleton class="h-4 w-24 mb-1.5" />
+						<app-skeleton class="h-5 w-40" />
+					</div>
+				</div>
+				}
+			</div>
+			<app-separator />
+			<div class="space-y-4">
+				<app-skeleton class="h-7 w-48 py-2" />
+				<div class="grid grid-cols-2 gap-x-8 gap-y-4">
+					<app-skeleton class="h-12 w-full" />
+					<app-skeleton class="h-12 w-full" />
+				</div>
+			</div>
+		</app-card-content>
+	</app-card>
+	} @else if (error()) {
+	<!-- Error state -->
+	<app-alert
+		variant="destructive"
+		icon="error"
+		title="Failed to load account"
+		description="Something went wrong while loading this account. Please try again later."
+	/>
+	<div class="mt-4 flex gap-3">
+		<app-button appearance="outlined" (clicked)="goBack()">← Back</app-button>
+		<app-button appearance="outlined" (clicked)="reload()">Retry</app-button>
+	</div>
+	} @else if (notFound()) {
+	<!-- Not found state -->
+	<app-card>
+		<app-card-content 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="M12 17h.01" />
+				<path d="M10.1 9a2.4 2.4 0 0 1 3.9 1.9c0 1.5-2 2-2 3" />
+				<path d="M14.5 4.5 20 10l-2 2" />
+				<path d="M4 4h9l7 7v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Z" />
+			</svg>
+			<h2 class="text-lg font-semibold mb-1">Account not found</h2>
+			<p class="text-sm text-muted-foreground mb-6">
+				The account you're looking for doesn't exist or may have been deleted.
+			</p>
+			<app-button appearance="outlined" (clicked)="goBack()">← Go back</app-button>
+		</app-card-content>
+	</app-card>
+	} @else if (account()) {
+	<!-- Content -->
+	<h1 class="text-2xl font-bold mb-4">Account: {{ title() }}</h1>
+
+	<app-card>
+		<app-card-content class="space-y-8">
+			<!-- Top section -->
+			<div class="space-y-4">
+				@for (row of topRows(); track $index) {
+				<div class="grid grid-cols-2 gap-x-8 gap-y-4">
+					@for (field of row; track field.label) {
+					<div>
+						<dt class="text-sm text-muted-foreground">{{ field.label }}</dt>
+						<dd class="mt-0.5">
+							@if (field.value && field.telephone) {
+							<a [href]="'tel:' + field.value" class="underline">{{ field.value }}</a>
+							} @else { {{ field.value ?? "—" }} }
+						</dd>
+					</div>
+					}
+				</div>
+				}
+			</div>
+
+			<app-separator />
+
+			<!-- Additional Information -->
+			<app-collapsible title="Additional Information" [(open)]="additionalOpen">
+				<div class="space-y-4">
+					@for (row of additionalRows(); track $index) {
+					<div class="grid grid-cols-2 gap-x-8 gap-y-4">
+						@for (field of row; track field.label) {
+						<div>
+							<dt class="text-sm text-muted-foreground">{{ field.label }}</dt>
+							<dd class="mt-0.5">{{ field.value ?? "—" }}</dd>
+						</div>
+						}
+					</div>
+					}
+					<div>
+						<dt class="text-sm text-muted-foreground">Description</dt>
+						<dd class="mt-0.5">{{ description() ?? "—" }}</dd>
+					</div>
+				</div>
+			</app-collapsible>
+			<div class="space-y-4"></div>
+			<app-separator />
+
+			<!-- Address Information -->
+			<app-collapsible title="Address Information" [(open)]="addressOpen">
+				<div class="grid grid-cols-2 gap-x-8 gap-y-4">
+					<div>
+						<dt class="text-sm text-muted-foreground">Billing Address</dt>
+						<dd class="mt-0.5">
+							@if (billingAddress()) { @for (line of billingAddress(); track $index) {
+							<div>{{ line }}</div>
+							} } @else { — }
+						</dd>
+					</div>
+					<div>
+						<dt class="text-sm text-muted-foreground">Shipping Address</dt>
+						<dd class="mt-0.5">
+							@if (shippingAddress()) { @for (line of shippingAddress(); track $index) {
+							<div>{{ line }}</div>
+							} } @else { — }
+						</dd>
+					</div>
+				</div>
+			</app-collapsible>
+			<div class="space-y-4"></div>
+			<app-separator />
+			<!-- System Information -->
+			<app-collapsible title="System Information" [(open)]="systemOpen">
+				<div class="grid grid-cols-2 gap-x-8 gap-y-4">
+					<div>
+						<dt class="text-sm text-muted-foreground">Created By</dt>
+						<dd class="mt-0.5">{{ createdBy() ?? "—" }}</dd>
+					</div>
+					<div>
+						<dt class="text-sm text-muted-foreground">Last Modified By</dt>
+						<dd class="mt-0.5">{{ lastModifiedBy() ?? "—" }}</dd>
+					</div>
+				</div>
+			</app-collapsible>
+		</app-card-content>
+	</app-card>
+	}
+</div>

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

@@ -10,17 +10,14 @@ 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";
+import { AlertComponent } from "../../components/ui/alert/alert";
+import { ButtonComponent } from "../../components/ui/button/button";
+import { CardComponent, CardContentComponent } from "../../components/ui/card/card";
+import { CollapsibleComponent } from "../../components/ui/collapsible/collapsible";
+import { SeparatorComponent } from "../../components/ui/separator/separator";
+import { SkeletonComponent } from "../../components/ui/skeleton/skeleton";
 // Object-search feature building blocks (Waves 1-2), two levels up.
-import { ObjectBreadcrumbComponent } from "../../features/object-search/components/object-breadcrumb/object-breadcrumb.component";
+import { ObjectBreadcrumbComponent } from "../../features/object-search/breadcrumb/breadcrumb";
 import { createAsyncData } from "../../utils/async-data";
 import {
 	fieldValue,
@@ -66,8 +63,8 @@ interface Field {
 		SkeletonComponent,
 		ObjectBreadcrumbComponent,
 	],
-	templateUrl: "./account-detail-page.component.html",
-	styleUrl: "./account-detail-page.component.scss",
+	templateUrl: "./account-detail-page.html",
+	styleUrl: "./account-detail-page.scss",
 })
 export class AccountDetailPageComponent {
 	private readonly service = inject(AccountSearchService);

package/dist/force-app/main/default/uiBundles/angularintapp/src/app/pages/account-search/account-search-page.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 → angularintapp/src/app/pages/account-search/account-search-page.ts}

@@ -8,21 +8,21 @@ 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";
+import { AlertComponent } from "../../components/ui/alert/alert";
+import { CollapsibleComponent } from "../../components/ui/collapsible/collapsible";
+import { SkeletonComponent } from "../../components/ui/skeleton/skeleton";
 // 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 { ObjectBreadcrumbComponent } from "../../features/object-search/breadcrumb/breadcrumb";
+import { SortControlComponent } from "../../features/object-search/sort-control/sort-control";
+import { ActiveFiltersComponent } from "../../features/object-search/filters/active-filters";
+import { PaginationControlsComponent } from "../../features/object-search/pagination/pagination";
+import { SearchFilterComponent } from "../../features/object-search/filters/search-filter";
+import { TextFilterComponent } from "../../features/object-search/filters/text-filter";
+import { SelectFilterComponent } from "../../features/object-search/filters/select-filter";
+import { MultiSelectFilterComponent } from "../../features/object-search/filters/multi-select-filter";
+import { NumericRangeFilterComponent } from "../../features/object-search/filters/numeric-range-filter";
+import { DateFilterComponent } from "../../features/object-search/filters/date-filter";
+import { DateRangeFilterComponent } from "../../features/object-search/filters/date-range-filter";
 import {
 	ObjectSearchStateService,
 	type PaginationConfig,
@@ -109,7 +109,7 @@ const ACCOUNT_SORT_CONFIGS: SortFieldConfig[] = [
 		DateFilterComponent,
 		DateRangeFilterComponent,
 	],
-	templateUrl: "./account-search-page.component.html",
+	templateUrl: "./account-search-page.html",
 })
 export class AccountSearchPageComponent {
 	private readonly service = inject(AccountSearchService);

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

@@ -8,8 +8,8 @@ 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";
+import { ButtonComponent } from "../../components/ui/button/button";
+import { InputComponent } from "../../components/ui/input/input";
 
 /**
  * Account-search landing page. Mirrors the React `Home` page: a single search
@@ -24,7 +24,7 @@ import { InputComponent } from "../../components/ui/input/input.component";
 	selector: "app-home-page",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [ButtonComponent, InputComponent],
-	templateUrl: "./home-page.component.html",
+	templateUrl: "./home-page.html",
 })
 export class HomePageComponent {
 	private readonly router = inject(Router);

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

@@ -1,5 +1,5 @@
 import { TestBed } from '@angular/core/testing';
-import { HomeComponent } from './home.component';
+import { HomeComponent } from './home';
 
 describe('HomeComponent', () => {
 	beforeEach(async () => {