@pega/sdk 0.0.4 → 0.0.5

package/templates/react-sdk-reference/.claude/skills/template-skills/CaseSummary.md

@@ -1,106 +0,0 @@
-# Skill: CaseSummary
-
-Case summary template. Renders a summary panel with primary and secondary case fields, derived from either props or child region extraction.
-
-> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
-
----
-
-## Component Purpose
-
-Displays a case's key summary data in a structured summary panel. Primary fields are shown prominently; secondary fields are shown with labels. Data is sourced either directly from props or by extracting child regions. All field values are localized before display.
-
-## Pega Metadata
-
-- **Registration key:** `CaseSummary` (in `component-map.ts`)
-- **Category:** Page template — summary
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop                | Type          | Required | Description                                             |
-| ------------------- | ------------- | -------- | ------------------------------------------------------- |
-| `children`          | `ReactNode[]` | No       | Region children when fields come from PConnect metadata |
-| `arPrimaryFields`   | `array`       | No       | Array of primary field objects (direct prop)            |
-| `arSecondaryFields` | `array`       | No       | Array of secondary field objects (direct prop)          |
-| `getPConnect`       | `function`    | Yes      | PConnect getter                                         |
-
-## Behavioral Contract
-
-### Field Sourcing
-
-Two modes — prefer direct props if provided:
-
-**Mode A — Direct props:**
-
-- `arPrimaryFields` and `arSecondaryFields` are passed directly.
-- Call `prepareCaseSummaryData(primaryFields, secondaryFields, getPConnect)` to localize values.
-
-**Mode B — Child extraction:**
-
-- Extract primary and secondary regions from `children` by type/name matching.
-- Primary region: first region child (or `type === 'Region' && name === 'Primary'`).
-- Secondary region: second region child (or `type === 'Region' && name === 'Secondary'`).
-- Build field arrays from the extracted region children metadata.
-- Then call `prepareCaseSummaryData(...)` as in Mode A.
-
-### `prepareCaseSummaryData(primaryFields, secondaryFields, getPConnect)`
-
-Helper that:
-
-1. Iterates each field in both arrays.
-2. Localizes the field value via `PCore.getLocaleUtils().getLocaleValue(value, classID, value)`.
-3. Returns `{ arPrimaryFields: localizedPrimary, arSecondaryFields: localizedSecondary }`.
-
-### Render
-
-Delegates entirely to `<CaseSummaryFields>` DSE component, passing:
-
-- `arPrimaryFields` — array of `{ name, value }` objects for primary display
-- `arSecondaryFields` — array of `{ name, value, displayLabel }` objects for secondary display
-
-## Visual Specifications
-
-- `<CaseSummaryFields>` handles all rendering — see the DSE component skill for details.
-- Primary fields: large text, no label.
-- Secondary fields: label + value pairs.
-
-**CSS-only implementation notes (for `CaseSummaryFields` wrapper):**
-
-- Container: `display: flex; flex-direction: column; gap: 8px`.
-- Primary field value: `font-size: 1rem; font-weight: 600`.
-- Secondary field row: `display: flex; gap: 4px; font-size: 0.875rem`.
-- Secondary label: `color: var(--secondary-text-color)`.
-
-## Edge Cases & Special Logic
-
-- If both `arPrimaryFields` prop and children are present, the direct prop takes priority.
-- `prepareCaseSummaryData` — guard against undefined/null field values before passing to `getLocaleValue`.
-- `displayLabel` on secondary fields controls whether the field label is shown alongside the value.
-- If `arSecondaryFields` is empty, the secondary section is not rendered.
-
-## Dependencies
-
-- `prepareCaseSummaryData` from `./utils` (local helper)
-- `CaseSummaryFields` — DSE component registered in the component registry
-- `PCore.getLocaleUtils().getLocaleValue()` — value localization
-
-## Design System Mapping
-
-**UI control type:** Read-only case summary panel with primary and secondary field groups.
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Approach                               |
-| ------------------ | -------------------------------------------------- |
-| Default (CSS only) | Flexbox column with CSS-styled field rows          |
-| MUI                | `<Typography>` variants for primary/secondary text |
-| Ant Design         | `<Descriptions>` with `bordered={false}`           |
-| Chakra UI          | `<VStack>` with `<Text>` variants                  |
-| Shadcn/ui          | Custom `<dl>/<dt>/<dd>` or card                    |
-
-When implementing in a specific design system:
-
-- Always localize field values before display — use `PCore.getLocaleUtils().getLocaleValue()`
-- `CaseSummaryFields` is a DSE component — implement it separately and call it from here
-- Primary fields have no labels; secondary fields have labels

package/templates/react-sdk-reference/.claude/skills/template-skills/CaseView.md

@@ -1,137 +0,0 @@
-# Skill: CaseView
-
-Case view template. Renders the full case workspace: summary sidebar, stages, to-do region, main content tabs, and utilities column. Also covers `ObjectPage` (which is a re-export of `CaseView`).
-
-> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
-
----
-
-## Component Purpose
-
-The primary case workspace template. Extracts named regions from PConnect children by metadata type and name, arranges them in a 3-column responsive grid (3/6/3), handles deferred tab loading, and supports a `displayOnlyFA` mode that shows only the to-do region. Edit actions are triggered via the utilities column.
-
-> **Note:** `ObjectPage` is a direct re-export of `CaseView` — `export { default } from '../CaseView'`. Do not create a separate `ObjectPage` component; register both keys pointing to the same implementation.
-
-## Pega Metadata
-
-- **Registration key:** `CaseView` and `ObjectPage` (both point to the same component)
-- **Category:** Page template — case workspace
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop            | Type          | Required | Description                                                    |
-| --------------- | ------------- | -------- | -------------------------------------------------------------- |
-| `children`      | `ReactNode[]` | Yes      | Named region children (summary, stages, todo, utilities, tabs) |
-| `displayOnlyFA` | `boolean`     | No       | If true, renders only the to-do region (focused action mode)   |
-| `getPConnect`   | `function`    | Yes      | PConnect getter                                                |
-
-## Behavioral Contract
-
-### Region Extraction
-
-Use `getRawMetadata()` to access `children` with `type` and `name` metadata. Extract by:
-
-- **Summary region:** `type === 'Region' && name === 'Summary'`
-- **Stages region:** `type === 'Region' && name === 'Stages'`
-- **ToDo region:** `type === 'Region' && name === 'ToDo'`
-- **Utilities region:** `type === 'Region' && name === 'Utilities'`
-- **Tabs region:** `type === 'Region' && name === 'Tabs'`
-
-Render each region as a React child element using `createElement(PConnectComponent, { ...regionConfig })`.
-
-### Tabs Region — Deferred Load
-
-- From the Tabs region children, build `vertTabInfo` (vertical tab definitions) and `deferLoadInfo` (deferred loading metadata).
-- Pass both to `<DeferLoad>` component which handles lazy rendering of tab content.
-- The tabs list comes from `theTabsRegionChildren` (the children of the Tabs region).
-
-### displayOnlyFA Mode
-
-If `displayOnlyFA === true`:
-
-- Render only the ToDo region, centered.
-- Skip summary, stages, tabs, utilities rendering.
-
-### Attachments Subscription
-
-- Subscribe to `PCore.getPubSubUtils().subscribe(CASE_ATTACHMENTS_UPDATED, handleAttachmentUpdate, 'CaseView')`.
-- Track `hasNewAttachments` boolean state — passed to utilities region.
-- Unsubscribe on unmount.
-
-### Edit Action
-
-- The utilities region may include an edit action button.
-- On click: call `getPConnect().getActionsApi().openLocalAction(editActionId, { ... })`.
-
-## Visual Specifications
-
-### 3-Column Grid Layout
-
-```
-[Col xs:3]  [Col xs:6]  [Col xs:3]
- Summary     Main tabs   Utilities
- Stages      (Deferred)
- ToDo
-```
-
-| Column | xs  | Contents                       |
-| ------ | --- | ------------------------------ |
-| Left   | 3   | Summary, Stages, ToDo regions  |
-| Center | 6   | Tabs region (deferred content) |
-| Right  | 3   | Utilities region               |
-
-**CSS-only implementation notes:**
-
-- Outer grid: `display: grid; grid-template-columns: 25% 50% 25%; gap: 1rem`.
-- Left column: `display: flex; flex-direction: column; gap: 0.5rem`.
-- Center column: `overflow: hidden`.
-- Responsive: on mobile, stack to single column.
-
-## Edge Cases & Special Logic
-
-- `displayOnlyFA === true` — completely different render tree (only ToDo), no grid layout.
-- Missing regions — guard each region before rendering; a region may not exist for all case types.
-- `DeferLoad` handles progressive loading — do not eagerly render all tab content.
-- `hasNewAttachments` is passed down to the utilities region — it affects attachment icon badge display.
-
-## Dependencies
-
-- `DeferLoad` component from `@pega/sdk-react` — deferred tab content loading
-- `PCore.getPubSubUtils()` — pub/sub for attachment updates
-- `PConnectComponent` from `@pega/sdk-react`
-- `CASE_ATTACHMENTS_UPDATED` constant from `@pega/sdk-core` (or local constants)
-
-## Sub-Variants
-
-### ObjectPage
-
-`ObjectPage` is registered as:
-
-```tsx
-// packages/sdk-react/src/components/template/ObjectPage/index.tsx
-export { default } from '../CaseView';
-```
-
-- No separate implementation needed.
-- In `component-map.ts`, register `ObjectPage` key pointing to the same component as `CaseView`.
-
-## Design System Mapping
-
-**UI control type:** Full case workspace layout — 3-column grid with sidebar, main content, and utilities.
-
-Listed design systems are examples only.
-
-| Design System      | Grid                                                  | Sidebar   | Deferred Tabs                   |
-| ------------------ | ----------------------------------------------------- | --------- | ------------------------------- |
-| Default (CSS only) | CSS Grid 25/50/25                                     | `<aside>` | Intersection Observer lazy load |
-| MUI                | `<Grid container>` with `<Grid size={{ xs: 3/6/3 }}>` | `<Box>`   | MUI `<Tabs>` + DeferLoad        |
-| Ant Design         | `<Row><Col span={6/12/6}>`                            | `<Sider>` | `<Tabs>` lazy                   |
-| Chakra UI          | `<Grid templateColumns='1fr 2fr 1fr'>`                | `<Box>`   | Custom lazy tabs                |
-| Shadcn/ui          | Tailwind `grid grid-cols-[1fr_2fr_1fr]`               | `<aside>` | Custom                          |
-
-When implementing in a specific design system:
-
-- `displayOnlyFA` must completely bypass the grid — render only ToDo region
-- Region extraction by metadata name is required — do not assume positional ordering
-- Deferred loading is mandatory for performance — tab content must not all load at once

package/templates/react-sdk-reference/.claude/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/.claude/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/.claude/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`)

package/templates/react-sdk-reference/.claude/skills/template-skills/DetailsTwoColumn.md

@@ -1,80 +0,0 @@
-# Skill: DetailsTwoColumn
-
-Read-only two-column details template. Renders child fields in DISPLAY_ONLY mode in a 2-column grid inside a FieldGroup, with optional highlighted data.
-
-> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
-
----
-
-## Component Purpose
-
-Identical to `Details` in all behavior except children are distributed into a **two-column grid** (`xs: 6` per child) instead of single-column. Used in details regions where the design calls for side-by-side field pairs.
-
-> The implementation is nearly identical to `Details`. See `Details.md` for full pattern descriptions. Only the column width differs.
-
-## Pega Metadata
-
-- **Registration key:** `DetailsTwoColumn` (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`  | No       | Whether to show the section label. Default `true`                    |
-| `showHighlightedData` | `boolean`  | No       | Whether to render highlighted fields above children. Default `false` |
-| `getPConnect`         | `function` | Yes      | PConnect getter                                                      |
-
-## Behavioral Contract
-
-All steps identical to `Details`, except:
-
-- **Regular children grid:** Each child renders at `Grid size={{ xs: 6 }}` (two per row, side by side).
-- **Highlighted data grid:** Each highlighted field also renders at `Grid size={{ xs: 6 }}`.
-- All other behaviors (inherited props merge, `setInheritedProp('displayMode', 'DISPLAY_ONLY')`, `setInheritedProp('readOnly', true)`, FieldGroup wrapper, pyStatusWork handling) are identical to `Details`.
-
-## Visual Specifications
-
-### Column Structure
-
-|                         | Details             | DetailsTwoColumn       |
-| ----------------------- | ------------------- | ---------------------- |
-| Column width per child  | xs: 12 (full width) | **xs: 6 (half width)** |
-| Columns per row         | 1                   | **2**                  |
-| Highlighted data column | xs: 12              | **xs: 6**              |
-
-**CSS-only implementation notes:**
-
-- Children grid: `display: grid; grid-template-columns: 1fr 1fr; gap: 8px`.
-- Highlighted data row: `display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 1rem`.
-- Wrap in FieldGroup (see `FieldGroup.md` DSE skill).
-
-## Edge Cases & Special Logic
-
-All edge cases identical to `Details`. See `Details.md`.
-
-## Dependencies
-
-- `createElement` from React
-- `PConnectComponent`, `getComponentFromRegistry('FieldGroup')` from `@pega/sdk-react`
-
-## Design System Mapping
-
-**UI control type:** Read-only labeled section with fields in a two-column grid.
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                                     |
-| ------------------ | ------------------------------------------------------------------------- |
-| Default (CSS only) | `<fieldset>/<legend>` with CSS `grid-template-columns: 1fr 1fr; gap: 8px` |
-| MUI                | `<Grid container spacing={1}>` with `<Grid size={{ xs: 6 }}>` per field   |
-| Ant Design         | `<Descriptions column={2}>` or `<Row><Col span={12}>` per field           |
-| Chakra UI          | `<SimpleGrid columns={2} spacing={2}>`                                    |
-| Shadcn/ui          | Tailwind `grid grid-cols-2 gap-2`                                         |
-
-When implementing in a specific design system:
-
-- 2-column layout — each field takes half the available width
-- All other behaviors inherited from `Details` (DISPLAY_ONLY, readOnly, FieldGroup, highlighted data)