@pega/sdk 0.0.3 → 0.0.4

package/templates/react-sdk-reference/.claude/skills/design-system-extension-skills/Banner.md

@@ -9,6 +9,7 @@ Promotional/informational banner with a full-width background image hero section
 ## Component Purpose
 
 Renders a visually rich banner composed of two parts:
+
 1. **Hero section:** Full-width area with a background image, centered title and message text overlaid.
 2. **Content columns:** Two adjustable-width columns below the hero, rendered from the `a` and `b` slot props. Column widths are controlled by the `variant` prop.
 
@@ -20,18 +21,18 @@ Renders a visually rich banner composed of two parts:
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `a` | `ReactNode` | Yes | Content for the first (left/narrower) column |
-| `b` | `ReactNode` | Yes | Content for the second (right/wider) column |
-| `banner` | `object` | Yes | Banner metadata (see sub-props below) |
-| `banner.title` | `string` | Yes | Title text displayed in the hero section |
-| `banner.message` | `string` | Yes | Descriptive message text in the hero section |
-| `banner.backgroundImage` | `string` | Yes | URL of the background image for the hero section |
-| `banner.variant` | `any` | No | Unused internally (layout variant comes from top-level `variant`) |
-| `banner.backgroundColor` | `any` | No | Unused internally |
-| `banner.tintImage` | `any` | No | Unused internally |
-| `variant` | `string` | Yes | Column layout: `'two-column'`, `'narrow-wide'`, or `'wide-narrow'` |
+| Prop                     | Type        | Required | Description                                                        |
+| ------------------------ | ----------- | -------- | ------------------------------------------------------------------ |
+| `a`                      | `ReactNode` | Yes      | Content for the first (left/narrower) column                       |
+| `b`                      | `ReactNode` | Yes      | Content for the second (right/wider) column                        |
+| `banner`                 | `object`    | Yes      | Banner metadata (see sub-props below)                              |
+| `banner.title`           | `string`    | Yes      | Title text displayed in the hero section                           |
+| `banner.message`         | `string`    | Yes      | Descriptive message text in the hero section                       |
+| `banner.backgroundImage` | `string`    | Yes      | URL of the background image for the hero section                   |
+| `banner.variant`         | `any`       | No       | Unused internally (layout variant comes from top-level `variant`)  |
+| `banner.backgroundColor` | `any`       | No       | Unused internally                                                  |
+| `banner.tintImage`       | `any`       | No       | Unused internally                                                  |
+| `variant`                | `string`    | Yes      | Column layout: `'two-column'`, `'narrow-wide'`, or `'wide-narrow'` |
 
 ## Behavioral Contract
 
@@ -63,53 +64,54 @@ Derived from `Banner.css`:
 
 ### Hero Section
 
-| Property | Value |
-|----------|-------|
-| Margin left | -16px (bleeds to container edge) |
-| Margin right | -16px |
-| Height | `calc(19rem)` |
-| Background size | cover |
-| Background position | center center |
+| Property            | Value                            |
+| ------------------- | -------------------------------- |
+| Margin left         | -16px (bleeds to container edge) |
+| Margin right        | -16px                            |
+| Height              | `calc(19rem)`                    |
+| Background size     | cover                            |
+| Background position | center center                    |
 
 ### Hero Overlay
 
-| Property | Value |
-|----------|-------|
-| Background color | transparent |
-| Color | `var(--banner-text-color)` |
-| Width | 100% |
-| Height | 100% |
-| Text align | center |
-| Display | flex |
-| Flex direction | column |
-| Justify content | center |
-| Align items | center |
-| Gap | `calc(0.5rem)` |
+| Property         | Value                      |
+| ---------------- | -------------------------- |
+| Background color | transparent                |
+| Color            | `var(--banner-text-color)` |
+| Width            | 100%                       |
+| Height           | 100%                       |
+| Text align       | center                     |
+| Display          | flex                       |
+| Flex direction   | column                     |
+| Justify content  | center                     |
+| Align items      | center                     |
+| Gap              | `calc(0.5rem)`             |
 
 ### Hero Title
 
-| Property | Value |
-|----------|-------|
-| Margin | 0 |
-| Font size | 1.728rem |
-| Font weight | 600 |
+| Property    | Value    |
+| ----------- | -------- |
+| Margin      | 0        |
+| Font size   | 1.728rem |
+| Font weight | 600      |
 
 ### Hero Message
 
-| Property | Value |
-|----------|-------|
-| Margin | 0 |
-| Font size | 1rem |
-| Font weight | 400 |
+| Property    | Value |
+| ----------- | ----- |
+| Margin      | 0     |
+| Font size   | 1rem  |
+| Font weight | 400   |
 
 ### Content Grid
 
-| Property | Value |
-|----------|-------|
-| Padding | 1rem |
+| Property       | Value                  |
+| -------------- | ---------------------- |
+| Padding        | 1rem                   |
 | Column spacing | 1 spacing unit (≈ 8px) |
 
 **CSS-only implementation notes:**
+
 - Hero: `margin: 0 -16px; height: 19rem; background-size: cover; background-position: center; position: relative`.
 - Overlay: `position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.5rem; color: var(--banner-text-color); text-align: center`.
 - Content grid below hero: `display: grid; grid-template-columns: <a-cols>fr <b-cols>fr; gap: 8px; padding: 1rem`.
@@ -134,15 +136,16 @@ Derived from `Banner.css`:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | CSS Grid for columns, CSS background for hero |
-| MUI | `<Grid container size={12}>` with `<Grid size={{ xs: ... }}>` for columns |
-| Ant Design | `<Row gutter={8}>` with `<Col span={...}>` for columns |
-| Chakra UI | `<SimpleGrid columns={2}>` or `<Grid templateColumns='...'>` |
-| Shadcn/ui | CSS Grid with Tailwind column utilities |
+| Design System      | Recommended Component                                                     |
+| ------------------ | ------------------------------------------------------------------------- |
+| Default (CSS only) | CSS Grid for columns, CSS background for hero                             |
+| MUI                | `<Grid container size={12}>` with `<Grid size={{ xs: ... }}>` for columns |
+| Ant Design         | `<Row gutter={8}>` with `<Col span={...}>` for columns                    |
+| Chakra UI          | `<SimpleGrid columns={2}>` or `<Grid templateColumns='...'>`              |
+| Shadcn/ui          | CSS Grid with Tailwind column utilities                                   |
 
 When implementing in a specific design system, map the following:
+
 - `variant` column widths → grid column span values
 - Background image hero → `backgroundImage` inline style with `background-size: cover`
 - Column A (card-like) → design system's Card or `bg` prop with border-radius

package/templates/react-sdk-reference/.claude/skills/design-system-extension-skills/CaseSummaryFields.md

@@ -18,32 +18,34 @@ Renders a responsive 2-column read-only grid of field values for a case summary
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `theFields` | `Array<{ type: string; config: FieldConfig }>` | Yes | Array of typed field descriptors to render |
-| `status` | `string` | No | The case status value, injected at position 1 if `showStatus` is true |
-| `showStatus` | `boolean` | No | If `true`, splices a status field entry at position 1 in the fields array |
+| Prop         | Type                                           | Required | Description                                                               |
+| ------------ | ---------------------------------------------- | -------- | ------------------------------------------------------------------------- |
+| `theFields`  | `Array<{ type: string; config: FieldConfig }>` | Yes      | Array of typed field descriptors to render                                |
+| `status`     | `string`                                       | No       | The case status value, injected at position 1 if `showStatus` is true     |
+| `showStatus` | `boolean`                                      | No       | If `true`, splices a status field entry at position 1 in the fields array |
 
 ### FieldConfig shape (within each item in `theFields`)
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `label` | `string` | Field label |
-| `value` | `any` | Field value |
-| `visibility` | `boolean` (optional) | If `false`, the field is hidden |
-| `caption` | `string` (optional) | Alternative label for checkbox fields |
-| `trueLabel` | `string` (optional) | Display text when checkbox value is true |
-| `falseLabel` | `string` (optional) | Display text when checkbox value is false |
-| `currencyISOCode` | `string` (optional) | ISO currency code for currency fields |
+| Property          | Type                 | Description                               |
+| ----------------- | -------------------- | ----------------------------------------- |
+| `label`           | `string`             | Field label                               |
+| `value`           | `any`                | Field value                               |
+| `visibility`      | `boolean` (optional) | If `false`, the field is hidden           |
+| `caption`         | `string` (optional)  | Alternative label for checkbox fields     |
+| `trueLabel`       | `string` (optional)  | Display text when checkbox value is true  |
+| `falseLabel`      | `string` (optional)  | Display text when checkbox value is false |
+| `currencyISOCode` | `string` (optional)  | ISO currency code for currency fields     |
 
 ## Behavioral Contract
 
 ### 1. Status Field Injection
 
 Before rendering, if `showStatus` is `true` AND `theFields[1].type !== 'status'`, inject a status entry at position 1:
+
 ```
 { type: 'status', config: { value: status, label: 'Status' } }
 ```
+
 If the fields array has fewer than 2 items, append the status entry at the end.
 
 ### 2. State Management with Deep Equality
@@ -59,24 +61,25 @@ Skip any field where `config.visibility` exists and is `false`.
 ### 4. Type-Based Rendering (`getFieldValue(field)`)
 
 When `field.config.value` is `null` or `''` (empty):
+
 - For `caseoperator`: render `<Operator {...field.config} />`.
 - For all other types: render a read-only TextField with value `'---'` and the field label.
 
 When `field.config.value` is non-empty, switch on `field.type.toLowerCase()`:
 
-| Type | Rendering |
-|------|-----------|
-| `textinput`, `decimal`, `integer`, `dropdown` | Read-only TextField (standard, no underline) with `value` |
-| `checkbox` | Label: `label \|\| caption`; Value: `value ? trueLabel : falseLabel`; read-only TextField |
-| `status` | Read-only TextField with class `psdk-csf-status-style` (uppercase, small, bold) |
-| `phone` | `<a href={'tel:' + value}>` wrapping a read-only TextField with pointer cursor |
-| `email` | `<a href={'mailto:' + format(value, 'email')}>` wrapping a read-only TextField with pointer cursor |
-| `date` | Read-only TextField with `format(value, 'date', { format: dateFormatStringLong })` |
-| `datetime` | Read-only TextField with `format(value, 'datetime', { format: dateFormatStringLong + ' hh:mm a' })` |
-| `currency` | Read-only TextField with `format(value, 'currency', getCurrencyOptions(currencyISOCode))` |
-| `boolean`, `userreference` | Read-only TextField with `format(value, type)` |
-| `caseoperator` | `<Operator {...field.config} />` |
-| default (unknown) | `<span>{type} {value}</span>` |
+| Type                                          | Rendering                                                                                           |
+| --------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| `textinput`, `decimal`, `integer`, `dropdown` | Read-only TextField (standard, no underline) with `value`                                           |
+| `checkbox`                                    | Label: `label \|\| caption`; Value: `value ? trueLabel : falseLabel`; read-only TextField           |
+| `status`                                      | Read-only TextField with class `psdk-csf-status-style` (uppercase, small, bold)                     |
+| `phone`                                       | `<a href={'tel:' + value}>` wrapping a read-only TextField with pointer cursor                      |
+| `email`                                       | `<a href={'mailto:' + format(value, 'email')}>` wrapping a read-only TextField with pointer cursor  |
+| `date`                                        | Read-only TextField with `format(value, 'date', { format: dateFormatStringLong })`                  |
+| `datetime`                                    | Read-only TextField with `format(value, 'datetime', { format: dateFormatStringLong + ' hh:mm a' })` |
+| `currency`                                    | Read-only TextField with `format(value, 'currency', getCurrencyOptions(currencyISOCode))`           |
+| `boolean`, `userreference`                    | Read-only TextField with `format(value, type)`                                                      |
+| `caseoperator`                                | `<Operator {...field.config} />`                                                                    |
+| default (unknown)                             | `<span>{type} {value}</span>`                                                                       |
 
 All TextFields use: `variant='standard'`, `slotProps.input.readOnly = true`, `slotProps.input.disableUnderline = true`.
 
@@ -90,23 +93,24 @@ Derived from `CaseSummaryFields.css`:
 
 ### Status Field
 
-| Property | Value |
-|----------|-------|
-| Display | inline-block |
-| Font size | 0.75rem |
-| Font weight | bold |
-| Line height | `calc(0.5rem * 2.5)` (≈ 1.25rem) |
-| Height | `calc(0.5rem * 2.5)` (≈ 1.25rem) |
-| Text transform | uppercase |
+| Property       | Value                            |
+| -------------- | -------------------------------- |
+| Display        | inline-block                     |
+| Font size      | 0.75rem                          |
+| Font weight    | bold                             |
+| Line height    | `calc(0.5rem * 2.5)` (≈ 1.25rem) |
+| Height         | `calc(0.5rem * 2.5)` (≈ 1.25rem) |
+| Text transform | uppercase                        |
 
 ### Summary Grid Container
 
-| Property | Value |
-|----------|-------|
-| Padding | `calc(2 * 0.5rem)` (≈ 1rem) |
-| Row gap | `calc(2 * 0.5rem)` (≈ 1rem) |
+| Property | Value                       |
+| -------- | --------------------------- |
+| Padding  | `calc(2 * 0.5rem)` (≈ 1rem) |
+| Row gap  | `calc(2 * 0.5rem)` (≈ 1rem) |
 
 **CSS-only implementation notes:**
+
 - Summary grid: `display: grid; grid-template-columns: 1fr 1fr; padding: 1rem; row-gap: 1rem`.
 - Each field cell: standard read-only text display with label above value.
 - Status text: `font-size: 0.75rem; font-weight: bold; text-transform: uppercase; line-height: 1.25rem`.
@@ -137,15 +141,16 @@ Derived from `CaseSummaryFields.css`:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | CSS Grid 2-column layout with label/value pairs |
-| MUI | `<Grid container>` with `<Grid size={{ xs: 6 }}>` cells; `<TextField variant='standard' readOnly>` per field |
-| Ant Design | `<Descriptions layout='vertical' column={2}>` with typed item renderers |
-| Chakra UI | `<SimpleGrid columns={2}>` with `<FormControl>` label/value pairs |
-| Shadcn/ui | 2-column grid with `<Label>` / `<p>` pairs |
+| Design System      | Recommended Component                                                                                        |
+| ------------------ | ------------------------------------------------------------------------------------------------------------ |
+| Default (CSS only) | CSS Grid 2-column layout with label/value pairs                                                              |
+| MUI                | `<Grid container>` with `<Grid size={{ xs: 6 }}>` cells; `<TextField variant='standard' readOnly>` per field |
+| Ant Design         | `<Descriptions layout='vertical' column={2}>` with typed item renderers                                      |
+| Chakra UI          | `<SimpleGrid columns={2}>` with `<FormControl>` label/value pairs                                            |
+| Shadcn/ui          | 2-column grid with `<Label>` / `<p>` pairs                                                                   |
 
 When implementing in a specific design system, map the following:
+
 - Read-only TextField (standard, no underline) → design system's read-only text display
 - Phone field → `<a href='tel:...'>` wrapper around the display
 - Email field → `<a href='mailto:...'>` wrapper around the display

package/templates/react-sdk-reference/.claude/skills/design-system-extension-skills/DetailsFields.md

@@ -11,6 +11,7 @@ Read-only field display component that receives an array of PConnect-aware field
 Renders a vertical list of read-only field name/value pairs for a details/summary panel. Each field is a PConnect-aware object. The component extracts type, label, and view config from each field's PConnect, forces the view into `readOnly + DISPLAY_ONLY` mode, and delegates rendering to `PConnectComponent`.
 
 Supports three item layouts:
+
 - **Reference type:** Renders the value directly (no label/value grid wrapper).
 - **React element value:** Renders value in a single full-width cell (no label).
 - **Label + value pair:** Renders label in a 6-col cell and value in a 6-col cell.
@@ -23,15 +24,16 @@ Supports three item layouts:
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `fields` | `any[]` | Yes | Array of PConnect-aware field objects. Each must have `.getPConnect()` method |
+| Prop     | Type    | Required | Description                                                                   |
+| -------- | ------- | -------- | ----------------------------------------------------------------------------- |
+| `fields` | `any[]` | Yes      | Array of PConnect-aware field objects. Each must have `.getPConnect()` method |
 
 ## Behavioral Contract
 
 ### 1. Field Iteration and PConnect Setup
 
 For each field in `fields`:
+
 1. Call `field.getPConnect()` to get `thePConn`.
 2. Get `theCompType = thePConn.getComponentName().toLowerCase()`.
 3. Get `label = thePConn.getConfigProps().label`.
@@ -45,11 +47,11 @@ For each field in `fields`:
 
 Choose the layout based on the field:
 
-| Condition | Layout |
-|-----------|--------|
-| `type === 'reference'` | Render `field.value` directly with no wrapper |
-| `isValidElement(field.value)` | Single 12-col cell containing `field.value` (no label) |
-| Default (string/primitive value) | 6-col label cell + 6-col value cell |
+| Condition                        | Layout                                                 |
+| -------------------------------- | ------------------------------------------------------ |
+| `type === 'reference'`           | Render `field.value` directly with no wrapper          |
+| `isValidElement(field.value)`    | Single 12-col cell containing `field.value` (no label) |
+| Default (string/primitive value) | 6-col label cell + 6-col value cell                    |
 
 ### 3. Label/Value Grid Row
 
@@ -73,28 +75,29 @@ Derived from `DetailsFields.tsx` makeStyles:
 
 ### Label
 
-| Property | Value |
-|----------|-------|
-| Display | block |
-| Font weight | 400 |
-| Color | `theme.palette.text.secondary` |
-| Typography | `body2` (≈ 0.875rem / 14px) |
+| Property    | Value                          |
+| ----------- | ------------------------------ |
+| Display     | block                          |
+| Font weight | 400                            |
+| Color       | `theme.palette.text.secondary` |
+| Typography  | `body2` (≈ 0.875rem / 14px)    |
 
 ### Value
 
-| Property | Value |
-|----------|-------|
-| Font weight | 400 |
-| Color | `theme.palette.text.primary` |
-| Typography | `body2` (≈ 0.875rem / 14px) |
+| Property    | Value                        |
+| ----------- | ---------------------------- |
+| Font weight | 400                          |
+| Color       | `theme.palette.text.primary` |
+| Typography  | `body2` (≈ 0.875rem / 14px)  |
 
 ### Row Padding
 
-| Property | Value |
-|----------|-------|
+| Property  | Value              |
+| --------- | ------------------ |
 | Row style | `padding: 4px 0px` |
 
 **CSS-only implementation notes:**
+
 - Each row: `display: grid; grid-template-columns: 1fr 1fr; padding: 4px 0; gap: 8px`.
 - Label: `font-size: 0.875rem; font-weight: 400; color: var(--text-secondary); display: block`.
 - Value: `font-size: 0.875rem; font-weight: 400; color: var(--text-primary)`.
@@ -127,15 +130,16 @@ Derived from `DetailsFields.tsx` makeStyles:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | CSS grid 2-column rows per field pair |
-| MUI | `<Grid container spacing={1}>` per row with `<Typography>` label and value |
-| Ant Design | `<Descriptions layout='horizontal' column={1}>` with PConnect-rendered values |
-| Chakra UI | `<Grid templateColumns='1fr 1fr'>` rows with `<Text>` label/value |
-| Shadcn/ui | `<div class='grid grid-cols-2'>` rows |
+| Design System      | Recommended Component                                                         |
+| ------------------ | ----------------------------------------------------------------------------- |
+| Default (CSS only) | CSS grid 2-column rows per field pair                                         |
+| MUI                | `<Grid container spacing={1}>` per row with `<Typography>` label and value    |
+| Ant Design         | `<Descriptions layout='horizontal' column={1}>` with PConnect-rendered values |
+| Chakra UI          | `<Grid templateColumns='1fr 1fr'>` rows with `<Text>` label/value             |
+| Shadcn/ui          | `<div class='grid grid-cols-2'>` rows                                         |
 
 When implementing in a specific design system, map the following:
+
 - Label → secondary muted text, `body2` size
 - Value → primary text, `body2` size
 - Row padding → `4px 0` vertical spacing between pairs

package/templates/react-sdk-reference/.claude/skills/design-system-extension-skills/FieldGroup.md

@@ -9,6 +9,7 @@ Collapsible or static container that groups related fields under an optional sec
 ## Component Purpose
 
 Renders a labeled section that wraps one or more field components. Supports optional:
+
 - **Section name** — rendered as a bold header above the fields.
 - **Collapsible behavior** — the name header becomes a toggle that shows/hides the fields.
 - **Instructions text** — rendered as HTML below the header and above the fields.
@@ -23,12 +24,12 @@ Children are rendered inside a full-width inner container.
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode` | No | Field components to render inside the group |
-| `name` | `string` | No | Section heading displayed above the fields |
-| `collapsible` | `boolean` | No | If `true`, the header acts as a collapse/expand toggle. Default `false` |
-| `instructions` | `string` | No | HTML string of instruction text shown between header and fields |
+| Prop           | Type        | Required | Description                                                             |
+| -------------- | ----------- | -------- | ----------------------------------------------------------------------- |
+| `children`     | `ReactNode` | No       | Field components to render inside the group                             |
+| `name`         | `string`    | No       | Section heading displayed above the fields                              |
+| `collapsible`  | `boolean`   | No       | If `true`, the header acts as a collapse/expand toggle. Default `false` |
+| `instructions` | `string`    | No       | HTML string of instruction text shown between header and fields         |
 
 ## Behavioral Contract
 
@@ -52,43 +53,44 @@ Derived from `FieldGroup.tsx` makeStyles:
 
 ### Outer Container
 
-| Property | Value |
-|----------|-------|
-| Spacing | 4 units (≈ 32px in MUI default) |
+| Property | Value                           |
+| -------- | ------------------------------- |
+| Spacing  | 4 units (≈ 32px in MUI default) |
 
 ### Component Root Margins
 
-| Property | Value |
-|----------|-------|
-| Margin right | `theme.spacing(1)` (≈ 8px) |
-| Margin left | `theme.spacing(1)` |
-| Margin top | `theme.spacing(1)` |
-| Margin bottom | `theme.spacing(1)` |
+| Property      | Value                      |
+| ------------- | -------------------------- |
+| Margin right  | `theme.spacing(1)` (≈ 8px) |
+| Margin left   | `theme.spacing(1)`         |
+| Margin top    | `theme.spacing(1)`         |
+| Margin bottom | `theme.spacing(1)`         |
 
 ### Field Margin (name row)
 
-| Property | Value |
-|----------|-------|
-| Padding top | `theme.spacing(1)` |
+| Property       | Value              |
+| -------------- | ------------------ |
+| Padding top    | `theme.spacing(1)` |
 | Padding bottom | `theme.spacing(1)` |
-| Margin top | `theme.spacing(1)` |
+| Margin top     | `theme.spacing(1)` |
 
 ### Header Row (collapsible)
 
-| Property | Value |
-|----------|-------|
-| Display | flex |
-| Align items | center |
-| Gap | 5px |
-| Cursor | `pointer` (collapsible) or `auto` (non-collapsible) |
+| Property    | Value                                               |
+| ----------- | --------------------------------------------------- |
+| Display     | flex                                                |
+| Align items | center                                              |
+| Gap         | 5px                                                 |
+| Cursor      | `pointer` (collapsible) or `auto` (non-collapsible) |
 
 ### Instructions
 
-| Property | Value |
-|----------|-------|
-| Padding | `5px 0` |
+| Property | Value   |
+| -------- | ------- |
+| Padding  | `5px 0` |
 
 **CSS-only implementation notes:**
+
 - Outer wrapper: `margin: 8px`.
 - Name row: `padding: 8px 0; margin-top: 8px`.
 - Collapsible header: `display: flex; align-items: center; gap: 5px; cursor: pointer; user-select: none`.
@@ -116,15 +118,16 @@ Derived from `FieldGroup.tsx` makeStyles:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<div>` with toggled `display: none` on children, `<b>` header |
-| MUI | Grid container with `KeyboardArrowRight/Down` icons for collapse toggle |
-| Ant Design | `<Collapse>` or `<Card>` with collapsible panels |
-| Chakra UI | `<Accordion>` or manual `<Box>` with toggle state |
-| Shadcn/ui | `<Collapsible>` + `<CollapsibleTrigger>` + `<CollapsibleContent>` |
+| Design System      | Recommended Component                                                   |
+| ------------------ | ----------------------------------------------------------------------- |
+| Default (CSS only) | `<div>` with toggled `display: none` on children, `<b>` header          |
+| MUI                | Grid container with `KeyboardArrowRight/Down` icons for collapse toggle |
+| Ant Design         | `<Collapse>` or `<Card>` with collapsible panels                        |
+| Chakra UI          | `<Accordion>` or manual `<Box>` with toggle state                       |
+| Shadcn/ui          | `<Collapsible>` + `<CollapsibleTrigger>` + `<CollapsibleContent>`       |
 
 When implementing in a specific design system, map the following:
+
 - `collapsed` toggle → design system's collapse/expand state or controlled component
 - Arrow direction → visual indicator of expand/collapse state (chevron or arrow icon)
 - `instructions` HTML → design system's `dangerouslySetInnerHTML` or rich content slot

package/templates/react-sdk-reference/.claude/skills/design-system-extension-skills/FieldGroupList.md

@@ -18,11 +18,11 @@ Renders a vertical list of field group items. Each item has a bold name header,
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `items` | `Array<{ name: string; id: string; children: ReactNode }>` | Yes | List of field group items to render |
-| `onDelete` | `(id: string) => void` | No | Called with the item's `id` when the delete button is clicked. If not provided, no delete button is shown |
-| `onAdd` | `() => void` | No | Called when the "+Add" link is clicked. If not provided, no add link or dividers are shown |
+| Prop       | Type                                                       | Required | Description                                                                                               |
+| ---------- | ---------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------- |
+| `items`    | `Array<{ name: string; id: string; children: ReactNode }>` | Yes      | List of field group items to render                                                                       |
+| `onDelete` | `(id: string) => void`                                     | No       | Called with the item's `id` when the delete button is clicked. If not provided, no delete button is shown |
+| `onAdd`    | `() => void`                                               | No       | Called when the "+Add" link is clicked. If not provided, no add link or dividers are shown                |
 
 ## Behavioral Contract
 
@@ -49,27 +49,28 @@ Derived from `FieldGroupList.tsx`:
 
 ### Outer Layout
 
-| Property | Value |
-|----------|-------|
+| Property               | Value      |
+| ---------------------- | ---------- |
 | Grid container spacing | 4 (≈ 32px) |
 
 ### Delete Button
 
-| Property | Value |
-|----------|-------|
-| Float | right |
-| Style class | `psdk-utility-button` |
+| Property    | Value                                                       |
+| ----------- | ----------------------------------------------------------- |
+| Float       | right                                                       |
+| Style class | `psdk-utility-button`                                       |
 | Icon source | `Utils.getImageSrc('trash', Utils.getSDKStaticConentUrl())` |
 
 ### "+Add" Link
 
-| Property | Value |
-|----------|-------|
-| Cursor | pointer |
-| Underline | hover |
-| Text | `'+Add'` |
+| Property  | Value    |
+| --------- | -------- |
+| Cursor    | pointer  |
+| Underline | hover    |
+| Text      | `'+Add'` |
 
 **CSS-only implementation notes:**
+
 - Outer wrapper: `display: flex; flex-direction: column; gap: 32px`.
 - Item wrapper: `display: flex; flex-direction: column; gap: 8px; width: 100%`.
 - Item header row: `display: flex; justify-content: space-between; align-items: center`.
@@ -96,15 +97,16 @@ Derived from `FieldGroupList.tsx`:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | Flex column layout with `<hr>` divider and `<button>` delete |
-| MUI | `<Grid container>` items with `<Divider>` and `<Link>` for "+Add" |
-| Ant Design | `<List>` items with `<Divider>` and `<Button type='link'>` for "+Add" |
-| Chakra UI | `<VStack>` with `<Divider>` and `<Button variant='link'>` |
-| Shadcn/ui | `<div>` flex column with `<Separator>` and a link button |
+| Design System      | Recommended Component                                                 |
+| ------------------ | --------------------------------------------------------------------- |
+| Default (CSS only) | Flex column layout with `<hr>` divider and `<button>` delete          |
+| MUI                | `<Grid container>` items with `<Divider>` and `<Link>` for "+Add"     |
+| Ant Design         | `<List>` items with `<Divider>` and `<Button type='link'>` for "+Add" |
+| Chakra UI          | `<VStack>` with `<Divider>` and `<Button variant='link'>`             |
+| Shadcn/ui          | `<div>` flex column with `<Separator>` and a link button              |
 
 When implementing in a specific design system, map the following:
+
 - Delete button → icon button or `danger` variant button placed at the item top-right
 - Divider between items → `<Divider>` / `<hr>` (only when `onAdd` is present)
 - "+Add" link → a text link / `Button variant='link'` that calls `onAdd`