@pega/sdk 0.0.2 → 0.0.4

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

@@ -18,10 +18,10 @@ Displayed after a case or assignment is submitted. Shows the confirmation view (
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode[]` | Yes | Region children: `[0]` = ToDo region, `[1]` = Details region (when available) |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop          | Type          | Required | Description                                                                   |
+| ------------- | ------------- | -------- | ----------------------------------------------------------------------------- |
+| `children`    | `ReactNode[]` | Yes      | Region children: `[0]` = ToDo region, `[1]` = Details region (when available) |
+| `getPConnect` | `function`    | Yes      | PConnect getter                                                               |
 
 ## Behavioral Contract
 
@@ -56,13 +56,14 @@ Displayed after a case or assignment is submitted. Shows the confirmation view (
 
 ### Confirm View
 
-| Element | Description |
-|---------|-------------|
-| Confirmation header | Success icon + heading text |
-| Details section | Optional — rendered below confirmation header |
-| Done button | Primary button, bottom of the form |
+| Element             | Description                                   |
+| ------------------- | --------------------------------------------- |
+| Confirmation header | Success icon + heading text                   |
+| Details section     | Optional — rendered below confirmation header |
+| Done button         | Primary button, bottom of the form            |
 
 **CSS-only implementation notes:**
+
 - Confirm view: `display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 2rem`.
 - Success icon: large checkmark or success indicator, centered.
 - Confirmation heading: `font-size: 1.5rem; font-weight: 600; text-align: center`.
@@ -93,15 +94,16 @@ Displayed after a case or assignment is submitted. Shows the confirmation view (
 
 Listed design systems are examples only.
 
-| Design System | Success Indicator | Done Button | Layout |
-|---|---|---|---|
-| Default (CSS only) | CSS checkmark SVG | `<button class='primary'>` | Centered flexbox column |
-| MUI | `<CheckCircleIcon>` | `<Button variant='contained'>` | `<Box display='flex' flexDirection='column'>` |
-| Ant Design | `<Result status='success'>` | `<Button type='primary'>` | Ant Result component |
-| Chakra UI | `<CheckCircleIcon>` + `<Text>` | `<Button colorScheme='blue'>` | `<VStack>` |
-| Shadcn/ui | Custom icon + `<h2>` | `<Button>` | Tailwind centered div |
+| Design System      | Success Indicator              | Done Button                    | Layout                                        |
+| ------------------ | ------------------------------ | ------------------------------ | --------------------------------------------- |
+| Default (CSS only) | CSS checkmark SVG              | `<button class='primary'>`     | Centered flexbox column                       |
+| MUI                | `<CheckCircleIcon>`            | `<Button variant='contained'>` | `<Box display='flex' flexDirection='column'>` |
+| Ant Design         | `<Result status='success'>`    | `<Button type='primary'>`      | Ant Result component                          |
+| Chakra UI          | `<CheckCircleIcon>` + `<Text>` | `<Button colorScheme='blue'>`  | `<VStack>`                                    |
+| Shadcn/ui          | Custom icon + `<h2>`           | `<Button>`                     | Tailwind centered div                         |
 
 When implementing in a specific design system:
+
 - Done button must check remaining `toDoAssignments` before deciding whether to show ToDo view or close
 - `CLOSE_CONFIRM_VIEW` publish must happen only after confirming no assignments remain
 - `showDetails` check must guard `children[1]` access

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

@@ -18,44 +18,45 @@ Renders a data reference field that can be displayed as a dropdown, autocomplete
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `label` | `string` | Yes | Field label |
-| `displayAs` | `string` | Yes | UI variant: `'dropdown'`, `'autocomplete'`, `'checkbox'`, `'radiobutton'`, `'listview'`, `'searchbox'` |
-| `selectionMode` | `string` | Yes | `'single'` or `'multi'` |
-| `displayMode` | `string` | No | `'DISPLAY_ONLY'` for read-only rendering |
-| `readOnly` | `boolean` | No | Alternative read-only flag |
-| `ruleClass` | `string` | Yes | Data page class reference |
-| `dataRelationship` | `string` | No | Relationship type |
-| `isDDSourceDeferred` | `boolean` | No | Whether data source is loaded asynchronously |
-| `parameters` | `object` | No | Parameters passed to the data page for deferred sources |
-| `allowSearch` | `boolean` | No | Show search input inside dropdown/autocomplete |
-| `searchIcon` | `boolean` | No | Show search icon in the field |
-| `numCols` | `string` | No | Column count for checkbox/radiobutton layouts: `'1'`, `'2'`, `'3'` |
-| `listType` | `string` | No | `'associated'` or `'datapage'` |
-| `fieldMetadata` | `object` | No | Extra field-level metadata |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop                 | Type       | Required | Description                                                                                            |
+| -------------------- | ---------- | -------- | ------------------------------------------------------------------------------------------------------ |
+| `label`              | `string`   | Yes      | Field label                                                                                            |
+| `displayAs`          | `string`   | Yes      | UI variant: `'dropdown'`, `'autocomplete'`, `'checkbox'`, `'radiobutton'`, `'listview'`, `'searchbox'` |
+| `selectionMode`      | `string`   | Yes      | `'single'` or `'multi'`                                                                                |
+| `displayMode`        | `string`   | No       | `'DISPLAY_ONLY'` for read-only rendering                                                               |
+| `readOnly`           | `boolean`  | No       | Alternative read-only flag                                                                             |
+| `ruleClass`          | `string`   | Yes      | Data page class reference                                                                              |
+| `dataRelationship`   | `string`   | No       | Relationship type                                                                                      |
+| `isDDSourceDeferred` | `boolean`  | No       | Whether data source is loaded asynchronously                                                           |
+| `parameters`         | `object`   | No       | Parameters passed to the data page for deferred sources                                                |
+| `allowSearch`        | `boolean`  | No       | Show search input inside dropdown/autocomplete                                                         |
+| `searchIcon`         | `boolean`  | No       | Show search icon in the field                                                                          |
+| `numCols`            | `string`   | No       | Column count for checkbox/radiobutton layouts: `'1'`, `'2'`, `'3'`                                     |
+| `listType`           | `string`   | No       | `'associated'` or `'datapage'`                                                                         |
+| `fieldMetadata`      | `object`   | No       | Extra field-level metadata                                                                             |
+| `getPConnect`        | `function` | Yes      | PConnect getter                                                                                        |
 
 ## Behavioral Contract
 
 ### Read-Only Routing
 
 If `displayMode === 'DISPLAY_ONLY'` or `readOnly === true`:
+
 - `selectionMode === 'single'` → render `<SingleReferenceReadOnly />`.
 - `selectionMode === 'multi'` → render `<MultiReferenceReadOnly />`.
 - Both receive all relevant props plus `getPConnect`.
 
 ### Edit Routing (by `displayAs`)
 
-| `displayAs` | Rendered component |
-|-------------|--------------------|
-| `'dropdown'` | Registered `Dropdown` field component |
+| `displayAs`      | Rendered component                        |
+| ---------------- | ----------------------------------------- |
+| `'dropdown'`     | Registered `Dropdown` field component     |
 | `'autocomplete'` | Registered `AutoComplete` field component |
-| `'checkbox'` | Registered `CheckboxGroup` with `numCols` |
-| `'radiobutton'` | Registered `RadioButtons` with `numCols` |
-| `'listview'` | Inline `ListView` sub-component |
-| `'searchbox'` | Inline `SearchForm` sub-component |
-| Default | `Dropdown` |
+| `'checkbox'`     | Registered `CheckboxGroup` with `numCols` |
+| `'radiobutton'`  | Registered `RadioButtons` with `numCols`  |
+| `'listview'`     | Inline `ListView` sub-component           |
+| `'searchbox'`    | Inline `SearchForm` sub-component         |
+| Default          | `Dropdown`                                |
 
 ### Deferred Data Source (`isDDSourceDeferred === true`)
 
@@ -71,6 +72,7 @@ If `displayMode === 'DISPLAY_ONLY'` or `readOnly === true`:
 ### SearchForm Sub-Component
 
 When `displayAs === 'searchbox'`, renders an inline `<SearchForm>` sub-component that:
+
 1. Shows a text input with search icon.
 2. On submit: calls `getPConnect().getListActions().search(searchText)`.
 3. Renders the search results list below the input using `buildView`.
@@ -78,6 +80,7 @@ When `displayAs === 'searchbox'`, renders an inline `<SearchForm>` sub-component
 ## Visual Specifications
 
 **CSS-only implementation notes:**
+
 - Wrapper: `display: flex; flex-direction: column; gap: 4px`.
 - Label: `font-size: 0.875rem; font-weight: 500; margin-bottom: 4px`.
 - Dropdown/Autocomplete: standard select input, full-width.
@@ -106,15 +109,16 @@ When `displayAs === 'searchbox'`, renders an inline `<SearchForm>` sub-component
 
 Listed design systems are examples only.
 
-| Design System | Dropdown | Autocomplete | Checkbox Group | Radio Group |
-|---|---|---|---|---|
-| Default (CSS only) | `<select>` | Custom combobox | `<input type='checkbox'>` list | `<input type='radio'>` list |
-| MUI | `<Select>/<MenuItem>` | `<Autocomplete>` | `<FormGroup><Checkbox>` | `<RadioGroup><Radio>` |
-| Ant Design | `<Select>` | `<AutoComplete>` | `<Checkbox.Group>` | `<Radio.Group>` |
-| Chakra UI | `<Select>` | Custom | `<CheckboxGroup>` | `<RadioGroup>` |
-| Shadcn/ui | `<Select>` + combobox | `<Combobox>` | custom | `<RadioGroup>` |
+| Design System      | Dropdown              | Autocomplete     | Checkbox Group                 | Radio Group                 |
+| ------------------ | --------------------- | ---------------- | ------------------------------ | --------------------------- |
+| Default (CSS only) | `<select>`            | Custom combobox  | `<input type='checkbox'>` list | `<input type='radio'>` list |
+| MUI                | `<Select>/<MenuItem>` | `<Autocomplete>` | `<FormGroup><Checkbox>`        | `<RadioGroup><Radio>`       |
+| Ant Design         | `<Select>`            | `<AutoComplete>` | `<Checkbox.Group>`             | `<Radio.Group>`             |
+| Chakra UI          | `<Select>`            | Custom           | `<CheckboxGroup>`              | `<RadioGroup>`              |
+| Shadcn/ui          | `<Select>` + combobox | `<Combobox>`     | custom                         | `<RadioGroup>`              |
 
 When implementing in a specific design system:
+
 - Always check `displayMode`/`readOnly` first and route to read-only components before rendering editable variants
 - Deferred loading must be handled — show skeleton/spinner until data is ready
 - `numCols` applies to checkbox and radiobutton layouts only

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)