@pega/sdk 0.0.4 → 0.0.5

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

@@ -1,232 +0,0 @@
-# Skill: RichTextEditor
-
-WYSIWYG rich text editor field backed by TinyMCE. Supports editable and read-only modes, optional label, helper text, error/required states, and a file picker for image uploads.
-
-> **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 rich text editing area (WYSIWYG) for Pega case properties that store HTML content. In **edit mode**, uses TinyMCE with a bottom toolbar. In **read-only mode**, renders the HTML content as a read-only `<div>`. Wraps the editor in a `FormControl` with an optional floating label and helper text, consistent with other field components.
-
-The editor is a `forwardRef` component — the ref is connected to the underlying TinyMCE editor instance.
-
-> **Note:** TinyMCE is the reference editor library. In non-MUI or non-TinyMCE implementations, this component can be replaced with an alternative rich text library (Quill, ProseMirror, Slate.js, etc.). The behavioral contract below remains the same regardless of library.
-
-## Pega Metadata
-
-- **Pega Name:** `RichTextEditor`
-- **Registration key:** `RichTextEditor` (in `component-map.ts`)
-- **Does NOT extend PConnProps** — receives all data as explicit field-like props
-
-## Props
-
-| Prop           | Type                      | Required | Description                                                       |
-| -------------- | ------------------------- | -------- | ----------------------------------------------------------------- |
-| `id`           | `string`                  | No       | DOM id for the editor element. Defaults to a generated UID        |
-| `defaultValue` | `string`                  | Yes      | Initial HTML content of the editor                                |
-| `label`        | `string`                  | Yes      | Field label displayed above the editor                            |
-| `labelHidden`  | `boolean`                 | Yes      | If `true`, hide the label                                         |
-| `info`         | `string`                  | No       | Helper text displayed below the editor                            |
-| `testId`       | `string`                  | No       | Value for `data-test-id` attribute on the FormControl wrapper     |
-| `placeholder`  | `string`                  | No       | Placeholder text shown in empty editor                            |
-| `disabled`     | `boolean`                 | Yes      | If `true`, editor is in read-only/disabled mode with no toolbar   |
-| `required`     | `boolean`                 | Yes      | If `true`, marks the field as required                            |
-| `readOnly`     | `boolean`                 | Yes      | If `true`, render as static HTML display (not interactive editor) |
-| `error`        | `boolean`                 | Yes      | If `true`, applies error styling to the FormControl               |
-| `onBlur`       | `React.EventHandler<any>` | Yes      | Called when the editor loses focus                                |
-| `onChange`     | `React.EventHandler<any>` | Yes      | Called when the editor content changes                            |
-
-## Behavioral Contract
-
-### 1. Ref Forwarding
-
-The component uses `forwardRef`. Internally, use `useConsolidatedRef(ref)` from `@pega/sdk-react` to create `editorRef` — the TinyMCE editor instance is stored here after initialization.
-
-### 2. UID for id
-
-If `id` is not provided, generate one using `useUID()` from `@pega/sdk-react`.
-
-### 3. Read-Only Mode
-
-If `readOnly` is `true`, render:
-
-```
-<div
-  key={id}
-  id={id}
-  className='readonly-richtext-editor'
-  dangerouslySetInnerHTML={{ __html: defaultValue || '--' }}
-/>
-```
-
-Skip the TinyMCE Editor entirely in this case.
-
-### 4. Edit Mode (TinyMCE)
-
-When `readOnly` is `false`, render `<Editor>` from `@tinymce/tinymce-react` with:
-
-| Config             | Value                                     |
-| ------------------ | ----------------------------------------- |
-| `tinymceScriptSrc` | `'tinymce/tinymce.min.js'` (local script) |
-| `id`               | The resolved `id`                         |
-| `initialValue`     | `defaultValue`                            |
-| `disabled`         | `disabled` prop                           |
-| `onBlur`           | `onBlur` prop                             |
-| `onEditorChange`   | `onChange` prop                           |
-| `onInit`           | Store editor in `editorRef.current`       |
-
-### 5. TinyMCE `init` Configuration
-
-| Option                     | Value                                                                                                                |
-| -------------------------- | -------------------------------------------------------------------------------------------------------------------- |
-| `skin`                     | `'oxide-dark'` (dark mode) / `'oxide'` (light mode) — detect from theme                                              |
-| `menubar`                  | `false`                                                                                                              |
-| `statusbar`                | `false`                                                                                                              |
-| `branding`                 | `false`                                                                                                              |
-| `min_height`               | `130`                                                                                                                |
-| `toolbar_location`         | `'bottom'`                                                                                                           |
-| `plugins`                  | `['lists', 'advlist', 'autolink', 'image', 'link', 'autoresize']`                                                    |
-| `autoresize_bottom_margin` | `0`                                                                                                                  |
-| `toolbar`                  | `'blocks \| bold italic strikethrough \| bullist numlist outdent indent \| link image'` (or `false` when `disabled`) |
-| `paste_data_images`        | `true`                                                                                                               |
-| `file_picker_types`        | `'image'`                                                                                                            |
-| `file_picker_callback`     | See file picker section below                                                                                        |
-| `content_style`            | Theme-aware CSS string (see below)                                                                                   |
-| `placeholder`              | `placeholder` prop                                                                                                   |
-
-### 6. Theme-Aware Content Style
-
-Inject a `content_style` string that uses theme values for the editor body:
-
-```css
-body {
-  font-family: <theme.typography.fontFamily>;
-  font-size: <theme.typography.fontSize>px;
-  color: <theme.palette.text.primary>;
-  background: <theme.palette.background.paper>;
-}
-a {
-  color: <theme.palette.primary.main>;
-}
-h1-h6 {
-  color: <theme.palette.text.primary>;
-  font-family: <theme.typography.fontFamily>;
-}
-blockquote {
-  color: <theme.palette.text.secondary>;
-  border-left: 4px solid <theme.palette.primary.light>;
-  padding-left: 8px;
-}
-ul,
-ol {
-  color: <theme.palette.text.primary>;
-}
-input,
-textarea,
-select {
-  background: <theme.palette.background.paper>;
-  color: <theme.palette.text.primary>;
-  border: 1px solid <theme.palette.divider>;
-  border-radius: 4px;
-  padding: 6px 10px;
-  font-size: 1em;
-  font-family: inherit;
-}
-.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
-  color: <theme.palette.text.secondary>;
-  opacity: 0.7;
-}
-```
-
-### 7. File Picker Callback
-
-When a user clicks the image upload in the toolbar:
-
-1. Create a hidden `<input type='file' accept='image/*'>`.
-2. On file selected: read as DataURL using `FileReader`.
-3. On `FileReader.load`: create a blob in TinyMCE's blob cache (`editorRef.current.editorUpload.blobCache`), then call `cb(blobInfo.blobUri(), { title: file.name })`.
-4. Programmatically click the input to open the file dialog.
-
-### 8. readOnly/disabled Transition (after initial mount)
-
-Use `useAfterInitialEffect([readOnly, disabled])` from `@pega/sdk-react`:
-
-```
-editorRef?.current.mode.set(readOnly || disabled ? 'readonly' : 'design')
-```
-
-This switches the TinyMCE mode without re-mounting the editor.
-
-### 9. Wrapper Structure
-
-```
-<FormControl variant='standard' data-test-id={testId} error={error} required={required}>
-  {!labelHidden && <InputLabel className='fieldLabel'>{label}</InputLabel>}
-  {richTextComponent}   ← either readOnly div or <Editor>
-  {info && <FormHelperText>{info}</FormHelperText>}
-</FormControl>
-```
-
-## Visual Specifications
-
-Derived from `RichTextEditor.tsx` makeStyles:
-
-### Label
-
-| Property      | Value                                                      |
-| ------------- | ---------------------------------------------------------- |
-| Position      | relative                                                   |
-| Transform     | `translate(0, 0px) scale(1)` (non-floating — stays at top) |
-| Margin bottom | 5px                                                        |
-| Color         | `theme.palette.text.secondary`                             |
-
-**CSS-only implementation notes:**
-
-- Label: `display: block; font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 5px`.
-- Editor container: `min-height: 130px; border: 1px solid var(--divider); border-radius: 4px`.
-- Toolbar (if CSS-only): render buttons at bottom of the editor area.
-- Read-only display: `div.readonly-richtext-editor { padding: 8px; min-height: 130px; background: var(--bg-paper); color: var(--text-primary) }`.
-- Error state: `border-color: var(--error-color)`.
-- Helper text: `font-size: 0.75rem; color: var(--text-secondary); margin-top: 4px`.
-- Error helper text: `color: var(--error-color)`.
-
-## Edge Cases & Special Logic
-
-- `defaultValue` in read-only mode falls back to `'--'` if empty.
-- `readOnly` and `disabled` are both handled — `readOnly` suppresses the editor entirely; `disabled` keeps the editor mounted but in TinyMCE's `readonly` mode with no toolbar.
-- Mode transitions (readOnly/disabled changing after mount) use `useAfterInitialEffect` — this hook fires on updates but NOT on the initial render, preventing a double-set on mount.
-- The file picker creates a transient `<input type='file'>` element that is never appended to the DOM — it is clicked programmatically.
-- `id` must be stable across renders — use `useUID()` only as a fallback when `id` prop is absent.
-
-## Dependencies
-
-- `Editor` from `@tinymce/tinymce-react` — TinyMCE React wrapper (can be swapped for Quill, ProseMirror, Slate.js, etc.)
-- `useAfterInitialEffect`, `useConsolidatedRef`, `useUID` from `@pega/sdk-react` — SDK hooks
-- `useTheme` from `@mui/material` — for theme-aware content styles
-- `FormControl`, `FormHelperText`, `InputLabel` from `@mui/material` — wrapper structure
-
-## Design System Mapping
-
-**UI control type:** Rich text / WYSIWYG editor field with label, helper text, and error state.
-
-Listed design systems are examples only.
-
-| Design System      | Rich Text Library                                             |
-| ------------------ | ------------------------------------------------------------- |
-| Default (CSS only) | `contenteditable` div with custom toolbar, or `<textarea>`    |
-| MUI                | TinyMCE (`@tinymce/tinymce-react`) wrapped in `<FormControl>` |
-| Ant Design         | Quill (`react-quill`) or TinyMCE inside an `<AntForm.Item>`   |
-| Chakra UI          | Quill or Slate.js inside a `<FormControl>`                    |
-| Shadcn/ui          | Tiptap (`@tiptap/react`) inside a field wrapper               |
-
-When implementing in a specific design system, map the following:
-
-- `defaultValue` → initial HTML content
-- `readOnly={true}` → always render as static HTML `<div>` (no editor instance)
-- `disabled={true}` → editor mounted but read-only (toolbar hidden)
-- `onBlur` / `onChange` → editor's blur and content-change callbacks
-- `error` + `info` → FormControl error state + helper/description text below
-- `labelHidden` → conditionally render the label element
-- File picker → `<input type='file' accept='image/*'>` triggered programmatically

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

@@ -1,137 +0,0 @@
-# Skill: WssQuickCreate
-
-Quick-launch action grid that displays a heading and a set of labeled buttons, each optionally with an icon, for creating WSS cases.
-
-> **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 titled section of clickable action cards arranged in a responsive CSS grid. Each card contains an optional icon image and a label. Used in workspace/portal contexts to provide quick access to case creation actions.
-
-## Pega Metadata
-
-- **Pega Name:** `WssQuickCreate`
-- **Registration key:** `WssQuickCreate` (in `component-map.ts`)
-- **Does NOT use `getPConnect`** — receives all data as direct props
-
-## Props
-
-| Prop      | Type                                                           | Required | Description                                                                  |
-| --------- | -------------------------------------------------------------- | -------- | ---------------------------------------------------------------------------- |
-| `heading` | `string`                                                       | Yes      | Section title rendered as an `<h1>`                                          |
-| `actions` | `Array<{ label: string; onClick: () => void; icon?: string }>` | No       | List of action items; each has a label, click handler, and optional icon URL |
-
-## Behavioral Contract
-
-1. Render the `heading` in an `<h1>` element with `id='quick-links-heading'` and class `quick-links-heading`.
-2. Render a `<ul>` with `id='quick-links'` and class `quick-link-ul-list`.
-3. If `actions` is provided, iterate and render one `<li>` per action.
-4. Each `<li>` has the `quickLinkList` style class (styled card with border, rounded corners, and background color).
-5. Inside each `<li>`, render a `<button>` with class `quick-link-button` and the action's `onClick` handler.
-6. Button content is a `<span class='quick-link-button-span'>` (column flex layout) containing:
-   - If `action.icon` is provided: `<img class='quick-link-icon' src={action.icon} />`
-   - `<span>{action.label}</span>`
-7. If `actions` is not provided or is empty, render only the heading with an empty list.
-
-## Visual Specifications
-
-Derived from `WssQuickCreate.css` and component makeStyles:
-
-### Section Heading
-
-| Property   | Value  |
-| ---------- | ------ |
-| Tag        | `<h1>` |
-| Margin top | 8px    |
-
-### Action List
-
-| Property              | Value                                                                 |
-| --------------------- | --------------------------------------------------------------------- |
-| List style            | none                                                                  |
-| Padding               | 0                                                                     |
-| Display               | grid                                                                  |
-| Grid template columns | `repeat(auto-fit, minmax(min(20ch, 100%), 1fr))` (responsive columns) |
-| Gap                   | 1rem                                                                  |
-
-### Action Card (`<li>`)
-
-| Property                | Value                                |
-| ----------------------- | ------------------------------------ |
-| Background (light mode) | `var(--link-button-color)`           |
-| Background (dark mode)  | `var(--app-background-color)`        |
-| Text color              | `var(--app-text-color)`              |
-| Border radius           | 16px                                 |
-| Border                  | `1px solid var(--app-primary-color)` |
-
-### Action Button
-
-| Property       | Value                       |
-| -------------- | --------------------------- |
-| Text transform | capitalize                  |
-| Font size      | 16px                        |
-| Color          | `var(--app-text-color)`     |
-| Height         | 10rem                       |
-| Width          | 100%                        |
-| Background     | transparent (inherits card) |
-
-### Button Inner Span
-
-| Property       | Value  |
-| -------------- | ------ |
-| Display        | flex   |
-| Flex direction | column |
-| Align items    | center |
-| Gap            | 0.5rem |
-
-### Icon
-
-| Property    | Value   |
-| ----------- | ------- |
-| Flex shrink | 0       |
-| Object fit  | contain |
-| Width       | 3rem    |
-| Height      | 3rem    |
-
-**CSS-only implementation notes:**
-
-- Action list: `list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr)); gap: 1rem`.
-- Action card: `background: var(--link-button-color); border-radius: 16px; border: 1px solid var(--app-primary-color); color: var(--app-text-color)`.
-- Button: `width: 100%; height: 10rem; background: transparent; border: none; cursor: pointer; text-transform: capitalize; font-size: 16px; color: inherit`.
-- Button content: `display: flex; flex-direction: column; align-items: center; gap: 0.5rem`.
-- Icon: `width: 3rem; height: 3rem; object-fit: contain; flex-shrink: 0`.
-
-## Edge Cases & Special Logic
-
-- If `actions` is `undefined` or empty, render the heading and empty `<ul>` without errors.
-- If `action.icon` is `undefined` or an empty string, render only the label span (no `<img>` element).
-- Labels are displayed as-is (no truncation); the grid layout handles responsive sizing naturally.
-
-## Dependencies
-
-- No Pega SDK imports required (no `getPConnect`)
-- No helper utilities required
-- Icon images are passed as URLs (strings) via `action.icon` — no internal icon system used
-
-## Design System Mapping
-
-**UI control type:** Responsive grid of action cards / quick-launch buttons.
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                                   |
-| ------------------ | ----------------------------------------------------------------------- |
-| Default (CSS only) | CSS grid `<ul>` + `<button>` cards with flex icon/label layout          |
-| MUI                | `<Button>` inside Grid items; use `makeStyles` or `sx` for card styling |
-| Ant Design         | `<List>` with `<Card>` items or `<Button>` blocks inside a CSS grid     |
-| Chakra UI          | `<SimpleGrid>` with `<Button>` children; `flexDir='column'`             |
-| Shadcn/ui          | Grid of custom `<Button variant='outline'>` cards                       |
-
-When implementing in a specific design system, map the following:
-
-- Card border/background → design system's card or outlined button variant
-- Button `onClick` → standard click handler prop
-- Icon + label stacked layout → `flexDirection: 'column'` button content
-- Responsive grid → design system's grid or `SimpleGrid` equivalent

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

@@ -1,291 +0,0 @@
-# Skill: Design System Extension (DSE) Components
-
-Create or replace Design System Extension components in the react-sdk-reference application. DSE components are display-focused presentational components that render structured data without direct PConnect binding. Some receive `getPConnect`, others receive only display props.
-
----
-
-## Architecture Overview
-
-```
-src/components/designSystemExtension/<ComponentName>/
-├── <ComponentName>.tsx      # Component implementation
-├── index.tsx                # Re-export (if present)
-├── <ComponentName>.css      # Styles (optional)
-└── config-ext.json          # Metadata (optional)
-```
-
----
-
-## Props Interface
-
-DSE components have varying prop patterns:
-
-### Pattern A: With PConnect (data-aware display)
-
-```typescript
-import type { PConnProps } from '../../../types/PConnProps';
-
-interface FieldValueListProps extends PConnProps {
-  name?: string;
-  value?: string;
-  variant?: 'stacked' | 'inline';
-}
-```
-
-### Pattern B: Without PConnect (pure presentation)
-
-```typescript
-interface AlertBannerProps {
-  variant: 'urgent' | 'warning' | 'info' | 'success';
-  heading?: string;
-  messages: Array<string | { label?: string; description?: string }>;
-  onClose?: () => void;
-}
-```
-
-### Pattern C: Extended field props (display-only fields)
-
-```typescript
-import type { PConnFieldProps } from '../../../types/PConnProps';
-
-interface RichTextEditorProps extends PConnFieldProps {
-  content?: string;
-}
-```
-
----
-
-## Implementation Patterns
-
-### Pure Display Component (no PConnect)
-
-Used for: AlertBanner, Banner, Operator
-
-This pattern is design-system agnostic. The variant-mapping logic and message normalisation are always the same. The `// [DS RENDER]` section must be replaced with your design system's alert/notification primitive — see "Design System Adaptation" below.
-
-```typescript
-// Import your design system alert/notification component:
-// e.g. import { Alert } from 'antd';
-// e.g. import { Alert } from '@chakra-ui/react';
-
-interface AlertBannerProps {
-  variant: 'urgent' | 'warning' | 'info' | 'success';
-  heading?: string;
-  messages: Array<string | { label?: string; description?: string }>;
-  onClose?: () => void;
-}
-
-export default function AlertBanner(props: AlertBannerProps) {
-  const { variant, heading, messages = [], onClose } = props;
-
-  // Map Pega variant names to your DS equivalent
-  // e.g. MUI: urgent → 'error' | Ant Design: urgent → 'error' | Chakra: urgent → 'error'
-  const variantMap: Record<string, string> = {
-    urgent: 'error',
-    warning: 'warning',
-    info: 'info',
-    success: 'success'
-  };
-
-  // Normalise messages — Pega may send a plain string or an object
-  function renderMessage(msg: string | { label?: string; description?: string }) {
-    if (typeof msg === 'string') return msg;
-    return `${msg.label ?? ''} ${msg.description ?? ''}`.trim();
-  }
-
-  // [DS RENDER] — replace with your design system's alert/notification primitive
-  // The variantMap value above should be passed as the DS severity/type/status prop
-  return (
-    <YourDesignSystemAlert
-      type={variantMap[variant] ?? 'info'}
-      message={heading}
-      description={messages.map(renderMessage).join(' ')}
-      closable={!!onClose}
-      onClose={onClose}
-    />
-  );
-}
-```
-
-### Field Value Display Component
-
-Used for: FieldValueList, CaseSummaryFields, DetailsFields
-
-```typescript
-import type { PConnProps } from '../../../types/PConnProps';
-
-interface FieldValueListProps extends PConnProps {
-  name?: string;
-  value?: string;
-  variant?: 'stacked' | 'inline';
-}
-
-export default function FieldValueList(props: FieldValueListProps) {
-  const { name, value, variant = 'inline' } = props;
-
-  if (variant === 'stacked') {
-    return (
-      <div className='field-value-stacked'>
-        <span className='field-label'>{name}</span>
-        <span className='field-value-large'>{value}</span>
-      </div>
-    );
-  }
-
-  return (
-    <div className='field-value-inline'>
-      {name && <span className='field-label'>{name}: </span>}
-      <span className='field-value'>{value}</span>
-    </div>
-  );
-}
-```
-
-### Complex Display Component (with PConnect for data)
-
-Used for: FieldGroup, FieldGroupList, Pulse
-
-```typescript
-import { createElement } from 'react';
-import createPConnectComponent from '../../helpers/react_pconnect';
-import type { PConnProps } from '../../../types/PConnProps';
-
-interface FieldGroupProps extends PConnProps {
-  label?: string;
-  showLabel?: boolean;
-}
-
-export default function FieldGroup(props: FieldGroupProps) {
-  const { getPConnect, label, showLabel = true } = props;
-  const pConn = getPConnect();
-  const children = pConn.getChildren();
-
-  return (
-    <fieldset>
-      {showLabel && label && <legend>{label}</legend>}
-      {children.map((child, i) =>
-        createElement(createPConnectComponent(), { ...child, key: `fg-${i}` })
-      )}
-    </fieldset>
-  );
-}
-```
-
----
-
-## Styling Patterns
-
-DSE components use one of three approaches depending on the component and design system:
-
-### CSS File Pattern (DS-agnostic, preferred for Field Value components)
-
-```css
-/* FieldValueList.css */
-.field-value-inline {
-  display: flex;
-  gap: 0.5rem;
-  align-items: baseline;
-}
-
-.field-label {
-  font-weight: 600;
-  color: var(--text-secondary);
-}
-
-.field-value-large {
-  font-size: 1.25rem;
-  font-weight: 500;
-}
-```
-
-### Design System Style Props (use if your DS provides them)
-
-If the chosen design system provides built-in spacing, typography, or layout props, prefer them over plain CSS:
-
-- Use the DS's layout wrapper (e.g., `<Stack>`, `<Flex>`, `<HStack>`) instead of manual flex CSS
-- Use DS typography components (e.g., `<Text>`, `<Heading>`) instead of raw `<span>`/`<div>`
-- Use DS CSS custom properties or tokens for spacing — never hardcode `px` values
-- Discover which style props are available from the installed `.d.ts` files before using them
-
----
-
-## Design System Adaptation
-
-DSE components fall into three patterns with different DS dependencies:
-
-| Pattern                                   | Examples                                         | DS needed?                                         |
-| ----------------------------------------- | ------------------------------------------------ | -------------------------------------------------- |
-| **B — Pure display** (no PConnect)        | AlertBanner, Banner, Operator, WssQuickCreate    | Yes — DS provides alert/card/avatar primitives     |
-| **A — PConnect display**                  | CaseSummaryFields, DetailsFields, FieldValueList | Minimal — CSS-based layout; DS typography optional |
-| **C — Complex display** (PConnect bridge) | FieldGroup, FieldGroupList, Pulse                | No — PConnect bridge is DS-agnostic; semantic HTML |
-
-The component-specific skill file specifies which pattern applies.
-
-**1. Check the component-specific skill file** — `.claude/skills/design-system-extension-skills/<ComponentName>.md` contains a **Design System Mapping** table where available.
-
-**2. If the chosen design system is not listed** — use the component purpose and pattern category above to pick the closest DS primitive.
-
-**3. Discover the API from installed packages** — confirm component names and props from `.d.ts` before writing JSX:
-
-```bash
-find node_modules/<ds-package> -name "*.d.ts" | xargs grep -l "Alert\|Badge\|Avatar" | head -5
-grep -A 30 "interface.*Props" <path-to-file>
-```
-
-**4. Variant mapping** — always map Pega's variant names to your DS equivalent before passing to DS components:
-
-| Pega variant | Meaning          | Typical DS equivalent         |
-| ------------ | ---------------- | ----------------------------- |
-| `urgent`     | Critical / error | `error`, `danger`, `critical` |
-| `warning`    | Warning          | `warning`                     |
-| `info`       | Informational    | `info`                        |
-| `success`    | Success          | `success`                     |
-
----
-
-## Registration
-
-Register DSE components in `src/components/component-map.ts`:
-
-```typescript
-import AlertBanner from './designSystemExtension/AlertBanner';
-import FieldValueList from './designSystemExtension/FieldValueList';
-
-// In getSampleComponentMap():
-{
-  ...sdkComponents,
-  AlertBanner,
-  FieldValueList,
-}
-```
-
----
-
-## Existing DSE Components
-
-| Component         | PConnect? | Description                             |
-| ----------------- | --------- | --------------------------------------- |
-| AlertBanner       | No        | Alert/notification banner with variants |
-| Banner            | No        | Promotional/informational banner        |
-| CaseSummaryFields | Yes       | Summary fields for case header          |
-| DetailsFields     | Yes       | Key-value fields in a details region    |
-| FieldGroup        | Yes       | Grouped fields with label/legend        |
-| FieldGroupList    | Yes       | List of field groups (repeating)        |
-| FieldValueList    | Yes       | Single field-value pair display         |
-| Operator          | No        | Operator avatar + name display          |
-| Pulse             | Yes       | Activity feed/comments stream           |
-| RichTextEditor    | Yes       | Rich text editor (TinyMCE-based)        |
-| WssQuickCreate    | No        | WSS quick case creation component       |
-
----
-
-## Key Conventions
-
-1. **Default export** — `export default function ComponentName`.
-2. **Flexible messages** — Always handle both `string` and `object` formats for text props (Pega may send either).
-3. **No side effects** — DSE components should be pure renderers. No data fetching or mutations.
-4. **Variant mapping** — Map Pega variant names (urgent, warning, etc.) to your design system's equivalents.
-5. **Display modes** — If a DSE component is also used as a display mode by field components (e.g., FieldValueList), it should be simple and fast to render.
-6. **Graceful fallbacks** — Handle missing/undefined props gracefully with defaults.
-7. **CSS over styled-components** — DSE components in react-sample typically use plain CSS files or MUI `sx` prop, not styled-components.
-8. **Accessible markup** — Use semantic HTML (fieldset/legend for groups, proper heading levels, ARIA labels).