@pega/sdk 0.0.4 → 0.0.6

package/templates/react-sdk-reference/.claude/skills/widget-skills/FileUtility.md

@@ -1,206 +0,0 @@
-# Skill: FileUtility
-
-File and URL management utility widget. Displays case attachments and links, supports upload/download/delete, and provides modals for adding new files or URLs. Also covers `ActionButtonsForFileUtil` sub-component.
-
-> **Prerequisite skill:** [`widget-components.md`](../widget-components.md) — covers architecture, props interface, data-fetching patterns, and registration conventions common to ALL widget components.
-
----
-
-## Component Purpose
-
-The primary attachments management panel in the case utilities column. Shows up to 3 attachments/links in the main view with a "View all" option that opens a modal with the full list. Users can upload files, attach URLs, download, and delete items. Attachment state is kept fresh via debounced pub-sub subscriptions.
-
-## Pega Metadata
-
-- **Registration key:** `FileUtility` (in `component-map.ts`)
-- **Category:** Widget — file management
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop          | Type       | Required | Description                                                                       |
-| ------------- | ---------- | -------- | --------------------------------------------------------------------------------- |
-| `caseId`      | `string`   | No       | Optional case ID override. If absent, resolved from `pConn.getCaseInfo().getID()` |
-| `getPConnect` | `function` | Yes      | PConnect getter                                                                   |
-
-## Behavioral Contract
-
-### Attachment Fetch
-
-On mount and on attachment change events:
-
-```
-PCore.getAttachmentUtils().getCaseAttachments(caseKey, context)
-```
-
-Returns array of attachment/link objects. Store in `attachments` state.
-
-Debounced auto-refresh: on `CASE_ATTACHMENTS_UPDATED` pub-sub event, wait 1000ms (debounced) then re-fetch. This prevents rapid re-fetches when multiple files are uploaded simultaneously.
-
-### Main View — Top 3 Display
-
-Show only the first 3 items from `attachments`. If `attachments.length > 3`, show a `"View all (N)"` button that opens the full-list modal.
-
-### SummaryList Integration
-
-Map each attachment/link to a `SummaryItem`-compatible object:
-
-```typescript
-{
-  id: attachment.ID,
-  visual: { icon: getFileIcon(attachment.mimeType) },
-  primary: {
-    type: attachment.category === 'FILE' ? 'FILE' : 'URL',
-    name: attachment.name,
-    click: () => handleDownloadOrOpen(attachment)
-  },
-  secondary: { text: attachment.createdBy + ' · ' + formatDate(attachment.createTime) }
-  actions: [
-    { id: 'delete', text: 'Delete', icon: 'trash', onClick: () => handleDelete(attachment.ID) }
-  ]
-}
-```
-
-Pass to `<SummaryList arItems$={summaryItems} />`.
-
-### File Upload
-
-1. User clicks "Add file" from the `<Menu>`.
-2. Opens an add-file modal (dialog).
-3. User selects a file via `<input type='file'>`.
-4. On confirm: call `PCore.getAttachmentUtils().uploadAttachment(file, onProgress, onError, context)`.
-5. On success: call `PCore.getAttachmentUtils().linkAttachmentsToCase(caseKey, [newAttachment], context)`.
-6. Refresh attachment list.
-
-### URL Attachment
-
-1. User clicks "Add link" from the `<Menu>`.
-2. Opens add-link modal with two fields: `Title` (required) and `URL` (required).
-3. The "Attach" button is enabled only when both `title` and `url` are non-empty.
-4. On confirm: call `PCore.getAttachmentUtils().linkAttachmentsToCase(caseKey, [{ name: title, url, category: 'URL' }], context)`.
-5. Refresh attachment list.
-
-### Download / Open
-
-- **FILE type:** Call `PCore.getAttachmentUtils().downloadAttachment(attachmentID, context)` then trigger browser download via `downloadjs`.
-- **URL type:** Open `attachment.url` in a new browser tab (`window.open(url, '_blank')`).
-
-### Delete
-
-Call `PCore.getAttachmentUtils().deleteAttachment(attachmentID, context)`. Refresh attachment list after success.
-
-### Actions Menu
-
-Render a `<MoreVertIcon>` `<IconButton>` that opens a `<Menu>` with:
-
-- `"Add file"` — opens add-file modal
-- `"Add link"` — opens add-link modal
-
-## Visual Specifications
-
-### Main Card
-
-| Element           | Description                                  |
-| ----------------- | -------------------------------------------- |
-| Card header       | `"Attachments"` (or localized) + count badge |
-| Actions icon      | `<MoreVertIcon>` button top-right            |
-| Attachment rows   | Up to 3 `SummaryItem` cards                  |
-| "View all" button | Text button, shown when > 3 attachments      |
-
-### "View all" Modal
-
-| Element         | Description                |
-| --------------- | -------------------------- |
-| Modal header    | `"All attachments (N)"`    |
-| Attachment rows | All items in `SummaryList` |
-| Close button    | `X` in modal header        |
-
-### Add File Modal
-
-| Element        | Description                                  |
-| -------------- | -------------------------------------------- |
-| File picker    | `<input type='file'>`                        |
-| Progress bar   | Per-file upload progress                     |
-| Action buttons | `ActionButtonsForFileUtil` (Cancel + Attach) |
-
-### Add Link Modal
-
-| Element        | Description                                  |
-| -------------- | -------------------------------------------- |
-| Title field    | `<TextField label='Title'>` — required       |
-| URL field      | `<TextField label='URL'>` — required         |
-| Attach button  | Enabled only when both fields are filled     |
-| Action buttons | `ActionButtonsForFileUtil` (Cancel + Attach) |
-
-**CSS-only implementation notes:**
-
-- Main card: standard card styles.
-- Modal: `position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; border-radius: 8px; box-shadow: 0 4px 24px rgba(0,0,0,0.2); min-width: 480px; padding: 1.5rem`.
-- "View all" button: text style, `color: var(--app-primary-color); cursor: pointer`.
-- Progress bar: `height: 4px; background: var(--app-primary-color); transition: width 0.3s`.
-
-## Sub-Component: ActionButtonsForFileUtil
-
-**Registration key:** `ActionButtonsForFileUtil`
-
-A simple button row component used inside the FileUtility modals to render Cancel + primary action buttons.
-
-### Props
-
-| Prop                 | Type       | Required | Description                                                  |
-| -------------------- | ---------- | -------- | ------------------------------------------------------------ |
-| `arMainButtons`      | `any[]`    | Yes      | Primary button definitions `[{ actionID, name }]`            |
-| `arSecondaryButtons` | `any[]`    | Yes      | Secondary (cancel) button definitions `[{ actionID, name }]` |
-| `primaryAction`      | `function` | Yes      | Callback invoked when the primary button is clicked          |
-| `secondaryAction`    | `function` | Yes      | Callback invoked when the secondary/cancel button is clicked |
-| `getPConnect`        | `function` | Yes      | PConnect getter                                              |
-
-### Layout
-
-```
-[Secondary buttons (left)]   [Primary buttons (right)]
-      Cancel                        Attach
-```
-
-- Secondary buttons: outlined/text style.
-- Primary buttons: contained/filled style with theme primary color.
-- Render using `arSecondaryButtons.map(...)` and `arMainButtons.map(...)`.
-
-## Edge Cases & Special Logic
-
-- **Debounce (1000ms):** Prevents excessive re-fetches when multiple attachment events fire in quick succession.
-- **Add link "Attach" button disabled state:** Title and URL validation must happen on every keystroke — use controlled inputs with `!title || !url` to derive disabled state.
-- **`linkAttachmentsToCase`:** After upload, the file must be explicitly linked to the case. Uploading alone does not associate the file with the case.
-- **Pub-sub cleanup:** Unsubscribe from `CASE_ATTACHMENTS_UPDATED` on unmount to prevent stale callbacks.
-- **Error display:** Use `PCore.getMessageManager()` or inline error state in the modal — do not silently fail on upload/link errors.
-
-## Dependencies
-
-- `PCore.getAttachmentUtils()` — getCaseAttachments, uploadAttachment, downloadAttachment, deleteAttachment, linkAttachmentsToCase
-- `PCore.getMessagingServiceManager()` — subscribe to attachment change events
-- `PCore.getConstants()` — case info ID, summary refresh timing
-- `getComponentFromRegistry('SummaryList')` — renders the attachment item list
-- `getComponentFromRegistry('ActionButtonsForFileUtil')` — renders modal action buttons
-- `downloadjs` — browser file download trigger
-- MUI: `<Card>`, `<CardHeader>`, `<CardContent>`, `<IconButton>`, `<Menu>`, `<MenuItem>`, `<Button>`, `<TextField>`, `<Dialog>`, `<CircularProgress>`
-- MUI Icons: `<MoreVertIcon>`
-
-## Design System Mapping
-
-**UI control type:** File management widget — attachment list with upload/download/delete and add modals.
-
-Listed design systems are examples only.
-
-| Design System      | Card         | Action Menu                          | Modal      | Progress                                   |
-| ------------------ | ------------ | ------------------------------------ | ---------- | ------------------------------------------ |
-| Default (CSS only) | `<div>` card | `<button>` + custom dropdown         | `<dialog>` | CSS progress bar                           |
-| MUI                | `<Card>`     | `<IconButton>` + `<Menu>/<MenuItem>` | `<Dialog>` | `<CircularProgress>` or `<LinearProgress>` |
-| Ant Design         | `<Card>`     | `<Dropdown menu={{ items }}>`        | `<Modal>`  | `<Progress>`                               |
-| Chakra UI          | `<Card>`     | `<Menu>/<MenuButton>/<MenuList>`     | `<Modal>`  | `<Progress>`                               |
-| Shadcn/ui          | `<Card>`     | `<DropdownMenu>`                     | `<Dialog>` | Custom progress bar                        |
-
-When implementing in a specific design system:
-
-- Debounced refresh (1000ms) after pub-sub attachment events is required — prevents excessive API calls
-- `linkAttachmentsToCase` must be called after upload — uploading alone does not attach to the case
-- `ActionButtonsForFileUtil` receives button definition arrays — render them generically from `arMainButtons`/`arSecondaryButtons`

package/templates/react-sdk-reference/.claude/skills/widget-skills/ToDo.md

@@ -1,198 +0,0 @@
-# Skill: ToDo
-
-Assignment worklist widget. Displays the current user's pending assignments with expand/collapse, click-to-open, priority indicators, badge counts, responsive layout, and snackbar error notifications.
-
-> **Prerequisite skill:** [`widget-components.md`](../widget-components.md) — covers architecture, props interface, data-fetching patterns, and registration conventions common to ALL widget components.
-
----
-
-## Component Purpose
-
-Renders a compact to-do / worklist panel showing the user's pending assignments. Shows the top 3 items by default with a "Show more" / "Show less" toggle. Supports two modes: `worklist` (personal workbasket) and `todo` (case-level assignments). Clicking an item opens the assignment. A badge in the card header shows the total count.
-
-## Pega Metadata
-
-- **Registration key:** `Todo` (note: lowercase `o` in the key; file is `ToDo.tsx`)
-- **Category:** Widget — assignment / action
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop           | Type       | Required | Description                                                                                        |
-| -------------- | ---------- | -------- | -------------------------------------------------------------------------------------------------- |
-| `datasource`   | `any`      | No       | Array of assignments passed directly (used in `todo` type). If provided, skips the data page fetch |
-| `myWorkList`   | `any`      | No       | Work list config object `{ datapage: string, fields: [...] }` — for `worklist` type                |
-| `caseInfoID`   | `string`   | No       | Case ID to filter assignments (used in `todo` type)                                                |
-| `headerText`   | `string`   | No       | Widget title. Default: `"To do"`                                                                   |
-| `itemKey`      | `string`   | No       | Field key (reserved, currently unused)                                                             |
-| `showTodoList` | `boolean`  | No       | Whether to show the assignment list. Default `true`                                                |
-| `type`         | `string`   | No       | `'worklist'` (personal work) or `'todo'` (case-level). Default `'worklist'`                        |
-| `context`      | `string`   | No       | Context name for API calls. Falls back to `pConn.getContextName()`                                 |
-| `isConfirm`    | `boolean`  | No       | Confirmation mode — adjusts rendering for post-submit confirmation view                            |
-| `getPConnect`  | `function` | Yes      | PConnect getter                                                                                    |
-
-## Behavioral Contract
-
-### Data Source Resolution
-
-**`type === 'todo'` (case-level):**
-
-- Use `datasource` prop directly (array of assignment objects).
-- `caseInfoID` is used to scope the assignments.
-
-**`type === 'worklist'` (personal work):**
-
-- Fetch from `myWorkList.datapage` (e.g., `D_WorkList`) via:
-  ```
-  PCore.getDataPageUtils().getDataAsync(
-    myWorkList.datapage,
-    context,
-    {},
-    { pageNumber: 1, pageSize: 50 },
-    { select: myWorkList.fields },
-    { invalidateCache: true }
-  )
-  ```
-- Map the response to assignment objects.
-
-### Top 3 + Show More
-
-- `showCount` state: default `3`.
-- Render only `assignments.slice(0, showCount)`.
-- If `assignments.length > 3`:
-  - Show a `"Show more"` button → sets `showCount = assignments.length`.
-  - When expanded: show `"Show less"` button → sets `showCount = 3`.
-
-### Badge Count
-
-- Render a `<Badge badgeContent={assignments.length}>` on the card header or alongside the title.
-- Badge shows the total count of assignments, not the currently-visible count.
-
-### Open Assignment
-
-On item click:
-
-```typescript
-pConn.getActionsApi().openAssignment(
-  assignment.pxRefObjectKey, // case key
-  assignment.pxRefObjectClass, // class name
-  {
-    containerName: pConn.getContainerName() || PCore.getConstants().APP.APP,
-    channelName: '',
-  },
-);
-```
-
-### Assignment Item Rendering
-
-For each assignment, show:
-
-- **Avatar:** Circle with user initials (derived from `pConn.getContextObject?.().pyLabel` or operator name).
-- **Name/title:** `assignment.pyLabel` — the assignment task name.
-- **Status badge (worklist only):** `assignment.pyStatusWork` — colored status pill.
-- **Priority/urgency:** `assignment.pyUrgencyWork` — urgency level indicator.
-- **Child case indicator:** If `assignment.isChild === true`, show an indent or nested indicator.
-- **Arrow icon:** Right-pointing arrow (`<ArrowForwardIosOutlinedIcon>`) indicating clickable.
-
-### Responsive Layout
-
-Use `useMediaQuery(theme.breakpoints.down('sm'))` (MUI) to detect mobile:
-
-- **Desktop:** Show avatar, name, status, priority, and arrow in a horizontal row.
-- **Mobile:** Stack or truncate elements for narrow display.
-
-### `canPerform` Permission Check
-
-If an assignment has `canPerform === false`, render it as non-clickable (greyed out, no onClick handler).
-
-### Snackbar Error
-
-- On `openAssignment` failure, catch the error and show a `<Snackbar>` with the error message.
-- Auto-hide after 3000ms.
-- `<IconButton>` (`<CloseIcon>`) to manually dismiss.
-
-### Operator Avatar Initials
-
-Extract initials from `PCore.getEnvironmentInfo().getOperatorName()`:
-
-```typescript
-const initials = operatorName
-  .split(' ')
-  .map((w) => w[0])
-  .join('')
-  .substring(0, 2)
-  .toUpperCase();
-```
-
-## Visual Specifications
-
-### Card Layout
-
-| Element               | Description                                         |
-| --------------------- | --------------------------------------------------- |
-| Card header           | `headerText` (default `"To do"`) + badge with count |
-| Assignment rows       | Up to `showCount` items                             |
-| Show more/less button | Below the last visible item                         |
-
-### Assignment Row
-
-| Element            | Desktop   | Mobile          |
-| ------------------ | --------- | --------------- |
-| Avatar circle      | Shown     | Shown           |
-| Task name          | Full text | Truncated       |
-| Status badge       | Shown     | Hidden or small |
-| Priority indicator | Shown     | Simplified      |
-| Arrow icon         | Shown     | Shown           |
-
-**CSS-only implementation notes:**
-
-- Card: standard card layout.
-- Assignment row: `display: flex; align-items: center; gap: 0.75rem; padding: 10px 0; cursor: pointer; border-bottom: 1px solid var(--divider-color)`.
-- Avatar: `width: 36px; height: 36px; border-radius: 50%; background: var(--avatar-bg); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 600`.
-- Status badge: `padding: 2px 6px; border-radius: 10px; font-size: 0.75rem; background: var(--status-bg-color)`.
-- Priority: `font-size: 0.75rem; color: var(--secondary-text-color)`.
-- Arrow: `margin-left: auto; color: var(--secondary-text-color)`.
-- Non-clickable (canPerform=false): `opacity: 0.5; cursor: not-allowed`.
-- Show more button: `width: 100%; text-align: center; padding: 8px; color: var(--app-primary-color)`.
-
-## Edge Cases & Special Logic
-
-- `type` defaults to `'worklist'` — handle the fallback gracefully if `type` is undefined.
-- `datasource` prop vs fetch: if `datasource` is provided (non-empty), skip the data page fetch entirely.
-- `myWorkList` may be undefined for `todo` type — do not attempt a fetch if it's missing.
-- `showTodoList === false` — render only the card header (with badge count) and hide the list body.
-- `isConfirm === true` — used in the Confirmation template context; may adjust layout to hide certain elements (e.g., hide status badge, show simpler view).
-- Empty assignments — show a `"No tasks"` or `"You're all caught up!"` empty state message.
-- `canPerform` check: if `false`, disable click and show cursor `not-allowed`. Do not open the assignment.
-- Container name fallback: `pConn.getContainerName() || PCore.getConstants().APP.APP` — always provide a container name to `openAssignment`.
-
-## Dependencies
-
-- `PCore.getDataPageUtils().getDataAsync()` — worklist data page fetch
-- `PCore.getEnvironmentInfo()` — operator name for avatar initials
-- `PCore.getConstants()` — CASE_INFO, WORK_BASKET, TODO, APP constants
-- `PCore.getLocaleUtils()` — assignment label localization
-- `pConn.getActionsApi().openAssignment()` — opens the selected assignment
-- MUI: `<Card>`, `<CardContent>`, `<CardHeader>`, `<Avatar>`, `<Typography>`, `<Badge>`, `<List>`, `<ListItem>`, `<ListItemText>`, `<Button>`, `<Snackbar>`, `<IconButton>`, `useMediaQuery`, `useTheme`
-- MUI Icons: `<CloseIcon>`, `<ArrowForwardIosOutlinedIcon>`
-
-## Design System Mapping
-
-**UI control type:** Assignment worklist widget with expand/collapse, click-to-open, badge count, and error toast.
-
-Listed design systems are examples only.
-
-| Design System      | Card                      | List                | Badge               | Snackbar                      |
-| ------------------ | ------------------------- | ------------------- | ------------------- | ----------------------------- |
-| Default (CSS only) | `<div>` card              | `<ul>/<li>`         | CSS counter badge   | Custom toast overlay          |
-| MUI                | `<Card>` + `<CardHeader>` | `<List>/<ListItem>` | `<Badge>`           | `<Snackbar>/<Alert>`          |
-| Ant Design         | `<Card>`                  | `<List>`            | `<Badge count={N}>` | `message.error()`             |
-| Chakra UI          | `<Card>`                  | `<VStack>`          | `<Badge>`           | `useToast()`                  |
-| Shadcn/ui          | `<Card>`                  | `<ul>/<li>`         | Custom badge        | `<Toaster>` + `toast.error()` |
-
-When implementing in a specific design system:
-
-- Show top 3 items by default — `showCount` state controls slice; "Show more/less" toggles between 3 and full length
-- `canPerform === false` must make the row non-clickable — check this before calling `openAssignment`
-- `type === 'worklist'` fetches from a data page; `type === 'todo'` uses the `datasource` prop — both paths must be implemented
-- Operator initials for the avatar must be derived from `PCore.getEnvironmentInfo().getOperatorName()`

package/templates/react-sdk-reference/.cursor/rules/component-map.mdrules

@@ -1,41 +0,0 @@
----
-globs: ["**/component-map.ts"]
-alwaysApply: false
----
-
-# Component Map Rules
-
-The component map (`src/components/component-map.ts`) is the registry that maps Pega component names to React implementations.
-
-## Structure
-
-```typescript
-import { sdkComponents } from '@pega/sdk-react';
-
-function getSampleComponentMap() {
-  return {
-    ...sdkComponents,   // NEVER remove this — provides infrastructure
-    // Your components below:
-    TextInput,
-    Dropdown,
-    // ...
-  };
-}
-```
-
-## Rules
-
-1. **NEVER remove `...sdkComponents`** — it provides View, Region, Reference, RootContainer, FlowContainer, ViewContainer, Assignment, AssignmentCard, ErrorBoundary, MultiStep, CaseSummary, and their aliases.
-
-2. **Map keys must match Pega component names exactly** — these are resolved at runtime by the platform. The key is what Pega sends; the value is your React component.
-
-3. **To replace a component**: change its import path to your new implementation. Do NOT rename the key.
-
-4. **To add a new component**: add the import + add a new key-value entry.
-
-5. **Key naming exceptions** (where key differs from variable name):
-   - `Date: DateField` (Date is reserved in JS)
-   - `URL: URLComponent` (URL is a global)
-   - `Todo: ToDo` (casing difference)
-
-6. **Keep the `registerSampleComponents` function** — it registers all entries into the `ComponentRegistry` instance used by the PConnect bridge.

package/templates/react-sdk-reference/.cursor/rules/dse-component.mdrules

@@ -1,78 +0,0 @@
----
-globs: ["src/components/designSystemExtension/**/*.tsx"]
-alwaysApply: false
----
-
-# Design System Extension Component Rules
-
-When creating or modifying DSE components, follow these rules:
-
-## What Are DSE Components?
-
-Design System Extension components are display-focused presentational components. They sit between pure UI and data-fetching widgets. Some receive `getPConnect`, others receive only display props.
-
-## Patterns
-
-### Pattern A: With PConnect (data-aware display)
-
-Used for: FieldValueList, CaseSummaryFields, DetailsFields
-
-```typescript
-import type { PConnProps } from '@pega/sdk-react';
-
-interface FieldValueListProps extends PConnProps {
-  name?: string;
-  value?: string;
-  variant?: 'stacked' | 'inline';
-}
-
-export default function FieldValueList(props: FieldValueListProps) {
-  const { name, value, variant = 'inline' } = props;
-  // Render a label-value pair
-}
-```
-
-### Pattern B: Without PConnect (pure presentation)
-
-Used for: AlertBanner, Banner, Operator
-
-```typescript
-interface AlertBannerProps {
-  variant: 'urgent' | 'warning' | 'info' | 'success';
-  heading?: string;
-  messages: Array<string | { label?: string; description?: string }>;
-  onClose?: () => void;
-}
-
-export default function AlertBanner(props: AlertBannerProps) {
-  // Render an alert/notification banner
-}
-```
-
-### Pattern C: Rich editor (extends PConnFieldProps)
-
-Used for: RichTextEditor
-
-```typescript
-import type { PConnFieldProps } from '@pega/sdk-react';
-
-interface RichTextEditorProps extends PConnFieldProps {
-  content?: string;
-}
-```
-
-## Visual Preservation
-
-The replacement must look the same as the original component:
-
-1. **Read any `.css` file in the directory first.** Note every class's visual intent (spacing, sizing, colors, layout).
-2. Replicate those styles via inline `style` props, the new design system's props/variants, or by keeping the CSS import — whichever produces the closest match.
-3. Do NOT silently drop `makeStyles` classes — map each one to an equivalent style.
-
-## Key Rules
-
-- DSE components are the **most commonly referenced by other components** via `getComponentFromRegistry('FieldValueList')` — every field uses FieldValueList for display modes
-- Keep the same export name (default export) and prop interface shape
-- If you replace FieldValueList, ensure it accepts `name`, `value`, and optional `variant` props
-- AlertBanner must handle the `messages` array format (both strings and `{label, description}` objects)
-- Do NOT drop visual styles when removing `makeStyles` — always map them to an equivalent

package/templates/react-sdk-reference/.cursor/rules/field-component.mdrules

@@ -1,74 +0,0 @@
----
-globs: ["src/components/field/**/*.tsx"]
-alwaysApply: false
----
-
-# Field Component Rules
-
-When creating or modifying field components, follow these rules:
-
-## Required Structure
-
-1. **Import types from `@pega/sdk-react`**:
-   ```typescript
-   import type { PConnFieldProps } from '@pega/sdk-react';
-   ```
-
-2. **Define a props interface extending `PConnFieldProps`**:
-   ```typescript
-   interface MyFieldProps extends PConnFieldProps {
-     // additional props specific to this field
-   }
-   ```
-
-3. **Export as default function component**:
-   ```typescript
-   export default function MyField(props: MyFieldProps) { ... }
-   ```
-
-## Required Behaviors
-
-1. **Extract standard props**: `getPConnect`, `label`, `required`, `disabled`, `value`, `validatemessage`, `status`, `readOnly`, `testId`, `helperText`, `displayMode`, `hideLabel`, `placeholder`
-
-2. **Get PConnect APIs**:
-   ```typescript
-   const pConn = getPConnect();
-   const actions = pConn.getActionsApi();
-   const propName = (pConn.getStateProps() as any).value;
-   ```
-
-3. **Handle displayMode** (MUST be before the main return):
-   ```typescript
-   if (displayMode === 'DISPLAY_ONLY') {
-     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
-   }
-   if (displayMode === 'STACKED_LARGE_VAL') {
-     return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
-   }
-   ```
-
-4. **Use local state + blur pattern**:
-   - `onChange` → update local state only
-   - `onBlur` → call `handleEvent(actions, 'changeNblur', propName, localValue)`
-
-5. **Show validation**: Display `validatemessage` and apply error styling when `status === 'error'`
-
-6. **Pass test ID**: Set `data-test-id={testId}` on the interactive element
-
-7. **Use `getComponentFromRegistry('FieldValueList')`** — never hardcode FieldValueList import
-
-## Visual Preservation
-
-The replacement must look the same as the original component:
-
-1. **Read any `.css` file in the directory first.** Note every class's visual intent (spacing, sizing, colors, layout).
-2. Replicate those styles via inline `style` props, {{designSystem}} component props/variants, or by keeping the CSS import — whichever produces the closest match.
-3. Do NOT silently drop `makeStyles` classes — map each one to an equivalent style.
-
-## Do NOT
-
-- Skip `displayMode` handling — it breaks read-only views
-- Call `handleEvent` on every keystroke — only on blur
-- Hardcode component imports for components that exist in the registry
-- Remove the `handleEvent` import from `../../helpers/event-utils`
-- Drop visual styles when removing `makeStyles` — always map them to an equivalent