@pega/sdk 0.0.4 → 0.0.5

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

@@ -1,140 +0,0 @@
-# Skill: Component Contracts Reference
-
-Quick-reference lookup of all registered component names and their prop contracts. Use this when you need to know what props a specific component receives from the Pega platform.
-
----
-
-## Field Components
-
-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?`                         |
-
----
-
-## Template Components
-
-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                        |
-
----
-
-## Widget Components
-
-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?`                        |
-
----
-
-## 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/`    | —                                       |
-
----
-
-## 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` |
-| `CaseSummary` (infra) | `@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`          |
-| `LeftAlignVerticalTabs` | `infra/VerticalTabs/LeftAlignVerticalTabs.tsx` |

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

@@ -1,137 +0,0 @@
-# Skill: AlertBanner
-
-Alert/notification banner that displays one or more messages with a severity variant and an optional dismiss button.
-
-> **Prerequisite skill:** [`design-system-extension.md`](../design-system-extension.md) — covers architecture, props interface, styling patterns, and registration patterns common to ALL DSE components.
-
----
-
-## Component Purpose
-
-Renders a visually-styled alert box tied to a Pega `variant` value (urgent, warning, success, info). When multiple messages are present, it shows a count badge in the title and lists items in a `<ul>`. A single message is rendered inline. The component optionally shows a close/dismiss button.
-
-## Pega Metadata
-
-- **Pega Name:** `AlertBanner`
-- **Registration key:** `AlertBanner` (in `component-map.ts`)
-- **Does NOT use `getPConnect`** — receives all data as direct props
-
-## 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       |
-
-## Behavioral Contract
-
-1. **Variant mapping:** Map the Pega `variant` string to a UI severity level and display label:
-   - `'urgent'` → severity `error`, label `'Error'`
-   - `'warning'` → severity `warning`, label `'Warning'`
-   - `'success'` → severity `success`, label `'Success'`
-   - `'info'` → severity `info`, label `'Info'`
-   - Unknown/missing variant → fall back to `info`
-2. **Single message:** Render `renderMessage(messages[0])` inline (no title, no list).
-3. **Multiple messages (`messages.length > 1`):**
-   - Render a title containing the display label (e.g., "Error") plus a circular count badge showing `messages.length`.
-   - Render messages as a `<ul>` with one `<li>` per message.
-4. **`renderMessage(message)` logic:**
-   - If `message` is an object with a truthy `label`, render `<strong>{label}</strong> {description}`.
-   - If `message` is an object without a label, render `description` only.
-   - If `message` is a string with no colon (`:`), render it as plain text.
-   - If `message` is a string containing a colon, bold everything up to and including the colon, then render the rest as plain text.
-5. **Dismiss button:** Only render the close button if `onDismiss` is provided.
-6. **Root wrapper:** Wrap the alert in a `<div id={id}>`.
-
-## Visual Specifications
-
-Derived from `AlertBanner.css` and MUI Alert usage:
-
-### Alert Container
-
-| 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` |
-
-### 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)                                                |
-
-### Message List
-
-| 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`.
-- Severity colors (for border and icon): error `#d32f2f`, warning `#ed6c02`, success `#2e7d32`, info `#0288d1`.
-- Badge: `display: inline-flex; align-items: center; justify-content: center; min-width: 1rem; height: 1rem; padding: 0 0.2rem; border-radius: 999px; font-size: 0.6rem; font-weight: 700; color: #fff`.
-- Left accent icon: use an SVG or Unicode symbol matching the severity (⚠, ✓, ℹ, ✕).
-- Close button (if `onDismiss`): absolutely positioned top-right, `background: none; border: none; cursor: pointer; font-size: 1.25rem`.
-- Message list: `margin: 0; padding-left: 1.25rem; list-style: disc`.
-
-## Edge Cases & Special Logic
-
-- If `variant` is not one of the four known values, default to `info` severity.
-- If `messages` is an empty array, render nothing (or render the alert shell with no content).
-- If `message.label` is falsy but `message.description` is set, render description without `<strong>`.
-- If a string message has no colon, render it entirely as plain text (no bold).
-- The colon-split only applies to the **first** colon in the string.
-
-## Dependencies
-
-- No Pega SDK imports required (no `getPConnect`)
-- No helper utilities required
-
-## Design System Mapping
-
-**UI control type:** Alert / Notification banner with severity levels.
-
-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                                                    |
-
-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'`
-- `variant='info'` → `severity/type/status='info'`
-- `onDismiss` → `onClose` / `closable` / close button prop
-- Multiple messages → render as a list inside the alert description area
-- Badge count → render as a tag/badge chip next to the title

package/templates/react-sdk-reference/.claude/skills/design-system-extension-skills/FieldGroup.md

@@ -1,134 +0,0 @@
-# Skill: FieldGroup
-
-Collapsible or static container that groups related fields under an optional section header and instructions text.
-
-> **Prerequisite skill:** [`design-system-extension.md`](../design-system-extension.md) — covers architecture, props interface, styling patterns, and registration patterns common to ALL DSE components.
-
----
-
-## Component Purpose
-
-Renders a labeled section that wraps one or more field components. Supports optional:
-
-- **Section name** — rendered as a bold header above the fields.
-- **Collapsible behavior** — the name header becomes a toggle that shows/hides the fields.
-- **Instructions text** — rendered as HTML below the header and above the fields.
-
-Children are rendered inside a full-width inner container.
-
-## Pega Metadata
-
-- **Pega Name:** `FieldGroup`
-- **Registration key:** `FieldGroup` (in `component-map.ts`)
-- **Does NOT use `getPConnect`** — receives children via `PropsWithChildren`
-
-## Props
-
-| Prop           | Type        | Required | Description                                                             |
-| -------------- | ----------- | -------- | ----------------------------------------------------------------------- |
-| `children`     | `ReactNode` | No       | Field components to render inside the group                             |
-| `name`         | `string`    | No       | Section heading displayed above the fields                              |
-| `collapsible`  | `boolean`   | No       | If `true`, the header acts as a collapse/expand toggle. Default `false` |
-| `instructions` | `string`    | No       | HTML string of instruction text shown between header and fields         |
-
-## Behavioral Contract
-
-1. **State:** Maintain a `collapsed` boolean in local state, initialized to `false` (expanded).
-2. **Name rendering:**
-   - If `name` is not provided, render no header.
-   - If `name` is provided and `collapsible` is `false`, render `<b>{name}</b>`.
-   - If `name` is provided and `collapsible` is `true`, wrap in a clickable `<span>` with:
-     - `id='field-group-header'`
-     - A directional arrow icon: **right arrow** when `collapsed === true`, **down arrow** when `collapsed === false`.
-     - The bold name text beside the arrow.
-     - Clicking the span toggles `collapsed`.
-3. **Instructions:** If `instructions` is provided AND is not the string `'none'`, render it with `dangerouslySetInnerHTML={{ __html: instructions }}`.
-4. **Children:** Render children inside a full-width div. If `collapsed` is `true`, do NOT render children (or instructions).
-5. **Header cursor:** When `collapsible` is `true`, the header span uses `cursor: pointer`. When `collapsible` is `false`, cursor is `auto`.
-6. **Layout:** All content is wrapped in a `Grid container` with `spacing={4}` and `justifyContent='space-between'`. The name row and children are inside a single inner `Grid` at full width.
-
-## Visual Specifications
-
-Derived from `FieldGroup.tsx` makeStyles:
-
-### Outer Container
-
-| Property | Value                           |
-| -------- | ------------------------------- |
-| Spacing  | 4 units (≈ 32px in MUI default) |
-
-### Component Root Margins
-
-| Property      | Value                      |
-| ------------- | -------------------------- |
-| Margin right  | `theme.spacing(1)` (≈ 8px) |
-| Margin left   | `theme.spacing(1)`         |
-| Margin top    | `theme.spacing(1)`         |
-| Margin bottom | `theme.spacing(1)`         |
-
-### Field Margin (name row)
-
-| Property       | Value              |
-| -------------- | ------------------ |
-| Padding top    | `theme.spacing(1)` |
-| Padding bottom | `theme.spacing(1)` |
-| Margin top     | `theme.spacing(1)` |
-
-### Header Row (collapsible)
-
-| Property    | Value                                               |
-| ----------- | --------------------------------------------------- |
-| Display     | flex                                                |
-| Align items | center                                              |
-| Gap         | 5px                                                 |
-| Cursor      | `pointer` (collapsible) or `auto` (non-collapsible) |
-
-### Instructions
-
-| Property | Value   |
-| -------- | ------- |
-| Padding  | `5px 0` |
-
-**CSS-only implementation notes:**
-
-- Outer wrapper: `margin: 8px`.
-- Name row: `padding: 8px 0; margin-top: 8px`.
-- Collapsible header: `display: flex; align-items: center; gap: 5px; cursor: pointer; user-select: none`.
-- Non-collapsible name: plain `<b>` with no wrapper.
-- Instructions: `padding: 5px 0`.
-- Arrow icons: use Unicode or inline SVG — collapsed → `▶` / `›`, expanded → `▼` / `⌄`.
-- Children wrapper: `width: 100%`.
-- When collapsed, use `display: none` or conditional rendering to hide children.
-
-## Edge Cases & Special Logic
-
-- If `collapsible` is `false` (default), the `collapsed` state is never changed — clicking the name does nothing.
-- `instructions` equal to the string `'none'` must NOT be rendered (skip entirely).
-- `instructions` is rendered as raw HTML — ensure the content is trusted (server-side).
-- If `name` is absent, render no header row, but still render instructions (if any) and children.
-
-## Dependencies
-
-- No Pega SDK imports required (no `getPConnect`)
-- Arrow icons: `KeyboardArrowRightIcon` / `KeyboardArrowDownIcon` from `@mui/icons-material` (MUI only) — use equivalent icons or Unicode characters in non-MUI implementations
-
-## Design System Mapping
-
-**UI control type:** Collapsible section container with label, instructions, and children.
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                                   |
-| ------------------ | ----------------------------------------------------------------------- |
-| Default (CSS only) | `<div>` with toggled `display: none` on children, `<b>` header          |
-| MUI                | Grid container with `KeyboardArrowRight/Down` icons for collapse toggle |
-| Ant Design         | `<Collapse>` or `<Card>` with collapsible panels                        |
-| Chakra UI          | `<Accordion>` or manual `<Box>` with toggle state                       |
-| Shadcn/ui          | `<Collapsible>` + `<CollapsibleTrigger>` + `<CollapsibleContent>`       |
-
-When implementing in a specific design system, map the following:
-
-- `collapsed` toggle → design system's collapse/expand state or controlled component
-- Arrow direction → visual indicator of expand/collapse state (chevron or arrow icon)
-- `instructions` HTML → design system's `dangerouslySetInnerHTML` or rich content slot
-- Full-width children → ensure children container spans the full group width

package/templates/react-sdk-reference/.claude/skills/design-system-extension-skills/FieldValueList.md

@@ -1,118 +0,0 @@
-# Skill: FieldValueList
-
-Single field-value pair display component. Renders a label and value in either an inline (side-by-side) or stacked layout. Also used as a display mode renderer by field components (e.g., `TextInput`, `Dropdown`, etc.).
-
-> **Prerequisite skill:** [`design-system-extension.md`](../design-system-extension.md) — covers architecture, props interface, styling patterns, and registration patterns common to ALL DSE components.
-
----
-
-## Component Purpose
-
-Renders a single name/value pair in a compact read-only layout. Supports two layout variants:
-
-- **Inline:** Label and value are side by side (label 4/12 cols, value 8/12 cols).
-- **Stacked:** Label is on top, value is larger below (both 12/12 cols).
-
-When no name is provided, only the value is rendered at full width. Used directly as a display widget and delegated to by field components for their `DISPLAY_ONLY` and `STACKED_LARGE_VAL` display modes.
-
-## Pega Metadata
-
-- **Pega Name:** `FieldValueList`
-- **Registration key:** `FieldValueList` (in `component-map.ts`)
-- **Does NOT use `getPConnect`** — receives all data as direct props
-
-## Props
-
-| Prop      | Type      | Required | Description                                           |
-| --------- | --------- | -------- | ----------------------------------------------------- |
-| `name`    | `string`  | No       | Field label. If omitted, only the value is rendered   |
-| `value`   | `any`     | Yes      | Field value to display                                |
-| `variant` | `string`  | No       | Layout: `'inline'` (default) or `'stacked'`           |
-| `isHtml`  | `boolean` | No       | If `true`, render value as raw HTML (default `false`) |
-
-## Behavioral Contract
-
-1. **Empty value fallback:** If `value` is `undefined` or an empty string (`''`), display `'---'` instead.
-2. **No-name case:** If `name` is not provided, render only the value at full width (12 columns) regardless of `variant`.
-3. **Inline variant** (default — `variant !== 'stacked'`):
-   - Label column: 4 of 12 columns.
-   - Value column: 8 of 12 columns (or 12 if no name).
-   - Label: secondary text color, `body2` typography, `fontWeight: 400`.
-   - Value: primary text color, `body2` typography.
-4. **Stacked variant** (`variant === 'stacked'`):
-   - Label column: 12 of 12, `paddingBottom: 0` (label sits tight above value).
-   - Value column: 12 of 12, `paddingTop: 0` (value sits tight below label).
-   - Label: secondary text color, `body2` typography, `fontWeight: 400`.
-   - Value: primary text color, **`h6` typography** (larger / more prominent than inline).
-5. **HTML rendering:** If `isHtml` is `true`, wrap value in a `<div dangerouslySetInnerHTML={{ __html: formattedValue }}>`. The formatted value (with `'---'` fallback) is passed to `__html`.
-6. **Layout wrapper:** Render everything inside a container row with space-between justification and consistent spacing.
-
-## Visual Specifications
-
-Derived from `FieldValueList.tsx` makeStyles:
-
-### Label
-
-| Property    | Value                                                 |
-| ----------- | ----------------------------------------------------- |
-| Font weight | 400                                                   |
-| Color       | `theme.palette.text.secondary` (muted/secondary text) |
-| Typography  | `body2` (≈ 0.875rem / 14px)                           |
-
-### Value
-
-| Property             | Value                                       |
-| -------------------- | ------------------------------------------- |
-| Color                | `theme.palette.text.primary` (default text) |
-| Typography (inline)  | `body2` (≈ 0.875rem / 14px)                 |
-| Typography (stacked) | `h6` (≈ 1.25rem / 20px, weight 500)         |
-
-### Padding Adjustments (stacked only)
-
-| Property             | Value          |
-| -------------------- | -------------- |
-| Label bottom padding | `0 !important` |
-| Value top padding    | `0 !important` |
-
-**CSS-only implementation notes:**
-
-- Root row: `display: flex; justify-content: space-between; align-items: baseline; gap: 1rem`.
-- **Inline label:** `flex: 0 0 33%; font-weight: 400; font-size: 0.875rem; color: var(--text-secondary)`.
-- **Inline value:** `flex: 1; font-size: 0.875rem; color: var(--text-primary)`.
-- **Stacked:** `display: flex; flex-direction: column; gap: 0`.
-- **Stacked label:** `font-weight: 400; font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0`.
-- **Stacked value:** `font-size: 1.25rem; font-weight: 500; color: var(--text-primary); margin-top: 0`.
-
-## Edge Cases & Special Logic
-
-- `value` can be any type (string, number, boolean, React element). Render it as-is unless it's empty/undefined.
-- When `isHtml` is `true`, set the raw HTML from the formatted value — do NOT sanitize (the caller is responsible). Ensure value is a string before passing to `dangerouslySetInnerHTML`.
-- When `variant` is `'stacked'` and `name` is absent, render value at 12 cols with `h6` typography.
-- When `variant` is `'inline'` and `name` is absent, render value at 12 cols with `body2` typography.
-
-## Dependencies
-
-- No Pega SDK imports required (no `getPConnect`)
-- No helper utilities required
-
-## Design System Mapping
-
-**UI control type:** Read-only field label/value display pair.
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                                                |
-| ------------------ | ------------------------------------------------------------------------------------ |
-| Default (CSS only) | `<div class='field-value-inline'>` or `<div class='field-value-stacked'>` with CSS   |
-| MUI                | `<Grid container>` with `<Typography>` for label and value                           |
-| Ant Design         | `<Descriptions>` item, or `<Typography.Text type='secondary'>` + `<Typography.Text>` |
-| Chakra UI          | `<Stack direction='row'>` (inline) or `<Stack spacing={0}>` (stacked)                |
-| Shadcn/ui          | Custom label/value pair with Tailwind flex utilities                                 |
-
-When implementing in a specific design system, map the following:
-
-- Label → secondary/muted text style
-- Value inline → same size as label
-- Value stacked → larger typography (h6 equivalent)
-- Empty value → always display `'---'` (never show blank)
-- `isHtml={true}` → design system's `dangerouslySetInnerHTML` or `innerHTML` equivalent

package/templates/react-sdk-reference/.claude/skills/design-system-extension-skills/Pulse.md

@@ -1,85 +0,0 @@
-# Skill: Pulse
-
-Placeholder activity feed / comments stream card. Currently a stub implementation that renders a card titled "Pulse".
-
-> **Prerequisite skill:** [`design-system-extension.md`](../design-system-extension.md) — covers architecture, props interface, styling patterns, and registration patterns common to ALL DSE components.
-
----
-
-## Component Purpose
-
-Renders a card container intended to display an activity feed or comments stream for a Pega case. The current reference implementation is a **stub** — it renders only a Card with the title "Pulse" and placeholder body text. A production implementation would render a real activity feed stream inside the card using the `children` slot.
-
-## Pega Metadata
-
-- **Pega Name:** `Pulse`
-- **Registration key:** `Pulse` (in `component-map.ts`)
-- **Does NOT use `getPConnect`** — receives children via `PropsWithChildren`
-
-## Props
-
-| Prop       | Type        | Required | Description                                                               |
-| ---------- | ----------- | -------- | ------------------------------------------------------------------------- |
-| `children` | `ReactNode` | No       | Child components (activity stream content) — currently unused in the stub |
-
-> **Note:** The current reference implementation ignores `children` and renders placeholder content. A full implementation would render `children` inside the card body.
-
-## Behavioral Contract
-
-1. Render a `Card` (or equivalent container) with a distinct left border accent.
-2. Render a card header with the title text `"Pulse"` using a heading style (e.g., `h6`).
-3. Render card content body with placeholder text `"Pulse"`.
-4. The left border accent uses the **primary light** color from the design system's theme.
-5. The card has top and bottom margin (1 spacing unit each).
-
-> **Stub note:** Steps 2–3 are placeholder content. In a real implementation, the card header would show a section label and the card body would render the `children` activity stream.
-
-## Visual Specifications
-
-Derived from `Pulse.tsx` makeStyles:
-
-### Card Container
-
-| Property          | Value                                                                    |
-| ----------------- | ------------------------------------------------------------------------ |
-| Margin top        | `theme.spacing(1)` (≈ 8px in MUI default)                                |
-| Margin bottom     | `theme.spacing(1)` (≈ 8px)                                               |
-| Border left       | `6px solid`                                                              |
-| Border left color | `theme.palette.primary.light` (light variant of the primary brand color) |
-
-**CSS-only implementation notes:**
-
-- Card wrapper: `margin-top: 8px; margin-bottom: 8px; border-left: 6px solid var(--app-primary-light-color); border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.12)`.
-- Card header: `padding: 16px; font-size: 1.25rem; font-weight: 500`.
-- Card body: `padding: 0 16px 16px`.
-- Use a CSS variable `--app-primary-light-color` for the accent border color.
-
-## Edge Cases & Special Logic
-
-- The `children` prop is received but not currently rendered — it is intentional in the stub.
-- The component renders unconditionally (no conditional logic based on props).
-
-## Dependencies
-
-- No Pega SDK imports required (no `getPConnect`)
-- No helper utilities required
-
-## Design System Mapping
-
-**UI control type:** Card with left accent border and header/body sections.
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                                                   |
-| ------------------ | --------------------------------------------------------------------------------------- |
-| Default (CSS only) | `<div>` with `border-left: 6px solid` + inner header/body divs                          |
-| MUI                | `<Card><CardHeader title={<Typography variant='h6'>Pulse</Typography>} /><CardContent>` |
-| Ant Design         | `<Card title='Pulse'>` with left border via `style` prop                                |
-| Chakra UI          | `<Card>` with `borderLeft='6px solid' borderColor='blue.300'`                           |
-| Shadcn/ui          | `<Card><CardHeader><CardTitle>`                                                         |
-
-When implementing in a specific design system, map the following:
-
-- Left border accent → `borderLeft` / `border-left` on the card root
-- Left border color → primary light color from the design system's palette
-- Card header title typography → design system's heading variant (h6 or equivalent)