@pega/sdk 0.0.4 → 0.0.5

package/templates/react-sdk-reference/.cursor/rules/skills/design-system-extension-skills/CaseSummaryFields.mdrules

@@ -1,159 +0,0 @@
----
-description: DSE component skill: CaseSummaryFields
-alwaysApply: false
----
-
-# Skill: CaseSummaryFields
-
-Display-only grid of typed field values for a case summary header. Renders a 2-column grid of read-only fields, each formatted according to its type (text, date, currency, phone, email, checkbox, status, operator, etc.).
-
-> **Prerequisite skill:** [`design-system-extension.md`](../design-system-extension.md) — covers architecture, props interface, styling patterns, and registration patterns common to ALL DSE components.
-
----
-
-## Component Purpose
-
-Renders a responsive 2-column read-only grid of field values for a case summary header area. Each field in the input array is typed (e.g., `textinput`, `date`, `currency`, `caseoperator`), and the component selects the appropriate display renderer per type. Visibility and a special status field injection are also handled.
-
-## Pega Metadata
-
-- **Pega Name:** `CaseSummaryFields`
-- **Registration key:** `CaseSummaryFields` (in `component-map.ts`)
-- **Does NOT use `getPConnect` directly** — receives pre-processed `theFields` array as a prop
-
-## Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `theFields` | `Array<{ type: string; config: FieldConfig }>` | Yes | Array of typed field descriptors to render |
-| `status` | `string` | No | The case status value, injected at position 1 if `showStatus` is true |
-| `showStatus` | `boolean` | No | If `true`, splices a status field entry at position 1 in the fields array |
-
-### FieldConfig shape (within each item in `theFields`)
-
-| Property | Type | Description |
-|----------|------|-------------|
-| `label` | `string` | Field label |
-| `value` | `any` | Field value |
-| `visibility` | `boolean` (optional) | If `false`, the field is hidden |
-| `caption` | `string` (optional) | Alternative label for checkbox fields |
-| `trueLabel` | `string` (optional) | Display text when checkbox value is true |
-| `falseLabel` | `string` (optional) | Display text when checkbox value is false |
-| `currencyISOCode` | `string` (optional) | ISO currency code for currency fields |
-
-## Behavioral Contract
-
-### 1. Status Field Injection
-
-Before rendering, if `showStatus` is `true` AND `theFields[1].type !== 'status'`, inject a status entry at position 1:
-```
-{ type: 'status', config: { value: status, label: 'Status' } }
-```
-If the fields array has fewer than 2 items, append the status entry at the end.
-
-### 2. State Management with Deep Equality
-
-- Store the final fields array in `theFieldsToRender` state.
-- Only update `theFieldsToRender` if the new value is not deep-equal to the current value (use `fast-deep-equal/react`).
-- When `theFieldsToRender` changes, recompute `theFieldsAsGridItems` (via `useEffect`).
-
-### 3. Field Visibility
-
-Skip any field where `config.visibility` exists and is `false`.
-
-### 4. Type-Based Rendering (`getFieldValue(field)`)
-
-When `field.config.value` is `null` or `''` (empty):
-- For `caseoperator`: render `<Operator {...field.config} />`.
-- For all other types: render a read-only TextField with value `'---'` and the field label.
-
-When `field.config.value` is non-empty, switch on `field.type.toLowerCase()`:
-
-| Type | Rendering |
-|------|-----------|
-| `textinput`, `decimal`, `integer`, `dropdown` | Read-only TextField (standard, no underline) with `value` |
-| `checkbox` | Label: `label \|\| caption`; Value: `value ? trueLabel : falseLabel`; read-only TextField |
-| `status` | Read-only TextField with class `psdk-csf-status-style` (uppercase, small, bold) |
-| `phone` | `<a href={'tel:' + value}>` wrapping a read-only TextField with pointer cursor |
-| `email` | `<a href={'mailto:' + format(value, 'email')}>` wrapping a read-only TextField with pointer cursor |
-| `date` | Read-only TextField with `format(value, 'date', { format: dateFormatStringLong })` |
-| `datetime` | Read-only TextField with `format(value, 'datetime', { format: dateFormatStringLong + ' hh:mm a' })` |
-| `currency` | Read-only TextField with `format(value, 'currency', getCurrencyOptions(currencyISOCode))` |
-| `boolean`, `userreference` | Read-only TextField with `format(value, type)` |
-| `caseoperator` | `<Operator {...field.config} />` |
-| default (unknown) | `<span>{type} {value}</span>` |
-
-All TextFields use: `variant='standard'`, `slotProps.input.readOnly = true`, `slotProps.input.disableUnderline = true`.
-
-### 5. Grid Layout
-
-Render each visible field in `Grid size={{ xs: 6 }}` (2-column layout) inside a container `Grid` with class `psdk-case-summary-fields`.
-
-## Visual Specifications
-
-Derived from `CaseSummaryFields.css`:
-
-### Status Field
-
-| Property | Value |
-|----------|-------|
-| Display | inline-block |
-| Font size | 0.75rem |
-| Font weight | bold |
-| Line height | `calc(0.5rem * 2.5)` (≈ 1.25rem) |
-| Height | `calc(0.5rem * 2.5)` (≈ 1.25rem) |
-| Text transform | uppercase |
-
-### Summary Grid Container
-
-| Property | Value |
-|----------|-------|
-| Padding | `calc(2 * 0.5rem)` (≈ 1rem) |
-| Row gap | `calc(2 * 0.5rem)` (≈ 1rem) |
-
-**CSS-only implementation notes:**
-- Summary grid: `display: grid; grid-template-columns: 1fr 1fr; padding: 1rem; row-gap: 1rem`.
-- Each field cell: standard read-only text display with label above value.
-- Status text: `font-size: 0.75rem; font-weight: bold; text-transform: uppercase; line-height: 1.25rem`.
-- Phone/email links: `text-decoration: none; color: inherit` on the `<a>` wrapper; use `cursor: pointer` on the inner input.
-- Read-only field pair: label in secondary text color (`font-weight: 400; color: var(--text-secondary); font-size: 0.75rem`), value in primary text color below.
-
-## Edge Cases & Special Logic
-
-- Use `fast-deep-equal/react` deep equality before updating `theFieldsToRender` to prevent infinite re-render loops.
-- Status splicing mutates `theFields` directly — ensure the original array reference is used (not a copy) when checking `theFields[1].type`.
-- Date format comes from `getDateFormatInfo().dateFormatStringLong` — defaults to locale format.
-- Currency options come from `getCurrencyOptions(field.config?.currencyISOCode)`.
-- The `Operator` component is retrieved via `getComponentFromRegistry('Operator')` — not imported directly. This allows runtime component override.
-- If `theFields` is null or undefined, initialize to empty to avoid crashes.
-
-## Dependencies
-
-- `getComponentFromRegistry` from `@pega/sdk-react` — to retrieve the `Operator` component at runtime
-- `isDeepEqual` from `fast-deep-equal/react` — for state change detection
-- `getDateFormatInfo` from `../../helpers/date-format-utils` — for locale date format string
-- `getCurrencyOptions` from `../../field/Currency/currency-utils` — for currency formatting options
-- `format` from `../../helpers/formatters` — for formatting phone, email, date, datetime, currency, boolean, userreference values
-- `Operator` component (resolved via registry) — for `caseoperator` type rendering
-
-## Design System Mapping
-
-**UI control type:** 2-column grid of read-only labeled field values.
-
-Listed design systems are examples only.
-
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | CSS Grid 2-column layout with label/value pairs |
-| MUI | `<Grid container>` with `<Grid size={{ xs: 6 }}>` cells; `<TextField variant='standard' readOnly>` per field |
-| Ant Design | `<Descriptions layout='vertical' column={2}>` with typed item renderers |
-| Chakra UI | `<SimpleGrid columns={2}>` with `<FormControl>` label/value pairs |
-| Shadcn/ui | 2-column grid with `<Label>` / `<p>` pairs |
-
-When implementing in a specific design system, map the following:
-- Read-only TextField (standard, no underline) → design system's read-only text display
-- Phone field → `<a href='tel:...'>` wrapper around the display
-- Email field → `<a href='mailto:...'>` wrapper around the display
-- Status field → uppercase badge/chip or styled text
-- `caseoperator` type → delegate to the `Operator` component
-- Missing/empty value → always display `'---'`

package/templates/react-sdk-reference/.cursor/rules/skills/design-system-extension-skills/DetailsFields.mdrules

@@ -1,149 +0,0 @@
----
-description: DSE component skill: DetailsFields
-alwaysApply: false
----
-
-# Skill: DetailsFields
-
-Read-only field display component that receives an array of PConnect-aware field objects and renders each as a label/value pair. Delegates value rendering to `PConnectComponent` in DISPLAY_ONLY mode.
-
-> **Prerequisite skill:** [`design-system-extension.md`](../design-system-extension.md) — covers architecture, props interface, styling patterns, and registration patterns common to ALL DSE components.
-
----
-
-## Component Purpose
-
-Renders a vertical list of read-only field name/value pairs for a details/summary panel. Each field is a PConnect-aware object. The component extracts type, label, and view config from each field's PConnect, forces the view into `readOnly + DISPLAY_ONLY` mode, and delegates rendering to `PConnectComponent`.
-
-Supports three item layouts:
-- **Reference type:** Renders the value directly (no label/value grid wrapper).
-- **React element value:** Renders value in a single full-width cell (no label).
-- **Label + value pair:** Renders label in a 6-col cell and value in a 6-col cell.
-
-## Pega Metadata
-
-- **Pega Name:** `DetailsFields`
-- **Registration key:** `DetailsFields` (in `component-map.ts`)
-- **Does NOT use `getPConnect` on the component itself** — iterates `fields[]` each of which has `.getPConnect()`
-
-## Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `fields` | `any[]` | Yes | Array of PConnect-aware field objects. Each must have `.getPConnect()` method |
-
-## Behavioral Contract
-
-### 1. Field Iteration and PConnect Setup
-
-For each field in `fields`:
-1. Call `field.getPConnect()` to get `thePConn`.
-2. Get `theCompType = thePConn.getComponentName().toLowerCase()`.
-3. Get `label = thePConn.getConfigProps().label`.
-4. Call `configObj = thePConn.getReferencedView()` — get the referenced view config object.
-5. Set `configObj.config.readOnly = true` and `configObj.config.displayMode = 'DISPLAY_ONLY'` — forces display-only rendering.
-6. For `reference` type: override label with `thePConn.getInheritedProps().label`.
-7. Render the value using `createElement(PConnectComponent, thePConn.getReferencedViewPConnect())`.
-8. Push `{ type: theCompType, label, value: <React.Fragment key={index}>{renderedValue}</React.Fragment> }` into the field components array.
-
-### 2. Item Layout (per field component)
-
-Choose the layout based on the field:
-
-| Condition | Layout |
-|-----------|--------|
-| `type === 'reference'` | Render `field.value` directly with no wrapper |
-| `isValidElement(field.value)` | Single 12-col cell containing `field.value` (no label) |
-| Default (string/primitive value) | 6-col label cell + 6-col value cell |
-
-### 3. Label/Value Grid Row
-
-- **Row wrapper:** `<Grid container spacing={1} style={{ padding: '4px 0px' }}>`
-- **Label cell:** `<Grid size={{ xs: 6 }}>` containing `<Typography variant='body2' component='span' className='fieldLabel'>{field.label}</Typography>`
-- **Value cell:** `<Grid size={{ xs: 6 }}>` containing `<Typography variant='body2' component='span' className='fieldValue'>{formattedValue}</Typography>`
-
-### 4. Value Formatting
-
-- For `date` type: call `format(value, 'date')` before display.
-- For all others: use value as-is.
-- If formatted value is `undefined` or `''`, display `'---'` instead.
-
-### 5. React element detection
-
-Use `isValidElement(field.value)` — if true, render full-width (12 cols) without label.
-
-## Visual Specifications
-
-Derived from `DetailsFields.tsx` makeStyles:
-
-### Label
-
-| Property | Value |
-|----------|-------|
-| Display | block |
-| Font weight | 400 |
-| Color | `theme.palette.text.secondary` |
-| Typography | `body2` (≈ 0.875rem / 14px) |
-
-### Value
-
-| Property | Value |
-|----------|-------|
-| Font weight | 400 |
-| Color | `theme.palette.text.primary` |
-| Typography | `body2` (≈ 0.875rem / 14px) |
-
-### Row Padding
-
-| Property | Value |
-|----------|-------|
-| Row style | `padding: 4px 0px` |
-
-**CSS-only implementation notes:**
-- Each row: `display: grid; grid-template-columns: 1fr 1fr; padding: 4px 0; gap: 8px`.
-- Label: `font-size: 0.875rem; font-weight: 400; color: var(--text-secondary); display: block`.
-- Value: `font-size: 0.875rem; font-weight: 400; color: var(--text-primary)`.
-- For a React element value (full-width): render in a single column spanning full width.
-- For a reference type: render the component directly with no wrapping grid.
-
-## Edge Cases & Special Logic
-
-- `fields` defaults to `[]` — guard against null/undefined.
-- Reference fields bypass the label/value layout entirely — their rendered output fills the full row.
-- React element values (e.g., from child components) are detected with `isValidElement` and rendered full-width without a label cell.
-- The `configObj` mutation (`readOnly = true`, `displayMode = 'DISPLAY_ONLY'`) happens on the object returned by `getReferencedView()` — this is intentional side-effectful configuration.
-- `format(value, 'date')` is only called for `date` type — all other types pass through raw.
-
-## Dependencies
-
-- `createElement`, `isValidElement` from `react`
-- `PConnectComponent` from `@pega/sdk-react` — used to render each field in DISPLAY_ONLY mode
-- `format` from `../../helpers/formatters` — for date formatting
-- Each `field` in `fields[]` must support `.getPConnect()` returning a PConnect object with:
-  - `.getComponentName()` → string
-  - `.getConfigProps()` → `{ label: string }`
-  - `.getReferencedView()` → mutable config object
-  - `.getReferencedViewPConnect()` → props object for `PConnectComponent`
-  - `.getInheritedProps()` → `{ label?: string }` (for reference type)
-
-## Design System Mapping
-
-**UI control type:** Vertical list of read-only label/value field pairs with PConnect delegation.
-
-Listed design systems are examples only.
-
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | CSS grid 2-column rows per field pair |
-| MUI | `<Grid container spacing={1}>` per row with `<Typography>` label and value |
-| Ant Design | `<Descriptions layout='horizontal' column={1}>` with PConnect-rendered values |
-| Chakra UI | `<Grid templateColumns='1fr 1fr'>` rows with `<Text>` label/value |
-| Shadcn/ui | `<div class='grid grid-cols-2'>` rows |
-
-When implementing in a specific design system, map the following:
-- Label → secondary muted text, `body2` size
-- Value → primary text, `body2` size
-- Row padding → `4px 0` vertical spacing between pairs
-- Full-width value (React element) → single column spanning full width
-- Reference type → render the child component without any label wrapper
-- Empty value → display `'---'`

package/templates/react-sdk-reference/.cursor/rules/skills/design-system-extension-skills/FieldGroup.mdrules

@@ -1,136 +0,0 @@
----
-description: DSE component skill: FieldGroup
-alwaysApply: false
----
-
-# Skill: FieldGroup
-
-Collapsible or static container that groups related fields under an optional section header and instructions text.
-
-> **Prerequisite skill:** [`design-system-extension.md`](../design-system-extension.md) — covers architecture, props interface, styling patterns, and registration patterns common to ALL DSE components.
-
----
-
-## Component Purpose
-
-Renders a labeled section that wraps one or more field components. Supports optional:
-- **Section name** — rendered as a bold header above the fields.
-- **Collapsible behavior** — the name header becomes a toggle that shows/hides the fields.
-- **Instructions text** — rendered as HTML below the header and above the fields.
-
-Children are rendered inside a full-width inner container.
-
-## Pega Metadata
-
-- **Pega Name:** `FieldGroup`
-- **Registration key:** `FieldGroup` (in `component-map.ts`)
-- **Does NOT use `getPConnect`** — receives children via `PropsWithChildren`
-
-## Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode` | No | Field components to render inside the group |
-| `name` | `string` | No | Section heading displayed above the fields |
-| `collapsible` | `boolean` | No | If `true`, the header acts as a collapse/expand toggle. Default `false` |
-| `instructions` | `string` | No | HTML string of instruction text shown between header and fields |
-
-## Behavioral Contract
-
-1. **State:** Maintain a `collapsed` boolean in local state, initialized to `false` (expanded).
-2. **Name rendering:**
-   - If `name` is not provided, render no header.
-   - If `name` is provided and `collapsible` is `false`, render `<b>{name}</b>`.
-   - If `name` is provided and `collapsible` is `true`, wrap in a clickable `<span>` with:
-     - `id='field-group-header'`
-     - A directional arrow icon: **right arrow** when `collapsed === true`, **down arrow** when `collapsed === false`.
-     - The bold name text beside the arrow.
-     - Clicking the span toggles `collapsed`.
-3. **Instructions:** If `instructions` is provided AND is not the string `'none'`, render it with `dangerouslySetInnerHTML={{ __html: instructions }}`.
-4. **Children:** Render children inside a full-width div. If `collapsed` is `true`, do NOT render children (or instructions).
-5. **Header cursor:** When `collapsible` is `true`, the header span uses `cursor: pointer`. When `collapsible` is `false`, cursor is `auto`.
-6. **Layout:** All content is wrapped in a `Grid container` with `spacing={4}` and `justifyContent='space-between'`. The name row and children are inside a single inner `Grid` at full width.
-
-## Visual Specifications
-
-Derived from `FieldGroup.tsx` makeStyles:
-
-### Outer Container
-
-| Property | Value |
-|----------|-------|
-| Spacing | 4 units (≈ 32px in MUI default) |
-
-### Component Root Margins
-
-| Property | Value |
-|----------|-------|
-| Margin right | `theme.spacing(1)` (≈ 8px) |
-| Margin left | `theme.spacing(1)` |
-| Margin top | `theme.spacing(1)` |
-| Margin bottom | `theme.spacing(1)` |
-
-### Field Margin (name row)
-
-| Property | Value |
-|----------|-------|
-| Padding top | `theme.spacing(1)` |
-| Padding bottom | `theme.spacing(1)` |
-| Margin top | `theme.spacing(1)` |
-
-### Header Row (collapsible)
-
-| Property | Value |
-|----------|-------|
-| Display | flex |
-| Align items | center |
-| Gap | 5px |
-| Cursor | `pointer` (collapsible) or `auto` (non-collapsible) |
-
-### Instructions
-
-| Property | Value |
-|----------|-------|
-| Padding | `5px 0` |
-
-**CSS-only implementation notes:**
-- Outer wrapper: `margin: 8px`.
-- Name row: `padding: 8px 0; margin-top: 8px`.
-- Collapsible header: `display: flex; align-items: center; gap: 5px; cursor: pointer; user-select: none`.
-- Non-collapsible name: plain `<b>` with no wrapper.
-- Instructions: `padding: 5px 0`.
-- Arrow icons: use Unicode or inline SVG — collapsed → `▶` / `›`, expanded → `▼` / `⌄`.
-- Children wrapper: `width: 100%`.
-- When collapsed, use `display: none` or conditional rendering to hide children.
-
-## Edge Cases & Special Logic
-
-- If `collapsible` is `false` (default), the `collapsed` state is never changed — clicking the name does nothing.
-- `instructions` equal to the string `'none'` must NOT be rendered (skip entirely).
-- `instructions` is rendered as raw HTML — ensure the content is trusted (server-side).
-- If `name` is absent, render no header row, but still render instructions (if any) and children.
-
-## Dependencies
-
-- No Pega SDK imports required (no `getPConnect`)
-- Arrow icons: `KeyboardArrowRightIcon` / `KeyboardArrowDownIcon` from `@mui/icons-material` (MUI only) — use equivalent icons or Unicode characters in non-MUI implementations
-
-## Design System Mapping
-
-**UI control type:** Collapsible section container with label, instructions, and children.
-
-Listed design systems are examples only.
-
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<div>` with toggled `display: none` on children, `<b>` header |
-| MUI | Grid container with `KeyboardArrowRight/Down` icons for collapse toggle |
-| Ant Design | `<Collapse>` or `<Card>` with collapsible panels |
-| Chakra UI | `<Accordion>` or manual `<Box>` with toggle state |
-| Shadcn/ui | `<Collapsible>` + `<CollapsibleTrigger>` + `<CollapsibleContent>` |
-
-When implementing in a specific design system, map the following:
-- `collapsed` toggle → design system's collapse/expand state or controlled component
-- Arrow direction → visual indicator of expand/collapse state (chevron or arrow icon)
-- `instructions` HTML → design system's `dangerouslySetInnerHTML` or rich content slot
-- Full-width children → ensure children container spans the full group width

package/templates/react-sdk-reference/.cursor/rules/skills/design-system-extension-skills/FieldGroupList.mdrules

@@ -1,116 +0,0 @@
----
-description: DSE component skill: FieldGroupList
-alwaysApply: false
----
-
-# Skill: FieldGroupList
-
-Repeating list of named field groups, each with its own children. Supports per-item delete and a global "+Add" link at the bottom.
-
-> **Prerequisite skill:** [`design-system-extension.md`](../design-system-extension.md) — covers architecture, props interface, styling patterns, and registration patterns common to ALL DSE components.
-
----
-
-## Component Purpose
-
-Renders a vertical list of field group items. Each item has a bold name header, optional delete button (top-right), and rendered children (the group's fields). An optional "+Add" link appears at the bottom when adding is allowed. A horizontal divider separates items when `onAdd` is provided.
-
-## Pega Metadata
-
-- **Pega Name:** `FieldGroupList`
-- **Registration key:** `FieldGroupList` (in `component-map.ts`)
-- **Does NOT use `getPConnect`** — receives all data as direct props
-
-## Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `items` | `Array<{ name: string; id: string; children: ReactNode }>` | Yes | List of field group items to render |
-| `onDelete` | `(id: string) => void` | No | Called with the item's `id` when the delete button is clicked. If not provided, no delete button is shown |
-| `onAdd` | `() => void` | No | Called when the "+Add" link is clicked. If not provided, no add link or dividers are shown |
-
-## Behavioral Contract
-
-1. Render a `Grid container` with `spacing={4}` and `justifyContent='space-between'` as the outer wrapper.
-2. Inside, render a full-width inner Grid with `spacing={1}`.
-3. For **each item** in `props.items`:
-   - Render a full-width `Grid` keyed by `item.name`.
-   - Render `<b>{item.name}</b>` as the item header.
-   - If `onDelete` is provided, render a delete button:
-     - Floated right.
-     - `type='button'`, `id={'delete-row-' + item.id}`, `aria-label='Delete Row'`.
-     - Button class: `psdk-utility-button`.
-     - On click: call `onDelete(item.id)`.
-     - Button contains an `<img>` with the trash icon loaded via `Utils.getImageSrc('trash', Utils.getSDKStaticConentUrl())`.
-     - Image class: `psdk-utility-card-action-svg-icon`.
-   - Render `{item.children}`.
-   - Render `<br />`.
-   - If `onAdd` is provided: render `<Divider />`, then `<br />`.
-4. After all items, if `onAdd` is provided, render a `<Link>` (or `<a>`) with text `'+Add'`, `cursor: pointer`, and `onClick={onAdd}`.
-
-## Visual Specifications
-
-Derived from `FieldGroupList.tsx`:
-
-### Outer Layout
-
-| Property | Value |
-|----------|-------|
-| Grid container spacing | 4 (≈ 32px) |
-
-### Delete Button
-
-| Property | Value |
-|----------|-------|
-| Float | right |
-| Style class | `psdk-utility-button` |
-| Icon source | `Utils.getImageSrc('trash', Utils.getSDKStaticConentUrl())` |
-
-### "+Add" Link
-
-| Property | Value |
-|----------|-------|
-| Cursor | pointer |
-| Underline | hover |
-| Text | `'+Add'` |
-
-**CSS-only implementation notes:**
-- Outer wrapper: `display: flex; flex-direction: column; gap: 32px`.
-- Item wrapper: `display: flex; flex-direction: column; gap: 8px; width: 100%`.
-- Item header row: `display: flex; justify-content: space-between; align-items: center`.
-- Delete button: `float: right` (or use flexbox `justify-content: space-between` on the header row instead).
-- Delete icon: `width: 20px; height: 20px` SVG image of a trash/delete icon.
-- Divider: `border-top: 1px solid var(--divider-color); margin: 8px 0`.
-- "+Add" link: `cursor: pointer; text-decoration: underline; color: var(--app-primary-color)`.
-
-## Edge Cases & Special Logic
-
-- If `items` is empty, render only the "+Add" link (if `onAdd` is provided).
-- If neither `onDelete` nor `onAdd` is provided, the list is read-only (no interactive elements).
-- The trash icon is loaded dynamically via `Utils.getImageSrc` — if this utility is unavailable, fall back to a standard `🗑` character or an SVG trash icon.
-- The delete button must use `type='button'` to prevent form submission.
-
-## Dependencies
-
-- `Utils` from `../../helpers/utils` — for `getImageSrc` and `getSDKStaticConentUrl` (used only for the trash icon)
-- No Pega SDK `getPConnect` imports required
-
-## Design System Mapping
-
-**UI control type:** Repeating list of named groups with optional delete and add actions.
-
-Listed design systems are examples only.
-
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | Flex column layout with `<hr>` divider and `<button>` delete |
-| MUI | `<Grid container>` items with `<Divider>` and `<Link>` for "+Add" |
-| Ant Design | `<List>` items with `<Divider>` and `<Button type='link'>` for "+Add" |
-| Chakra UI | `<VStack>` with `<Divider>` and `<Button variant='link'>` |
-| Shadcn/ui | `<div>` flex column with `<Separator>` and a link button |
-
-When implementing in a specific design system, map the following:
-- Delete button → icon button or `danger` variant button placed at the item top-right
-- Divider between items → `<Divider>` / `<hr>` (only when `onAdd` is present)
-- "+Add" link → a text link / `Button variant='link'` that calls `onAdd`
-- Trash icon → design system's delete icon or an SVG

package/templates/react-sdk-reference/.cursor/rules/skills/design-system-extension-skills/FieldValueList.mdrules

@@ -1,120 +0,0 @@
----
-description: DSE component skill: FieldValueList
-alwaysApply: false
----
-
-# Skill: FieldValueList
-
-Single field-value pair display component. Renders a label and value in either an inline (side-by-side) or stacked layout. Also used as a display mode renderer by field components (e.g., `TextInput`, `Dropdown`, etc.).
-
-> **Prerequisite skill:** [`design-system-extension.md`](../design-system-extension.md) — covers architecture, props interface, styling patterns, and registration patterns common to ALL DSE components.
-
----
-
-## Component Purpose
-
-Renders a single name/value pair in a compact read-only layout. Supports two layout variants:
-- **Inline:** Label and value are side by side (label 4/12 cols, value 8/12 cols).
-- **Stacked:** Label is on top, value is larger below (both 12/12 cols).
-
-When no name is provided, only the value is rendered at full width. Used directly as a display widget and delegated to by field components for their `DISPLAY_ONLY` and `STACKED_LARGE_VAL` display modes.
-
-## Pega Metadata
-
-- **Pega Name:** `FieldValueList`
-- **Registration key:** `FieldValueList` (in `component-map.ts`)
-- **Does NOT use `getPConnect`** — receives all data as direct props
-
-## Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `name` | `string` | No | Field label. If omitted, only the value is rendered |
-| `value` | `any` | Yes | Field value to display |
-| `variant` | `string` | No | Layout: `'inline'` (default) or `'stacked'` |
-| `isHtml` | `boolean` | No | If `true`, render value as raw HTML (default `false`) |
-
-## Behavioral Contract
-
-1. **Empty value fallback:** If `value` is `undefined` or an empty string (`''`), display `'---'` instead.
-2. **No-name case:** If `name` is not provided, render only the value at full width (12 columns) regardless of `variant`.
-3. **Inline variant** (default — `variant !== 'stacked'`):
-   - Label column: 4 of 12 columns.
-   - Value column: 8 of 12 columns (or 12 if no name).
-   - Label: secondary text color, `body2` typography, `fontWeight: 400`.
-   - Value: primary text color, `body2` typography.
-4. **Stacked variant** (`variant === 'stacked'`):
-   - Label column: 12 of 12, `paddingBottom: 0` (label sits tight above value).
-   - Value column: 12 of 12, `paddingTop: 0` (value sits tight below label).
-   - Label: secondary text color, `body2` typography, `fontWeight: 400`.
-   - Value: primary text color, **`h6` typography** (larger / more prominent than inline).
-5. **HTML rendering:** If `isHtml` is `true`, wrap value in a `<div dangerouslySetInnerHTML={{ __html: formattedValue }}>`. The formatted value (with `'---'` fallback) is passed to `__html`.
-6. **Layout wrapper:** Render everything inside a container row with space-between justification and consistent spacing.
-
-## Visual Specifications
-
-Derived from `FieldValueList.tsx` makeStyles:
-
-### Label
-
-| Property | Value |
-|----------|-------|
-| Font weight | 400 |
-| Color | `theme.palette.text.secondary` (muted/secondary text) |
-| Typography | `body2` (≈ 0.875rem / 14px) |
-
-### Value
-
-| Property | Value |
-|----------|-------|
-| Color | `theme.palette.text.primary` (default text) |
-| Typography (inline) | `body2` (≈ 0.875rem / 14px) |
-| Typography (stacked) | `h6` (≈ 1.25rem / 20px, weight 500) |
-
-### Padding Adjustments (stacked only)
-
-| Property | Value |
-|----------|-------|
-| Label bottom padding | `0 !important` |
-| Value top padding | `0 !important` |
-
-**CSS-only implementation notes:**
-- Root row: `display: flex; justify-content: space-between; align-items: baseline; gap: 1rem`.
-- **Inline label:** `flex: 0 0 33%; font-weight: 400; font-size: 0.875rem; color: var(--text-secondary)`.
-- **Inline value:** `flex: 1; font-size: 0.875rem; color: var(--text-primary)`.
-- **Stacked:** `display: flex; flex-direction: column; gap: 0`.
-- **Stacked label:** `font-weight: 400; font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0`.
-- **Stacked value:** `font-size: 1.25rem; font-weight: 500; color: var(--text-primary); margin-top: 0`.
-
-## Edge Cases & Special Logic
-
-- `value` can be any type (string, number, boolean, React element). Render it as-is unless it's empty/undefined.
-- When `isHtml` is `true`, set the raw HTML from the formatted value — do NOT sanitize (the caller is responsible). Ensure value is a string before passing to `dangerouslySetInnerHTML`.
-- When `variant` is `'stacked'` and `name` is absent, render value at 12 cols with `h6` typography.
-- When `variant` is `'inline'` and `name` is absent, render value at 12 cols with `body2` typography.
-
-## Dependencies
-
-- No Pega SDK imports required (no `getPConnect`)
-- No helper utilities required
-
-## Design System Mapping
-
-**UI control type:** Read-only field label/value display pair.
-
-Listed design systems are examples only.
-
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<div class='field-value-inline'>` or `<div class='field-value-stacked'>` with CSS |
-| MUI | `<Grid container>` with `<Typography>` for label and value |
-| Ant Design | `<Descriptions>` item, or `<Typography.Text type='secondary'>` + `<Typography.Text>` |
-| Chakra UI | `<Stack direction='row'>` (inline) or `<Stack spacing={0}>` (stacked) |
-| Shadcn/ui | Custom label/value pair with Tailwind flex utilities |
-
-When implementing in a specific design system, map the following:
-- Label → secondary/muted text style
-- Value inline → same size as label
-- Value stacked → larger typography (h6 equivalent)
-- Empty value → always display `'---'` (never show blank)
-- `isHtml={true}` → design system's `dangerouslySetInnerHTML` or `innerHTML` equivalent