@pega/sdk 0.0.5 → 0.0.7

package/templates/react-sdk-reference/.ai-common/skills/field-skills/RichText.md

@@ -2,196 +2,81 @@
 
 Rich text editor field with HTML content support, binds to a Pega case property.
 
-> **Prerequisite skill:** [`field-components.md`](../field-components.md) — covers architecture, props interface, display modes, event handling, and registration patterns common to ALL field components.
+> **Prerequisite skill:** [`field-components.md`](../field-components.md) — covers architecture, input contract, display modes, event handling, and registration patterns common to ALL field components.
 
 ---
 
 ## Component Purpose
 
-Renders a rich text (WYSIWYG) editor for HTML content. Uses a registry-resolved `RichTextEditor` component. Handles both read-only and editable states. Commits HTML content on blur by reading from the editor's internal ref.
+Renders a rich text (WYSIWYG) editor for HTML content. Uses a registry-resolved `RichTextEditor` component. Handles both read-only and editable states. Commits HTML content on blur by reading from the editor's internal instance reference.
 
 ## Pega Metadata
 
 - **Pega Name:** `RichText`
 - **Type / Subtype:** `Field` / `Text-RichText`
-- **Registration key:** `RichText` (in `component-map.ts`)
+- **Registration key:** `RichText` (in the project's component map)
 
-## Props (component-specific)
+## Inputs (component-specific)
 
-| Prop              | Type                | Description                                   |
-| ----------------- | ------------------- | --------------------------------------------- |
-| `additionalProps` | `object` (optional) | Extra props forwarded to the `RichTextEditor` |
+| Name              | Type                | Description                                    |
+| ----------------- | ------------------- | ---------------------------------------------- |
+| `additionalProps` | `object` (optional) | Extra inputs forwarded to the `RichTextEditor` |
 
-## Component Skeleton
+All other inputs come from the project's field input contract (see prerequisite skill).
+
+## Implementation Structure
 
 Follow this exact structure. The `RichTextEditor` is resolved from the registry — it wraps whatever WYSIWYG library you choose.
 
-```typescript
-import { useRef } from 'react';
-import handleEvent from '../../helpers/event-utils';
-import { getComponentFromRegistry } from '@pega/sdk-react';
-import type { PConnFieldProps } from '@pega/sdk-react';
-import './RichText.css';
-
-interface RichTextProps extends PConnFieldProps {
-  additionalProps?: object;
-}
-
-export default function RichText(props: RichTextProps) {
-  // 1. Registry lookups
-  const FieldValueList = getComponentFromRegistry('FieldValueList');
-  const RichTextEditor = getComponentFromRegistry('RichTextEditor');
-
-  // 2. Destructure props
-  const {
-    getPConnect, value, placeholder, validatemessage,
-    label, hideLabel, helperText, testId, displayMode, additionalProps,
-  } = props;
-  const pConn = getPConnect();
-  const editorRef: any = useRef(null);
-
-  // 3. Props coercion — Pega may pass 'true'/'false' strings
-  let { readOnly, required, disabled } = props;
-  [readOnly, required, disabled] = [readOnly, required, disabled].map(
-    (prop) => prop === true || (typeof prop === 'string' && prop === 'true'),
-  );
-
-  // 4. Derived
-  const helperTextToDisplay = validatemessage || helperText;
-
-  // 5. Display mode returns — note isHtml prop
-  if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} isHtml />;
-  }
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} isHtml variant="stacked" />;
-  }
-
-  // 6. Read-only render — no onChange/onBlur
-  if (readOnly) {
-    return (
-      <RichTextEditor {...additionalProps}
-        label={label} labelHidden={hideLabel} defaultValue={value}
-        testId={testId} info={helperTextToDisplay} ref={editorRef} readOnly />
-    );
-  }
-
-  // 7. Editable handlers
-  const actionsApi = pConn.getActionsApi();
-  let status = '';
-  if (validatemessage !== '') status = 'error';
-
-  const handleChange = () => {
-    if (status === 'error') {
-      const property = (pConn.getStateProps() as any).value;
-      pConn.clearErrorMessages({ property, category: '', context: '' });
-    }
-  };
-  const handleBlur = () => {
-    if (editorRef.current) {
-      const editorValue = editorRef.current.getContent({ format: 'html' });
-      const property = (pConn.getStateProps() as any).value;
-      handleEvent(actionsApi, 'changeNblur', property, editorValue);
-    }
-  };
-
-  // 8. Editable render
-  return (
-    <RichTextEditor {...additionalProps}
-      label={label} labelHidden={hideLabel} info={helperTextToDisplay}
-      defaultValue={value} placeholder={placeholder}
-      disabled={disabled} required={required} testId={testId}
-      ref={editorRef} error={status === 'error'}
-      onBlur={handleBlur} onChange={handleChange} />
-  );
-}
-```
+**Module Setup:** The component depends on the project's component registry (to resolve `FieldValueList` and `RichTextEditor`), the project's event-commit utility, and a companion stylesheet for editor theming. Define the input contract as an extension of the project's field input contract, adding an optional `additionalProps` field.
+
+**Main Component Logic** — steps in order:
+
+1. **Registry lookups** — resolve `FieldValueList` and `RichTextEditor` via the project's component registry.
+2. **Receive inputs** — `getPConnect`, `value`, `placeholder`, `validatemessage`, `label`, `hideLabel`, `helperText`, `testId`, `displayMode`, `additionalProps`; also obtain the PConnect instance and create an instance reference for the editor (initialized to `null`).
+3. **Input coercion** — Pega may pass `readOnly`, `required`, and `disabled` as the strings `'true'`/`'false'` rather than booleans; map each to a real boolean by checking `prop === true || (typeof prop === 'string' && prop === 'true')`.
+4. **Derived** — `helperTextToDisplay = validatemessage || helperText`.
+5. **Display mode returns** (note the `isHtml` flag) — `DISPLAY_ONLY` and `STACKED_LARGE_VAL` (the latter with a stacked variant) both return `FieldValueList` with `value` and `isHtml` set.
+6. **Read-only render** (no change/blur handlers) — render `RichTextEditor` with `additionalProps` spread, plus `label`, `labelHidden` set to `hideLabel`, `defaultValue` set to `value`, `testId`, `info` set to `helperTextToDisplay`, the editor instance reference, and `readOnly`.
+7. **Editable handlers** — obtain the actions API from PConnect; set a local `status` variable to `'error'` when `validatemessage !== ''`; the change handler clears error messages (via `pConn.clearErrorMessages({ property, category: '', context: '' })`, where `property` is the bound property name) when `status === 'error'`; the blur handler reads the HTML content from the editor instance reference (via its `getContent({ format: 'html' })` method) and commits it via the project's event-commit utility with event type `'changeNblur'`, the property name, and the HTML content.
+8. **Editable render** — render `RichTextEditor` with `additionalProps` spread, plus `label`, `labelHidden` set to `hideLabel`, `info` set to `helperTextToDisplay`, `defaultValue` set to `value`, `placeholder`, `disabled`, `required`, `testId`, the editor instance reference, `error` set to `status === 'error'`, the blur handler, and the change handler.
 
 ## Behavioral Contract
 
-1. **Editor ref:** Maintain an `editorRef` (via `useRef`) — the editor exposes its content via `editorRef.current.getContent({ format: 'html' })`.
+1. **Editor instance reference:** Maintain an instance reference for the editor — the editor exposes its content via the reference's `getContent({ format: 'html' })` method.
 2. **No local state** — unlike text inputs, value is NOT tracked in local state. The editor manages its own internal content via `defaultValue`.
-3. **Props coercion:** `readOnly`, `required`, `disabled` must be coerced to booleans:
-   ```typescript
-   [readOnly, required, disabled] = [readOnly, required, disabled].map(
-     (prop) => prop === true || (typeof prop === 'string' && prop === 'true'),
-   );
-   ```
+3. **Input coercion:** `readOnly`, `required`, `disabled` must be coerced to booleans by mapping each value to `prop === true || (typeof prop === 'string' && prop === 'true')`.
 4. **Editable mode:**
    - Track `status` for error state.
-   - **On change:** If `status === 'error'`, clear error messages via:
-     ```
-     pConn.clearErrorMessages({ property, category: '', context: '' })
-     ```
-   - **On blur:** Read HTML from editor ref and commit:
-     ```
-     const editorValue = editorRef.current.getContent({ format: 'html' })
-     handleEvent(actionsApi, 'changeNblur', property, editorValue)
-     ```
-5. **Read-only mode:** Render `RichTextEditor` with `readOnly` prop only — no `onChange`/`onBlur`.
-6. **`RichTextEditor` component:** Resolved via `getComponentFromRegistry('RichTextEditor')`. This is a design-system extension component that wraps the actual WYSIWYG library (e.g., TinyMCE).
-
-### Editable RichTextEditor props
-
-```
-label, labelHidden={hideLabel}, info={helperTextToDisplay}, defaultValue={value},
-placeholder, disabled, required, testId, ref={editorRef},
-error={status === 'error'}, onBlur={handleBlur}, onChange={handleChange}
-```
-
-### Read-only RichTextEditor props
-
-```
-label, labelHidden={hideLabel}, defaultValue={value}, testId, info={helperTextToDisplay},
-ref={editorRef}, readOnly
-```
+   - **On change:** If `status === 'error'`, clear error messages via `pConn.clearErrorMessages({ property, category: '', context: '' })`.
+   - **On blur:** Read HTML from the editor instance reference via its `getContent({ format: 'html' })` method and commit it via the project's event-commit utility with event type `'changeNblur'`, the property name, and the HTML content.
+5. **Read-only mode:** Render `RichTextEditor` with `readOnly` flag only — no change/blur handlers.
+6. **`RichTextEditor` component:** Resolved via the project's component registry. This is a design-system extension component that wraps the actual WYSIWYG library (e.g., TinyMCE).
+
+### Editable RichTextEditor inputs
+
+Spread `additionalProps` first, then pass `label`, `labelHidden` set to `hideLabel`, `info` set to `helperTextToDisplay`, `defaultValue` set to `value`, `placeholder`, `disabled`, `required`, `testId`, the editor instance reference, `error` set to `status === 'error'`, the blur handler, and the change handler.
+
+### Read-only RichTextEditor inputs
+
+Spread `additionalProps` first, then pass `label`, `labelHidden` set to `hideLabel`, `defaultValue` set to `value`, `testId`, `info` set to `helperTextToDisplay`, the editor instance reference, and `readOnly`.
 
 ## Display Mode Rendering
 
-Display modes pass `isHtml={true}` to render HTML content safely:
+Display modes pass `isHtml` to render HTML content safely:
 
-- **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : label} value={value} isHtml />`
-- **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : label} value={value} isHtml variant='stacked' />`
+- **`DISPLAY_ONLY`:** Render `FieldValueList` with `name` set to `label` (or empty when `hideLabel` is true), `value`, and `isHtml` set.
+- **`STACKED_LARGE_VAL`:** Render `FieldValueList` the same way, with a stacked layout variant and `isHtml` set.
 
 ## Read-Only Rendering
 
-Render `RichTextEditor` with `readOnly` prop. Uses same `editorRef`.
+Render `RichTextEditor` with `readOnly` flag. Uses the same editor instance reference.
 
 ## Visual Specifications
 
-The visual appearance of the rich text editor depends on the underlying `RichTextEditor` implementation. The reference implementation uses TinyMCE theming via CSS variables:
-
-```css
-/* RichText.css — must be imported */
-.tox .tox-toolbar {
-  background-color: var(--app-background-color) !important;
-}
-.tox .tox-toolbar__primary {
-  background-color: var(--app-background-color) !important;
-}
-.tox .tox-toolbar__button {
-  color: var(--app-text-color) !important;
-}
-.tox .tox-toolbar__button--enabled {
-  background: var(--app-primary-color) !important;
-  color: #fff !important;
-}
-.tox .tox-dialog {
-  background-color: var(--modal-top-color) !important;
-  color: var(--app-text-color) !important;
-  border: 1px solid var(--modal-border-color) !important;
-  padding: 20px !important;
-  box-shadow: 0 0 10px 3px var(--modal-box-shadow-color) !important;
-}
-.tox .tox-dialog__header {
-  background-color: var(--modal-top-color) !important;
-  color: var(--app-text-color) !important;
-  font-weight: 500;
-  border-bottom: 1px solid var(--modal-border-color);
-}
-```
-
-**Note:** Import `./RichText.css` in the component file. The CSS variables (`--app-background-color`, `--app-text-color`, etc.) are set by the application theme.
+The visual appearance of the rich text editor depends on the underlying `RichTextEditor` implementation. The reference implementation uses editor theming via CSS variables, imported from a companion stylesheet: the toolbar and primary toolbar background use `--app-background-color`; toolbar buttons use `--app-text-color` for their icon color, and enabled/active toolbar buttons use `--app-primary-color` as background with white text; dialogs use `--modal-top-color` for background, `--app-text-color` for text, a 1px border in `--modal-border-color`, 20px padding, and a box shadow using `--modal-box-shadow-color`; the dialog header shares the same background/text colors with medium font weight and a bottom border in `--modal-border-color`.
+
+**Note:** Import the companion stylesheet in the component file. The CSS variables (`--app-background-color`, `--app-text-color`, etc.) are set by the application theme.
 
 When implementing with a different design system:
 
@@ -201,34 +86,32 @@ When implementing with a different design system:
 
 ## Edge Cases & Special Logic
 
-- **Props coercion to boolean:** Pega may pass these props as strings (`'true'`/`'false'`) — always coerce.
+- **Input coercion to boolean:** Pega may pass these inputs as strings (`'true'`/`'false'`) — always coerce.
 - **On blur, NOT on change:** Content is committed to the store only on blur (when user leaves the editor), not on every keystroke.
-- **Error clearing:** When `status === 'error'`, the `onChange` handler clears the error message from Pega so it doesn't persist after the user starts editing.
-- **`editorRef.current.getContent`:** This is specific to the TinyMCE API. For other rich text libraries, use the equivalent method to get HTML content.
-- **`FieldValueList` with `isHtml`:** The display mode renders HTML — ensure XSS protection in the `FieldValueList` component (use `dangerouslySetInnerHTML` only with sanitization, or a trusted HTML renderer).
+- **Error clearing:** When `status === 'error'`, the change handler clears the error message from Pega so it doesn't persist after the user starts editing.
+- **`editorRef.current.getContent`:** This method is specific to the TinyMCE API. For other rich text libraries, use the equivalent method to get HTML content.
+- **`FieldValueList` with `isHtml`:** The display mode renders HTML — ensure XSS protection in the `FieldValueList` component (use the framework's trusted HTML injection mechanism with proper sanitization).
 
 ## Dependencies
 
-- `getComponentFromRegistry('RichTextEditor')` — the actual editor widget (e.g., TinyMCE wrapper).
-- `getComponentFromRegistry('FieldValueList')` for display modes.
-- `handleEvent` from `../../helpers/event-utils`.
-- `./RichText.css` — must be imported for TinyMCE toolbar theming.
-- `useRef` from React.
+- The project's component registry, resolving `RichTextEditor` — the actual editor widget (e.g., TinyMCE wrapper).
+- The project's component registry, resolving `FieldValueList` — for display modes.
+- The project's event-commit utility.
+- A companion stylesheet for editor toolbar theming.
 
 **For other rich text editors:**
 
-- Any WYSIWYG editor that exposes `ref.current.getContent()` or equivalent.
-- Examples: Quill, Draft.js, Slate.js, CKEditor.
+- Any WYSIWYG editor that exposes a method to get HTML content from an instance reference.
+- Examples: Quill, Slate.js, CKEditor, Tiptap.
 
 ## Design System Mapping
 
 **UI control type:** WYSIWYG rich text editor (HTML content).
 
-Listed design systems are examples only.
+When implementing in a specific design system, map the following:
 
-| Design System      | Recommended Component                             |
-| ------------------ | ------------------------------------------------- |
-| Default (CSS only) | `contenteditable` div + custom toolbar OR TinyMCE |
-| MUI                | `RichTextEditor` custom extension (TinyMCE)       |
-| Ant Design         | Quill or TinyMCE with Ant styling                 |
-| Chakra UI          | Quill or TipTap with Chakra styling               |
+- **Rich text editor** → resolve the `RichTextEditor` component from the project's component registry
+- **Read-only** → pass the `readOnly` flag to the editor, which renders as static HTML display
+- **Display modes** → render `FieldValueList` with `isHtml` set for HTML content
+- **Blur commit** → read HTML from the editor's instance reference on blur and commit to store
+- **Theming** → import a companion stylesheet to theme the editor toolbar using CSS variables

package/templates/react-sdk-reference/.ai-common/skills/field-skills/ScalarList.md

@@ -2,7 +2,7 @@
 
 Read-only display component that renders a list of scalar values by creating a child component for each item.
 
-> **Prerequisite skill:** [`field-components.md`](../field-components.md) — covers architecture, props interface, display modes, event handling, and registration patterns common to ALL field components.
+> **Prerequisite skill:** [`field-components.md`](../field-components.md) — covers architecture, input contract, display modes, event handling, and registration patterns common to ALL field components.
 
 ---
 
@@ -14,15 +14,11 @@ Renders a list of scalar (primitive) values by dynamically creating a child comp
 
 - **Pega Name:** `ScalarList`
 - **Type / Subtype:** `Field` / `ScalarList`
-- **Registration key:** `ScalarList` (in `component-map.ts`)
+- **Registration key:** `ScalarList` (in the project's component map)
 
-## Props (component-specific)
+## Inputs (component-specific)
 
-> ScalarList uses `PConnProps` (NOT `PConnFieldProps`) because its `value` is an array, not a string:
-
-```typescript
-import type { PConnProps } from '@pega/sdk-react';
-```
+> ScalarList uses the project's base component interface (NOT the field input contract) because its `value` is an array, not a string.
 
 | Prop             | Type      | Description                                                                  |
 | ---------------- | --------- | ---------------------------------------------------------------------------- |
@@ -33,111 +29,35 @@ import type { PConnProps } from '@pega/sdk-react';
 | `hideLabel`      | `boolean` | Whether to hide the label                                                    |
 | `displayInModal` | `boolean` | Whether this is displayed in a modal context                                 |
 
-All remaining props (`...restProps`) are forwarded to each child component.
+All remaining inputs are forwarded to each child component.
 
-## Component Skeleton
+## Implementation Structure
 
 Read-only display component — no state, no event handling.
 
-```typescript
-import { getComponentFromRegistry } from '@pega/sdk-react';
-import type { PConnProps } from '@pega/sdk-react';
-
-interface ScalarListProps extends PConnProps {
-  displayInModal: boolean;
-  hideLabel: boolean;
-  value: any[];
-  componentType: string;
-  label: string;
-  displayMode: string;
-}
-
-// Local sub-component: renders items as spans in an unstyled list
-function CommaSeparatedList({ items }) {
-  return (
-    <ul style={{ padding: '0', margin: '0' }}>
-      {items.map((value, index) => <span key={index}>{value}</span>)}
-    </ul>
-  );
-}
-
-export default function ScalarList(props: ScalarListProps) {
-  // 1. Registry lookup
-  const FieldValueList = getComponentFromRegistry('FieldValueList');
-
-  // 2. Destructure — note ...restProps forwarded to each child
-  const { label, getPConnect, componentType, value: scalarValues, displayMode, hideLabel, ...restProps } = props;
-
-  // 3. Create child components for each scalar value
-  const items = scalarValues?.map((scalarValue) =>
-    getPConnect().createComponent(
-      {
-        type: componentType,
-        config: { value: scalarValue, displayMode: 'DISPLAY_ONLY', label, ...restProps, readOnly: 'true' },
-      },
-      '', '', {},  // 2nd/3rd/4th args per typedef
-    ),
-  );
-
-  // 4. Display mode: STACKED_LARGE_VAL or DISPLAY_ONLY → bare list
-  if (['STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode)) {
-    return <div><CommaSeparatedList items={items} /></div>;
-  }
-
-  // 5. Default: wrap in FieldValueList
-  return <FieldValueList name={hideLabel ? '' : label} value={<CommaSeparatedList items={items} />} variant="stacked" />;
-}
-```
+**Module Setup:** The component depends on the project's component registry (to resolve `FieldValueList`). Define the input contract as an extension of the project's base component interface (not the field input contract) with `displayInModal`, `hideLabel`, `value` (array), `componentType`, `label`, and `displayMode` fields.
 
-## Behavioral Contract
+**Local sub-component `CommaSeparatedList`:** renders the given items as inline elements inside an unstyled list (no padding, no margin) — despite the name, there is no comma separator; items are simply adjacent inline elements.
 
-1. **No state, no event handling** — purely display/read-only.
-2. **Item rendering:** Map each value in `scalarValues` to a component via `getPConnect().createComponent(...)`:
-   ```typescript
-   const items = scalarValues?.map((scalarValue) =>
-     getPConnect().createComponent(
-       {
-         type: componentType,
-         config: {
-           value: scalarValue,
-           displayMode: 'DISPLAY_ONLY',
-           label,
-           ...restProps,
-           readOnly: 'true',
-         },
-       },
-       '', // 2nd arg: empty string
-       '', // 3rd arg: empty string
-       {}, // 4th arg: empty object
-     ),
-   );
-   ```
-3. **`CommaSeparatedList` sub-component:** A local component that renders items as `<span>` elements inside a `<ul>` with no list styling:
-   ```html
-   <ul style="padding: 0; margin: 0;">
-     <span>item1</span>
-     <span>item2</span>
-     ...
-   </ul>
-   ```
+**Main Component Logic** — steps in order:
 
-## Display Mode Rendering
+1. **Registry lookup** — resolve `FieldValueList` via the project's component registry.
+2. **Receive inputs** — `label`, `getPConnect`, `componentType`, `value` (aliased to `scalarValues`), `displayMode`, `hideLabel`, and the remaining inputs collected into `restInputs` for forwarding to each child.
+3. **Create child components for each scalar value** — map each entry in `scalarValues` to a child component created via `getPConnect().createComponent(...)`, passing a config object of `type: componentType` and a `config` object containing `value: scalarValue`, `displayMode: 'DISPLAY_ONLY'`, `label`, the spread remaining inputs, and `readOnly: 'true'`; the second, third, and fourth arguments to `createComponent` are an empty string, empty string, and empty object respectively (per its type signature).
+4. **Display mode: `STACKED_LARGE_VAL` or `DISPLAY_ONLY`** — return the items wrapped directly in a `<div>` containing `<CommaSeparatedList items={items} />`, with no `FieldValueList` wrapper.
+5. **Default** — wrap in `FieldValueList` with `name={hideLabel ? '' : label}`, `value={<CommaSeparatedList items={items} />}`, and `variant="stacked"`.
 
-**`STACKED_LARGE_VAL` or `DISPLAY_ONLY`:**
+## Behavioral Contract
 
-```html
-<div>
-  <CommaSeparatedList items="{items}" />
-</div>
-```
+1. **No state, no event handling** — purely display/read-only.
+2. **Item rendering:** Map each value in `scalarValues` to a component via `getPConnect().createComponent(...)`, passing `type: componentType` and a `config` object with `value: scalarValue`, `displayMode: 'DISPLAY_ONLY'`, `label`, the spread remaining inputs, and `readOnly: 'true'`; the remaining three call arguments are an empty string, empty string, and empty object.
+3. **`CommaSeparatedList` sub-component:** A local component that renders items as inline elements inside a list with no list styling (zero padding, zero margin).
 
-No `FieldValueList` wrapper in these modes — the items are rendered directly.
+## Display Mode Rendering
 
-**Default (no display mode):**
+**`STACKED_LARGE_VAL` or `DISPLAY_ONLY`:** the items are rendered directly inside a `<div>` wrapping a `<CommaSeparatedList items={items} />` — no `FieldValueList` wrapper in these modes.
 
-```
-<FieldValueList name={hideLabel ? '' : label} value={<CommaSeparatedList items={items} />} variant='stacked' />
-```
+**Default (no display mode):** wrap in `FieldValueList` with `name={hideLabel ? '' : label}`, `value={<CommaSeparatedList items={items} />}`, and `variant='stacked'`.
 
 ## Visual Specifications
 
@@ -148,41 +68,28 @@ No `FieldValueList` wrapper in these modes — the items are rendered directly.
 | Separator    | Items are adjacent spans (no comma separator despite the name)    |
 | Layout       | Vertical stack when wrapped in `FieldValueList variant='stacked'` |
 
-**CSS-only notes:**
-
-```css
-.scalar-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-.scalar-list-item {
-  display: inline;
-}
-```
+**Visual-only styling notes:** The `<ul>` has no bullet markers and zero padding/margin. Each item span is rendered inline with no additional styling.
 
 ## Edge Cases & Special Logic
 
 - `scalarValues` may be `undefined` — the `?.map()` safely returns `undefined`; ensure null-check before rendering.
 - Each child component is created with `displayMode: 'DISPLAY_ONLY'` and `readOnly: 'true'` (as string) — the read-only is passed as a string, not boolean.
-- `restProps` includes all remaining props from the parent beyond the destructured ones — these are forwarded to each child component config.
+- `restInputs` includes all remaining inputs from the parent beyond the destructured ones — these are forwarded to each child component config.
 - `createComponent` takes 4 args — 2nd, 3rd, 4th are empty string/object as the typedef marks them optional.
 
 ## Dependencies
 
-- `getComponentFromRegistry('FieldValueList')` for default display.
+- The project's component registry, resolving `FieldValueList` — for default display.
 - `getPConnect().createComponent()` — for creating each child component.
-- No `handleEvent` — read-only component.
+- No event-commit utility — read-only component.
 
 ## Design System Mapping
 
 **UI control type:** Read-only list of scalar values.
 
-Listed design systems are examples only.
+When implementing in a specific design system, map the following:
 
-| Design System      | Recommended Component                                      |
-| ------------------ | ---------------------------------------------------------- |
-| Default (CSS only) | `<ul>` with `<span>` items                                 |
-| MUI                | `<List>` with `<ListItem>` or just `<Typography>` per item |
-| Ant Design         | `<List>` items or `<Space>` with `<Tag>`                   |
-| Chakra UI          | `<List>` or `<HStack>` with `<Tag>`                        |
+- **List container** → an unstyled list element (no bullets, no padding/margin)
+- **List items** → inline elements for each rendered child component
+- **Default display** → wrap in `FieldValueList` with a stacked variant
+- **Display modes** → render the list directly without `FieldValueList` wrapper