@pega/sdk 0.0.3 → 0.0.4

package/templates/react-sdk-reference/.github/skills/field-skills/RichText.md

@@ -18,8 +18,8 @@ Renders a rich text (WYSIWYG) editor for HTML content. Uses a registry-resolved
 
 ## Props (component-specific)
 
-| Prop | Type | Description |
-|------|------|-------------|
+| Prop              | Type                | Description                                   |
+| ----------------- | ------------------- | --------------------------------------------- |
 | `additionalProps` | `object` (optional) | Extra props forwarded to the `RichTextEditor` |
 
 ## Behavioral Contract
@@ -29,8 +29,8 @@ Renders a rich text (WYSIWYG) editor for HTML content. Uses a registry-resolved
 3. **Props coercion:** `readOnly`, `required`, `disabled` must be coerced to booleans:
    ```typescript
    [readOnly, required, disabled] = [readOnly, required, disabled].map(
-     prop => prop === true || (typeof prop === 'string' && prop === 'true')
-   )
+     (prop) => prop === true || (typeof prop === 'string' && prop === 'true'),
+   );
    ```
 4. **Editable mode:**
    - Track `status` for error state.
@@ -47,6 +47,7 @@ Renders a rich text (WYSIWYG) editor for HTML content. Uses a registry-resolved
 6. **`RichTextEditor` component:** Resolved via `getComponentFromRegistry('RichTextEditor')`. This is a design-system extension component that wraps the actual WYSIWYG library (e.g., TinyMCE).
 
 ### Editable RichTextEditor props
+
 ```
 label, labelHidden={hideLabel}, info={helperTextToDisplay}, defaultValue={value},
 placeholder, disabled, required, testId, ref={editorRef},
@@ -54,6 +55,7 @@ error={status === 'error'}, onBlur={handleBlur}, onChange={handleChange}
 ```
 
 ### Read-only RichTextEditor props
+
 ```
 label, labelHidden={hideLabel}, defaultValue={value}, testId, info={helperTextToDisplay},
 ref={editorRef}, readOnly
@@ -62,6 +64,7 @@ ref={editorRef}, readOnly
 ## Display Mode Rendering
 
 Display modes pass `isHtml={true}` to render HTML content safely:
+
 - **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : label} value={value} isHtml />`
 - **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : label} value={value} isHtml variant='stacked' />`
 
@@ -75,9 +78,15 @@ The visual appearance of the rich text editor depends on the underlying `RichTex
 
 ```css
 /* RichText.css — must be imported */
-.tox .tox-toolbar { background-color: var(--app-background-color) !important; }
-.tox .tox-toolbar__primary { background-color: var(--app-background-color) !important; }
-.tox .tox-toolbar__button { color: var(--app-text-color) !important; }
+.tox .tox-toolbar {
+  background-color: var(--app-background-color) !important;
+}
+.tox .tox-toolbar__primary {
+  background-color: var(--app-background-color) !important;
+}
+.tox .tox-toolbar__button {
+  color: var(--app-text-color) !important;
+}
 .tox .tox-toolbar__button--enabled {
   background: var(--app-primary-color) !important;
   color: #fff !important;
@@ -100,6 +109,7 @@ The visual appearance of the rich text editor depends on the underlying `RichTex
 **Note:** Import `./RichText.css` in the component file. The CSS variables (`--app-background-color`, `--app-text-color`, etc.) are set by the application theme.
 
 When implementing with a different design system:
+
 - Custom CSS for toolbar theming may be needed
 - The editor container should be full-width
 - Minimum height: ~200px for a usable editing area
@@ -121,6 +131,7 @@ When implementing with a different design system:
 - `useRef` from React.
 
 **For other rich text editors:**
+
 - Any WYSIWYG editor that exposes `ref.current.getContent()` or equivalent.
 - Examples: Quill, Draft.js, Slate.js, CKEditor.
 
@@ -130,9 +141,9 @@ When implementing with a different design system:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
+| Design System      | Recommended Component                             |
+| ------------------ | ------------------------------------------------- |
 | Default (CSS only) | `contenteditable` div + custom toolbar OR TinyMCE |
-| MUI | `RichTextEditor` custom extension (TinyMCE) |
-| Ant Design | Quill or TinyMCE with Ant styling |
-| Chakra UI | Quill or TipTap with Chakra styling |
+| MUI                | `RichTextEditor` custom extension (TinyMCE)       |
+| Ant Design         | Quill or TinyMCE with Ant styling                 |
+| Chakra UI          | Quill or TipTap with Chakra styling               |

package/templates/react-sdk-reference/.github/skills/field-skills/ScalarList.md

@@ -24,14 +24,14 @@ Renders a list of scalar (primitive) values by dynamically creating a child comp
 import type { PConnProps } from '@pega/sdk-react';
 ```
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `value` | `any[]` | Array of scalar values to display |
-| `componentType` | `string` | The Pega component type to use for each item (e.g., `'TextInput'`, `'Date'`) |
-| `label` | `string` | Field label |
-| `displayMode` | `string` | Display mode |
-| `hideLabel` | `boolean` | Whether to hide the label |
-| `displayInModal` | `boolean` | Whether this is displayed in a modal context |
+| Prop             | Type      | Description                                                                  |
+| ---------------- | --------- | ---------------------------------------------------------------------------- |
+| `value`          | `any[]`   | Array of scalar values to display                                            |
+| `componentType`  | `string`  | The Pega component type to use for each item (e.g., `'TextInput'`, `'Date'`) |
+| `label`          | `string`  | Field label                                                                  |
+| `displayMode`    | `string`  | Display mode                                                                 |
+| `hideLabel`      | `boolean` | Whether to hide the label                                                    |
+| `displayInModal` | `boolean` | Whether this is displayed in a modal context                                 |
 
 All remaining props (`...restProps`) are forwarded to each child component.
 
@@ -40,7 +40,7 @@ All remaining props (`...restProps`) are forwarded to each child component.
 1. **No state, no event handling** — purely display/read-only.
 2. **Item rendering:** Map each value in `scalarValues` to a component via `getPConnect().createComponent(...)`:
    ```typescript
-   const items = scalarValues?.map(scalarValue =>
+   const items = scalarValues?.map((scalarValue) =>
      getPConnect().createComponent(
        {
          type: componentType,
@@ -49,14 +49,14 @@ All remaining props (`...restProps`) are forwarded to each child component.
            displayMode: 'DISPLAY_ONLY',
            label,
            ...restProps,
-           readOnly: 'true'
-         }
+           readOnly: 'true',
+         },
        },
-       '',   // 2nd arg: empty string
-       '',   // 3rd arg: empty string
-       {}    // 4th arg: empty object
-     )
-   )
+       '', // 2nd arg: empty string
+       '', // 3rd arg: empty string
+       {}, // 4th arg: empty object
+     ),
+   );
    ```
 3. **`CommaSeparatedList` sub-component:** A local component that renders items as `<span>` elements inside a `<ul>` with no list styling:
    ```html
@@ -70,31 +70,41 @@ All remaining props (`...restProps`) are forwarded to each child component.
 ## Display Mode Rendering
 
 **`STACKED_LARGE_VAL` or `DISPLAY_ONLY`:**
+
 ```html
 <div>
-  <CommaSeparatedList items={items} />
+  <CommaSeparatedList items="{items}" />
 </div>
 ```
+
 No `FieldValueList` wrapper in these modes — the items are rendered directly.
 
 **Default (no display mode):**
+
 ```
 <FieldValueList name={hideLabel ? '' : label} value={<CommaSeparatedList items={items} />} variant='stacked' />
 ```
 
 ## Visual Specifications
 
-| Property | Value |
-|----------|-------|
-| List style | No bullets, no padding, no margin on `<ul>` |
-| Item display | Each item rendered as `<span>` (inline) |
-| Separator | Items are adjacent spans (no comma separator despite the name) |
-| Layout | Vertical stack when wrapped in `FieldValueList variant='stacked'` |
+| Property     | Value                                                             |
+| ------------ | ----------------------------------------------------------------- |
+| List style   | No bullets, no padding, no margin on `<ul>`                       |
+| Item display | Each item rendered as `<span>` (inline)                           |
+| Separator    | Items are adjacent spans (no comma separator despite the name)    |
+| Layout       | Vertical stack when wrapped in `FieldValueList variant='stacked'` |
 
 **CSS-only notes:**
+
 ```css
-.scalar-list { list-style: none; padding: 0; margin: 0; }
-.scalar-list-item { display: inline; }
+.scalar-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.scalar-list-item {
+  display: inline;
+}
 ```
 
 ## Edge Cases & Special Logic
@@ -116,9 +126,9 @@ No `FieldValueList` wrapper in these modes — the items are rendered directly.
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<ul>` with `<span>` items |
-| MUI | `<List>` with `<ListItem>` or just `<Typography>` per item |
-| Ant Design | `<List>` items or `<Space>` with `<Tag>` |
-| Chakra UI | `<List>` or `<HStack>` with `<Tag>` |
+| Design System      | Recommended Component                                      |
+| ------------------ | ---------------------------------------------------------- |
+| Default (CSS only) | `<ul>` with `<span>` items                                 |
+| MUI                | `<List>` with `<ListItem>` or just `<Typography>` per item |
+| Ant Design         | `<List>` items or `<Space>` with `<Tag>`                   |
+| Chakra UI          | `<List>` or `<HStack>` with `<Tag>`                        |

package/templates/react-sdk-reference/.github/skills/field-skills/SelectableCard.md

@@ -20,29 +20,29 @@ Renders a grid of selectable cards. Each card contains a radio button or checkbo
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `getPConnect` | `function` | — | PConnect accessor |
-| `type` | `'radio' \| 'checkbox'` | — | Selection type |
-| `image` | `object` | — | `{ imagePosition, imageSize, showImageDescription, imageField, imageDescription }` |
-| `dataSource` | `any` | — | Source of card data (in editable mode) |
-| `recordKey` | `string` | `''` | The key field name in each record (e.g., `'pyID'`) |
-| `className` | `string` | — | CSS class for the card |
-| `cardLabel` | `string` | — | The field name to use as card title |
-| `hideFieldLabels` | `boolean` | `false` | Hide field labels inside cards |
-| `readOnly` | `boolean` | — | Read-only mode |
-| `disabled` | `boolean` | — | Disabled state |
-| `readOnlyList` | `any[]` | `[]` | Selected items for read-only display |
-| `displayMode` | `string` | — | Display mode string |
-| `radioBtnValue` | `any` | — | Currently selected value (radio mode) |
-| `onChange` | `function` | — | Change handler |
-| `onBlur` | `function` | — | Blur handler |
-| `onClick` | `function` | — | Click handler |
-| `onKeyDown` | `function` | — | KeyDown handler |
-| `additionalProps` | `any` | — | Spread onto the radio/checkbox input |
-| `testId` | `string` | — | Test identifier |
-| `setIsRadioCardSelected` | `function` | — | Callback to inform parent whether radio selection matched |
-| `showNoValue` | `boolean` | `false` | When true (read-only + no selected items), render "No Value" text |
+| Prop                     | Type                    | Default | Description                                                                        |
+| ------------------------ | ----------------------- | ------- | ---------------------------------------------------------------------------------- |
+| `getPConnect`            | `function`              | —       | PConnect accessor                                                                  |
+| `type`                   | `'radio' \| 'checkbox'` | —       | Selection type                                                                     |
+| `image`                  | `object`                | —       | `{ imagePosition, imageSize, showImageDescription, imageField, imageDescription }` |
+| `dataSource`             | `any`                   | —       | Source of card data (in editable mode)                                             |
+| `recordKey`              | `string`                | `''`    | The key field name in each record (e.g., `'pyID'`)                                 |
+| `className`              | `string`                | —       | CSS class for the card                                                             |
+| `cardLabel`              | `string`                | —       | The field name to use as card title                                                |
+| `hideFieldLabels`        | `boolean`               | `false` | Hide field labels inside cards                                                     |
+| `readOnly`               | `boolean`               | —       | Read-only mode                                                                     |
+| `disabled`               | `boolean`               | —       | Disabled state                                                                     |
+| `readOnlyList`           | `any[]`                 | `[]`    | Selected items for read-only display                                               |
+| `displayMode`            | `string`                | —       | Display mode string                                                                |
+| `radioBtnValue`          | `any`                   | —       | Currently selected value (radio mode)                                              |
+| `onChange`               | `function`              | —       | Change handler                                                                     |
+| `onBlur`                 | `function`              | —       | Blur handler                                                                       |
+| `onClick`                | `function`              | —       | Click handler                                                                      |
+| `onKeyDown`              | `function`              | —       | KeyDown handler                                                                    |
+| `additionalProps`        | `any`                   | —       | Spread onto the radio/checkbox input                                               |
+| `testId`                 | `string`                | —       | Test identifier                                                                    |
+| `setIsRadioCardSelected` | `function`              | —       | Callback to inform parent whether radio selection matched                          |
+| `showNoValue`            | `boolean`               | `false` | When true (read-only + no selected items), render "No Value" text                  |
 
 ## Behavioral Contract
 
@@ -61,18 +61,20 @@ If `showNoValue`: render a plain text element showing `'No Value'` and return ea
 ### Card click handler
 
 Cards should be clickable anywhere (not just on the checkbox/radio):
+
 ```typescript
 const handleCardClick = (event) => {
-  if (disabled || readOnly) return
-  if (event.target.closest('label, input')) return  // native click already handled
-  const input = event.currentTarget.querySelector('input[type="radio"], input[type="checkbox"]')
-  if (input) input.click()
-}
+  if (disabled || readOnly) return;
+  if (event.target.closest('label, input')) return; // native click already handled
+  const input = event.currentTarget.querySelector('input[type="radio"], input[type="checkbox"]');
+  if (input) input.click();
+};
 ```
 
 ### Subsection: Display mode (`displayMode === 'DISPLAY_ONLY'`)
 
 Render a **simple read-only card** (no radio/checkbox) with:
+
 - Optional image (`<img>`)
 - Card title: `item[cardLabel]`
 - Additional resolved fields (from `resolveReferenceFields`)
@@ -80,7 +82,7 @@ Render a **simple read-only card** (no radio/checkbox) with:
 
 ```html
 <Card style="display: flex">
-  {image && <img src="..." alt="..." style="width: 100px">}
+  {image && <img src="..." alt="..." style="width: 100px" />}
   <CardContent>
     <body1>{item[cardLabel]}</body1>
     {fields.map(field => <body2>{field.value}</body2>)}
@@ -112,11 +114,11 @@ Render a **selectable card** with click handler, containing the appropriate inpu
 
 ### Image layout (inline positions)
 
-| `imagePosition` | CardContent style | Image section width | Content section width |
-|-----------------|-------------------|--------------------|----------------------|
-| `'inline-start'` | `display: flex` | 40% | 60% |
-| `'inline-end'` | `display: flex, flexDirection: row-reverse` | 40% | 60% |
-| block (default) | default | full width | full width |
+| `imagePosition`  | CardContent style                           | Image section width | Content section width |
+| ---------------- | ------------------------------------------- | ------------------- | --------------------- |
+| `'inline-start'` | `display: flex`                             | 40%                 | 60%                   |
+| `'inline-end'`   | `display: flex, flexDirection: row-reverse` | 40%                 | 60%                   |
+| block (default)  | default                                     | full width          | full width            |
 
 ### Image element
 
@@ -135,10 +137,11 @@ img {
 ### Field display layout
 
 Each additional field in editable mode:
+
 ```css
 .card-field {
   font-size: 0.875rem;
-  display: grid;           /* only if type !== 'TextArea' */
+  display: grid; /* only if type !== 'TextArea' */
   grid-template-columns: 1fr 1fr;
   margin: 5px;
 }
@@ -147,6 +150,7 @@ Each additional field in editable mode:
 ### Radio tracking
 
 After iterating cards, if `type === 'radio'` and `setIsRadioCardSelected`:
+
 ```
 if (radioBtnValue === item[recordKey]) radioItemSelected = true
 // After loop:
@@ -159,20 +163,21 @@ setIsRadioCardSelected(radioItemSelected)
 
 ## Visual Specifications
 
-| Property | Editable card | Display-only card |
-|----------|--------------|-------------------|
-| Cursor | `pointer` (unless disabled/readOnly → `default`) | Default |
-| Height | `100%` (fills grid row) | Auto |
-| Layout | Column flex | Row flex |
-| Padding top | 15px wrapper | — |
-| Image (display-only) | 100px fixed width | 100px fixed width |
-| Card border | Default (design-system card elevation) | Default |
-| Disabled | `cursor: default` | — |
+| Property             | Editable card                                    | Display-only card |
+| -------------------- | ------------------------------------------------ | ----------------- |
+| Cursor               | `pointer` (unless disabled/readOnly → `default`) | Default           |
+| Height               | `100%` (fills grid row)                          | Auto              |
+| Layout               | Column flex                                      | Row flex          |
+| Padding top          | 15px wrapper                                     | —                 |
+| Image (display-only) | 100px fixed width                                | 100px fixed width |
+| Card border          | Default (design-system card elevation)           | Default           |
+| Disabled             | `cursor: default`                                | —                 |
 
 **CSS-only card implementation:**
+
 ```css
 .selectable-card {
-  border: 1px solid rgba(0,0,0,0.12);
+  border: 1px solid rgba(0, 0, 0, 0.12);
   border-radius: 4px;
   padding: 16px;
   cursor: pointer;
@@ -182,10 +187,20 @@ setIsRadioCardSelected(radioItemSelected)
   margin-top: 15px;
   transition: border-color 0.2s;
 }
-.selectable-card:hover { border-color: #1976d2; }
-.selectable-card.disabled { cursor: default; opacity: 0.7; }
-.selectable-card.readonly { cursor: default; }
-.selectable-card-label { font-size: 1rem; font-weight: 400; }
+.selectable-card:hover {
+  border-color: #1976d2;
+}
+.selectable-card.disabled {
+  cursor: default;
+  opacity: 0.7;
+}
+.selectable-card.readonly {
+  cursor: default;
+}
+.selectable-card-label {
+  font-size: 1rem;
+  font-weight: 400;
+}
 ```
 
 ## Edge Cases & Special Logic
@@ -208,9 +223,9 @@ setIsRadioCardSelected(radioItemSelected)
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | Custom `<div>` cards with `<input type="radio/checkbox">` inside |
-| MUI | `<Card>` + `<CardContent>` + `<FormControlLabel>` + `<Radio>`/`<Checkbox>` |
-| Ant Design | Custom cards with `<Radio>`/`<Checkbox>` |
-| Chakra UI | `<Box>` as card + `<Radio>`/`<Checkbox>` |
+| Design System      | Recommended Component                                                      |
+| ------------------ | -------------------------------------------------------------------------- |
+| Default (CSS only) | Custom `<div>` cards with `<input type="radio/checkbox">` inside           |
+| MUI                | `<Card>` + `<CardContent>` + `<FormControlLabel>` + `<Radio>`/`<Checkbox>` |
+| Ant Design         | Custom cards with `<Radio>`/`<Checkbox>`                                   |
+| Chakra UI          | `<Box>` as card + `<Radio>`/`<Checkbox>`                                   |

package/templates/react-sdk-reference/.github/skills/field-skills/SemanticLink.md

@@ -18,29 +18,31 @@ Renders a clickable link (`<a>` or button-style link) that navigates to a Pega c
 
 ## Props (component-specific)
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `text` | `string` | — | The visible link text; renders `'--'` if empty |
-| `resourcePayload` | `any` | `{}` | Resource payload containing `caseClassName`, `resourceType`, etc. |
-| `resourceParams` | `any` | `{}` | Resource parameters containing `workID` for case navigation |
-| `previewKey` | `string \| null` | — | Case preview key for opening work item by handle |
-| `onClick` | `(event) => void` | — | External click handler (received but not directly used — link has its own handler) |
-| `testId` | `string` | `''` | Test identifier |
-| `referenceType` | `string \| null` | — | `'DATA'` or case reference type |
-| `dataRelationshipContext` | `string \| null` | `null` | Context for data relationship resolution |
-| `contextPage` | `any` | — | Context page with `classID` |
+| Prop                      | Type              | Default | Description                                                                        |
+| ------------------------- | ----------------- | ------- | ---------------------------------------------------------------------------------- |
+| `text`                    | `string`          | —       | The visible link text; renders `'--'` if empty                                     |
+| `resourcePayload`         | `any`             | `{}`    | Resource payload containing `caseClassName`, `resourceType`, etc.                  |
+| `resourceParams`          | `any`             | `{}`    | Resource parameters containing `workID` for case navigation                        |
+| `previewKey`              | `string \| null`  | —       | Case preview key for opening work item by handle                                   |
+| `onClick`                 | `(event) => void` | —       | External click handler (received but not directly used — link has its own handler) |
+| `testId`                  | `string`          | `''`    | Test identifier                                                                    |
+| `referenceType`           | `string \| null`  | —       | `'DATA'` or case reference type                                                    |
+| `dataRelationshipContext` | `string \| null`  | `null`  | Context for data relationship resolution                                           |
+| `contextPage`             | `any`             | —       | Context page with `classID`                                                        |
 
 ## Behavioral Contract
 
 ### URL Resolution
 
 **Step 1: Determine if this is a data reference:**
+
 - `isData = false`
 - `shouldTreatAsDataReference = !previewKey && resourcePayload.caseClassName` (non-preview, has class)
 - If `contextPage?.classID`: override `resourcePayload.caseClassName = contextPage.classID`
 - If `resourcePayload.caseClassName === WORKCLASS`: override with actual case class from `pConnect.getValue(CASE_INFO_CLASSID)`
 
 **Step 2a: Data reference (`referenceType === 'DATA'` or `shouldTreatAsDataReference`):**
+
 ```
 const dataRefContext = semanticUtils.getDataReferenceInfo(pConnect, dataRelationshipContext, contextPage)
 dataViewName = dataRefContext.dataContext
@@ -49,12 +51,14 @@ isData = true
 ```
 
 **Step 2b: Resource type DATA (`resourcePayload.resourceType === 'DATA'`):**
+
 - Look up data page: `dataViewName = PCore.getDataTypeUtils().getLookUpDataPage(resourcePayload.className)`
 - Look up page info and parameters
 - Build `payload` from parameters by resolving property annotations
 - `isData = true`
 
 **Step 3: Build `linkURL`:**
+
 - If `isData && dataViewName && payload`: `linkURL = PCore.getSemanticUrlUtils().getResolvedSemanticURL(ACTION_SHOWDATA, { pageName: 'pyDetails', dataViewName }, payload)`
 - Else (case): fix `resourceParams.objectID` for empty workID edge case, then `linkURL = PCore.getSemanticUrlUtils().getResolvedSemanticURL(ACTION_OPENWORKBYHANDLE, resourcePayload, resourceParams)`
 
@@ -87,18 +91,19 @@ No explicit `displayMode` handling — `SemanticLink` is always rendered as a li
 
 Derived from `makeStyles` and MUI `Link` props:
 
-| Property | Value |
-|----------|-------|
-| Display | Inline link (button role) |
-| Padding | `8px` all sides |
-| Margin | `8px` all sides |
-| Color | Primary link color (blue, default theme) |
-| Font weight | 400 |
-| Underline | Default link underline on hover |
-| Cursor | Pointer |
-| Text | `text` prop value, or `'--'` if empty |
+| Property    | Value                                    |
+| ----------- | ---------------------------------------- |
+| Display     | Inline link (button role)                |
+| Padding     | `8px` all sides                          |
+| Margin      | `8px` all sides                          |
+| Color       | Primary link color (blue, default theme) |
+| Font weight | 400                                      |
+| Underline   | Default link underline on hover          |
+| Cursor      | Pointer                                  |
+| Text        | `text` prop value, or `'--'` if empty    |
 
 **CSS-only implementation:**
+
 ```css
 .semantic-link {
   display: inline-block;
@@ -112,7 +117,9 @@ Derived from `makeStyles` and MUI `Link` props:
   border: none;
   font-size: inherit;
 }
-.semantic-link:hover { text-decoration: underline; }
+.semantic-link:hover {
+  text-decoration: underline;
+}
 ```
 
 ## Edge Cases & Special Logic
@@ -140,9 +147,9 @@ Derived from `makeStyles` and MUI `Link` props:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
+| Design System      | Recommended Component                                |
+| ------------------ | ---------------------------------------------------- |
 | Default (CSS only) | `<button class="semantic-link">` with anchor styling |
-| MUI | `<Link component='button'>` |
-| Ant Design | `<Typography.Link>` or `<Button type="link">` |
-| Chakra UI | `<Link as="button">` |
+| MUI                | `<Link component='button'>`                          |
+| Ant Design         | `<Typography.Link>` or `<Button type="link">`        |
+| Chakra UI          | `<Link as="button">`                                 |

package/templates/react-sdk-reference/.github/skills/field-skills/TextArea.md

@@ -18,11 +18,12 @@ Renders an editable multi-line text area. Used for long-form text input such as
 
 ## Props (component-specific)
 
-| Prop | Type | Description |
-|------|------|-------------|
+| Prop            | Type             | Description                                                |
+| --------------- | ---------------- | ---------------------------------------------------------- |
 | `fieldMetadata` | `any` (optional) | Metadata object; used to read `maxLength` for the textarea |
 
 All other props come from `PConnFieldProps`. Import type as:
+
 ```typescript
 import type { PConnFieldProps } from '@pega/sdk-react';
 ```
@@ -51,21 +52,22 @@ Set `readOnly` on the textarea element (NOT a read-only version via `TextInput`
 
 Derived from the reference component's MUI props:
 
-| Property | Standard (editable) | Read-only |
-|----------|---------------------|-----------|
-| Width | 100% | 100% |
-| Min rows | 5 | 5 |
-| Max rows | 5 (scrollable beyond) | 5 |
-| Border | 1px solid (outlined) | None (standard/flat) |
-| Border radius | 4px | — |
-| Label | Floating label | Floating label |
-| Helper text | Below textarea | Below textarea |
-| Error state | Red border + red helper text | — |
-| Resize | Vertical resize handle (browser default) | Same |
-| Font size | 0.875rem | 0.875rem |
-| Padding | 8px 14px | — |
+| Property      | Standard (editable)                      | Read-only            |
+| ------------- | ---------------------------------------- | -------------------- |
+| Width         | 100%                                     | 100%                 |
+| Min rows      | 5                                        | 5                    |
+| Max rows      | 5 (scrollable beyond)                    | 5                    |
+| Border        | 1px solid (outlined)                     | None (standard/flat) |
+| Border radius | 4px                                      | —                    |
+| Label         | Floating label                           | Floating label       |
+| Helper text   | Below textarea                           | Below textarea       |
+| Error state   | Red border + red helper text             | —                    |
+| Resize        | Vertical resize handle (browser default) | Same                 |
+| Font size     | 0.875rem                                 | 0.875rem             |
+| Padding       | 8px 14px                                 | —                    |
 
 **CSS-only implementation notes:**
+
 - `textarea { min-height: calc(5 * 1.4375em + 16px); max-height: calc(5 * 1.4375em + 16px); overflow-y: auto; resize: vertical; }`
 - Error: `border-color: #d32f2f`
 - Read-only: `border: none; background: transparent;`
@@ -87,10 +89,10 @@ Derived from the reference component's MUI props:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<textarea rows="5">` with floating label |
-| MUI | `<TextField multiline minRows={5} maxRows={5} />` |
-| Ant Design | `<Input.TextArea rows={5} />` |
-| Chakra UI | `<Textarea />` |
-| Shadcn/ui | `<Textarea />` |
+| Design System      | Recommended Component                             |
+| ------------------ | ------------------------------------------------- |
+| Default (CSS only) | `<textarea rows="5">` with floating label         |
+| MUI                | `<TextField multiline minRows={5} maxRows={5} />` |
+| Ant Design         | `<Input.TextArea rows={5} />`                     |
+| Chakra UI          | `<Textarea />`                                    |
+| Shadcn/ui          | `<Textarea />`                                    |