@pega/sdk 0.0.2 → 0.0.4

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

@@ -9,6 +9,7 @@ Single field-value pair display component. Renders a label and value in either a
 ## 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).
 
@@ -22,12 +23,12 @@ When no name is provided, only the value is rendered at full width. Used directl
 
 ## 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`) |
+| 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
 
@@ -52,28 +53,29 @@ Derived from `FieldValueList.tsx` makeStyles:
 
 ### Label
 
-| Property | Value |
-|----------|-------|
-| Font weight | 400 |
-| Color | `theme.palette.text.secondary` (muted/secondary text) |
-| Typography | `body2` (≈ 0.875rem / 14px) |
+| 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) |
+| 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 |
-|----------|-------|
+| Property             | Value          |
+| -------------------- | -------------- |
 | Label bottom padding | `0 !important` |
-| Value top 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)`.
@@ -99,15 +101,16 @@ Derived from `FieldValueList.tsx` makeStyles:
 
 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 |
+| 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)

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

@@ -20,22 +20,23 @@ Renders a clickable read-only field displaying a case operator's name and the re
 
 The component interface extends `PConnProps` but all rendering data is passed as explicit props:
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `label` | `string` | Yes | The field label used to identify which operator to display. Must be `'create operator'` or `'update operator'` (case-insensitive). |
-| `displayLabel` | `any` | No | Alternative label (used if `label` doesn't match). Also compared case-insensitively. |
-| `createDateTime` | `string` | Yes | ISO datetime string of when the case was created |
-| `createLabel` | `string` | Yes | Display label for the create operator field |
-| `createOperator` | `{ userName: string; userId: string }` | Yes | Creator's name and ID |
-| `updateDateTime` | `string` | Yes | ISO datetime string of last update |
-| `updateLabel` | `string` | Yes | Display label for the update operator field |
-| `updateOperator` | `{ userName: string; userId: string }` | Yes | Updater's name and ID |
+| Prop             | Type                                   | Required | Description                                                                                                                        |
+| ---------------- | -------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| `label`          | `string`                               | Yes      | The field label used to identify which operator to display. Must be `'create operator'` or `'update operator'` (case-insensitive). |
+| `displayLabel`   | `any`                                  | No       | Alternative label (used if `label` doesn't match). Also compared case-insensitively.                                               |
+| `createDateTime` | `string`                               | Yes      | ISO datetime string of when the case was created                                                                                   |
+| `createLabel`    | `string`                               | Yes      | Display label for the create operator field                                                                                        |
+| `createOperator` | `{ userName: string; userId: string }` | Yes      | Creator's name and ID                                                                                                              |
+| `updateDateTime` | `string`                               | Yes      | ISO datetime string of last update                                                                                                 |
+| `updateLabel`    | `string`                               | Yes      | Display label for the update operator field                                                                                        |
+| `updateOperator` | `{ userName: string; userId: string }` | Yes      | Updater's name and ID                                                                                                              |
 
 ## Behavioral Contract
 
 ### 1. Operator Selection
 
 Determine which operator to display based on `label.toLowerCase()` or `displayLabel?.toLowerCase()`:
+
 - If either is `'create operator'`:
   - `caseOpLabel = createLabel`
   - `caseOpName = createOperator.userName`
@@ -51,6 +52,7 @@ Determine which operator to display based on `label.toLowerCase()` or `displayLa
 ### 2. Main Display
 
 Render a read-only TextField (standard variant, no underline, pointer cursor) with:
+
 - `defaultValue={caseOpName}`
 - `label={caseOpLabel}`
 - `onClick={showOperatorDetails}`
@@ -61,6 +63,7 @@ Below the TextField, render the relative time: `Utils.generateDateTime(caseTime,
 ### 3. Popover on Click (`showOperatorDetails`)
 
 When the TextField is clicked:
+
 1. Call `PCore.getUserApi().getOperatorDetails(caseOpId)` — returns a Promise.
 2. Use `PCore.getLocaleUtils().getLocaleValue(key, 'Operator')` to localize field labels.
 3. On resolution, build a fields array with these entries (using `'---'` as fallback for missing values):
@@ -76,6 +79,7 @@ When the TextField is clicked:
 ### 4. Popover Layout
 
 The popover renders when `popoverAnchorEl` is set:
+
 - Anchor origin: `{ vertical: 'bottom', horizontal: 'center' }`
 - Transform origin: `{ vertical: 'top', horizontal: 'center' }`
 - Max width: `45ch`
@@ -91,20 +95,21 @@ Derived from `Operator.tsx` makeStyles:
 
 ### Root Container
 
-| Property | Value |
-|----------|-------|
-| Padding | `theme.spacing(1)` (≈ 8px) |
-| Margin | `theme.spacing(1)` |
+| Property | Value                      |
+| -------- | -------------------------- |
+| Padding  | `theme.spacing(1)` (≈ 8px) |
+| Margin   | `theme.spacing(1)`         |
 
 ### Popover Container
 
-| Property | Value |
-|----------|-------|
-| Padding | `theme.spacing(1)` |
-| Margin | `theme.spacing(1)` |
-| Max width | 45ch |
+| Property  | Value              |
+| --------- | ------------------ |
+| Padding   | `theme.spacing(1)` |
+| Margin    | `theme.spacing(1)` |
+| Max width | 45ch               |
 
 **CSS-only implementation notes:**
+
 - Main display: read-only text field with label above, value below, pointer cursor on the value element.
 - Time display: secondary muted text below the operator name (e.g., `font-size: 0.75rem; color: var(--text-secondary)`).
 - Popover: `position: absolute; background: var(--bg-paper); border: 1px solid var(--divider); border-radius: 4px; padding: 8px; max-width: 45ch; box-shadow: 0 4px 12px rgba(0,0,0,0.15)`.
@@ -133,15 +138,16 @@ Derived from `Operator.tsx` makeStyles:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<div>` with click handler, custom CSS popover/tooltip panel |
-| MUI | Read-only `<TextField>` + `<Popover>` with `<Grid>` detail rows |
-| Ant Design | `<Input readOnly>` + `<Popover>` with `<Descriptions>` |
-| Chakra UI | `<Input isReadOnly>` + `<Popover>` with custom content |
-| Shadcn/ui | `<Input readOnly>` + `<Popover>` + `<PopoverContent>` |
+| Design System      | Recommended Component                                           |
+| ------------------ | --------------------------------------------------------------- |
+| Default (CSS only) | `<div>` with click handler, custom CSS popover/tooltip panel    |
+| MUI                | Read-only `<TextField>` + `<Popover>` with `<Grid>` detail rows |
+| Ant Design         | `<Input readOnly>` + `<Popover>` with `<Descriptions>`          |
+| Chakra UI          | `<Input isReadOnly>` + `<Popover>` with custom content          |
+| Shadcn/ui          | `<Input readOnly>` + `<Popover>` + `<PopoverContent>`           |
 
 When implementing in a specific design system, map the following:
+
 - `onClick` on read-only input → trigger async fetch + open popover
 - `PCore.getUserApi().getOperatorDetails()` → call this before showing the popover
 - Popover anchor → position relative to the clicked element

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

@@ -18,9 +18,9 @@ Renders a card container intended to display an activity feed or comments stream
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode` | No | Child components (activity stream content) — currently unused in the stub |
+| 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.
 
@@ -40,14 +40,15 @@ 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` |
+| 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`.
@@ -69,15 +70,16 @@ Derived from `Pulse.tsx` makeStyles:
 
 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>` |
+| 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)

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

@@ -22,21 +22,21 @@ The editor is a `forwardRef` component — the ref is connected to the underlyin
 
 ## 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 |
+| 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
 
@@ -51,6 +51,7 @@ 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}
@@ -59,44 +60,46 @@ If `readOnly` is `true`, render:
   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 |
-|--------|-------|
+| 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` |
+| `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 |
+| 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>;
@@ -104,24 +107,43 @@ body {
   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 {
+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;
+  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;
+  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 })`.
@@ -130,9 +152,11 @@ When a user clicks the image upload in the toolbar:
 ### 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
@@ -151,14 +175,15 @@ 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` |
+| 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.
@@ -188,15 +213,16 @@ Derived from `RichTextEditor.tsx` makeStyles:
 
 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 |
+| 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)

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

@@ -18,10 +18,10 @@ Renders a titled section of clickable action cards arranged in a responsive CSS
 
 ## 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 |
+| 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
 
@@ -41,61 +41,62 @@ Derived from `WssQuickCreate.css` and component makeStyles:
 
 ### Section Heading
 
-| Property | Value |
-|----------|-------|
-| Tag | `<h1>` |
-| Margin top | 8px |
+| Property   | Value  |
+| ---------- | ------ |
+| Tag        | `<h1>` |
+| Margin top | 8px    |
 
 ### Action List
 
-| Property | Value |
-|----------|-------|
-| List style | none |
-| Padding | 0 |
-| Display | grid |
+| Property              | Value                                                                 |
+| --------------------- | --------------------------------------------------------------------- |
+| List style            | none                                                                  |
+| Padding               | 0                                                                     |
+| Display               | grid                                                                  |
 | Grid template columns | `repeat(auto-fit, minmax(min(20ch, 100%), 1fr))` (responsive columns) |
-| Gap | 1rem |
+| 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)` |
+| 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) |
+| 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 |
+| Property       | Value  |
+| -------------- | ------ |
+| Display        | flex   |
 | Flex direction | column |
-| Align items | center |
-| Gap | 0.5rem |
+| Align items    | center |
+| Gap            | 0.5rem |
 
 ### Icon
 
-| Property | Value |
-|----------|-------|
-| Flex shrink | 0 |
-| Object fit | contain |
-| Width | 3rem |
-| Height | 3rem |
+| 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`.
@@ -120,15 +121,16 @@ Derived from `WssQuickCreate.css` and component makeStyles:
 
 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 |
+| 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