@pega/sdk 0.0.4 → 0.0.6

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

@@ -1,131 +0,0 @@
-# Skill: CaseViewActionsMenu
-
-Case actions dropdown menu. Renders an "Actions" button that opens a menu of local actions and process actions for the current case.
-
-> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
-
----
-
-## Component Purpose
-
-Renders a button that opens a dropdown menu containing all available case actions. Distinguishes between local actions (UI flow) and process actions (server-side), invoking the appropriate API for each. Shows a Snackbar toast on process action error.
-
-## Pega Metadata
-
-- **Registration key:** `CaseViewActionsMenu` (in `component-map.ts`)
-- **Category:** Page template — action menu
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop             | Type       | Required | Description                                    |
-| ---------------- | ---------- | -------- | ---------------------------------------------- |
-| `localActions`   | `array`    | No       | Array of `{ ID, name }` local action objects   |
-| `processActions` | `array`    | No       | Array of `{ ID, name }` process action objects |
-| `caseTypeID`     | `string`   | Yes      | Case type identifier for label localization    |
-| `caseTypeName`   | `string`   | Yes      | Case type display name for label localization  |
-| `getPConnect`    | `function` | Yes      | PConnect getter                                |
-
-## Behavioral Contract
-
-### Button Label
-
-- Localized via `PCore.getLocaleUtils().getLocaleValue('Actions', 'CaseView', 'Actions')`.
-- Rendered as an outlined/secondary button with a dropdown indicator icon.
-
-### Menu Items
-
-The menu combines:
-
-1. **Local actions** — each item triggers `getPConnect().getActionsApi().openLocalAction(action.ID, { caseID: getPConnect().getCaseInfo().getID() })`.
-2. **Process actions** — each item triggers `getPConnect().getActionsApi().openProcessAction(action.ID, { ... })`.
-
-If both groups exist, render a divider between them.
-
-### Localized Action Labels
-
-For localized case type context:
-
-```
-localeKey = `${caseTypeID}!CASE!${caseTypeName.toUpperCase()}`
-```
-
-Action name localization: `PCore.getLocaleUtils().getLocaleValue(action.name, localeKey, action.name)`.
-
-### Process Action Error Handling
-
-1. On process action click, wrap in `try/catch`.
-2. On error: show Snackbar toast with the error message.
-3. Snackbar auto-hides after 3000ms.
-
-### Menu State
-
-- `anchorEl` state controls menu open/close.
-- Open: `setAnchorEl(event.currentTarget)`.
-- Close: `setAnchorEl(null)`.
-
-## Visual Specifications
-
-### Button
-
-| Property | Value                           |
-| -------- | ------------------------------- |
-| Label    | Localized `"Actions"`           |
-| Variant  | Outlined or secondary           |
-| Icon     | Dropdown chevron or expand_more |
-
-### Menu
-
-| Property    | Value                                   |
-| ----------- | --------------------------------------- |
-| Position    | Anchored below the button               |
-| Divider     | Between local and process action groups |
-| Item height | Standard menu item height               |
-
-**CSS-only implementation notes:**
-
-- Button: `padding: 6px 12px; border: 1px solid var(--app-primary-color); border-radius: 4px; cursor: pointer`.
-- Dropdown menu: `position: absolute; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.2); border-radius: 4px; min-width: 160px; z-index: 1000`.
-- Menu item: `padding: 8px 16px; cursor: pointer`. Hover: `background: var(--hover-bg)`.
-- Divider: `border-top: 1px solid var(--divider-color); margin: 4px 0`.
-
-### Snackbar Toast
-
-| Property  | Value                         |
-| --------- | ----------------------------- |
-| Position  | Bottom-center or bottom-right |
-| Auto-hide | 3000ms                        |
-| Severity  | Error (red)                   |
-
-## Edge Cases & Special Logic
-
-- If both `localActions` and `processActions` are empty, the "Actions" button may be hidden or disabled.
-- `caseTypeName.toUpperCase()` — guard against `undefined`/`null` values.
-- Process action errors may include HTML — sanitize before displaying in the Snackbar message.
-- Menu should close on any item click (both local and process).
-
-## Dependencies
-
-- `PCore.getLocaleUtils().getLocaleValue()` — label localization
-- `PConnectComponent` from `@pega/sdk-react`
-- MUI: `<Button>`, `<Menu>`, `<MenuItem>`, `<Divider>`, `<Snackbar>`
-
-## Design System Mapping
-
-**UI control type:** Dropdown action menu with button trigger and toast error notification.
-
-Listed design systems are examples only.
-
-| Design System      | Button                                 | Menu                 | Toast                         |
-| ------------------ | -------------------------------------- | -------------------- | ----------------------------- |
-| Default (CSS only) | `<button>` + custom dropdown           | `<ul>/<li>` with CSS | Custom toast overlay          |
-| MUI                | `<Button>` + `<Menu>/<MenuItem>`       | MUI Menu             | `<Snackbar>/<Alert>`          |
-| Ant Design         | `<Dropdown menu={{ items }}>`          | Ant Dropdown         | `message.error()`             |
-| Chakra UI          | `<Menu>/<MenuButton>/<MenuList>`       | Chakra Menu          | `useToast()`                  |
-| Shadcn/ui          | `<DropdownMenu>/<DropdownMenuTrigger>` | Shadcn DropdownMenu  | `<Toaster>` + `toast.error()` |
-
-When implementing in a specific design system:
-
-- Local vs process action distinction must be preserved — they call different APIs
-- Localized labels via `localeKey = ${caseTypeID}!CASE!${caseTypeName.toUpperCase()}`
-- Process action errors must be surfaced via a dismissible toast

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

@@ -1,109 +0,0 @@
-# Skill: Confirmation
-
-Case confirmation template. Renders the post-submission confirmation view with a Done button, optionally showing ToDo assignments that remain after the case is submitted.
-
-> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
-
----
-
-## Component Purpose
-
-Displayed after a case or assignment is submitted. Shows the confirmation view (with `Details` region) and a Done button. If outstanding ToDo assignments remain after the user clicks Done, they are displayed. When the user truly finishes, publishes `CLOSE_CONFIRM_VIEW` to close the container.
-
-## Pega Metadata
-
-- **Registration key:** `Confirmation` (in `component-map.ts`)
-- **Category:** Page template — confirmation
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop          | Type          | Required | Description                                                                   |
-| ------------- | ------------- | -------- | ----------------------------------------------------------------------------- |
-| `children`    | `ReactNode[]` | Yes      | Region children: `[0]` = ToDo region, `[1]` = Details region (when available) |
-| `getPConnect` | `function`    | Yes      | PConnect getter                                                               |
-
-## Behavioral Contract
-
-### State
-
-- `showConfirmView`: boolean, initially `true`.
-- `toDoAssignments`: array from `getToDoAssignments(getPConnect())` — pending assignments.
-
-### Done Button Click
-
-1. Call `getPConnect().getContainerManager().closeContainerItem(getPConnect().getContainerName())`.
-2. OR call `PCore.getContainerUtils().getActiveContainerItemName(getPConnect().getContainerName())`.
-3. Check remaining `toDoAssignments`.
-4. If assignments remain: `setShowConfirmView(false)` — show ToDo view instead.
-5. If no assignments remain: publish `PCore.getPubSubUtils().publish(CLOSE_CONFIRM_VIEW, {})`.
-
-### Show Details
-
-- `showDetails`: `children.length > 1` — true when a Details region is present.
-
-### Render: Confirm View (`showConfirmView === true`)
-
-1. Confirmation message header (localized `"Your submission is confirmed"` or equivalent).
-2. If `showDetails`: render `children[1]` (Details region) using `createElement(PConnectComponent, ...)`.
-3. Done button (`localized "Done"`) — triggers done click handler above.
-
-### Render: ToDo View (`showConfirmView === false`)
-
-- Render `children[0]` (ToDo region) using `createElement(PConnectComponent, ...)`.
-
-## Visual Specifications
-
-### Confirm View
-
-| Element             | Description                                   |
-| ------------------- | --------------------------------------------- |
-| Confirmation header | Success icon + heading text                   |
-| Details section     | Optional — rendered below confirmation header |
-| Done button         | Primary button, bottom of the form            |
-
-**CSS-only implementation notes:**
-
-- Confirm view: `display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 2rem`.
-- Success icon: large checkmark or success indicator, centered.
-- Confirmation heading: `font-size: 1.5rem; font-weight: 600; text-align: center`.
-- Done button: `align-self: flex-end` or centered.
-
-### ToDo View
-
-- Full-width ToDo region rendered in place of confirmation.
-- No additional wrapping — render the region directly.
-
-## Edge Cases & Special Logic
-
-- `getToDoAssignments(getPConnect())` — returns empty array if no assignments remain; triggers close publish immediately.
-- `children[1]` may not exist — always check `showDetails` before rendering.
-- `CLOSE_CONFIRM_VIEW` is a PubSub constant — ensure it matches the consuming container's subscription key.
-- The confirmation view should not be navigable backward — Done is the only exit.
-
-## Dependencies
-
-- `getToDoAssignments` from `../../helpers/case-utils` (or equivalent)
-- `PCore.getPubSubUtils().publish()` — for CLOSE_CONFIRM_VIEW event
-- `PCore.getContainerUtils()` — for container item management
-- `PConnectComponent` from `@pega/sdk-react`
-
-## Design System Mapping
-
-**UI control type:** Post-submission confirmation page with done action and optional todo view.
-
-Listed design systems are examples only.
-
-| Design System      | Success Indicator              | Done Button                    | Layout                                        |
-| ------------------ | ------------------------------ | ------------------------------ | --------------------------------------------- |
-| Default (CSS only) | CSS checkmark SVG              | `<button class='primary'>`     | Centered flexbox column                       |
-| MUI                | `<CheckCircleIcon>`            | `<Button variant='contained'>` | `<Box display='flex' flexDirection='column'>` |
-| Ant Design         | `<Result status='success'>`    | `<Button type='primary'>`      | Ant Result component                          |
-| Chakra UI          | `<CheckCircleIcon>` + `<Text>` | `<Button colorScheme='blue'>`  | `<VStack>`                                    |
-| Shadcn/ui          | Custom icon + `<h2>`           | `<Button>`                     | Tailwind centered div                         |
-
-When implementing in a specific design system:
-
-- Done button must check remaining `toDoAssignments` before deciding whether to show ToDo view or close
-- `CLOSE_CONFIRM_VIEW` publish must happen only after confirming no assignments remain
-- `showDetails` check must guard `children[1]` access

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

@@ -1,124 +0,0 @@
-# Skill: DataReference
-
-Data reference template. Routes to field, table, or search renderers based on `selectionMode` and `displayAs` props. Handles deferred data source loading, dropdown options, and multi-select variants.
-
-> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
-
----
-
-## Component Purpose
-
-Renders a data reference field that can be displayed as a dropdown, autocomplete, checkbox group, radiobutton group, or a card-selection layout. In read-only mode, delegates to `SingleReferenceReadOnly` (single selection) or `MultiReferenceReadOnly` (multi-selection). Supports deferred/parameterized data sources.
-
-## Pega Metadata
-
-- **Registration key:** `DataReference` (in `component-map.ts`)
-- **Category:** Form template — data selection
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop                 | Type       | Required | Description                                                                                            |
-| -------------------- | ---------- | -------- | ------------------------------------------------------------------------------------------------------ |
-| `label`              | `string`   | Yes      | Field label                                                                                            |
-| `displayAs`          | `string`   | Yes      | UI variant: `'dropdown'`, `'autocomplete'`, `'checkbox'`, `'radiobutton'`, `'listview'`, `'searchbox'` |
-| `selectionMode`      | `string`   | Yes      | `'single'` or `'multi'`                                                                                |
-| `displayMode`        | `string`   | No       | `'DISPLAY_ONLY'` for read-only rendering                                                               |
-| `readOnly`           | `boolean`  | No       | Alternative read-only flag                                                                             |
-| `ruleClass`          | `string`   | Yes      | Data page class reference                                                                              |
-| `dataRelationship`   | `string`   | No       | Relationship type                                                                                      |
-| `isDDSourceDeferred` | `boolean`  | No       | Whether data source is loaded asynchronously                                                           |
-| `parameters`         | `object`   | No       | Parameters passed to the data page for deferred sources                                                |
-| `allowSearch`        | `boolean`  | No       | Show search input inside dropdown/autocomplete                                                         |
-| `searchIcon`         | `boolean`  | No       | Show search icon in the field                                                                          |
-| `numCols`            | `string`   | No       | Column count for checkbox/radiobutton layouts: `'1'`, `'2'`, `'3'`                                     |
-| `listType`           | `string`   | No       | `'associated'` or `'datapage'`                                                                         |
-| `fieldMetadata`      | `object`   | No       | Extra field-level metadata                                                                             |
-| `getPConnect`        | `function` | Yes      | PConnect getter                                                                                        |
-
-## Behavioral Contract
-
-### Read-Only Routing
-
-If `displayMode === 'DISPLAY_ONLY'` or `readOnly === true`:
-
-- `selectionMode === 'single'` → render `<SingleReferenceReadOnly />`.
-- `selectionMode === 'multi'` → render `<MultiReferenceReadOnly />`.
-- Both receive all relevant props plus `getPConnect`.
-
-### Edit Routing (by `displayAs`)
-
-| `displayAs`      | Rendered component                        |
-| ---------------- | ----------------------------------------- |
-| `'dropdown'`     | Registered `Dropdown` field component     |
-| `'autocomplete'` | Registered `AutoComplete` field component |
-| `'checkbox'`     | Registered `CheckboxGroup` with `numCols` |
-| `'radiobutton'`  | Registered `RadioButtons` with `numCols`  |
-| `'listview'`     | Inline `ListView` sub-component           |
-| `'searchbox'`    | Inline `SearchForm` sub-component         |
-| Default          | `Dropdown`                                |
-
-### Deferred Data Source (`isDDSourceDeferred === true`)
-
-1. On mount, call `PCore.getDataApiUtils().getData(dataSourceName, parameters)`.
-2. Store result in `dropDownDataSource` state.
-3. Pass `dropDownDataSource` to the rendered field component as `datasource`.
-
-### Localized Placeholder
-
-- Generate a localized "Please select..." option via `localizedPlaceholderOption` using `PCore.getLocaleUtils().getLocaleValue(...)`.
-- Prepend this option to `dropDownDataSource` for dropdown/autocomplete variants.
-
-### SearchForm Sub-Component
-
-When `displayAs === 'searchbox'`, renders an inline `<SearchForm>` sub-component that:
-
-1. Shows a text input with search icon.
-2. On submit: calls `getPConnect().getListActions().search(searchText)`.
-3. Renders the search results list below the input using `buildView`.
-
-## Visual Specifications
-
-**CSS-only implementation notes:**
-
-- Wrapper: `display: flex; flex-direction: column; gap: 4px`.
-- Label: `font-size: 0.875rem; font-weight: 500; margin-bottom: 4px`.
-- Dropdown/Autocomplete: standard select input, full-width.
-- Checkbox/Radio group: grid layout matching `numCols`.
-- SearchForm: `display: flex; gap: 8px` (input + search button).
-
-## Edge Cases & Special Logic
-
-- `isDDSourceDeferred` — data is not available synchronously; show a loading indicator until `dropDownDataSource` resolves.
-- `parameters` may contain property references — resolve them via `pConn.getValue(paramRef)` before passing to `getData`.
-- `listType === 'associated'` — use `pConn.getFieldMetadata().options` directly instead of fetching from data page.
-- Card variant (`displayAs === 'listview'`) — may include image props (`image`, `imagePlaceholder`) from `getComponentConfig()`.
-- Multi-select with `displayAs === 'checkbox'` — values stored as comma-separated string in the property.
-
-## Dependencies
-
-- `SingleReferenceReadOnly` (registered DSE or template component)
-- `MultiReferenceReadOnly` (registered template component)
-- Field components from registry: `Dropdown`, `AutoComplete`, `CheckboxGroup`, `RadioButtons`
-- `PCore.getDataApiUtils().getData()` — for deferred data source fetch
-- `PCore.getLocaleUtils().getLocaleValue()` — for localized placeholder
-
-## Design System Mapping
-
-**UI control type:** Polymorphic data selection field — dropdown, autocomplete, checkbox, radiobutton, or search variants.
-
-Listed design systems are examples only.
-
-| Design System      | Dropdown              | Autocomplete     | Checkbox Group                 | Radio Group                 |
-| ------------------ | --------------------- | ---------------- | ------------------------------ | --------------------------- |
-| Default (CSS only) | `<select>`            | Custom combobox  | `<input type='checkbox'>` list | `<input type='radio'>` list |
-| MUI                | `<Select>/<MenuItem>` | `<Autocomplete>` | `<FormGroup><Checkbox>`        | `<RadioGroup><Radio>`       |
-| Ant Design         | `<Select>`            | `<AutoComplete>` | `<Checkbox.Group>`             | `<Radio.Group>`             |
-| Chakra UI          | `<Select>`            | Custom           | `<CheckboxGroup>`              | `<RadioGroup>`              |
-| Shadcn/ui          | `<Select>` + combobox | `<Combobox>`     | custom                         | `<RadioGroup>`              |
-
-When implementing in a specific design system:
-
-- Always check `displayMode`/`readOnly` first and route to read-only components before rendering editable variants
-- Deferred loading must be handled — show skeleton/spinner until data is ready
-- `numCols` applies to checkbox and radiobutton layouts only

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

@@ -1,104 +0,0 @@
-# Skill: DefaultForm
-
-Standard form layout template supporting 1, 2, or 3 column arrangements. Renders form fields from the first PConnect region child and optionally displays instruction text above.
-
-> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
-
----
-
-## Component Purpose
-
-Renders a form's fields in a 1, 2, or 3-column grid layout. Children come from a PConnect region (unwrapped one level). Each child field is connected to the Redux store via a `connectToState` HOC so visibility and prop updates flow reactively. Instruction HTML is displayed above the form when present.
-
-## Pega Metadata
-
-- **Registration key:** `DefaultForm` (in `component-map.ts`)
-- **Category:** Form template
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop           | Type       | Required | Description                                              |
-| -------------- | ---------- | -------- | -------------------------------------------------------- |
-| `NumCols`      | `string`   | No       | Number of columns: `'1'`, `'2'`, or `'3'`. Default `'1'` |
-| `instructions` | `string`   | No       | HTML instruction text shown above the form               |
-| `getPConnect`  | `function` | Yes      | PConnect getter                                          |
-
-## Behavioral Contract
-
-1. **Resolve column count:** Use `NumCols || '1'`. Switch to CSS class:
-   - `'1'` → `psdk-default-form-one-column`
-   - `'2'` → `psdk-default-form-two-column`
-   - `'3'` → `psdk-default-form-three-column`
-   - Default → `psdk-default-form-one-column`
-2. **Get instructions:** Call `getInstructions(getPConnect(), props.instructions)` — returns sanitized HTML string or empty.
-3. **Unwrap region children:** `arChildren = getPConnect().getChildren()[0].getPConnect().getChildren()` — the first child is a region; its children are the actual form fields.
-4. **Wrap each child:** Create a `Child` component using `connectToState(mapStateToProps)` HOC wrapping `PConnectComponent`. Map each field:
-   ```
-   arChildren.map((kid) => <Child key={getKeyForMappedField(kid)} {...kid} />)
-   ```
-5. **Render:**
-   - If instructions, render `<div className='psdk-default-form-instruction-text'>` with `dangerouslySetInnerHTML={{ __html: instructions }}`.
-   - Render `<div className={divClass}>{dfChildren}</div>`.
-
-## Visual Specifications
-
-Derived from `DefaultForm.css`:
-
-### Column Layouts
-
-| Class                            | Layout                    |
-| -------------------------------- | ------------------------- |
-| `psdk-default-form-one-column`   | Single column, full width |
-| `psdk-default-form-two-column`   | Two equal columns         |
-| `psdk-default-form-three-column` | Three equal columns       |
-
-**CSS-only implementation notes:**
-
-- One column: `display: grid; grid-template-columns: 1fr; gap: 1rem`.
-- Two column: `display: grid; grid-template-columns: 1fr 1fr; gap: 1rem`.
-- Three column: `display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem`.
-- Instructions container: `padding: 0.5rem 0; margin-bottom: 0.5rem; font-size: 0.875rem`.
-- Responsive: collapse multi-column to single column on mobile.
-
-### Instruction Text
-
-| Property  | Value                                            |
-| --------- | ------------------------------------------------ |
-| CSS class | `psdk-default-form-instruction-text`             |
-| Content   | Raw HTML rendered with `dangerouslySetInnerHTML` |
-
-## Edge Cases & Special Logic
-
-- `NumCols` is a string (not number) — always compare with string literals `'1'`, `'2'`, `'3'`.
-- The region unwrap (`getChildren()[0].getPConnect().getChildren()`) assumes the form metadata has exactly one region child. Guard against `undefined` if the region child is missing.
-- `connectToState(mapStateToProps)` HOC subscribes each field to the Redux store — if Redux is not available, fall back to rendering `PConnectComponent` directly without the HOC.
-- `getKeyForMappedField(kid)` generates a stable key for each field from the field's metadata path — import from `./utils`.
-- Instructions HTML is server-sanitized (comment in source code) — do not sanitize again on the client.
-
-## Dependencies
-
-- `getInstructions` from `../../helpers/template-utils` — extracts instruction text from PConnect metadata
-- `connectToState` from `../../helpers/state-utils` — HOC for Redux store subscription
-- `PConnectComponent` from `@pega/sdk-react` — renders each child field
-- `getKeyForMappedField`, `mapStateToProps` from `./utils` — key generation and state mapping
-
-## Design System Mapping
-
-**UI control type:** Multi-column form field grid with optional instruction text header.
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                          |
-| ------------------ | -------------------------------------------------------------- |
-| Default (CSS only) | CSS Grid with column count driven by `NumCols`                 |
-| MUI                | CSS Grid via `sx` prop or makeStyles                           |
-| Ant Design         | `<Form layout='vertical'>` with `<Row>/<Col>` for multi-column |
-| Chakra UI          | `<SimpleGrid columns={N} spacing={4}>`                         |
-| Shadcn/ui          | Tailwind `grid grid-cols-1/2/3 gap-4`                          |
-
-When implementing in a specific design system:
-
-- `NumCols` is always a string (`'1'`/`'2'`/`'3'`) — parse before use
-- Instructions HTML is rendered above the form, before any fields
-- Each child field must be subscribed to the store for reactive visibility/prop updates

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

@@ -1,90 +0,0 @@
-# Skill: Details
-
-Read-only single-column details template. Renders all child fields in DISPLAY_ONLY mode inside a labeled FieldGroup, with optional highlighted data strip above.
-
-> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
-
----
-
-## Component Purpose
-
-Renders a labeled group of read-only fields in a single-column vertical stack. Forces all children into `DISPLAY_ONLY` + `readOnly` mode via inherited props. Optionally renders a "highlighted data" banner row at the top (full-width, stacked-large-val display).
-
-## Pega Metadata
-
-- **Registration key:** `Details` (in `component-map.ts`)
-- **Category:** Display template
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop                  | Type       | Required | Description                                         |
-| --------------------- | ---------- | -------- | --------------------------------------------------- |
-| `label`               | `string`   | Yes      | Section heading for the FieldGroup wrapper          |
-| `showLabel`           | `boolean`  | Yes      | Whether to show the section label                   |
-| `showHighlightedData` | `boolean`  | Yes      | Whether to render highlighted fields above children |
-| `getPConnect`         | `function` | Yes      | PConnect getter                                     |
-
-## Behavioral Contract
-
-1. **Inherited props merge:** `propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() }` — inherited props can override label/showLabel.
-2. **Force display mode:** Call `getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY')` and `getPConnect().setInheritedProp('readOnly', true)` — ensures all child fields render in read-only display mode.
-3. **Render children:** Map `getPConnect().getChildren()` → `createElement(PConnectComponent, { ...configObject, key: index.toString() })`.
-4. **Highlighted data (when `showHighlightedData` is true):**
-   a. Read `getPConnect().getRawMetadata().config.highlightedData` (defaults to `[]`).
-   b. For each highlighted field, set `field.config.displayMode = 'STACKED_LARGE_VAL'`.
-   c. For fields with `field.config.value === '@P .pyStatusWork'`: set `field.type = 'TextInput'` and `field.config.displayAsStatus = true`.
-   d. Create each field via `getPConnect().createComponent(field, '', 0, {})`.
-5. **Layout:**
-   - Wrap all content in `<FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>`.
-   - Highlighted data: `<Grid container spacing={1} style={{ padding: '0 0 1em' }}>` with each child at `Grid size={{ xs: 12 }}`.
-   - Regular children: `<Grid container spacing={1}>` with each child at `Grid size={{ xs: 12 }}`.
-
-## Visual Specifications
-
-### Overall Layout
-
-| Property                 | Value                                                    |
-| ------------------------ | -------------------------------------------------------- |
-| Column structure         | Single column (xs: 12 for each child)                    |
-| Inner spacing            | Grid spacing 1 (≈ 8px between fields)                    |
-| Highlighted data padding | `padding: 0 0 1em` (space below before regular children) |
-
-**CSS-only implementation notes:**
-
-- Outer wrapper: `FieldGroup` component (see `FieldGroupDSE.md` for styles).
-- Children grid: `display: grid; grid-template-columns: 1fr; gap: 8px`.
-- Highlighted data row: `display: grid; grid-template-columns: 1fr; gap: 8px; padding-bottom: 1rem`.
-- Fields inside highlighted data use `STACKED_LARGE_VAL` display (larger value typography).
-
-## Edge Cases & Special Logic
-
-- `setInheritedProp` is called with side effects before rendering — this modifies the PConnect context and affects all children.
-- The `highlightedData` array defaults to `[]` if not present in metadata.
-- The `pyStatusWork` special case: sets both `type` and `displayAsStatus` to ensure the status field renders as a badge/chip rather than plain text.
-- `showHighlightedData` must be explicitly `true` — even if `highlightedData` has items, they won't render if the flag is false.
-
-## Dependencies
-
-- `createElement` from React
-- `PConnectComponent`, `getComponentFromRegistry('FieldGroup')` from `@pega/sdk-react`
-
-## Design System Mapping
-
-**UI control type:** Read-only labeled section with vertically stacked fields.
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                                    |
-| ------------------ | ------------------------------------------------------------------------ |
-| Default (CSS only) | `<fieldset>/<legend>` wrapper with CSS grid single column                |
-| MUI                | `<Grid container spacing={1}>` with `<Grid size={{ xs: 12 }}>` per field |
-| Ant Design         | `<Card title={label}>` with `<Row><Col span={24}>` per field             |
-| Chakra UI          | `<Box>` with heading + `<Stack spacing={2}>`                             |
-| Shadcn/ui          | `<Card><CardHeader><CardContent>` with stacked field items               |
-
-When implementing in a specific design system:
-
-- All children must have `displayMode='DISPLAY_ONLY'` and `readOnly=true` inherited
-- Highlighted data uses `STACKED_LARGE_VAL` — larger/bolder value display
-- `showLabel=false` hides the section heading entirely

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

@@ -1,97 +0,0 @@
-# Skill: DetailsSubTabs
-
-Read-only tabbed details template. Renders sub-tabs with deferred-loaded tab content, using shared tab utilities.
-
-> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
-
----
-
-## Component Purpose
-
-Renders a tabbed layout for a details region. Each tab contains display-only content loaded on demand. Uses the same `tabUtils` as `SubTabs` but is scoped to a details/display context. Optionally shows a section heading above the tabs.
-
-## Pega Metadata
-
-- **Registration key:** `DetailsSubTabs` (in `component-map.ts`)
-- **Category:** Navigation / Display template
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop          | Type          | Required | Description                                                       |
-| ------------- | ------------- | -------- | ----------------------------------------------------------------- |
-| `children`    | `ReactNode[]` | Yes      | Tab content — `children[0]` is the deferred-loaded tabs container |
-| `label`       | `string`      | Yes      | Section heading shown above tabs when `showLabel` is true         |
-| `showLabel`   | `boolean`     | No       | Whether to show the section heading. Default `true`               |
-| `getPConnect` | `function`    | Yes      | PConnect getter                                                   |
-
-## Behavioral Contract
-
-1. **Inherited props merge:** `propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() }`.
-2. **Extract deferred tabs:** `deferLoadedTabs = Children.toArray(children)[0]`.
-3. **Compute visible tabs:** On mount and when `availableTabs` changes, call `getVisibleTabs(deferLoadedTabs, 'detailsSubTabs')` to get the filtered visible tab list.
-4. **State:** `currentTabId` (string, default `'0'`), `tabItems` (array of `{ id, name, content }` objects).
-5. **Transient tabs:** On `currentTabId` change, call `getTransientTabs(availableTabs, currentTabId, tabItems)` and update `tabItems` state.
-6. **Tab click handler:** `handleTabClick(id, index)` → calls `setCurrentTabId(index)` and `tabClick(index, availableTabs, currentTabId, setCurrentTabId, tabItems)` from `tabUtils`.
-7. **Render:**
-   - If `propsToUse.showLabel`, render `<h3>{propsToUse.label}</h3>`.
-   - Render `<TabContext value={currentTabId}>`.
-   - Render `<Tabs onChange={handleTabClick} value={currentTabId}>` with one `<Tab key={tab.id} label={tab.name} value={tab.id} />` per `tabItems` entry.
-   - Render one `<TabPanel key={tab.id} value={tab.id} tabIndex={+tab.id}>` per `tabItems` entry containing `tab.content || 'No content exists'`.
-
-## Visual Specifications
-
-### Heading
-
-| Property        | Value                           |
-| --------------- | ------------------------------- |
-| Tag             | `<h3>`                          |
-| Shown only when | `propsToUse.showLabel === true` |
-
-### Tab Bar
-
-| Property           | Value                                                              |
-| ------------------ | ------------------------------------------------------------------ |
-| Scrollable         | Not specified (default non-scrollable in reference implementation) |
-| Tab text transform | Inherits design system default                                     |
-
-**CSS-only implementation notes:**
-
-- Heading: `font-size: 1.25rem; font-weight: 600; margin-bottom: 8px`.
-- Tab bar: `display: flex; border-bottom: 2px solid var(--divider); gap: 0`.
-- Each tab: `padding: 8px 16px; cursor: pointer; border-bottom: 2px solid transparent`.
-- Active tab: `border-bottom-color: var(--app-primary-color)`.
-- Tab panel: `padding: 16px 0`.
-
-## Edge Cases & Special Logic
-
-- `availableTabs` is computed inside `useEffect` (not via useState) — this means the initial render uses an empty array, and tabs populate after mount.
-- The `useEffect` on `[availableTabs]` has a stale closure issue in the reference implementation — use a `useRef` or `useMemo` for production implementations if needed.
-- `tabItems` starts as `[]` — the tab bar renders empty until the first `currentTabId` change triggers `getTransientTabs`.
-- `propsToUse` label/showLabel may be overridden by inherited props — always use `propsToUse` for the label, not raw `label`/`showLabel` props.
-
-## Dependencies
-
-- `getTransientTabs`, `getVisibleTabs`, `tabClick` from `../../SubTabs/tabUtils`
-- `TabContext`, `TabPanel` from `@mui/lab`
-- `Tab`, `Tabs` from `@mui/material`
-
-## Design System Mapping
-
-**UI control type:** Tabbed section container for read-only details content.
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                    |
-| ------------------ | -------------------------------------------------------- |
-| Default (CSS only) | Custom tab bar with CSS underline indicator              |
-| MUI                | `<TabContext>` + `<Tabs>` + `<TabPanel>` from `@mui/lab` |
-| Ant Design         | `<Tabs>` with `items` array                              |
-| Chakra UI          | `<Tabs>` + `<TabList>` + `<TabPanels>`                   |
-| Shadcn/ui          | `<Tabs>` + `<TabsList>` + `<TabsContent>`                |
-
-When implementing in a specific design system:
-
-- `getVisibleTabs` and `getTransientTabs` are tabUtils helpers — use them regardless of UI library
-- Tab content is lazily loaded via the transient tab pattern
-- Optional `<h3>` heading above the tab bar (controlled by `showLabel`)