@pega/sdk 0.0.2 → 0.0.4

package/templates/react-sdk-reference/.github/prompts/identify-components.prompt.md

@@ -23,80 +23,80 @@ Use the table below to map what you see in the image to SDK component names.
 
 ### Structural / layout components
 
-| What you see | SDK component name | Category |
-|---|---|---|
-| Chevron/arrow step bar at the top of a form (e.g. "Step 1 → Step 2 → Step 3") | `Stages` | infra |
-| Full case shell: step bar + case title + **action menu (⋮ or kebab)** + tabbed content area | `CaseView` | template |
-| Row of action buttons at the bottom (Cancel / Save / Submit) | `ActionButtons` | infra |
-| White/card area wrapping form fields | `DefaultForm` | template |
-| Full-page layout with header + sidebar + content area | `AppShell` | template |
-| Left-side vertical tab navigation | `VerticalTabs` | infra |
-| Top navigation bar with logo + user menu | `NavBar` | infra |
-| Top navigation bar (WSS / self-service variant) | `WssNavBar` | template |
-| Two-column layout (equal or narrow/wide split) | `TwoColumn` / `NarrowWide` / `WideNarrow` | template |
-| Single-column stacked layout | `OneColumn` | template |
-| Tabbed panel inside a form or page | `SubTabs` / `Details` | template |
+| What you see                                                                                | SDK component name                        | Category |
+| ------------------------------------------------------------------------------------------- | ----------------------------------------- | -------- |
+| Chevron/arrow step bar at the top of a form (e.g. "Step 1 → Step 2 → Step 3")               | `Stages`                                  | infra    |
+| Full case shell: step bar + case title + **action menu (⋮ or kebab)** + tabbed content area | `CaseView`                                | template |
+| Row of action buttons at the bottom (Cancel / Save / Submit)                                | `ActionButtons`                           | infra    |
+| White/card area wrapping form fields                                                        | `DefaultForm`                             | template |
+| Full-page layout with header + sidebar + content area                                       | `AppShell`                                | template |
+| Left-side vertical tab navigation                                                           | `VerticalTabs`                            | infra    |
+| Top navigation bar with logo + user menu                                                    | `NavBar`                                  | infra    |
+| Top navigation bar (WSS / self-service variant)                                             | `WssNavBar`                               | template |
+| Two-column layout (equal or narrow/wide split)                                              | `TwoColumn` / `NarrowWide` / `WideNarrow` | template |
+| Single-column stacked layout                                                                | `OneColumn`                               | template |
+| Tabbed panel inside a form or page                                                          | `SubTabs` / `Details`                     | template |
 
 ### Field components
 
-| What you see | SDK component name | Category |
-|---|---|---|
-| Single-line text input box | `TextInput` | field |
-| Multi-line text input / textarea | `TextArea` | field |
-| Dropdown / select menu (chevron on right) | `Dropdown` | field |
-| Phone input with country code prefix (e.g. "+1 ▼") | `Phone` | field |
-| Date picker input (calendar icon) | `Date` | field |
-| Date + time picker input | `DateTime` | field |
-| Time-only picker | `Time` | field |
-| Currency input ($ prefix or formatted number) | `Currency` | field |
-| Percentage input (% suffix) | `Percentage` | field |
-| Decimal / float number input | `Decimal` | field |
-| Integer-only number input | `Integer` | field |
-| Email input (envelope icon or @-hint) | `Email` | field |
-| URL input (link icon or http-hint) | `URL` | field |
-| Checkbox with label | `Checkbox` | field |
-| Radio button group | `RadioButtons` | field |
-| Multi-select / tag-style select with chips | `Multiselect` | field |
-| Type-ahead / autocomplete input with suggestions | `AutoComplete` | field |
-| Rich text editor (toolbar with Bold/Italic/etc.) | `RichText` | field |
-| Read-only comma-separated list of values | `ScalarList` | field |
-| Selectable card / tile (click to select, like a plan card) | `SelectableCard` | field |
-| Map / location picker with pin icon | `Location` | field |
-| Link to another object/record | `ObjectReference` | field |
-| Hyperlink displayed inline | `SemanticLink` | field |
-| User avatar + name displayed inline | `UserReference` | field |
-| Inline alert / warning inside a form | `CancelAlert` | field |
-| Static text block / paragraph inside a form | `TextContent` | field |
-| Grouping box around related fields | `Group` | field |
+| What you see                                               | SDK component name | Category |
+| ---------------------------------------------------------- | ------------------ | -------- |
+| Single-line text input box                                 | `TextInput`        | field    |
+| Multi-line text input / textarea                           | `TextArea`         | field    |
+| Dropdown / select menu (chevron on right)                  | `Dropdown`         | field    |
+| Phone input with country code prefix (e.g. "+1 ▼")         | `Phone`            | field    |
+| Date picker input (calendar icon)                          | `Date`             | field    |
+| Date + time picker input                                   | `DateTime`         | field    |
+| Time-only picker                                           | `Time`             | field    |
+| Currency input ($ prefix or formatted number)              | `Currency`         | field    |
+| Percentage input (% suffix)                                | `Percentage`       | field    |
+| Decimal / float number input                               | `Decimal`          | field    |
+| Integer-only number input                                  | `Integer`          | field    |
+| Email input (envelope icon or @-hint)                      | `Email`            | field    |
+| URL input (link icon or http-hint)                         | `URL`              | field    |
+| Checkbox with label                                        | `Checkbox`         | field    |
+| Radio button group                                         | `RadioButtons`     | field    |
+| Multi-select / tag-style select with chips                 | `Multiselect`      | field    |
+| Type-ahead / autocomplete input with suggestions           | `AutoComplete`     | field    |
+| Rich text editor (toolbar with Bold/Italic/etc.)           | `RichText`         | field    |
+| Read-only comma-separated list of values                   | `ScalarList`       | field    |
+| Selectable card / tile (click to select, like a plan card) | `SelectableCard`   | field    |
+| Map / location picker with pin icon                        | `Location`         | field    |
+| Link to another object/record                              | `ObjectReference`  | field    |
+| Hyperlink displayed inline                                 | `SemanticLink`     | field    |
+| User avatar + name displayed inline                        | `UserReference`    | field    |
+| Inline alert / warning inside a form                       | `CancelAlert`      | field    |
+| Static text block / paragraph inside a form                | `TextContent`      | field    |
+| Grouping box around related fields                         | `Group`            | field    |
 
 ### Widget components
 
-| What you see | SDK component name | Category |
-|---|---|---|
-| To-do / task list card with assignments | `ToDo` | widget |
-| File attachment area with upload button | `Attachment` | widget |
-| Case history / audit trail table | `CaseHistory` | widget |
-| File list with download actions | `FileUtility` | widget |
-| List of follower avatars + "Follow" button | `Followers` | widget |
-| "+" quick-create button with dropdown menu | `QuickCreate` | widget |
-| Summary card for a single record with action menu | `SummaryItem` | widget |
-| List of SummaryItem cards | `SummaryList` | widget |
-| Announcement / news card | `AppAnnouncement` | widget |
+| What you see                                      | SDK component name | Category |
+| ------------------------------------------------- | ------------------ | -------- |
+| To-do / task list card with assignments           | `ToDo`             | widget   |
+| File attachment area with upload button           | `Attachment`       | widget   |
+| Case history / audit trail table                  | `CaseHistory`      | widget   |
+| File list with download actions                   | `FileUtility`      | widget   |
+| List of follower avatars + "Follow" button        | `Followers`        | widget   |
+| "+" quick-create button with dropdown menu        | `QuickCreate`      | widget   |
+| Summary card for a single record with action menu | `SummaryItem`      | widget   |
+| List of SummaryItem cards                         | `SummaryList`      | widget   |
+| Announcement / news card                          | `AppAnnouncement`  | widget   |
 
 ### DSE / design system extension components
 
-| What you see | SDK component name | Category |
-|---|---|---|
-| Coloured banner alert bar (info / warning / error / success) | `AlertBanner` | designSystemExtension |
-| Hero-style banner with title + CTA button | `Banner` | designSystemExtension |
-| Read-only field+value pairs in a case summary | `CaseSummaryFields` | designSystemExtension |
-| Read-only label+value pairs in a details view | `DetailsFields` | designSystemExtension |
-| Collapsible section with header (accordion-style) | `FieldGroup` | designSystemExtension |
-| List of field groups with "Add" link | `FieldGroupList` | designSystemExtension |
-| User operator info popover (name + contact) | `Operator` | designSystemExtension |
-| Comment/pulse card with avatar + timestamp | `Pulse` | designSystemExtension |
-| Rich text editor with theme-aware toolbar | `RichTextEditor` | designSystemExtension |
-| Quick-create shortcut links list (WSS sidebar) | `WssQuickCreate` | designSystemExtension |
+| What you see                                                 | SDK component name  | Category              |
+| ------------------------------------------------------------ | ------------------- | --------------------- |
+| Coloured banner alert bar (info / warning / error / success) | `AlertBanner`       | designSystemExtension |
+| Hero-style banner with title + CTA button                    | `Banner`            | designSystemExtension |
+| Read-only field+value pairs in a case summary                | `CaseSummaryFields` | designSystemExtension |
+| Read-only label+value pairs in a details view                | `DetailsFields`     | designSystemExtension |
+| Collapsible section with header (accordion-style)            | `FieldGroup`        | designSystemExtension |
+| List of field groups with "Add" link                         | `FieldGroupList`    | designSystemExtension |
+| User operator info popover (name + contact)                  | `Operator`          | designSystemExtension |
+| Comment/pulse card with avatar + timestamp                   | `Pulse`             | designSystemExtension |
+| Rich text editor with theme-aware toolbar                    | `RichTextEditor`    | designSystemExtension |
+| Quick-create shortcut links list (WSS sidebar)               | `WssQuickCreate`    | designSystemExtension |
 
 ---
 

package/templates/react-sdk-reference/.github/skills/component-contracts.md

@@ -8,35 +8,35 @@ Quick-reference lookup of all registered component names and their prop contract
 
 All extend `PConnFieldProps` from `@pega/sdk-react`.
 
-| Registry Name | File | Additional Props |
-|---------------|------|-----------------|
-| `TextInput` | `field/TextInput/TextInput.tsx` | `fieldMetadata?: any` |
-| `TextArea` | `field/TextArea/` | `fieldMetadata?: any` |
-| `Dropdown` | `field/Dropdown/` | `datasource?, listType?` |
-| `Checkbox` | `field/Checkbox/` | `value: boolean` (not string) |
-| `RadioButtons` | `field/RadioButtons/` | `datasource?, listType?` |
-| `Date` | `field/Date/` | — |
-| `DateTime` | `field/DateTime/` | — |
-| `Time` | `field/Time/` | — |
-| `Currency` | `field/Currency/` | `currencyISOCode?, formatterType?` |
-| `Decimal` | `field/Decimal/` | `decimalPrecision?` |
-| `Integer` | `field/Integer/` | — |
-| `Percentage` | `field/Percentage/` | — |
-| `Email` | `field/Email/Email.tsx` | — |
-| `Phone` | `field/Phone/Phone.tsx` | `datasource?` (country codes) |
-| `URL` | `field/URL/` | — |
-| `AutoComplete` | `field/AutoComplete/` | `datasource?, listType?, columns?` |
-| `Multiselect` | `field/Multiselect/Multiselect.tsx` | `datasource?, listType?` |
-| `RichText` | `field/RichText/` | — |
-| `ScalarList` | `field/ScalarList/` | `datasource?` |
-| `SelectableCard` | `field/SelectableCard/` | `datasource?` |
-| `Group` | `field/Group/` | — |
-| `Location` | `field/Location/` | — |
-| `ObjectReference` | `field/ObjectReference/` | `value: object` |
-| `SemanticLink` | `field/SemanticLink/` | `text?, displayAs?` |
-| `UserReference` | `field/UserReference/` | `showAsFormattedText?` |
-| `CancelAlert` | `field/CancelAlert/` | — |
-| `TextContent` | `field/TextContent/` | `content?` |
+| Registry Name     | File                                | Additional Props                   |
+| ----------------- | ----------------------------------- | ---------------------------------- |
+| `TextInput`       | `field/TextInput/TextInput.tsx`     | `fieldMetadata?: any`              |
+| `TextArea`        | `field/TextArea/`                   | `fieldMetadata?: any`              |
+| `Dropdown`        | `field/Dropdown/`                   | `datasource?, listType?`           |
+| `Checkbox`        | `field/Checkbox/`                   | `value: boolean` (not string)      |
+| `RadioButtons`    | `field/RadioButtons/`               | `datasource?, listType?`           |
+| `Date`            | `field/Date/`                       | —                                  |
+| `DateTime`        | `field/DateTime/`                   | —                                  |
+| `Time`            | `field/Time/`                       | —                                  |
+| `Currency`        | `field/Currency/`                   | `currencyISOCode?, formatterType?` |
+| `Decimal`         | `field/Decimal/`                    | `decimalPrecision?`                |
+| `Integer`         | `field/Integer/`                    | —                                  |
+| `Percentage`      | `field/Percentage/`                 | —                                  |
+| `Email`           | `field/Email/Email.tsx`             | —                                  |
+| `Phone`           | `field/Phone/Phone.tsx`             | `datasource?` (country codes)      |
+| `URL`             | `field/URL/`                        | —                                  |
+| `AutoComplete`    | `field/AutoComplete/`               | `datasource?, listType?, columns?` |
+| `Multiselect`     | `field/Multiselect/Multiselect.tsx` | `datasource?, listType?`           |
+| `RichText`        | `field/RichText/`                   | —                                  |
+| `ScalarList`      | `field/ScalarList/`                 | `datasource?`                      |
+| `SelectableCard`  | `field/SelectableCard/`             | `datasource?`                      |
+| `Group`           | `field/Group/`                      | —                                  |
+| `Location`        | `field/Location/`                   | —                                  |
+| `ObjectReference` | `field/ObjectReference/`            | `value: object`                    |
+| `SemanticLink`    | `field/SemanticLink/`               | `text?, displayAs?`                |
+| `UserReference`   | `field/UserReference/`              | `showAsFormattedText?`             |
+| `CancelAlert`     | `field/CancelAlert/`                | —                                  |
+| `TextContent`     | `field/TextContent/`                | `content?`                         |
 
 ---
 
@@ -44,30 +44,30 @@ All extend `PConnFieldProps` from `@pega/sdk-react`.
 
 All extend `PConnProps`. Most receive React `children` or use `getPConnect().getChildren()`.
 
-| Registry Name | File | Key Props |
-|---------------|------|-----------|
-| `OneColumn` | `template/OneColumn/OneColumn.tsx` | `children` |
-| `OneColumnPage` | `template/OneColumn/OneColumnPage.tsx` | `children` |
-| `OneColumnTab` | `template/OneColumn/OneColumnTab.tsx` | `children` |
-| `TwoColumn` | `template/TwoColumn/TwoColumn.tsx` | `children, templateCol?` |
-| `TwoColumnPage` | `template/TwoColumn/TwoColumnPage.tsx` | `children` |
-| `TwoColumnTab` | `template/TwoColumn/TwoColumnTab.tsx` | `children` |
-| `NarrowWide` | `template/NarrowWide/NarrowWide.tsx` | `children, templateCol?` |
-| `WideNarrow` | `template/WideNarrow/WideNarrow.tsx` | `children, templateCol?` |
-| `Details` | `template/Details/Details.tsx` | `children` |
-| `DefaultForm` | `template/DefaultForm/` | PConnect children |
-| `DefaultPage` | `template/DefaultPage/` | PConnect children |
-| `CaseView` | `template/CaseView/` | PConnect children, `header?, subheader?` |
-| `CaseSummary` | `template/CaseSummary/` | PConnect children |
-| `Confirmation` | `template/Confirmation/` | `label?` |
-| `SimpleTable` | `template/SimpleTable/SimpleTable.tsx` | `datasource?, fields?, label?` |
-| `ListView` | `template/ListView/` | `datasource?, fields?` |
-| `SubTabs` | `template/SubTabs/` | PConnect children |
-| `AppShell` | `template/AppShell/AppShell.tsx` | PConnect children |
-| `DataReference` | `template/DataReference/` | PConnect children |
-| `ListPage` | `template/ListPage/ListPage.tsx` | PConnect children |
-| `InlineDashboard` | `template/InlineDashboard/` | PConnect children |
-| `FieldGroupTemplate` | `template/FieldGroupTemplate/` | PConnect children |
+| Registry Name        | File                                   | Key Props                                |
+| -------------------- | -------------------------------------- | ---------------------------------------- |
+| `OneColumn`          | `template/OneColumn/OneColumn.tsx`     | `children`                               |
+| `OneColumnPage`      | `template/OneColumn/OneColumnPage.tsx` | `children`                               |
+| `OneColumnTab`       | `template/OneColumn/OneColumnTab.tsx`  | `children`                               |
+| `TwoColumn`          | `template/TwoColumn/TwoColumn.tsx`     | `children, templateCol?`                 |
+| `TwoColumnPage`      | `template/TwoColumn/TwoColumnPage.tsx` | `children`                               |
+| `TwoColumnTab`       | `template/TwoColumn/TwoColumnTab.tsx`  | `children`                               |
+| `NarrowWide`         | `template/NarrowWide/NarrowWide.tsx`   | `children, templateCol?`                 |
+| `WideNarrow`         | `template/WideNarrow/WideNarrow.tsx`   | `children, templateCol?`                 |
+| `Details`            | `template/Details/Details.tsx`         | `children`                               |
+| `DefaultForm`        | `template/DefaultForm/`                | PConnect children                        |
+| `DefaultPage`        | `template/DefaultPage/`                | PConnect children                        |
+| `CaseView`           | `template/CaseView/`                   | PConnect children, `header?, subheader?` |
+| `CaseSummary`        | `template/CaseSummary/`                | PConnect children                        |
+| `Confirmation`       | `template/Confirmation/`               | `label?`                                 |
+| `SimpleTable`        | `template/SimpleTable/SimpleTable.tsx` | `datasource?, fields?, label?`           |
+| `ListView`           | `template/ListView/`                   | `datasource?, fields?`                   |
+| `SubTabs`            | `template/SubTabs/`                    | PConnect children                        |
+| `AppShell`           | `template/AppShell/AppShell.tsx`       | PConnect children                        |
+| `DataReference`      | `template/DataReference/`              | PConnect children                        |
+| `ListPage`           | `template/ListPage/ListPage.tsx`       | PConnect children                        |
+| `InlineDashboard`    | `template/InlineDashboard/`            | PConnect children                        |
+| `FieldGroupTemplate` | `template/FieldGroupTemplate/`         | PConnect children                        |
 
 ---
 
@@ -75,66 +75,66 @@ All extend `PConnProps`. Most receive React `children` or use `getPConnect().get
 
 All extend `PConnProps`. Fetch their own data.
 
-| Registry Name | File | Key Props |
-|---------------|------|-----------|
-| `Todo` | `widget/ToDo/` | `datasource?, headerText?, context?` |
-| `Attachment` | `widget/Attachment/` | `value, allowMultiple?, extensions?` |
-| `CaseHistory` | `widget/CaseHistory/` | `datasource?` |
-| `FileUtility` | `widget/FileUtility/FileUtility.tsx` | `datasource?` |
-| `Followers` | `widget/Followers/` | — |
-| `AppAnnouncement` | `widget/AppAnnouncement/` | `datasource?, headerText?` |
-| `QuickCreate` | `widget/QuickCreate/` | — |
-| `SummaryItem` | `widget/SummaryItem/` | `label?, value?, actions?` |
-| `SummaryList` | `widget/SummaryList/` | `datasource?` |
+| Registry Name     | File                                 | Key Props                            |
+| ----------------- | ------------------------------------ | ------------------------------------ |
+| `Todo`            | `widget/ToDo/`                       | `datasource?, headerText?, context?` |
+| `Attachment`      | `widget/Attachment/`                 | `value, allowMultiple?, extensions?` |
+| `CaseHistory`     | `widget/CaseHistory/`                | `datasource?`                        |
+| `FileUtility`     | `widget/FileUtility/FileUtility.tsx` | `datasource?`                        |
+| `Followers`       | `widget/Followers/`                  | —                                    |
+| `AppAnnouncement` | `widget/AppAnnouncement/`            | `datasource?, headerText?`           |
+| `QuickCreate`     | `widget/QuickCreate/`                | —                                    |
+| `SummaryItem`     | `widget/SummaryItem/`                | `label?, value?, actions?`           |
+| `SummaryList`     | `widget/SummaryList/`                | `datasource?`                        |
 
 ---
 
 ## Design System Extension Components
 
-| Registry Name | File | Key Props |
-|---------------|------|-----------|
-| `FieldValueList` | `designSystemExtension/FieldValueList/` | `name?, value?, variant?` |
-| `AlertBanner` | `designSystemExtension/AlertBanner/` | `variant, heading?, messages, onClose?` |
-| `Banner` | `designSystemExtension/Banner/` | `variant?, text?` |
-| `CaseSummaryFields` | `designSystemExtension/CaseSummaryFields/` | PConnect-based |
-| `DetailsFields` | `designSystemExtension/DetailsFields/` | PConnect-based |
-| `FieldGroup` | `designSystemExtension/FieldGroup/` | PConnect-based |
-| `FieldGroupList` | `designSystemExtension/FieldGroupList/` | PConnect-based |
-| `Operator` | `designSystemExtension/Operator/` | `label?, name?, id?` |
-| `Pulse` | `designSystemExtension/Pulse/` | PConnect-based |
-| `RichTextEditor` | `designSystemExtension/RichTextEditor/` | extends `PConnFieldProps` |
-| `WssQuickCreate` | `designSystemExtension/WssQuickCreate/` | — |
+| Registry Name       | File                                       | Key Props                               |
+| ------------------- | ------------------------------------------ | --------------------------------------- |
+| `FieldValueList`    | `designSystemExtension/FieldValueList/`    | `name?, value?, variant?`               |
+| `AlertBanner`       | `designSystemExtension/AlertBanner/`       | `variant, heading?, messages, onClose?` |
+| `Banner`            | `designSystemExtension/Banner/`            | `variant?, text?`                       |
+| `CaseSummaryFields` | `designSystemExtension/CaseSummaryFields/` | PConnect-based                          |
+| `DetailsFields`     | `designSystemExtension/DetailsFields/`     | PConnect-based                          |
+| `FieldGroup`        | `designSystemExtension/FieldGroup/`        | PConnect-based                          |
+| `FieldGroupList`    | `designSystemExtension/FieldGroupList/`    | PConnect-based                          |
+| `Operator`          | `designSystemExtension/Operator/`          | `label?, name?, id?`                    |
+| `Pulse`             | `designSystemExtension/Pulse/`             | PConnect-based                          |
+| `RichTextEditor`    | `designSystemExtension/RichTextEditor/`    | extends `PConnFieldProps`               |
+| `WssQuickCreate`    | `designSystemExtension/WssQuickCreate/`    | —                                       |
 
 ---
 
 ## Infrastructure (from `sdkComponents` — do NOT replace)
 
-| Registry Name | Source |
-|---------------|--------|
-| `RootContainer` | `@pega/sdk-react` |
-| `ViewContainer` | `@pega/sdk-react` |
-| `FlowContainer` | `@pega/sdk-react` |
-| `Reference` | `@pega/sdk-react` |
-| `View` | `@pega/sdk-react` |
-| `Region` | `@pega/sdk-react` |
-| `CaseView` (infra) | `@pega/sdk-react` |
-| `Assignment` | `@pega/sdk-react` |
-| `AssignmentCard` | `@pega/sdk-react` |
-| `ActionButtons` | `@pega/sdk-react` |
+| Registry Name         | Source            |
+| --------------------- | ----------------- |
+| `RootContainer`       | `@pega/sdk-react` |
+| `ViewContainer`       | `@pega/sdk-react` |
+| `FlowContainer`       | `@pega/sdk-react` |
+| `Reference`           | `@pega/sdk-react` |
+| `View`                | `@pega/sdk-react` |
+| `Region`              | `@pega/sdk-react` |
+| `CaseView` (infra)    | `@pega/sdk-react` |
+| `Assignment`          | `@pega/sdk-react` |
+| `AssignmentCard`      | `@pega/sdk-react` |
+| `ActionButtons`       | `@pega/sdk-react` |
 | `CaseSummary` (infra) | `@pega/sdk-react` |
-| `ErrorBoundary` | `@pega/sdk-react` |
-| `MultiStep` | `@pega/sdk-react` |
+| `ErrorBoundary`       | `@pega/sdk-react` |
+| `MultiStep`           | `@pega/sdk-react` |
 
 ---
 
 ## Infra (sample-local, replaceable but exercise caution)
 
-| Registry Name | File |
-|---------------|------|
-| `ActionButtons` | `infra/ActionButtons/` |
-| `DeferLoad` | `infra/DeferLoad/` |
-| `NavBar` | `infra/NavBar/` |
-| `Stages` | `infra/Stages/` |
-| `DashboardFilter` | `infra/DashboardFilter/` |
-| `VerticalTabs` | `infra/VerticalTabs/VerticalTabs.tsx` |
+| Registry Name           | File                                           |
+| ----------------------- | ---------------------------------------------- |
+| `ActionButtons`         | `infra/ActionButtons/`                         |
+| `DeferLoad`             | `infra/DeferLoad/`                             |
+| `NavBar`                | `infra/NavBar/`                                |
+| `Stages`                | `infra/Stages/`                                |
+| `DashboardFilter`       | `infra/DashboardFilter/`                       |
+| `VerticalTabs`          | `infra/VerticalTabs/VerticalTabs.tsx`          |
 | `LeftAlignVerticalTabs` | `infra/VerticalTabs/LeftAlignVerticalTabs.tsx` |

package/templates/react-sdk-reference/.github/skills/design-system-extension-skills/AlertBanner.md

@@ -18,12 +18,12 @@ Renders a visually-styled alert box tied to a Pega `variant` value (urgent, warn
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `id` | `string` | Yes | DOM id for the root wrapper element |
-| `variant` | `string` | Yes | Alert variant: `'urgent'`, `'warning'`, `'success'`, `'info'` |
-| `messages` | `Array<string \| { label?: string; description?: string }>` | Yes | One or more messages (string or structured object) |
-| `onDismiss` | `function` (optional) | No | Dismiss/close handler; if provided, show a close button |
+| Prop        | Type                                                        | Required | Description                                                   |
+| ----------- | ----------------------------------------------------------- | -------- | ------------------------------------------------------------- |
+| `id`        | `string`                                                    | Yes      | DOM id for the root wrapper element                           |
+| `variant`   | `string`                                                    | Yes      | Alert variant: `'urgent'`, `'warning'`, `'success'`, `'info'` |
+| `messages`  | `Array<string \| { label?: string; description?: string }>` | Yes      | One or more messages (string or structured object)            |
+| `onDismiss` | `function` (optional)                                       | No       | Dismiss/close handler; if provided, show a close button       |
 
 ## Behavioral Contract
 
@@ -51,44 +51,45 @@ Derived from `AlertBanner.css` and MUI Alert usage:
 
 ### Alert Container
 
-| Property | Value |
-|----------|-------|
-| Variant | Outlined (border visible) |
+| Property     | Value                                                                            |
+| ------------ | -------------------------------------------------------------------------------- |
+| Variant      | Outlined (border visible)                                                        |
 | Border color | Driven by severity (error → red, warning → orange, success → green, info → blue) |
 
 ### Title Row (multiple messages only)
 
-| Property | Value |
-|----------|-------|
-| Font weight | 700 |
-| Font size | 1rem |
-| Layout | `display: flex; align-items: center; gap: 0.25rem` |
+| Property    | Value                                              |
+| ----------- | -------------------------------------------------- |
+| Font weight | 700                                                |
+| Font size   | 1rem                                               |
+| Layout      | `display: flex; align-items: center; gap: 0.25rem` |
 
 ### Count Badge
 
-| Property | Value |
-|----------|-------|
-| Layout | `display: inline-flex; align-items: center; justify-content: center` |
-| Min width | 1rem |
-| Height | 1rem |
-| Padding | `0 0.2rem` |
-| Border radius | 999px (fully rounded / pill) |
-| Font size | 0.6rem |
-| Font weight | 700 |
-| `urgent` background | `var(--app-error-dark-color)` |
-| `warning` background | `var(--app-warning-color-dark)` |
-| `success` background | `var(--stepper-completed-bg-color)` |
-| `info` background | `var(--link-button-color)` |
-| Badge text color | `#fff` (all variants) |
+| Property             | Value                                                                |
+| -------------------- | -------------------------------------------------------------------- |
+| Layout               | `display: inline-flex; align-items: center; justify-content: center` |
+| Min width            | 1rem                                                                 |
+| Height               | 1rem                                                                 |
+| Padding              | `0 0.2rem`                                                           |
+| Border radius        | 999px (fully rounded / pill)                                         |
+| Font size            | 0.6rem                                                               |
+| Font weight          | 700                                                                  |
+| `urgent` background  | `var(--app-error-dark-color)`                                        |
+| `warning` background | `var(--app-warning-color-dark)`                                      |
+| `success` background | `var(--stepper-completed-bg-color)`                                  |
+| `info` background    | `var(--link-button-color)`                                           |
+| Badge text color     | `#fff` (all variants)                                                |
 
 ### Message List
 
-| Property | Value |
-|----------|-------|
-| Margin | 0 |
+| Property     | Value   |
+| ------------ | ------- |
+| Margin       | 0       |
 | Padding left | 1.25rem |
 
 **CSS-only implementation notes:**
+
 - Wrap the entire component in a container `<div>` with `role="alert"`.
 - Use CSS custom properties (`--app-error-dark-color`, etc.) for badge colors.
 - For the outlined alert box: `border: 1px solid currentColor; border-radius: 4px; padding: 0.75rem 1rem`.
@@ -117,15 +118,16 @@ Derived from `AlertBanner.css` and MUI Alert usage:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<div role="alert">` with severity border + inline close button |
-| MUI | `<Alert variant='outlined' severity={severity} onClose={onDismiss}><AlertTitle>` |
-| Ant Design | `<Alert type={type} message={title} description={…} closable banner />` |
-| Chakra UI | `<Alert status={status}><AlertIcon /><AlertTitle /><AlertDescription /><CloseButton />` |
-| Shadcn/ui | Custom `<Alert>` with `variant` prop |
+| Design System      | Recommended Component                                                                   |
+| ------------------ | --------------------------------------------------------------------------------------- |
+| Default (CSS only) | `<div role="alert">` with severity border + inline close button                         |
+| MUI                | `<Alert variant='outlined' severity={severity} onClose={onDismiss}><AlertTitle>`        |
+| Ant Design         | `<Alert type={type} message={title} description={…} closable banner />`                 |
+| Chakra UI          | `<Alert status={status}><AlertIcon /><AlertTitle /><AlertDescription /><CloseButton />` |
+| Shadcn/ui          | Custom `<Alert>` with `variant` prop                                                    |
 
 When implementing in a specific design system, map the following:
+
 - `variant='urgent'` → `severity/type/status='error'` or `'danger'`
 - `variant='warning'` → `severity/type/status='warning'`
 - `variant='success'` → `severity/type/status='success'`