@pega/sdk 0.0.3 → 0.0.4

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

@@ -18,13 +18,13 @@ Provides the top navigation bar for WSS (Web Self-Service) portals. Responsive:
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `links` | `array` | Yes | Array of `{ label, url, id }` navigation link objects |
-| `navDisplayOptions` | `object` | No | `{ alignment: 'left'|'right'|'center', position: 'inline'|'below' }` |
-| `portalLogoUrl` | `string` | No | URL for the portal logo image |
-| `operatorInfo` | `object` | No | `{ displayName: string }` — for avatar initials |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop                | Type       | Required | Description                                           |
+| ------------------- | ---------- | -------- | ----------------------------------------------------- |
+| `links`             | `array`    | Yes      | Array of `{ label, url, id }` navigation link objects |
+| `navDisplayOptions` | `object`   | No       | `{ alignment: 'left'                                  | 'right' | 'center', position: 'inline' | 'below' }` |
+| `portalLogoUrl`     | `string`   | No       | URL for the portal logo image                         |
+| `operatorInfo`      | `object`   | No       | `{ displayName: string }` — for avatar initials       |
+| `getPConnect`       | `function` | Yes      | PConnect getter                                       |
 
 ## Behavioral Contract
 
@@ -38,12 +38,14 @@ Provides the top navigation bar for WSS (Web Self-Service) portals. Responsive:
 ### Navigation Position
 
 From `navDisplayOptions.position`:
+
 - `'inline'` — nav links appear in the same row as the logo.
 - `'below'` — nav links appear in a second row below the logo/title row.
 
 ### Navigation Alignment
 
 From `navDisplayOptions.alignment`:
+
 - `'left'` — links flush left.
 - `'right'` — links pushed to the right (flex with `ml: 'auto'`).
 - `'center'` — links centered.
@@ -87,14 +89,15 @@ From `navDisplayOptions.alignment`:
 
 ## Visual Specifications
 
-| Element | Mobile | Desktop |
-|---------|--------|---------|
-| Logo | Shown | Shown |
+| Element   | Mobile                  | Desktop               |
+| --------- | ----------------------- | --------------------- |
+| Logo      | Shown                   | Shown                 |
 | Nav links | Hidden (hamburger menu) | Shown inline or below |
-| Avatar | Shown | Shown |
-| Hamburger | Shown | Hidden |
+| Avatar    | Shown                   | Shown                 |
+| Hamburger | Shown                   | Hidden                |
 
 **CSS-only implementation notes:**
+
 - App bar: `background: var(--app-primary-color); color: white`.
 - Toolbar: `display: flex; align-items: center; gap: 1rem; padding: 0 1rem`.
 - Hamburger: `display: none`. At mobile breakpoint: `display: flex`.
@@ -121,15 +124,16 @@ From `navDisplayOptions.alignment`:
 
 Listed design systems are examples only.
 
-| Design System | App Bar | Avatar | Mobile Menu |
-|---|---|---|---|
-| Default (CSS only) | `<header>` + CSS | `<div class='avatar'>` | CSS hamburger + dropdown |
-| MUI | `<AppBar>` + `<Toolbar>` | `<Avatar>` | `<Drawer>` or `<Menu>` |
-| Ant Design | `<Layout.Header>` | `<Avatar>` | `<Drawer>` |
-| Chakra UI | `<Box as='header'>` | `<Avatar>` | `<Drawer>` |
-| Shadcn/ui | Custom `<header>` | Custom initials avatar | `<Sheet>` (drawer) |
+| Design System      | App Bar                  | Avatar                 | Mobile Menu              |
+| ------------------ | ------------------------ | ---------------------- | ------------------------ |
+| Default (CSS only) | `<header>` + CSS         | `<div class='avatar'>` | CSS hamburger + dropdown |
+| MUI                | `<AppBar>` + `<Toolbar>` | `<Avatar>`             | `<Drawer>` or `<Menu>`   |
+| Ant Design         | `<Layout.Header>`        | `<Avatar>`             | `<Drawer>`               |
+| Chakra UI          | `<Box as='header'>`      | `<Avatar>`             | `<Drawer>`               |
+| Shadcn/ui          | Custom `<header>`        | Custom initials avatar | `<Sheet>` (drawer)       |
 
 When implementing in a specific design system:
+
 - `logout` from `@pega/auth/lib/sdk-auth-manager` is mandatory — always call the SDK logout, not a custom one
 - Responsive breakpoints for hamburger/nav visibility must be implemented
 - `navDisplayOptions.alignment` and `.position` must be respected

package/templates/react-sdk-reference/.github/skills/widget-components.md

@@ -123,6 +123,7 @@ The PCore data-fetching logic (all `PCore.*` calls) is always identical regardle
 **2. If the chosen design system is not listed** — use the component purpose description to identify the appropriate DS primitives (card, list, table, button, badge, etc.).
 
 **3. Discover the API from installed packages** — confirm component names and props from `.d.ts` before writing JSX:
+
 ```bash
 find node_modules/<ds-package> -name "*.d.ts" | xargs grep -l "Card\|List\|Table" | head -5
 grep -A 30 "interface.*Props" <path-to-file>
@@ -130,14 +131,14 @@ grep -A 30 "interface.*Props" <path-to-file>
 
 **4. Common widget UI primitive mapping:**
 
-| Widget pattern | Typical DS equivalent |
-|---|---|
-| Container with title | `Card` + header/title prop, or `Panel`, `Box` |
-| Item list | `List`, `UnorderedList`, or `Table` rows |
-| Loading indicator | `Spinner`, `Skeleton`, `Loading` |
-| Action button | `Button` with `onClick` |
-| Status badge | `Badge`, `Tag`, `Chip` |
-| Empty state | DS empty/placeholder component or plain `<div>` |
+| Widget pattern       | Typical DS equivalent                           |
+| -------------------- | ----------------------------------------------- |
+| Container with title | `Card` + header/title prop, or `Panel`, `Box`   |
+| Item list            | `List`, `UnorderedList`, or `Table` rows        |
+| Loading indicator    | `Spinner`, `Skeleton`, `Loading`                |
+| Action button        | `Button` with `onClick`                         |
+| Status badge         | `Badge`, `Tag`, `Chip`                          |
+| Empty state          | DS empty/placeholder component or plain `<div>` |
 
 **5. Icons** — if the DS has a companion icon package, read its exports before using any icon name. Never guess icon names.
 
@@ -167,14 +168,7 @@ function createCase(caseType) {
 
 ```typescript
 // Fetch list data
-PCore.getDataPageUtils().getDataAsync(
-  dataPageName,
-  context,
-  params,
-  paging,
-  query,
-  options,
-);
+PCore.getDataPageUtils().getDataAsync(dataPageName, context, params, paging, query, options);
 
 // Get page data (single record)
 PCore.getDataPageUtils().getPageDataAsync(dataPageName, context, params);
@@ -193,12 +187,7 @@ const caseName = pConn.getCaseInfo().getName();
 
 ```typescript
 PCore.getAttachmentUtils().prepareAttachmentData(value);
-PCore.getAttachmentUtils().uploadAttachment(
-  file,
-  onProgress,
-  errorHandler,
-  context,
-);
+PCore.getAttachmentUtils().uploadAttachment(file, onProgress, errorHandler, context);
 PCore.getAttachmentUtils().downloadAttachment(attachmentID, context);
 ```
 

package/templates/react-sdk-reference/.github/skills/widget-skills/AppAnnouncement.md

@@ -18,13 +18,13 @@ Renders an announcement card with a heading, description text, optional bullet l
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `header` | `string` | No | Announcement card title |
-| `description` | `string` | No | Announcement body text |
-| `datasource` | `object` | No | Data source object — `datasource.source` is an array of item objects |
-| `whatsnewlink` | `string` | No | URL for the "See what's new" button; if absent, button is not rendered |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop           | Type       | Required | Description                                                            |
+| -------------- | ---------- | -------- | ---------------------------------------------------------------------- |
+| `header`       | `string`   | No       | Announcement card title                                                |
+| `description`  | `string`   | No       | Announcement body text                                                 |
+| `datasource`   | `object`   | No       | Data source object — `datasource.source` is an array of item objects   |
+| `whatsnewlink` | `string`   | No       | URL for the "See what's new" button; if absent, button is not rendered |
+| `getPConnect`  | `function` | Yes      | PConnect getter                                                        |
 
 ## Behavioral Contract
 
@@ -37,14 +37,15 @@ Renders an announcement card with a heading, description text, optional bullet l
 
 ### Card Layout
 
-| Element | Position |
-|---------|----------|
-| Left accent border | 6px solid, primary light color |
-| Card header | `header` prop as title |
-| Card content | Description text + optional bullet list |
-| "See what's new" button | Below description / bullet list |
+| Element                 | Position                                |
+| ----------------------- | --------------------------------------- |
+| Left accent border      | 6px solid, primary light color          |
+| Card header             | `header` prop as title                  |
+| Card content            | Description text + optional bullet list |
+| "See what's new" button | Below description / bullet list         |
 
 **CSS-only implementation notes:**
+
 - Card: `border-left: 6px solid var(--app-primary-light-color); border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.12)`.
 - Card header: `padding: 12px 16px; font-weight: 600`.
 - Card content: `padding: 0 16px 16px`.
@@ -68,15 +69,16 @@ Renders an announcement card with a heading, description text, optional bullet l
 
 Listed design systems are examples only.
 
-| Design System | Card | Bullet List | Button |
-|---|---|---|---|
-| Default (CSS only) | `<div>` with left border + box-shadow | `<ul>/<li>` | `<button>` opening new tab |
-| MUI | `<Card>` + `<CardHeader>` + `<CardContent>` | `<List>/<ListItem>` or `<ul>` | `<Button>` |
-| Ant Design | `<Card>` with `title` prop | `<ul>/<li>` | `<Button>` |
-| Chakra UI | `<Card>` + `<CardHeader>` + `<CardBody>` | `<UnorderedList>/<ListItem>` | `<Button>` |
-| Shadcn/ui | `<Card>` + `<CardHeader>` + `<CardContent>` | `<ul>/<li>` | `<Button>` |
+| Design System      | Card                                        | Bullet List                   | Button                     |
+| ------------------ | ------------------------------------------- | ----------------------------- | -------------------------- |
+| Default (CSS only) | `<div>` with left border + box-shadow       | `<ul>/<li>`                   | `<button>` opening new tab |
+| MUI                | `<Card>` + `<CardHeader>` + `<CardContent>` | `<List>/<ListItem>` or `<ul>` | `<Button>`                 |
+| Ant Design         | `<Card>` with `title` prop                  | `<ul>/<li>`                   | `<Button>`                 |
+| Chakra UI          | `<Card>` + `<CardHeader>` + `<CardBody>`    | `<UnorderedList>/<ListItem>`  | `<Button>`                 |
+| Shadcn/ui          | `<Card>` + `<CardHeader>` + `<CardContent>` | `<ul>/<li>`                   | `<Button>`                 |
 
 When implementing in a specific design system:
+
 - Left accent border is a key visual identifier — implement it via CSS or the design system's border utilities
 - "See what's new" must open in a new tab (`target='_blank'` + `rel='noopener noreferrer'`)
 - The widget is entirely prop-driven — no data fetching needed

package/templates/react-sdk-reference/.github/skills/widget-skills/Attachment.md

@@ -18,20 +18,20 @@ Renders a file attachment control within a Pega form. Users can upload one or mu
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `value` | `any` | Yes | Attachment list or single attachment object (from Pega property) |
-| `allowMultiple` | `boolean \| string` | No | Whether multiple files can be attached. Default `false` |
-| `extensions` | `string` | No | Comma-separated list of allowed file extensions (e.g., `".pdf,.doc,.jpg"`) |
-| `editMode` | `string` | No | `"tableRows"` for inline table edit mode (special multi-attachment handling) |
-| `isTableFormatter` | `boolean` | No | Whether this widget is used inside a table formatter |
-| `label` | `string` | Yes (from PConnFieldProps) | Field label |
-| `required` | `boolean` | No | Whether a file is required |
-| `disabled` | `boolean` | No | Whether the control is disabled |
-| `displayMode` | `string` | No | `"DISPLAY_ONLY"` for read-only rendering |
-| `validatemessage` | `string` | No | Validation error message to display |
-| `helperText` | `string` | No | Helper text shown below the control |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop               | Type                | Required                   | Description                                                                  |
+| ------------------ | ------------------- | -------------------------- | ---------------------------------------------------------------------------- |
+| `value`            | `any`               | Yes                        | Attachment list or single attachment object (from Pega property)             |
+| `allowMultiple`    | `boolean \| string` | No                         | Whether multiple files can be attached. Default `false`                      |
+| `extensions`       | `string`            | No                         | Comma-separated list of allowed file extensions (e.g., `".pdf,.doc,.jpg"`)   |
+| `editMode`         | `string`            | No                         | `"tableRows"` for inline table edit mode (special multi-attachment handling) |
+| `isTableFormatter` | `boolean`           | No                         | Whether this widget is used inside a table formatter                         |
+| `label`            | `string`            | Yes (from PConnFieldProps) | Field label                                                                  |
+| `required`         | `boolean`           | No                         | Whether a file is required                                                   |
+| `disabled`         | `boolean`           | No                         | Whether the control is disabled                                              |
+| `displayMode`      | `string`            | No                         | `"DISPLAY_ONLY"` for read-only rendering                                     |
+| `validatemessage`  | `string`            | No                         | Validation error message to display                                          |
+| `helperText`       | `string`            | No                         | Helper text shown below the control                                          |
+| `getPConnect`      | `function`          | Yes                        | PConnect getter                                                              |
 
 ## Behavioral Contract
 
@@ -40,11 +40,13 @@ Renders a file attachment control within a Pega form. Users can upload one or mu
 Pega has two attachment data formats — detect which one is in use:
 
 **Old format (annotation-based):**
+
 ```typescript
 value = { pxResults: [...], pyAttachCount: N }
 ```
 
 **New standard format:**
+
 ```typescript
 value = [{ ID, name, mimeType, category, ... }]  // array
 ```
@@ -54,6 +56,7 @@ Call `PCore.getAttachmentUtils().prepareAttachmentData(value)` to normalize both
 ### File Validation
 
 On file selection (via `<input type='file'>`):
+
 1. **Extension check:** Compare selected file's extension against `extensions` prop (split by comma). If not allowed, add an error to the file and do not upload.
 2. **Size check:** Compare file size against `PCore.getEnvironmentInfo().getMaxAttachmentSize()` (in bytes). If too large, add a size error.
 3. Valid files proceed to upload.
@@ -89,15 +92,16 @@ Compressed display for use inside a table cell. Show attachment count and a smal
 
 ## Visual Specifications
 
-| Element | Description |
-|---------|-------------|
-| Label | Standard field label above the control |
-| Drop zone / Upload button | Clickable area to select files; optionally supports drag-and-drop |
-| File list | Each uploaded file: icon + name + size + progress bar (during upload) + delete button |
-| Error state | Red error text below the control for invalid files or upload failures |
-| Helper text | Secondary text below the control |
+| Element                   | Description                                                                           |
+| ------------------------- | ------------------------------------------------------------------------------------- |
+| Label                     | Standard field label above the control                                                |
+| Drop zone / Upload button | Clickable area to select files; optionally supports drag-and-drop                     |
+| File list                 | Each uploaded file: icon + name + size + progress bar (during upload) + delete button |
+| Error state               | Red error text below the control for invalid files or upload failures                 |
+| Helper text               | Secondary text below the control                                                      |
 
 **CSS-only implementation notes:**
+
 - Drop zone: `border: 2px dashed var(--border-color); border-radius: 4px; padding: 1rem; text-align: center; cursor: pointer`.
 - Drop zone hover: `border-color: var(--app-primary-color); background: var(--hover-bg)`.
 - File row: `display: flex; align-items: center; gap: 0.5rem; padding: 4px 0`.
@@ -131,15 +135,16 @@ Compressed display for use inside a table cell. Show attachment count and a smal
 
 Listed design systems are examples only.
 
-| Design System | File Input | Progress | File List |
-|---|---|---|---|
-| Default (CSS only) | `<input type='file'>` + custom styled drop zone | `<progress>` element or CSS bar | `<ul>/<li>` rows |
-| MUI | Custom styled `<Box>` drop zone + hidden `<input>` | `<LinearProgress>` | `<List>/<ListItem>` |
-| Ant Design | `<Upload dragger>` | `<Progress>` | Built-in upload file list |
-| Chakra UI | Custom `<Box>` with `useDropzone` | `<Progress>` | `<VStack>` rows |
-| Shadcn/ui | Custom drop zone | Custom CSS progress bar | `<ul>/<li>` rows |
+| Design System      | File Input                                         | Progress                        | File List                 |
+| ------------------ | -------------------------------------------------- | ------------------------------- | ------------------------- |
+| Default (CSS only) | `<input type='file'>` + custom styled drop zone    | `<progress>` element or CSS bar | `<ul>/<li>` rows          |
+| MUI                | Custom styled `<Box>` drop zone + hidden `<input>` | `<LinearProgress>`              | `<List>/<ListItem>`       |
+| Ant Design         | `<Upload dragger>`                                 | `<Progress>`                    | Built-in upload file list |
+| Chakra UI          | Custom `<Box>` with `useDropzone`                  | `<Progress>`                    | `<VStack>` rows           |
+| Shadcn/ui          | Custom drop zone                                   | Custom CSS progress bar         | `<ul>/<li>` rows          |
 
 When implementing in a specific design system:
+
 - Action sequencer blocking (`addAction`/`removeAction`) is mandatory — do not skip it; form submission must be blocked during uploads
 - Detect and normalize both old and new attachment formats via `prepareAttachmentData`
 - `allowMultiple` coercion (string vs boolean) is required

package/templates/react-sdk-reference/.github/skills/widget-skills/CaseHistory.md

@@ -18,9 +18,9 @@ Renders a table of case events sourced from the `D_pyWorkHistory` data page. Sho
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `getPConnect` | `function` | Yes | PConnect getter — used to resolve case ID and context |
+| Prop          | Type       | Required | Description                                           |
+| ------------- | ---------- | -------- | ----------------------------------------------------- |
+| `getPConnect` | `function` | Yes      | PConnect getter — used to resolve case ID and context |
 
 No additional custom props. All data is fetched internally.
 
@@ -50,6 +50,7 @@ Use `fast-deep-equal/react` to compare new `historyData` with previous value —
 ### Data Transformation
 
 For each history row, map:
+
 - **Date column:** Format `pyUpdatedDateTime` using the SDK date formatter (e.g., `formatDateTime(row.pyUpdatedDateTime)`) or display as-is.
 - **Description column:** `row.pyMessageKey` — the localized event description string.
 - **Performer column:** `row.pyPerformer` — the operator who performed the action.
@@ -59,13 +60,14 @@ For each history row, map:
 
 ### Table Layout
 
-| Column | Field | Width |
-|--------|-------|-------|
-| Date | `pyUpdatedDateTime` (formatted) | ~25% |
-| Description | `pyMessageKey` | ~50% |
-| Performer | `pyPerformer` | ~25% |
+| Column      | Field                           | Width |
+| ----------- | ------------------------------- | ----- |
+| Date        | `pyUpdatedDateTime` (formatted) | ~25%  |
+| Description | `pyMessageKey`                  | ~50%  |
+| Performer   | `pyPerformer`                   | ~25%  |
 
 **CSS-only implementation notes:**
+
 - Table container: `width: 100%; overflow-x: auto`.
 - Table: `border-collapse: collapse; width: 100%`.
 - Header cells: `background: var(--table-header-bg); font-weight: 600; padding: 8px 12px; border-bottom: 2px solid var(--divider-color)`.
@@ -93,15 +95,16 @@ For each history row, map:
 
 Listed design systems are examples only.
 
-| Design System | Table |
-|---|---|
-| Default (CSS only) | `<table>/<thead>/<tbody>/<tr>/<td>` |
-| MUI | `<TableContainer>` + `<Table>` + `<TableHead>/<TableBody>/<TableRow>/<TableCell>` |
-| Ant Design | `<Table dataSource={historyData} columns={...}>` |
-| Chakra UI | `<Table>` + `<Thead>/<Tbody>/<Tr>/<Th>/<Td>` |
-| Shadcn/ui | `<Table>` + `<TableHeader>/<TableBody>/<TableRow>/<TableHead>/<TableCell>` |
+| Design System      | Table                                                                             |
+| ------------------ | --------------------------------------------------------------------------------- |
+| Default (CSS only) | `<table>/<thead>/<tbody>/<tr>/<td>`                                               |
+| MUI                | `<TableContainer>` + `<Table>` + `<TableHead>/<TableBody>/<TableRow>/<TableCell>` |
+| Ant Design         | `<Table dataSource={historyData} columns={...}>`                                  |
+| Chakra UI          | `<Table>` + `<Thead>/<Tbody>/<Tr>/<Th>/<Td>`                                      |
+| Shadcn/ui          | `<Table>` + `<TableHeader>/<TableBody>/<TableRow>/<TableHead>/<TableCell>`        |
 
 When implementing in a specific design system:
+
 - `fast-deep-equal` comparison is a performance optimization — include it to avoid redundant renders on re-subscription
 - Data page name `D_pyWorkHistory` is fixed — do not make it configurable
 - Missing field fallback `"---"` should be consistent across all three columns

package/templates/react-sdk-reference/.github/skills/widget-skills/FileUtility.md

@@ -18,19 +18,21 @@ The primary attachments management panel in the case utilities column. Shows up
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `caseId` | `string` | No | Optional case ID override. If absent, resolved from `pConn.getCaseInfo().getID()` |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop          | Type       | Required | Description                                                                       |
+| ------------- | ---------- | -------- | --------------------------------------------------------------------------------- |
+| `caseId`      | `string`   | No       | Optional case ID override. If absent, resolved from `pConn.getCaseInfo().getID()` |
+| `getPConnect` | `function` | Yes      | PConnect getter                                                                   |
 
 ## Behavioral Contract
 
 ### Attachment Fetch
 
 On mount and on attachment change events:
+
 ```
 PCore.getAttachmentUtils().getCaseAttachments(caseKey, context)
 ```
+
 Returns array of attachment/link objects. Store in `attachments` state.
 
 Debounced auto-refresh: on `CASE_ATTACHMENTS_UPDATED` pub-sub event, wait 1000ms (debounced) then re-fetch. This prevents rapid re-fetches when multiple files are uploaded simultaneously.
@@ -42,6 +44,7 @@ Show only the first 3 items from `attachments`. If `attachments.length > 3`, sho
 ### SummaryList Integration
 
 Map each attachment/link to a `SummaryItem`-compatible object:
+
 ```typescript
 {
   id: attachment.ID,
@@ -89,6 +92,7 @@ Call `PCore.getAttachmentUtils().deleteAttachment(attachmentID, context)`. Refre
 ### Actions Menu
 
 Render a `<MoreVertIcon>` `<IconButton>` that opens a `<Menu>` with:
+
 - `"Add file"` — opens add-file modal
 - `"Add link"` — opens add-link modal
 
@@ -96,39 +100,40 @@ Render a `<MoreVertIcon>` `<IconButton>` that opens a `<Menu>` with:
 
 ### Main Card
 
-| Element | Description |
-|---------|-------------|
-| Card header | `"Attachments"` (or localized) + count badge |
-| Actions icon | `<MoreVertIcon>` button top-right |
-| Attachment rows | Up to 3 `SummaryItem` cards |
-| "View all" button | Text button, shown when > 3 attachments |
+| Element           | Description                                  |
+| ----------------- | -------------------------------------------- |
+| Card header       | `"Attachments"` (or localized) + count badge |
+| Actions icon      | `<MoreVertIcon>` button top-right            |
+| Attachment rows   | Up to 3 `SummaryItem` cards                  |
+| "View all" button | Text button, shown when > 3 attachments      |
 
 ### "View all" Modal
 
-| Element | Description |
-|---------|-------------|
-| Modal header | `"All attachments (N)"` |
+| Element         | Description                |
+| --------------- | -------------------------- |
+| Modal header    | `"All attachments (N)"`    |
 | Attachment rows | All items in `SummaryList` |
-| Close button | `X` in modal header |
+| Close button    | `X` in modal header        |
 
 ### Add File Modal
 
-| Element | Description |
-|---------|-------------|
-| File picker | `<input type='file'>` |
-| Progress bar | Per-file upload progress |
+| Element        | Description                                  |
+| -------------- | -------------------------------------------- |
+| File picker    | `<input type='file'>`                        |
+| Progress bar   | Per-file upload progress                     |
 | Action buttons | `ActionButtonsForFileUtil` (Cancel + Attach) |
 
 ### Add Link Modal
 
-| Element | Description |
-|---------|-------------|
-| Title field | `<TextField label='Title'>` — required |
-| URL field | `<TextField label='URL'>` — required |
-| Attach button | Enabled only when both fields are filled |
+| Element        | Description                                  |
+| -------------- | -------------------------------------------- |
+| Title field    | `<TextField label='Title'>` — required       |
+| URL field      | `<TextField label='URL'>` — required         |
+| Attach button  | Enabled only when both fields are filled     |
 | Action buttons | `ActionButtonsForFileUtil` (Cancel + Attach) |
 
 **CSS-only implementation notes:**
+
 - Main card: standard card styles.
 - Modal: `position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; border-radius: 8px; box-shadow: 0 4px 24px rgba(0,0,0,0.2); min-width: 480px; padding: 1.5rem`.
 - "View all" button: text style, `color: var(--app-primary-color); cursor: pointer`.
@@ -142,13 +147,13 @@ A simple button row component used inside the FileUtility modals to render Cance
 
 ### Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `arMainButtons` | `any[]` | Yes | Primary button definitions `[{ actionID, name }]` |
-| `arSecondaryButtons` | `any[]` | Yes | Secondary (cancel) button definitions `[{ actionID, name }]` |
-| `primaryAction` | `function` | Yes | Callback invoked when the primary button is clicked |
-| `secondaryAction` | `function` | Yes | Callback invoked when the secondary/cancel button is clicked |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop                 | Type       | Required | Description                                                  |
+| -------------------- | ---------- | -------- | ------------------------------------------------------------ |
+| `arMainButtons`      | `any[]`    | Yes      | Primary button definitions `[{ actionID, name }]`            |
+| `arSecondaryButtons` | `any[]`    | Yes      | Secondary (cancel) button definitions `[{ actionID, name }]` |
+| `primaryAction`      | `function` | Yes      | Callback invoked when the primary button is clicked          |
+| `secondaryAction`    | `function` | Yes      | Callback invoked when the secondary/cancel button is clicked |
+| `getPConnect`        | `function` | Yes      | PConnect getter                                              |
 
 ### Layout
 
@@ -186,15 +191,16 @@ A simple button row component used inside the FileUtility modals to render Cance
 
 Listed design systems are examples only.
 
-| Design System | Card | Action Menu | Modal | Progress |
-|---|---|---|---|---|
-| Default (CSS only) | `<div>` card | `<button>` + custom dropdown | `<dialog>` | CSS progress bar |
-| MUI | `<Card>` | `<IconButton>` + `<Menu>/<MenuItem>` | `<Dialog>` | `<CircularProgress>` or `<LinearProgress>` |
-| Ant Design | `<Card>` | `<Dropdown menu={{ items }}>` | `<Modal>` | `<Progress>` |
-| Chakra UI | `<Card>` | `<Menu>/<MenuButton>/<MenuList>` | `<Modal>` | `<Progress>` |
-| Shadcn/ui | `<Card>` | `<DropdownMenu>` | `<Dialog>` | Custom progress bar |
+| Design System      | Card         | Action Menu                          | Modal      | Progress                                   |
+| ------------------ | ------------ | ------------------------------------ | ---------- | ------------------------------------------ |
+| Default (CSS only) | `<div>` card | `<button>` + custom dropdown         | `<dialog>` | CSS progress bar                           |
+| MUI                | `<Card>`     | `<IconButton>` + `<Menu>/<MenuItem>` | `<Dialog>` | `<CircularProgress>` or `<LinearProgress>` |
+| Ant Design         | `<Card>`     | `<Dropdown menu={{ items }}>`        | `<Modal>`  | `<Progress>`                               |
+| Chakra UI          | `<Card>`     | `<Menu>/<MenuButton>/<MenuList>`     | `<Modal>`  | `<Progress>`                               |
+| Shadcn/ui          | `<Card>`     | `<DropdownMenu>`                     | `<Dialog>` | Custom progress bar                        |
 
 When implementing in a specific design system:
+
 - Debounced refresh (1000ms) after pub-sub attachment events is required — prevents excessive API calls
 - `linkAttachmentsToCase` must be called after upload — uploading alone does not attach to the case
 - `ActionButtonsForFileUtil` receives button definition arrays — render them generically from `arMainButtons`/`arSecondaryButtons`

package/templates/react-sdk-reference/.github/skills/widget-skills/Followers.md

@@ -18,11 +18,12 @@ Intended to display the list of operators following a case, allowing users to fo
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop          | Type       | Required | Description     |
+| ------------- | ---------- | -------- | --------------- |
+| `getPConnect` | `function` | Yes      | PConnect getter |
 
 No additional custom props in the current stub implementation. A full implementation would likely include:
+
 - `datasource` — data page name for follower list
 - `headerText` — widget title (e.g., `"Followers"`)
 
@@ -47,24 +48,26 @@ No additional custom props in the current stub implementation. A full implementa
 
 ### Stub Rendering
 
-| Element | Value |
-|---------|-------|
-| Card title | `"Followers"` |
-| Card body | `"Followers - unsupported"` plain text |
+| Element    | Value                                  |
+| ---------- | -------------------------------------- |
+| Card title | `"Followers"`                          |
+| Card body  | `"Followers - unsupported"` plain text |
 
 ### Expected Full Rendering
 
-| Element | Description |
-|---------|-------------|
-| Card header | `"Followers"` + count badge |
-| Follower avatars | Row of avatar initials circles |
-| Follow button | Toggle button `"Follow"` / `"Unfollow"` |
+| Element          | Description                             |
+| ---------------- | --------------------------------------- |
+| Card header      | `"Followers"` + count badge             |
+| Follower avatars | Row of avatar initials circles          |
+| Follow button    | Toggle button `"Follow"` / `"Unfollow"` |
 
 **CSS-only implementation notes (stub):**
+
 - Card: standard card layout — `border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.12); padding: 1rem`.
 - Unsupported message: `color: var(--secondary-text-color); font-size: 0.875rem`.
 
 **CSS-only implementation notes (full):**
+
 - Avatar row: `display: flex; flex-wrap: wrap; gap: 4px`.
 - Avatar circle: `width: 32px; height: 32px; border-radius: 50%; background: var(--avatar-bg); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600`.
 
@@ -85,15 +88,16 @@ No additional custom props in the current stub implementation. A full implementa
 
 Listed design systems are examples only.
 
-| Design System | Card | Avatar | Toggle Button |
-|---|---|---|---|
-| Default (CSS only) | `<div>` with border | CSS circle with initials | `<button>` |
-| MUI | `<Card>` + `<Avatar>` | `<Avatar>` | `<Button>` variant toggle |
-| Ant Design | `<Card>` | `<Avatar>` | `<Button>` |
-| Chakra UI | `<Card>` | `<Avatar>` | `<Button>` |
-| Shadcn/ui | `<Card>` | Custom avatar | `<Button>` |
+| Design System      | Card                  | Avatar                   | Toggle Button             |
+| ------------------ | --------------------- | ------------------------ | ------------------------- |
+| Default (CSS only) | `<div>` with border   | CSS circle with initials | `<button>`                |
+| MUI                | `<Card>` + `<Avatar>` | `<Avatar>`               | `<Button>` variant toggle |
+| Ant Design         | `<Card>`              | `<Avatar>`               | `<Button>`                |
+| Chakra UI          | `<Card>`              | `<Avatar>`               | `<Button>`                |
+| Shadcn/ui          | `<Card>`              | Custom avatar            | `<Button>`                |
 
 When implementing in a specific design system:
+
 - The current stub only needs a card with a message — implement the full behavior once the Pega backend supports it
 - Follow/unfollow must be scoped to the current case (`caseKey` from `pConn.getCaseInfo().getKey()`)
 - Follower count badge in the card header improves scannability