@pega/sdk 0.0.5 → 0.0.7

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

@@ -8,112 +8,66 @@ Read-only single-column details template. Renders all child fields in DISPLAY_ON
 
 ## Component Purpose
 
-Renders a labeled group of read-only fields in a single-column vertical stack. Forces all children into `DISPLAY_ONLY` + `readOnly` mode via inherited props. Optionally renders a "highlighted data" banner row at the top (full-width, stacked-large-val display).
+Renders a labeled group of read-only fields in a single-column vertical stack. Forces all children into `DISPLAY_ONLY` + `readOnly` mode via inherited configuration. Optionally renders a "highlighted data" banner row at the top (full-width, stacked-large-val display).
 
 ## Pega Metadata
 
-- **Registration key:** `Details` (in `component-map.ts`)
+- **Registration key:** `Details` (in the project's component map)
 - **Category:** Display template
-- **Extends:** `PConnProps`
+- **Extends:** the project's base component interface
 
-## Props
+## Inputs
 
-| Prop                  | Type       | Required | Description                                         |
+| Input                 | Type       | Required | Description                                         |
 | --------------------- | ---------- | -------- | --------------------------------------------------- |
 | `label`               | `string`   | Yes      | Section heading for the FieldGroup wrapper          |
 | `showLabel`           | `boolean`  | Yes      | Whether to show the section label                   |
 | `showHighlightedData` | `boolean`  | Yes      | Whether to render highlighted fields above children |
 | `getPConnect`         | `function` | Yes      | PConnect getter                                     |
 
-## Component Skeleton
-
-```typescript
-import { createElement } from 'react';
-import { getComponentFromRegistry, PConnectComponent } from '@pega/sdk-react';
-import type { PConnProps } from '@pega/sdk-react';
-
-interface DetailsProps extends PConnProps {
-  label: string;
-  showLabel: boolean;
-  showHighlightedData: boolean;
-}
-
-export default function Details(props: DetailsProps) {
-  const FieldGroup = getComponentFromRegistry('FieldGroup');
-  const { label, showLabel, getPConnect, showHighlightedData } = props;
-
-  // 1. Inherited props merge
-  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
-
-  // 2. Force all children into display-only mode (side effect)
-  getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
-  getPConnect().setInheritedProp('readOnly', true);
-
-  // 3. Create children from PConnect
-  const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
-    createElement(PConnectComponent, { ...configObject, key: index.toString() })
-  );
-
-  // 4. Highlighted data (optional)
-  let highlightedDataArr = [];
-  if (showHighlightedData) {
-    const { highlightedData = [] } = (getPConnect().getRawMetadata() as any).config;
-    highlightedDataArr = highlightedData.map((field) => {
-      field.config.displayMode = 'STACKED_LARGE_VAL';
-      if (field.config.value === '@P .pyStatusWork') {
-        field.type = 'TextInput';
-        field.config.displayAsStatus = true;
-      }
-      return getPConnect().createComponent(field, '', 0, {});
-    });
-  }
-
-  // 5. Render: FieldGroup > highlighted grid (xs:12) + children grid (xs:12)
-  return (
-    <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
-      {showHighlightedData && highlightedDataArr.length > 0 && (
-        <GridContainer spacing={1} style={{ padding: '0 0 1em' }}>
-          {highlightedDataArr.map((child, i) => <GridItem xs={12} key={`hf-${i+1}`}>{child}</GridItem>)}
-        </GridContainer>
-      )}
-      <GridContainer spacing={1}>
-        {children.map((child, i) => <GridItem xs={12} key={`r-${i+1}`}>{child}</GridItem>)}
-      </GridContainer>
-    </FieldGroup>
-  );
-}
-```
+## Implementation Structure
+
+**Module Setup:** Obtain the project's PConnect bridge utility (for rendering child PConnect nodes) and the project's component registry lookup function. The component accepts `label` (string), `showLabel` (boolean), `showHighlightedData` (boolean), and `getPConnect` (function) as its inputs.
+
+**Main Component Logic** — steps in order:
+
+1. Retrieve `FieldGroup` from the project's component registry; receive `label`, `showLabel`, `getPConnect`, and `showHighlightedData` from inputs.
+2. Merge inherited configuration: `propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() }` (inherited values can override the direct inputs).
+3. Force all children into display-only mode as a side effect: call `getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY')` and `getPConnect().setInheritedProp('readOnly', true)`.
+4. Build the children array: map each entry of `getPConnect().getChildren()` to a renderable PConnect bridge element using the config object and a unique key.
+5. If `showHighlightedData` is true, read `highlightedData` (default empty array) from `getPConnect().getRawMetadata().config`, and for each field: set `field.config.displayMode = 'STACKED_LARGE_VAL'`; if `field.config.value === '@P .pyStatusWork'`, set `field.type = 'TextInput'` and `field.config.displayAsStatus = true`; then create the component via `getPConnect().createComponent(field, '', 0, {})` and collect the results into `highlightedDataArr`.
+6. Render a FieldGroup named `propsToUse.showLabel ? propsToUse.label : ''`, containing (when `showHighlightedData` is true and non-empty) a single-column grid container with spacing and bottom padding holding one full-width grid item per highlighted field, followed by a second single-column grid container with spacing holding one full-width grid item per regular child.
 
 ## Behavioral Contract
 
-1. **Inherited props merge:** `propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() }` — inherited props can override label/showLabel.
+1. **Inherited inputs merge:** `propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() }` — inherited values can override label/showLabel.
 2. **Force display mode:** Call `getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY')` and `getPConnect().setInheritedProp('readOnly', true)` — ensures all child fields render in read-only display mode.
-3. **Render children:** Map `getPConnect().getChildren()` → `createElement(PConnectComponent, { ...configObject, key: index.toString() })`.
+3. **Render children:** Map `getPConnect().getChildren()` → renderable content via the project's PConnect bridge utility, passing each config object with a unique key.
 4. **Highlighted data (when `showHighlightedData` is true):**
    a. Read `getPConnect().getRawMetadata().config.highlightedData` (defaults to `[]`).
    b. For each highlighted field, set `field.config.displayMode = 'STACKED_LARGE_VAL'`.
    c. For fields with `field.config.value === '@P .pyStatusWork'`: set `field.type = 'TextInput'` and `field.config.displayAsStatus = true`.
    d. Create each field via `getPConnect().createComponent(field, '', 0, {})`.
 5. **Layout:**
-   - Wrap all content in `<FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>`.
-   - Highlighted data: `<Grid container spacing={1} style={{ padding: '0 0 1em' }}>` with each child at `Grid size={{ xs: 12 }}`.
-   - Regular children: `<Grid container spacing={1}>` with each child at `Grid size={{ xs: 12 }}`.
+   - Wrap all content in a FieldGroup with name set to `propsToUse.showLabel ? propsToUse.label : ''`.
+   - Highlighted data: single-column grid container with ~8px gap and bottom padding (~1rem below).
+   - Regular children: single-column grid container with ~8px gap.
 
 ## Visual Specifications
 
 ### Overall Layout
 
-| Property                 | Value                                                    |
-| ------------------------ | -------------------------------------------------------- |
-| Column structure         | Single column (xs: 12 for each child)                    |
-| Inner spacing            | Grid spacing 1 (≈ 8px between fields)                    |
-| Highlighted data padding | `padding: 0 0 1em` (space below before regular children) |
+| Property                 | Value                                        |
+| ------------------------ | -------------------------------------------- |
+| Column structure         | Single column (full width for each child)    |
+| Inner spacing            | ~8px between fields                          |
+| Highlighted data padding | ~1rem bottom padding before regular children |
 
 **CSS-only implementation notes:**
 
 - Outer wrapper: `FieldGroup` component (see `FieldGroupDSE.md` for styles).
-- Children grid: `display: grid; grid-template-columns: 1fr; gap: 8px`.
-- Highlighted data row: `display: grid; grid-template-columns: 1fr; gap: 8px; padding-bottom: 1rem`.
+- Children grid: single-column layout with ~8px gap between items.
+- Highlighted data row: single-column layout with ~8px gap and ~1rem bottom padding.
 - Fields inside highlighted data use `STACKED_LARGE_VAL` display (larger value typography).
 
 ## Edge Cases & Special Logic
@@ -125,25 +79,18 @@ export default function Details(props: DetailsProps) {
 
 ## Dependencies
 
-- `createElement` from React
-- `PConnectComponent`, `getComponentFromRegistry('FieldGroup')` from `@pega/sdk-react`
+- The project's PConnect bridge utility (for rendering child PConnect nodes)
+- The project's component registry (to retrieve `FieldGroup`)
 
 ## Design System Mapping
 
 **UI control type:** Read-only labeled section with vertically stacked fields.
 
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                                    |
-| ------------------ | ------------------------------------------------------------------------ |
-| Default (CSS only) | `<fieldset>/<legend>` wrapper with CSS grid single column                |
-| MUI                | `<Grid container spacing={1}>` with `<Grid size={{ xs: 12 }}>` per field |
-| Ant Design         | `<Card title={label}>` with `<Row><Col span={24}>` per field             |
-| Chakra UI          | `<Box>` with heading + `<Stack spacing={2}>`                             |
-| Shadcn/ui          | `<Card><CardHeader><CardContent>` with stacked field items               |
-
-When implementing in a specific design system:
+When implementing in a specific design system, map the following:
 
-- All children must have `displayMode='DISPLAY_ONLY'` and `readOnly=true` inherited
-- Highlighted data uses `STACKED_LARGE_VAL` — larger/bolder value display
-- `showLabel=false` hides the section heading entirely
+- The outer wrapper is a labeled group container (e.g., a fieldset/legend, a card with a title header, or a boxed section with a heading). Use whatever grouped-section primitive your design system provides.
+- Each child occupies the full width of the container (single column). Use your design system's grid or stack primitive with a single column and ~8px spacing between items.
+- Highlighted data renders in the same single-column layout with additional bottom padding (~1rem) separating it from regular children.
+- All children must have `displayMode='DISPLAY_ONLY'` and `readOnly=true` inherited.
+- Highlighted data uses `STACKED_LARGE_VAL` — larger/bolder value display.
+- `showLabel=false` hides the section heading entirely.

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

@@ -8,96 +8,51 @@ Read-only tabbed details template. Renders sub-tabs with deferred-loaded tab con
 
 ## Component Purpose
 
-Renders a tabbed layout for a details region. Each tab contains display-only content loaded on demand. Uses the same `tabUtils` as `SubTabs` but is scoped to a details/display context. Optionally shows a section heading above the tabs.
+Renders a tabbed layout for a details region. Each tab contains display-only content loaded on demand. Uses the same tab utilities as `SubTabs` but is scoped to a details/display context. Optionally shows a section heading above the tabs.
 
 ## Pega Metadata
 
-- **Registration key:** `DetailsSubTabs` (in `component-map.ts`)
+- **Registration key:** `DetailsSubTabs` (in the project's component map)
 - **Category:** Navigation / Display template
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop          | Type          | Required | Description                                                       |
-| ------------- | ------------- | -------- | ----------------------------------------------------------------- |
-| `children`    | `ReactNode[]` | Yes      | Tab content — `children[0]` is the deferred-loaded tabs container |
-| `label`       | `string`      | Yes      | Section heading shown above tabs when `showLabel` is true         |
-| `showLabel`   | `boolean`     | No       | Whether to show the section heading. Default `true`               |
-| `getPConnect` | `function`    | Yes      | PConnect getter                                                   |
-
-## Component Skeleton
-
-```typescript
-import { Children, type PropsWithChildren, useEffect, useState } from 'react';
-import { getTransientTabs, getVisibleTabs, tabClick } from '../../SubTabs/tabUtils';
-import type { PConnProps } from '@pega/sdk-react';
-
-interface DetailsSubTabsProps extends PConnProps {
-  showLabel: boolean;
-  label: string;
-}
-
-export default function DetailsSubTabs(props: PropsWithChildren<DetailsSubTabsProps>) {
-  const { children = [], label, showLabel = true, getPConnect } = props;
-  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
-
-  // 1. Extract deferred tabs from first child
-  const deferLoadedTabs = Children.toArray(children)[0];
-  let availableTabs = [];
-
-  // 2. Compute visible tabs on mount
-  useEffect(() => {
-    availableTabs = getVisibleTabs(deferLoadedTabs, 'detailsSubTabs');
-  }, [availableTabs]);
-
-  // 3. Tab state
-  const [currentTabId, setCurrentTabId] = useState('0');
-  const [tabItems, setTabitem] = useState([]);
-
-  // 4. Update tab items when currentTabId changes
-  useEffect(() => {
-    const tempTabItems = getTransientTabs(availableTabs, currentTabId, tabItems);
-    setTabitem(tempTabItems);
-  }, [currentTabId]);
-
-  // 5. Tab click handler
-  const handleTabClick = (id, index: string) => {
-    setCurrentTabId(index);
-    tabClick(index, availableTabs, currentTabId, setCurrentTabId, tabItems);
-  };
-
-  // 6. Render: optional heading + TabContext + Tabs + TabPanels
-  return (
-    <>
-      {propsToUse.showLabel && <h3>{propsToUse.label}</h3>}
-      <TabContext value={currentTabId.toString()}>
-        <TabBar onChange={handleTabClick} value={currentTabId}>
-          {tabItems.map(tab => <Tab key={tab.id} label={tab.name} value={tab.id} />)}
-        </TabBar>
-        {tabItems.map(tab => (
-          <TabPanel key={tab.id} value={tab.id} tabIndex={+tab.id}>
-            {tab.content || 'No content exists'}
-          </TabPanel>
-        ))}
-      </TabContext>
-    </>
-  );
-}
-```
+- **Extends:** the project's base component interface
+
+## Inputs
+
+| Name          | Type               | Required | Description                                                       |
+| ------------- | ------------------ | -------- | ----------------------------------------------------------------- |
+| `children`    | renderable content | Yes      | Tab content — `children[0]` is the deferred-loaded tabs container |
+| `label`       | `string`           | Yes      | Section heading shown above tabs when `showLabel` is true         |
+| `showLabel`   | `boolean`          | No       | Whether to show the section heading. Default `true`               |
+| `getPConnect` | `function`         | Yes      | PConnect getter                                                   |
+
+## Implementation Structure
+
+**Module Setup:** Obtain the shared tab utilities (`getVisibleTabs`, `getTransientTabs`, `tabClick`) from the project's SubTabs tab-utility module. These helpers are framework-independent and work with any rendering approach.
+
+**Main Component Logic** — steps in order:
+
+1. Receive inputs: `children` (default empty array), `label`, `showLabel` (default `true`), and `getPConnect`.
+2. Merge inherited display settings: `propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() }`.
+3. Extract the deferred tabs container from the first child element; initialize `availableTabs` to an empty array.
+4. On mount (lifecycle effect), compute `availableTabs` via `getVisibleTabs(deferLoadedTabs, 'detailsSubTabs')`.
+5. Declare local state: `currentTabId` (string, initialized to `'0'`) and `tabItems` (array, initialized empty).
+6. In a lifecycle effect keyed on `currentTabId`, recompute `tabItems` via `getTransientTabs(availableTabs, currentTabId, tabItems)`.
+7. Define a tab-click handler that sets `currentTabId` to the clicked index and calls `tabClick(index, availableTabs, currentTabId, setCurrentTabId, tabItems)`.
+8. Render: an optional heading (shown when `propsToUse.showLabel` is true, displaying `propsToUse.label`), followed by a tab context wrapping a tab bar (one tab per `tabItems` entry, labeled `tab.name`) and a set of tab panels (each showing `tab.content` or a "No content exists" fallback).
 
 ## Behavioral Contract
 
-1. **Inherited props merge:** `propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() }`.
-2. **Extract deferred tabs:** `deferLoadedTabs = Children.toArray(children)[0]`.
+1. **Inherited settings merge:** `propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() }`.
+2. **Extract deferred tabs:** `deferLoadedTabs` = first element from children array.
 3. **Compute visible tabs:** On mount and when `availableTabs` changes, call `getVisibleTabs(deferLoadedTabs, 'detailsSubTabs')` to get the filtered visible tab list.
-4. **State:** `currentTabId` (string, default `'0'`), `tabItems` (array of `{ id, name, content }` objects).
+4. **Local state:** `currentTabId` (string, default `'0'`), `tabItems` (array of `{ id, name, content }` objects).
 5. **Transient tabs:** On `currentTabId` change, call `getTransientTabs(availableTabs, currentTabId, tabItems)` and update `tabItems` state.
-6. **Tab click handler:** `handleTabClick(id, index)` → calls `setCurrentTabId(index)` and `tabClick(index, availableTabs, currentTabId, setCurrentTabId, tabItems)` from `tabUtils`.
+6. **Tab click handler:** `handleTabClick(id, index)` → sets `currentTabId` to `index` and calls `tabClick(index, availableTabs, currentTabId, setCurrentTabId, tabItems)` from the tab utilities.
 7. **Render:**
-   - If `propsToUse.showLabel`, render `<h3>{propsToUse.label}</h3>`.
-   - Render `<TabContext value={currentTabId}>`.
-   - Render `<Tabs onChange={handleTabClick} value={currentTabId}>` with one `<Tab key={tab.id} label={tab.name} value={tab.id} />` per `tabItems` entry.
-   - Render one `<TabPanel key={tab.id} value={tab.id} tabIndex={+tab.id}>` per `tabItems` entry containing `tab.content || 'No content exists'`.
+   - If `propsToUse.showLabel`, render a heading with `propsToUse.label`.
+   - Render a tab context bound to `currentTabId`.
+   - Render a tab bar with one tab per `tabItems` entry (keyed by `tab.id`, labeled `tab.name`, valued `tab.id`).
+   - Render one tab panel per `tabItems` entry containing `tab.content` or the fallback text "No content exists".
 
 ## Visual Specifications
 
@@ -105,7 +60,7 @@ export default function DetailsSubTabs(props: PropsWithChildren<DetailsSubTabsPr
 
 | Property        | Value                           |
 | --------------- | ------------------------------- |
-| Tag             | `<h3>`                          |
+| Semantic level  | Third-level heading (`<h3>`)    |
 | Shown only when | `propsToUse.showLabel === true` |
 
 ### Tab Bar
@@ -125,33 +80,24 @@ export default function DetailsSubTabs(props: PropsWithChildren<DetailsSubTabsPr
 
 ## Edge Cases & Special Logic
 
-- `availableTabs` is computed inside `useEffect` (not via useState) — this means the initial render uses an empty array, and tabs populate after mount.
-- The `useEffect` on `[availableTabs]` has a stale closure issue in the reference implementation — use a `useRef` or `useMemo` for production implementations if needed.
-- `tabItems` starts as `[]` — the tab bar renders empty until the first `currentTabId` change triggers `getTransientTabs`.
-- `propsToUse` label/showLabel may be overridden by inherited props — always use `propsToUse` for the label, not raw `label`/`showLabel` props.
+- `availableTabs` is computed inside a lifecycle effect (not immediately) — this means the initial render uses an empty array, and tabs populate after mount.
+- The lifecycle effect watching `availableTabs` has a stale closure issue in the reference implementation — use an instance reference or memoized computation for production implementations if needed.
+- `tabItems` starts as an empty array — the tab bar renders empty until the first `currentTabId` change triggers `getTransientTabs`.
+- `propsToUse` label/showLabel may be overridden by inherited settings — always use `propsToUse` for the label, not the raw inputs.
 
 ## Dependencies
 
-- `getTransientTabs`, `getVisibleTabs`, `tabClick` from `../../SubTabs/tabUtils`
-- `TabContext`, `TabPanel` from `@mui/lab`
-- `Tab`, `Tabs` from `@mui/material`
+- `getTransientTabs`, `getVisibleTabs`, `tabClick` from the project's SubTabs tab-utility module (framework-independent helpers)
 
 ## Design System Mapping
 
 **UI control type:** Tabbed section container for read-only details content.
 
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                    |
-| ------------------ | -------------------------------------------------------- |
-| Default (CSS only) | Custom tab bar with CSS underline indicator              |
-| MUI                | `<TabContext>` + `<Tabs>` + `<TabPanel>` from `@mui/lab` |
-| Ant Design         | `<Tabs>` with `items` array                              |
-| Chakra UI          | `<Tabs>` + `<TabList>` + `<TabPanels>`                   |
-| Shadcn/ui          | `<Tabs>` + `<TabsList>` + `<TabsContent>`                |
-
-When implementing in a specific design system:
+When implementing in a specific design system, map the following:
 
-- `getVisibleTabs` and `getTransientTabs` are tabUtils helpers — use them regardless of UI library
+- A tab context/wrapper that tracks the active tab
+- A tab bar with clickable tab items
+- Tab panels that show/hide based on active selection
+- `getVisibleTabs` and `getTransientTabs` are tab-utility helpers — use them regardless of UI library
 - Tab content is lazily loaded via the transient tab pattern
-- Optional `<h3>` heading above the tab bar (controlled by `showLabel`)
+- Optional heading above the tab bar (controlled by `showLabel`)

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

@@ -8,54 +8,55 @@ Read-only three-column details template. Renders child fields in DISPLAY_ONLY mo
 
 ## Component Purpose
 
-Identical to `Details` and `DetailsTwoColumn` in all behavior except children are distributed into a **three-column grid** (`xs: 4` per child). Used in wide details regions where the design calls for three equal columns of fields.
+Identical to `Details` and `DetailsTwoColumn` in all behavior except children are distributed into a **three-column grid** (one-third width per child). Used in wide details regions where the design calls for three equal columns of fields.
 
 > The implementation is nearly identical to `Details`. See `Details.md` for full pattern descriptions. Only the column width differs.
 
 ## Pega Metadata
 
-- **Registration key:** `DetailsThreeColumn` (in `component-map.ts`)
+- **Registration key:** `DetailsThreeColumn` (in the project's component map)
 - **Category:** Display template
-- **Extends:** `PConnProps`
+- **Extends:** the project's base component interface
 
-## Props
+## Inputs
 
-| Prop                  | Type       | Required | Description                                                          |
+| Name                  | Type       | Required | Description                                                          |
 | --------------------- | ---------- | -------- | -------------------------------------------------------------------- |
 | `label`               | `string`   | Yes      | Section heading for the FieldGroup wrapper                           |
 | `showLabel`           | `boolean`  | No       | Whether to show the section label. Default `true`                    |
 | `showHighlightedData` | `boolean`  | No       | Whether to render highlighted fields above children. Default `false` |
 | `getPConnect`         | `function` | Yes      | PConnect getter                                                      |
 
-## Component Skeleton
+## Implementation Structure
 
-Identical to `Details` skeleton except grid items use `xs={4}` (three columns).
+**Module Setup:** Obtain the FieldGroup component from the project's component registry. Access the project's bridge component for rendering child configuration objects as live components.
 
-```typescript
-// Same as Details — only this line differs in the grid:
-// Highlighted data: <GridItem xs={4} key={...}>{child}</GridItem>
-// Regular children: <GridItem xs={4} key={...}>{child}</GridItem>
-```
+**Main Component Logic** — steps in order:
 
-See `Details.md` skeleton for the full pattern. The ONLY change is `xs: 12` → `xs: 4`.
+1. Receive inputs: `label`, `showLabel` (default `true`), `showHighlightedData` (default `false`), and `getPConnect`.
+2. Merge inherited display settings: `propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() }`.
+3. Set display mode on the PConnect instance: `getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY')` and `getPConnect().setInheritedProp('readOnly', true)`.
+4. Re-create children from `getPConnect().getChildren()` — map each config object into a live component via the bridge component, passing a unique key per child.
+5. If `showHighlightedData` is true, retrieve `highlightedData` from `getPConnect().getRawMetadata().config`, set each field's `displayMode` to `'STACKED_LARGE_VAL'`, mark any field whose value is `'@P .pyStatusWork'` with `type: 'TextInput'` and `displayAsStatus: true`, then call `getPConnect().createComponent(field, '', 0, {})` for each.
+6. Render: FieldGroup wrapper (showing `propsToUse.label` if `propsToUse.showLabel` is true), optional highlighted data row (3-column grid with bottom padding), then all children in a 3-column grid.
 
 ## Behavioral Contract
 
 All steps identical to `Details`, except:
 
-- **Regular children grid:** Each child renders at `Grid size={{ xs: 4 }}` (three per row).
-- **Highlighted data grid:** Each highlighted field also renders at `Grid size={{ xs: 4 }}`.
-- All other behaviors (inherited props merge, `setInheritedProp('displayMode', 'DISPLAY_ONLY')`, `setInheritedProp('readOnly', true)`, FieldGroup wrapper, pyStatusWork handling) are identical to `Details`.
+- **Regular children grid:** Each child renders at one-third width (three per row).
+- **Highlighted data grid:** Each highlighted field also renders at one-third width.
+- All other behaviors (inherited settings merge, `setInheritedProp('displayMode', 'DISPLAY_ONLY')`, `setInheritedProp('readOnly', true)`, FieldGroup wrapper, pyStatusWork handling) are identical to `Details`.
 
 ## Visual Specifications
 
 ### Column Structure
 
-|                         | Details | DetailsTwoColumn | DetailsThreeColumn |
-| ----------------------- | ------- | ---------------- | ------------------ |
-| Column width per child  | xs: 12  | xs: 6            | **xs: 4**          |
-| Columns per row         | 1       | 2                | **3**              |
-| Highlighted data column | xs: 12  | xs: 6            | **xs: 4**          |
+|                         | Details    | DetailsTwoColumn | DetailsThreeColumn |
+| ----------------------- | ---------- | ---------------- | ------------------ |
+| Column width per child  | full-width | 1/2              | **1/3**            |
+| Columns per row         | 1          | 2                | **3**              |
+| Highlighted data column | full-width | 1/2              | **1/3**            |
 
 **CSS-only implementation notes:**
 
@@ -69,24 +70,16 @@ All edge cases identical to `Details`. See `Details.md`.
 
 ## Dependencies
 
-- `createElement` from React
-- `PConnectComponent`, `getComponentFromRegistry('FieldGroup')` from `@pega/sdk-react`
+- The project's component registry — to resolve the `FieldGroup` component at runtime
+- A bridge component for rendering PConnect child configuration objects as live components
 
 ## Design System Mapping
 
 **UI control type:** Read-only labeled section with fields in a three-column grid.
 
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                                         |
-| ------------------ | ----------------------------------------------------------------------------- |
-| Default (CSS only) | `<fieldset>/<legend>` with CSS `grid-template-columns: 1fr 1fr 1fr; gap: 8px` |
-| MUI                | `<Grid container spacing={1}>` with `<Grid size={{ xs: 4 }}>` per field       |
-| Ant Design         | `<Descriptions column={3}>` or `<Row><Col span={8}>` per field                |
-| Chakra UI          | `<SimpleGrid columns={3} spacing={2}>`                                        |
-| Shadcn/ui          | Tailwind `grid grid-cols-3 gap-2`                                             |
-
-When implementing in a specific design system:
+When implementing in a specific design system, map the following:
 
 - 3-column layout — each field takes one-third of the available width
+- Grid container with spacing/gap between items
+- FieldGroup wrapper component for the labeled section (see `FieldGroup.md` DSE skill)
 - All other behaviors inherited from `Details` (DISPLAY_ONLY, readOnly, FieldGroup, highlighted data)

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

@@ -8,59 +8,51 @@ Read-only two-column details template. Renders child fields in DISPLAY_ONLY mode
 
 ## Component Purpose
 
-Identical to `Details` in all behavior except children are distributed into a **two-column grid** (`xs: 6` per child) instead of single-column. Used in details regions where the design calls for side-by-side field pairs.
+Identical to `Details` in all behavior except children are distributed into a **two-column grid** (half width per child) instead of single-column. Used in details regions where the design calls for side-by-side field pairs.
 
 > The implementation is nearly identical to `Details`. See `Details.md` for full pattern descriptions. Only the column width differs.
 
 ## Pega Metadata
 
-- **Registration key:** `DetailsTwoColumn` (in `component-map.ts`)
+- **Registration key:** `DetailsTwoColumn` (in the project's component map)
 - **Category:** Display template
-- **Extends:** `PConnProps`
+- **Extends:** the project's base component interface
 
-## Props
+## Inputs
 
-| Prop                  | Type       | Required | Description                                                          |
+| Input                 | Type       | Required | Description                                                          |
 | --------------------- | ---------- | -------- | -------------------------------------------------------------------- |
 | `label`               | `string`   | Yes      | Section heading for the FieldGroup wrapper                           |
 | `showLabel`           | `boolean`  | No       | Whether to show the section label. Default `true`                    |
 | `showHighlightedData` | `boolean`  | No       | Whether to render highlighted fields above children. Default `false` |
 | `getPConnect`         | `function` | Yes      | PConnect getter                                                      |
 
-## Component Skeleton
+## Implementation Structure
 
-Identical to `Details` skeleton except grid items use `xs={6}` (two columns).
-
-```typescript
-// Same as Details — only this line differs in the grid:
-// Highlighted data: <GridItem xs={6} key={...}>{child}</GridItem>
-// Regular children: <GridItem xs={6} key={...}>{child}</GridItem>
-```
-
-See `Details.md` skeleton for the full pattern. The ONLY change is `xs: 12` → `xs: 6`.
+Identical to the `Details` implementation structure except grid items use half width (two columns) instead of full width. Both the highlighted-data grid items and the regular-children grid items render at half width (two per row). See `Details.md`'s Implementation Structure for the full pattern description — the ONLY change is full-width → half-width per child.
 
 ## Behavioral Contract
 
 All steps identical to `Details`, except:
 
-- **Regular children grid:** Each child renders at `Grid size={{ xs: 6 }}` (two per row, side by side).
-- **Highlighted data grid:** Each highlighted field also renders at `Grid size={{ xs: 6 }}`.
-- All other behaviors (inherited props merge, `setInheritedProp('displayMode', 'DISPLAY_ONLY')`, `setInheritedProp('readOnly', true)`, FieldGroup wrapper, pyStatusWork handling) are identical to `Details`.
+- **Regular children grid:** Each child renders at half width (two per row, side by side).
+- **Highlighted data grid:** Each highlighted field also renders at half width.
+- All other behaviors (inherited inputs merge, `setInheritedProp('displayMode', 'DISPLAY_ONLY')`, `setInheritedProp('readOnly', true)`, FieldGroup wrapper, pyStatusWork handling) are identical to `Details`.
 
 ## Visual Specifications
 
 ### Column Structure
 
-|                         | Details             | DetailsTwoColumn       |
-| ----------------------- | ------------------- | ---------------------- |
-| Column width per child  | xs: 12 (full width) | **xs: 6 (half width)** |
-| Columns per row         | 1                   | **2**                  |
-| Highlighted data column | xs: 12              | **xs: 6**              |
+|                         | Details    | DetailsTwoColumn |
+| ----------------------- | ---------- | ---------------- |
+| Column width per child  | Full width | **Half width**   |
+| Columns per row         | 1          | **2**            |
+| Highlighted data column | Full width | **Half width**   |
 
 **CSS-only implementation notes:**
 
-- Children grid: `display: grid; grid-template-columns: 1fr 1fr; gap: 8px`.
-- Highlighted data row: `display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 1rem`.
+- Children grid: two equal columns with ~8px gap between items.
+- Highlighted data row: two equal columns with ~8px gap and ~1rem bottom padding.
 - Wrap in FieldGroup (see `FieldGroup.md` DSE skill).
 
 ## Edge Cases & Special Logic
@@ -69,24 +61,17 @@ All edge cases identical to `Details`. See `Details.md`.
 
 ## Dependencies
 
-- `createElement` from React
-- `PConnectComponent`, `getComponentFromRegistry('FieldGroup')` from `@pega/sdk-react`
+- The project's PConnect bridge utility (for rendering child PConnect nodes)
+- The project's component registry (to retrieve `FieldGroup`)
 
 ## Design System Mapping
 
 **UI control type:** Read-only labeled section with fields in a two-column grid.
 
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                                     |
-| ------------------ | ------------------------------------------------------------------------- |
-| Default (CSS only) | `<fieldset>/<legend>` with CSS `grid-template-columns: 1fr 1fr; gap: 8px` |
-| MUI                | `<Grid container spacing={1}>` with `<Grid size={{ xs: 6 }}>` per field   |
-| Ant Design         | `<Descriptions column={2}>` or `<Row><Col span={12}>` per field           |
-| Chakra UI          | `<SimpleGrid columns={2} spacing={2}>`                                    |
-| Shadcn/ui          | Tailwind `grid grid-cols-2 gap-2`                                         |
-
-When implementing in a specific design system:
+When implementing in a specific design system, map the following:
 
-- 2-column layout — each field takes half the available width
-- All other behaviors inherited from `Details` (DISPLAY_ONLY, readOnly, FieldGroup, highlighted data)
+- The outer wrapper is a labeled group container (same as Details — fieldset/legend, card, or boxed section). Use whatever grouped-section primitive your design system provides.
+- Each child occupies half the container width (two columns per row). Use your design system's grid or multi-column layout primitive with two equal columns and ~8px spacing between items.
+- Highlighted data renders in the same two-column layout with additional bottom padding (~1rem) separating it from regular children.
+- 2-column layout — each field takes half the available width.
+- All other behaviors inherited from `Details` (DISPLAY_ONLY, readOnly, FieldGroup, highlighted data).