@pega/sdk 0.0.3 → 0.0.4

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

@@ -18,11 +18,11 @@ A case view variant designed for self-service portal channels. Uses a horizontal
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode[]` | Yes | Region children (variable count based on `isObjectType`) |
-| `isObjectType` | `boolean` | No | Whether the case is an object-type (affects child region count) |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop           | Type          | Required | Description                                                     |
+| -------------- | ------------- | -------- | --------------------------------------------------------------- |
+| `children`     | `ReactNode[]` | Yes      | Region children (variable count based on `isObjectType`)        |
+| `isObjectType` | `boolean`     | No       | Whether the case is an object-type (affects child region count) |
+| `getPConnect`  | `function`    | Yes      | PConnect getter                                                 |
 
 ## Behavioral Contract
 
@@ -31,22 +31,25 @@ A case view variant designed for self-service portal channels. Uses a horizontal
 Child indexing depends on `isObjectType`:
 
 **`isObjectType === false` (5 children):**
-| Index | Region |
-|-------|--------|
-| 0 | Summary |
-| 1 | (Header/Stages) |
-| 2 | Main content |
-| 3 | Utilities |
-| 4 | (Additional) |
+
+| Index | Region          |
+| ----- | --------------- |
+| 0     | Summary         |
+| 1     | (Header/Stages) |
+| 2     | Main content    |
+| 3     | Utilities       |
+| 4     | (Additional)    |
 
 **`isObjectType === true` (3 children):**
-| Index | Region |
-|-------|--------|
-| 0 | Summary |
-| 1 | Main content |
-| 2 | Utilities |
+
+| Index | Region       |
+| ----- | ------------ |
+| 0     | Summary      |
+| 1     | Main content |
+| 2     | Utilities    |
 
 Show/hide individual regions based on:
+
 - `showSummary`: always show summary region.
 - `showMain`: always show main content region.
 - `showUtilities`: show utilities only if the region has content.
@@ -54,12 +57,14 @@ Show/hide individual regions based on:
 ### `selfServiceCaseViewHeader`
 
 Renders a slim header bar above the main flex layout showing:
+
 - Case ID / case type name
 - Case status badge
 
 ### Case Summary Data
 
 Call `prepareCaseSummaryData(primaryFields, secondaryFields, getPConnect)` with a filter:
+
 - Only include fields where `availableInChannel.selfService === true`.
 
 ### Utilities Filter
@@ -87,13 +92,14 @@ Call `filterUtilities(utilitiesChildren, getPConnect)` to remove utilities not a
 
 ## Visual Specifications
 
-| Column | Width | Contents |
-|--------|-------|----------|
-| Summary | 25% (fixed) | Case summary fields (self-service filtered) |
-| Main | flex: 1 | Main case content / assignment form |
-| Utilities | 25% (fixed) | Filtered utilities |
+| Column    | Width       | Contents                                    |
+| --------- | ----------- | ------------------------------------------- |
+| Summary   | 25% (fixed) | Case summary fields (self-service filtered) |
+| Main      | flex: 1     | Main case content / assignment form         |
+| Utilities | 25% (fixed) | Filtered utilities                          |
 
 **CSS-only implementation notes:**
+
 - Body layout: `display: flex; flex-direction: row; gap: 1rem`.
 - Summary column: `flex: 0 0 25%; min-width: 0`.
 - Main column: `flex: 1 1 auto; min-width: 0`.
@@ -121,15 +127,16 @@ Call `filterUtilities(utilitiesChildren, getPConnect)` to remove utilities not a
 
 Listed design systems are examples only.
 
-| Design System | Layout | Header Bar |
-|---|---|---|
-| Default (CSS only) | CSS `display:flex` with percentage widths | Custom `<header>` |
-| MUI | `<Box display='flex' flexDirection='row'>` with `<Box flex='0 0 25%'>` | `<Box>` with `<Typography>` |
-| Ant Design | `<Layout>` with `<Sider>` + `<Content>` | `<PageHeader>` |
-| Chakra UI | `<HStack align='stretch'>` with width constraints | `<Flex>` |
-| Shadcn/ui | Tailwind `flex flex-row` | Custom header |
+| Design System      | Layout                                                                 | Header Bar                  |
+| ------------------ | ---------------------------------------------------------------------- | --------------------------- |
+| Default (CSS only) | CSS `display:flex` with percentage widths                              | Custom `<header>`           |
+| MUI                | `<Box display='flex' flexDirection='row'>` with `<Box flex='0 0 25%'>` | `<Box>` with `<Typography>` |
+| Ant Design         | `<Layout>` with `<Sider>` + `<Content>`                                | `<PageHeader>`              |
+| Chakra UI          | `<HStack align='stretch'>` with width constraints                      | `<Flex>`                    |
+| Shadcn/ui          | Tailwind `flex flex-row`                                               | Custom header               |
 
 When implementing in a specific design system:
+
 - `isObjectType` determines child count — do not assume fixed child order without checking this flag
 - Self-service channel filter on summary data is mandatory — `availableInChannel.selfService === true`
 - `filterUtilities` result controls utilities column visibility

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

@@ -18,16 +18,16 @@ Entry-point template for embedded table data in a form or detail view. Routes to
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `multiRecordDisplayAs` | `string` | No | `'fieldGroup'` delegates to FieldGroupTemplate; else table |
-| `fieldMetadata` | `object` | No | Field-level metadata including `dataRetrievalType` |
-| `referenceList` | `string` | No | Property path to the reference list |
-| `displayAs` | `string` | No | For SimpleTableSelectReadonly: `'readonlyMulti'`, `'combobox'`, `'checkboxgroup'` routing |
-| `selectionMode` | `string` | No | `'single'` or `'multi'` (for SimpleTableSelect) |
-| `displayMode` | `string` | No | `'DISPLAY_ONLY'` triggers read-only sub-variant |
-| `readOnly` | `boolean` | No | Alternative read-only flag |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop                   | Type       | Required | Description                                                                               |
+| ---------------------- | ---------- | -------- | ----------------------------------------------------------------------------------------- |
+| `multiRecordDisplayAs` | `string`   | No       | `'fieldGroup'` delegates to FieldGroupTemplate; else table                                |
+| `fieldMetadata`        | `object`   | No       | Field-level metadata including `dataRetrievalType`                                        |
+| `referenceList`        | `string`   | No       | Property path to the reference list                                                       |
+| `displayAs`            | `string`   | No       | For SimpleTableSelectReadonly: `'readonlyMulti'`, `'combobox'`, `'checkboxgroup'` routing |
+| `selectionMode`        | `string`   | No       | `'single'` or `'multi'` (for SimpleTableSelect)                                           |
+| `displayMode`          | `string`   | No       | `'DISPLAY_ONLY'` triggers read-only sub-variant                                           |
+| `readOnly`             | `boolean`  | No       | Alternative read-only flag                                                                |
+| `getPConnect`          | `function` | Yes      | PConnect getter                                                                           |
 
 ## Behavioral Contract
 
@@ -47,6 +47,7 @@ else:
 Full MUI table with add/delete rows, inline editing, sort, filter, and column customization (~600+ lines).
 
 Key behaviors:
+
 1. **Row data source:** `referenceList` property path via `pConn.getValue(referenceList + '.pxResults')`.
 2. **Add row:** `pConn.getListActions().insert({})`.
 3. **Delete row:** `pConn.getListActions().deleteEntry(index)`.
@@ -58,6 +59,7 @@ Key behaviors:
 ### SimpleTableSelect — Selection Mode
 
 Wraps `ListView` with additional selection configuration:
+
 - Passes `additionalTableConfig` with `selectionMode: 'single'` or `'multi'`.
 - On selection: calls `pConn.getListActions().setSelectedRow(selectedData)`.
 - Used when `DataReference` routes to table-based selection.
@@ -72,15 +74,16 @@ Wraps `ListView` with additional selection configuration:
 
 ### SimpleTableManual
 
-| Element | Description |
-|---------|-------------|
-| Toolbar | Column settings button, filter button, optional search |
-| Table | Full-width, alternating row colors |
-| Add row | `"+ Add row"` button below the table |
-| Delete row | Trash icon per row (rightmost column) |
-| Column settings | Popover with checkboxes for visibility toggles |
+| Element         | Description                                            |
+| --------------- | ------------------------------------------------------ |
+| Toolbar         | Column settings button, filter button, optional search |
+| Table           | Full-width, alternating row colors                     |
+| Add row         | `"+ Add row"` button below the table                   |
+| Delete row      | Trash icon per row (rightmost column)                  |
+| Column settings | Popover with checkboxes for visibility toggles         |
 
 **CSS-only implementation notes:**
+
 - Table: `width: 100%; border-collapse: collapse`.
 - Add row button: `margin-top: 0.5rem; text-align: left`.
 - Delete cell: `width: 40px; text-align: center`.
@@ -88,11 +91,11 @@ Wraps `ListView` with additional selection configuration:
 
 ### SimpleTableSelectReadonly
 
-| Element | Description |
-|---------|-------------|
-| Trigger | Link or chip showing selection count |
-| Modal | Full-screen or large dialog with SimpleTableManual |
-| Modal close | `X` button in modal header |
+| Element     | Description                                        |
+| ----------- | -------------------------------------------------- |
+| Trigger     | Link or chip showing selection count               |
+| Modal       | Full-screen or large dialog with SimpleTableManual |
+| Modal close | `X` button in modal header                         |
 
 ## Edge Cases & Special Logic
 
@@ -115,13 +118,14 @@ Wraps `ListView` with additional selection configuration:
 
 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>` |
+| 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:
+
 - 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/.github/skills/template-skills/SingleReferenceReadOnly.md

@@ -18,18 +18,18 @@ Renders a single data reference field in read-only mode. For fields that were di
 
 ## Props
 
-| Prop | 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 |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop              | 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                           |
+| `getPConnect`     | `function` | Yes      | PConnect getter                                           |
 
 ## Behavioral Contract
 
@@ -40,18 +40,21 @@ editableComponents = ['AutoComplete', 'SimpleTableSelect', 'Dropdown']
 ```
 
 If `displayAs` 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 using `<FormControl variant='standard'>` + `<FormLabel>` + value text.
 
 ### Layout
 
 For both variants, wrap with:
+
 ```tsx
-<FormControl variant='standard' sx={{ flexDirection: 'row' }}>
+<FormControl variant="standard" sx={{ flexDirection: 'row' }}>
   <FormLabel sx={{ marginRight: '2rem' }}>{label}</FormLabel>
   {semanLinkOrValue}
 </FormControl>
@@ -59,12 +62,13 @@ For both variants, wrap with:
 
 ## Visual Specifications
 
-| Variant | Layout |
-|---------|--------|
-| SemanticLink | Label (left) + clickable link (right) |
-| Plain read-only | Label (left) + plain text (right) |
+| 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`.
@@ -89,15 +93,16 @@ For both variants, wrap with:
 
 Listed design systems are examples only.
 
-| Design System | Semantic Link | Plain Read-Only |
-|---|---|---|
-| Default (CSS only) | `<a>` with case navigation | `<span>` |
-| MUI | `SemanticLink` rendered via `createComponent` | `<Typography>` |
-| Ant Design | `<Typography.Link>` | `<Typography.Text>` |
-| Chakra UI | `<Link>` | `<Text>` |
-| Shadcn/ui | Custom link | `<span>` |
+| Design System      | Semantic Link                                 | Plain Read-Only     |
+| ------------------ | --------------------------------------------- | ------------------- |
+| Default (CSS only) | `<a>` with case navigation                    | `<span>`            |
+| MUI                | `SemanticLink` rendered via `createComponent` | `<Typography>`      |
+| Ant Design         | `<Typography.Link>`                           | `<Typography.Text>` |
+| Chakra UI          | `<Link>`                                      | `<Text>`            |
+| Shadcn/ui          | Custom link                                   | `<span>`            |
 
 When implementing in a specific design system:
+
 - The `editableComponents` list (`'AutoComplete'`, `'SimpleTableSelect'`, `'Dropdown'`) controls semantic link vs plain display
 - `SemanticLink` must be rendered via `createComponent` — do not implement the link logic directly in this component
 - Horizontal label + value layout (row direction) is required

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

@@ -18,10 +18,10 @@ Renders a horizontal tab bar for navigating between case view sections. Uses sha
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode[]` | Yes | `children[0]` is the deferred-loaded tabs container |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop          | Type          | Required | Description                                         |
+| ------------- | ------------- | -------- | --------------------------------------------------- |
+| `children`    | `ReactNode[]` | Yes      | `children[0]` is the deferred-loaded tabs container |
+| `getPConnect` | `function`    | Yes      | PConnect getter                                     |
 
 ## Behavioral Contract
 
@@ -43,6 +43,7 @@ Renders a horizontal tab bar for navigating between case view sections. Uses sha
 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`.
@@ -51,6 +52,7 @@ Identical to `DetailsSubTabs` except no heading above the tab bar.
 ## 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
@@ -65,15 +67,16 @@ See `DetailsSubTabs.md` for shared edge cases. Additional:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | Custom tab bar with CSS underline indicator |
-| MUI | `<TabContext>` + `<Tabs>` + `<TabPanel>` from `@mui/lab` |
-| Ant Design | `<Tabs>` with `items` array |
-| Chakra UI | `<Tabs>` + `<TabList>` + `<TabPanels>` |
-| Shadcn/ui | `<Tabs>` + `<TabsList>` + `<TabsContent>` |
+| Design System      | Recommended Component                                    |
+| ------------------ | -------------------------------------------------------- |
+| Default (CSS only) | Custom tab bar with CSS underline indicator              |
+| MUI                | `<TabContext>` + `<Tabs>` + `<TabPanel>` from `@mui/lab` |
+| Ant Design         | `<Tabs>` with `items` array                              |
+| Chakra UI          | `<Tabs>` + `<TabList>` + `<TabPanels>`                   |
+| Shadcn/ui          | `<Tabs>` + `<TabsList>` + `<TabsContent>`                |
 
 When implementing in a specific design system:
+
 - 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/.github/skills/template-skills/TwoColumn.md

@@ -16,20 +16,20 @@ Renders two child components side by side in a responsive grid. Column widths ar
 
 ## Pega Metadata
 
-| Variant | Registration Key |
-|---------|-----------------|
-| TwoColumn | `TwoColumn` |
-| TwoColumnPage | `TwoColumnPage` |
-| TwoColumnTab | `TwoColumnTab` |
+| Variant       | Registration Key |
+| ------------- | ---------------- |
+| TwoColumn     | `TwoColumn`      |
+| TwoColumnPage | `TwoColumnPage`  |
+| TwoColumnTab  | `TwoColumnTab`   |
 
 All three extend `PConnProps`. Children are received as React `children` (not via `getPConnect().getChildren()`).
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode[]` | Yes | Exactly 2 children (left column, right column) |
-| `templateCol` | `string` | No | Column width ratio string, e.g., `'1fr 1fr'`, `'2fr 1fr'`. Default `'1fr 1fr'` |
+| Prop          | Type          | Required | Description                                                                    |
+| ------------- | ------------- | -------- | ------------------------------------------------------------------------------ |
+| `children`    | `ReactNode[]` | Yes      | Exactly 2 children (left column, right column)                                 |
+| `templateCol` | `string`      | No       | Column width ratio string, e.g., `'1fr 1fr'`, `'2fr 1fr'`. Default `'1fr 1fr'` |
 
 ## Sub-Variants
 
@@ -66,35 +66,36 @@ Derived from `TwoColumn.tsx` and `TwoColumnTab.tsx` makeStyles:
 
 ### Column Style
 
-| Property | Value |
-|----------|-------|
-| Display | grid |
-| Gap | 1rem |
+| Property      | Value                                 |
+| ------------- | ------------------------------------- |
+| Display       | grid                                  |
+| Gap           | 1rem                                  |
 | Align content | baseline (children stack top-aligned) |
 
 ### Grid Spacing
 
-| Property | Value |
-|----------|-------|
+| Property          | Value                     |
+| ----------------- | ------------------------- |
 | Container spacing | 1 (≈ 8px between columns) |
 
 ### Responsive Behavior
 
-| Breakpoint | Column A | Column B |
-|-----------|----------|----------|
-| xs (mobile) | 12/12 (full width) | 12/12 (full width, stacks below) |
-| md+ (desktop) | `aSize`/12 | `bSize`/12 |
+| Breakpoint    | Column A           | Column B                         |
+| ------------- | ------------------ | -------------------------------- |
+| xs (mobile)   | 12/12 (full width) | 12/12 (full width, stacks below) |
+| md+ (desktop) | `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%) |
+| `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: start`.
 - Outer grid: `display: grid; grid-template-columns: <aFraction>fr <bFraction>fr; gap: 8px`.
 - Mobile: `grid-template-columns: 1fr` (single column stack).
@@ -117,15 +118,16 @@ Derived from `TwoColumn.tsx` and `TwoColumnTab.tsx` makeStyles:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | CSS Grid with `grid-template-columns: <a>fr <b>fr; gap: 8px` |
-| MUI | `<Grid container spacing={1}><Grid size={{ xs: 12, md: N }}>` |
-| Ant Design | `<Row gutter={8}><Col xs={24} md={N * 2}>` (Ant uses 24-column grid) |
-| Chakra UI | `<SimpleGrid columns={{ base: 1, md: 2 }} spacing={2}>` |
-| Shadcn/ui | Tailwind `grid grid-cols-1 md:grid-cols-[<a>fr_<b>fr] gap-2` |
+| Design System      | Recommended Component                                                |
+| ------------------ | -------------------------------------------------------------------- |
+| Default (CSS only) | CSS Grid with `grid-template-columns: <a>fr <b>fr; gap: 8px`         |
+| MUI                | `<Grid container spacing={1}><Grid size={{ xs: 12, md: N }}>`        |
+| Ant Design         | `<Row gutter={8}><Col xs={24} md={N * 2}>` (Ant uses 24-column grid) |
+| Chakra UI          | `<SimpleGrid columns={{ base: 1, md: 2 }} spacing={2}>`              |
+| Shadcn/ui          | Tailwind `grid grid-cols-1 md:grid-cols-[<a>fr_<b>fr] gap-2`         |
 
 When implementing in a specific design system:
+
 - Parse `templateCol` using the same ratio algorithm (strip units, divide 12 by total)
 - Apply `align-content: baseline` so children within each column stack top-aligned
 - Collapse to single column on mobile breakpoint

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

@@ -19,11 +19,11 @@ Renders two children side by side with the left column wider than the right. Typ
 
 ## Pega Metadata
 
-| Variant | Registration Key |
-|---------|-----------------|
-| WideNarrow | `WideNarrow` |
-| WideNarrowPage | `WideNarrowPage` |
-| WideNarrowForm | `WideNarrowForm` |
+| Variant           | Registration Key    |
+| ----------------- | ------------------- |
+| WideNarrow        | `WideNarrow`        |
+| WideNarrowPage    | `WideNarrowPage`    |
+| WideNarrowForm    | `WideNarrowForm`    |
 | WideNarrowDetails | `WideNarrowDetails` |
 
 All extend `PConnProps`.
@@ -32,38 +32,38 @@ All extend `PConnProps`.
 
 ### 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) |
+| 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)                                   |
 
 ### 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) |
+| 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)                  |
 
 ### WideNarrowForm
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode[]` | Yes | Two children rendered in wide/narrow slots |
+| Prop       | Type          | Required | Description                                |
+| ---------- | ------------- | -------- | ------------------------------------------ |
+| `children` | `ReactNode[]` | Yes      | Two children rendered in wide/narrow slots |
 
 ### WideNarrowDetails
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `label` | `string` | No | Section label for FieldGroup |
-| `showLabel` | `boolean` | No | Whether to show the label. Default `true` |
-| `showHighlightedData` | `boolean` | No | Whether to render highlighted data fields. Default `false` |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop                  | Type       | Required | Description                                                |
+| --------------------- | ---------- | -------- | ---------------------------------------------------------- |
+| `label`               | `string`   | No       | Section label for FieldGroup                               |
+| `showLabel`           | `boolean`  | No       | Whether to show the label. Default `true`                  |
+| `showHighlightedData` | `boolean`  | No       | Whether to render highlighted data fields. Default `false` |
+| `getPConnect`         | `function` | Yes      | PConnect getter                                            |
 
 ## Behavioral Contract
 
@@ -98,13 +98,14 @@ Derived from `WideNarrow.css`:
 
 ### Container
 
-| CSS Class | Property | Value |
-|-----------|----------|-------|
-| `.psdk-wide-narrow-column` | Display | two-column row layout |
-| `.psdk-wide-column-column` | Width | ~67% (2 of 3 parts) — LEFT column |
-| `.psdk-narrow-column-column` | Width | ~33% (1 of 3 parts) — RIGHT column |
+| CSS Class                    | Property | Value                              |
+| ---------------------------- | -------- | ---------------------------------- |
+| `.psdk-wide-narrow-column`   | Display  | two-column row layout              |
+| `.psdk-wide-column-column`   | Width    | ~67% (2 of 3 parts) — LEFT column  |
+| `.psdk-narrow-column-column` | Width    | ~33% (1 of 3 parts) — RIGHT column |
 
 **CSS-only implementation notes:**
+
 - `.psdk-wide-narrow-column`: `display: grid; grid-template-columns: 2fr 1fr; gap: 1rem`.
 - Wide column (left): `2fr` — takes the first grid column.
 - Narrow column (right): `1fr` — takes the second grid column.
@@ -112,12 +113,12 @@ Derived from `WideNarrow.css`:
 
 ### Key Difference from NarrowWide
 
-| | NarrowWide | WideNarrow |
-|---|---|---|
-| Left column | Narrow (~33%) | Wide (~67%) |
-| Right column | Wide (~67%) | Narrow (~33%) |
-| CSS container class | `.psdk-narrow-wide-column` | `.psdk-wide-narrow-column` |
-| `COLUMN_WIDTHS` (Details) | `[4, 8]` | `[8, 4]` |
+|                           | NarrowWide                 | WideNarrow                 |
+| ------------------------- | -------------------------- | -------------------------- |
+| Left column               | Narrow (~33%)              | Wide (~67%)                |
+| Right column              | Wide (~67%)                | Narrow (~33%)              |
+| CSS container class       | `.psdk-narrow-wide-column` | `.psdk-wide-narrow-column` |
+| `COLUMN_WIDTHS` (Details) | `[4, 8]`                   | `[8, 4]`                   |
 
 ## Edge Cases & Special Logic
 
@@ -136,15 +137,16 @@ Derived from `WideNarrow.css`:
 
 Listed design systems are examples only.
 
-| 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` |
+| 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