@pega/sdk 0.0.4 → 0.0.5

package/templates/react-sdk-reference/{.github → .ai-common}/skills/template-skills/Confirmation.md

@@ -6,6 +6,29 @@ Case confirmation template. Renders the post-submission confirmation view with a
 
 ---
 
+> ⚠️ **CRITICAL — DO NOT SIMPLIFY THIS COMPONENT**
+>
+> The close event MUST use `PCore.getContainerUtils()` to get the proper container info for the pub/sub payload. Without this, the confirmation view won't close properly and the case won't transition correctly.
+>
+> **Mandatory implementation details:**
+>
+> 1. `PCore.getContainerUtils().getActiveContainerItemName(getPConnect().getTarget())` — gets active container item
+> 2. `PCore.getContainerUtils().getContainerItemData(target, activeItemID)` — gets root info for close event
+> 3. `PCore.getPubSubUtils().publish(CONSTS.PUB_SUB_EVENTS.CASE_EVENTS.CLOSE_CONFIRM_VIEW, rootInfo)` — proper close event with payload
+> 4. `getComponentFromRegistry('Details')` — for rendering case details in confirmation
+> 5. `getToDoAssignments(getPConnect())` — from `PCore.getSDKUtils().getSDKContainerUtils()`
+> 6. Check `showDetails` before rendering Details component
+>
+> **Minimum Implementation Checklist:**
+>
+> - [ ] `PCore.getContainerUtils()` used for close event (NOT a simple `setShowConfirmView(false)`)
+> - [ ] `rootInfo` passed to `CLOSE_CONFIRM_VIEW` pub/sub event
+> - [ ] Details component rendered when `showDetails` is true
+> - [ ] ToDo component rendered with `getToDoAssignments` when `showTasks` is true
+> - [ ] Two render states: confirmation view (with Done button) and post-close (just ToDo if any)
+
+---
+
 ## Component Purpose
 
 Displayed after a case or assignment is submitted. Shows the confirmation view (with `Details` region) and a Done button. If outstanding ToDo assignments remain after the user clicks Done, they are displayed. When the user truly finishes, publishes `CLOSE_CONFIRM_VIEW` to close the container.
@@ -23,6 +46,72 @@ Displayed after a case or assignment is submitted. Shows the confirmation view (
 | `children`    | `ReactNode[]` | Yes      | Region children: `[0]` = ToDo region, `[1]` = Details region (when available) |
 | `getPConnect` | `function`    | Yes      | PConnect getter                                                               |
 
+## Component Skeleton
+
+```typescript
+import { type PropsWithChildren, useState } from 'react';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface ConfirmationProps extends PConnProps {
+  datasource: { source: any };
+  label: string;
+  showLabel: boolean;
+  showTasks: boolean;
+}
+
+export default function Confirmation(props: PropsWithChildren<ConfirmationProps>) {
+  const ToDo = getComponentFromRegistry('Todo'); // NOTE: 'Todo' not 'ToDo'
+  const Details = getComponentFromRegistry('Details');
+
+  const CONSTS = PCore.getConstants();
+  const [showConfirmView, setShowConfirmView] = useState(true);
+  const { showTasks, getPConnect, showLabel, label } = props;
+
+  // 1. Get active container + root info
+  const activeContainerItemID = PCore.getContainerUtils()
+    .getActiveContainerItemName(getPConnect().getTarget() || '');
+  const rootInfo = PCore.getContainerUtils()
+    .getContainerItemData(getPConnect().getTarget(), activeContainerItemID);
+
+  // 2. Get todo assignments
+  const { getToDoAssignments } = PCore.getSDKUtils().getSDKContainerUtils();
+  const toDoList = getToDoAssignments(getPConnect());
+
+  // 3. Done button handler
+  const onConfirmViewClose = () => {
+    setShowConfirmView(false);
+    PCore.getPubSubUtils().publish(
+      PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CLOSE_CONFIRM_VIEW, rootInfo
+    );
+  };
+
+  // 4. Show details check
+  const showDetails = props.children?.[0]?.props?.getPConnect()?.getChildren()?.length > 0;
+
+  // 5. Render: confirm view OR todo view
+  if (showConfirmView) {
+    return (
+      <Card>
+        <h2>{showLabel ? label : ''}</h2>
+        {showDetails && <Details {...props} showLabel={false} />}
+        {showTasks && toDoList?.length > 0 && (
+          <ToDo datasource={{ source: toDoList }} getPConnect={getPConnect}
+            type={CONSTS.TODO} headerText="Open Tasks" isConfirm />
+        )}
+        <DoneButton onClick={onConfirmViewClose}>Done</DoneButton>
+      </Card>
+    );
+  }
+  return toDoList?.length > 0 ? (
+    <Card>
+      <ToDo datasource={{ source: toDoList }} getPConnect={getPConnect}
+        type={CONSTS.TODO} headerText="Tasks" isConfirm />
+    </Card>
+  ) : null;
+}
+```
+
 ## Behavioral Contract
 
 ### State

package/templates/react-sdk-reference/{.claude → .ai-common}/skills/template-skills/DataReference.md

@@ -6,6 +6,27 @@ Data reference template. Routes to field, table, or search renderers based on `s
 
 ---
 
+> ⚠️ **CRITICAL — DataReference is a CHILDREN PASS-THROUGH**
+>
+> This component MUST render its React `children` directly. The PConnect bridge already resolves
+> the correct sub-components (Dropdown, AutoComplete, SingleReferenceReadOnly, etc.) and passes
+> them as `children`. DataReference just passes them through.
+>
+> ```typescript
+> // ✅ CORRECT — simple children pass-through
+> const childArray = Array.isArray(children) ? children : [children].filter(Boolean);
+> return childArray.length === 1 ? childArray[0] : <div>{childArray}</div>;
+> ```
+>
+> ❌ **NEVER call `pConn.createComponent()`** — causes "Maximum call stack size exceeded" (infinite recursion back to form templates)
+> ❌ **NEVER call `firstChildPConnect().createComponent()`** — causes "getPConnect is not a function" when child PConnect isn't ready
+> ❌ **NEVER try to manually route to Dropdown/AutoComplete/etc based on `displayAs`** — the bridge already does this
+>
+> **Why the reference is ~460 lines but the generated version should be ~10:**
+> The reference adds advanced features (deferred datasource fetching, review-mode editing, advanced search, card variants) that require careful PConnect lifecycle management. These features are NOT needed for the component to function correctly — the bridge handles core rendering. Attempting to replicate the reference's `createComponent` pattern without the full ~460 lines of config manipulation will crash.
+
+---
+
 ## Component Purpose
 
 Renders a data reference field that can be displayed as a dropdown, autocomplete, checkbox group, radiobutton group, or a card-selection layout. In read-only mode, delegates to `SingleReferenceReadOnly` (single selection) or `MultiReferenceReadOnly` (multi-selection). Supports deferred/parameterized data sources.
@@ -36,6 +57,35 @@ Renders a data reference field that can be displayed as a dropdown, autocomplete
 | `fieldMetadata`      | `object`   | No       | Extra field-level metadata                                                                             |
 | `getPConnect`        | `function` | Yes      | PConnect getter                                                                                        |
 
+## Component Skeleton
+
+```typescript
+import { type PropsWithChildren, type ReactElement } from 'react';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface DataReferenceProps extends PConnProps {
+  displayMode?: string;
+  selectionMode?: string;
+  displayAs?: string;
+  parameters?: any;
+  hideLabel?: boolean;
+}
+
+export default function DataReference(props: PropsWithChildren<DataReferenceProps>) {
+  // DataReference is a pass-through wrapper.
+  // The PConnect bridge resolves the correct sub-components (Dropdown, AutoComplete,
+  // SingleReferenceReadOnly, MultiReferenceReadOnly, etc.) and passes them as children.
+  // ⚠️ DO NOT call pConn.createComponent() or firstChildPConnect().createComponent() here —
+  // it causes "getPConnect is not a function" errors or infinite recursion.
+  const { children } = props;
+  const childArray = Array.isArray(children) ? children : [children].filter(Boolean);
+
+  return childArray.length === 1
+    ? (childArray[0] as ReactElement ?? null)
+    : <div>{childArray}</div>;
+}
+```
+
 ## Behavioral Contract
 
 ### Read-Only Routing

package/templates/react-sdk-reference/{.claude → .ai-common}/skills/template-skills/DefaultForm.md

@@ -6,6 +6,21 @@ Standard form layout template supporting 1, 2, or 3 column arrangements. Renders
 
 ---
 
+> ⚠️ **CRITICAL — DO NOT SIMPLIFY THIS COMPONENT**
+>
+> This component REQUIRES the `connectToState` HOC to function. Without it, **form fields will NOT render** because they won't receive visibility and state props from the Redux store.
+>
+> **NEVER** replace the `connectToState` pattern with plain `createElement(PConnectComponent, ...)`. That pattern does not subscribe children to the store and results in invisible/non-functional form fields.
+>
+> **MANDATORY artifacts when generating this component:**
+>
+> 1. `DefaultForm.tsx` — with `connectToState` HOC wrapping each child
+> 2. `utils/index.ts` — containing `mapStateToProps` and `getKeyForMappedField`
+> 3. `DefaultForm.css` — column layout styles (or DS equivalent)
+> 4. `index.tsx` — re-export
+
+---
+
 ## Component Purpose
 
 Renders a form's fields in a 1, 2, or 3-column grid layout. Children come from a PConnect region (unwrapped one level). Each child field is connected to the Redux store via a `connectToState` HOC so visibility and prop updates flow reactively. Instruction HTML is displayed above the form when present.
@@ -24,6 +39,62 @@ Renders a form's fields in a 1, 2, or 3-column grid layout. Children come from a
 | `instructions` | `string`   | No       | HTML instruction text shown above the form               |
 | `getPConnect`  | `function` | Yes      | PConnect getter                                          |
 
+## Component Skeleton
+
+```typescript
+import { createElement } from 'react';
+import { getInstructions } from '../../helpers/template-utils';
+import { PConnectComponent } from '@pega/sdk-react';
+import connectToState from '../../helpers/state-utils';
+import { getKeyForMappedField, mapStateToProps } from './utils';
+import type { PConnProps } from '@pega/sdk-react';
+import './DefaultForm.css';
+
+interface DefaultFormProps extends PConnProps {
+  NumCols: string;
+  instructions: string;
+}
+
+// HOC: wraps each field in Redux store subscription
+const Child = connectToState(mapStateToProps)((props) => {
+  const { key, visibility, ...rest } = props;
+  return createElement(PConnectComponent, { ...rest, key, visibility });
+});
+
+export default function DefaultForm(props) {
+  const { getPConnect, NumCols = '1' } = props;
+  const instructions = getInstructions(getPConnect(), props.instructions);
+
+  // 1. Determine CSS class from NumCols
+  const numCols = NumCols || '1';
+  let divClass;
+  switch (numCols) {
+    case '1': divClass = 'psdk-default-form-one-column'; break;
+    case '2': divClass = 'psdk-default-form-two-column'; break;
+    case '3': divClass = 'psdk-default-form-three-column'; break;
+    default: divClass = 'psdk-default-form-one-column'; break;
+  }
+
+  // 2. Unwrap region children (first child is a region → get ITS children)
+  const arChildren = getPConnect().getChildren()[0].getPConnect().getChildren();
+  const dfChildren = arChildren?.map(kid =>
+    <Child key={getKeyForMappedField(kid)} {...kid} />
+  );
+
+  // 3. Render: optional instructions HTML + column grid of children
+  return (
+    <>
+      {instructions && (
+        <div className="psdk-default-form-instruction-text">
+          <div dangerouslySetInnerHTML={{ __html: instructions }} />
+        </div>
+      )}
+      <div className={divClass}>{dfChildren}</div>
+    </>
+  );
+}
+```
+
 ## Behavioral Contract
 
 1. **Resolve column count:** Use `NumCols || '1'`. Switch to CSS class:
@@ -83,6 +154,52 @@ Derived from `DefaultForm.css`:
 - `PConnectComponent` from `@pega/sdk-react` — renders each child field
 - `getKeyForMappedField`, `mapStateToProps` from `./utils` — key generation and state mapping
 
+## Mandatory File: `utils/index.ts`
+
+You MUST create this file alongside `DefaultForm.tsx`. Without it, the component will not compile.
+
+```typescript
+export const mapStateToProps: any = (_, ownProps) => {
+  const { getPConnect } = ownProps;
+
+  return {
+    visibility: getPConnect().getComputedVisibility(),
+    getPConnect,
+  };
+};
+
+export const getKeyForMappedField = (field) => {
+  if (Array.isArray(field)) {
+    return field
+      .map((item) => {
+        return getKeyForMappedField(item);
+      })
+      .join('__');
+  }
+
+  const pConnect = field?.getPConnect?.();
+
+  if (pConnect?.meta) {
+    return JSON.stringify(pConnect.meta);
+  }
+
+  return crypto.randomUUID();
+};
+```
+
+## Post-Generation Checklist
+
+After generating this component, verify ALL of the following:
+
+- [ ] `connectToState` is imported from `../../helpers/state-utils`
+- [ ] `mapStateToProps` and `getKeyForMappedField` are imported from `./utils`
+- [ ] `const Child = connectToState(mapStateToProps)(...)` is defined OUTSIDE the component function
+- [ ] Each child field is rendered via `<Child key={getKeyForMappedField(kid)} {...kid} />`
+- [ ] `utils/index.ts` file is created with `mapStateToProps` and `getKeyForMappedField`
+- [ ] Column count CSS classes or DS grid component is applied based on `NumCols`
+
+If ANY of these are missing, the form fields will NOT render at runtime.
+
 ## Design System Mapping
 
 **UI control type:** Multi-column form field grid with optional instruction text header.

package/templates/react-sdk-reference/{.claude → .ai-common}/skills/template-skills/DefaultPage.md

@@ -33,6 +33,55 @@ Renders a page's child regions in a responsive grid layout. The number and propo
 | `backgroundColor` | `string`                                                                      | No       | Banner background color. Default `''`                            |
 | `tintImage`       | `boolean`                                                                     | No       | Banner image tint flag                                           |
 
+## Component Skeleton
+
+```typescript
+import { useMemo, Children } from 'react';
+import type { ReactNode } from 'react';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+
+const COLUMNS_WIDTHS = {
+  'one-column': [12],
+  'two-column': [6, 6],
+  'narrow-wide': [4, 8],
+  'wide-narrow': [8, 4],
+};
+
+export default function DefaultPage({
+  layout = 'one-column', children, enableBanner,
+  heading = '', message = '', imageTheme, backgroundImage = '',
+  backgroundColor = '', tintImage,
+}: DefaultPageProps) {
+  const Banner = getComponentFromRegistry('Banner');
+  const childArray = useMemo(() => Children.toArray(children), [children]);
+
+  // 1. Banner mode
+  if (enableBanner) {
+    return (
+      <Banner
+        variant={layout === 'one-column' ? 'two-column' : layout}
+        a={[childArray[0]]}
+        b={[childArray[1]]}
+        banner={{ variant: imageTheme, backgroundColor, title: heading, message, backgroundImage, tintImage }}
+      />
+    );
+  }
+
+  // 2. Standard grid mode
+  return (
+    <GridContainer spacing={1}>
+      {childArray.map((child, index) => (
+        <GridItem key={index} size={COLUMNS_WIDTHS[layout][index]}>
+          {child}
+        </GridItem>
+      ))}
+    </GridContainer>
+  );
+}
+```
+
+> **Note:** `DefaultPage` does NOT have a `getPConnect` prop — it extends `CommonPageProps`, not `PConnProps`.
+
 ## Behavioral Contract
 
 ### Without Banner (`enableBanner` is falsy)

package/templates/react-sdk-reference/{.claude → .ai-common}/skills/template-skills/Details.md

@@ -25,6 +25,65 @@ Renders a labeled group of read-only fields in a single-column vertical stack. F
 | `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>
+  );
+}
+```
+
 ## Behavioral Contract
 
 1. **Inherited props merge:** `propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() }` — inherited props can override label/showLabel.

package/templates/react-sdk-reference/{.github → .ai-common}/skills/template-skills/DetailsSubTabs.md

@@ -25,6 +25,66 @@ Renders a tabbed layout for a details region. Each tab contains display-only con
 | `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>
+    </>
+  );
+}
+```
+
 ## Behavioral Contract
 
 1. **Inherited props merge:** `propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() }`.

package/templates/react-sdk-reference/{.claude → .ai-common}/skills/template-skills/DetailsThreeColumn.md

@@ -27,6 +27,18 @@ Identical to `Details` and `DetailsTwoColumn` in all behavior except children ar
 | `showHighlightedData` | `boolean`  | No       | Whether to render highlighted fields above children. Default `false` |
 | `getPConnect`         | `function` | Yes      | PConnect getter                                                      |
 
+## Component Skeleton
+
+Identical to `Details` skeleton except grid items use `xs={4}` (three columns).
+
+```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>
+```
+
+See `Details.md` skeleton for the full pattern. The ONLY change is `xs: 12` → `xs: 4`.
+
 ## Behavioral Contract
 
 All steps identical to `Details`, except:

package/templates/react-sdk-reference/{.github → .ai-common}/skills/template-skills/DetailsTwoColumn.md

@@ -27,6 +27,18 @@ Identical to `Details` in all behavior except children are distributed into a **
 | `showHighlightedData` | `boolean`  | No       | Whether to render highlighted fields above children. Default `false` |
 | `getPConnect`         | `function` | Yes      | PConnect getter                                                      |
 
+## Component Skeleton
+
+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`.
+
 ## Behavioral Contract
 
 All steps identical to `Details`, except:

package/templates/react-sdk-reference/{.claude → .ai-common}/skills/template-skills/DynamicTabs.md

@@ -23,6 +23,73 @@ Unlike `SubTabs` or `DetailsSubTabs` where tabs are defined statically in metada
 | `referenceList` | `string`   | Yes      | Property path to the reference list (e.g. `'.pxResults'`) |
 | `getPConnect`   | `function` | Yes      | PConnect getter                                           |
 
+## Component Skeleton
+
+```typescript
+import React, { Children, useMemo, useState } from 'react';
+import { buildView } from '../../../helpers/field-group-utils';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface DynamicTabsProps extends PConnProps {
+  showLabel: boolean;
+  label: string;
+  referenceList?: any[];
+}
+
+export default function DynamicTabs(props: DynamicTabsProps) {
+  const { referenceList, showLabel, label, getPConnect } = props;
+  const pConnect = getPConnect();
+  const propsToUse = { label, showLabel, ...pConnect.getInheritedProps() };
+
+  // 1. Resolve tab label property from annotation
+  const { tablabel } = pConnect.getComponentConfig();
+  const tablabelProp = PCore.getAnnotationUtils().getPropertyName(tablabel);
+
+  // 2. Get reference list data
+  const referenceListData: any = pConnect.getValue(`${referenceList}.pxResults`, '');
+
+  // 3. Memoized tab views — set display-only mode, build views
+  const memoisedTabViews = useMemo(() => {
+    pConnect.setInheritedProp('displayMode', 'DISPLAY_ONLY');
+    pConnect.setInheritedProp('readOnly', true);
+    return referenceListData && Children.toArray(
+      referenceListData.map((item, index) => (
+        <React.Fragment key={item[tablabelProp]}>
+          {buildView(pConnect, index, '')}
+        </React.Fragment>
+      ))
+    );
+  }, [referenceListData]);
+
+  // 4. Tab state
+  const [panelShown, changePanel] = useState(0);
+  const handleTabClick = (e, id) => changePanel(parseInt(id, 10));
+
+  // 5. Build tab items from reference list data
+  const tabItems = referenceListData?.map((item, i) => ({
+    name: item[tablabelProp] || PCore.getLocaleUtils().getLocaleValue('No label specified in config', 'Generic'),
+    id: i,
+  })) || [];
+
+  // 6. Render: optional heading + TabContext + scrollable Tabs + TabPanels
+  return (
+    <>
+      {propsToUse.label && <h3>{propsToUse.label}</h3>}
+      <TabContext value={panelShown.toString()}>
+        <TabBar onChange={handleTabClick} value={panelShown} variant="scrollable" scrollButtons="auto">
+          {tabItems.map(tab => <Tab key={tab.id} label={tab.name} value={tab.id} />)}
+        </TabBar>
+        {tabItems.map(tab => (
+          <TabPanel key={tab.id} value={tab.id.toString()} tabIndex={+tab.id}>
+            {memoisedTabViews?.[tab.id] || 'No content exists'}
+          </TabPanel>
+        ))}
+      </TabContext>
+    </>
+  );
+}
+```
+
 ## Behavioral Contract
 
 ### Tab Label Resolution