@pega/sdk 0.0.4 → 0.0.6

package/templates/react-sdk-reference/{.claude → .ai-common}/skills/template-skills/SimpleTable.md

@@ -12,11 +12,11 @@ Entry-point template for embedded table data in a form or detail view. Routes to
 
 ## Pega Metadata
 
-- **Registration keys:** `SimpleTable`, `SimpleTableManual`, `SimpleTableSelect`, `SimpleTableSelectReadonly` (all in `component-map.ts`)
+- **Registration keys:** `SimpleTable`, `SimpleTableManual`, `SimpleTableSelect`, `SimpleTableSelectReadonly` (all in the project's component map)
 - **Category:** Data display / Form template — embedded table
-- **Extends:** `PConnProps`
+- **Extends:** The project's base component interface
 
-## Props
+## Inputs
 
 | Prop                   | Type       | Required | Description                                                                               |
 | ---------------------- | ---------- | -------- | ----------------------------------------------------------------------------------------- |
@@ -29,22 +29,47 @@ Entry-point template for embedded table data in a form or detail view. Routes to
 | `readOnly`             | `boolean`  | No       | Alternative read-only flag                                                                |
 | `getPConnect`          | `function` | Yes      | PConnect getter                                                                           |
 
+## Implementation Structure
+
+### SimpleTable (router)
+
+**Module Setup:** The component depends on the project's component registry (to resolve `ListView`, `FieldGroupTemplate`, and `SimpleTableManual`) and the project's simple-table helper utilities (`buildMetaForListView` and `getContext`).
+
+**Main Component Logic** — steps in order:
+
+1. Resolve `ListView`, `FieldGroupTemplate`, and `SimpleTableManual` from the project's component registry; receive `getPConnect`, `multiRecordDisplayAs`, `allowTableEdit`, `fieldMetadata`, `displayMode`, and other relevant inputs.
+2. **Route to `fieldGroup`:** when `multiRecordDisplayAs === 'fieldGroup'`, render `FieldGroupTemplate` with all inputs plus `contextClass`.
+3. **Route to a read-only reference list:** when `fieldMetadata?.type === 'Page List'` and `fieldMetadata?.dataRetrievalType === 'refer'`, build `metaForListView` via `buildMetaForListView(...)` and render `ListView` with the list-view inputs plus `bInForm: true` and `displayMode`.
+4. **Route to the editable table:** otherwise, render `SimpleTableManual` with all inputs plus `contextClass`.
+
+### SimpleTableManual (editable table — ~600+ lines)
+
+Key structural outline:
+
+- `getReferenceList(pConn)` + `setReferenceList`
+- `buildElementsForTable()` — creates PConnect views per cell
+- `generateRowsData()` — for read-only/modal mode
+- `addRecord()` / `deleteRecord()` / `editRecord()` with modal support
+- Sort/filter/column menu (same pattern as ListView)
+- Render: Table with header sort + body rows + add/delete controls
+
+### SimpleTableSelect (selection wrapper)
+
+Retrieve `ListView` and `PromotedFilters` from the component registry. Build an `additionalTableConfig` incorporating `selectionMode` and `compositeKeys`. When promoted filters are configured, render `<PromotedFilters ... />`; otherwise render `<ListView {...listViewProps} />` directly.
+
+### SimpleTableSelectReadonly (link + modal)
+
+Renders a `SemanticLink` per selected item (comma-separated). When the list has more than 5 items, show a "(N Total)" link that opens a modal. The modal renders a `<Dialog>` wrapping a read-only `<SimpleTableManual readOnly ... />`.
+
 ## Behavioral Contract
 
 ### SimpleTable — Routing Logic
 
-```
-if multiRecordDisplayAs === 'fieldGroup':
-  → render FieldGroupTemplate
-else if fieldMetadata.dataRetrievalType === 'refer':
-  → render ListView (read-only, bInForm: true)
-else:
-  → render SimpleTableManual (editable table)
-```
+When `multiRecordDisplayAs === 'fieldGroup'`, render `FieldGroupTemplate`. Otherwise, when `fieldMetadata.dataRetrievalType === 'refer'`, render `ListView` (read-only, `bInForm: true`). Otherwise, render `SimpleTableManual` (the editable table).
 
 ### SimpleTableManual — Full Editable Table
 
-Full MUI table with add/delete rows, inline editing, sort, filter, and column customization (~600+ lines).
+Full editable table with add/delete rows, inline editing, sort, filter, and column customization (~600+ lines).
 
 Key behaviors:
 
@@ -68,7 +93,7 @@ Wraps `ListView` with additional selection configuration:
 
 1. Renders a link/chip showing the current selection count.
 2. On click: opens a `<Dialog>` containing a `<SimpleTableManual>` in read-only mode.
-3. Props: same as `SimpleTableManual` but all fields locked (no add/delete/edit).
+3. Inputs: same as `SimpleTableManual` but all fields locked (no add/delete/edit).
 
 ## Visual Specifications
 
@@ -109,23 +134,18 @@ Wraps `ListView` with additional selection configuration:
 
 - `FieldGroupTemplate` (for `multiRecordDisplayAs === 'fieldGroup'` routing)
 - `ListView` (for `dataRetrievalType === 'refer'` routing)
-- `buildView` from `../../helpers/field-group-utils` (for inline cell rendering in SimpleTableManual)
-- MUI: `<Table>`, `<Dialog>`, `<Popover>`, `<IconButton>`, `<Button>`, `<Checkbox>`
+- `buildView` from the project's field-group utility helpers (for inline cell rendering in SimpleTableManual)
+- The design system's table, dialog, popover, icon button, button, and checkbox components.
 
 ## Design System Mapping
 
 **UI control type:** Embedded data table with routing to field group, read-only list, or fully editable table.
 
-Listed design systems are examples only.
-
-| Sub-variant               | Default (CSS only)            | MUI                  |
-| ------------------------- | ----------------------------- | -------------------- |
-| SimpleTableManual         | `<table>` + custom controls   | MUI `<Table>`        |
-| SimpleTableSelect         | Custom table + radio/checkbox | `<ListView>` wrapper |
-| SimpleTableSelectReadonly | Link + `<dialog>`             | Chip + `<Dialog>`    |
-
-When implementing in a specific design system:
+When implementing in a specific design system, map the following:
 
+- **SimpleTableManual** → use the DS's table component with add/delete row controls and inline editing
+- **SimpleTableSelect** → use `ListView` with selection mode enabled, optionally with promoted filters
+- **SimpleTableSelectReadonly** → render selected values as chips/links that open a modal with full list view
 - Always check `multiRecordDisplayAs === 'fieldGroup'` first — this bypasses the table entirely
 - `SimpleTableManual` add/delete row controls must be hidden when `readOnly === true` or `displayMode === 'DISPLAY_ONLY'`
 - `SimpleTableSelect` uses the same `ListView` but adds selection callbacks

package/templates/react-sdk-reference/.ai-common/skills/template-skills/SingleReferenceReadOnly.md

@@ -0,0 +1,103 @@
+# Skill: SingleReferenceReadOnly
+
+Single reference read-only template. Renders a read-only reference field as a semantic link for editable field types, or as a plain label otherwise.
+
+> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
+
+---
+
+## Component Purpose
+
+Renders a single data reference field in read-only mode. For fields that were displayed as editable selection controls (autocomplete, table select, dropdown), renders a `SemanticLink` component so the reference value is clickable/navigable. For other display types, renders a plain read-only label.
+
+## Pega Metadata
+
+- **Registration key:** `SingleReferenceReadOnly` (in the project's component map)
+- **Category:** Display template — read-only reference
+- **Extends:** the project's base component interface
+
+## Inputs
+
+| Input                     | Type       | Required | Description                                               |
+| ------------------------- | ---------- | -------- | --------------------------------------------------------- |
+| `label`                   | `string`   | Yes      | Field label                                               |
+| `displayAs`               | `string`   | Yes      | The edit-mode display type this field was configured with |
+| `value`                   | `string`   | No       | Current field value (display text)                        |
+| `caseClass`               | `string`   | No       | Class identifier for the referenced case                  |
+| `text`                    | `string`   | No       | Display text for the semantic link                        |
+| `caseID`                  | `string`   | No       | Case ID for the semantic link                             |
+| `contextPage`             | `string`   | No       | Context page identifier                                   |
+| `resourceParams`          | `object`   | No       | Parameters for the referenced resource                    |
+| `resourcePayload`         | `object`   | No       | Payload for resource navigation                           |
+| `dataRelationshipContext` | `string`   | No       | Data relationship context identifier                      |
+| `getPConnect`             | `function` | Yes      | PConnect getter                                           |
+
+## Implementation Structure
+
+**Module Setup:** This component requires the project's base component interface. Define a component input contract extending the base interface with `config` (object), optional `displayAs`, optional `ruleClass`, optional `label`, optional `displayMode`, `type` (string), optional `referenceType`, optional `hideLabel`, and optional `dataRelationshipContext`.
+
+**Main Component Logic** — steps in order:
+
+1. Receive inputs: `getPConnect`, `displayAs` (default `''`), `ruleClass` (default `''`), `label` (default `''`), `type` (default `''`), `displayMode` (default `''`), `referenceType` (default `''`), `hideLabel` (default `false`), `dataRelationshipContext` (default `null`), and `config`.
+2. Define `editableComponents = ['AutoComplete', 'SimpleTableSelect', 'Dropdown']`.
+3. **For editable field types** (when `type` is in `editableComponents`), mutate `config` to add semantic link configuration: `caseClass = ruleClass`; `text = config.primaryField`; `caseID = config.value`; `contextPage = '@P .' + dataRelationshipContext`; `resourceParams = { workID: displayAs === 'table' ? config.selectionKey : config.value }`; `resourcePayload = { caseClassName: ruleClass }`.
+4. Create the `SemanticLink` component via `getPConnect().createComponent({ type: 'SemanticLink', config: { ...config, label, displayMode, referenceType, hideLabel, dataRelationshipContext } }, '', 0, {})`.
+5. Render a form row containing a label showing `label`, followed by the created component.
+
+## Behavioral Contract
+
+### Editable Component Check
+
+`editableComponents = ['AutoComplete', 'SimpleTableSelect', 'Dropdown']`.
+
+If `type` is in `editableComponents`:
+
+1. Build config with: `caseClass`, `text`, `caseID`, `contextPage`, `resourceParams`, `resourcePayload`.
+2. Create: `createComponent({ type: 'SemanticLink', config: { ...builtConfig } })`.
+3. Render the created `SemanticLink` component.
+
+Else:
+
+- Render a plain read-only display with a label and value text.
+
+### Layout
+
+For both variants, wrap the label and the semantic link (or plain value) in a row-oriented form control: a container styled with row direction, containing a label element (with right margin) showing `label`, followed by the semantic link or value.
+
+## Visual Specifications
+
+| Variant         | Layout                                |
+| --------------- | ------------------------------------- |
+| SemanticLink    | Label (left) + clickable link (right) |
+| Plain read-only | Label (left) + plain text (right)     |
+
+**CSS-only implementation notes:**
+
+- Wrapper: `display: flex; flex-direction: row; align-items: baseline; gap: 1rem`.
+- Label: `font-size: 0.875rem; color: var(--secondary-text-color); min-width: 120px`.
+- Semantic link: `color: var(--link-color); text-decoration: underline; cursor: pointer`.
+- Plain value: `font-size: 0.875rem; color: var(--primary-text-color)`.
+
+## Edge Cases & Special Logic
+
+- `type` check is case-sensitive — values are `'AutoComplete'`, `'SimpleTableSelect'`, `'Dropdown'` (exact match).
+- `createComponent` returns a renderable component — render it via the project's component registry conventions.
+- If `text` is empty/undefined, the semantic link shows the `caseID` as fallback text.
+- `SemanticLink` navigation requires `caseClass` and `caseID` — if either is missing, fall back to plain read-only display.
+
+## Dependencies
+
+- The project's component registry — for rendering the `SemanticLink`
+- `getPConnect().createComponent()` — creates the SemanticLink component config
+
+## Design System Mapping
+
+**UI control type:** Read-only reference field — semantic link for navigable references, plain label otherwise.
+
+When implementing in a specific design system, map the following:
+
+- For editable field types (`'AutoComplete'`, `'SimpleTableSelect'`, `'Dropdown'`), render a semantic link that navigates to the referenced case.
+- For other field types, render a plain read-only label with the value text.
+- `SemanticLink` must be rendered via `createComponent` — do not implement the link logic directly in this component.
+- Horizontal label + value layout (row direction) is required.
+- The wrapper should be a form-control-style container with flex row direction and appropriate spacing between label and value.

package/templates/react-sdk-reference/.ai-common/skills/template-skills/SubTabs.md

@@ -0,0 +1,89 @@
+# Skill: SubTabs
+
+Sub-tabs navigation template. Renders a tab container for case view sections using shared tab utilities with deferred content loading.
+
+> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
+
+---
+
+## Component Purpose
+
+Renders a horizontal tab bar for navigating between case view sections. Uses shared `tabUtils` for tab state management (visible tabs, transient tabs, tab click). Tab content is deferred — only the active tab loads content. No section heading.
+
+## Pega Metadata
+
+- **Registration key:** `SubTabs` (in the project's component map)
+- **Category:** Navigation template
+- **Extends:** the project's base component interface
+
+## Inputs
+
+| Input         | Type             | Required | Description                                         |
+| ------------- | ---------------- | -------- | --------------------------------------------------- |
+| `children`    | child node array | Yes      | `children[0]` is the deferred-loaded tabs container |
+| `getPConnect` | function         | Yes      | PConnect getter                                     |
+
+## Implementation Structure
+
+**Module Setup:** The component requires access to a framework utility for converting children to an array, local state and lifecycle effect primitives, `getTransientTabs`, `getVisibleTabs`, and `tabClick` from the local tab utilities module, and the project's base component interface.
+
+**Main Component Logic** — steps in order:
+
+1. Receive inputs: extract `children` (defaulting to an empty array).
+2. Extract the deferred tabs container: convert children to an array and take the first element.
+3. Compute `availableTabs` via `getVisibleTabs(deferLoadedTabs, 'tabsSubs')`.
+4. Declare local state: `currentTabId` (string, initialized to `'0'`) and `tabItems` (array, initialized empty).
+5. In a lifecycle effect keyed on `currentTabId`, update `tabItems` via `getTransientTabs(availableTabs, currentTabId, tabItems)`.
+6. Define a tab-click handler that sets `currentTabId` to the clicked index and calls `tabClick(index, availableTabs, currentTabId, setCurrentTabId, tabItems)`.
+7. Render a tab context wrapping a scrollable tab bar (one tab per `tabItems` entry, labeled `tab.name`) and a set of tab panels (each showing `tab.content` or a "No content exists" fallback) — no section heading is rendered.
+
+> **Key difference from `DetailsSubTabs`:** No heading, uses `'tabsSubs'` identifier, `getVisibleTabs` called directly (not inside a lifecycle effect).
+
+## Behavioral Contract
+
+1. **Extract deferred tabs:** `deferLoadedTabs` = first element of the children array.
+2. **State:** `currentTabId` (string, default `'0'`), `tabItems` (array).
+3. **Compute visible tabs:** `getVisibleTabs(deferLoadedTabs, 'tabsSubs')` → `availableTabs`.
+4. **Transient tabs:** lifecycle effect keyed on `currentTabId` → update `tabItems` via `getTransientTabs(availableTabs, currentTabId, tabItems)`.
+5. **Tab click:** `tabClick(index, availableTabs, currentTabId, setCurrentTabId, tabItems)` from `tabUtils`.
+6. **Render:**
+   - A tab context container bound to `currentTabId`
+   - A scrollable tab bar with change handler — one tab per `tabItems` entry
+   - One tab panel per `tabItems` entry with `tab.content` or empty fallback text "No content exists"
+7. No section heading (unlike `DetailsSubTabs`).
+
+> **Difference from `DetailsSubTabs`:** SubTabs has no `label`/`showLabel` inputs and no heading. Uses `'tabsSubs'` identifier for `getVisibleTabs` (vs `'detailsSubTabs'`).
+
+## Visual Specifications
+
+Identical to `DetailsSubTabs` except no heading above the tab bar.
+
+**CSS-only implementation notes:**
+
+- Tab bar: `display: flex; border-bottom: 2px solid var(--divider)`.
+- Each tab: `padding: 8px 16px; cursor: pointer; border-bottom: 2px solid transparent`.
+- Active tab: `border-bottom-color: var(--app-primary-color); font-weight: 600`.
+- Tab panel: `padding: 16px 0`.
+
+## Edge Cases & Special Logic
+
+See `DetailsSubTabs.md` for shared edge cases. Additional:
+
+- `tabUtils` identifier string `'tabsSubs'` must match exactly — it is used internally by `getVisibleTabs` for scoping.
+
+## Dependencies
+
+- `getTransientTabs`, `getVisibleTabs`, `tabClick` from the local tab utilities module (`tabUtils`)
+- A design-system tab container, tab bar, and tab panel component (see below)
+
+## Design System Mapping
+
+**UI control type:** Tab navigation container — no heading, deferred content loading.
+
+When implementing in a specific design system, map the following: a tab context container that holds the current tab value; a scrollable tab bar component that emits a change event with the selected index; individual tab items with label text; and tab panel containers that display content for the active tab. In a CSS-only approach, use a custom tab bar with an underline indicator. Other design systems provide equivalent compound tab components.
+
+When implementing:
+
+- Use `getVisibleTabs(tabs, 'tabsSubs')` — the identifier string must be `'tabsSubs'`
+- No heading above the tab bar (unlike `DetailsSubTabs`)
+- Deferred loading: content populates lazily via `getTransientTabs`

package/templates/react-sdk-reference/.ai-common/skills/template-skills/TwoColumn.md

@@ -0,0 +1,133 @@
+# Skill: TwoColumn
+
+Two-column layout template that splits children into two responsive grid columns with configurable width ratios.
+
+> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
+
+---
+
+## Component Purpose
+
+Renders two child components side by side in a responsive grid. Column widths are driven by the `templateCol` input (e.g., `'1fr 1fr'`, `'2fr 1fr'`). On mobile, both columns collapse to full width. Three closely related sub-variants share this same layout logic:
+
+- **`TwoColumn`** — core layout, used inside forms and views
+- **`TwoColumnPage`** — thin wrapper that delegates to `TwoColumn` via the project's component registry
+- **`TwoColumnTab`** — identical layout implementation used inside tab contexts
+
+## Pega Metadata
+
+| Variant       | Registration Key |
+| ------------- | ---------------- |
+| TwoColumn     | `TwoColumn`      |
+| TwoColumnPage | `TwoColumnPage`  |
+| TwoColumnTab  | `TwoColumnTab`   |
+
+All three extend the project's base component interface. Children are received via the framework's content projection mechanism (not via `getPConnect().getChildren()`).
+
+## Implementation Structure
+
+### TwoColumn (core)
+
+**Module Setup:** Define the input contract as an extension of the project's base component interface, adding an optional `templateCol` string field and accepting children.
+
+**Main Component Logic** — steps in order:
+
+1. Receive `children` and `templateCol` (default `'1fr 1fr'`) from inputs; treat `children` as an array of two child elements.
+2. If the child count isn't exactly 2, log a console error noting the actual count (still continue rendering).
+3. **Parse `templateCol` into 12-grid sizes:** strip unit suffixes (e.g., `'fr'`) via a regex replace (remove all lowercase letters), split on whitespace, and convert each token to a number, producing a column-values array; sum the array into `totalCols`; compute `ratio = 12 / totalCols`; derive `aSize = ratio * colArray[0]` and `bSize = ratio * colArray[1]` (both treated as grid column size values within a 12-column system).
+4. Render a grid container with spacing of 1 unit (≈ 8px) containing two grid items, each with full width at mobile breakpoint and the computed column size at medium+ breakpoint, both with a column-styles class: the first holds `children[0]`, the second holds `children[1]`.
+
+**Visual-only styling notes:** apply a column-styles class to each column with `display: grid; gap: 1rem; align-content: baseline`.
+
+### TwoColumnPage
+
+A thin pass-through wrapper: resolve `TwoColumn` from the project's component registry and render it forwarding all inputs.
+
+### TwoColumnTab
+
+Identical implementation to `TwoColumn` — same `templateCol` parsing, same grid output. Registered separately under `TwoColumnTab` key to support tab context rendering.
+
+## Inputs
+
+| Name          | Type               | Required | Description                                                                    |
+| ------------- | ------------------ | -------- | ------------------------------------------------------------------------------ |
+| `children`    | renderable content | Yes      | Exactly 2 children (left column, right column)                                 |
+| `templateCol` | `string`           | No       | Column width ratio string, e.g., `'1fr 1fr'`, `'2fr 1fr'`. Default `'1fr 1fr'` |
+
+## Behavioral Contract
+
+1. Accept exactly 2 children. If a different count is received, log an error (console only — still render).
+2. Parse `templateCol` to compute grid column sizes within a 12-column system:
+   - Strip unit suffixes (e.g., `'fr'`) from each token using regex (remove lowercase letters).
+   - Split on whitespace and convert to numbers.
+   - Compute `totalCols = sum(colArray)`.
+   - Compute `ratio = 12 / totalCols`.
+   - `aSize = ratio * colArray[0]`, `bSize = ratio * colArray[1]`.
+3. Render a grid container with spacing of 1 unit (≈ 8px).
+4. Render `children[0]` in the left column at full width on mobile, `aSize` on medium+ breakpoint.
+5. Render `children[1]` in the right column at full width on mobile, `bSize` on medium+ breakpoint.
+6. Apply column-styles to each column: `display: grid; gap: 1rem; align-content: baseline`.
+
+## Visual Specifications
+
+### Column Style
+
+| Property      | Value                                 |
+| ------------- | ------------------------------------- |
+| Display       | grid                                  |
+| Gap           | 1rem                                  |
+| Align content | baseline (children stack top-aligned) |
+
+### Grid Spacing
+
+| Property          | Value                     |
+| ----------------- | ------------------------- |
+| Container spacing | 1 (≈ 8px between columns) |
+
+### Responsive Behavior
+
+| Breakpoint | Column A   | Column B                  |
+| ---------- | ---------- | ------------------------- |
+| Mobile     | full width | full width (stacks below) |
+| Medium+    | `aSize`/12 | `bSize`/12                |
+
+**Column ratio examples:**
+
+| `templateCol` | Column A   | Column B   |
+| ------------- | ---------- | ---------- |
+| `'1fr 1fr'`   | 6/12 (50%) | 6/12 (50%) |
+| `'2fr 1fr'`   | 8/12 (67%) | 4/12 (33%) |
+| `'1fr 2fr'`   | 4/12 (33%) | 8/12 (67%) |
+| `'3fr 1fr'`   | 9/12 (75%) | 3/12 (25%) |
+
+**CSS-only implementation notes:**
+
+- Column container: `display: grid; gap: 1rem; align-content: baseline`.
+- Outer grid: `display: grid; grid-template-columns: <aFraction>fr <bFraction>fr; gap: 8px`.
+- Mobile: `grid-template-columns: 1fr` (single column stack).
+- Each column has `display: grid; gap: 1rem; align-content: baseline` for internal stacking.
+
+## Edge Cases & Special Logic
+
+- Default `templateCol` is `'1fr 1fr'` (equal split) when not provided.
+- The `templateCol` parsing is regex-based — any non-numeric suffix is stripped. If only numbers are provided (e.g., `'6 6'`), it still works.
+- `TwoColumnPage` uses the project's component registry to resolve `TwoColumn` — if an override exists, that override is used instead.
+
+## Dependencies
+
+- `TwoColumnPage`: the project's component registry — to resolve the `TwoColumn` component at runtime.
+- `TwoColumn` / `TwoColumnTab`: no special dependencies beyond layout.
+
+## Design System Mapping
+
+**UI control type:** Responsive two-column grid layout.
+
+When implementing in a specific design system, map the following:
+
+- **Grid container** → use the DS's grid/layout system with configurable column spans
+- **Column sizing** → parse `templateCol` using the ratio algorithm (strip units, divide 12 by total) to compute column sizes
+- **Responsive behavior** → full width on mobile, computed ratio on medium+ breakpoint
+- **Column style** → apply `display: grid; gap: 1rem; align-content: baseline` so children within each column stack top-aligned
+- **TwoColumnPage** → resolve via the project's component registry and delegate
+
+- Collapse to single column on mobile breakpoint

package/templates/react-sdk-reference/{.claude → .ai-common}/skills/template-skills/WideNarrow.md

@@ -10,8 +10,8 @@ Asymmetric two-column layout with a wide left column (~67%) and a narrow right c
 
 Renders two children side by side with the left column wider than the right. Typically used when the main content occupies the left and a utility/sidebar panel sits on the right. Four sub-variants:
 
-- **`WideNarrow`** — core CSS-based layout, accepts either `a`/`b` slot props or React `children[0]`/`children[1]`
-- **`WideNarrowPage`** — wrapper that passes React children as `a` and `b` slot props to `WideNarrow`
+- **`WideNarrow`** — core CSS-based layout, accepts either `a`/`b` slot inputs or `children[0]`/`children[1]`
+- **`WideNarrowPage`** — wrapper that passes children as `a` and `b` slot inputs to `WideNarrow`
 - **`WideNarrowForm`** — simplified wrapper using only `children`
 - **`WideNarrowDetails`** — details read-only variant; sets children to DISPLAY_ONLY mode and supports highlighted data
 
@@ -26,39 +26,39 @@ Renders two children side by side with the left column wider than the right. Typ
 | WideNarrowForm    | `WideNarrowForm`    |
 | WideNarrowDetails | `WideNarrowDetails` |
 
-All extend `PConnProps`.
+All extend the project's base component interface.
 
-## Props
+## Inputs
 
 ### WideNarrow
 
-| Prop       | Type          | Required | Description                                                |
-| ---------- | ------------- | -------- | ---------------------------------------------------------- |
-| `children` | `ReactNode[]` | No       | Two children — `[0]` → wide (left), `[1]` → narrow (right) |
-| `a`        | `any`         | No       | Wide (left) column content                                 |
-| `b`        | `any`         | No       | Narrow (right) column content                              |
-| `title`    | `string`      | No       | Optional title (not rendered)                              |
-| `cols`     | `string`      | No       | Column template (not rendered)                             |
-| `icon`     | `string`      | No       | Icon name (not rendered)                                   |
+| Name       | Type               | Required | Description                                                |
+| ---------- | ------------------ | -------- | ---------------------------------------------------------- |
+| `children` | renderable content | No       | Two children — `[0]` → wide (left), `[1]` → narrow (right) |
+| `a`        | `any`              | No       | Wide (left) column content                                 |
+| `b`        | `any`              | No       | Narrow (right) column content                              |
+| `title`    | `string`           | No       | Optional title (not rendered)                              |
+| `cols`     | `string`           | No       | Column template (not rendered)                             |
+| `icon`     | `string`           | No       | Icon name (not rendered)                                   |
 
 ### WideNarrowPage
 
-| Prop          | Type          | Required | Description                                           |
-| ------------- | ------------- | -------- | ----------------------------------------------------- |
-| `children`    | `ReactNode[]` | Yes      | Two children — `[0]` → wide slot, `[1]` → narrow slot |
-| `title`       | `string`      | Yes      | Page title (passed to WideNarrow)                     |
-| `templateCol` | `string`      | No       | Column ratio (default `'1fr 1fr'`)                    |
-| `icon`        | `string`      | No       | Icon name (strips `'pi pi-'` prefix)                  |
+| Name          | Type               | Required | Description                                           |
+| ------------- | ------------------ | -------- | ----------------------------------------------------- |
+| `children`    | renderable content | Yes      | Two children — `[0]` → wide slot, `[1]` → narrow slot |
+| `title`       | `string`           | Yes      | Page title (passed to WideNarrow)                     |
+| `templateCol` | `string`           | No       | Column ratio (default `'1fr 1fr'`)                    |
+| `icon`        | `string`           | No       | Icon name (strips `'pi pi-'` prefix)                  |
 
 ### WideNarrowForm
 
-| Prop       | Type          | Required | Description                                |
-| ---------- | ------------- | -------- | ------------------------------------------ |
-| `children` | `ReactNode[]` | Yes      | Two children rendered in wide/narrow slots |
+| Name       | Type               | Required | Description                                |
+| ---------- | ------------------ | -------- | ------------------------------------------ |
+| `children` | renderable content | Yes      | Two children rendered in wide/narrow slots |
 
 ### WideNarrowDetails
 
-| Prop                  | Type       | Required | Description                                                |
+| Name                  | Type       | Required | Description                                                |
 | --------------------- | ---------- | -------- | ---------------------------------------------------------- |
 | `label`               | `string`   | No       | Section label for FieldGroup                               |
 | `showLabel`           | `boolean`  | No       | Whether to show the label. Default `true`                  |
@@ -75,9 +75,9 @@ All extend `PConnProps`.
 
 ### WideNarrowPage
 
-1. Extract `childArray = Children.toArray(children)`.
-2. Retrieve `WideNarrow` from the component registry.
-3. Render `<WideNarrow a={childArray[0]} b={childArray[1]} title={title} cols={templateCol} icon={icon?.replace('pi pi-', '')} />`.
+1. Extract the children array from the content projection.
+2. Resolve `WideNarrow` from the project's component registry.
+3. Render `WideNarrow` with `a` set to `children[0]`, `b` set to `children[1]`, `title`, `cols` set to `templateCol`, and `icon` with the `'pi pi-'` prefix stripped.
 
 ### WideNarrowForm
 
@@ -86,7 +86,7 @@ All extend `PConnProps`.
 ### WideNarrowDetails
 
 1. Set `getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY')` and `setInheritedProp('readOnly', true)`.
-2. Map `getPConnect().getChildren()` → `createElement(PConnectComponent, { ...configObject, key: index })`.
+2. Map `getPConnect().getChildren()` → render each child using the project's PConnect bridge utility with the config object and a unique key.
 3. If `showHighlightedData` is true, read `getRawMetadata().config.highlightedData`, set each field's `displayMode = 'STACKED_LARGE_VAL'`, mark `pyStatusWork` as `displayAsStatus=true`, and create components via `getPConnect().createComponent(field, '', 0, {})`.
 4. Wrap in `<FieldGroup name={theName}>` using `propsToUse.showLabel && propsToUse.label`.
 5. Layout: highlighted data in `Grid size={{ xs: COLUMN_WIDTHS[i] }}` where **`COLUMN_WIDTHS = [8, 4]`** (wide left, narrow right — reversed vs NarrowWideDetails).
@@ -123,30 +123,23 @@ Derived from `WideNarrow.css`:
 ## Edge Cases & Special Logic
 
 - `WideNarrowDetails` defaults `children` to empty (`= []`) — safe even if no children are provided.
-- Highlighted data guard: check `if (!theConfigObject) theConfigObject = {}` before creating PConnectComponent — prevents crash on null config objects.
+- Highlighted data guard: check `if (!theConfigObject) theConfigObject = {}` before creating the PConnect bridge component — prevents crash on null config objects.
 - Icon cleanup in `WideNarrowPage`: strip `'pi pi-'` from icon string before passing to `WideNarrow`.
 
 ## Dependencies
 
-- `WideNarrowPage`: `getComponentFromRegistry` from `@pega/sdk-react`
-- `WideNarrowDetails`: `getComponentFromRegistry('FieldGroup')`, `PConnectComponent` from `@pega/sdk-react`
+- `WideNarrowPage`: the project's component registry — to resolve `WideNarrow` at runtime.
+- `WideNarrowDetails`: the project's component registry (to resolve `FieldGroup`) and the project's PConnect bridge utility.
 
 ## Design System Mapping
 
 **UI control type:** Asymmetric two-column layout (main content + sidebar).
 
-Listed design systems are examples only.
+When implementing in a specific design system, map the following:
 
-| Design System      | Recommended Component                                                            |
-| ------------------ | -------------------------------------------------------------------------------- |
-| Default (CSS only) | CSS Grid `grid-template-columns: 2fr 1fr; gap: 1rem`                             |
-| MUI                | `<Grid container><Grid size={{ xs: 12, md: 8 }}><Grid size={{ xs: 12, md: 4 }}>` |
-| Ant Design         | `<Row gutter={16}><Col xs={24} md={16}><Col xs={24} md={8}>`                     |
-| Chakra UI          | `<Grid templateColumns={{ base: '1fr', md: '2fr 1fr' }} gap={4}>`                |
-| Shadcn/ui          | Tailwind `grid grid-cols-1 md:grid-cols-[2fr_1fr] gap-4`                         |
-
-When implementing in a specific design system:
-
-- Wide column ≈ 67% width (left side)
-- Narrow column ≈ 33% width (right side)
-- `WideNarrowDetails` forces DISPLAY_ONLY + readOnly on all children
+- **Two-column grid** → use the DS's grid with `2fr 1fr` column ratio (wide left, narrow right)
+- **Mobile** → collapse to single column (`1fr`), wide content on top
+- **WideNarrowDetails** → forces DISPLAY_ONLY + readOnly on children via inherited inputs
+- **WideNarrowPage** → resolve via the project's component registry and delegate
+- **Wide column** ≈ 67% width (left side)
+- **Narrow column** ≈ 33% width (right side)