@pega/sdk 0.0.3 → 0.0.4

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

@@ -18,11 +18,11 @@ Renders a form's fields in a 1, 2, or 3-column grid layout. Children come from a
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `NumCols` | `string` | No | Number of columns: `'1'`, `'2'`, or `'3'`. Default `'1'` |
-| `instructions` | `string` | No | HTML instruction text shown above the form |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop           | Type       | Required | Description                                              |
+| -------------- | ---------- | -------- | -------------------------------------------------------- |
+| `NumCols`      | `string`   | No       | Number of columns: `'1'`, `'2'`, or `'3'`. Default `'1'` |
+| `instructions` | `string`   | No       | HTML instruction text shown above the form               |
+| `getPConnect`  | `function` | Yes      | PConnect getter                                          |
 
 ## Behavioral Contract
 
@@ -47,13 +47,14 @@ Derived from `DefaultForm.css`:
 
 ### Column Layouts
 
-| Class | Layout |
-|-------|--------|
-| `psdk-default-form-one-column` | Single column, full width |
-| `psdk-default-form-two-column` | Two equal columns |
-| `psdk-default-form-three-column` | Three equal columns |
+| Class                            | Layout                    |
+| -------------------------------- | ------------------------- |
+| `psdk-default-form-one-column`   | Single column, full width |
+| `psdk-default-form-two-column`   | Two equal columns         |
+| `psdk-default-form-three-column` | Three equal columns       |
 
 **CSS-only implementation notes:**
+
 - One column: `display: grid; grid-template-columns: 1fr; gap: 1rem`.
 - Two column: `display: grid; grid-template-columns: 1fr 1fr; gap: 1rem`.
 - Three column: `display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem`.
@@ -62,10 +63,10 @@ Derived from `DefaultForm.css`:
 
 ### Instruction Text
 
-| Property | Value |
-|----------|-------|
-| CSS class | `psdk-default-form-instruction-text` |
-| Content | Raw HTML rendered with `dangerouslySetInnerHTML` |
+| Property  | Value                                            |
+| --------- | ------------------------------------------------ |
+| CSS class | `psdk-default-form-instruction-text`             |
+| Content   | Raw HTML rendered with `dangerouslySetInnerHTML` |
 
 ## Edge Cases & Special Logic
 
@@ -88,15 +89,16 @@ Derived from `DefaultForm.css`:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | CSS Grid with column count driven by `NumCols` |
-| MUI | CSS Grid via `sx` prop or makeStyles |
-| Ant Design | `<Form layout='vertical'>` with `<Row>/<Col>` for multi-column |
-| Chakra UI | `<SimpleGrid columns={N} spacing={4}>` |
-| Shadcn/ui | Tailwind `grid grid-cols-1/2/3 gap-4` |
+| Design System      | Recommended Component                                          |
+| ------------------ | -------------------------------------------------------------- |
+| Default (CSS only) | CSS Grid with column count driven by `NumCols`                 |
+| MUI                | CSS Grid via `sx` prop or makeStyles                           |
+| Ant Design         | `<Form layout='vertical'>` with `<Row>/<Col>` for multi-column |
+| Chakra UI          | `<SimpleGrid columns={N} spacing={4}>`                         |
+| Shadcn/ui          | Tailwind `grid grid-cols-1/2/3 gap-4`                          |
 
 When implementing in a specific design system:
+
 - `NumCols` is always a string (`'1'`/`'2'`/`'3'`) — parse before use
 - Instructions HTML is rendered above the form, before any fields
 - Each child field must be subscribed to the store for reactive visibility/prop updates

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

@@ -18,20 +18,20 @@ Renders a page's child regions in a responsive grid layout. The number and propo
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `layout` | `'one-column' \| 'two-column' \| 'narrow-wide' \| 'wide-narrow' \| 'dynamic'` | No | Column layout. Default `'one-column'` |
-| `children` | `ReactNode \| ReactNode[]` | Yes | Child region components to render in columns |
-| `title` | `string` | Yes | Page title (part of `CommonPageProps`, not directly rendered) |
-| `icon` | `string` | Yes | Page icon (part of `CommonPageProps`, not directly rendered) |
-| `localeReference` | `string` | Yes | Locale reference key |
-| `enableBanner` | `boolean` | No | If `true`, render `Banner` hero with children as `a`/`b` columns |
-| `heading` | `string` | No | Banner heading. Default `''` |
-| `message` | `string` | No | Banner message. Default `''` |
-| `imageTheme` | `'light' \| 'dark' \| undefined` | No | Banner image theme |
-| `backgroundImage` | `string` | No | Banner background image URL. Default `''` |
-| `backgroundColor` | `string` | No | Banner background color. Default `''` |
-| `tintImage` | `boolean` | No | Banner image tint flag |
+| Prop              | Type                                                                          | Required | Description                                                      |
+| ----------------- | ----------------------------------------------------------------------------- | -------- | ---------------------------------------------------------------- |
+| `layout`          | `'one-column' \| 'two-column' \| 'narrow-wide' \| 'wide-narrow' \| 'dynamic'` | No       | Column layout. Default `'one-column'`                            |
+| `children`        | `ReactNode \| ReactNode[]`                                                    | Yes      | Child region components to render in columns                     |
+| `title`           | `string`                                                                      | Yes      | Page title (part of `CommonPageProps`, not directly rendered)    |
+| `icon`            | `string`                                                                      | Yes      | Page icon (part of `CommonPageProps`, not directly rendered)     |
+| `localeReference` | `string`                                                                      | Yes      | Locale reference key                                             |
+| `enableBanner`    | `boolean`                                                                     | No       | If `true`, render `Banner` hero with children as `a`/`b` columns |
+| `heading`         | `string`                                                                      | No       | Banner heading. Default `''`                                     |
+| `message`         | `string`                                                                      | No       | Banner message. Default `''`                                     |
+| `imageTheme`      | `'light' \| 'dark' \| undefined`                                              | No       | Banner image theme                                               |
+| `backgroundImage` | `string`                                                                      | No       | Banner background image URL. Default `''`                        |
+| `backgroundColor` | `string`                                                                      | No       | Banner background color. Default `''`                            |
+| `tintImage`       | `boolean`                                                                     | No       | Banner image tint flag                                           |
 
 ## Behavioral Contract
 
@@ -58,20 +58,21 @@ Renders a page's child regions in a responsive grid layout. The number and propo
 
 ### Column Widths
 
-| `layout` | Column sizes (MUI 12-grid) |
-|----------|--------------------------|
-| `'one-column'` | 12 |
-| `'two-column'` | 6, 6 |
-| `'narrow-wide'` | 4, 8 |
-| `'wide-narrow'` | 8, 4 |
+| `layout`        | Column sizes (MUI 12-grid) |
+| --------------- | -------------------------- |
+| `'one-column'`  | 12                         |
+| `'two-column'`  | 6, 6                       |
+| `'narrow-wide'` | 4, 8                       |
+| `'wide-narrow'` | 8, 4                       |
 
 ### Grid Spacing
 
-| Property | Value |
-|----------|-------|
+| Property          | Value                     |
+| ----------------- | ------------------------- |
 | Container spacing | 1 (≈ 8px between columns) |
 
 **CSS-only implementation notes:**
+
 - One-column: `display: grid; grid-template-columns: 1fr; gap: 8px`.
 - Two-column: `display: grid; grid-template-columns: 1fr 1fr; gap: 8px`.
 - Narrow-wide: `display: grid; grid-template-columns: 1fr 2fr; gap: 8px`.
@@ -96,15 +97,16 @@ Renders a page's child regions in a responsive grid layout. The number and propo
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | CSS Grid with column template driven by `layout` prop |
-| MUI | `<Grid container spacing={1}>` with `<Grid size={N}>` per child |
-| Ant Design | `<Row gutter={8}>` with `<Col span={N * 2}>` (24-col grid) |
-| Chakra UI | `<SimpleGrid columns={{ base: 1, md: N }}>` |
-| Shadcn/ui | Tailwind grid utilities matching the layout |
+| Design System      | Recommended Component                                           |
+| ------------------ | --------------------------------------------------------------- |
+| Default (CSS only) | CSS Grid with column template driven by `layout` prop           |
+| MUI                | `<Grid container spacing={1}>` with `<Grid size={N}>` per child |
+| Ant Design         | `<Row gutter={8}>` with `<Col span={N * 2}>` (24-col grid)      |
+| Chakra UI          | `<SimpleGrid columns={{ base: 1, md: N }}>`                     |
+| Shadcn/ui          | Tailwind grid utilities matching the layout                     |
 
 When implementing in a specific design system:
+
 - Map `layout` prop to the appropriate column template
 - Banner mode delegates to the `Banner` component — implement Banner first
 - All children are sized uniformly within their column (no per-child overrides)

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

@@ -18,12 +18,12 @@ Renders a labeled group of read-only fields in a single-column vertical stack. F
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `label` | `string` | Yes | Section heading for the FieldGroup wrapper |
-| `showLabel` | `boolean` | Yes | Whether to show the section label |
-| `showHighlightedData` | `boolean` | Yes | Whether to render highlighted fields above children |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop                  | Type       | Required | Description                                         |
+| --------------------- | ---------- | -------- | --------------------------------------------------- |
+| `label`               | `string`   | Yes      | Section heading for the FieldGroup wrapper          |
+| `showLabel`           | `boolean`  | Yes      | Whether to show the section label                   |
+| `showHighlightedData` | `boolean`  | Yes      | Whether to render highlighted fields above children |
+| `getPConnect`         | `function` | Yes      | PConnect getter                                     |
 
 ## Behavioral Contract
 
@@ -44,13 +44,14 @@ Renders a labeled group of read-only fields in a single-column vertical stack. F
 
 ### Overall Layout
 
-| Property | Value |
-|----------|-------|
-| Column structure | Single column (xs: 12 for each child) |
-| Inner spacing | Grid spacing 1 (≈ 8px between fields) |
+| Property                 | Value                                                    |
+| ------------------------ | -------------------------------------------------------- |
+| Column structure         | Single column (xs: 12 for each child)                    |
+| Inner spacing            | Grid spacing 1 (≈ 8px between fields)                    |
 | Highlighted data padding | `padding: 0 0 1em` (space below before regular children) |
 
 **CSS-only implementation notes:**
+
 - Outer wrapper: `FieldGroup` component (see `FieldGroupDSE.md` for styles).
 - Children grid: `display: grid; grid-template-columns: 1fr; gap: 8px`.
 - Highlighted data row: `display: grid; grid-template-columns: 1fr; gap: 8px; padding-bottom: 1rem`.
@@ -74,15 +75,16 @@ Renders a labeled group of read-only fields in a single-column vertical stack. F
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<fieldset>/<legend>` wrapper with CSS grid single column |
-| MUI | `<Grid container spacing={1}>` with `<Grid size={{ xs: 12 }}>` per field |
-| Ant Design | `<Card title={label}>` with `<Row><Col span={24}>` per field |
-| Chakra UI | `<Box>` with heading + `<Stack spacing={2}>` |
-| Shadcn/ui | `<Card><CardHeader><CardContent>` with stacked field items |
+| Design System      | Recommended Component                                                    |
+| ------------------ | ------------------------------------------------------------------------ |
+| Default (CSS only) | `<fieldset>/<legend>` wrapper with CSS grid single column                |
+| MUI                | `<Grid container spacing={1}>` with `<Grid size={{ xs: 12 }}>` per field |
+| Ant Design         | `<Card title={label}>` with `<Row><Col span={24}>` per field             |
+| Chakra UI          | `<Box>` with heading + `<Stack spacing={2}>`                             |
+| Shadcn/ui          | `<Card><CardHeader><CardContent>` with stacked field items               |
 
 When implementing in a specific design system:
+
 - All children must have `displayMode='DISPLAY_ONLY'` and `readOnly=true` inherited
 - Highlighted data uses `STACKED_LARGE_VAL` — larger/bolder value display
 - `showLabel=false` hides the section heading entirely

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

@@ -18,12 +18,12 @@ Renders a tabbed layout for a details region. Each tab contains display-only con
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode[]` | Yes | Tab content — `children[0]` is the deferred-loaded tabs container |
-| `label` | `string` | Yes | Section heading shown above tabs when `showLabel` is true |
-| `showLabel` | `boolean` | No | Whether to show the section heading. Default `true` |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop          | Type          | Required | Description                                                       |
+| ------------- | ------------- | -------- | ----------------------------------------------------------------- |
+| `children`    | `ReactNode[]` | Yes      | Tab content — `children[0]` is the deferred-loaded tabs container |
+| `label`       | `string`      | Yes      | Section heading shown above tabs when `showLabel` is true         |
+| `showLabel`   | `boolean`     | No       | Whether to show the section heading. Default `true`               |
+| `getPConnect` | `function`    | Yes      | PConnect getter                                                   |
 
 ## Behavioral Contract
 
@@ -43,19 +43,20 @@ Renders a tabbed layout for a details region. Each tab contains display-only con
 
 ### Heading
 
-| Property | Value |
-|----------|-------|
-| Tag | `<h3>` |
+| Property        | Value                           |
+| --------------- | ------------------------------- |
+| Tag             | `<h3>`                          |
 | Shown only when | `propsToUse.showLabel === true` |
 
 ### Tab Bar
 
-| Property | Value |
-|----------|-------|
-| Scrollable | Not specified (default non-scrollable in reference implementation) |
-| Tab text transform | Inherits design system default |
+| Property           | Value                                                              |
+| ------------------ | ------------------------------------------------------------------ |
+| Scrollable         | Not specified (default non-scrollable in reference implementation) |
+| Tab text transform | Inherits design system default                                     |
 
 **CSS-only implementation notes:**
+
 - Heading: `font-size: 1.25rem; font-weight: 600; margin-bottom: 8px`.
 - Tab bar: `display: flex; border-bottom: 2px solid var(--divider); gap: 0`.
 - Each tab: `padding: 8px 16px; cursor: pointer; border-bottom: 2px solid transparent`.
@@ -81,15 +82,16 @@ Renders a tabbed layout for a details region. Each tab contains display-only con
 
 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:
+
 - `getVisibleTabs` and `getTransientTabs` are tabUtils helpers — use them regardless of UI library
 - Tab content is lazily loaded via the transient tab pattern
 - Optional `<h3>` heading above the tab bar (controlled by `showLabel`)

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

@@ -20,12 +20,12 @@ Identical to `Details` and `DetailsTwoColumn` in all behavior except children ar
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `label` | `string` | Yes | Section heading for the FieldGroup wrapper |
-| `showLabel` | `boolean` | No | Whether to show the section label. Default `true` |
-| `showHighlightedData` | `boolean` | No | Whether to render highlighted fields above children. Default `false` |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop                  | Type       | Required | Description                                                          |
+| --------------------- | ---------- | -------- | -------------------------------------------------------------------- |
+| `label`               | `string`   | Yes      | Section heading for the FieldGroup wrapper                           |
+| `showLabel`           | `boolean`  | No       | Whether to show the section label. Default `true`                    |
+| `showHighlightedData` | `boolean`  | No       | Whether to render highlighted fields above children. Default `false` |
+| `getPConnect`         | `function` | Yes      | PConnect getter                                                      |
 
 ## Behavioral Contract
 
@@ -39,13 +39,14 @@ All steps identical to `Details`, except:
 
 ### Column Structure
 
-| | Details | DetailsTwoColumn | DetailsThreeColumn |
-|-|---------|-----------------|-------------------|
-| Column width per child | xs: 12 | xs: 6 | **xs: 4** |
-| Columns per row | 1 | 2 | **3** |
-| Highlighted data column | xs: 12 | xs: 6 | **xs: 4** |
+|                         | Details | DetailsTwoColumn | DetailsThreeColumn |
+| ----------------------- | ------- | ---------------- | ------------------ |
+| Column width per child  | xs: 12  | xs: 6            | **xs: 4**          |
+| Columns per row         | 1       | 2                | **3**              |
+| Highlighted data column | xs: 12  | xs: 6            | **xs: 4**          |
 
 **CSS-only implementation notes:**
+
 - Children grid: `display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px`.
 - Highlighted data row: `display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding-bottom: 1rem`.
 - Wrap in FieldGroup (see `FieldGroup.md` DSE skill).
@@ -65,14 +66,15 @@ All edge cases identical to `Details`. See `Details.md`.
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
+| Design System      | Recommended Component                                                         |
+| ------------------ | ----------------------------------------------------------------------------- |
 | Default (CSS only) | `<fieldset>/<legend>` with CSS `grid-template-columns: 1fr 1fr 1fr; gap: 8px` |
-| MUI | `<Grid container spacing={1}>` with `<Grid size={{ xs: 4 }}>` per field |
-| Ant Design | `<Descriptions column={3}>` or `<Row><Col span={8}>` per field |
-| Chakra UI | `<SimpleGrid columns={3} spacing={2}>` |
-| Shadcn/ui | Tailwind `grid grid-cols-3 gap-2` |
+| MUI                | `<Grid container spacing={1}>` with `<Grid size={{ xs: 4 }}>` per field       |
+| Ant Design         | `<Descriptions column={3}>` or `<Row><Col span={8}>` per field                |
+| Chakra UI          | `<SimpleGrid columns={3} spacing={2}>`                                        |
+| Shadcn/ui          | Tailwind `grid grid-cols-3 gap-2`                                             |
 
 When implementing in a specific design system:
+
 - 3-column layout — each field takes one-third of the available width
 - All other behaviors inherited from `Details` (DISPLAY_ONLY, readOnly, FieldGroup, highlighted data)

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

@@ -20,12 +20,12 @@ Identical to `Details` in all behavior except children are distributed into a **
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `label` | `string` | Yes | Section heading for the FieldGroup wrapper |
-| `showLabel` | `boolean` | No | Whether to show the section label. Default `true` |
-| `showHighlightedData` | `boolean` | No | Whether to render highlighted fields above children. Default `false` |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop                  | Type       | Required | Description                                                          |
+| --------------------- | ---------- | -------- | -------------------------------------------------------------------- |
+| `label`               | `string`   | Yes      | Section heading for the FieldGroup wrapper                           |
+| `showLabel`           | `boolean`  | No       | Whether to show the section label. Default `true`                    |
+| `showHighlightedData` | `boolean`  | No       | Whether to render highlighted fields above children. Default `false` |
+| `getPConnect`         | `function` | Yes      | PConnect getter                                                      |
 
 ## Behavioral Contract
 
@@ -39,13 +39,14 @@ All steps identical to `Details`, except:
 
 ### Column Structure
 
-| | Details | DetailsTwoColumn |
-|-|---------|-----------------|
-| Column width per child | xs: 12 (full width) | **xs: 6 (half width)** |
-| Columns per row | 1 | **2** |
-| Highlighted data column | xs: 12 | **xs: 6** |
+|                         | Details             | DetailsTwoColumn       |
+| ----------------------- | ------------------- | ---------------------- |
+| Column width per child  | xs: 12 (full width) | **xs: 6 (half width)** |
+| Columns per row         | 1                   | **2**                  |
+| Highlighted data column | xs: 12              | **xs: 6**              |
 
 **CSS-only implementation notes:**
+
 - Children grid: `display: grid; grid-template-columns: 1fr 1fr; gap: 8px`.
 - Highlighted data row: `display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 1rem`.
 - Wrap in FieldGroup (see `FieldGroup.md` DSE skill).
@@ -65,14 +66,15 @@ All edge cases identical to `Details`. See `Details.md`.
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
+| Design System      | Recommended Component                                                     |
+| ------------------ | ------------------------------------------------------------------------- |
 | Default (CSS only) | `<fieldset>/<legend>` with CSS `grid-template-columns: 1fr 1fr; gap: 8px` |
-| MUI | `<Grid container spacing={1}>` with `<Grid size={{ xs: 6 }}>` per field |
-| Ant Design | `<Descriptions column={2}>` or `<Row><Col span={12}>` per field |
-| Chakra UI | `<SimpleGrid columns={2} spacing={2}>` |
-| Shadcn/ui | Tailwind `grid grid-cols-2 gap-2` |
+| MUI                | `<Grid container spacing={1}>` with `<Grid size={{ xs: 6 }}>` per field   |
+| Ant Design         | `<Descriptions column={2}>` or `<Row><Col span={12}>` per field           |
+| Chakra UI          | `<SimpleGrid columns={2} spacing={2}>`                                    |
+| Shadcn/ui          | Tailwind `grid grid-cols-2 gap-2`                                         |
 
 When implementing in a specific design system:
+
 - 2-column layout — each field takes half the available width
 - All other behaviors inherited from `Details` (DISPLAY_ONLY, readOnly, FieldGroup, highlighted data)

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