@pega/sdk 0.0.2 → 0.0.4

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

@@ -18,10 +18,10 @@ Unlike `SubTabs` or `DetailsSubTabs` where tabs are defined statically in metada
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `referenceList` | `string` | Yes | Property path to the reference list (e.g. `'.pxResults'`) |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop            | Type       | Required | Description                                               |
+| --------------- | ---------- | -------- | --------------------------------------------------------- |
+| `referenceList` | `string`   | Yes      | Property path to the reference list (e.g. `'.pxResults'`) |
+| `getPConnect`   | `function` | Yes      | PConnect getter                                           |
 
 ## Behavioral Contract
 
@@ -37,14 +37,17 @@ Unlike `SubTabs` or `DetailsSubTabs` where tabs are defined statically in metada
 ```
 referenceListData = pConnect.getValue(referenceList + '.pxResults')
 ```
+
 Returns an array of row objects.
 
 ### Tab Views
 
 For each row index `i`:
+
 ```
 tabView = buildView(pConnect, i, '')
 ```
+
 Memoized — recalculate only when `referenceListData` changes.
 
 ### State
@@ -63,6 +66,7 @@ Memoized — recalculate only when `referenceListData` changes.
 Identical tab bar appearance to `SubTabs`.
 
 **CSS-only implementation notes:**
+
 - Same tab bar and panel styles as `SubTabs.md`.
 - Tab count is dynamic — do not hard-code tab widths.
 
@@ -87,15 +91,16 @@ Identical tab bar appearance to `SubTabs`.
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
+| Design System      | Recommended Component                            |
+| ------------------ | ------------------------------------------------ |
 | Default (CSS only) | Custom tab bar, dynamically generated from array |
-| MUI | `<TabContext>` + `<Tabs>` + `<TabPanel>` |
-| Ant Design | `<Tabs items={dynamicItems}>` |
-| Chakra UI | `<Tabs>` with dynamic `<TabList>/<TabPanels>` |
-| Shadcn/ui | `<Tabs>` with mapped triggers and content |
+| MUI                | `<TabContext>` + `<Tabs>` + `<TabPanel>`         |
+| Ant Design         | `<Tabs items={dynamicItems}>`                    |
+| Chakra UI          | `<Tabs>` with dynamic `<TabList>/<TabPanels>`    |
+| Shadcn/ui          | `<Tabs>` with mapped triggers and content        |
 
 When implementing in a specific design system:
+
 - `tablabelProp` resolution via `PCore.getAnnotationUtils().getPropertyName()` is required — do not hardcode the label field
 - `buildView(pConnect, rowIndex, '')` generates the content for each tab — the empty string third arg means no specific child config lookup
 - Tab count is entirely data-driven — handle 0, 1, and many tab cases

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

@@ -18,21 +18,22 @@ Renders a repeating list of field group rows sourced from a PConnect reference l
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `label` | `string` | Yes | Section heading |
-| `showLabel` | `boolean` | No | Whether to show the heading. Default `true` |
-| `fieldHeader` | `string` | No | Property ref for the dynamic row heading. E.g. `'.pyStatusWork'` |
-| `allowTableEdit` | `boolean` | No | Whether to show add/delete row controls. Default `true` |
-| `displayMode` | `string` | No | `'DISPLAY_ONLY'` triggers read-only rendering |
-| `readOnly` | `boolean` | No | Alternative read-only flag |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop             | Type       | Required | Description                                                      |
+| ---------------- | ---------- | -------- | ---------------------------------------------------------------- |
+| `label`          | `string`   | Yes      | Section heading                                                  |
+| `showLabel`      | `boolean`  | No       | Whether to show the heading. Default `true`                      |
+| `fieldHeader`    | `string`   | No       | Property ref for the dynamic row heading. E.g. `'.pyStatusWork'` |
+| `allowTableEdit` | `boolean`  | No       | Whether to show add/delete row controls. Default `true`          |
+| `displayMode`    | `string`   | No       | `'DISPLAY_ONLY'` triggers read-only rendering                    |
+| `readOnly`       | `boolean`  | No       | Alternative read-only flag                                       |
+| `getPConnect`    | `function` | Yes      | PConnect getter                                                  |
 
 ## Behavioral Contract
 
 ### Read-Only Mode
 
 If `displayMode === 'DISPLAY_ONLY'` or `readOnly === true`:
+
 1. Set `setInheritedProp('DISPLAY_ONLY', true)` on the pConn.
 2. Render `<FieldGroup>` — the DSE component that shows data in a read-only layout.
 
@@ -70,6 +71,7 @@ If the field group is inside a read-only context (parent has set `readOnly` or `
 - Flat list of rows — no add/delete controls.
 
 **CSS-only implementation notes:**
+
 - Row section: `border: 1px solid var(--border-color); border-radius: 4px; padding: 1rem; margin-bottom: 0.5rem`.
 - Add button: text button, below the last row.
 - Delete button: icon button, top-right of each row section.
@@ -95,15 +97,16 @@ If the field group is inside a read-only context (parent has set `readOnly` or `
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | Custom row card list with add/delete buttons |
-| MUI | `<Paper>` per row + `<IconButton>` for delete + `<Button>` for add |
-| Ant Design | `<Form.List>` with `<Card>` per row |
-| Chakra UI | Custom repeating section with `<Box>` rows |
-| Shadcn/ui | Custom list with `<Card>` per row + `<Button variant='ghost'>` |
+| Design System      | Recommended Component                                              |
+| ------------------ | ------------------------------------------------------------------ |
+| Default (CSS only) | Custom row card list with add/delete buttons                       |
+| MUI                | `<Paper>` per row + `<IconButton>` for delete + `<Button>` for add |
+| Ant Design         | `<Form.List>` with `<Card>` per row                                |
+| Chakra UI          | Custom repeating section with `<Box>` rows                         |
+| Shadcn/ui          | Custom list with `<Card>` per row + `<Button variant='ghost'>`     |
 
 When implementing in a specific design system:
+
 - The add/delete controls must be hidden when `allowActions` is false
 - Row heading is dynamic — evaluate `fieldHeader` property ref per row
 - `buildView` generates child PConnect views — render them inside each row section

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

@@ -18,17 +18,18 @@ Renders a multi-step form where each section is a tab. Tabs display error badges
 
 ## 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 |
+| 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
@@ -68,12 +69,13 @@ Internally it calls `useGetTabsCount(getPConnect)` to compute `tabErrorCounts`.
 
 ### Tab Bar
 
-| Property | Value |
-|----------|-------|
-| Orientation | Horizontal |
+| 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`.
@@ -99,15 +101,16 @@ Internally it calls `useGetTabsCount(getPConnect)` to compute `tabErrorCounts`.
 
 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 |
+| 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

@@ -18,12 +18,12 @@ Renders an inline dashboard layout consisting of a title heading, a main content
 
 ## 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 |
+| 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
 
@@ -34,6 +34,7 @@ Renders an inline dashboard layout consisting of a title heading, a main content
 ### 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 }}>`.
@@ -41,6 +42,7 @@ Stacked layout — filter panel above main content:
 ### 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 }}>`.
@@ -66,6 +68,7 @@ Side-by-side layout — main content left, filters right:
 ```
 
 **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`.
@@ -90,15 +93,16 @@ Side-by-side layout — main content left, filters right:
 
 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 |
+| 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

@@ -20,12 +20,12 @@ Page-level wrapper for the inline dashboard. Extracts promoted filter definition
 
 ## 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 |
+| 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
 
@@ -42,13 +42,9 @@ In `useEffect([])` (on mount):
 ### Render
 
 ```tsx
-<InlineDashboard
-  title={title}
-  filterPosition={filterPosition}
-  getPConnect={getPConnect}
->
-  {children[0]}           {/* main content */}
-  {filterComponents}      {/* built filter components */}
+<InlineDashboard title={title} filterPosition={filterPosition} getPConnect={getPConnect}>
+  {children[0]} {/* main content */}
+  {filterComponents} {/* built filter components */}
 </InlineDashboard>
 ```
 
@@ -80,6 +76,7 @@ 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/ListPage.md

@@ -22,13 +22,13 @@ Renders a full-page list view by forwarding all props to `ListView` with `bInFor
 
 All props are forwarded to `ListView`. Key props:
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `dataPageName` | `string` | Yes | Data page to load records from |
-| `columns` | `array` | No | Column definitions |
-| `isSearchable` | `boolean` | No | Whether global search is shown |
-| `payload` | `object` | No | Query payload |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop           | Type       | Required | Description                    |
+| -------------- | ---------- | -------- | ------------------------------ |
+| `dataPageName` | `string`   | Yes      | Data page to load records from |
+| `columns`      | `array`    | No       | Column definitions             |
+| `isSearchable` | `boolean`  | No       | Whether global search is shown |
+| `payload`      | `object`   | No       | Query payload                  |
+| `getPConnect`  | `function` | Yes      | PConnect getter                |
 
 ## Behavioral Contract
 
@@ -41,6 +41,7 @@ That is the complete implementation. `bInForm: false` ensures ListView renders w
 ## Visual Specifications
 
 Identical to `ListView` with `bInForm: false`:
+
 - Full outer padding applied.
 - Toolbar occupies full width.
 - Table stretches to fill page width.
@@ -64,5 +65,6 @@ Listed design systems are examples only.
 Implement identically to `ListView` — `ListPage` adds no new UI. The distinction is purely in the `bInForm` prop which controls spacing/chrome.
 
 When implementing in a specific design system:
+
 - `bInForm: false` signals that the list should have page-level layout (more padding, full-width toolbar)
 - No additional logic beyond `ListView` is required

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

@@ -18,24 +18,25 @@ The primary data table component. Renders a sortable, paginated, filterable, and
 
 ## 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 |
+| 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.
@@ -62,11 +63,11 @@ The primary data table component. Renders a sortable, paginated, filterable, and
 
 ### Selection
 
-| `selectionMode` | Control per row | Callback |
-|---|---|---|
-| `'single'` | `<Radio>` | `onRowSelect(rowData)` |
-| `'multi'` | `<Checkbox>` | `onRowsSelect(selectedRows)` |
-| absent | None | None |
+| `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.
@@ -91,14 +92,15 @@ The primary data table component. Renders a sortable, paginated, filterable, and
 
 ## 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 |
+| 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)`.
@@ -125,15 +127,16 @@ The primary data table component. Renders a sortable, paginated, filterable, and
 
 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>` |
+| 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/MultiReferenceReadOnly.md

@@ -18,13 +18,13 @@ Renders a multi-value reference field in read-only mode. Routing is based on the
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `displayAs` | `string` | Yes | UI variant that was used in edit mode |
-| `referenceList` | `string` | No | Property path to the reference list |
-| `readonlyContextList` | `array` | No | Fallback data array when `referenceList` is not resolved |
-| `fieldMetadata` | `object` | No | Field-level metadata |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop                  | Type       | Required | Description                                              |
+| --------------------- | ---------- | -------- | -------------------------------------------------------- |
+| `displayAs`           | `string`   | Yes      | UI variant that was used in edit mode                    |
+| `referenceList`       | `string`   | No       | Property path to the reference list                      |
+| `readonlyContextList` | `array`    | No       | Fallback data array when `referenceList` is not resolved |
+| `fieldMetadata`       | `object`   | No       | Field-level metadata                                     |
+| `getPConnect`         | `function` | Yes      | PConnect getter                                          |
 
 ## Behavioral Contract
 
@@ -50,6 +50,7 @@ else:
 See `SimpleTable.md` and `ListView.md` for detailed visual specs.
 
 **CSS-only notes:**
+
 - Fallback to `readonlyContextList` renders identically to the resolved reference list.
 - No edit controls in either variant.
 
@@ -70,11 +71,12 @@ See `SimpleTable.md` and `ListView.md` for detailed visual specs.
 
 Listed design systems are examples only.
 
-| `displayAs` | Routing | DS Implementation |
-|---|---|---|
-| `readonlyMulti`, `combobox`, `checkboxgroup` | `SimpleTableSelectReadonly` | Link/chip + modal |
-| All others | `SimpleTable` | Flat read-only table |
+| `displayAs`                                  | Routing                     | DS Implementation    |
+| -------------------------------------------- | --------------------------- | -------------------- |
+| `readonlyMulti`, `combobox`, `checkboxgroup` | `SimpleTableSelectReadonly` | Link/chip + modal    |
+| All others                                   | `SimpleTable`               | Flat read-only table |
 
 When implementing in a specific design system:
+
 - The `displayAs` routing list must match the edit-mode variants defined in `DataReference.md`
 - `readonlyContextList` fallback is critical — reference list data may not be available on initial render

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

@@ -17,11 +17,11 @@ Renders two children side by side with the left column narrower than the right.
 
 ## Pega Metadata
 
-| Variant | Registration Key |
-|---------|-----------------|
-| NarrowWide | `NarrowWide` |
-| NarrowWidePage | `NarrowWidePage` |
-| NarrowWideForm | `NarrowWideForm` |
+| Variant           | Registration Key    |
+| ----------------- | ------------------- |
+| NarrowWide        | `NarrowWide`        |
+| NarrowWidePage    | `NarrowWidePage`    |
+| NarrowWideForm    | `NarrowWideForm`    |
 | NarrowWideDetails | `NarrowWideDetails` |
 
 All extend `PConnProps`.
@@ -30,38 +30,38 @@ All extend `PConnProps`.
 
 ### 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) |
+| 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) |
+| 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 |
+| 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 |
+| 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
 
@@ -97,13 +97,14 @@ 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 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.
@@ -127,15 +128,16 @@ Derived from `NarrowWide.css`:
 
 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` |
+| 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