@salesforce/webapp-template-app-react-template-b2x-experimental 1.109.4 → 1.109.6

package/dist/.a4drules/skills/designing-webapp-ui-ux/scripts/search.js

@@ -1,98 +0,0 @@
-#!/usr/bin/env node
-
-import { CSV_CONFIG, AVAILABLE_STACKS, MAX_RESULTS, search, searchStack } from './core.js';
-import { generateDesignSystem } from './design_system.js';
-
-// ============ ARG PARSER ============
-
-function parseArgs(argv) {
-  const args = { query: null, maxResults: MAX_RESULTS, format: 'ascii' };
-  let i = 2;
-  while (i < argv.length) {
-    const a = argv[i];
-    if (a === '--domain' || a === '-d') { args.domain = argv[++i]; }
-    else if (a === '--stack' || a === '-s') { args.stack = argv[++i]; }
-    else if (a === '--max-results' || a === '-n') { args.maxResults = parseInt(argv[++i], 10); }
-    else if (a === '--json') { args.json = true; }
-    else if (a === '--design-system' || a === '-ds') { args.designSystem = true; }
-    else if (a === '--project-name' || a === '-p') { args.projectName = argv[++i]; }
-    else if (a === '--format' || a === '-f') { args.format = argv[++i]; }
-    else if (a === '--persist') { args.persist = true; }
-    else if (a === '--page') { args.page = argv[++i]; }
-    else if (a === '--output-dir' || a === '-o') { args.outputDir = argv[++i]; }
-    else if (!a.startsWith('-') && !args.query) { args.query = a; }
-    i++;
-  }
-  return args;
-}
-
-// ============ FORMATTER ============
-
-function formatOutput(result) {
-  if (result.error) return `Error: ${result.error}`;
-
-  const lines = [];
-  if (result.stack) {
-    lines.push('## UI Pro Max Stack Guidelines');
-    lines.push(`**Stack:** ${result.stack} | **Query:** ${result.query}`);
-  } else {
-    lines.push('## UI Pro Max Search Results');
-    lines.push(`**Domain:** ${result.domain} | **Query:** ${result.query}`);
-  }
-  lines.push(`**Source:** ${result.file} | **Found:** ${result.count} results\n`);
-
-  (result.results || []).forEach((row, i) => {
-    lines.push(`### Result ${i + 1}`);
-    for (const [key, value] of Object.entries(row)) {
-      const v = String(value);
-      lines.push(`- **${key}:** ${v.length > 300 ? v.slice(0, 300) + '...' : v}`);
-    }
-    lines.push('');
-  });
-
-  return lines.join('\n');
-}
-
-// ============ MAIN ============
-
-const args = parseArgs(process.argv);
-
-if (!args.query) {
-  console.error('Usage: node search.js "<query>" [--domain <d>] [--stack <s>] [--design-system] [-p "Name"]');
-  console.error(`Domains: ${Object.keys(CSV_CONFIG).join(', ')}`);
-  console.error(`Stacks: ${AVAILABLE_STACKS.join(', ')}`);
-  process.exit(1);
-}
-
-if (args.designSystem) {
-  const result = generateDesignSystem(
-    args.query,
-    args.projectName,
-    args.format,
-    !!args.persist,
-    args.page || null,
-    args.outputDir || null
-  );
-  console.log(result);
-
-  if (args.persist) {
-    const slug = args.projectName ? args.projectName.toLowerCase().replace(/\s+/g, '-') : 'default';
-    console.log('\n' + '='.repeat(60));
-    console.log(`✅ Design system persisted to design-system/${slug}/`);
-    console.log(`   📄 design-system/${slug}/MASTER.md (Global Source of Truth)`);
-    if (args.page) {
-      const pageSlug = args.page.toLowerCase().replace(/\s+/g, '-');
-      console.log(`   📄 design-system/${slug}/pages/${pageSlug}.md (Page Overrides)`);
-    }
-    console.log('');
-    console.log(`📖 Usage: When building a page, check design-system/${slug}/pages/[page].md first.`);
-    console.log(`   If exists, its rules override MASTER.md. Otherwise, use MASTER.md.`);
-    console.log('='.repeat(60));
-  }
-} else if (args.stack) {
-  const result = searchStack(args.query, args.stack, args.maxResults);
-  console.log(args.json ? JSON.stringify(result, null, 2) : formatOutput(result));
-} else {
-  const result = search(args.query, args.domain, args.maxResults);
-  console.log(args.json ? JSON.stringify(result, null, 2) : formatOutput(result));
-}

package/dist/.a4drules/skills/integrating-unsplash-images/SKILL.md

@@ -1,71 +0,0 @@
----
-name: integrating-unsplash-images
-description: Adds high-quality Unsplash images to React pages. Use when the user asks to add a hero image, background image, placeholder image, stock photo, decorative image, or any Unsplash-sourced imagery to the web application.
----
-
-# Unsplash Images
-
-## When to Use
-
-Use this skill when:
-- Adding hero banners, section backgrounds, or decorative images
-- The user asks for stock photography or placeholder images
-- A page needs visual appeal without custom assets
-
----
-
-## Step 1 — Determine image purpose
-
-Identify what the image is for:
-
-- **Hero / banner** — full-width background behind text or a CTA
-- **Section accent** — smaller image alongside content (stats, testimonials, features)
-- **Card thumbnail** — image inside a card component
-- **Background texture** — subtle decorative background
-
-If unclear, ask:
-
-> "Where should the image appear — as a hero banner, a section accent, or a card thumbnail?"
-
----
-
-## Step 2 — Select the right Unsplash URL format
-
-Read `implementation/usage.md` for the full reference. Key rules:
-
-1. **Always use `images.unsplash.com/photo-{id}` format** with explicit `w` and `q` parameters.
-2. **Never use `source.unsplash.com`** — it is deprecated and returns 404s.
-3. **Pin every image by its photo ID** — never rely on random or search endpoints.
-
----
-
-## Step 3 — Validate image URLs
-
-Before using any Unsplash URL in code:
-
-1. Open the URL in a browser or fetch it to confirm it returns a 200 status and a valid image.
-2. If the URL returns a 404, redirect loop, or broken image, **discard it** and pick a different photo ID.
-3. Never ship a URL you have not personally verified.
-
----
-
-## Step 4 — Implementation
-
-Read `implementation/usage.md` and follow the instructions there.
-
----
-
-## Verification
-
-Before completing:
-
-1. Confirm every Unsplash URL loads a valid image (no 404, no redirect loops).
-2. Confirm `alt` text is set appropriately (empty `alt=""` for decorative, descriptive for meaningful).
-3. Run from the web app directory:
-
-```bash
-cd force-app/main/default/webapplications/<appName> && npm run lint && npm run build
-```
-
-- **Lint:** MUST result in 0 errors.
-- **Build:** MUST succeed.

package/dist/.a4drules/skills/integrating-unsplash-images/implementation/usage.md

@@ -1,159 +0,0 @@
-# Unsplash Images — Implementation Guide
-
-## URL Format
-
-Always use the direct `images.unsplash.com` format with explicit sizing:
-
-```
-https://images.unsplash.com/photo-{PHOTO_ID}?w={WIDTH}&q={QUALITY}
-```
-
-| Parameter | Purpose | Recommended values |
-|-----------|---------|--------------------|
-| `w` | Pixel width served by the CDN | `600` card, `800` section, `1200` hero, `1920` full-bleed |
-| `q` | JPEG quality 1–100 | `80`–`85` (good balance of quality vs size) |
-
-### Deprecated / broken formats — do NOT use
-
-| Format | Why it fails |
-|--------|-------------|
-| `source.unsplash.com/random` | Deprecated; returns 404 |
-| `source.unsplash.com/{WIDTH}x{HEIGHT}` | Deprecated; returns 404 |
-| `source.unsplash.com/featured/?{query}` | Deprecated; returns 404 |
-
----
-
-## How to find a valid photo ID
-
-1. Go to [unsplash.com](https://unsplash.com) and search for the subject (e.g. "modern apartment").
-2. Open a photo. The URL will look like `unsplash.com/photos/{slug}-{PHOTO_ID}` or `unsplash.com/photos/{PHOTO_ID}`.
-3. The `PHOTO_ID` is the last hyphen-separated segment (e.g. `photo-1600596542815-ffad4c1539a9`).
-4. Build your URL: `https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=1200&q=85`
-5. **Test the URL** in a browser before committing.
-
----
-
-## Declaring image constants
-
-Define all Unsplash URLs as named constants at the top of the file. Never inline URLs in JSX.
-
-```tsx
-const HERO_IMAGE = "https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=1200&q=85";
-const SECTION_IMAGE = "https://images.unsplash.com/photo-1514565131-fce0801e5785?w=800&q=85";
-```
-
----
-
-## Rendering images in JSX
-
-### Hero / banner (decorative — empty alt)
-
-```tsx
-<div className="relative w-full overflow-hidden rounded-2xl">
-  <div className="relative aspect-[21/9] min-h-[280px] w-full md:aspect-[3/1]">
-    <img
-      src={HERO_IMAGE}
-      alt=""
-      className="h-full w-full object-cover"
-      loading="eager"
-      fetchPriority="high"
-    />
-    <div className="absolute inset-0 bg-black/40" />
-    <div className="absolute inset-0 flex flex-col items-center justify-center px-4">
-      {/* overlay content */}
-    </div>
-  </div>
-</div>
-```
-
-Key points:
-- `alt=""` for decorative images (screen readers skip them).
-- `loading="eager"` and `fetchPriority="high"` for above-the-fold heroes.
-- `object-cover` prevents stretching.
-- Semi-transparent overlay (`bg-black/40`) ensures text readability.
-
-### Section accent (meaningful — descriptive alt)
-
-```tsx
-<div className="relative min-h-[240px] overflow-hidden rounded-2xl">
-  <img src={SECTION_IMAGE} alt="City skyline at sunset" className="h-full w-full object-cover" />
-  <div className="absolute inset-0 bg-gradient-to-r from-black/20 to-transparent" />
-</div>
-```
-
-### Card thumbnail
-
-```tsx
-<div className="aspect-[4/3] overflow-hidden bg-muted">
-  <img
-    src={imageUrl}
-    alt=""
-    className="h-full w-full object-cover transition-transform hover:scale-105"
-    loading="lazy"
-  />
-</div>
-```
-
-Key points:
-- `loading="lazy"` for below-the-fold images.
-- `hover:scale-105` subtle zoom on hover.
-- `bg-muted` fallback color while loading.
-
----
-
-## Fallback when no image is available
-
-Always provide a placeholder when the image URL may be null:
-
-```tsx
-{imageUrl ? (
-  <img src={imageUrl} alt="" className="h-full w-full object-cover" />
-) : (
-  <div className="flex h-full items-center justify-center text-muted-foreground">
-    No image
-  </div>
-)}
-```
-
----
-
-## Content Security Policy (CSP)
-
-If the application enforces CSP headers, add `images.unsplash.com` to `img-src`:
-
-```
-img-src 'self' https://images.unsplash.com;
-```
-
-Other commonly needed origins for stock images:
-
-| Origin | Purpose |
-|--------|---------|
-| `images.unsplash.com` | Unsplash photos |
-| `images.pexels.com` | Pexels photos |
-| `fonts.googleapis.com` | Google Fonts CSS |
-| `fonts.gstatic.com` | Google Fonts files |
-
----
-
-## Accessibility checklist
-
-- [ ] Decorative images have `alt=""`
-- [ ] Meaningful images have descriptive `alt` text
-- [ ] Hero images use `loading="eager"` and `fetchPriority="high"`
-- [ ] Below-fold images use `loading="lazy"`
-- [ ] Text over images has sufficient contrast (use overlay like `bg-black/40`)
-- [ ] All URLs verified to return a valid image (no 404s)
-
----
-
-## Common mistakes
-
-| Mistake | Fix |
-|---------|-----|
-| Using `source.unsplash.com` | Replace with `images.unsplash.com/photo-{id}?w=…&q=…` |
-| Hardcoding an unverified URL | Open URL in browser first; replace if broken |
-| Missing `w` parameter | Always set width — CDN returns full-res (5000px+) otherwise |
-| `loading="lazy"` on hero | Use `loading="eager"` for above-the-fold images |
-| No fallback for nullable URLs | Wrap in conditional with placeholder div |
-| Inline URLs in JSX | Extract to named constants at file top |

package/dist/force-app/main/default/webapplications/appreacttemplateb2x/src/features/global-search/api/objectDetailService.ts

@@ -1,102 +0,0 @@
-/**
- * Record detail service: layout (REST), object metadata (GraphQL), single record (GraphQL).
- *
- * getRecordDetail orchestrates layout + objectInfoBatch + getRecordByIdGraphQL for the detail page.
- * Layout is still REST (uiApiClient); record and object info are GraphQL-backed.
- *
- * @module api/objectDetailService
- */
-
-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 "./objectInfoService";
-import type { ObjectInfoResult } from "../types/objectInfo/objectInfo";
-import { getRecordByIdGraphQL, type GraphQLRecordNode } from "./recordListGraphQLService";
-import type { Column } from "../types/search/searchResults";
-import { calculateFieldsToFetch } from "../utils/recordUtils";
-
-/** Fallback when record type is unknown. Prefer recordTypeId from the record (e.g. from search or record response) when available. */
-const DEFAULT_RECORD_TYPE_ID = "012000000000000AAA";
-
-/**
- * Returns field API names to request for a record from the given layout and object metadata.
- * Used to derive GraphQL columns from layout (detail view). Delegates to recordUtils.calculateFieldsToFetch.
- *
- * @param objectMetadata - Object info (fields, relationshipName, etc.).
- * @param layout - Layout response (sections, layoutItems, layoutComponents).
- * @returns Array of field API names (e.g. ["Name", "OwnerId", "Owner", "CreatedDate"]).
- */
-export function extractFieldsFromLayout(
-	objectMetadata: ObjectInfoResult,
-	layout: LayoutResponse,
-): string[] {
-	const [optionalFields] = calculateFieldsToFetch(objectMetadata, layout, false);
-	return optionalFields;
-}
-
-export async function getLayout(
-	objectApiName: string,
-	recordTypeId: string = DEFAULT_RECORD_TYPE_ID,
-): Promise<LayoutResponse> {
-	const params = new URLSearchParams({
-		layoutType: "Full",
-		mode: "View",
-		recordTypeId,
-	});
-	return fetchAndValidate(
-		() => uiApiClient.get(`/layout/${safeEncodePath(objectApiName)}?${params.toString()}`),
-		{
-			schema: LayoutResponseSchema,
-			errorContext: `layout for ${objectApiName}`,
-		},
-	);
-}
-
-export interface RecordDetailResult {
-	layout: LayoutResponse;
-	record: GraphQLRecordNode;
-	objectMetadata: ObjectInfoResult;
-}
-
-/**
- * Converts layout-derived optionalFields (field API names) to Column[] for GraphQL node selection.
- * Uses unqualified names (no entity prefix) so the GraphQL query matches UI API shape.
- * Other Column fields (label, searchable, sortable) are only required by the type; GraphQL selection uses fieldApiName only.
- */
-function optionalFieldsToColumns(optionalFields: string[]): Column[] {
-	return optionalFields.map((fieldApiName) => ({
-		fieldApiName,
-		label: "",
-		searchable: false,
-		sortable: false,
-	}));
-}
-
-export async function getRecordDetail(
-	objectApiName: string,
-	recordId: string,
-	recordTypeId: string = DEFAULT_RECORD_TYPE_ID,
-): Promise<RecordDetailResult> {
-	const layout = await getLayout(objectApiName, recordTypeId);
-	const objectMetadata = await objectInfoService.getObjectInfoBatch(objectApiName);
-	const firstResult = objectMetadata?.results?.[0]?.result;
-	if (!firstResult) {
-		throw new Error(`Object metadata not found for ${objectApiName}`);
-	}
-	// Layout-driven optionalFields (fields shown on the detail layout), not list columns
-	const [optionalFields] = calculateFieldsToFetch(firstResult, layout, false);
-	const columns = optionalFieldsToColumns(optionalFields);
-	const record = await getRecordByIdGraphQL(objectApiName, recordId, columns);
-	if (!record) {
-		throw new Error(`Record not found: ${recordId}`);
-	}
-	return { layout, record, objectMetadata: firstResult };
-}
-
-export const objectDetailService = {
-	extractFieldsFromLayout,
-	getLayout,
-	getRecordDetail,
-};

package/dist/force-app/main/default/webapplications/appreacttemplateb2x/src/features/global-search/api/objectInfoGraphQLService.ts

@@ -1,137 +0,0 @@
-/**
- * Object metadata GraphQL service (uiapi.objectInfos).
- *
- * Single endpoint for object describe and picklist values. Used by objectInfoService
- * to implement getObjectInfoBatch and getPicklistValues. Not used directly by UI.
- *
- * @module api/objectInfoGraphQLService
- */
-
-import { createDataSDK, gql } from "@salesforce/sdk-data";
-import type {
-	GetObjectInfosQuery,
-	GetObjectInfosQueryVariables,
-	GetPicklistValuesQuery,
-	GetPicklistValuesQueryVariables,
-	ObjectInfoInput,
-} from "../types/schema";
-
-/**
- * Builds objectInfos query (metadata only). Uses apiNames only — do not pass objectInfoInputs.
- */
-const OBJECT_INFOS_QUERY = gql`
-	query GetObjectInfos($apiNames: [String!]!) {
-		uiapi {
-			objectInfos(apiNames: $apiNames) {
-				ApiName
-				label
-				labelPlural
-				nameFields
-				defaultRecordTypeId
-				keyPrefix
-				layoutable
-				queryable
-				searchable
-				updateable
-				deletable
-				createable
-				custom
-				mruEnabled
-				feedEnabled
-				fields {
-					ApiName
-					label
-					dataType
-					relationshipName
-					reference
-					compound
-					compoundFieldName
-					compoundComponentName
-					controllingFields
-					controllerName
-					referenceToInfos {
-						ApiName
-						nameFields
-					}
-				}
-				recordTypeInfos {
-					recordTypeId
-					name
-					master
-					available
-					defaultRecordTypeMapping
-				}
-				themeInfo {
-					color
-					iconUrl
-				}
-				childRelationships {
-					relationshipName
-					fieldName
-					childObjectApiName
-				}
-				dependentFields {
-					controllingField
-				}
-			}
-		}
-	}
-`;
-
-/**
- * Builds objectInfos query with picklist values (API v65.0+).
- * Schema requires objectInfos to be called with either apiNames or objectInfoInputs, not both.
- * This query uses objectInfoInputs only.
- * Optimized to only fetch fields used by extractPicklistValuesFromGraphQLObjectInfo.
- */
-const PICKLIST_VALUES_QUERY = gql`
-	query GetPicklistValues($objectInfoInputs: [ObjectInfoInput!]!) {
-		uiapi {
-			objectInfos(objectInfoInputs: $objectInfoInputs) {
-				ApiName
-				fields {
-					ApiName
-					... on PicklistField {
-						picklistValuesByRecordTypeIDs {
-							recordTypeID
-							defaultValue {
-								value
-							}
-							picklistValues {
-								label
-								value
-								validFor
-							}
-						}
-					}
-				}
-			}
-		}
-	}
-`;
-
-export async function queryForObjectInfos(apiNames: string[]): Promise<GetObjectInfosQuery> {
-	return runQuery<GetObjectInfosQuery, GetObjectInfosQueryVariables>(OBJECT_INFOS_QUERY, {
-		apiNames,
-	});
-}
-
-export async function queryForPicklistValues(
-	objectInfoInputs: ObjectInfoInput[],
-): Promise<GetPicklistValuesQuery> {
-	return runQuery<GetPicklistValuesQuery, GetPicklistValuesQueryVariables>(PICKLIST_VALUES_QUERY, {
-		objectInfoInputs,
-	});
-}
-
-async function runQuery<Q, V>(query: string, variables: V): Promise<Q> {
-	const data = await createDataSDK();
-	const response = await data.graphql?.<Q, V>(query, variables);
-
-	if (response?.errors?.length) {
-		const errorMessages = response.errors.map((e) => e.message).join("; ");
-		throw new Error(`GraphQL Error: ${errorMessages}`);
-	}
-
-	return response?.data ?? ({} as Q);
-}

package/dist/force-app/main/default/webapplications/appreacttemplateb2x/src/features/global-search/api/objectInfoService.ts

@@ -1,95 +0,0 @@
-import { uiApiClient } from "@salesforce/webapp-experimental/api";
-import type { Filter } from "../types/filters/filters";
-import { FilterArraySchema } from "../types/filters/filters";
-import type { PicklistValue } from "../types/filters/picklist";
-import type { ObjectInfoBatchResponse } from "../types/objectInfo/objectInfo";
-import { fetchAndValidate, safeEncodePath } from "../utils/apiUtils";
-import { queryForObjectInfos, queryForPicklistValues } from "./objectInfoGraphQLService";
-import {
-	graphQLObjectInfosToBatchResponse,
-	extractPicklistValuesFromGraphQLObjectInfo,
-} from "../utils/graphQLObjectInfoAdapter";
-
-/**
- * Object info and search service.
- *
- * - getObjectInfoBatch / getPicklistValues: GraphQL (objectInfoGraphQLService).
- * - getObjectListFilters: REST (search-info).
- * Hooks use this service; components do not call it directly.
- *
- * @module api/objectInfoService
- */
-
-/** Cache key: sorted, comma-joined object API names. */
-function getObjectInfoBatchCacheKey(objectApiNames: string): string {
-	const names = objectApiNames
-		.split(",")
-		.map((s) => s.trim())
-		.filter(Boolean);
-	return [...names].sort().join(",");
-}
-
-const objectInfoBatchCache = new Map<string, ObjectInfoBatchResponse>();
-const objectInfoBatchInFlight = new Map<string, Promise<ObjectInfoBatchResponse>>();
-
-export async function getObjectInfoBatch(objectApiNames: string): Promise<ObjectInfoBatchResponse> {
-	const names = objectApiNames
-		.split(",")
-		.map((s) => s.trim())
-		.filter(Boolean);
-	if (names.length === 0) {
-		return { results: [] };
-	}
-	const key = getObjectInfoBatchCacheKey(objectApiNames);
-	const cached = objectInfoBatchCache.get(key);
-	if (cached) return Promise.resolve(cached);
-	const inFlight = objectInfoBatchInFlight.get(key);
-	if (inFlight) return inFlight;
-	const promise = (async () => {
-		try {
-			const response = await queryForObjectInfos(names);
-			const nodes = response?.uiapi?.objectInfos ?? [];
-			const result = graphQLObjectInfosToBatchResponse(nodes, names);
-			objectInfoBatchCache.set(key, result);
-			return result;
-		} finally {
-			objectInfoBatchInFlight.delete(key);
-		}
-	})();
-	objectInfoBatchInFlight.set(key, promise);
-	return promise;
-}
-
-export async function getObjectListFilters(objectApiName: string): Promise<Filter[]> {
-	return fetchAndValidate(
-		() => uiApiClient.get(`/search-info/${safeEncodePath(objectApiName)}/filters`),
-		{
-			schema: FilterArraySchema,
-			errorContext: `filters for ${objectApiName}`,
-			extractData: (data: unknown) => {
-				if (!data) return [];
-				return Array.isArray(data) ? data : (data as { filters?: unknown }).filters || [];
-			},
-		},
-	);
-}
-
-export async function getPicklistValues(
-	objectApiName: string,
-	fieldName: string,
-	recordTypeId: string = "012000000000000AAA",
-): Promise<PicklistValue[]> {
-	const response = await queryForPicklistValues([
-		{ apiName: objectApiName, fieldNames: [fieldName] },
-	]);
-	const nodes = response?.uiapi?.objectInfos ?? [];
-	const node = nodes[0];
-	if (!node) return [];
-	return extractPicklistValuesFromGraphQLObjectInfo(node, fieldName, recordTypeId);
-}
-
-export const objectInfoService = {
-	getObjectInfoBatch,
-	getObjectListFilters,
-	getPicklistValues,
-};