@pega/sdk 0.0.5 → 0.0.6

package/templates/react-sdk-reference/.ai-common/skills/template-skills/MultiReferenceReadOnly.md

@@ -8,17 +8,17 @@ Multi-reference read-only template. Routes to `SimpleTableSelectReadonly` or `Si
 
 ## Component Purpose
 
-Renders a multi-value reference field in read-only mode. Routing is based on the `displayAs` prop: certain display variants use `SimpleTableSelectReadonly` (link + modal), while others use `SimpleTable` directly.
+Renders a multi-value reference field in read-only mode. Routing is based on the `displayAs` input: certain display variants use `SimpleTableSelectReadonly` (link + modal), while others use `SimpleTable` directly.
 
 ## Pega Metadata
 
-- **Registration key:** `MultiReferenceReadOnly` (in `component-map.ts`)
+- **Registration key:** `MultiReferenceReadOnly` (in the project's component map)
 - **Category:** Display template — read-only multi-reference
-- **Extends:** `PConnProps`
+- **Extends:** the project's base component interface
 
-## Props
+## Inputs
 
-| Prop                  | Type       | Required | Description                                              |
+| Input                 | Type       | Required | Description                                              |
 | --------------------- | ---------- | -------- | -------------------------------------------------------- |
 | `displayAs`           | `string`   | Yes      | UI variant that was used in edit mode                    |
 | `referenceList`       | `string`   | No       | Property path to the reference list                      |
@@ -26,56 +26,16 @@ Renders a multi-value reference field in read-only mode. Routing is based on the
 | `fieldMetadata`       | `object`   | No       | Field-level metadata                                     |
 | `getPConnect`         | `function` | Yes      | PConnect getter                                          |
 
-## Component Skeleton
-
-```typescript
-import type { PConnProps } from '@pega/sdk-react';
-
-interface MultiReferenceReadOnlyProps extends PConnProps {
-  config: { referenceList: any; readonlyContextList: any };
-  label: string;
-  hideLabel: boolean;
-  displayMode?: any;
-  displayAs?: any;
-}
-
-export default function MultiReferenceReadOnly(props: MultiReferenceReadOnlyProps) {
-  const { getPConnect, label = '', hideLabel = false, config, displayMode, displayAs } = props;
-  const { referenceList, readonlyContextList } = config;
-
-  // 1. Route: SimpleTableSelectReadonly for specific displayAs values
-  if (['readonlyMulti', 'combobox', 'checkboxgroup'].includes(displayAs)) {
-    return getPConnect().createComponent({
-      type: 'SimpleTableSelectReadonly',
-      config: { ...config, displayMode, label, hideLabel, displayAs },
-    });
-  }
-
-  // 2. Fallback: use readonlyContextList if referenceList is not a property annotation
-  let readonlyContextObject;
-  if (!PCore.getAnnotationUtils().isProperty(referenceList)) {
-    readonlyContextObject = { referenceList: readonlyContextList };
-  }
-
-  // 3. Route: SimpleTable for all other displayAs values
-  const component = getPConnect().createComponent(
-    { type: 'SimpleTable', config: { ...config, ...readonlyContextObject, label, hideLabel } },
-    '', 0, {},
-  );
-  return <>{component}</>;
-}
-```
-
-## Behavioral Contract
-
-### Routing by `displayAs`
-
-```
-if displayAs in ['readonlyMulti', 'combobox', 'checkboxgroup']:
-  → render SimpleTableSelectReadonly
-else:
-  → render SimpleTable (with readOnly=true / displayMode='DISPLAY_ONLY')
-```
+## Implementation Structure
+
+**Module Setup:** This component requires the project's base component interface. Define a component input contract extending the base interface with `config: { referenceList, readonlyContextList }`, `label` (string), `hideLabel` (boolean), and optional `displayMode`/`displayAs`.
+
+**Main Component Logic** — steps in order:
+
+1. Receive inputs: `getPConnect`, `label` (default `''`), `hideLabel` (default `false`), `config`, `displayMode`, and `displayAs`; further extract `referenceList` and `readonlyContextList` from `config`.
+2. **Route to `SimpleTableSelectReadonly`:** if `displayAs` is one of `'readonlyMulti'`, `'combobox'`, or `'checkboxgroup'`, return `getPConnect().createComponent({ type: 'SimpleTableSelectReadonly', config: { ...config, displayMode, label, hideLabel, displayAs } })`.
+3. **Reference list fallback:** if `referenceList` is not recognized as a property annotation (checked via `PCore.getAnnotationUtils().isProperty(referenceList)`), build a `readonlyContextObject = { referenceList: readonlyContextList }` to use in its place.
+4. **Route to `SimpleTable`:** for all other `displayAs` values, call `getPConnect().createComponent({ type: 'SimpleTable', config: { ...config, ...readonlyContextObject, label, hideLabel } }, '', 0, {})` and render the result.
 
 ### Reference List Fallback
 
@@ -109,14 +69,9 @@ See `SimpleTable.md` and `ListView.md` for detailed visual specs.
 
 **UI control type:** Read-only multi-value reference display — routes to modal table or flat table.
 
-Listed design systems are examples only.
-
-| `displayAs`                                  | Routing                     | DS Implementation    |
-| -------------------------------------------- | --------------------------- | -------------------- |
-| `readonlyMulti`, `combobox`, `checkboxgroup` | `SimpleTableSelectReadonly` | Link/chip + modal    |
-| All others                                   | `SimpleTable`               | Flat read-only table |
-
-When implementing in a specific design system:
+When implementing in a specific design system, map the following:
 
-- The `displayAs` routing list must match the edit-mode variants defined in `DataReference.md`
-- `readonlyContextList` fallback is critical — reference list data may not be available on initial render
+- When `displayAs` is `'readonlyMulti'`, `'combobox'`, or `'checkboxgroup'`, route to `SimpleTableSelectReadonly` — typically rendered as a link/chip showing selection count with a modal dialog for details.
+- For all other `displayAs` values, route to `SimpleTable` — typically rendered as a flat read-only table.
+- The `displayAs` routing list must match the edit-mode variants defined in `DataReference.md`.
+- `readonlyContextList` fallback is critical — reference list data may not be available on initial render.

package/templates/react-sdk-reference/.ai-common/skills/template-skills/NarrowWide.md

@@ -10,8 +10,8 @@ Asymmetric two-column layout with a narrow left column (~33%) and a wide right c
 
 Renders two children side by side with the left column narrower than the right. Used for case layouts where a sidebar panel sits beside a main content area. Four sub-variants:
 
-- **`NarrowWide`** — core CSS-based layout, accepts either `a`/`b` slot props or React `children[0]`/`children[1]`
-- **`NarrowWidePage`** — wrapper that passes React children as `a` and `b` slot props to `NarrowWide`
+- **`NarrowWide`** — core CSS-based layout, accepts either `a`/`b` slot inputs or `children[0]`/`children[1]`
+- **`NarrowWidePage`** — wrapper that passes children as `a` and `b` slot inputs to `NarrowWide`
 - **`NarrowWideForm`** — simplified wrapper using only `children` (no `a`/`b` slots, no title/icon)
 - **`NarrowWideDetails`** — details read-only variant; sets children to DISPLAY_ONLY mode and supports highlighted data
 
@@ -24,110 +24,69 @@ Renders two children side by side with the left column narrower than the right.
 | NarrowWideForm    | `NarrowWideForm`    |
 | NarrowWideDetails | `NarrowWideDetails` |
 
-All extend `PConnProps`.
+All extend the project's base component interface.
 
-## Props
+## Inputs
 
 ### NarrowWide
 
-| Prop       | Type          | Required | Description                                                |
-| ---------- | ------------- | -------- | ---------------------------------------------------------- |
-| `children` | `ReactNode[]` | No       | Two children rendered in narrow/wide slots                 |
-| `a`        | `any`         | No       | Narrow (left) column content                               |
-| `b`        | `any`         | No       | Wide (right) column content                                |
-| `title`    | `string`      | No       | Optional title (not rendered in reference implementation)  |
-| `cols`     | `string`      | No       | Column template (not rendered in reference implementation) |
-| `icon`     | `string`      | No       | Optional icon (not rendered in reference implementation)   |
+| Name       | Type               | Required | Description                                                |
+| ---------- | ------------------ | -------- | ---------------------------------------------------------- |
+| `children` | renderable content | No       | Two children rendered in narrow/wide slots                 |
+| `a`        | `any`              | No       | Narrow (left) column content                               |
+| `b`        | `any`              | No       | Wide (right) column content                                |
+| `title`    | `string`           | No       | Optional title (not rendered in reference implementation)  |
+| `cols`     | `string`           | No       | Column template (not rendered in reference implementation) |
+| `icon`     | `string`           | No       | Optional icon (not rendered in reference implementation)   |
 
 ### NarrowWidePage
 
-| Prop          | Type          | Required | Description                                           |
-| ------------- | ------------- | -------- | ----------------------------------------------------- |
-| `children`    | `ReactNode[]` | Yes      | Two children — `[0]` → narrow slot, `[1]` → wide slot |
-| `title`       | `string`      | Yes      | Page title (passed to NarrowWide)                     |
-| `templateCol` | `string`      | No       | Column ratio (default `'1fr 1fr'`)                    |
-| `icon`        | `string`      | No       | Icon name (strips `'pi pi-'` prefix)                  |
+| Name          | Type               | Required | Description                                           |
+| ------------- | ------------------ | -------- | ----------------------------------------------------- |
+| `children`    | renderable content | Yes      | Two children — `[0]` → narrow slot, `[1]` → wide slot |
+| `title`       | `string`           | Yes      | Page title (passed to NarrowWide)                     |
+| `templateCol` | `string`           | No       | Column ratio (default `'1fr 1fr'`)                    |
+| `icon`        | `string`           | No       | Icon name (strips `'pi pi-'` prefix)                  |
 
 ### NarrowWideForm
 
-| Prop       | Type          | Required | Description                                           |
-| ---------- | ------------- | -------- | ----------------------------------------------------- |
-| `children` | `ReactNode[]` | Yes      | Two children — `[0]` → narrow slot, `[1]` → wide slot |
+| Name       | Type               | Required | Description                                           |
+| ---------- | ------------------ | -------- | ----------------------------------------------------- |
+| `children` | renderable content | Yes      | Two children — `[0]` → narrow slot, `[1]` → wide slot |
 
 ### NarrowWideDetails
 
-| Prop                  | Type       | Required | Description                                                               |
+| Name                  | Type       | Required | Description                                                               |
 | --------------------- | ---------- | -------- | ------------------------------------------------------------------------- |
 | `label`               | `string`   | Yes      | Section label for FieldGroup                                              |
 | `showLabel`           | `boolean`  | No       | Whether to show the label. Default `true`                                 |
 | `showHighlightedData` | `boolean`  | No       | Whether to render highlighted data fields above children. Default `false` |
 | `getPConnect`         | `function` | Yes      | PConnect getter                                                           |
 
-## Component Skeletons
+## Implementation Structure
 
 ### NarrowWide (core)
 
-```typescript
-import type { PropsWithChildren, ReactElement } from 'react';
-import type { PConnProps } from '@pega/sdk-react';
-import './NarrowWide.css';
-
-interface NarrowWideProps extends PConnProps {
-  a: any; b: any; title?: string; cols?: string; icon?: string;
-}
-
-export default function NarrowWide(props: PropsWithChildren<NarrowWideProps>) {
-  const { a, b, children } = props;
-  return (
-    <>
-      {children && (children as ReactElement[]).length === 2 && (
-        <div className="psdk-narrow-wide-column">
-          <div className="psdk-narrow-column-column">{children[0]}</div>
-          <div className="psdk-wide-column-column">{children[1]}</div>
-        </div>
-      )}
-      {a && b && (
-        <div className="psdk-narrow-wide-column">
-          <div className="psdk-narrow-column-column">{a}</div>
-          <div className="psdk-wide-column-column">{b}</div>
-        </div>
-      )}
-    </>
-  );
-}
-```
+**Module Setup:** Define the input contract as an extension of the project's base component interface, adding `a`, `b`, optional `title`, optional `cols`, and optional `icon` fields, and accepting children via the framework's content projection mechanism. Import a companion stylesheet for the layout CSS classes.
+
+**Main Component Logic** — steps in order:
+
+1. Receive `a`, `b`, and `children` from inputs.
+2. When `children` is present and has exactly 2 items, render a `.psdk-narrow-wide-column` container containing a `.psdk-narrow-column-column` element with `children[0]` and a `.psdk-wide-column-column` element with `children[1]`.
+3. When both `a` and `b` are present, render the same `.psdk-narrow-wide-column` / `.psdk-narrow-column-column` / `.psdk-wide-column-column` structure but with `a` and `b` in place of the children.
+4. Both render branches can coexist in the returned fragment — whichever condition is true determines what actually renders.
 
 ### NarrowWidePage
 
-```typescript
-const NarrowWide = getComponentFromRegistry('NarrowWide');
-const { children, title, templateCol = '1fr 1fr', icon = '' } = props;
-return <NarrowWide a={children[0]} b={children[1]} title={title}
-  cols={templateCol} icon={icon?.replace('pi pi-', '')} />;
-```
+A wrapper that forwards children as `a`/`b` slot inputs: resolve `NarrowWide` from the project's component registry; receive `children`, `title`, `templateCol` (default `'1fr 1fr'`), and `icon` (default `''`) from inputs; render `NarrowWide` with `a` set to `children[0]`, `b` set to `children[1]`, `title`, `cols` set to `templateCol`, and `icon` with the `'pi pi-'` prefix stripped.
 
 ### NarrowWideForm
 
-```typescript
-const { children } = props;
-return children?.length === 2 ? (
-  <div className="psdk-narrow-wide-column">
-    <div className="psdk-narrow-column-column">{children[0]}</div>
-    <div className="psdk-wide-column-column">{children[1]}</div>
-  </div>
-) : null;
-```
+A simplified wrapper using only `children` (no `a`/`b` slots, no title/icon): receive `children` from inputs; when `children.length === 2`, render the same `.psdk-narrow-wide-column` structure as the core component (children[0] in the narrow column, children[1] in the wide column); otherwise render nothing.
 
 ### NarrowWideDetails
 
-Same pattern as `Details` but uses `COLUMN_WIDTHS = [4, 8]`:
-
-```typescript
-const COLUMN_WIDTHS = [4, 8];
-// highlighted data: <GridItem xs={COLUMN_WIDTHS[i]}>
-// regular children: <GridItem xs={COLUMN_WIDTHS[i]}>
-// Wrap in FieldGroup, setInheritedProp DISPLAY_ONLY + readOnly
-```
+Same pattern as `Details` (see [`Details.md`](./Details.md)) but uses `COLUMN_WIDTHS = [4, 8]` for its grid items instead of `[12]` — highlighted data fields and regular children are both laid out with the column widths array, and the whole thing is wrapped in a `FieldGroup` with `displayMode` and `readOnly` forced via `setInheritedProp`.
 
 ## Behavioral Contract
 
@@ -139,20 +98,20 @@ const COLUMN_WIDTHS = [4, 8];
 
 ### NarrowWidePage
 
-1. Extract `childrenToRender = children as ReactElement[]`.
-2. Retrieve `NarrowWide` from the component registry.
-3. Render `<NarrowWide a={childrenToRender[0]} b={childrenToRender[1]} title={title} cols={templateCol} icon={icon?.replace('pi pi-', '')} />`.
+1. Extract the children array from the content projection.
+2. Resolve `NarrowWide` from the project's component registry.
+3. Render `NarrowWide` with `a` set to `children[0]`, `b` set to `children[1]`, `title`, `cols` set to `templateCol`, and `icon` with the `'pi pi-'` prefix stripped.
 
 ### NarrowWideForm
 
 1. Render exactly as `NarrowWide` with `children` path — checks `children.length === 2`, renders narrow/wide slots.
-2. Does not support `a`/`b` props.
+2. Does not support `a`/`b` slot inputs.
 
 ### NarrowWideDetails
 
 1. Call `getPConnect().getInheritedProps()` and merge with `{ label, showLabel }` for `propsToUse`.
 2. Set `getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY')` and `setInheritedProp('readOnly', true)`.
-3. Map `getPConnect().getChildren()` → `createElement(PConnectComponent, { ...configObject, key: index })`.
+3. Map `getPConnect().getChildren()` → render each child using the project's PConnect bridge utility with the config object and a unique key.
 4. If `showHighlightedData` is true, read `getRawMetadata().config.highlightedData`, set each field's `displayMode = 'STACKED_LARGE_VAL'`, mark `pyStatusWork` fields as `type='TextInput', displayAsStatus=true`, and create components via `getPConnect().createComponent(field, '', 0, {})`.
 5. Wrap everything in `<FieldGroup name={theName}>` where `theName = propsToUse.showLabel && propsToUse.label ? propsToUse.label : ''`.
 6. Layout: highlighted data in `Grid size={{ xs: COLUMN_WIDTHS[i] }}` where `COLUMN_WIDTHS = [4, 8]`, then children in `Grid size={{ xs: 12 }}` rows.
@@ -180,30 +139,23 @@ Derived from `NarrowWide.css`:
 
 - `NarrowWide` supports both `children` and `a`/`b` slot patterns — check `children` length first.
 - `NarrowWideDetails` highlighted data grid uses `[4, 8]` column widths (narrow left, wide right for STACKED_LARGE_VAL fields).
-- `NarrowWideDetails` reads `theName` from `propsToUse` (which merges inherited props) — the `label` prop alone may be overridden by inherited props.
+- `NarrowWideDetails` reads `theName` from `propsToUse` (which merges inherited inputs) — the `label` input alone may be overridden by inherited inputs.
 - Icon cleanup in `NarrowWidePage`: strip `'pi pi-'` prefix from the icon string before passing to `NarrowWide`.
 
 ## Dependencies
 
-- `NarrowWidePage`: `getComponentFromRegistry` from `@pega/sdk-react`
-- `NarrowWideDetails`: `getComponentFromRegistry('FieldGroup')`, `PConnectComponent` from `@pega/sdk-react`
+- `NarrowWidePage`: the project's component registry — to resolve `NarrowWide` at runtime.
+- `NarrowWideDetails`: the project's component registry (to resolve `FieldGroup`) and the project's PConnect bridge utility.
 
 ## Design System Mapping
 
 **UI control type:** Asymmetric two-column layout (sidebar + main content).
 
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                                            |
-| ------------------ | -------------------------------------------------------------------------------- |
-| Default (CSS only) | CSS Grid `grid-template-columns: 1fr 2fr; gap: 1rem`                             |
-| MUI                | `<Grid container><Grid size={{ xs: 12, md: 4 }}><Grid size={{ xs: 12, md: 8 }}>` |
-| Ant Design         | `<Row gutter={16}><Col xs={24} md={8}><Col xs={24} md={16}>`                     |
-| Chakra UI          | `<Grid templateColumns={{ base: '1fr', md: '1fr 2fr' }} gap={4}>`                |
-| Shadcn/ui          | Tailwind `grid grid-cols-1 md:grid-cols-[1fr_2fr] gap-4`                         |
-
-When implementing in a specific design system:
+When implementing in a specific design system, map the following:
 
-- Narrow column ≈ 33% width (1fr of 3fr total)
-- Wide column ≈ 67% width (2fr of 3fr total)
-- `NarrowWideDetails` always forces DISPLAY_ONLY + readOnly on children
+- **Two-column grid** → use the DS's grid with `1fr 2fr` column ratio (narrow left, wide right)
+- **Mobile** → collapse to single column (`1fr`)
+- **NarrowWideDetails** → forces DISPLAY_ONLY + readOnly on children via inherited inputs
+- **NarrowWidePage** → resolve via the project's component registry and delegate
+- **Narrow column** ≈ 33% width (1fr of 3fr total)
+- **Wide column** ≈ 67% width (2fr of 3fr total)

package/templates/react-sdk-reference/.ai-common/skills/template-skills/OneColumn.md

@@ -11,8 +11,8 @@ Single-column layout template that stacks all children in a full-width column.
 Renders all children stacked vertically in a single full-width column. Three closely related sub-variants:
 
 - **`OneColumn`** — core layout with internal grid and column style
-- **`OneColumnPage`** — thin wrapper that delegates to `OneColumn` via the component registry
-- **`OneColumnTab`** — minimal pass-through wrapper for tab context (`<div id='OneColumnTab'>`)
+- **`OneColumnPage`** — thin wrapper that delegates to `OneColumn` via the project's component registry
+- **`OneColumnTab`** — minimal pass-through wrapper for tab context (a plain container element with id `OneColumnTab`)
 
 ## Pega Metadata
 
@@ -22,81 +22,55 @@ Renders all children stacked vertically in a single full-width column. Three clo
 | OneColumnPage | `OneColumnPage`  |
 | OneColumnTab  | `OneColumnTab`   |
 
-All extend `PConnProps`. Children are received as React `children`.
+All extend the project's base component interface. Children are received via the framework's content projection mechanism.
 
-## Component Skeletons
+## Implementation Structure
 
 ### OneColumn (core)
 
-```typescript
-import type { PropsWithChildren, ReactElement } from 'react';
-import type { PConnProps } from '@pega/sdk-react';
-
-export default function OneColumn(props: PropsWithChildren<PConnProps>) {
-  const { children } = props;
-  return (
-    <GridContainer spacing={2}>
-      <GridItem xs={12} className="col-styles">
-        {(children as ReactElement[]).map(child => child)}
-      </GridItem>
-    </GridContainer>
-  );
-}
-// CSS: .col-styles { display: grid; gap: 1rem; align-content: baseline; }
-```
+**Module Setup:** Define the input contract as an extension of the project's base component interface, accepting children.
+
+**Main Component Logic** — steps in order:
+
+1. Receive `children` from inputs.
+2. Render a grid container with spacing of 2 units (≈ 16px) containing a single grid item at full width (12 of 12 columns) with a column-styles class, which iterates over `children` and renders each one unchanged.
+
+**Visual-only styling notes:** apply a column-styles class with `display: grid; gap: 1rem; align-content: baseline`.
 
 ### OneColumnPage
 
-```typescript
-const OneColumn = getComponentFromRegistry('OneColumn');
-return <OneColumn {...props} />;
-```
+A thin pass-through wrapper: resolve `OneColumn` from the project's component registry and render it forwarding all inputs.
 
 ### OneColumnTab
 
-```typescript
-return <div id="OneColumnTab">{children}</div>;
-```
+A minimal wrapper that renders children inside a plain container element with `id="OneColumnTab"` — no grid or column styles applied.
 
-## Props
+## Inputs
 
-| Prop       | Type          | Required | Description                                         |
-| ---------- | ------------- | -------- | --------------------------------------------------- |
-| `children` | `ReactNode[]` | Yes      | One or more children to render in the single column |
+| Name       | Type               | Required | Description                                         |
+| ---------- | ------------------ | -------- | --------------------------------------------------- |
+| `children` | renderable content | Yes      | One or more children to render in the single column |
 
 ## Sub-Variants
 
 ### OneColumnPage
 
-Thin pass-through wrapper. Retrieves `OneColumn` from the component registry and renders with all props forwarded:
-
-```typescript
-const OneColumn = getComponentFromRegistry('OneColumn');
-return <OneColumn {...props} />;
-```
+A thin pass-through wrapper: resolve `OneColumn` from the project's component registry and render it forwarding all inputs.
 
 ### OneColumnTab
 
-Minimal wrapper — renders children in a plain `<div>` with `id='OneColumnTab'`:
-
-```typescript
-return <div id='OneColumnTab'>{children}</div>;
-```
-
-No grid or column styles applied. Used purely as a slot container inside tab panels.
+Minimal wrapper — renders children in a plain container element with `id='OneColumnTab'` and no grid or column styles applied. Used purely as a slot container inside tab panels.
 
 ## Behavioral Contract
 
-1. Render a Grid container with `spacing={2}`.
-2. Render a single inner Grid at `size={{ xs: 12 }}` with `colStyles` applied.
-3. Map over all `children` and render each child.
-4. `OneColumnPage` delegates all rendering to `OneColumn` from the registry.
-5. `OneColumnTab` renders children in a plain `<div>` — no Grid, no styles.
+1. Render a grid container with spacing of 2 units.
+2. Render a single inner grid item at full width (12 of 12 columns) with column-styles applied.
+3. Iterate over all `children` and render each child.
+4. `OneColumnPage` delegates all rendering to `OneColumn` from the project's component registry.
+5. `OneColumnTab` renders children in a plain container element — no grid, no styles.
 
 ## Visual Specifications
 
-Derived from `OneColumn.tsx` makeStyles:
-
 ### Column Style
 
 | Property      | Value                                 |
@@ -115,34 +89,26 @@ Derived from `OneColumn.tsx` makeStyles:
 
 - Column: `display: grid; gap: 1rem; align-content: baseline; width: 100%`.
 - Outer container: `display: grid; grid-template-columns: 1fr; gap: 16px`.
-- `OneColumnTab`: just `<div>` with no special styling.
+- `OneColumnTab`: just a plain container with no special styling.
 
 ## Edge Cases & Special Logic
 
-- `OneColumn` maps over all children (not just first/second) — supports any number of children.
+- `OneColumn` iterates over all children (not just first/second) — supports any number of children.
 - `OneColumnPage` uses the registry — if an override exists for `OneColumn`, it will be used.
-- `OneColumnTab` does NOT apply the `colStyles` grid — it is intentionally simpler.
-
-## Dependencies
-
-- `OneColumnPage`: `getComponentFromRegistry` from `@pega/sdk-react`
-- `OneColumn` / `OneColumnTab`: no special dependencies
+- `OneColumnTab` does NOT apply the column-styles grid — it is intentionally simpler.
 
 ## Design System Mapping
 
-**UI control type:** Single full-width column layout.
+**UI control type:** Single-column vertical stack layout.
 
-Listed design systems are examples only.
+When implementing in a specific design system, map the following:
 
-| Design System      | Recommended Component                                    |
-| ------------------ | -------------------------------------------------------- |
-| Default (CSS only) | `<div style="display:grid;gap:1rem;">` wrapping children |
-| MUI                | `<Grid container spacing={2}><Grid size={{ xs: 12 }}>`   |
-| Ant Design         | `<Row><Col span={24}>`                                   |
-| Chakra UI          | `<Stack spacing={4}>` or `<Grid templateColumns='1fr'>`  |
-| Shadcn/ui          | Tailwind `flex flex-col gap-4`                           |
+- **Grid container** → use the DS's grid/layout component with a single full-width column
+- **Column style** → apply `display: grid; gap: 1rem; align-content: baseline` to the inner column
+- **OneColumnPage** → resolve via the project's component registry and delegate
+- **OneColumnTab** → render a plain container element (no styling)
 
-When implementing in a specific design system:
+## Dependencies
 
-- All children render in a single column, top-aligned
-- `OneColumnTab` variant is a minimal `<div>` container with no layout styling
+- `OneColumnPage`: the project's component registry — to resolve the `OneColumn` component at runtime.
+- `OneColumn` / `OneColumnTab`: no special dependencies.