@pega/sdk 0.0.3 → 0.0.5

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

@@ -1,206 +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,135 +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,289 +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).