@pega/sdk 0.0.4 → 0.0.5

package/templates/react-sdk-reference/.github/skills/component-contracts.md

@@ -1,140 +0,0 @@
-# Skill: Component Contracts Reference
-
-Quick-reference lookup of all registered component names and their prop contracts. Use this when you need to know what props a specific component receives from the Pega platform.
-
----
-
-## Field Components
-
-All extend `PConnFieldProps` from `@pega/sdk-react`.
-
-| Registry Name     | File                                | Additional Props                   |
-| ----------------- | ----------------------------------- | ---------------------------------- |
-| `TextInput`       | `field/TextInput/TextInput.tsx`     | `fieldMetadata?: any`              |
-| `TextArea`        | `field/TextArea/`                   | `fieldMetadata?: any`              |
-| `Dropdown`        | `field/Dropdown/`                   | `datasource?, listType?`           |
-| `Checkbox`        | `field/Checkbox/`                   | `value: boolean` (not string)      |
-| `RadioButtons`    | `field/RadioButtons/`               | `datasource?, listType?`           |
-| `Date`            | `field/Date/`                       | —                                  |
-| `DateTime`        | `field/DateTime/`                   | —                                  |
-| `Time`            | `field/Time/`                       | —                                  |
-| `Currency`        | `field/Currency/`                   | `currencyISOCode?, formatterType?` |
-| `Decimal`         | `field/Decimal/`                    | `decimalPrecision?`                |
-| `Integer`         | `field/Integer/`                    | —                                  |
-| `Percentage`      | `field/Percentage/`                 | —                                  |
-| `Email`           | `field/Email/Email.tsx`             | —                                  |
-| `Phone`           | `field/Phone/Phone.tsx`             | `datasource?` (country codes)      |
-| `URL`             | `field/URL/`                        | —                                  |
-| `AutoComplete`    | `field/AutoComplete/`               | `datasource?, listType?, columns?` |
-| `Multiselect`     | `field/Multiselect/Multiselect.tsx` | `datasource?, listType?`           |
-| `RichText`        | `field/RichText/`                   | —                                  |
-| `ScalarList`      | `field/ScalarList/`                 | `datasource?`                      |
-| `SelectableCard`  | `field/SelectableCard/`             | `datasource?`                      |
-| `Group`           | `field/Group/`                      | —                                  |
-| `Location`        | `field/Location/`                   | —                                  |
-| `ObjectReference` | `field/ObjectReference/`            | `value: object`                    |
-| `SemanticLink`    | `field/SemanticLink/`               | `text?, displayAs?`                |
-| `UserReference`   | `field/UserReference/`              | `showAsFormattedText?`             |
-| `CancelAlert`     | `field/CancelAlert/`                | —                                  |
-| `TextContent`     | `field/TextContent/`                | `content?`                         |
-
----
-
-## Template Components
-
-All extend `PConnProps`. Most receive React `children` or use `getPConnect().getChildren()`.
-
-| Registry Name        | File                                   | Key Props                                |
-| -------------------- | -------------------------------------- | ---------------------------------------- |
-| `OneColumn`          | `template/OneColumn/OneColumn.tsx`     | `children`                               |
-| `OneColumnPage`      | `template/OneColumn/OneColumnPage.tsx` | `children`                               |
-| `OneColumnTab`       | `template/OneColumn/OneColumnTab.tsx`  | `children`                               |
-| `TwoColumn`          | `template/TwoColumn/TwoColumn.tsx`     | `children, templateCol?`                 |
-| `TwoColumnPage`      | `template/TwoColumn/TwoColumnPage.tsx` | `children`                               |
-| `TwoColumnTab`       | `template/TwoColumn/TwoColumnTab.tsx`  | `children`                               |
-| `NarrowWide`         | `template/NarrowWide/NarrowWide.tsx`   | `children, templateCol?`                 |
-| `WideNarrow`         | `template/WideNarrow/WideNarrow.tsx`   | `children, templateCol?`                 |
-| `Details`            | `template/Details/Details.tsx`         | `children`                               |
-| `DefaultForm`        | `template/DefaultForm/`                | PConnect children                        |
-| `DefaultPage`        | `template/DefaultPage/`                | PConnect children                        |
-| `CaseView`           | `template/CaseView/`                   | PConnect children, `header?, subheader?` |
-| `CaseSummary`        | `template/CaseSummary/`                | PConnect children                        |
-| `Confirmation`       | `template/Confirmation/`               | `label?`                                 |
-| `SimpleTable`        | `template/SimpleTable/SimpleTable.tsx` | `datasource?, fields?, label?`           |
-| `ListView`           | `template/ListView/`                   | `datasource?, fields?`                   |
-| `SubTabs`            | `template/SubTabs/`                    | PConnect children                        |
-| `AppShell`           | `template/AppShell/AppShell.tsx`       | PConnect children                        |
-| `DataReference`      | `template/DataReference/`              | PConnect children                        |
-| `ListPage`           | `template/ListPage/ListPage.tsx`       | PConnect children                        |
-| `InlineDashboard`    | `template/InlineDashboard/`            | PConnect children                        |
-| `FieldGroupTemplate` | `template/FieldGroupTemplate/`         | PConnect children                        |
-
----
-
-## Widget Components
-
-All extend `PConnProps`. Fetch their own data.
-
-| Registry Name     | File                                 | Key Props                            |
-| ----------------- | ------------------------------------ | ------------------------------------ |
-| `Todo`            | `widget/ToDo/`                       | `datasource?, headerText?, context?` |
-| `Attachment`      | `widget/Attachment/`                 | `value, allowMultiple?, extensions?` |
-| `CaseHistory`     | `widget/CaseHistory/`                | `datasource?`                        |
-| `FileUtility`     | `widget/FileUtility/FileUtility.tsx` | `datasource?`                        |
-| `Followers`       | `widget/Followers/`                  | —                                    |
-| `AppAnnouncement` | `widget/AppAnnouncement/`            | `datasource?, headerText?`           |
-| `QuickCreate`     | `widget/QuickCreate/`                | —                                    |
-| `SummaryItem`     | `widget/SummaryItem/`                | `label?, value?, actions?`           |
-| `SummaryList`     | `widget/SummaryList/`                | `datasource?`                        |
-
----
-
-## Design System Extension Components
-
-| Registry Name       | File                                       | Key Props                               |
-| ------------------- | ------------------------------------------ | --------------------------------------- |
-| `FieldValueList`    | `designSystemExtension/FieldValueList/`    | `name?, value?, variant?`               |
-| `AlertBanner`       | `designSystemExtension/AlertBanner/`       | `variant, heading?, messages, onClose?` |
-| `Banner`            | `designSystemExtension/Banner/`            | `variant?, text?`                       |
-| `CaseSummaryFields` | `designSystemExtension/CaseSummaryFields/` | PConnect-based                          |
-| `DetailsFields`     | `designSystemExtension/DetailsFields/`     | PConnect-based                          |
-| `FieldGroup`        | `designSystemExtension/FieldGroup/`        | PConnect-based                          |
-| `FieldGroupList`    | `designSystemExtension/FieldGroupList/`    | PConnect-based                          |
-| `Operator`          | `designSystemExtension/Operator/`          | `label?, name?, id?`                    |
-| `Pulse`             | `designSystemExtension/Pulse/`             | PConnect-based                          |
-| `RichTextEditor`    | `designSystemExtension/RichTextEditor/`    | extends `PConnFieldProps`               |
-| `WssQuickCreate`    | `designSystemExtension/WssQuickCreate/`    | —                                       |
-
----
-
-## Infrastructure (from `sdkComponents` — do NOT replace)
-
-| Registry Name         | Source            |
-| --------------------- | ----------------- |
-| `RootContainer`       | `@pega/sdk-react` |
-| `ViewContainer`       | `@pega/sdk-react` |
-| `FlowContainer`       | `@pega/sdk-react` |
-| `Reference`           | `@pega/sdk-react` |
-| `View`                | `@pega/sdk-react` |
-| `Region`              | `@pega/sdk-react` |
-| `CaseView` (infra)    | `@pega/sdk-react` |
-| `Assignment`          | `@pega/sdk-react` |
-| `AssignmentCard`      | `@pega/sdk-react` |
-| `ActionButtons`       | `@pega/sdk-react` |
-| `CaseSummary` (infra) | `@pega/sdk-react` |
-| `ErrorBoundary`       | `@pega/sdk-react` |
-| `MultiStep`           | `@pega/sdk-react` |
-
----
-
-## Infra (sample-local, replaceable but exercise caution)
-
-| Registry Name           | File                                           |
-| ----------------------- | ---------------------------------------------- |
-| `ActionButtons`         | `infra/ActionButtons/`                         |
-| `DeferLoad`             | `infra/DeferLoad/`                             |
-| `NavBar`                | `infra/NavBar/`                                |
-| `Stages`                | `infra/Stages/`                                |
-| `DashboardFilter`       | `infra/DashboardFilter/`                       |
-| `VerticalTabs`          | `infra/VerticalTabs/VerticalTabs.tsx`          |
-| `LeftAlignVerticalTabs` | `infra/VerticalTabs/LeftAlignVerticalTabs.tsx` |

package/templates/react-sdk-reference/.github/skills/design-system-extension-skills/Banner.md

@@ -1,152 +0,0 @@
-# Skill: Banner
-
-Promotional/informational banner with a full-width background image hero section and a two-column content layout below it.
-
-> **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 visually rich banner composed of two parts:
-
-1. **Hero section:** Full-width area with a background image, centered title and message text overlaid.
-2. **Content columns:** Two adjustable-width columns below the hero, rendered from the `a` and `b` slot props. Column widths are controlled by the `variant` prop.
-
-## Pega Metadata
-
-- **Pega Name:** `Banner`
-- **Registration key:** `Banner` (in `component-map.ts`)
-- **Does NOT use `getPConnect`** — receives all data as direct props
-
-## Props
-
-| Prop                     | Type        | Required | Description                                                        |
-| ------------------------ | ----------- | -------- | ------------------------------------------------------------------ |
-| `a`                      | `ReactNode` | Yes      | Content for the first (left/narrower) column                       |
-| `b`                      | `ReactNode` | Yes      | Content for the second (right/wider) column                        |
-| `banner`                 | `object`    | Yes      | Banner metadata (see sub-props below)                              |
-| `banner.title`           | `string`    | Yes      | Title text displayed in the hero section                           |
-| `banner.message`         | `string`    | Yes      | Descriptive message text in the hero section                       |
-| `banner.backgroundImage` | `string`    | Yes      | URL of the background image for the hero section                   |
-| `banner.variant`         | `any`       | No       | Unused internally (layout variant comes from top-level `variant`)  |
-| `banner.backgroundColor` | `any`       | No       | Unused internally                                                  |
-| `banner.tintImage`       | `any`       | No       | Unused internally                                                  |
-| `variant`                | `string`    | Yes      | Column layout: `'two-column'`, `'narrow-wide'`, or `'wide-narrow'` |
-
-## Behavioral Contract
-
-1. **Hero section:** Render a `<div>` with class `background-image-style` and the inline style `backgroundImage: url(${backgroundImage})`.
-2. Inside the hero, render an overlay `<div>` with classes `background-style content`.
-3. Inside the overlay, render `<h1 className='title'>{title}</h1>` and `<p className='message'>{message}</p>`.
-4. **Column layout:** Below the hero, render a 12-column grid container with two columns:
-   - Column `a`: sized according to the variant (left/first column).
-   - Column `b`: sized according to the variant (right/second column).
-5. **Variant column widths:**
-   - `'two-column'`: column A = 6/12, column B = 6/12 (equal split).
-   - `'narrow-wide'`: column A = 4/12, column B = 8/12.
-   - `'wide-narrow'`: column A = 8/12, column B = 4/12.
-6. **Column A styles:** `padding: 1rem; background-color: var(--app-form-bg-color); border-radius: 16px; height: fit-content`.
-7. **Column B styles:** `padding: 0rem 1rem` (no background).
-8. **Outer wrapper:** `<div style={{ marginBottom: '2rem' }}>`.
-
-## Layout Variants
-
-```
-two-column:   [A 50%]  [B 50%]
-narrow-wide:  [A 33%]  [B 67%]
-wide-narrow:  [A 67%]  [B 33%]
-```
-
-## Visual Specifications
-
-Derived from `Banner.css`:
-
-### Hero Section
-
-| Property            | Value                            |
-| ------------------- | -------------------------------- |
-| Margin left         | -16px (bleeds to container edge) |
-| Margin right        | -16px                            |
-| Height              | `calc(19rem)`                    |
-| Background size     | cover                            |
-| Background position | center center                    |
-
-### Hero Overlay
-
-| Property         | Value                      |
-| ---------------- | -------------------------- |
-| Background color | transparent                |
-| Color            | `var(--banner-text-color)` |
-| Width            | 100%                       |
-| Height           | 100%                       |
-| Text align       | center                     |
-| Display          | flex                       |
-| Flex direction   | column                     |
-| Justify content  | center                     |
-| Align items      | center                     |
-| Gap              | `calc(0.5rem)`             |
-
-### Hero Title
-
-| Property    | Value    |
-| ----------- | -------- |
-| Margin      | 0        |
-| Font size   | 1.728rem |
-| Font weight | 600      |
-
-### Hero Message
-
-| Property    | Value |
-| ----------- | ----- |
-| Margin      | 0     |
-| Font size   | 1rem  |
-| Font weight | 400   |
-
-### Content Grid
-
-| Property       | Value                  |
-| -------------- | ---------------------- |
-| Padding        | 1rem                   |
-| Column spacing | 1 spacing unit (≈ 8px) |
-
-**CSS-only implementation notes:**
-
-- Hero: `margin: 0 -16px; height: 19rem; background-size: cover; background-position: center; position: relative`.
-- Overlay: `position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.5rem; color: var(--banner-text-color); text-align: center`.
-- Content grid below hero: `display: grid; grid-template-columns: <a-cols>fr <b-cols>fr; gap: 8px; padding: 1rem`.
-- Column A: `padding: 1rem; background-color: var(--app-form-bg-color); border-radius: 16px; height: fit-content`.
-- Column B: `padding: 0 1rem`.
-- For responsive behavior, collapse to single column on small viewports.
-
-## Edge Cases & Special Logic
-
-- If `backgroundImage` is an empty string or undefined, the hero section renders without a background image (transparent/color background).
-- If `variant` is not one of the three known values, implement a safe default (e.g., `'two-column'`).
-- The `banner.backgroundColor`, `banner.variant`, and `banner.tintImage` props are received but not rendered in the reference implementation.
-
-## Dependencies
-
-- No Pega SDK imports required (no `getPConnect`)
-- No helper utilities required
-
-## Design System Mapping
-
-**UI control type:** Full-width banner hero with responsive two-column content area.
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                                     |
-| ------------------ | ------------------------------------------------------------------------- |
-| Default (CSS only) | CSS Grid for columns, CSS background for hero                             |
-| MUI                | `<Grid container size={12}>` with `<Grid size={{ xs: ... }}>` for columns |
-| Ant Design         | `<Row gutter={8}>` with `<Col span={...}>` for columns                    |
-| Chakra UI          | `<SimpleGrid columns={2}>` or `<Grid templateColumns='...'>`              |
-| Shadcn/ui          | CSS Grid with Tailwind column utilities                                   |
-
-When implementing in a specific design system, map the following:
-
-- `variant` column widths → grid column span values
-- Background image hero → `backgroundImage` inline style with `background-size: cover`
-- Column A (card-like) → design system's Card or `bg` prop with border-radius
-- Column B (plain) → plain container with horizontal padding only

package/templates/react-sdk-reference/.github/skills/design-system-extension-skills/CaseSummaryFields.md

@@ -1,159 +0,0 @@
-# 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/.github/skills/design-system-extension-skills/DetailsFields.md

@@ -1,148 +0,0 @@
-# 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 `'---'`