@salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental 1.112.4 → 1.112.6

package/dist/.a4drules/skills/using-salesforce-data/SKILL.md

@@ -1,363 +0,0 @@
----
-name: using-salesforce-data
-description: Salesforce data access for reading, writing, and querying records via REST, GraphQL, Apex, or Platform SDK. Use when the user wants to fetch, search, filter, sort, display, create, update, delete, or attach files to Salesforce records (standard objects like Accounts, Contacts, Opportunities, Cases, Quotes, or any custom object) in a web app or UI component (React, Angular, Vue, etc.); call Chatter, Connect, or Apex REST APIs; or invoke AuraEnabled Apex methods from an external app. Does not apply to authentication/OAuth setup, schema changes (adding fields, relationships), Bulk/Tooling/Metadata API usage, declarative automation (Flows, Process Builder), general LWC/Apex coding guidance without a specific data operation, or Salesforce admin/configuration tasks.
----
-
-# Salesforce Data Access
-
-## When to Use
-
-Use this skill when the user wants to:
-
-- **Fetch or display Salesforce data** — Query records (Account, Contact, Opportunity, custom objects) to show in a component
-- **Create, update, or delete records** — Perform mutations on Salesforce data
-- **Add data fetching to a component** — Wire up a React component to Salesforce data
-- **Call REST APIs** — Use Connect REST, Apex REST, or UI API endpoints
-- **Explore the org schema** — Discover available objects, fields, or relationships
-
-## Data SDK Requirement
-
-> **All Salesforce data access MUST use the Data SDK** (`@salesforce/sdk-data`). The SDK handles authentication, CSRF, and base URL resolution. Never use `fetch()` or `axios` directly.
-
-```typescript
-import { createDataSDK, gql } from "@salesforce/sdk-data";
-
-const sdk = await createDataSDK();
-
-// GraphQL for record queries/mutations (PREFERRED)
-const response = await sdk.graphql?.<ResponseType>(query, variables);
-
-// REST for Connect REST, Apex REST, UI API (when GraphQL insufficient)
-const res = await sdk.fetch?.("/services/apexrest/my-resource");
-```
-
-**Always use optional chaining** (`sdk.graphql?.()`, `sdk.fetch?.()`) — these methods may be undefined in some surfaces.
-
-## Supported APIs
-
-**Only the following APIs are permitted.** Any endpoint not listed here must not be used.
-
-| API | Method | Endpoints / Use Case |
-|-----|--------|----------------------|
-| GraphQL | `sdk.graphql` | All record queries and mutations via `uiapi { }` namespace |
-| UI API REST | `sdk.fetch` | `/services/data/v{ver}/ui-api/records/{id}` — record metadata when GraphQL is insufficient |
-| Apex REST | `sdk.fetch` | `/services/apexrest/{resource}` — custom server-side logic, aggregates, multi-step transactions |
-| Connect REST | `sdk.fetch` | `/services/data/v{ver}/connect/file/upload/config` — file upload config |
-| Einstein LLM | `sdk.fetch` | `/services/data/v{ver}/einstein/llm/prompt/generations` — AI text generation |
-
-**Not supported:**
-
-- **Enterprise REST query endpoint** (`/services/data/v*/query` with SOQL) — blocked at the proxy level. Use GraphQL for record reads; use Apex REST if server-side SOQL aggregates are required.
-- **Aura-enabled Apex** (`@AuraEnabled`) — an LWC/Aura pattern with no invocation path from React webapps.
-- **Chatter API** (`/chatter/users/me`) — use `uiapi { currentUser { ... } }` in a GraphQL query instead.
-- **Any other Salesforce REST endpoint** not listed in the supported table above.
-
-## Decision: GraphQL vs REST
-
-| Need | Method | Example |
-|------|--------|---------|
-| Query/mutate records | `sdk.graphql` | Account, Contact, custom objects |
-| Current user info | `sdk.graphql` | `uiapi { currentUser { Id Name { value } } }` |
-| UI API record metadata | `sdk.fetch` | `/ui-api/records/{id}` |
-| Connect REST | `sdk.fetch` | `/connect/file/upload/config` |
-| Apex REST | `sdk.fetch` | `/services/apexrest/auth/login` |
-| Einstein LLM | `sdk.fetch` | `/einstein/llm/prompt/generations` |
-
-**GraphQL is preferred** for record operations. Use REST only when GraphQL doesn't cover the use case.
-
----
-
-## GraphQL Workflow
-
-### Step 1: Acquire Schema
-
-The `schema.graphql` file (265K+ lines) is the source of truth. **Never open or parse it directly.**
-
-1. Check if `schema.graphql` exists at the SFDX project root
-2. If missing, run from the **webapp dir**: `npm run graphql:schema`
-3. Custom objects appear only after metadata is deployed
-
-### Step 2: Look Up Entity Schema
-
-Map user intent to PascalCase names ("accounts" → `Account`), then **run the search script from the project root**:
-
-```bash
-# From project root — look up all relevant schema info for one or more entities
-bash .a4drules/skills/using-salesforce-data/graphql-search.sh Account
-
-# Multiple entities at once
-bash .a4drules/skills/using-salesforce-data/graphql-search.sh Account Contact Opportunity
-```
-
-The script outputs five sections per entity:
-1. **Type definition** — all queryable fields and relationships
-2. **Filter options** — available fields for `where:` conditions
-3. **Sort options** — available fields for `orderBy:`
-4. **Create input** — fields accepted by create mutations
-5. **Update input** — fields accepted by update mutations
-
-Use this output to determine exact field names before writing any query or mutation. **Maximum 2 script runs.** If the entity still can't be found, ask the user — the object may not be deployed.
-
-### Step 3: Generate Query
-
-Use the templates below. Every field name **must** be verified from the script output in Step 2.
-
-#### Read Query Template
-
-```graphql
-query GetAccounts {
-  uiapi {
-    query {
-      Account(where: { Industry: { eq: "Technology" } }, first: 10) {
-        edges {
-          node {
-            Id
-            Name @optional { value }
-            Industry @optional { value }
-            # Parent relationship
-            Owner @optional { Name { value } }
-            # Child relationship
-            Contacts @optional {
-              edges { node { Name @optional { value } } }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-```
-
-**FLS Resilience**: Apply `@optional` to all record fields. The server omits inaccessible fields instead of failing. Consuming code must use optional chaining:
-
-```typescript
-const name = node.Name?.value ?? "";
-```
-
-#### Mutation Template
-
-```graphql
-mutation CreateAccount($input: AccountCreateInput!) {
-  uiapi {
-    AccountCreate(input: $input) {
-      Record { Id Name { value } }
-    }
-  }
-}
-```
-
-**Mutation constraints:**
-- Create: Include required fields, only `createable` fields, no child relationships
-- Update: Include `Id`, only `updateable` fields
-- Delete: Include `Id` only
-
-#### Object Metadata & Picklist Values
-
-Use `uiapi { objectInfos(...) }` to fetch field metadata or picklist values. Pass **either** `apiNames` or `objectInfoInputs` — never both in the same query.
-
-**Object metadata** (field labels, data types, CRUD flags):
-
-```typescript
-const GET_OBJECT_INFO = gql`
-  query GetObjectInfo($apiNames: [String!]!) {
-    uiapi {
-      objectInfos(apiNames: $apiNames) {
-        ApiName
-        label
-        labelPlural
-        fields {
-          ApiName
-          label
-          dataType
-          updateable
-          createable
-        }
-      }
-    }
-  }
-`;
-
-const sdk = await createDataSDK();
-const response = await sdk.graphql?.(GET_OBJECT_INFO, { apiNames: ["Account"] });
-const objectInfos = response?.data?.uiapi?.objectInfos ?? [];
-```
-
-**Picklist values** (use `objectInfoInputs` + `... on PicklistField` inline fragment):
-
-```typescript
-const GET_PICKLIST_VALUES = gql`
-  query GetPicklistValues($objectInfoInputs: [ObjectInfoInput!]!) {
-    uiapi {
-      objectInfos(objectInfoInputs: $objectInfoInputs) {
-        ApiName
-        fields {
-          ApiName
-          ... on PicklistField {
-            picklistValuesByRecordTypeIDs {
-              recordTypeID
-              picklistValues {
-                label
-                value
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-
-const response = await sdk.graphql?.(GET_PICKLIST_VALUES, {
-  objectInfoInputs: [{ objectApiName: "Account" }],
-});
-const fields = response?.data?.uiapi?.objectInfos?.[0]?.fields ?? [];
-```
-
-### Step 4: Validate & Test
-
-1. **Lint**: `npx eslint <file>` from webapp dir
-2. **Test**: Ask user before testing. For mutations, request input values — never fabricate data.
-
-**If ESLint reports a GraphQL error** (e.g. `Cannot query field`, `Unknown type`, `Unknown argument`), the field or type name is wrong. Re-run the schema search script to find the correct name — do not guess:
-
-```bash
-# From project root — re-check the entity that caused the error
-bash .a4drules/skills/using-salesforce-data/graphql-search.sh <EntityName>
-```
-
-Then fix the query using the exact names from the script output.
-
----
-
-## Webapp Integration (React)
-
-```typescript
-import { createDataSDK, gql } from "@salesforce/sdk-data";
-
-const GET_ACCOUNTS = gql`
-  query GetAccounts {
-    uiapi {
-      query {
-        Account(first: 10) {
-          edges {
-            node {
-              Id
-              Name @optional { value }
-              Industry @optional { value }
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-
-const sdk = await createDataSDK();
-const response = await sdk.graphql?.(GET_ACCOUNTS);
-
-if (response?.errors?.length) {
-  throw new Error(response.errors.map(e => e.message).join("; "));
-}
-
-const accounts = response?.data?.uiapi?.query?.Account?.edges?.map(e => e.node) ?? [];
-```
-
----
-
-## REST API Patterns
-
-Use `sdk.fetch` when GraphQL is insufficient. See the [Supported APIs](#supported-apis) table for the full allowlist.
-
-```typescript
-declare const __SF_API_VERSION__: string;
-const API_VERSION = typeof __SF_API_VERSION__ !== "undefined" ? __SF_API_VERSION__ : "65.0";
-
-// Connect — file upload config
-const res = await sdk.fetch?.(`/services/data/v${API_VERSION}/connect/file/upload/config`);
-
-// Apex REST (no version in path)
-const res = await sdk.fetch?.("/services/apexrest/auth/login", {
-  method: "POST",
-  body: JSON.stringify({ email, password }),
-  headers: { "Content-Type": "application/json" },
-});
-
-// UI API — record with metadata (prefer GraphQL for simple reads)
-const res = await sdk.fetch?.(`/services/data/v${API_VERSION}/ui-api/records/${recordId}`);
-
-// Einstein LLM
-const res = await sdk.fetch?.(`/services/data/v${API_VERSION}/einstein/llm/prompt/generations`, {
-  method: "POST",
-  body: JSON.stringify({ promptTextorId: prompt }),
-});
-```
-
-**Current user**: Do not use Chatter (`/chatter/users/me`). Use GraphQL instead:
-
-```typescript
-const GET_CURRENT_USER = gql`
-  query CurrentUser {
-    uiapi { currentUser { Id Name { value } } }
-  }
-`;
-const response = await sdk.graphql?.(GET_CURRENT_USER);
-```
-
----
-
-## Directory Structure
-
-```
-<project-root>/                              ← SFDX project root
-├── schema.graphql                           ← grep target (lives here)
-├── sfdx-project.json
-└── force-app/main/default/webapplications/<app-name>/  ← webapp dir
-    ├── package.json                         ← npm scripts
-    └── src/
-```
-
-| Command | Run From | Why |
-|---------|----------|-----|
-| `npm run graphql:schema` | webapp dir | Script in webapp's package.json |
-| `npx eslint <file>` | webapp dir | Reads eslint.config.js |
-| `bash .a4drules/skills/using-salesforce-data/graphql-search.sh <Entity>` | project root | Schema lookup |
-| `sf api request rest` | project root | Needs sfdx-project.json |
-
----
-
-## Quick Reference
-
-### Schema Lookup (from project root)
-
-Run the search script to get all relevant schema info in one step:
-
-```bash
-bash .a4drules/skills/using-salesforce-data/graphql-search.sh <EntityName>
-```
-
-| Script Output Section | Used For |
-|-----------------------|----------|
-| Type definition | Field names, parent/child relationships |
-| Filter options | `where:` conditions |
-| Sort options | `orderBy:` |
-| CreateRepresentation | Create mutation field list |
-| UpdateRepresentation | Update mutation field list |
-
-### Error Categories
-
-| Error Contains | Resolution |
-|----------------|------------|
-| `Cannot query field` | Field name is wrong — run `graphql-search.sh <Entity>` and use the exact name from the Type definition section |
-| `Unknown type` | Type name is wrong — run `graphql-search.sh <Entity>` to confirm the correct PascalCase entity name |
-| `Unknown argument` | Argument name is wrong — run `graphql-search.sh <Entity>` and check Filter or OrderBy sections |
-| `invalid syntax` | Fix syntax per error message |
-| `validation error` | Field name is wrong — run `graphql-search.sh <Entity>` to verify |
-| `VariableTypeMismatch` | Correct argument type from schema |
-| `invalid cross reference id` | Entity deleted — ask for valid Id |
-
-### Checklist
-
-- [ ] All field names verified via search script (Step 2)
-- [ ] `@optional` applied to record fields (reads)
-- [ ] Optional chaining in consuming code
-- [ ] Lint passes: `npx eslint <file>`

package/skills/managing-agentforce-conversation-client/SKILL.md

@@ -1,186 +0,0 @@
----
-name: managing-agentforce-conversation-client
-description: Adds or modifies AgentforceConversationClient in React apps (.tsx or .jsx files). Use when user says "add chat widget", "embed agentforce", "add agent", "add chatbot", "integrate conversational AI", or asks to change colors, dimensions, styling, or configure agentId, width, height, inline mode, or styleTokens for travel agent, HR agent, employee agent, or any Salesforce agent chat.
-metadata:
-  author: ACC Components
-  version: 1.0.0
-  package: "@salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental"
-  sdk-package: "@salesforce/agentforce-conversation-client"
-  last-updated: 2025-03-18
----
-
-# Managing Agentforce Conversation Client
-
-## Instructions
-
-### Step 1: Check if component already exists
-
-Search for existing usage across all app files (not implementation files):
-
-```bash
-grep -r "AgentforceConversationClient" --include="*.tsx" --include="*.jsx" --exclude-dir=node_modules
-```
-
-**Important:** Look for React files that import and USE the component (for example, shared shells, route components, or feature pages). Do NOT open files named `AgentforceConversationClient.tsx` or `AgentforceConversationClient.jsx` - those are the component implementation.
-
-**If found:** Read the file and check the current `agentId` value.
-
-**Agent ID validation rule (deterministic):**
-
-- Valid only if it matches: `^0Xx[a-zA-Z0-9]{15}$`
-- Meaning: starts with `0Xx` and total length is 18 characters
-
-**Decision:**
-
-- If `agentId` matches `^0Xx[a-zA-Z0-9]{15}$` and user wants to update other props → Go to Step 4 (update props)
-- If `agentId` is missing, empty, or does NOT match `^0Xx[a-zA-Z0-9]{15}$` → Continue to Step 2 (need real ID)
-- If not found → Continue to Step 2 (add new)
-
-### Step 2: Get agent ID
-
-If component doesn't exist or has an invalid placeholder value, ask user for their Salesforce agent ID.
-
-Treat these as placeholder/invalid values:
-
-- `"0Xx..."`
-- `"Placeholder"`
-- `"YOUR_AGENT_ID"`
-- `"<USER_AGENT_ID_18_CHAR_0Xx...>"`
-- Any value that does not match `^0Xx[a-zA-Z0-9]{15}$`
-
-Skip this step if:
-
-- Component exists with a real agent ID
-- User only wants to update styling or dimensions
-
-### Step 3: Canonical import strategy
-
-Use this import path by default in app code:
-
-```tsx
-import { AgentforceConversationClient } from "@salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental";
-```
-
-If the package is not installed, install it:
-
-```bash
-npm install @salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental
-```
-
-Only use a local relative import (for example, `./components/AgentforceConversationClient`) when the user explicitly asks to use a patched/local component in that app.
-
-Do not infer import path from file discovery alone. Prefer one consistent package import across the codebase.
-
-### Step 4: Add or update component
-
-**For new installations:**
-
-Add to the target React component file using the canonical package import:
-
-```tsx
-import { Outlet } from "react-router";
-import { AgentforceConversationClient } from "@salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental";
-
-export default function AgentChatHost() {
-  return (
-    <>
-      <Outlet />
-      <AgentforceConversationClient agentId="0Xx..." />
-    </>
-  );
-}
-```
-
-**Fallback note:** Use a local relative import only when the user explicitly requests patched/local component usage in that app.
-
-**For updates:**
-
-Read the file where component is used and modify only the props that need to change. Preserve all other props. Never delete and recreate.
-
-**Replacing placeholder values:**
-
-If the component has a placeholder agentId (e.g., `agentId="Placeholder"` or `agentId="0Xx..."`), replace it with the real agent ID:
-
-```tsx
-// Before (template with placeholder)
-<AgentforceConversationClient agentId="Placeholder" />
-
-// After (with real agent ID)
-<AgentforceConversationClient agentId="0Xx8X00000001AbCDE" />
-```
-
-### Step 5: Configure props
-
-**Available props (use directly on component):**
-
-- `agentId` (string, required) - Salesforce agent ID
-- `inline` (boolean) - `true` for inline mode, omit for floating
-- `width` (number | string) - e.g., `420` or `"100%"`
-- `height` (number | string) - e.g., `600` or `"80vh"`
-- `headerEnabled` (boolean) - Show/hide header
-- `styleTokens` (object) - For all styling (colors, fonts, spacing)
-- `salesforceOrigin` (string) - Auto-resolved
-- `frontdoorUrl` (string) - Auto-resolved
-
-**Examples:**
-
-Floating mode (default):
-
-```tsx
-<AgentforceConversationClient agentId="0Xx..." />
-```
-
-Inline mode with dimensions:
-
-```tsx
-<AgentforceConversationClient agentId="0Xx..." inline width="420px" height="600px" />
-```
-
-Styling with styleTokens:
-
-```tsx
-<AgentforceConversationClient
-  agentId="0Xx..."
-  styleTokens={{
-    headerBlockBackground: "#0176d3",
-    headerBlockTextColor: "#ffffff",
-    messageBlockInboundBackgroundColor: "#4CAF50",
-  }}
-/>
-```
-
-**For complex patterns,** consult `references/examples.md` for:
-
-- Sidebar containers and responsive sizing
-- Dark theme and advanced theming combinations
-- Inline without header, calculated dimensions
-- Complete host component examples
-
-**For styling:** For ANY color, font, or spacing changes, use `styleTokens` prop only. See `references/style-tokens.md` for complete token list and examples.
-
-**Common mistakes to avoid:** Consult `references/constraints.md` for:
-
-- Invalid props (containerStyle, style, className)
-- Invalid styling approaches (CSS files, style tags)
-- What files NOT to edit (implementation files)
-
-## Common Issues
-
-If component doesn't appear or authentication fails, see `references/troubleshooting.md` for:
-
-- Agent activation and deployment
-- Localhost trusted domains
-- Cookie restriction settings
-
-## Prerequisites
-
-Before the component will work, the following Salesforce settings must be configured by the user:
-
-**Cookie settings:**
-
-- Setup → My Domain → Disable "Require first party use of Salesforce cookies"
-
-**Trusted domains (required only for local development):**
-
-- Setup → Session Settings → Trusted Domains for Inline Frames → Add your domain
-  - Local development: `localhost:<PORT>` (e.g., `localhost:3000`)

package/skills/managing-agentforce-conversation-client/references/constraints.md

@@ -1,134 +0,0 @@
-# Constraints and Anti-Patterns
-
-This document lists all invalid approaches and patterns to avoid when working with AgentforceConversationClient.
-
-## Never Edit Implementation Files
-
-**CRITICAL: Only edit files where the component is USED, never the component implementation itself.**
-
-- ✅ **DO edit**: Any React files that import and use `<AgentforceConversationClient />` (for example, shared shells, route components, or feature pages)
-- ❌ **DO NOT edit**: AgentforceConversationClient.tsx, AgentforceConversationClient.jsx, index.tsx, index.jsx, or any files inside:
-  - `node_modules/@salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental/src/`
-  - `packages/template/feature/feature-react-agentforce-conversation-client/src/`
-  - `src/components/AgentforceConversationClient.tsx` (patched templates)
-  - Any path containing `/components/AgentforceConversationClient.`
-
-**If you're reading a file named `AgentforceConversationClient.tsx`, you're in the wrong place. Stop and search for the USAGE instead.**
-
-## Invalid Props
-
-AgentforceConversationClient uses a flat prop API and does NOT accept these props:
-
-- ❌ `containerStyle` - Use `width` and `height` props directly instead
-- ❌ `style` - Use `styleTokens` for theming
-- ❌ `className` - Not supported
-- ❌ Any standard React div props - This wraps an embedded iframe, not a div
-
-**Why:** The component is a wrapper around an embedded iframe using Lightning Out 2.0. Standard React styling props don't apply.
-
-## Invalid Styling Approaches
-
-**CRITICAL: For ALL styling, theming, branding, or color changes - ONLY use `styleTokens` prop.**
-
-Never use these approaches:
-
-- ❌ Creating CSS files (e.g., `agent-styles.css`, `theme.css`)
-- ❌ Creating `<style>` tags or internal stylesheets
-- ❌ Using `style` attribute on the component
-- ❌ Using `className` prop
-- ❌ Inline styles
-- ❌ CSS modules
-- ❌ Styled-components or any CSS-in-JS libraries
-
-**Why:** The component controls its own internal styling through the `styleTokens` API. External CSS cannot reach into the embedded iframe.
-
-## Invalid Implementation Approaches
-
-Never do these:
-
-- ❌ Create custom chat UIs from scratch
-- ❌ Use third-party chat libraries (socket.io, WebSocket libraries, etc.)
-- ❌ Call `embedAgentforceClient` directly from `@salesforce/agentforce-conversation-client`
-- ❌ Build custom WebSocket or REST API chat implementations
-
-**Why:** The AgentforceConversationClient component is the official wrapper that handles authentication, Lightning Out 2.0 initialization, and all communication with Salesforce agents. Custom implementations will not work.
-
-## Invalid Update Patterns
-
-When updating an existing component:
-
-- ❌ Delete and recreate the component
-- ❌ Remove all props and start over
-- ❌ Copy the entire component to a new file
-
-**Why:** This loses configuration, introduces errors, and creates unnecessary diffs. Always update props in place.
-
-## Examples
-
-### ❌ Wrong - Using containerStyle
-
-```tsx
-<AgentforceConversationClient agentId="0Xx..." containerStyle={{ width: 420, height: 600 }} />
-```
-
-### ✅ Correct - Using width/height directly
-
-```tsx
-<AgentforceConversationClient agentId="0Xx..." width="420px" height="600px" />
-```
-
-### ❌ Wrong - Creating CSS file
-
-```css
-/* agent-styles.css */
-.agentforce-chat {
-  background: red;
-  color: white;
-}
-```
-
-```tsx
-import "./agent-styles.css";
-
-<AgentforceConversationClient className="agentforce-chat" />;
-```
-
-### ✅ Correct - Using styleTokens
-
-```tsx
-<AgentforceConversationClient
-  agentId="0Xx..."
-  styleTokens={{
-    headerBlockBackground: "red",
-    headerBlockTextColor: "white",
-  }}
-/>
-```
-
-### ❌ Wrong - Creating style tag
-
-```tsx
-<>
-  <style>{`.agent-chat { background: blue; }`}</style>
-  <AgentforceConversationClient agentId="0Xx..." />
-</>
-```
-
-### ✅ Correct - Using styleTokens
-
-```tsx
-<AgentforceConversationClient
-  agentId="0Xx..."
-  styleTokens={{
-    headerBlockBackground: "blue",
-  }}
-/>
-```
-
-### ❌ Wrong - Editing implementation file
-
-Reading or editing: `node_modules/@salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental/src/AgentforceConversationClient.tsx`
-
-### ✅ Correct - Editing usage file
-
-Reading and editing: usage files where the component is imported and used (for example, `src/app.tsx`, a route component, or a feature page)