@pega/sdk 0.0.4 → 0.0.5

package/templates/react-sdk-reference/.github/skills/template-skills/HierarchicalForm.md

@@ -1,116 +0,0 @@
-# Skill: HierarchicalForm
-
-Multi-step tabbed form template. Renders form sections as horizontal tabs with per-tab validation error badges and persisted active tab navigation.
-
-> **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 multi-step form where each section is a tab. Tabs display error badges when their content has validation errors. The active tab index is persisted to navigation state so it survives renders. Optional instruction HTML is displayed above the tab bar.
-
-## Pega Metadata
-
-- **Registration key:** `HierarchicalForm` (in `component-map.ts`)
-- **Category:** Form template
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop           | Type          | Required | Description                                   |
-| -------------- | ------------- | -------- | --------------------------------------------- |
-| `children`     | `ReactNode[]` | Yes      | One child per tab section                     |
-| `instructions` | `string`      | No       | HTML instruction text shown above the tab bar |
-| `getPConnect`  | `function`    | Yes      | PConnect getter                               |
-
-## Behavioral Contract
-
-### Hook: `useHierarchicalForm`
-
-`useHierarchicalForm(getPConnect, numTabs)` returns:
-
-- `activeTabId`: currently selected tab index (string, e.g. `'0'`)
-- `setActiveTabId`: setter for `activeTabId`
-- `tabErrorCounts`: `Record<string, number>` — error count per tab index key
-
-Internally it calls `useGetTabsCount(getPConnect)` to compute `tabErrorCounts`.
-
-### Active Tab Persistence
-
-- On mount, read persisted tab from `PCore.getNavigationUtils().getComponentState(navigationKey)` — use `getActiveTabId(componentState)` to extract the stored tab index, or fall back to `getFirstVisibleTabId(tabItems)`.
-- On tab change, persist via `PCore.getNavigationUtils().setComponentState(navigationKey, { activeTabId: newId })`.
-- `navigationKey` is derived from the component's fully-qualified context path.
-
-### Instructions
-
-- Call `getInstructions(getPConnect(), props.instructions)` to get sanitized HTML.
-- If non-empty, render `<div className='psdk-default-form-instruction-text' dangerouslySetInnerHTML={{ __html: instructions }} />` above the tabs.
-
-### Tab Items
-
-- Build `tabItems` from `children` — each entry has `{ id: index.toString(), name: child.label }`.
-- Filter to visible tabs via `getFirstVisibleTabId(tabItems)`.
-
-### Error Badge
-
-- For each tab, read `tabErrorCounts[tabIndex]`.
-- If `> 0`: wrap the tab label with `<Tooltip title={errorCountMsg}><Badge badgeContent={count} color='error'>{label}</Badge></Tooltip>`.
-- Else: render the label plain.
-
-### Render
-
-1. Optional instruction block (above tabs).
-2. `<TabContext value={activeTabId}>` wrapper.
-3. `<Tabs onChange={handleTabChange} value={activeTabId}>` containing `<Tab>` per visible tab (with error badge label if applicable).
-4. `<TabPanel value={tabId}>` per tab containing the corresponding child.
-
-## Visual Specifications
-
-### Tab Bar
-
-| Property    | Value                                                  |
-| ----------- | ------------------------------------------------------ |
-| Orientation | Horizontal                                             |
-| Error badge | Red MUI Badge with tooltip showing error count message |
-
-**CSS-only implementation notes:**
-
-- Tab bar: same as `DetailsSubTabs` — `display: flex; border-bottom: 2px solid var(--divider)`.
-- Error badge: red circle badge overlaid top-right of the tab label text.
-- Instruction text: `padding: 0.5rem 0; margin-bottom: 0.5rem; font-size: 0.875rem`.
-
-## Edge Cases & Special Logic
-
-- `useGetTabsCount` is a custom hook specific to `HierarchicalForm` — it tracks validation errors per tab section.
-- `getActiveTabId` / `getFirstVisibleTabId` are helpers from `tabUtils` — they handle the case where the persisted tab is no longer visible.
-- `navigationKey` must be stable across re-renders — derive it once in `useMemo` from `getPConnect().getStateProps()` or equivalent.
-- If no visible tabs, render nothing (null).
-
-## Dependencies
-
-- `useHierarchicalForm`, `useGetTabsCount` from `./hooks`
-- `getActiveTabId`, `getFirstVisibleTabId`, `tabClick` from `../SubTabs/tabUtils`
-- `getInstructions` from `../../helpers/template-utils`
-- `TabContext`, `TabPanel` from `@mui/lab`
-- `Tab`, `Tabs`, `Badge`, `Tooltip` from `@mui/material`
-
-## Design System Mapping
-
-**UI control type:** Multi-step tabbed form with per-tab error indicators and persistent active tab.
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                          |
-| ------------------ | -------------------------------------------------------------- |
-| Default (CSS only) | Custom tab bar + CSS badge (red circle via pseudo-element)     |
-| MUI                | `<Tabs>` + `<Badge>` + `<Tooltip>` + `<TabContext>/<TabPanel>` |
-| Ant Design         | `<Tabs>` with custom `tabBarExtraContent` for error badges     |
-| Chakra UI          | `<Tabs>` + `<Badge colorScheme='red'>` inside tab label        |
-| Shadcn/ui          | `<Tabs>` + custom badge overlay on tab trigger                 |
-
-When implementing in a specific design system:
-
-- Error badge is mandatory — always show error counts when `tabErrorCounts[id] > 0`
-- Active tab must be persisted via `PCore.getNavigationUtils()` for correct navigation behavior
-- Instructions HTML renders above the entire tab bar, not per-tab

package/templates/react-sdk-reference/.github/skills/template-skills/InlineDashboard.md

@@ -1,108 +0,0 @@
-# Skill: InlineDashboard
-
-Inline dashboard template. Renders a dashboard with a title, a main content area, and an optional filter panel whose position is configurable.
-
-> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
-
----
-
-## Component Purpose
-
-Renders an inline dashboard layout consisting of a title heading, a main content panel, and an optional filter panel. The filter panel position is configurable: `block-start` places filters above the content in a stacked layout; any other position places filters to the side using a 9/3 column split.
-
-## Pega Metadata
-
-- **Registration key:** `InlineDashboard` (in `component-map.ts`)
-- **Category:** Page template — dashboard
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop             | Type          | Required | Description                                                                   |
-| ---------------- | ------------- | -------- | ----------------------------------------------------------------------------- |
-| `title`          | `string`      | No       | Dashboard title displayed above the content area                              |
-| `filterPosition` | `string`      | No       | Filter panel position: `'block-start'` (above) or other (side). Default: side |
-| `children`       | `ReactNode[]` | Yes      | `children[0]` = main content, `children[1]` = filter panel                    |
-| `getPConnect`    | `function`    | Yes      | PConnect getter                                                               |
-
-## Behavioral Contract
-
-### Title
-
-- If `title` is non-empty, render `<Typography variant='h4'>{title}</Typography>` above the grid.
-
-### Filter Position: `'block-start'`
-
-Stacked layout — filter panel above main content:
-
-- `<Grid container direction='column-reverse'>` (reverse so filter renders visually above content).
-- Filter panel: `<Grid id='filters' size={{ xs: 12 }}>`.
-- Main content: `<Grid size={{ xs: 12 }}>`.
-
-### Filter Position: Other (side)
-
-Side-by-side layout — main content left, filters right:
-
-- `<Grid container direction={...}>` (optionally `row-reverse` based on position value).
-- Main content: `<Grid size={{ xs: 9 }}>`.
-- Filter panel: `<Grid id='filters' size={{ xs: 3 }}>`.
-
-### Children Assignment
-
-- `children[0]` = main content panel.
-- `children[1]` = filter panel (may be absent if no filters configured).
-
-## Visual Specifications
-
-### Block-Start Layout (filter above content)
-
-```
-[Filter panel — xs:12]
-[Main content — xs:12]
-```
-
-### Side Layout (filter to side)
-
-```
-[Main content — xs:9]  [Filters — xs:3]
-```
-
-**CSS-only implementation notes:**
-
-- Title: `font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem`.
-- Block-start: `display: flex; flex-direction: column; gap: 1rem` (filter div first in DOM but ordered last visually with `order: -1`).
-- Side: `display: grid; grid-template-columns: 3fr 1fr; gap: 1rem`.
-- Filter panel: `id='filters'` — required for accessibility/selector targeting.
-- Responsive: collapse side layout to stacked on mobile.
-
-## Edge Cases & Special Logic
-
-- If `children[1]` is absent (no filters), render only the main content without the grid.
-- `direction='column-reverse'` in block-start mode — this is the MUI Grid direction prop; in plain CSS, use flexbox `column` direction with `order` property.
-- `title` is optional — if absent, skip the `<Typography h4>` entirely (no empty heading).
-- Filter grid always gets `id='filters'` — this is used by `PromotedFilters` for integration.
-
-## Dependencies
-
-- MUI: `<Typography variant='h4'>`, `<Grid container>`, `<Grid>` (child)
-- `PConnectComponent` from `@pega/sdk-react`
-
-## Design System Mapping
-
-**UI control type:** Dashboard layout with configurable title and filter panel position.
-
-Listed design systems are examples only.
-
-| Design System      | Title                          | Content/Filter Grid    |
-| ------------------ | ------------------------------ | ---------------------- |
-| Default (CSS only) | `<h2>`                         | CSS grid or flexbox    |
-| MUI                | `<Typography variant='h4'>`    | `<Grid container>`     |
-| Ant Design         | `<Typography.Title level={2}>` | `<Row>/<Col>`          |
-| Chakra UI          | `<Heading>`                    | `<Grid>` or `<HStack>` |
-| Shadcn/ui          | `<h2>`                         | Tailwind grid          |
-
-When implementing in a specific design system:
-
-- `filterPosition === 'block-start'` requires stacked layout (12/12) — not side layout (9/3)
-- Filter panel must always have `id='filters'`
-- Title heading (`h4` level) is optional — only render when `title` is provided

package/templates/react-sdk-reference/.github/skills/template-skills/InlineDashboardPage.md

@@ -1,82 +0,0 @@
-# Skill: InlineDashboardPage
-
-Inline dashboard page template. Builds filter components from promoted filters metadata and delegates rendering to `InlineDashboard`.
-
-> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
-
----
-
-## Component Purpose
-
-Page-level wrapper for the inline dashboard. Extracts promoted filter definitions from the PConnect metadata, builds React filter components from them, and passes them to `InlineDashboard` as the second child (filter panel). The first child (main content) is passed through unchanged.
-
-> See `InlineDashboard.md` for the layout and rendering behavior. This component only handles filter component construction.
-
-## Pega Metadata
-
-- **Registration key:** `InlineDashboardPage` (in `component-map.ts`)
-- **Category:** Page template — dashboard page
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop             | Type          | Required | Description                                     |
-| ---------------- | ------------- | -------- | ----------------------------------------------- |
-| `children`       | `ReactNode[]` | Yes      | Main content children passed to InlineDashboard |
-| `title`          | `string`      | No       | Dashboard title                                 |
-| `filterPosition` | `string`      | No       | Filter position: `'block-start'` or side        |
-| `getPConnect`    | `function`    | Yes      | PConnect getter                                 |
-
-## Behavioral Contract
-
-### Filter Component Construction
-
-In `useEffect([])` (on mount):
-
-1. Get promoted filters: `allFilters = getPConnect().getRawMetadata().config.promotedFilters || []`.
-2. Call `buildFilterComponents(getPConnect, allFilters)`:
-   - For each filter in `allFilters`, creates a PConnect-based filter field component.
-   - Returns an array of React elements ready to render.
-3. Store result in `filterComponents` state.
-
-### Render
-
-```tsx
-<InlineDashboard title={title} filterPosition={filterPosition} getPConnect={getPConnect}>
-  {children[0]} {/* main content */}
-  {filterComponents} {/* built filter components */}
-</InlineDashboard>
-```
-
-- `children[0]` = main content region.
-- `filterComponents` = built filter elements (replaces raw `children[1]`).
-
-## Visual Specifications
-
-Identical to `InlineDashboard` — see `InlineDashboard.md`. The only difference is that the filter panel children are programmatically built, not passed directly.
-
-## Edge Cases & Special Logic
-
-- `allFilters` may be empty — if no promoted filters exist, `filterComponents` is an empty array, and `InlineDashboard` renders without a filter panel.
-- `buildFilterComponents` is async in some implementations — show a loading state if needed until filters are ready.
-- `children[0]` is always the main content — index is stable.
-- `filterComponents` replaces `children[1]` entirely — do not render both.
-
-## Dependencies
-
-- `buildFilterComponents` from `./utils` — constructs filter field components from promoted filter config
-- `InlineDashboard` — the layout template this component wraps
-
-## Design System Mapping
-
-**UI control type:** Dashboard page — programmatic filter construction + InlineDashboard delegation.
-
-Listed design systems are examples only.
-
-This component is a thin orchestration layer. All visual implementation is in `InlineDashboard`. The only implementation detail is `buildFilterComponents` — which creates filter field components from metadata definitions.
-
-When implementing in a specific design system:
-
-- `buildFilterComponents` must create proper PConnect-backed filter field components
-- If `promotedFilters` is empty, skip the filter panel entirely
-- All layout and styling is delegated to `InlineDashboard`

package/templates/react-sdk-reference/.github/skills/template-skills/ListView.md

@@ -1,142 +0,0 @@
-# Skill: ListView
-
-Full-featured list view template. Renders a data table with sorting, pagination, global search, single/multi selection, column menu, and filter dialog.
-
-> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
-
----
-
-## Component Purpose
-
-The primary data table component. Renders a sortable, paginated, filterable, and selectable table from a PConnect data source. Supports both standalone page use (`bInForm: false`) and embedded form use (`bInForm: true`). Columns are configurable, and the table supports row-level selection with callback.
-
-## Pega Metadata
-
-- **Registration key:** `ListView` (in `component-map.ts`)
-- **Category:** Data display template
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop                    | Type       | Required | Description                                                                   |
-| ----------------------- | ---------- | -------- | ----------------------------------------------------------------------------- |
-| `bInForm`               | `boolean`  | No       | Whether rendered inside a form (affects toolbar and padding). Default `false` |
-| `selectionMode`         | `string`   | No       | `'single'` (radio) or `'multi'` (checkbox) or absent (no selection)           |
-| `dataPageName`          | `string`   | No       | Name of data page to fetch records from                                       |
-| `referenceList`         | `array`    | No       | In-memory data array (used when data is already available)                    |
-| `compositeKeys`         | `object`   | No       | Key fields for unique row identification                                      |
-| `columns`               | `array`    | No       | Column definition objects `{ fieldName, label, sortable, filterable }`        |
-| `additionalTableConfig` | `object`   | No       | Extra config merged with column/sort/filter settings                          |
-| `isSearchable`          | `boolean`  | No       | Whether global search input is shown                                          |
-| `payload`               | `object`   | No       | Query payload for data page requests                                          |
-| `getPConnect`           | `function` | Yes      | PConnect getter                                                               |
-
-## Behavioral Contract
-
-### Initialization
-
-`useInit(getPConnect, columns, dataPageName, payload)` hook:
-
-1. Calls `initializeColumns(getPConnect, columns)` to build `configFields`.
-2. Calls `buildFieldsForTable(configFields)` to produce display column definitions.
-3. Calls `getConfigFields(configFields)` for sort/filter metadata.
-4. Fetches initial data via `PCore.getDataApiUtils().getDataAsync(dataPageName, payload)`.
-5. Returns `{ tableDataRows, configFields, totalCount }`.
-
-### Sorting
-
-- `<TableSortLabel>` in each sortable column header.
-- On click: call `PCore.getDataApiUtils().getDataAsync(dataPageName, { ...payload, sortBy, sortOrder })`.
-- `sortBy` = column field name, `sortOrder` = `'ASC'` or `'DESC'`.
-
-### Pagination
-
-- `<TablePagination>` component below the table.
-- `rowsPerPageOptions`: `[5, 10, 25]`.
-- On page/rows change: re-fetch with `startIndex` and `maxResults` params.
-
-### Global Search
-
-- Shown when `isSearchable === true`.
-- `<TextField>` input above the table (toolbar area).
-- On submit/debounce: re-fetch with `searchText` param.
-
-### Selection
-
-| `selectionMode` | Control per row | Callback                     |
-| --------------- | --------------- | ---------------------------- |
-| `'single'`      | `<Radio>`       | `onRowSelect(rowData)`       |
-| `'multi'`       | `<Checkbox>`    | `onRowsSelect(selectedRows)` |
-| absent          | None            | None                         |
-
-- Select-all checkbox in the header for multi-selection.
-- Selected rows highlighted with `selected` row class.
-
-### Column Menu
-
-- `<MoreVertIcon>` button in each column header.
-- Opens `<Menu>` with options: Show/Hide column, Pin column.
-- Column visibility stored in local state `columnVisibility`.
-
-### Filter Dialog
-
-- Filter icon in toolbar or column header.
-- Opens `<Dialog>` with filter form fields for each filterable column.
-- On apply: re-fetch with filter params.
-- `filterData(filters, configFields)` formats filter objects for the API.
-
-### Snackbar Toast
-
-- Shown on fetch errors or action feedback.
-- Auto-hides after 3000ms.
-
-## Visual Specifications
-
-| Element        | Description                                              |
-| -------------- | -------------------------------------------------------- |
-| Toolbar        | Search input + filter button + (optional) action buttons |
-| Table head     | Sticky header with sort labels and column menu           |
-| Table body     | Striped rows, hover state, selected state                |
-| Pagination bar | Below table, page size selector + page nav               |
-
-**CSS-only implementation notes:**
-
-- Table container: `overflow-x: auto`.
-- Header row: `background: var(--table-header-bg); font-weight: 600`.
-- Selected row: `background: var(--selection-highlight-bg)`.
-- Hover row: `background: var(--hover-bg)`.
-- Sticky header: `position: sticky; top: 0; z-index: 1`.
-
-## Edge Cases & Special Logic
-
-- `bInForm: true` — remove outer padding, hide some toolbar elements.
-- Empty result set — show empty state message `"No records found"`.
-- `compositeKeys` — used for unique row key generation when no single ID field exists.
-- Column visibility changes are local state only — not persisted by default.
-- Large datasets — pagination is mandatory; do not load all rows at once.
-
-## Dependencies
-
-- `useInit`, `filterData`, `buildFieldsForTable`, `getConfigFields`, `initializeColumns` from `./utils`
-- `PCore.getDataApiUtils().getDataAsync()` — data fetching
-- MUI: `<Table>`, `<TableHead>`, `<TableBody>`, `<TableRow>`, `<TableCell>`, `<TableSortLabel>`, `<TablePagination>`, `<Checkbox>`, `<Radio>`, `<Dialog>`, `<TextField>`, `<Menu>`, `<MenuItem>`, `<Snackbar>`
-
-## Design System Mapping
-
-**UI control type:** Full-featured data table with sorting, pagination, search, selection, and filtering.
-
-Listed design systems are examples only.
-
-| Design System      | Table                      | Pagination                 | Dialog             |
-| ------------------ | -------------------------- | -------------------------- | ------------------ |
-| Default (CSS only) | `<table>/<thead>/<tbody>`  | Custom pagination controls | `<dialog>` element |
-| MUI                | `<Table>` + sub-components | `<TablePagination>`        | `<Dialog>`         |
-| Ant Design         | `<Table>`                  | Built-in pagination prop   | `<Modal>`          |
-| Chakra UI          | `<Table>`                  | Custom or `react-table`    | `<Modal>`          |
-| Shadcn/ui          | `<Table>` + TanStack Table | Custom pagination          | `<Dialog>`         |
-
-When implementing in a specific design system:
-
-- `bInForm` prop affects layout — tighten spacing and remove outer chrome when `true`
-- Sorting, pagination, and search all trigger data re-fetches — do not filter client-side for server-paged data
-- Selection mode (`single`/`multi`) requires different controls and callbacks

package/templates/react-sdk-reference/.github/skills/template-skills/NarrowWide.md

@@ -1,143 +0,0 @@
-# Skill: NarrowWide
-
-Asymmetric two-column layout with a narrow left column (~33%) and a wide right column (~67%). Includes four sub-variants for different contexts.
-
-> **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 children side by side with the left column narrower than the right. Used for case layouts where a sidebar panel sits beside a main content area. Four sub-variants:
-
-- **`NarrowWide`** — core CSS-based layout, accepts either `a`/`b` slot props or React `children[0]`/`children[1]`
-- **`NarrowWidePage`** — wrapper that passes React children as `a` and `b` slot props to `NarrowWide`
-- **`NarrowWideForm`** — simplified wrapper using only `children` (no `a`/`b` slots, no title/icon)
-- **`NarrowWideDetails`** — details read-only variant; sets children to DISPLAY_ONLY mode and supports highlighted data
-
-## Pega Metadata
-
-| Variant           | Registration Key    |
-| ----------------- | ------------------- |
-| NarrowWide        | `NarrowWide`        |
-| NarrowWidePage    | `NarrowWidePage`    |
-| NarrowWideForm    | `NarrowWideForm`    |
-| NarrowWideDetails | `NarrowWideDetails` |
-
-All extend `PConnProps`.
-
-## Props
-
-### NarrowWide
-
-| Prop       | Type          | Required | Description                                                |
-| ---------- | ------------- | -------- | ---------------------------------------------------------- |
-| `children` | `ReactNode[]` | No       | Two children rendered in narrow/wide slots                 |
-| `a`        | `any`         | No       | Narrow (left) column content                               |
-| `b`        | `any`         | No       | Wide (right) column content                                |
-| `title`    | `string`      | No       | Optional title (not rendered in reference implementation)  |
-| `cols`     | `string`      | No       | Column template (not rendered in reference implementation) |
-| `icon`     | `string`      | No       | Optional icon (not rendered in reference implementation)   |
-
-### NarrowWidePage
-
-| Prop          | Type          | Required | Description                                           |
-| ------------- | ------------- | -------- | ----------------------------------------------------- |
-| `children`    | `ReactNode[]` | Yes      | Two children — `[0]` → narrow slot, `[1]` → wide slot |
-| `title`       | `string`      | Yes      | Page title (passed to NarrowWide)                     |
-| `templateCol` | `string`      | No       | Column ratio (default `'1fr 1fr'`)                    |
-| `icon`        | `string`      | No       | Icon name (strips `'pi pi-'` prefix)                  |
-
-### NarrowWideForm
-
-| Prop       | Type          | Required | Description                                           |
-| ---------- | ------------- | -------- | ----------------------------------------------------- |
-| `children` | `ReactNode[]` | Yes      | Two children — `[0]` → narrow slot, `[1]` → wide slot |
-
-### NarrowWideDetails
-
-| Prop                  | Type       | Required | Description                                                               |
-| --------------------- | ---------- | -------- | ------------------------------------------------------------------------- |
-| `label`               | `string`   | Yes      | Section label for FieldGroup                                              |
-| `showLabel`           | `boolean`  | No       | Whether to show the label. Default `true`                                 |
-| `showHighlightedData` | `boolean`  | No       | Whether to render highlighted data fields above children. Default `false` |
-| `getPConnect`         | `function` | Yes      | PConnect getter                                                           |
-
-## Behavioral Contract
-
-### NarrowWide
-
-1. If `children` is provided and has exactly 2 items, render `children[0]` in `.psdk-narrow-column-column` and `children[1]` in `.psdk-wide-column-column` (both wrapped in `.psdk-narrow-wide-column`).
-2. If `a` and `b` are provided (and children is empty/not 2 items), render `a` in the narrow slot and `b` in the wide slot.
-3. The two render paths are independent — priority is `children` if length === 2, otherwise `a`/`b`.
-
-### NarrowWidePage
-
-1. Extract `childrenToRender = children as ReactElement[]`.
-2. Retrieve `NarrowWide` from the component registry.
-3. Render `<NarrowWide a={childrenToRender[0]} b={childrenToRender[1]} title={title} cols={templateCol} icon={icon?.replace('pi pi-', '')} />`.
-
-### NarrowWideForm
-
-1. Render exactly as `NarrowWide` with `children` path — checks `children.length === 2`, renders narrow/wide slots.
-2. Does not support `a`/`b` props.
-
-### NarrowWideDetails
-
-1. Call `getPConnect().getInheritedProps()` and merge with `{ label, showLabel }` for `propsToUse`.
-2. Set `getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY')` and `setInheritedProp('readOnly', true)`.
-3. Map `getPConnect().getChildren()` → `createElement(PConnectComponent, { ...configObject, key: index })`.
-4. If `showHighlightedData` is true, read `getRawMetadata().config.highlightedData`, set each field's `displayMode = 'STACKED_LARGE_VAL'`, mark `pyStatusWork` fields as `type='TextInput', displayAsStatus=true`, and create components via `getPConnect().createComponent(field, '', 0, {})`.
-5. Wrap everything in `<FieldGroup name={theName}>` where `theName = propsToUse.showLabel && propsToUse.label ? propsToUse.label : ''`.
-6. Layout: highlighted data in `Grid size={{ xs: COLUMN_WIDTHS[i] }}` where `COLUMN_WIDTHS = [4, 8]`, then children in `Grid size={{ xs: 12 }}` rows.
-
-## Visual Specifications
-
-Derived from `NarrowWide.css`:
-
-### Container
-
-| CSS Class                    | Property | Value                         |
-| ---------------------------- | -------- | ----------------------------- |
-| `.psdk-narrow-wide-column`   | Display  | flex or grid (two-column row) |
-| `.psdk-narrow-column-column` | Width    | ~33% (1 of 3 parts)           |
-| `.psdk-wide-column-column`   | Width    | ~67% (2 of 3 parts)           |
-
-**CSS-only implementation notes:**
-
-- `.psdk-narrow-wide-column`: `display: grid; grid-template-columns: 1fr 2fr; gap: 1rem`.
-- `.psdk-narrow-column-column`: takes the first (narrower) grid column.
-- `.psdk-wide-column-column`: takes the second (wider) grid column.
-- On mobile: `grid-template-columns: 1fr` (stacks vertically).
-
-## Edge Cases & Special Logic
-
-- `NarrowWide` supports both `children` and `a`/`b` slot patterns — check `children` length first.
-- `NarrowWideDetails` highlighted data grid uses `[4, 8]` column widths (narrow left, wide right for STACKED_LARGE_VAL fields).
-- `NarrowWideDetails` reads `theName` from `propsToUse` (which merges inherited props) — the `label` prop alone may be overridden by inherited props.
-- Icon cleanup in `NarrowWidePage`: strip `'pi pi-'` prefix from the icon string before passing to `NarrowWide`.
-
-## Dependencies
-
-- `NarrowWidePage`: `getComponentFromRegistry` from `@pega/sdk-react`
-- `NarrowWideDetails`: `getComponentFromRegistry('FieldGroup')`, `PConnectComponent` from `@pega/sdk-react`
-
-## Design System Mapping
-
-**UI control type:** Asymmetric two-column layout (sidebar + main content).
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                                            |
-| ------------------ | -------------------------------------------------------------------------------- |
-| Default (CSS only) | CSS Grid `grid-template-columns: 1fr 2fr; gap: 1rem`                             |
-| MUI                | `<Grid container><Grid size={{ xs: 12, md: 4 }}><Grid size={{ xs: 12, md: 8 }}>` |
-| Ant Design         | `<Row gutter={16}><Col xs={24} md={8}><Col xs={24} md={16}>`                     |
-| Chakra UI          | `<Grid templateColumns={{ base: '1fr', md: '1fr 2fr' }} gap={4}>`                |
-| Shadcn/ui          | Tailwind `grid grid-cols-1 md:grid-cols-[1fr_2fr] gap-4`                         |
-
-When implementing in a specific design system:
-
-- Narrow column ≈ 33% width (1fr of 3fr total)
-- Wide column ≈ 67% width (2fr of 3fr total)
-- `NarrowWideDetails` always forces DISPLAY_ONLY + readOnly on children