@pega/sdk 0.0.3 → 0.0.4

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

@@ -18,12 +18,12 @@ Renders an inline dashboard layout consisting of a title heading, a main content
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `title` | `string` | No | Dashboard title displayed above the content area |
-| `filterPosition` | `string` | No | Filter panel position: `'block-start'` (above) or other (side). Default: side |
-| `children` | `ReactNode[]` | Yes | `children[0]` = main content, `children[1]` = filter panel |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop             | Type          | Required | Description                                                                   |
+| ---------------- | ------------- | -------- | ----------------------------------------------------------------------------- |
+| `title`          | `string`      | No       | Dashboard title displayed above the content area                              |
+| `filterPosition` | `string`      | No       | Filter panel position: `'block-start'` (above) or other (side). Default: side |
+| `children`       | `ReactNode[]` | Yes      | `children[0]` = main content, `children[1]` = filter panel                    |
+| `getPConnect`    | `function`    | Yes      | PConnect getter                                                               |
 
 ## Behavioral Contract
 
@@ -34,6 +34,7 @@ Renders an inline dashboard layout consisting of a title heading, a main content
 ### Filter Position: `'block-start'`
 
 Stacked layout — filter panel above main content:
+
 - `<Grid container direction='column-reverse'>` (reverse so filter renders visually above content).
 - Filter panel: `<Grid id='filters' size={{ xs: 12 }}>`.
 - Main content: `<Grid size={{ xs: 12 }}>`.
@@ -41,6 +42,7 @@ Stacked layout — filter panel above main content:
 ### Filter Position: Other (side)
 
 Side-by-side layout — main content left, filters right:
+
 - `<Grid container direction={...}>` (optionally `row-reverse` based on position value).
 - Main content: `<Grid size={{ xs: 9 }}>`.
 - Filter panel: `<Grid id='filters' size={{ xs: 3 }}>`.
@@ -66,6 +68,7 @@ Side-by-side layout — main content left, filters right:
 ```
 
 **CSS-only implementation notes:**
+
 - Title: `font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem`.
 - Block-start: `display: flex; flex-direction: column; gap: 1rem` (filter div first in DOM but ordered last visually with `order: -1`).
 - Side: `display: grid; grid-template-columns: 3fr 1fr; gap: 1rem`.
@@ -90,15 +93,16 @@ Side-by-side layout — main content left, filters right:
 
 Listed design systems are examples only.
 
-| Design System | Title | Content/Filter Grid |
-|---|---|---|
-| Default (CSS only) | `<h2>` | CSS grid or flexbox |
-| MUI | `<Typography variant='h4'>` | `<Grid container>` |
-| Ant Design | `<Typography.Title level={2}>` | `<Row>/<Col>` |
-| Chakra UI | `<Heading>` | `<Grid>` or `<HStack>` |
-| Shadcn/ui | `<h2>` | Tailwind grid |
+| Design System      | Title                          | Content/Filter Grid    |
+| ------------------ | ------------------------------ | ---------------------- |
+| Default (CSS only) | `<h2>`                         | CSS grid or flexbox    |
+| MUI                | `<Typography variant='h4'>`    | `<Grid container>`     |
+| Ant Design         | `<Typography.Title level={2}>` | `<Row>/<Col>`          |
+| Chakra UI          | `<Heading>`                    | `<Grid>` or `<HStack>` |
+| Shadcn/ui          | `<h2>`                         | Tailwind grid          |
 
 When implementing in a specific design system:
+
 - `filterPosition === 'block-start'` requires stacked layout (12/12) — not side layout (9/3)
 - Filter panel must always have `id='filters'`
 - Title heading (`h4` level) is optional — only render when `title` is provided

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

@@ -20,12 +20,12 @@ Page-level wrapper for the inline dashboard. Extracts promoted filter definition
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode[]` | Yes | Main content children passed to InlineDashboard |
-| `title` | `string` | No | Dashboard title |
-| `filterPosition` | `string` | No | Filter position: `'block-start'` or side |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop             | Type          | Required | Description                                     |
+| ---------------- | ------------- | -------- | ----------------------------------------------- |
+| `children`       | `ReactNode[]` | Yes      | Main content children passed to InlineDashboard |
+| `title`          | `string`      | No       | Dashboard title                                 |
+| `filterPosition` | `string`      | No       | Filter position: `'block-start'` or side        |
+| `getPConnect`    | `function`    | Yes      | PConnect getter                                 |
 
 ## Behavioral Contract
 
@@ -42,13 +42,9 @@ In `useEffect([])` (on mount):
 ### Render
 
 ```tsx
-<InlineDashboard
-  title={title}
-  filterPosition={filterPosition}
-  getPConnect={getPConnect}
->
-  {children[0]}           {/* main content */}
-  {filterComponents}      {/* built filter components */}
+<InlineDashboard title={title} filterPosition={filterPosition} getPConnect={getPConnect}>
+  {children[0]} {/* main content */}
+  {filterComponents} {/* built filter components */}
 </InlineDashboard>
 ```
 
@@ -80,6 +76,7 @@ Listed design systems are examples only.
 This component is a thin orchestration layer. All visual implementation is in `InlineDashboard`. The only implementation detail is `buildFilterComponents` — which creates filter field components from metadata definitions.
 
 When implementing in a specific design system:
+
 - `buildFilterComponents` must create proper PConnect-backed filter field components
 - If `promotedFilters` is empty, skip the filter panel entirely
 - All layout and styling is delegated to `InlineDashboard`

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

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

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

@@ -18,24 +18,25 @@ The primary data table component. Renders a sortable, paginated, filterable, and
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `bInForm` | `boolean` | No | Whether rendered inside a form (affects toolbar and padding). Default `false` |
-| `selectionMode` | `string` | No | `'single'` (radio) or `'multi'` (checkbox) or absent (no selection) |
-| `dataPageName` | `string` | No | Name of data page to fetch records from |
-| `referenceList` | `array` | No | In-memory data array (used when data is already available) |
-| `compositeKeys` | `object` | No | Key fields for unique row identification |
-| `columns` | `array` | No | Column definition objects `{ fieldName, label, sortable, filterable }` |
-| `additionalTableConfig` | `object` | No | Extra config merged with column/sort/filter settings |
-| `isSearchable` | `boolean` | No | Whether global search input is shown |
-| `payload` | `object` | No | Query payload for data page requests |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop                    | Type       | Required | Description                                                                   |
+| ----------------------- | ---------- | -------- | ----------------------------------------------------------------------------- |
+| `bInForm`               | `boolean`  | No       | Whether rendered inside a form (affects toolbar and padding). Default `false` |
+| `selectionMode`         | `string`   | No       | `'single'` (radio) or `'multi'` (checkbox) or absent (no selection)           |
+| `dataPageName`          | `string`   | No       | Name of data page to fetch records from                                       |
+| `referenceList`         | `array`    | No       | In-memory data array (used when data is already available)                    |
+| `compositeKeys`         | `object`   | No       | Key fields for unique row identification                                      |
+| `columns`               | `array`    | No       | Column definition objects `{ fieldName, label, sortable, filterable }`        |
+| `additionalTableConfig` | `object`   | No       | Extra config merged with column/sort/filter settings                          |
+| `isSearchable`          | `boolean`  | No       | Whether global search input is shown                                          |
+| `payload`               | `object`   | No       | Query payload for data page requests                                          |
+| `getPConnect`           | `function` | Yes      | PConnect getter                                                               |
 
 ## Behavioral Contract
 
 ### Initialization
 
 `useInit(getPConnect, columns, dataPageName, payload)` hook:
+
 1. Calls `initializeColumns(getPConnect, columns)` to build `configFields`.
 2. Calls `buildFieldsForTable(configFields)` to produce display column definitions.
 3. Calls `getConfigFields(configFields)` for sort/filter metadata.
@@ -62,11 +63,11 @@ The primary data table component. Renders a sortable, paginated, filterable, and
 
 ### Selection
 
-| `selectionMode` | Control per row | Callback |
-|---|---|---|
-| `'single'` | `<Radio>` | `onRowSelect(rowData)` |
-| `'multi'` | `<Checkbox>` | `onRowsSelect(selectedRows)` |
-| absent | None | None |
+| `selectionMode` | Control per row | Callback                     |
+| --------------- | --------------- | ---------------------------- |
+| `'single'`      | `<Radio>`       | `onRowSelect(rowData)`       |
+| `'multi'`       | `<Checkbox>`    | `onRowsSelect(selectedRows)` |
+| absent          | None            | None                         |
 
 - Select-all checkbox in the header for multi-selection.
 - Selected rows highlighted with `selected` row class.
@@ -91,14 +92,15 @@ The primary data table component. Renders a sortable, paginated, filterable, and
 
 ## Visual Specifications
 
-| Element | Description |
-|---------|-------------|
-| Toolbar | Search input + filter button + (optional) action buttons |
-| Table head | Sticky header with sort labels and column menu |
-| Table body | Striped rows, hover state, selected state |
-| Pagination bar | Below table, page size selector + page nav |
+| Element        | Description                                              |
+| -------------- | -------------------------------------------------------- |
+| Toolbar        | Search input + filter button + (optional) action buttons |
+| Table head     | Sticky header with sort labels and column menu           |
+| Table body     | Striped rows, hover state, selected state                |
+| Pagination bar | Below table, page size selector + page nav               |
 
 **CSS-only implementation notes:**
+
 - Table container: `overflow-x: auto`.
 - Header row: `background: var(--table-header-bg); font-weight: 600`.
 - Selected row: `background: var(--selection-highlight-bg)`.
@@ -125,15 +127,16 @@ The primary data table component. Renders a sortable, paginated, filterable, and
 
 Listed design systems are examples only.
 
-| Design System | Table | Pagination | Dialog |
-|---|---|---|---|
-| Default (CSS only) | `<table>/<thead>/<tbody>` | Custom pagination controls | `<dialog>` element |
-| MUI | `<Table>` + sub-components | `<TablePagination>` | `<Dialog>` |
-| Ant Design | `<Table>` | Built-in pagination prop | `<Modal>` |
-| Chakra UI | `<Table>` | Custom or `react-table` | `<Modal>` |
-| Shadcn/ui | `<Table>` + TanStack Table | Custom pagination | `<Dialog>` |
+| Design System      | Table                      | Pagination                 | Dialog             |
+| ------------------ | -------------------------- | -------------------------- | ------------------ |
+| Default (CSS only) | `<table>/<thead>/<tbody>`  | Custom pagination controls | `<dialog>` element |
+| MUI                | `<Table>` + sub-components | `<TablePagination>`        | `<Dialog>`         |
+| Ant Design         | `<Table>`                  | Built-in pagination prop   | `<Modal>`          |
+| Chakra UI          | `<Table>`                  | Custom or `react-table`    | `<Modal>`          |
+| Shadcn/ui          | `<Table>` + TanStack Table | Custom pagination          | `<Dialog>`         |
 
 When implementing in a specific design system:
+
 - `bInForm` prop affects layout — tighten spacing and remove outer chrome when `true`
 - Sorting, pagination, and search all trigger data re-fetches — do not filter client-side for server-paged data
 - Selection mode (`single`/`multi`) requires different controls and callbacks

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

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

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

@@ -17,11 +17,11 @@ Renders two children side by side with the left column narrower than the right.
 
 ## Pega Metadata
 
-| Variant | Registration Key |
-|---------|-----------------|
-| NarrowWide | `NarrowWide` |
-| NarrowWidePage | `NarrowWidePage` |
-| NarrowWideForm | `NarrowWideForm` |
+| Variant           | Registration Key    |
+| ----------------- | ------------------- |
+| NarrowWide        | `NarrowWide`        |
+| NarrowWidePage    | `NarrowWidePage`    |
+| NarrowWideForm    | `NarrowWideForm`    |
 | NarrowWideDetails | `NarrowWideDetails` |
 
 All extend `PConnProps`.
@@ -30,38 +30,38 @@ All extend `PConnProps`.
 
 ### NarrowWide
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode[]` | No | Two children rendered in narrow/wide slots |
-| `a` | `any` | No | Narrow (left) column content |
-| `b` | `any` | No | Wide (right) column content |
-| `title` | `string` | No | Optional title (not rendered in reference implementation) |
-| `cols` | `string` | No | Column template (not rendered in reference implementation) |
-| `icon` | `string` | No | Optional icon (not rendered in reference implementation) |
+| Prop       | Type          | Required | Description                                                |
+| ---------- | ------------- | -------- | ---------------------------------------------------------- |
+| `children` | `ReactNode[]` | No       | Two children rendered in narrow/wide slots                 |
+| `a`        | `any`         | No       | Narrow (left) column content                               |
+| `b`        | `any`         | No       | Wide (right) column content                                |
+| `title`    | `string`      | No       | Optional title (not rendered in reference implementation)  |
+| `cols`     | `string`      | No       | Column template (not rendered in reference implementation) |
+| `icon`     | `string`      | No       | Optional icon (not rendered in reference implementation)   |
 
 ### NarrowWidePage
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode[]` | Yes | Two children — `[0]` → narrow slot, `[1]` → wide slot |
-| `title` | `string` | Yes | Page title (passed to NarrowWide) |
-| `templateCol` | `string` | No | Column ratio (default `'1fr 1fr'`) |
-| `icon` | `string` | No | Icon name (strips `'pi pi-'` prefix) |
+| Prop          | Type          | Required | Description                                           |
+| ------------- | ------------- | -------- | ----------------------------------------------------- |
+| `children`    | `ReactNode[]` | Yes      | Two children — `[0]` → narrow slot, `[1]` → wide slot |
+| `title`       | `string`      | Yes      | Page title (passed to NarrowWide)                     |
+| `templateCol` | `string`      | No       | Column ratio (default `'1fr 1fr'`)                    |
+| `icon`        | `string`      | No       | Icon name (strips `'pi pi-'` prefix)                  |
 
 ### NarrowWideForm
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode[]` | Yes | Two children — `[0]` → narrow slot, `[1]` → wide slot |
+| Prop       | Type          | Required | Description                                           |
+| ---------- | ------------- | -------- | ----------------------------------------------------- |
+| `children` | `ReactNode[]` | Yes      | Two children — `[0]` → narrow slot, `[1]` → wide slot |
 
 ### NarrowWideDetails
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `label` | `string` | Yes | Section label for FieldGroup |
-| `showLabel` | `boolean` | No | Whether to show the label. Default `true` |
-| `showHighlightedData` | `boolean` | No | Whether to render highlighted data fields above children. Default `false` |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop                  | Type       | Required | Description                                                               |
+| --------------------- | ---------- | -------- | ------------------------------------------------------------------------- |
+| `label`               | `string`   | Yes      | Section label for FieldGroup                                              |
+| `showLabel`           | `boolean`  | No       | Whether to show the label. Default `true`                                 |
+| `showHighlightedData` | `boolean`  | No       | Whether to render highlighted data fields above children. Default `false` |
+| `getPConnect`         | `function` | Yes      | PConnect getter                                                           |
 
 ## Behavioral Contract
 
@@ -97,13 +97,14 @@ Derived from `NarrowWide.css`:
 
 ### Container
 
-| CSS Class | Property | Value |
-|-----------|----------|-------|
-| `.psdk-narrow-wide-column` | Display | flex or grid (two-column row) |
-| `.psdk-narrow-column-column` | Width | ~33% (1 of 3 parts) |
-| `.psdk-wide-column-column` | Width | ~67% (2 of 3 parts) |
+| CSS Class                    | Property | Value                         |
+| ---------------------------- | -------- | ----------------------------- |
+| `.psdk-narrow-wide-column`   | Display  | flex or grid (two-column row) |
+| `.psdk-narrow-column-column` | Width    | ~33% (1 of 3 parts)           |
+| `.psdk-wide-column-column`   | Width    | ~67% (2 of 3 parts)           |
 
 **CSS-only implementation notes:**
+
 - `.psdk-narrow-wide-column`: `display: grid; grid-template-columns: 1fr 2fr; gap: 1rem`.
 - `.psdk-narrow-column-column`: takes the first (narrower) grid column.
 - `.psdk-wide-column-column`: takes the second (wider) grid column.
@@ -127,15 +128,16 @@ Derived from `NarrowWide.css`:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | CSS Grid `grid-template-columns: 1fr 2fr; gap: 1rem` |
-| MUI | `<Grid container><Grid size={{ xs: 12, md: 4 }}><Grid size={{ xs: 12, md: 8 }}>` |
-| Ant Design | `<Row gutter={16}><Col xs={24} md={8}><Col xs={24} md={16}>` |
-| Chakra UI | `<Grid templateColumns={{ base: '1fr', md: '1fr 2fr' }} gap={4}>` |
-| Shadcn/ui | Tailwind `grid grid-cols-1 md:grid-cols-[1fr_2fr] gap-4` |
+| Design System      | Recommended Component                                                            |
+| ------------------ | -------------------------------------------------------------------------------- |
+| Default (CSS only) | CSS Grid `grid-template-columns: 1fr 2fr; gap: 1rem`                             |
+| MUI                | `<Grid container><Grid size={{ xs: 12, md: 4 }}><Grid size={{ xs: 12, md: 8 }}>` |
+| Ant Design         | `<Row gutter={16}><Col xs={24} md={8}><Col xs={24} md={16}>`                     |
+| Chakra UI          | `<Grid templateColumns={{ base: '1fr', md: '1fr 2fr' }} gap={4}>`                |
+| Shadcn/ui          | Tailwind `grid grid-cols-1 md:grid-cols-[1fr_2fr] gap-4`                         |
 
 When implementing in a specific design system:
+
 - Narrow column ≈ 33% width (1fr of 3fr total)
 - Wide column ≈ 67% width (2fr of 3fr total)
 - `NarrowWideDetails` always forces DISPLAY_ONLY + readOnly on children

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

@@ -16,25 +16,26 @@ Renders all children stacked vertically in a single full-width column. Three clo
 
 ## Pega Metadata
 
-| Variant | Registration Key |
-|---------|-----------------|
-| OneColumn | `OneColumn` |
-| OneColumnPage | `OneColumnPage` |
-| OneColumnTab | `OneColumnTab` |
+| Variant       | Registration Key |
+| ------------- | ---------------- |
+| OneColumn     | `OneColumn`      |
+| OneColumnPage | `OneColumnPage`  |
+| OneColumnTab  | `OneColumnTab`   |
 
 All extend `PConnProps`. Children are received as React `children`.
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode[]` | Yes | One or more children to render in the single column |
+| Prop       | Type          | Required | Description                                         |
+| ---------- | ------------- | -------- | --------------------------------------------------- |
+| `children` | `ReactNode[]` | Yes      | One or more children to render in the single column |
 
 ## Sub-Variants
 
 ### OneColumnPage
 
 Thin pass-through wrapper. Retrieves `OneColumn` from the component registry and renders with all props forwarded:
+
 ```typescript
 const OneColumn = getComponentFromRegistry('OneColumn');
 return <OneColumn {...props} />;
@@ -43,9 +44,11 @@ return <OneColumn {...props} />;
 ### OneColumnTab
 
 Minimal wrapper — renders children in a plain `<div>` with `id='OneColumnTab'`:
+
 ```typescript
 return <div id='OneColumnTab'>{children}</div>;
 ```
+
 No grid or column styles applied. Used purely as a slot container inside tab panels.
 
 ## Behavioral Contract
@@ -62,19 +65,20 @@ Derived from `OneColumn.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 | 2 (≈ 16px) |
 
 **CSS-only implementation notes:**
+
 - Column: `display: grid; gap: 1rem; align-content: baseline; width: 100%`.
 - Outer container: `display: grid; grid-template-columns: 1fr; gap: 16px`.
 - `OneColumnTab`: just `<div>` with no special styling.
@@ -96,14 +100,15 @@ Derived from `OneColumn.tsx` makeStyles:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
+| Design System      | Recommended Component                                    |
+| ------------------ | -------------------------------------------------------- |
 | Default (CSS only) | `<div style="display:grid;gap:1rem;">` wrapping children |
-| MUI | `<Grid container spacing={2}><Grid size={{ xs: 12 }}>` |
-| Ant Design | `<Row><Col span={24}>` |
-| Chakra UI | `<Stack spacing={4}>` or `<Grid templateColumns='1fr'>` |
-| Shadcn/ui | Tailwind `flex flex-col gap-4` |
+| MUI                | `<Grid container spacing={2}><Grid size={{ xs: 12 }}>`   |
+| Ant Design         | `<Row><Col span={24}>`                                   |
+| Chakra UI          | `<Stack spacing={4}>` or `<Grid templateColumns='1fr'>`  |
+| Shadcn/ui          | Tailwind `flex flex-col gap-4`                           |
 
 When implementing in a specific design system:
+
 - All children render in a single column, top-aligned
 - `OneColumnTab` variant is a minimal `<div>` container with no layout styling

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

@@ -18,20 +18,21 @@ Renders promoted filter controls above a list view. Filter fields are created dy
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `viewName` | `string` | Yes | Name of the promoted filters view — used as transient item ID |
-| `dataPageName` | `string` | Yes | Data page name passed to `ListView` |
-| `promotedFilters` | `array` | Yes | Array of filter field definitions `{ name, classID, ... }` |
-| `payload` | `object` | No | Base query payload for the data page |
-| `isSearchable` | `boolean` | No | Whether the ListView below shows a global search input |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop              | Type       | Required | Description                                                   |
+| ----------------- | ---------- | -------- | ------------------------------------------------------------- |
+| `viewName`        | `string`   | Yes      | Name of the promoted filters view — used as transient item ID |
+| `dataPageName`    | `string`   | Yes      | Data page name passed to `ListView`                           |
+| `promotedFilters` | `array`    | Yes      | Array of filter field definitions `{ name, classID, ... }`    |
+| `payload`         | `object`   | No       | Base query payload for the data page                          |
+| `isSearchable`    | `boolean`  | No       | Whether the ListView below shows a global search input        |
+| `getPConnect`     | `function` | Yes      | PConnect getter                                               |
 
 ## Behavioral Contract
 
 ### Transient Data Setup
 
 On mount:
+
 1. Build `filtersWithClassID`: add `classID` to each filter from `getPConnect().getContextName()` or metadata.
 2. Call `PCore.getDataPageUtils().addTransientItem({ id: viewName, data: filtersWithClassID })`.
 3. This creates a transient data context for the filter fields.
@@ -39,12 +40,14 @@ On mount:
 ### Filters Sub-Component
 
 The `<Filters>` inline sub-component:
+
 1. Creates each filter field via `PCore.createPConnect({ ... filterFieldConfig, contextName: viewName + '.' + filter.name })`.
 2. Renders each created pConnect as a field component via `createElement(PConnectComponent, { ...fieldConfig })`.
 
 ### Search
 
 On Search button click:
+
 1. Call `getFilterData(viewName, promotedFilters)`:
    - For each filter, read current value from transient store.
    - Build filter objects: `{ lhs: { field: filter.name }, comparator: 'EQ', rhs: { value: currentValue } }`.
@@ -55,6 +58,7 @@ On Search button click:
 ### Clear
 
 On Clear button click:
+
 1. Call `clearFilterData(viewName, promotedFilters)`:
    - For each filter, reset the transient value to `''` or `null`.
 2. Reset `payload.filters` to `[]`.
@@ -77,13 +81,14 @@ On Clear button click:
 
 ## Visual Specifications
 
-| Element | Description |
-|---------|-------------|
+| Element           | Description                                |
+| ----------------- | ------------------------------------------ |
 | Filter fields row | Horizontal flex row of filter field inputs |
-| Action buttons | Clear + Search buttons, right-aligned |
-| ListView | Below the filter row, full width |
+| Action buttons    | Clear + Search buttons, right-aligned      |
+| ListView          | Below the filter row, full width           |
 
 **CSS-only implementation notes:**
+
 - Outer container: `display: flex; flex-direction: column; gap: 1rem`.
 - Filter fields row: `display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end`.
 - Action buttons row: `display: flex; gap: 0.5rem; justify-content: flex-end`.
@@ -110,15 +115,16 @@ On Clear button click:
 
 Listed design systems are examples only.
 
-| Design System | Filter Row | Action Buttons |
-|---|---|---|
-| Default (CSS only) | `display: flex; flex-wrap: wrap` inputs | `<button>` for Clear/Search |
-| MUI | `<Box display='flex' flexWrap='wrap' gap={1}>` | `<Button>` variants |
-| Ant Design | `<Space wrap>` | `<Button type='primary'>` for Search |
-| Chakra UI | `<HStack wrap='wrap'>` | `<Button colorScheme='blue'>` |
-| Shadcn/ui | Tailwind `flex flex-wrap gap-2` | `<Button>` variants |
+| Design System      | Filter Row                                     | Action Buttons                       |
+| ------------------ | ---------------------------------------------- | ------------------------------------ |
+| Default (CSS only) | `display: flex; flex-wrap: wrap` inputs        | `<button>` for Clear/Search          |
+| MUI                | `<Box display='flex' flexWrap='wrap' gap={1}>` | `<Button>` variants                  |
+| Ant Design         | `<Space wrap>`                                 | `<Button type='primary'>` for Search |
+| Chakra UI          | `<HStack wrap='wrap'>`                         | `<Button colorScheme='blue'>`        |
+| Shadcn/ui          | Tailwind `flex flex-wrap gap-2`                | `<Button>` variants                  |
 
 When implementing in a specific design system:
+
 - Transient data pattern is critical — each filter field must read/write to `PCore`'s transient store
 - `getFilterData` builds the query filter payload — use it unchanged
 - Transient item cleanup on unmount is required to avoid stale data