@pega/sdk 0.0.4 → 0.0.6

package/templates/react-sdk-reference/.ai-common/skills/design-system-extension-skills/FieldGroup.md

@@ -0,0 +1,153 @@
+# 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, input contracts, 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 the project's component map)
+- **Does NOT use `getPConnect`** — receives children via framework's content projection mechanism
+
+## Component Inputs
+
+The component accepts the following inputs. Define the input contract using the project's framework conventions.
+
+| Name           | Type               | Required | Description                                                             |
+| -------------- | ------------------ | -------- | ----------------------------------------------------------------------- |
+| `children`     | renderable content | 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         |
+
+## Implementation Structure
+
+### Module Setup
+
+The component accepts children via the framework's content projection mechanism. It maintains local state for the collapsed/expanded toggle. It does NOT import any Pega SDK modules.
+
+The component is named `FieldGroup` and accepts the inputs listed in the table above. Define the input contract and export the component following the project's framework conventions.
+
+### Component Logic
+
+The component receives `children`, `name`, `collapsible` (defaults to `false`), and `instructions` as inputs. It maintains a `collapsed` boolean state initialized to `false` (expanded). The render tree is:
+
+1. **Outer container** — a Grid container with `spacing={4}` and `justifyContent: 'space-between'`.
+2. **Inner full-width wrapper** — a single Grid item at full width containing all content.
+3. **Header section** (conditional — only if `name` is provided):
+   - Wrapped in a div with margin/padding styling (top/bottom padding of 1 spacing unit, top margin of 1 spacing unit).
+   - **Non-collapsible** (`collapsible === false`): render `<b>{name}</b>` as static bold text.
+   - **Collapsible** (`collapsible === true`): render a clickable `<span>` with `id="field-group-header"`, flex layout (`display: flex; align-items: center; gap: 5px`), and `cursor: pointer`. Inside the span:
+     - A directional arrow icon: **right-pointing arrow** when `collapsed === true`, **down-pointing arrow** when `collapsed === false`.
+     - Bold name text: `<b>{name}</b>`.
+     - Clicking the span toggles `collapsed` state.
+4. **Instructions section** (conditional — only if `instructions` is provided AND is not the literal string `'none'`):
+   - Render a div with class `instruction-text` (padding: `5px 0`) using the framework's trusted HTML injection mechanism.
+5. **Children section** (conditional — only if `collapsed === false`):
+   - Render children inside a full-width container div (`width: 100%`) wrapped in a Grid container.
+
+## 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 using the framework's trusted HTML injection mechanism.
+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 the component's companion styles:
+
+### Outer Container
+
+| Property | Value            |
+| -------- | ---------------- |
+| Spacing  | 4 units (≈ 32px) |
+
+### Component Root Margins
+
+| Property      | Value                  |
+| ------------- | ---------------------- |
+| Margin right  | 1 spacing unit (≈ 8px) |
+| Margin left   | 1 spacing unit         |
+| Margin top    | 1 spacing unit         |
+| Margin bottom | 1 spacing unit         |
+
+### Field Margin (name row)
+
+| Property       | Value          |
+| -------------- | -------------- |
+| Padding top    | 1 spacing unit |
+| Padding bottom | 1 spacing unit |
+| Margin top     | 1 spacing unit |
+
+### 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: use a right-pointing arrow icon (collapsed) and a down-pointing arrow icon (expanded) from the chosen design system's icon set, or use Unicode characters (`▶`/`▼` or `›`/`⌄`)
+
+## Design System Mapping
+
+**UI control type:** Collapsible section container with label, instructions, and children.
+
+When implementing in a specific design system, map the following:
+
+- **Collapse toggle** → use the DS's collapse/accordion component if available, or implement manually with local state toggling visibility of the children section
+- **Arrow direction icon** → use the DS's chevron/arrow icon that points right when collapsed and down when expanded
+- **`instructions` HTML** → render as raw/trusted HTML content using the framework's mechanism for injecting HTML strings
+- **Full-width children** → ensure the children container spans the full group width
+- **Header click** → when `collapsible` is `true`, the entire header row (icon + name) is clickable and toggles the collapsed state

package/templates/react-sdk-reference/.ai-common/skills/design-system-extension-skills/FieldGroupList.md

@@ -0,0 +1,136 @@
+# 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, input contracts, 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 the project's component map)
+- **Does NOT use `getPConnect`** — receives all data as direct inputs
+
+## Component Inputs
+
+The component accepts the following inputs. Define the input contract using the project's framework conventions.
+
+| Name       | Type                                                                | Required | Description                                                                                               |
+| ---------- | ------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------- |
+| `items`    | `Array<{ name: string; id: string; children: renderable content }>` | 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                |
+
+## Implementation Structure
+
+### Module Setup
+
+The component uses the project's utility helper to resolve the trash icon path. It does NOT import any Pega SDK modules.
+
+The component is named `FieldGroupList` and accepts the inputs listed in the table above. Define the input contract and export the component following the project's framework conventions.
+
+### Component Logic
+
+The component receives `items`, `onDelete`, and `onAdd` as inputs. At the top of the logic, resolve the trash icon source: call `Utils.getImageSrc('trash', Utils.getSDKStaticConentUrl())` and store the result.
+
+The render tree is:
+
+1. **Outer container** — a grid container with spacing of 4 units (≈32px) and `justifyContent: 'space-between'`.
+2. **Inner full-width wrapper** — a single grid cell at full width.
+3. **Inner grid** — a grid container with spacing of 1 unit (≈8px), containing the iterated items.
+4. **Item iteration** — for each item in `items`, render a full-width grid cell keyed by `item.name`:
+   - Render `<b>{item.name}</b>` as the item header.
+   - **Delete button** (conditional — only if `onDelete` is provided):
+     - Floated right (`float: right`).
+     - `type="button"`, `id` set to `"delete-row-{item.id}"`, `aria-label="Delete Row"`.
+     - Class: `psdk-utility-button`.
+     - On click: call `onDelete(item.id)`.
+     - Contains an `<img>` with class `psdk-utility-card-action-svg-icon` and `src` set to the resolved trash icon path.
+   - Render `{item.children}` (the field group content).
+   - Render a `<br />` for spacing.
+   - **Divider** (conditional — only if `onAdd` is provided): render a horizontal divider element followed by another `<br />`.
+5. **Add link** (conditional — only if `onAdd` is provided):
+   - After all items, render a clickable link with text `"+Add"`, `cursor: pointer`, underline on hover, and click handler wired to `onAdd`.
+
+## Behavioral Contract
+
+1. Render a grid container with spacing of 4 units (≈32px) and `justifyContent='space-between'` as the outer wrapper.
+2. Inside, render a full-width inner grid with spacing of 1 unit (≈8px).
+3. For **each item** in `items`:
+   - Render a full-width grid cell 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 a horizontal divider, then `<br />`.
+4. After all items, if `onAdd` is provided, render a clickable link element with text `'+Add'`, `cursor: pointer`, and click handler calling `onAdd`.
+
+## Visual Specifications
+
+Derived from the component source:
+
+### 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
+
+- The project's `Utils` helper — 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.
+
+When implementing in a specific design system, map the following:
+
+- **Delete button** → use the DS's icon button or danger-variant button placed at the item top-right. Use a trash/delete icon from the DS's icon set.
+- **Divider between items** → use the DS's horizontal divider/separator component (only when `onAdd` is present)
+- **"+Add" link** → use the DS's link button or text-variant button that calls `onAdd`
+- **Trash icon** → use the DS's delete/trash icon, or fall back to the SDK's `Utils.getImageSrc('trash', ...)` path

package/templates/react-sdk-reference/.ai-common/skills/design-system-extension-skills/FieldValueList.md

@@ -0,0 +1,140 @@
+# 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, input contracts, 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 the project's component map)
+- **Does NOT use `getPConnect`** — receives all data as direct inputs
+
+## Component Inputs
+
+The component accepts the following inputs. Define the input contract using the project's framework conventions.
+
+| Name      | 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`) |
+
+## Implementation Structure
+
+### Module Setup
+
+The component does NOT import any Pega SDK modules — all data arrives via direct inputs. It uses a grid layout and text elements from the chosen design system.
+
+The component is named `FieldValueList` and accepts the inputs listed in the table above. Define the input contract and export the component following the project's framework conventions.
+
+### Component Logic
+
+The component receives `name`, `value`, `variant` (defaults to `'inline'`), and `isHtml` (defaults to `false`) as inputs, then follows this rendering logic:
+
+1. **Empty value fallback** — if `value` is `undefined` or an empty string (`''`), substitute with the placeholder string `'---'`.
+
+2. **No-name path** — if `name` is not provided (falsy), render only the value at full width (12 columns):
+   - Use heading-6 text (≈1.25rem, weight 500) if `variant === 'stacked'`, otherwise use body-small text (≈0.875rem).
+   - If `isHtml` is true, render value as raw HTML.
+   - Return early (do not render a label).
+
+3. **Stacked variant path** — if `variant === 'stacked'`, render a column-direction layout:
+   - **Label row:** full-width (12 columns), with `paddingBottom: 0` to sit tight above the value. Text style: body-small (≈0.875rem), secondary text color, `fontWeight: 400`.
+   - **Value row:** full-width (12 columns), with `paddingTop: 0` to sit tight below the label. Text style: heading-6 (≈1.25rem, weight 500, larger/more prominent). If `isHtml`, render as raw HTML.
+
+4. **Inline variant path** (default) — render a side-by-side row layout:
+   - **Label cell:** occupies 4 of 12 columns. Text style: body-small (≈0.875rem), secondary text color, `fontWeight: 400`. Contains `name`.
+   - **Value cell:** occupies 8 of 12 columns (or 12 if no name). Text style: body-small (≈0.875rem), primary text color. If `isHtml`, render as raw HTML.
+
+5. **Layout wrapper** — all variants render inside a container row (Grid container) with `spacing={4}` and `justifyContent: 'space-between'`.
+
+## 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, body-small text (≈0.875rem), `fontWeight: 400`.
+   - Value: primary text color, body-small text (≈0.875rem).
+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, body-small text (≈0.875rem), `fontWeight: 400`.
+   - Value: primary text color, **heading-6 text** (≈1.25rem, weight 500 — larger / more prominent than inline).
+5. **HTML rendering:** If `isHtml` is `true`, render the formatted value as raw HTML content using the framework's mechanism for injecting HTML strings. The formatted value (with `'---'` fallback) is passed as the HTML content.
+6. **Layout wrapper:** Render everything inside a container row with space-between justification and consistent spacing.
+
+## Visual Specifications
+
+Derived from the component's companion styles:
+
+### Label
+
+| Property    | Value                          |
+| ----------- | ------------------------------ |
+| Font weight | 400                            |
+| Color       | secondary text color (muted)   |
+| Text size   | body-small (≈ 0.875rem / 14px) |
+
+### Value
+
+| Property            | Value                                    |
+| ------------------- | ---------------------------------------- |
+| Color               | primary text color (default)             |
+| Text size (inline)  | body-small (≈ 0.875rem / 14px)           |
+| Text size (stacked) | heading-6 (≈ 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, rendered element). Render it as-is unless it's empty/undefined.
+- When `isHtml` is `true`, render the raw HTML from the formatted value using the framework's HTML injection mechanism — do NOT sanitize (the caller is responsible). Ensure value is a string before injecting.
+- When `variant` is `'stacked'` and `name` is absent, render value at 12 cols with heading-6 text.
+- When `variant` is `'inline'` and `name` is absent, render value at 12 cols with body-small text.
+
+## 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.
+
+When implementing in a specific design system, map the following:
+
+- **Label** → secondary/muted text style (body-small size)
+- **Value inline** → same size as label (body-small), primary text color
+- **Value stacked** → larger text (heading-6 equivalent, ≈1.25rem, weight 500)
+- **Empty value** → always display `'---'` (never show blank)
+- **`isHtml` = true** → use the framework's mechanism for rendering raw HTML content
+- **Grid layout** → use the DS's grid system with 4/8 column split (inline) or 12/12 stacked columns

package/templates/react-sdk-reference/{.claude → .ai-common}/skills/design-system-extension-skills/Operator.md

@@ -2,7 +2,7 @@
 
 Read-only display of a Pega case operator (creator or updater). Shows the operator's name and relative timestamp. On click, fetches full operator details from Pega and displays them in a popover.
 
-> **Prerequisite skill:** [`design-system-extension.md`](../design-system-extension.md) — covers architecture, props interface, styling patterns, and registration patterns common to ALL DSE components.
+> **Prerequisite skill:** [`design-system-extension.md`](../design-system-extension.md) — covers architecture, input contracts, styling patterns, and registration patterns common to ALL DSE components.
 
 ---
 
@@ -13,14 +13,14 @@ Renders a clickable read-only field displaying a case operator's name and the re
 ## Pega Metadata
 
 - **Pega Name:** `Operator`
-- **Registration key:** `Operator` (in `component-map.ts`)
-- **Extends `PConnProps`** — but does NOT call `getPConnect()`. Props are all passed directly.
+- **Registration key:** `Operator` (in the project's component map)
+- **Extends the base component interface** — but does NOT call `getPConnect()`. All rendering data is passed directly as inputs.
 
-## Props
+## Component Inputs
 
-The component interface extends `PConnProps` but all rendering data is passed as explicit props:
+The component extends the project's base component interface but all rendering data is passed as explicit inputs. Define the input contract using the project's framework conventions.
 
-| Prop             | Type                                   | Required | Description                                                                                                                        |
+| Name             | Type                                   | Required | Description                                                                                                                        |
 | ---------------- | -------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
 | `label`          | `string`                               | Yes      | The field label used to identify which operator to display. Must be `'create operator'` or `'update operator'` (case-insensitive). |
 | `displayLabel`   | `any`                                  | No       | Alternative label (used if `label` doesn't match). Also compared case-insensitively.                                               |
@@ -31,6 +31,60 @@ The component interface extends `PConnProps` but all rendering data is passed as
 | `updateLabel`    | `string`                               | Yes      | Display label for the update operator field                                                                                        |
 | `updateOperator` | `{ userName: string; userId: string }` | Yes      | Updater's name and ID                                                                                                              |
 
+## Implementation Structure
+
+### Module Setup
+
+The component imports:
+
+- A local state mechanism for popover visibility and content
+- The project's `Utils` helper for relative date/time formatting
+- The project's base component interface (the component extends it, though `getPConnect()` is not called)
+
+The component is named `Operator` and accepts the inputs listed in the table above. Define the input contract and export the component following the project's framework conventions.
+
+### State
+
+Maintain two state variables:
+
+- `popoverAnchorEl` (initially `null`) — the DOM element the popover is anchored to; setting it opens the popover.
+- `popoverFields` (initially `[]`) — array of field objects to display inside the popover.
+
+### Operator Selection Logic
+
+At the top of the component logic, determine which operator to display:
+
+1. Coalesce `label` and `displayLabel` into a single string, then lowercase it.
+2. If the lowercased value equals `'create operator'`: use `createLabel`, `createOperator.userName`, `createOperator.userId`, and `createDateTime`.
+3. If the lowercased value equals `'update operator'`: use `updateLabel`, `updateOperator.userName`, `updateOperator.userId`, and `updateDateTime`.
+4. Otherwise: set label and name to `'---'`, id and time to empty strings.
+
+Store these as local variables: `caseOpLabel`, `caseOpName`, `caseOpId`, `caseTime`.
+
+### Click Handler (`showOperatorDetails`)
+
+Define an event handler that:
+
+1. Early-returns if `caseOpId` is empty (no operator to fetch).
+2. Calls `PCore.getUserApi().getOperatorDetails(caseOpId)` — an async API that returns operator profile data.
+3. Uses `PCore.getLocaleUtils().getLocaleValue(key, 'Operator')` to localize field label strings.
+4. On resolution, builds a `popoverFields` array with these entries (each with `label`, `value`, and optional `href`):
+   - Position (`pyPosition`) — no href
+   - Organization (`pyOrganization`) — no href
+   - Reports to (`pyReportToUserName`) — no href
+   - Telephone (`pyTelephone`) — `href: 'tel:{value}'`
+   - Email address (`pyEmailAddress`) — `href: 'mailto:{value}'`
+   - All values fall back to `'---'` if the property is missing/falsy.
+5. Sets `popoverAnchorEl` to `event.currentTarget` (opens the popover).
+
+### Render Tree
+
+1. **Read-only text display** — no underline/border, `readOnly: true`, `cursor: pointer`. Shows `caseOpName` as value and `caseOpLabel` as the field label. Wires click handler to `showOperatorDetails`.
+2. **Relative time** — below the text display, render the output of `Utils.generateDateTime(caseTime, 'DateTime-Since')` as helper/caption text.
+3. **Popover** — anchored to the clicked element, closed by clearing the anchor reference:
+   - Header: operator name (`caseOpName`) in heading-6 text (≈1.25rem, weight 500).
+   - Body: iterate `popoverFields`, rendering each as a row with a caption-style label (6 columns) and a subtitle-style value (6 columns). For fields with `href`, wrap the value in an `<a>` tag with the href.
+
 ## Behavioral Contract
 
 ### 1. Operator Selection
@@ -51,18 +105,18 @@ Determine which operator to display based on `label.toLowerCase()` or `displayLa
 
 ### 2. Main Display
 
-Render a read-only TextField (standard variant, no underline, pointer cursor) with:
+Render a read-only text display element (no underline/border, pointer cursor) with:
 
 - `defaultValue={caseOpName}`
 - `label={caseOpLabel}`
-- `onClick={showOperatorDetails}`
-- `readOnly: true`, `disableUnderline: true`, `cursor: 'pointer'`
+- Click handler wired to `showOperatorDetails`
+- `readOnly: true`, no underline/border, `cursor: 'pointer'`
 
-Below the TextField, render the relative time: `Utils.generateDateTime(caseTime, 'DateTime-Since')`.
+Below the text display, render the relative time: `Utils.generateDateTime(caseTime, 'DateTime-Since')`.
 
 ### 3. Popover on Click (`showOperatorDetails`)
 
-When the TextField is clicked:
+When the text display is clicked:
 
 1. Call `PCore.getUserApi().getOperatorDetails(caseOpId)` — returns a Promise.
 2. Use `PCore.getLocaleUtils().getLocaleValue(key, 'Operator')` to localize field labels.
@@ -83,30 +137,30 @@ The popover renders when `popoverAnchorEl` is set:
 - Anchor origin: `{ vertical: 'bottom', horizontal: 'center' }`
 - Transform origin: `{ vertical: 'top', horizontal: 'center' }`
 - Max width: `45ch`
-- Content: A `Grid container` with:
-  - `Typography h6` showing `caseOpName` at full width.
-  - One row per field: 6-col `Typography caption` (label) + 6-col `Typography subtitle2` (value).
+- Content: A grid layout with:
+  - Heading-6 text (≈1.25rem, weight 500) showing `caseOpName` at full width.
+  - One row per field: 6-col caption text (label) + 6-col subtitle text (value).
 
-Closing the popover sets `popoverAnchorEl` to `null`.
+Closing the popover clears the anchor reference.
 
 ## Visual Specifications
 
-Derived from `Operator.tsx` makeStyles:
+Derived from the component's companion styles:
 
 ### Root Container
 
-| Property | Value                      |
-| -------- | -------------------------- |
-| Padding  | `theme.spacing(1)` (≈ 8px) |
-| Margin   | `theme.spacing(1)`         |
+| Property | Value                  |
+| -------- | ---------------------- |
+| Padding  | 1 spacing unit (≈ 8px) |
+| Margin   | 1 spacing unit         |
 
 ### Popover Container
 
-| Property  | Value              |
-| --------- | ------------------ |
-| Padding   | `theme.spacing(1)` |
-| Margin    | `theme.spacing(1)` |
-| Max width | 45ch               |
+| Property  | Value          |
+| --------- | -------------- |
+| Padding   | 1 spacing unit |
+| Margin    | 1 spacing unit |
+| Max width | 45ch           |
 
 **CSS-only implementation notes:**
 
@@ -128,7 +182,7 @@ Derived from `Operator.tsx` makeStyles:
 
 ## Dependencies
 
-- `Utils` from `../../helpers/utils` — `Utils.generateDateTime` for relative time display
+- The project's `Utils` helper — `Utils.generateDateTime` for relative time display
 - `PCore.getUserApi().getOperatorDetails(userId)` — global Pega runtime API for operator details
 - `PCore.getLocaleUtils().getLocaleValue(key, 'Operator')` — for localized field labels in the popover
 
@@ -136,20 +190,10 @@ Derived from `Operator.tsx` makeStyles:
 
 **UI control type:** Clickable read-only field with async popover detail panel.
 
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                           |
-| ------------------ | --------------------------------------------------------------- |
-| Default (CSS only) | `<div>` with click handler, custom CSS popover/tooltip panel    |
-| MUI                | Read-only `<TextField>` + `<Popover>` with `<Grid>` detail rows |
-| Ant Design         | `<Input readOnly>` + `<Popover>` with `<Descriptions>`          |
-| Chakra UI          | `<Input isReadOnly>` + `<Popover>` with custom content          |
-| Shadcn/ui          | `<Input readOnly>` + `<Popover>` + `<PopoverContent>`           |
-
 When implementing in a specific design system, map the following:
 
-- `onClick` on read-only input → trigger async fetch + open popover
-- `PCore.getUserApi().getOperatorDetails()` → call this before showing the popover
-- Popover anchor → position relative to the clicked element
-- `Utils.generateDateTime(caseTime, 'DateTime-Since')` → relative time display (e.g., "2 hours ago")
-- Telephone/email in popover → clickable `<a href='tel:...'>` and `<a href='mailto:...'>` links
+- **Read-only clickable field** → use the DS's read-only input/text display with pointer cursor and click handler
+- **Popover/tooltip** → use the DS's popover component anchored to the clicked element, with close-on-outside-click behavior
+- **Popover content** → a grid layout with heading (operator name) and label/value rows
+- **Relative time** → render `Utils.generateDateTime(caseTime, 'DateTime-Since')` as secondary/muted caption text below the operator name
+- **Telephone/email** → clickable `<a href='tel:...'>` and `<a href='mailto:...'>` links in the popover