@pega/sdk 0.0.5 → 0.0.6

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

@@ -2,138 +2,118 @@
 
 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.
+> **Prerequisite skill:** [`design-system-extension.md`](../design-system-extension.md) — covers architecture, input contracts, 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.
+Renders a rich text editing area (WYSIWYG) for Pega case properties that store HTML content. In **edit mode**, uses a rich text editor library with a bottom toolbar. In **read-only mode**, renders the HTML content as a read-only `<div>`. Wraps the editor in a form field wrapper with an optional 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.
+The editor supports exposing its instance to parent components — use the framework's standard instance-sharing mechanism.
 
-> **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.
+> **Note:** TinyMCE is the reference editor library. In other implementations, this component can be replaced with an alternative rich text library (Quill, ProseMirror, Slate.js, Tiptap, 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                            |
-
-## Component Skeleton
-
-```typescript
-import { forwardRef } from 'react';
-import { useAfterInitialEffect, useConsolidatedRef, useUID } from '@pega/sdk-react';
-
-interface RichTextEditorProps {
-  id?: string; defaultValue: string; label: string; labelHidden: boolean;
-  info?: string; testId?: string; placeholder?: string;
-  disabled: boolean; required: boolean; readOnly: boolean;
-  error: boolean; onBlur: any; onChange: any;
-}
-
-const RichTextEditor = forwardRef((props: RichTextEditorProps, ref) => {
-  const { defaultValue, label, labelHidden, info, testId, placeholder,
-    disabled, required, readOnly, error, onBlur, onChange } = props;
-  const editorRef = useConsolidatedRef(ref);
-  const id = props.id || useUID();
-
-  // 1. Mode transitions after initial mount
-  useAfterInitialEffect([readOnly, disabled], () => {
-    editorRef?.current?.mode?.set(readOnly || disabled ? 'readonly' : 'design');
-  });
-
-  // 2. Read-only mode: static HTML display
-  if (readOnly) {
-    return (
-      <FormWrapper testId={testId} error={error} required={required}>
-        {!labelHidden && <Label>{label}</Label>}
-        <div className="readonly-richtext-editor"
-          dangerouslySetInnerHTML={{ __html: defaultValue || '--' }} />
-        {info && <HelperText>{info}</HelperText>}
-      </FormWrapper>
-    );
-  }
-
-  // 3. Edit mode: TinyMCE (or equivalent) editor
-  //    Key init config: skin (theme-aware), menubar: false, statusbar: false,
-  //    toolbar_location: 'bottom', min_height: 130, plugins: [lists, advlist, autolink, image, link, autoresize]
-  //    toolbar: 'blocks | bold italic strikethrough | bullist numlist outdent indent | link image' (or false if disabled)
-  //    file_picker_callback: creates <input type='file' accept='image/*'>, reads as DataURL, caches blob
-  //    content_style: theme-aware CSS string
-  //    onInit: store editor instance in editorRef.current
-
-  return (
-    <FormWrapper testId={testId} error={error} required={required}>
-      {!labelHidden && <Label>{label}</Label>}
-      <RichTextEditorWidget id={id} initialValue={defaultValue}
-        disabled={disabled} onBlur={onBlur} onEditorChange={onChange}
-        placeholder={placeholder} onInit={(evt, editor) => { editorRef.current = editor; }} />
-      {info && <HelperText>{info}</HelperText>}
-    </FormWrapper>
-  );
-});
-
-export default RichTextEditor;
-```
+- **Registration key:** `RichTextEditor` (in the project's component map)
+- **Does NOT extend the base PConnect interface** — receives all data as explicit field-like inputs
+
+## Component Inputs
+
+The component accepts the following inputs. Define the input contract using the project's framework conventions.
+
+| Name           | 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 the test id attribute on the form 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 form wrapper              |
+| `onBlur`       | `function` | Yes      | Called when the editor loses focus                                |
+| `onChange`     | `function` | Yes      | Called when the editor content changes                            |
+
+## Implementation Structure
+
+### Module Setup
+
+The component imports:
+
+- The framework's mechanism for exposing the editor instance to parent components (e.g., ref forwarding in React, `@ViewChild` in Angular)
+- Lifecycle and utility helpers from the SDK bridge package: a post-initial-mount change watcher, a consolidated instance reference utility, and a unique ID generator
+- A rich text editor library (TinyMCE in the reference implementation — can be swapped for Quill, ProseMirror, Tiptap, etc.)
+- Form wrapper components from the design system (form control, helper text, label)
+- Theme/token access from the design system for palette and typography values
+
+The component is named `RichTextEditor`, accepts the inputs listed above, and supports exposing the editor instance to parent components. Define the input contract and export the component following the project's framework conventions.
+
+### Editor Instance and ID Management
+
+- Use the SDK bridge package's consolidated reference utility to create a reference to the editor instance — the rich text editor instance is stored here after initialization via `onInit`.
+- If `id` is not provided in the inputs, generate one using the SDK bridge package's unique ID generator.
+
+### Mode Transition Effect
+
+After initial mount, use the SDK bridge package's post-initial-mount change watcher, observing `[readOnly, disabled]`. When either changes, switch the editor's mode to read-only if either `readOnly` or `disabled` is true, otherwise switch to edit/design mode. This transitions the editor mode without re-mounting it.
+
+### Render Paths
+
+The component has two mutually exclusive render paths, both wrapped in a common form wrapper:
+
+**Read-only path** (when `readOnly === true`):
+
+- Render a `<div>` with the resolved `id`, class `readonly-richtext-editor`, and raw HTML content containing `defaultValue` (or `'--'` if defaultValue is falsy) via the framework's trusted HTML injection mechanism.
+- Skip the TinyMCE Editor entirely.
+
+**Edit path** (when `readOnly === false`):
+
+- Render the TinyMCE editor instance with the configuration described in the Behavioral Contract sections below.
+- On init, store the editor instance in the component's editor reference.
+
+### Wrapper Structure
+
+Both paths are wrapped in a form field wrapper (the DS's form control component) with:
+
+- The test id attribute set to the `testId` input
+- `error` and `required` states passed through
+- If `labelHidden` is false: render a label element with class `fieldLabel` containing the `label` text (non-floating — positioned relative with no transform)
+- The rich text component (either read-only div or interactive editor)
+- If `info` is provided: render a helper text element containing the info text
 
 ## Behavioral Contract
 
-### 1. Ref Forwarding
+### 1. Exposing the Editor Instance
 
-The component uses `forwardRef`. Internally, use `useConsolidatedRef(ref)` from `@pega/sdk-react` to create `editorRef` — the TinyMCE editor instance is stored here after initialization.
+The component exposes the editor instance to parent components. Internally, use the SDK bridge package's consolidated reference utility to store the editor instance after initialization.
 
 ### 2. UID for id
 
-If `id` is not provided, generate one using `useUID()` from `@pega/sdk-react`.
+If `id` is not provided, generate one using the SDK bridge package's unique ID generator.
 
 ### 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.
+If `readOnly` is `true`, render a `<div>` with `key` and `id` set to the resolved id, class `readonly-richtext-editor`, and the raw HTML content set to `defaultValue` (or `'--'` as fallback if defaultValue is falsy). Skip the interactive editor entirely in this case.
 
 ### 4. Edit Mode (TinyMCE)
 
-When `readOnly` is `false`, render `<Editor>` from `@tinymce/tinymce-react` with:
+When `readOnly` is `false`, render the TinyMCE editor component from the project's framework-specific TinyMCE integration package 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`       |
+| Config             | Value                                            |
+| ------------------ | ------------------------------------------------ |
+| `tinymceScriptSrc` | `'tinymce/tinymce.min.js'` (local script)        |
+| `id`               | The resolved `id`                                |
+| `initialValue`     | `defaultValue`                                   |
+| `disabled`         | `disabled` input                                 |
+| `onBlur`           | `onBlur` input                                   |
+| `onEditorChange`   | `onChange` input                                 |
+| `onInit`           | Store editor in the component's editor reference |
 
 ### 5. TinyMCE `init` Configuration
 
@@ -152,51 +132,21 @@ When `readOnly` is `false`, render `<Editor>` from `@tinymce/tinymce-react` with
 | `file_picker_types`        | `'image'`                                                                                                            |
 | `file_picker_callback`     | See file picker section below                                                                                        |
 | `content_style`            | Theme-aware CSS string (see below)                                                                                   |
-| `placeholder`              | `placeholder` prop                                                                                                   |
+| `placeholder`              | `placeholder` input                                                                                                  |
 
 ### 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;
-}
-```
+Inject a `content_style` string into the TinyMCE init config that uses theme values. The style string should set properties for the following selectors:
+
+| CSS Selector                                                             | Properties                                                                                                                                                                                                                        |
+| ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `body`                                                                   | `font-family` from theme typography; `font-size` from theme typography (in px); `color` from theme's primary text color; `background` from theme's paper/surface background                                                       |
+| `a`                                                                      | `color` from theme's primary/link color                                                                                                                                                                                           |
+| `h1` through `h6`                                                        | `color` from theme's primary text color; `font-family` from theme typography                                                                                                                                                      |
+| `blockquote`                                                             | `color` from theme's secondary text color; `border-left: 4px solid` using theme's primary-light color; `padding-left: 8px`                                                                                                        |
+| `ul, ol`                                                                 | `color` from theme's primary text color                                                                                                                                                                                           |
+| `input, textarea, select`                                                | `background` from theme's paper/surface background; `color` from theme's primary text color; `border: 1px solid` using theme's divider color; `border-radius: 4px`; `padding: 6px 10px`; `font-size: 1em`; `font-family: inherit` |
+| `.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before` | `color` from theme's secondary text color; `opacity: 0.7`                                                                                                                                                                         |
 
 ### 7. File Picker Callback
 
@@ -204,32 +154,25 @@ 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 })`.
+3. On `FileReader.load`: create a blob in TinyMCE's blob cache (accessed via the stored editor instance's `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.
+Use the SDK bridge package's post-initial-mount change watcher, observing `[readOnly, disabled]`. When either value changes after the initial render, switch the editor mode to read-only (if readOnly or disabled is true) or to editable/design mode (otherwise). This transitions the editor mode without re-mounting it.
 
 ### 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>
-```
+The component nests elements in this order:
+
+1. **Form field wrapper** (the DS's form control) with the test id attribute, `error`, and `required` states
+2. Inside the wrapper, conditionally: **Label element** with class `fieldLabel` containing `{label}` (only if `labelHidden` is false)
+3. The rich text component — either the read-only div or the interactive editor
+4. Conditionally: **Helper text element** containing `{info}` (only if `info` is provided)
 
 ## Visual Specifications
 
-Derived from `RichTextEditor.tsx` makeStyles:
+Derived from the component's companion styles:
 
 ### Label
 
@@ -238,7 +181,7 @@ Derived from `RichTextEditor.tsx` makeStyles:
 | Position      | relative                                                   |
 | Transform     | `translate(0, 0px) scale(1)` (non-floating — stays at top) |
 | Margin bottom | 5px                                                        |
-| Color         | `theme.palette.text.secondary`                             |
+| Color         | secondary text color                                       |
 
 **CSS-only implementation notes:**
 
@@ -254,37 +197,30 @@ Derived from `RichTextEditor.tsx` makeStyles:
 
 - `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.
+- Mode transitions (readOnly/disabled changing after mount) use the SDK bridge package's post-initial-mount change watcher — it fires on subsequent changes but NOT on the initial mount, preventing a double-set.
 - 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.
+- `id` must be stable across renders — use the SDK's unique ID generator only as a fallback when `id` input 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
+- A rich text editor library (TinyMCE in the reference — can be swapped for Quill, ProseMirror, Slate.js, Tiptap, etc.)
+- Lifecycle and utility helpers from the SDK bridge package: a post-initial-mount change watcher, a consolidated instance reference utility, and a unique ID generator
+- The design system's theme/token mechanism — for theme-aware content styles
+- The design system's form field wrapper components (form control, helper text, label)
 
 ## 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
+- **Rich text editor** → use TinyMCE, Quill, ProseMirror, Tiptap, or any WYSIWYG library appropriate for the project
+- **Form wrapper** → use the DS's form field wrapper (form control, form group, or field container) with error/required states
+- **Label** → use the DS's field label component (non-floating, positioned above the editor)
+- **Helper text** → use the DS's helper/description text below the editor, with error color when `error` is true
+- **`defaultValue`** → initial HTML content
+- **`readOnly` = true** → always render as static HTML display (no editor instance)
+- **`disabled` = true** → editor mounted but in read-only mode with toolbar hidden
+- **`onBlur` / `onChange`** → editor's blur and content-change callbacks
+- **File picker** → `<input type='file' accept='image/*'>` triggered programmatically when the image toolbar button is clicked
+- **Theme-aware styles** → inject the DS's typography and palette values into the editor's content styles so content inside the editor matches the app's theme

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

@@ -2,7 +2,7 @@
 
 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.
+> **Prerequisite skill:** [`design-system-extension.md`](../design-system-extension.md) — covers architecture, input contracts, styling patterns, and registration patterns common to ALL DSE components.
 
 ---
 
@@ -13,46 +13,39 @@ Renders a titled section of clickable action cards arranged in a responsive CSS
 ## Pega Metadata
 
 - **Pega Name:** `WssQuickCreate`
-- **Registration key:** `WssQuickCreate` (in `component-map.ts`)
-- **Does NOT use `getPConnect`** — receives all data as direct props
+- **Registration key:** `WssQuickCreate` (in the project's component map)
+- **Does NOT use `getPConnect`** — receives all data as direct inputs
 
-## Props
+## Component Inputs
 
-| Prop      | Type                                                           | Required | Description                                                                  |
+The component accepts the following inputs. Define the input contract using the project's framework conventions.
+
+| Name      | 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 |
 
-## Component Skeleton
-
-```typescript
-import './WssQuickCreate.css';
-
-interface WssQuickCreateProps {
-  heading: string;
-  actions?: Array<{ label: string; onClick: () => void; icon?: string }>;
-}
-
-export default function WssQuickCreate({ heading, actions }: WssQuickCreateProps) {
-  return (
-    <>
-      <h1 id="quick-links-heading" className="quick-links-heading">{heading}</h1>
-      <ul id="quick-links" className="quick-link-ul-list">
-        {actions?.map((action, index) => (
-          <li key={index} className="quickLinkList">
-            <button type="button" className="quick-link-button" onClick={action.onClick}>
-              <span className="quick-link-button-span">
-                {action.icon && <img className="quick-link-icon" src={action.icon} />}
-                <span>{action.label}</span>
-              </span>
-            </button>
-          </li>
-        ))}
-      </ul>
-    </>
-  );
-}
-```
+## Implementation Structure
+
+### Module Setup
+
+The component requires companion styles (for action list and button styling) co-located following the project's styling convention. It does NOT import any Pega SDK modules — all data arrives via direct inputs.
+
+The component is named `WssQuickCreate` and accepts the inputs listed in the table above. Define the input contract and export the component following the project's framework conventions.
+
+### Component Logic
+
+The component receives `heading` and `actions` as inputs, then renders:
+
+1. **Heading** — an `<h1>` element with `id="quick-links-heading"` and class `quick-links-heading`, containing the `heading` text.
+2. **Action list** — a `<ul>` with `id="quick-links"` and class `quick-link-ul-list`.
+3. **Action items** — if `actions` is provided, iterate over the array rendering one `<li>` per action:
+   - The `<li>` has the `quickLinkList` style class (styled card appearance with border, rounded corners, and themed background color).
+   - Inside each `<li>`, render a `<button>` with `type="button"`, class `quick-link-button`, and the action's `onClick` handler.
+   - Button content is a `<span>` with class `quick-link-button-span` (flex column layout) containing:
+     - If `action.icon` is provided: an `<img>` with class `quick-link-icon` and `src` set to the icon URL.
+     - A `<span>` containing `action.label`.
+4. If `actions` is not provided or is empty, render only the heading with an empty list.
 
 ## Behavioral Contract
 
@@ -68,7 +61,7 @@ export default function WssQuickCreate({ heading, actions }: WssQuickCreateProps
 
 ## Visual Specifications
 
-Derived from `WssQuickCreate.css` and component makeStyles:
+Derived from the component's companion styles:
 
 ### Section Heading
 
@@ -150,19 +143,10 @@ Derived from `WssQuickCreate.css` and component makeStyles:
 
 **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
+- **Card border/background** → use the DS's card or outlined button variant with the themed background and border colors
+- **Button click** → standard click handler wired to `action.onClick`
+- **Icon + label stacked layout** → use a flex column layout inside the button content area
+- **Responsive grid** → use the DS's responsive grid component or CSS grid with `repeat(auto-fit, minmax(min(20ch, 100%), 1fr))`
+- **Dark/light mode background** → use `var(--app-background-color)` in dark mode or `var(--link-button-color)` in light mode (or detect from the DS's theme mode)