@salesforce/templates 66.13.5 → 66.13.6

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/pages/AccountSearch.tsx

@@ -1,297 +1,25 @@
-import { useMemo, useState } from "react";
-import { Link } from "react-router";
-import { AlertCircle, ChevronDown, SearchX } from "lucide-react";
-import {
-	searchAccounts,
-	fetchDistinctIndustries,
-	fetchDistinctTypes,
-} from "../api/account/accountSearchService";
-import { useAsyncData } from "../hooks/useAsyncData";
-import { fieldValue } from "../features/object-search/utils/fieldUtils";
-import { useObjectSearchParams } from "../features/object-search/hooks/useObjectSearchParams";
-import { Alert, AlertTitle, AlertDescription } from "../components/ui/alert";
-import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
-import { Button } from "../components/ui/button";
-import {
-	Collapsible,
-	CollapsibleContent,
-	CollapsibleTrigger,
-} from "../components/ui/collapsible";
-import { Skeleton } from "../components/ui/skeleton";
-import {
-	FilterProvider,
-	FilterResetButton,
-} from "../features/object-search/components/FilterContext";
-import { SearchFilter } from "../features/object-search/components/filters/SearchFilter";
-import { TextFilter } from "../features/object-search/components/filters/TextFilter";
-import { SelectFilter } from "../features/object-search/components/filters/SelectFilter";
-import { MultiSelectFilter } from "../features/object-search/components/filters/MultiSelectFilter";
-import { NumericRangeFilter } from "../features/object-search/components/filters/NumericRangeFilter";
-import { DateFilter } from "../features/object-search/components/filters/DateFilter";
-import { DateRangeFilter } from "../features/object-search/components/filters/DateRangeFilter";
-import { ActiveFilters } from "../features/object-search/components/ActiveFilters";
-import { SortControl } from "../features/object-search/components/SortControl";
-import type { FilterFieldConfig } from "../features/object-search/utils/filterUtils";
-import type { SortFieldConfig } from "../features/object-search/utils/sortUtils";
-import type { Account_Filter, Account_OrderBy } from "../api/graphql-operations-types";
-import type { AccountSearchResult } from "../api/account/accountSearchService";
-import { ObjectBreadcrumb } from "../features/object-search/components/ObjectBreadcrumb";
-import PaginationControls from "../features/object-search/components/PaginationControls";
-import type { PaginationConfig } from "../features/object-search/hooks/useObjectSearchParams";
-
-const PAGINATION_CONFIG: PaginationConfig = {
-	defaultPageSize: 7,
-	validPageSizes: [7, 14, 28, 42],
-};
-
-type AccountNode = NonNullable<
-	NonNullable<NonNullable<AccountSearchResult["edges"]>[number]>["node"]
->;
-
-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" },
-	{ field: "LastModifiedDate", label: "Last Modified Date", type: "datetimerange" },
-];
-
-const ACCOUNT_SORT_CONFIGS: SortFieldConfig<keyof Account_OrderBy>[] = [
-	{ field: "Name", label: "Name" },
-	{ field: "AnnualRevenue", label: "Annual Revenue" },
-	{ field: "Industry", label: "Industry" },
-	{ field: "CreatedDate", label: "Created Date" },
-];
-
-// -- Component --------------------------------------------------------------
-
+import { Search, config } from "../features/search";
+
+/**
+ * Account search page.
+ *
+ * Renders the config-driven `<Search>` feature (feature-react-search) locked to
+ * the Account source via `restrictTo`. The shared `config.json` already defines
+ * the Account source's searchable fields, filters, sort options, and
+ * `routePattern` ("/accounts/:id"), so result rows link to the Account detail
+ * page and the filter / sort chrome render automatically — no per-page wiring.
+ *
+ * `restrictTo` hides the scope selector and fetches only Accounts, so the page
+ * reads as a single-object search even though the underlying feature supports
+ * many sources.
+ */
 export default function AccountSearch() {
-	const [filtersOpen, setFiltersOpen] = useState(true);
-	const { data: industryOptions } = useAsyncData(fetchDistinctIndustries, []);
-	const { data: typeOptions } = useAsyncData(fetchDistinctTypes, []);
-
-	const { filters, sort, query, pagination, resetAll } = useObjectSearchParams<
-		Account_Filter,
-		Account_OrderBy
-	>(FILTER_CONFIGS, ACCOUNT_SORT_CONFIGS, PAGINATION_CONFIG);
-
-	const { data, loading, error } = useAsyncData(
-		() =>
-			searchAccounts({
-				where: query.where,
-				orderBy: query.orderBy,
-				first: pagination.pageSize,
-				after: pagination.afterCursor,
-			}),
-		[query.where, query.orderBy, pagination.pageSize, pagination.afterCursor],
-	);
-
-	const pageInfo = data?.pageInfo;
-	const totalCount = data?.totalCount;
-	const hasNextPage = pageInfo?.hasNextPage ?? false;
-	const hasPreviousPage = pagination.pageIndex > 0;
-
-	const validAccountNodes = useMemo(
-		() =>
-			(data?.edges ?? []).reduce<AccountNode[]>((acc, edge) => {
-				if (edge?.node) acc.push(edge.node);
-				return acc;
-			}, []),
-		[data?.edges],
-	);
-
-	return (
-		<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-			<ObjectBreadcrumb listPath="/accounts" listLabel="Accounts" />
-
-			<h1 className="text-2xl font-bold mb-4">Search Accounts</h1>
-
-			<div className="flex flex-col lg:flex-row gap-6">
-				{/* Sidebar — Filter Panel */}
-				<aside className="w-full lg:w-80 shrink-0">
-					<FilterProvider
-						filters={filters.active}
-						onFilterChange={filters.set}
-						onFilterRemove={filters.remove}
-						onReset={resetAll}
-					>
-						<Card>
-							<Collapsible open={filtersOpen} onOpenChange={setFiltersOpen}>
-								<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-									<CardTitle className="text-base font-semibold">
-										<h2>Filters</h2>
-									</CardTitle>
-									<div className="flex items-center gap-1">
-										<FilterResetButton variant="destructive" size="sm" />
-										<CollapsibleTrigger asChild>
-											<Button variant="ghost" size="icon">
-												<ChevronDown
-													className={`h-4 w-4 transition-transform ${filtersOpen ? "" : "-rotate-90"}`}
-												/>
-												<span className="sr-only">Toggle filters</span>
-											</Button>
-										</CollapsibleTrigger>
-									</div>
-								</CardHeader>
-								<CollapsibleContent>
-									<CardContent className="space-y-1 pt-0">
-										<SearchFilter
-											field="search"
-											label="Search"
-											placeholder="Search by name, phone, or industry..."
-										/>
-										<TextFilter field="Name" label="Account Name" placeholder="Search by name..." />
-										<SelectFilter
-											field="Industry"
-											label="Industry"
-											options={industryOptions ?? []}
-										/>
-										<MultiSelectFilter field="Type" label="Type" options={typeOptions ?? []} />
-										<NumericRangeFilter field="AnnualRevenue" label="Annual Revenue" />
-										<DateFilter field="CreatedDate" label="Created Date" filterType="datetime" />
-										<DateRangeFilter
-											field="LastModifiedDate"
-											label="Last Modified Date"
-											filterType="datetimerange"
-										/>
-									</CardContent>
-								</CollapsibleContent>
-							</Collapsible>
-						</Card>
-					</FilterProvider>
-				</aside>
-
-				{/* Main area — Sort + Results */}
-				<div className="flex-1 min-w-0">
-					{/* Sort control + active filters */}
-					<div className="flex flex-wrap items-center gap-2 mb-4">
-						<SortControl
-							configs={ACCOUNT_SORT_CONFIGS}
-							sort={sort.current}
-							onSortChange={sort.set}
-						/>
-						<ActiveFilters filters={filters.active} onRemove={filters.remove} />
-					</div>
-
-					<div className="min-h-132">
-						{/* Loading state */}
-						{loading && (
-							<>
-								<Skeleton className="h-5 w-30 mb-3" />
-								<div className="divide-y">
-									{Array.from({ length: pagination.pageSize }, (_, i) => (
-										<div key={i} className="flex items-center justify-between py-3">
-											<div className="space-y-2">
-												<Skeleton className="h-5 w-40" />
-												<Skeleton className="h-4 w-28" />
-											</div>
-											<div className="space-y-2 flex flex-col items-end">
-												<Skeleton className="h-4 w-24" />
-												<Skeleton className="h-4 w-20" />
-											</div>
-										</div>
-									))}
-								</div>
-							</>
-						)}
-
-						{/* Error state */}
-						{error && (
-							<>
-								<p className="text-sm text-muted-foreground mb-3">0 accounts found</p>
-								<Alert variant="destructive" role="alert">
-									<AlertCircle />
-									<AlertTitle>Failed to load accounts</AlertTitle>
-									<AlertDescription>
-										Something went wrong while loading accounts. Please try again later.
-									</AlertDescription>
-								</Alert>
-							</>
-						)}
-
-						{/* Results list */}
-						{!loading && !error && validAccountNodes.length > 0 && (
-							<>
-								<p className="text-sm text-muted-foreground mb-3">
-									{totalCount != null && (hasNextPage || hasPreviousPage)
-										? `${totalCount} account${totalCount !== 1 ? "s" : ""} found`
-										: `Showing ${validAccountNodes.length} account${validAccountNodes.length !== 1 ? "s" : ""}`}
-								</p>
-								<AccountResultsList nodes={validAccountNodes} />
-							</>
-						)}
-
-						{/* No results state */}
-						{!loading && !error && validAccountNodes.length === 0 && (
-							<div className="flex flex-col items-center justify-center py-16 text-center">
-								<SearchX className="size-12 text-muted-foreground mb-4" />
-								<h2 className="text-lg font-semibold mb-1">No accounts found</h2>
-								<p className="text-sm text-muted-foreground">
-									Try adjusting your filters or search criteria.
-								</p>
-							</div>
-						)}
-					</div>
-
-					{/* Pagination — always visible, disabled while loading or on error */}
-					<PaginationControls
-						pageIndex={pagination.pageIndex}
-						hasNextPage={hasNextPage}
-						hasPreviousPage={hasPreviousPage}
-						pageSize={pagination.pageSize}
-						pageSizeOptions={PAGINATION_CONFIG.validPageSizes}
-						onNextPage={() => {
-							if (pageInfo?.endCursor) pagination.goToNextPage(pageInfo.endCursor);
-						}}
-						onPreviousPage={pagination.goToPreviousPage}
-						onPageSizeChange={pagination.setPageSize}
-						disabled={loading || !!error}
-					/>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-// -- Result Components ------------------------------------------------------
-
-function AccountResultsList({ nodes }: { nodes: AccountNode[] }) {
-	return (
-		<ul className="divide-y">
-			{nodes.map((node) => (
-				<AccountResultItem key={node.Id} node={node} />
-			))}
-		</ul>
-	);
-}
-
-function AccountResultItem({ node }: { node: AccountNode }) {
 	return (
-		<li>
-			<Link
-				to={`/accounts/${node.Id}`}
-				className="flex items-center justify-between py-3 px-3 -mx-3 rounded-md transition-colors hover:bg-accent"
-			>
-				<div>
-					<span className="font-medium">{fieldValue(node.Name) ?? "\u2014"}</span>
-					<p className="text-sm text-muted-foreground">
-						{[fieldValue(node.Industry), fieldValue(node.Type)].filter(Boolean).join(" \u00B7 ") ||
-							"\u2014"}
-					</p>
-				</div>
-				<div className="text-right text-sm">
-					<p>{fieldValue(node.Phone) ?? ""}</p>
-					<p className="text-muted-foreground">{fieldValue(node.Owner?.Name) ?? ""}</p>
-				</div>
-			</Link>
-		</li>
+		<Search
+			config={config}
+			title="Search Accounts"
+			searchPlaceholder="Search by name, phone, or industry..."
+			restrictTo={{ kind: "sobject", key: "accounts" }}
+		/>
 	);
 }

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/pages/Home.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { useNavigate } from "react-router";
-import { SearchBar } from "../features/object-search/components/SearchBar";
+import { Search } from "lucide-react";
+import { Input } from "../components/ui/input";
 import { Button } from "../components/ui/button";
 
 export default function HomePage() {
@@ -9,6 +10,8 @@ export default function HomePage() {
 
 	const handleSubmit = (e: React.SyntheticEvent<HTMLFormElement>) => {
 		e.preventDefault();
+		// `q` matches the search feature's GLOBAL_QUERY_KEY, so the term
+		// pre-fills the Account search page on arrival.
 		const params = text ? `?q=${encodeURIComponent(text)}` : "";
 		navigate(`/accounts${params}`);
 	};
@@ -22,11 +25,23 @@ export default function HomePage() {
 				</Button>
 			</div>
 			<form onSubmit={handleSubmit} className="flex gap-2">
-				<SearchBar
-					placeholder="Search by name, phone, or industry..."
-					value={text}
-					handleChange={setText}
-				/>
+				<div className="relative flex-1">
+					<label htmlFor="account-search-input" className="sr-only">
+						Search accounts
+					</label>
+					<Search
+						aria-hidden="true"
+						className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground"
+					/>
+					<Input
+						id="account-search-input"
+						type="text"
+						value={text}
+						onChange={(e) => setText(e.target.value)}
+						placeholder="Search by name, phone, or industry..."
+						className="pl-9"
+					/>
+				</div>
 				<Button type="submit">Search</Button>
 			</form>
 		</div>

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/routes.tsx

@@ -15,10 +15,6 @@ export const routes: RouteObject[] = [
         element: <Home />,
         handle: { showInNavigation: true, label: "Home" }
       },
-      {
-        path: '*',
-        element: <NotFound />
-      },
       {
         path: "accounts/:recordId",
         element: <AccountObjectDetail />
@@ -26,6 +22,10 @@ export const routes: RouteObject[] = [
       {
         path: "accounts",
         element: <AccountSearch />
+      },
+      {
+        path: '*',
+        element: <NotFound />
       }
     ]
   }

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/{_f_/_os_/utils/fieldUtils.ts → utils/accountFields.ts}

@@ -1,3 +1,10 @@
+/**
+ * Field helpers for reading uiapi GraphQL response nodes on the Account
+ * detail page. Previously imported from feature-react-object-search; inlined
+ * here so the app no longer depends on that feature.
+ */
+
+/** Picks the user-facing string for a `{ value, displayValue }` field. */
 export function fieldValue(
 	field: { displayValue?: string | null; value?: unknown } | null | undefined,
 ): string | null {
@@ -6,6 +13,7 @@ export function fieldValue(
 	return null;
 }
 
+/** Builds the display lines for a Salesforce compound address, or null if empty. */
 export function getAddressFieldLines(address: {
 	street?: string | null;
 	city?: string | null;
@@ -20,6 +28,7 @@ export function getAddressFieldLines(address: {
 	return lines;
 }
 
+/** Formats an ISO datetime string with `toLocaleString`, or null if absent. */
 export function formatDateTimeField(
 	value?: string | null,
 	...args: Parameters<Date["toLocaleString"]>

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ES2022",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
 

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/app.tsx","./src/appLayout.tsx","./src/index.ts","./src/navigationMenu.tsx","./src/router-utils.tsx","./src/routes.tsx","./src/api/graphqlClient.ts","./src/components/AgentforceConversationClient.tsx","./src/components/ObjectBreadcrumb.tsx","./src/components/__inherit_AgentforceConversationClient.tsx","./src/components/alerts/status-alert.tsx","./src/components/layouts/card-layout.tsx","./src/components/ui/alert.tsx","./src/components/ui/avatar.tsx","./src/components/ui/badge.tsx","./src/components/ui/breadcrumb.tsx","./src/components/ui/button.tsx","./src/components/ui/calendar.tsx","./src/components/ui/card.tsx","./src/components/ui/checkbox.tsx","./src/components/ui/collapsible.tsx","./src/components/ui/datePicker.tsx","./src/components/ui/dialog.tsx","./src/components/ui/dropdown-menu.tsx","./src/components/ui/field.tsx","./src/components/ui/index.ts","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/pagination.tsx","./src/components/ui/popover.tsx","./src/components/ui/select.tsx","./src/components/ui/separator.tsx","./src/components/ui/skeleton.tsx","./src/components/ui/sonner.tsx","./src/components/ui/spinner.tsx","./src/components/ui/table.tsx","./src/components/ui/tabs.tsx","./src/features/search/index.ts","./src/features/search/loadConfig.ts","./src/features/search/queryBuilder.ts","./src/features/search/types.ts","./src/features/search/api/distinctValuesService.ts","./src/features/search/api/searchService.ts","./src/features/search/components/MergedSearchResults.tsx","./src/features/search/components/Search.tsx","./src/features/search/components/SearchResults.tsx","./src/features/search/components/SourceSection.tsx","./src/features/search/components/controls/PaginationControls.tsx","./src/features/search/components/controls/ScopeSelector.tsx","./src/features/search/components/controls/SearchBar.tsx","./src/features/search/components/controls/SortControl.tsx","./src/features/search/components/filters/ActiveFilters.tsx","./src/features/search/components/filters/DefaultFilterPanel.tsx","./src/features/search/components/filters/FilterContext.tsx","./src/features/search/components/filters/inputs/BooleanFilter.tsx","./src/features/search/components/filters/inputs/DateRangeFilter.tsx","./src/features/search/components/filters/inputs/FilterFieldWrapper.tsx","./src/features/search/components/filters/inputs/MultiSelectFilter.tsx","./src/features/search/components/filters/inputs/NumericRangeFilter.tsx","./src/features/search/components/filters/inputs/SelectFilter.tsx","./src/features/search/components/filters/inputs/TextFilter.tsx","./src/features/search/components/results/DefaultResultRow.tsx","./src/features/search/hooks/useAsyncData.ts","./src/features/search/hooks/useDistinctValues.ts","./src/features/search/hooks/useSearch.ts","./src/features/search/utils/debounce.ts","./src/features/search/utils/fieldUtils.ts","./src/features/search/utils/filterUtils.ts","./src/features/search/utils/sortUtils.ts","./src/hooks/useAsyncData.ts","./src/lib/utils.ts","./src/pages/AccountObjectDetailPage.tsx","./src/pages/AccountSearch.tsx","./src/pages/Home.tsx","./src/pages/NotFound.tsx","./src/types/conversation.ts","./src/types/globals.d.ts","./src/utils/accountFields.ts","./e2e/app.spec.ts","./vite-env.d.ts","./vitest-env.d.ts","./vitest.setup.ts","../../../../../../../../../sdk/platform-sdk/types/env.d.ts"],"version":"5.9.3"}

package/lib/templates/project/reactinternalapp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/ui-bundle-template-base-sfdx-project",
-  "version": "10.24.0",
+  "version": "11.53.1",
   "description": "Base SFDX project template",
   "license": "SEE LICENSE IN LICENSE.txt",
   "publishConfig": {
@@ -21,9 +21,11 @@
     "prettier": "prettier --write \"**/*.{cls,cmp,component,css,html,js,json,md,page,trigger,xml,yaml,yml}\"",
     "prettier:verify": "prettier --check \"**/*.{cls,cmp,component,css,html,js,json,md,page,trigger,xml,yaml,yml}\"",
     "precommit": "lint-staged",
-    "setup": "node scripts/org-setup.mjs"
+    "setup": "node scripts/org-setup.mjs",
+    "dev:preview": "node scripts/org-setup-dev.mjs"
   },
   "dependencies": {
+    "fast-xml-parser": "^5.9.3",
     "zod": "^3.24.1"
   },
   "devDependencies": {

package/lib/templates/project/reactinternalapp/scripts/org-setup-config-schema.mjs

@@ -50,11 +50,35 @@ export const ConfigSchema = z
         // No siteName: the site is derived from the single
         // networks/<siteName>.network-meta.xml the app ships (see spec §5.2),
         // exactly like the guestUser permset path.
+        //
+        // selfRegProfile also drives the M1 license pre-check (W-23043735):
+        // setup derives the required UserLicense from this profile
+        // (Profile.UserLicense, matched on the stable LicenseDefinitionKey) and
+        // warns + skips self-registration when the org lacks it or has no seats.
+        // No separate license field is declared — the requirement can't drift
+        // from the profile the flow actually assigns.
         selfRegProfile: z.string().min(1),
         accountName: z.string().min(1),
       })
       .strict()
       .optional(),
+    socialLogin: z
+      .object({
+        // Profile to add to NetworkMemberGroup so SSO-registered users can access
+        // the community (e.g. "Customer Community User"). Also enables the
+        // "Allow standard external profiles" org setting.
+        communityMemberProfile: z.string().min(1),
+        // DeveloperName of AuthProvider (OAuth) or SamlSsoConfig (SAML) records to link to the site's AuthConfig.
+        // Required because React (Site Container) sites hide SSO config in Admin UI.
+        authProviderNames: z.array(z.string().min(1)).min(1),
+        // Permission set to assign to community users created via SSO.
+        // Required because getCurrentUser() calls /chatter/users/me which needs
+        // API access (PermissionsApiEnabled) that the community profile lacks.
+        // Typically the app's "*_Guest_User_Api_Access" permset.
+        communityUserPermset: z.string().min(1).optional(),
+      })
+      .strict()
+      .optional(),
   })
   .strict();
 

package/lib/templates/project/reactinternalapp/scripts/org-setup-dev.mjs

@@ -0,0 +1,87 @@
+#!/usr/bin/env node
+/**
+ * Dev preview: refresh the GraphQL schema/types against a target org, then launch
+ * the Vite dev server (spec §5.5, M4). This is the step that used to be the final
+ * `dev` stage of org-setup.mjs — extracted here so `npm run setup` terminates
+ * cleanly after graphql, and the long-lived dev server is an explicit, separate
+ * `npm run dev:preview`.
+ *
+ * Unlike setup, this does NOT log in or deploy — it assumes the org is already
+ * set up. It shares org/bundle resolution and the process runner with org-setup
+ * via org-setup-utils.mjs.
+ *
+ * Usage:
+ *   npm run dev:preview                                 # prompt to pick an org + bundle
+ *   npm run dev:preview -- --target-org myorg
+ *   npm run dev:preview -- --target-org myorg --ui-bundle-name my-app
+ *
+ * Flow (in order):
+ *   1. resolve target org (explicit --target-org, else prompt / default org)
+ *   2. resolve UI bundle (explicit --ui-bundle-name, else picker / warning)
+ *   3. npm install            (in the UI bundle)
+ *   4. npm run graphql:schema (SF_TARGET_ORG=<org>)  — introspect the live schema
+ *   5. npm run graphql:codegen                       — regenerate typed operations
+ *   6. npm run dev            (blocking, Ctrl+C to stop)
+ */
+
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { run, resolveSfdxSource, discoverUIBundleDir, resolveTargetOrg } from './org-setup-utils.mjs';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const ROOT = resolve(__dirname, '..');
+
+function parseArgs() {
+  const args = process.argv.slice(2);
+  let targetOrg = null;
+  let uiBundleName = null;
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === '--target-org' && args[i + 1]) {
+      targetOrg = args[++i];
+    } else if (args[i] === '--ui-bundle-name' && args[i + 1]) {
+      uiBundleName = args[++i];
+    } else if (args[i] === '--help' || args[i] === '-h') {
+      console.log(`
+Dev preview — refresh GraphQL types then launch the Vite dev server
+
+Usage:
+  npm run dev:preview -- [--target-org <alias>] [--ui-bundle-name <name>]
+
+Options:
+  --target-org <alias>    Target Salesforce org alias. If omitted, you are prompted
+                          to pick from authenticated orgs (or the default org is used).
+  --ui-bundle-name <name> UI bundle folder under uiBundles/ (default: auto-detect / prompt)
+  -h, --help              Show this help
+`);
+      process.exit(0);
+    }
+  }
+  return { targetOrg, uiBundleName };
+}
+
+async function main() {
+  const parsed = parseArgs();
+
+  const targetOrg = await resolveTargetOrg(parsed);
+  const uiBundlesDir = resolve(resolveSfdxSource(ROOT), 'uiBundles');
+  const uiBundleDir = await discoverUIBundleDir(uiBundlesDir, parsed.uiBundleName);
+
+  console.log('Dev preview — target org:', targetOrg, '| UI bundle:', uiBundleDir);
+
+  run('UI Bundle npm install', 'npm', ['install'], { cwd: uiBundleDir });
+  run('GraphQL schema (introspect)', 'npm', ['run', 'graphql:schema'], {
+    cwd: uiBundleDir,
+    env: { ...process.env, SF_TARGET_ORG: targetOrg },
+  });
+  run('GraphQL codegen', 'npm', ['run', 'graphql:codegen'], { cwd: uiBundleDir });
+
+  console.log('\n--- Launching dev server (Ctrl+C to stop) ---\n');
+  const devResult = run('Dev server', 'npm', ['run', 'dev'], { cwd: uiBundleDir, optional: true });
+  process.exit(devResult.status ?? 0);
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});