@salesforce/webapp-template-app-react-sample-b2x-experimental 1.70.0 → 1.71.1

package/README.md

@@ -0,0 +1,52 @@
+# appreactsampleb2x
+
+B2X (Business-to-Consumer) sample app — property listings, site container, and Experience Cloud deployment.
+
+## In this monorepo
+
+This package is a **template app** in the webapps monorepo. It is built by applying feature patches to the base React app; the output is written to `dist/`.
+
+### Build
+
+```bash
+nx run appreactsampleb2x:build
+```
+
+Produces an SFDX project in `dist/` with the web app at `dist/force-app/main/default/webapplications/appreactsampleb2x/`.
+
+### Dev server
+
+```bash
+nx run appreactsampleb2x:dev
+```
+
+Starts the Vite dev server from the built output in `dist/`.
+
+### Watch
+
+```bash
+nx run appreactsampleb2x:watch
+```
+
+Re-applies patches automatically when source files change.
+
+### Test
+
+This package has no dedicated test target. To run tests, build first, then run them from the built web app:
+
+```bash
+nx run appreactsampleb2x:build
+cd dist/force-app/main/default/webapplications/appreactsampleb2x && npm install && npm test
+```
+
+### Clean
+
+```bash
+npm run clean
+```
+
+Removes the `dist/` directory.
+
+---
+
+For standalone run, deploy, and test instructions (e.g. after publishing or extracting `dist/`), see the [web app README](dist/force-app/main/default/webapplications/appreactsampleb2x/README.md).

package/dist/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.71.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.71.0...v1.71.1) (2026-03-05)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
+# [1.71.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.70.0...v1.71.0) (2026-03-05)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
 # [1.70.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.69.0...v1.70.0) (2026-03-04)
 
 **Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental

package/dist/force-app/main/default/README.md

@@ -0,0 +1,88 @@
+# App React Sample B2X
+
+A B2X (Business-to-Consumer) sample React web app for Salesforce Experience Cloud. Demonstrates property listings, maintenance requests, and a dashboard with an app shell designed for external-facing deployment. Built with React, Vite, TypeScript, and Tailwind/shadcn.
+
+## What's included
+
+| Path                                                        | Description                                                                                                                                                                                                                                                                                                                                                       |
+| ----------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `force-app/main/default/webapplications/appreactsampleb2x/` | React web app (source, config, tests)                                                                                                                                                                                                                                                                                                                             |
+| `force-app/main/default/objects/`                           | 17 custom objects — Agent\_\_c, Application\_\_c, KPI_Snapshot\_\_c, Lease\_\_c, Maintenance_Request\_\_c, Maintenance_Worker\_\_c, Notification\_\_c, Payment\_\_c, Property\_\_c, Property_Cost\_\_c, Property_Feature\_\_c, Property_Image\_\_c, Property_Listing\_\_c, Property_Management_Company\_\_c, Property_Owner\_\_c, Property_Sale\_\_c, Tenant\_\_c |
+| `force-app/main/default/layouts/`                           | Page layouts for each custom object                                                                                                                                                                                                                                                                                                                               |
+| `force-app/main/default/permissionsets/`                    | `Property_Management_Access` permission set                                                                                                                                                                                                                                                                                                                       |
+| `force-app/main/default/classes/`                           | Apex classes — `MaintenanceRequestListAction`, `MaintenanceRequestUpdatePriorityAction`                                                                                                                                                                                                                                                                           |
+| `force-app/main/default/cspTrustedSites/`                   | CSP trusted sites for external resources (Google Fonts, Pexels, Unsplash, GitHub Avatars)                                                                                                                                                                                                                                                                         |
+| `force-app/main/default/data/`                              | Sample data (JSON) for all objects, importable via `sf data import tree`                                                                                                                                                                                                                                                                                          |
+| `force-app/main/default/digitalExperienceConfigs/`          | Experience Cloud site configuration                                                                                                                                                                                                                                                                                                                               |
+| `force-app/main/default/digitalExperiences/`                | Experience Cloud site definition                                                                                                                                                                                                                                                                                                                                  |
+| `force-app/main/default/networks/`                          | Experience Cloud network                                                                                                                                                                                                                                                                                                                                          |
+| `force-app/main/default/sites/`                             | Salesforce site                                                                                                                                                                                                                                                                                                                                                   |
+
+## Getting started
+
+Navigate to the web app and install dependencies:
+
+```bash
+cd force-app/main/default/webapplications/appreactsampleb2x
+npm install
+npm run dev
+```
+
+Opens at http://localhost:5173 by default. For build and test instructions, see the [web app README](force-app/main/default/webapplications/appreactsampleb2x/README.md).
+
+## Deploy
+
+### Deploy everything (metadata + Experience Cloud site + web app)
+
+```bash
+cd force-app/main/default/webapplications/appreactsampleb2x && npm install && npm run build && cd -
+sf project deploy start --source-dir force-app --target-org <alias>
+```
+
+### Deploy the web app only
+
+```bash
+cd force-app/main/default/webapplications/appreactsampleb2x && npm install && npm run build && cd -
+sf project deploy start --source-dir force-app/main/default/webapplications --target-org <alias>
+```
+
+### Deploy metadata only (objects, layouts, permission sets, Apex classes)
+
+```bash
+sf project deploy start \
+  --source-dir force-app/main/default/objects \
+  --source-dir force-app/main/default/layouts \
+  --source-dir force-app/main/default/permissionsets \
+  --source-dir force-app/main/default/classes \
+  --target-org <alias>
+```
+
+### Deploy Experience Cloud site only
+
+```bash
+sf project deploy start \
+  --source-dir force-app/main/default/digitalExperienceConfigs \
+  --source-dir force-app/main/default/digitalExperiences \
+  --source-dir force-app/main/default/networks \
+  --source-dir force-app/main/default/sites \
+  --target-org <alias>
+```
+
+Replace `<alias>` with your target org alias.
+
+## Import sample data
+
+```bash
+sf data import tree --plan force-app/main/default/data/data-plan.json --target-org <alias>
+```
+
+## Configure Your Salesforce DX Project
+
+The `sfdx-project.json` file contains useful configuration information for your project. See [Salesforce DX Project Configuration](https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_ws_config.htm) in the _Salesforce DX Developer Guide_ for details about this file.
+
+## Read All About It
+
+- [Salesforce Extensions Documentation](https://developer.salesforce.com/tools/vscode/)
+- [Salesforce CLI Setup Guide](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_intro.htm)
+- [Salesforce DX Developer Guide](https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_intro.htm)
+- [Salesforce CLI Command Reference](https://developer.salesforce.com/docs/atlas.en-us.sfdx_cli_reference.meta/sfdx_cli_reference/cli_reference.htm)

package/dist/force-app/main/default/webapplications/appreactsampleb2x/README.md

@@ -0,0 +1,35 @@
+# App React Sample B2X
+
+A sample B2X (Business-to-Consumer) React web app with an app shell for Salesforce Experience Cloud. Includes property listings, maintenance requests, and a dashboard. Built with React, Vite, TypeScript, and Tailwind/shadcn.
+
+For project-level details (metadata, deploy, sample data), see the [project README](../../../../../../README.md).
+
+## Prerequisites
+
+```bash
+npm install
+```
+
+## Run (development)
+
+```bash
+npm run dev
+```
+
+Starts the Vite dev server (default: http://localhost:5173).
+
+## Build
+
+```bash
+npm run build
+```
+
+Writes the production bundle to `dist/` inside the web app folder.
+
+## Test
+
+```bash
+npm test
+```
+
+Runs the unit test suite (Vitest).

package/dist/force-app/main/default/webapplications/appreactsampleb2x/package.json

@@ -15,8 +15,8 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/sdk-data": "^1.70.0",
-    "@salesforce/webapp-experimental": "^1.70.0",
+    "@salesforce/sdk-data": "^1.71.1",
+    "@salesforce/webapp-experimental": "^1.71.1",
     "@tailwindcss/vite": "^4.1.17",
     "@tanstack/react-form": "^1.28.4",
     "@types/leaflet": "^1.9.21",
@@ -43,7 +43,7 @@
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@graphql-tools/utils": "^11.0.0",
     "@playwright/test": "^1.49.0",
-    "@salesforce/vite-plugin-webapp-experimental": "^1.70.0",
+    "@salesforce/vite-plugin-webapp-experimental": "^1.71.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/components/alerts/status-alert.tsx

@@ -1,45 +1,49 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import { Alert, AlertDescription } from "../ui/alert";
-import { useId } from "react";
-import { AlertCircle, CheckCircle } from "lucide-react";
+import { cva, type VariantProps } from 'class-variance-authority';
+import { AlertCircleIcon, CheckCircle2Icon } from 'lucide-react';
+import { Alert, AlertDescription } from '../../components/ui/alert';
+import { useId } from 'react';
 
-const statusAlertVariants = cva("", {
-	variants: {
-		variant: {
-			error: "",
-			success: "",
-		},
-	},
-	defaultVariants: {
-		variant: "error",
-	},
+const statusAlertVariants = cva('', {
+  variants: {
+    variant: {
+      error: '',
+      success: '',
+    },
+  },
+  defaultVariants: {
+    variant: 'error',
+  },
 });
 
 interface StatusAlertProps extends VariantProps<typeof statusAlertVariants> {
-	children?: React.ReactNode;
-	/** Alert variant type. @default "error" */
-	variant?: "error" | "success";
+  children?: React.ReactNode;
+  /** Alert variant type. @default "error" */
+  variant?: 'error' | 'success';
 }
 
 /**
  * Status alert component for displaying error or success messages.
  * Returns null if no children are provided.
  */
-export function StatusAlert({ children, variant = "error" }: StatusAlertProps) {
-	if (!children) return null;
+export function StatusAlert({ children, variant = 'error' }: StatusAlertProps) {
+  if (!children) return null;
 
-	const isError = variant === "error";
-	const descriptionId = useId();
+  const isError = variant === 'error';
+  const descriptionId = useId();
 
-	return (
-		<Alert
-			variant={isError ? "destructive" : "default"}
-			className={statusAlertVariants({ variant })}
-			aria-describedby={descriptionId}
-			role={isError ? "alert" : "status"}
-		>
-			{isError ? <AlertCircle aria-hidden="true" /> : <CheckCircle aria-hidden="true" />}
-			<AlertDescription id={descriptionId}>{children}</AlertDescription>
-		</Alert>
-	);
+  return (
+    <Alert
+      variant={isError ? 'destructive' : 'default'}
+      className={statusAlertVariants({ variant })}
+      aria-describedby={descriptionId}
+      role={isError ? 'alert' : 'status'}
+    >
+      {isError ? (
+        <AlertCircleIcon aria-hidden="true" />
+      ) : (
+        <CheckCircle2Icon aria-hidden="true" />
+      )}
+      <AlertDescription id={descriptionId}>{children}</AlertDescription>
+    </Alert>
+  );
 }

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/components/layouts/card-layout.tsx

@@ -0,0 +1,29 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '../../components/ui/card';
+
+interface CardLayoutProps {
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+}
+
+/**
+ * Card layout component for authentication pages.
+ * Provides CardHeader with title and optional description, and CardContent.
+ */
+export function CardLayout({ title, description, children }: CardLayoutProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-2xl">{title}</CardTitle>
+        {description && <CardDescription>{description}</CardDescription>}
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+    </Card>
+  );
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/{api → features/global-search/api}/objectDetailService.ts

@@ -11,9 +11,9 @@ import { uiApiClient } from "@salesforce/webapp-experimental/api";
 import type { LayoutResponse } from "../types/recordDetail/recordDetail";
 import { LayoutResponseSchema } from "../types/recordDetail/recordDetail";
 import { fetchAndValidate, safeEncodePath } from "../utils/apiUtils";
-import { objectInfoService } from "../api/objectInfoService";
+import { objectInfoService } from "./objectInfoService";
 import type { ObjectInfoResult } from "../types/objectInfo/objectInfo";
-import { getRecordByIdGraphQL, type GraphQLRecordNode } from "../api/recordListGraphQLService";
+import { getRecordByIdGraphQL, type GraphQLRecordNode } from "./recordListGraphQLService";
 import type { Column } from "../types/search/searchResults";
 import { calculateFieldsToFetch } from "../utils/recordUtils";
 

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/{components → features/global-search/components}/detail/DetailHeader.tsx

@@ -4,7 +4,7 @@
  * @param title - Record title (e.g. record name) shown next to the back control.
  * @param onBack - Called when the user activates the back control.
  */
-import { Button } from "../ui/button";
+import { Button } from "../../../../components/ui/button";
 import { ArrowLeft } from "lucide-react";
 
 interface DetailHeaderProps {

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/{components → features/global-search/components}/filters/FilterInput.tsx

@@ -22,8 +22,8 @@
  * />
  * ```
  */
-import { Input } from "../ui/input";
-import { Field, FieldLabel, FieldDescription } from "../ui/field";
+import { Input } from "../../../../components/ui/input";
+import { Field, FieldLabel, FieldDescription } from "../../../../components/ui/field";
 import type { Filter } from "../../types/filters/filters";
 
 interface FilterInputProps {

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/{components → features/global-search/components}/filters/FilterSelect.tsx

@@ -30,8 +30,8 @@ import {
 	SelectItem,
 	SelectTrigger,
 	SelectValue,
-} from "../ui/select";
-import { Field, FieldLabel, FieldDescription } from "../ui/field";
+} from "../../../../components/ui/select";
+import { Field, FieldLabel, FieldDescription } from "../../../../components/ui/field";
 import type { Filter } from "../../types/filters/filters";
 import type { PicklistValue } from "../../types/filters/picklist";
 

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/{components → features/global-search/components/filters}/FiltersPanel.tsx

@@ -27,16 +27,21 @@
  * ```
  */
 import { useState, useMemo, useCallback, useEffect, useRef } from "react";
-import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
-import { Skeleton } from "./ui/skeleton";
-import { FiltersForm } from "./forms/filters-form";
-import { Field, FieldLabel, FieldDescription } from "./ui/field";
-import { useAppForm, validateRangeValues } from "../hooks/form";
-import type { Filter, FilterCriteria } from "../types/filters/filters";
-import type { PicklistValue } from "../types/filters/picklist";
-import { parseFilterValue } from "../utils/filterUtils";
-import { sanitizeFilterValue } from "../utils/sanitizationUtils";
-import { getFormValueByPath } from "../utils/formUtils";
+import {
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
+} from "../../../../components/ui/card";
+import { Skeleton } from "../../../../components/ui/skeleton";
+import { FiltersForm } from "../forms/filters-form";
+import { Field, FieldLabel, FieldDescription } from "../../../../components/ui/field";
+import { useAppForm, validateRangeValues } from "../../hooks/form";
+import type { Filter, FilterCriteria } from "../../types/filters/filters";
+import type { PicklistValue } from "../../types/filters/picklist";
+import { parseFilterValue } from "../../utils/filterUtils";
+import { sanitizeFilterValue } from "../../utils/sanitizationUtils";
+import { getFormValueByPath } from "../../utils/formUtils";
 
 interface FiltersPanelProps {
 	filters: Filter[];

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/{components → features/global-search/components}/forms/filters-form.tsx

@@ -1,8 +1,8 @@
-import { FieldGroup } from "../ui/field";
-import { StatusAlert } from "../alerts/status-alert";
-import { CardLayout } from "../layout/card-layout";
+import { FieldGroup } from "../../../../components/ui/field";
+import { StatusAlert } from "../../../../components/alerts/status-alert";
+import { CardLayout } from "../../../../components/layouts/card-layout";
 import { SubmitButton } from "./submit-button";
-import { Button } from "../ui/button";
+import { Button } from "../../../../components/ui/button";
 import { useFormContext } from "../../hooks/form";
 import { useId, useEffect, useRef } from "react";
 

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/{components → features/global-search/components}/forms/submit-button.tsx

@@ -1,6 +1,6 @@
-import { Button } from "../ui/button";
-import { Spinner } from "../ui/spinner";
-import { cn } from "../../lib/utils";
+import { Button } from "../../../../components/ui/button";
+import { Spinner } from "../../../../components/ui/spinner";
+import { cn } from "../../../../lib/utils";
 import { useFormContext } from "../../hooks/form";
 
 interface SubmitButtonProps extends Omit<React.ComponentProps<typeof Button>, "type" | "disabled"> {

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/{components/shared → features/global-search/components/search}/GlobalSearchInput.tsx

@@ -7,11 +7,11 @@
 import { useState, useCallback, useMemo, useId } from "react";
 import type { KeyboardEvent, ChangeEvent } from "react";
 import { useNavigate } from "react-router";
-import { Card, CardContent } from "../ui/card";
-import { Input } from "../ui/input";
-import { Button } from "../ui/button";
+import { Card, CardContent } from "../../../../components/ui/card";
+import { Input } from "../../../../components/ui/input";
+import { Button } from "../../../../components/ui/button";
 import { Search } from "lucide-react";
-import { OBJECT_API_NAMES } from "../../constants";
+import { OBJECT_API_NAMES } from "../../../../constants";
 import { useObjectInfoBatch } from "../../hooks/useObjectInfoBatch";
 
 const BROWSE_SEGMENT = "browse__all";

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/{components → features/global-search/components}/search/SearchPagination.tsx

@@ -9,15 +9,15 @@
  * - Previous disabled when !hasPreviousPage (cursor stack enables prev when pageIndex > 0).
  * - Next disabled when !hasNextPage or nextPageToken is null.
  */
-import { Button } from "../ui/button";
+import { Button } from "../../../../components/ui/button";
 import {
 	Select,
 	SelectContent,
 	SelectItem,
 	SelectTrigger,
 	SelectValue,
-} from "../ui/select";
-import { Label } from "../ui/label";
+} from "../../../../components/ui/select";
+import { Label } from "../../../../components/ui/label";
 import { PAGE_SIZE_OPTIONS, getValidPageSize, isValidPageSize } from "../../utils/paginationUtils";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/{components → features/global-search/components/search}/SearchResultCard.tsx

@@ -25,11 +25,16 @@
  */
 import { useNavigate } from "react-router";
 import { useMemo, useCallback } from "react";
-import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
-import type { Column, SearchResultRecordData } from "../types/search/searchResults";
-import { getNestedFieldValue } from "../utils/fieldUtils";
-import ResultCardFields from "./search/ResultCardFields";
-import { OBJECT_API_NAMES } from "../constants";
+import {
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
+} from "../../../../components/ui/card";
+import type { Column, SearchResultRecordData } from "../../types/search/searchResults";
+import { getNestedFieldValue } from "../../utils/fieldUtils";
+import ResultCardFields from "./ResultCardFields";
+import { OBJECT_API_NAMES } from "../../../../constants";
 
 interface SearchResultCardProps {
 	record: SearchResultRecordData;

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/{components → features/global-search/components}/search/SearchResultsPanel.tsx

@@ -32,8 +32,8 @@
  * ```
  */
 import { useMemo } from "react";
-import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
-import { Skeleton } from "../ui/skeleton";
+import { Alert, AlertDescription, AlertTitle } from "../../../../components/ui/alert";
+import { Skeleton } from "../../../../components/ui/skeleton";
 import { AlertCircle } from "lucide-react";
 import {
 	Select,
@@ -41,9 +41,9 @@ import {
 	SelectItem,
 	SelectTrigger,
 	SelectValue,
-} from "../ui/select";
-import { Label } from "../ui/label";
-import SearchResultCard from "../SearchResultCard";
+} from "../../../../components/ui/select";
+import { Label } from "../../../../components/ui/label";
+import SearchResultCard from "./SearchResultCard";
 import SearchPagination from "./SearchPagination";
 import type { Column, SearchResultRecord } from "../../types/search/searchResults";
 import { getSafeKey } from "../../utils/recordUtils";

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/{components → features/global-search/components/shared}/LoadingFallback.tsx

@@ -17,7 +17,7 @@
  * ```
  */
 import { cva, type VariantProps } from "class-variance-authority";
-import { Spinner } from "./ui/spinner";
+import { Spinner } from "../../../../components/ui/spinner";
 
 /**
  * Spinner size variants based on content width.

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/features/global-search/filters/FilterInput.tsx

@@ -0,0 +1,55 @@
+/**
+ * FilterInput Component
+ *
+ * Renders a text input field for filter values.
+ * Used for filters that don't have a picklist (affordance !== 'select').
+ *
+ * @param filter - Filter definition containing field path, label, and attributes
+ * @param value - Current filter input value
+ * @param onChange - Callback when input value changes
+ *
+ * @remarks
+ * - Displays filter label or field path as the label
+ * - Shows placeholder text from filter attributes or generates default
+ * - Displays help message if available
+ *
+ * @example
+ * ```tsx
+ * <FilterInput
+ *   filter={textFilter}
+ *   value={filterValue}
+ *   onChange={(value) => setFilterValue(value)}
+ * />
+ * ```
+ */
+import { Input } from "../../../components/ui/input";
+import { Field, FieldLabel, FieldDescription } from "../../../components/ui/field";
+import type { Filter } from "../types/filters/filters";
+
+interface FilterInputProps {
+	filter: Filter;
+	value: string;
+	onChange: (value: string) => void;
+}
+
+export default function FilterInput({ filter, value, onChange }: FilterInputProps) {
+	return (
+		<Field>
+			<FieldLabel htmlFor={filter.targetFieldPath}>
+				{filter.label || filter.targetFieldPath}
+			</FieldLabel>
+			<Input
+				id={filter.targetFieldPath}
+				type="text"
+				value={value}
+				onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
+				placeholder={
+					filter.attributes?.placeholder ||
+					`Enter ${(filter.label || filter.targetFieldPath).toLowerCase()}`
+				}
+				aria-label={filter.label || filter.targetFieldPath}
+			/>
+			{filter.helpMessage && <FieldDescription>{filter.helpMessage}</FieldDescription>}
+		</Field>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/features/global-search/filters/FilterSelect.tsx

@@ -0,0 +1,72 @@
+/**
+ * FilterSelect Component
+ *
+ * Renders a dropdown select field for filter values with picklist options.
+ * Used for filters with affordance === 'select'.
+ *
+ * @param filter - Filter definition containing field path, label, and attributes
+ * @param value - Currently selected filter value
+ * @param options - Array of picklist values to display as options
+ * @param onChange - Callback when selection changes
+ *
+ * @remarks
+ * - Filters out invalid options (null/undefined values)
+ * - Displays option label if available, otherwise uses value
+ * - Shows placeholder from filter attributes or default "Select..."
+ *
+ * @example
+ * ```tsx
+ * <FilterSelect
+ *   filter={selectFilter}
+ *   value={selectedValue}
+ *   options={picklistOptions}
+ *   onChange={(value) => setSelectedValue(value)}
+ * />
+ * ```
+ */
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../components/ui/select";
+import { Field, FieldLabel, FieldDescription } from "../../../components/ui/field";
+import type { Filter } from "../types/filters/filters";
+import type { PicklistValue } from "../types/filters/picklist";
+
+interface FilterSelectProps {
+	filter: Filter;
+	value: string;
+	options: PicklistValue[];
+	onChange: (value: string) => void;
+}
+
+export default function FilterSelect({ filter, value, options, onChange }: FilterSelectProps) {
+	return (
+		<Field>
+			<FieldLabel htmlFor={filter.targetFieldPath}>
+				{filter.label || filter.targetFieldPath}
+			</FieldLabel>
+			<Select value={value} onValueChange={onChange}>
+				<SelectTrigger
+					id={filter.targetFieldPath}
+					aria-label={filter.label || filter.targetFieldPath}
+				>
+					<SelectValue placeholder={filter.attributes?.placeholder || "Select..."} />
+				</SelectTrigger>
+				<SelectContent>
+					{options.map((option) => {
+						if (!option || !option.value) return null;
+						return (
+							<SelectItem key={option.value} value={option.value}>
+								{option.label || option.value}
+							</SelectItem>
+						);
+					})}
+				</SelectContent>
+			</Select>
+			{filter.helpMessage && <FieldDescription>{filter.helpMessage}</FieldDescription>}
+		</Field>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/{hooks → features/global-search/hooks}/form.tsx

@@ -1,15 +1,20 @@
 import { useId } from "react";
 import { createFormHookContexts, createFormHook } from "@tanstack/react-form";
-import { Field, FieldDescription, FieldError, FieldLabel } from "../components/ui/field";
-import { Input } from "../components/ui/input";
+import {
+	Field,
+	FieldDescription,
+	FieldError,
+	FieldLabel,
+} from "../../../components/ui/field";
+import { Input } from "../../../components/ui/input";
 import {
 	Select,
 	SelectContent,
 	SelectItem,
 	SelectTrigger,
 	SelectValue,
-} from "../components/ui/select";
-import { cn } from "../lib/utils";
+} from "../../../components/ui/select";
+import { cn } from "../../../lib/utils";
 import type { PicklistValue } from "../types/filters/picklist";
 import { getUniqueErrors } from "../utils/formUtils";
 

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/{pages → features/global-search/pages}/DetailPage.tsx

@@ -1,12 +1,12 @@
 import { useMemo } from "react";
 import { useParams, useNavigate } from "react-router";
-import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
-import { Skeleton } from "../components/ui/skeleton";
-import { Alert, AlertDescription, AlertTitle } from "../components/ui/alert";
+import { Card, CardContent, CardHeader, CardTitle } from "../../../components/ui/card";
+import { Skeleton } from "../../../components/ui/skeleton";
+import { Alert, AlertDescription, AlertTitle } from "../../../components/ui/alert";
 import { AlertCircle } from "lucide-react";
 import DetailHeader from "../components/detail/DetailHeader";
 import { UiApiDetailForm } from "../components/detail/UiApiDetailForm";
-import { OBJECT_API_NAMES, DEFAULT_DETAIL_PAGE_TITLE } from "../constants";
+import { OBJECT_API_NAMES, DEFAULT_DETAIL_PAGE_TITLE } from "../../../constants";
 import { toRecordDisplayNameMetadata } from "../utils/fieldUtils";
 import { useRecordDetailLayout } from "../hooks/useRecordDetailLayout";
 import { getGraphQLRecordDisplayName } from "../utils/graphQLNodeFieldUtils";

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/{pages → features/global-search/pages}/GlobalSearch.tsx

@@ -13,15 +13,15 @@
  */
 import { useMemo, useState, useCallback, useEffect, useRef } from "react";
 import { useParams } from "react-router";
-import { OBJECT_API_NAMES, DEFAULT_PAGE_SIZE } from "../constants";
+import { OBJECT_API_NAMES, DEFAULT_PAGE_SIZE } from "../../../constants";
 import { useObjectListMetadata } from "../hooks/useObjectSearchData";
 import { useObjectInfoBatch } from "../hooks/useObjectInfoBatch";
 import { useRecordListGraphQL } from "../hooks/useRecordListGraphQL";
-import FiltersPanel from "../components/FiltersPanel";
+import FiltersPanel from "../components/filters/FiltersPanel";
 import SearchHeader from "../components/search/SearchHeader";
 import SearchResultsPanel from "../components/search/SearchResultsPanel";
-import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
-import { Skeleton } from "../components/ui/skeleton";
+import { Card, CardContent, CardHeader, CardTitle } from "../../../components/ui/card";
+import { Skeleton } from "../../../components/ui/skeleton";
 import type { FilterCriteria } from "../types/filters/filters";
 import type { SearchResultRecord } from "../types/search/searchResults";
 import { graphQLNodeToSearchResultRecordData } from "../utils/graphQLRecordAdapter";

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/routes.tsx

@@ -2,10 +2,10 @@ import type { RouteObject } from 'react-router';
 import AppLayout from './appLayout';
 import Home from '@/pages/Home';
 import NotFound from '@/pages/NotFound';
-import GlobalSearch from "./pages/GlobalSearch";
-import DetailPage from "./pages/DetailPage";
+import GlobalSearch from "./features/global-search/pages/GlobalSearch";
+import DetailPage from "./features/global-search/pages/DetailPage";
 import { Suspense } from "react";
-import LoadingFallback from "./components/LoadingFallback";
+import LoadingFallback from "./features/global-search/components/shared/LoadingFallback";
 import Dashboard from "@/pages/Dashboard";
 import Maintenance from "@/pages/Maintenance";
 import PropertySearch from "@/pages/PropertySearch";

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.70.0",
+  "version": "1.71.1",
   "description": "Base SFDX project template",
   "private": true,
   "files": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-app-react-sample-b2x-experimental",
-  "version": "1.70.0",
+  "version": "1.71.1",
   "description": "B2C sample app template with app shell",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/components/layout/card-layout.tsx

@@ -1,19 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card";
-
-interface CardLayoutProps {
-	title: string;
-	description?: string;
-	children: React.ReactNode;
-}
-
-export function CardLayout({ title, description, children }: CardLayoutProps) {
-	return (
-		<Card className="w-full">
-			<CardHeader>
-				<CardTitle className="text-2xl">{title}</CardTitle>
-				{description && <CardDescription>{description}</CardDescription>}
-			</CardHeader>
-			<CardContent>{children}</CardContent>
-		</Card>
-	);
-}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/features/global-search/index.ts

@@ -1,33 +0,0 @@
-/**
- * Global Search Feature - Public API
- *
- * Main entry point for the global search feature.
- * Exports all public APIs, components, and utilities that can be consumed by other packages.
- *
- * @remarks
- * This is the public API of the feature. Components and utilities exported here
- * can be imported by other packages that depend on this feature.
- *
- * @example
- * ```tsx
- * // In another package's appLayout.tsx
- * import { GlobalSearchInput } from 'feature-react-global-search';
- *
- * export default function AppLayout() {
- *   return (
- *     <div>
- *       <GlobalSearchInput />
- *       <Outlet />
- *     </div>
- *   );
- * }
- * ```
- */
-
-export * from "../../api";
-export * from "../../hooks";
-export * from "../../utils";
-export * from "../../constants";
-export * from "../../routes";
-export * from "../../hooks";
-export * from "../../types";