@pega/sdk 0.0.4 → 0.0.5

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

@@ -24,6 +24,62 @@ A case view variant designed for self-service portal channels. Uses a horizontal
 | `isObjectType` | `boolean`     | No       | Whether the case is an object-type (affects child region count) |
 | `getPConnect`  | `function`    | Yes      | PConnect getter                                                 |
 
+## Component Skeleton
+
+```typescript
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import { prepareCaseSummaryData, filterUtilities } from '../utils';
+import { Utils } from '../../helpers/utils';
+
+export default function SelfServiceCaseView(props) {
+  const CaseViewActionsMenu = getComponentFromRegistry('CaseViewActionsMenu');
+  const CaseSummary = getComponentFromRegistry('CaseSummary');
+  const {
+    icon = '', getPConnect, header, subheader,
+    showCaseLifecycle = true, showSummaryRegion = true,
+    showUtilitiesRegion = true, showCaseActions = true,
+    children, caseClass,
+    caseInfo: { availableActions = [], availableProcesses = [], caseTypeID = '', caseTypeName = '' },
+  } = props;
+  const pConnect = getPConnect();
+
+  // 1. Boolean coercion (props may be strings)
+  const [bShowCaseLifecycle, bShowSummaryRegion, bShowUtilitiesRegion, bShowCaseActions] =
+    [showCaseLifecycle, showSummaryRegion, showUtilitiesRegion, showCaseActions]
+      .map(p => p === true || p === 'true');
+
+  // 2. Object type check — affects child indexing
+  const isObjectType = (PCore.getCaseUtils() as any).isObjectCaseType(caseClass);
+
+  // 3. Region assignment by child index
+  const renderedRegions = isObjectType
+    ? { caseSummary: children[0], utilities: filterUtilities(children[2]) }
+    : { caseSummary: children[0], stages: children[1], todo: children[2], utilities: filterUtilities(children[4]) };
+
+  // 4. Filter summary fields for self-service channel
+  const { primarySummaryFields, secondarySummaryFields } = prepareCaseSummaryData(
+    renderedRegions.caseSummary,
+    (config) => config?.availableInChannel?.selfService === true
+  );
+
+  // 5. Utilities visibility check
+  const showUtilities = bShowUtilitiesRegion && isUtilitiesRegionNotEmpty();
+  const showSummary = bShowSummaryRegion && (primarySummaryFields.length > 0 || secondarySummaryFields.length > 0);
+
+  // 6. Render: header bar + flex row (summary 25% | main flex:1 | utilities 25%)
+  return (
+    <div>
+      <HeaderBar>{header} {bShowCaseActions && <CaseViewActionsMenu ... />}</HeaderBar>
+      <div style={{ display: 'flex', flexDirection: 'row' }}>
+        {showSummary && <div style={{ flex: '0 0 25%' }}><CaseSummary ... /></div>}
+        <div style={{ flex: 1 }}>{bShowCaseLifecycle && renderedRegions.stages}{renderedRegions.todo}</div>
+        {showUtilities && <div style={{ flex: '0 0 25%' }}>{renderedRegions.utilities}</div>}
+      </div>
+    </div>
+  );
+}
+```
+
 ## Behavioral Contract
 
 ### Region Assignment by Child Index

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

@@ -29,6 +29,65 @@ Entry-point template for embedded table data in a form or detail view. Routes to
 | `readOnly`             | `boolean`  | No       | Alternative read-only flag                                                                |
 | `getPConnect`          | `function` | Yes      | PConnect getter                                                                           |
 
+## Component Skeleton
+
+### SimpleTable (router)
+
+```typescript
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import { buildMetaForListView, getContext } from '../../../helpers/simpleTableHelpers';
+
+export default function SimpleTable(props: SimpleTableProps) {
+  const ListView = getComponentFromRegistry('ListView');
+  const FieldGroupTemplate = getComponentFromRegistry('FieldGroupTemplate');
+  const SimpleTableManual = getComponentFromRegistry('SimpleTableManual');
+  const { getPConnect, multiRecordDisplayAs, allowTableEdit, fieldMetadata, displayMode, ... } = props;
+
+  // 1. Route: fieldGroup
+  if (multiRecordDisplayAs === 'fieldGroup') {
+    return <FieldGroupTemplate {...props} contextClass={contextClass} />;
+  }
+
+  // 2. Route: reference list (read-only ListView)
+  if (fieldMetadata?.type === 'Page List' && fieldMetadata?.dataRetrievalType === 'refer') {
+    const metaForListView = buildMetaForListView(...);
+    return <ListView {...listViewProps} bInForm={true} displayMode={displayMode} />;
+  }
+
+  // 3. Route: editable table
+  return <SimpleTableManual {...props} contextClass={contextClass} />;
+}
+```
+
+### SimpleTableManual (editable table — ~600+ lines)
+
+Key structural outline:
+
+- `getReferenceList(pConn)` + `setReferenceList`
+- `buildElementsForTable()` — creates PConnect views per cell
+- `generateRowsData()` — for read-only/modal mode
+- `addRecord()` / `deleteRecord()` / `editRecord()` with modal support
+- Sort/filter/column menu (same pattern as ListView)
+- Render: Table with header sort + body rows + add/delete controls
+
+### SimpleTableSelect (selection wrapper)
+
+```typescript
+const ListView = getComponentFromRegistry('ListView');
+const PromotedFilters = getComponentFromRegistry('PromotedFilters');
+// Build additionalTableConfig with selectionMode, compositeKeys
+// If promoted filters exist: <PromotedFilters ... />
+// Else: <ListView {...listViewProps} />
+```
+
+### SimpleTableSelectReadonly (link + modal)
+
+```typescript
+// Renders SemanticLink per selected item (comma-separated)
+// If list > 5 items: show "(N Total)" link that opens modal
+// Modal: <Dialog><SimpleTableManual readOnly ... /></Dialog>
+```
+
 ## Behavioral Contract
 
 ### SimpleTable — Routing Logic

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

@@ -31,6 +31,58 @@ Renders a single data reference field in read-only mode. For fields that were di
 | `resourcePayload` | `object`   | No       | Payload for resource navigation                           |
 | `getPConnect`     | `function` | Yes      | PConnect getter                                           |
 
+## Component Skeleton
+
+```typescript
+import type { PConnProps } from '@pega/sdk-react';
+
+interface SingleReferenceReadOnlyProps extends PConnProps {
+  config: any;
+  displayAs?: string;
+  ruleClass?: string;
+  label?: string;
+  displayMode?: string;
+  type: string;
+  referenceType?: string;
+  hideLabel?: boolean;
+  dataRelationshipContext?: string;
+}
+
+export default function SingleReferenceReadOnly(props: SingleReferenceReadOnlyProps) {
+  const {
+    getPConnect, displayAs = '', ruleClass = '', label = '',
+    type = '', displayMode = '', referenceType = '',
+    hideLabel = false, dataRelationshipContext = null, config,
+  } = props;
+
+  const editableComponents = ['AutoComplete', 'SimpleTableSelect', 'Dropdown'];
+
+  // 1. For editable field types: build SemanticLink config
+  if (editableComponents.includes(type)) {
+    config.caseClass = ruleClass;
+    config.text = config.primaryField;
+    config.caseID = config.value;
+    config.contextPage = `@P .${dataRelationshipContext}`;
+    config.resourceParams = { workID: displayAs === 'table' ? config.selectionKey : config.value };
+    config.resourcePayload = { caseClassName: ruleClass };
+  }
+
+  // 2. Create SemanticLink component
+  const component = getPConnect().createComponent(
+    { type: 'SemanticLink', config: { ...config, label, displayMode, referenceType, hideLabel, dataRelationshipContext } },
+    '', 0, {},
+  );
+
+  // 3. Render: label + semantic link in row layout
+  return (
+    <FormRow>
+      <Label>{label}</Label>
+      {component}
+    </FormRow>
+  );
+}
+```
+
 ## Behavioral Contract
 
 ### Editable Component Check

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

@@ -23,6 +23,53 @@ Renders a horizontal tab bar for navigating between case view sections. Uses sha
 | `children`    | `ReactNode[]` | Yes      | `children[0]` is the deferred-loaded tabs container |
 | `getPConnect` | `function`    | Yes      | PConnect getter                                     |
 
+## Component Skeleton
+
+```typescript
+import { Children, type PropsWithChildren, useEffect, useState } from 'react';
+import { getTransientTabs, getVisibleTabs, tabClick } from './tabUtils';
+import type { PConnProps } from '@pega/sdk-react';
+
+export default function SubTabs(props: PropsWithChildren<PConnProps>) {
+  const { children = [] } = props;
+
+  // 1. Extract deferred tabs
+  const deferLoadedTabs = Children.toArray(children)[0];
+  const availableTabs = getVisibleTabs(deferLoadedTabs, 'tabsSubs');
+
+  // 2. State
+  const [currentTabId, setCurrentTabId] = useState('0');
+  const [tabItems, setTabitem] = useState<any[]>([]);
+
+  // 3. Update tab items when currentTabId changes
+  useEffect(() => {
+    setTabitem(getTransientTabs(availableTabs, currentTabId, tabItems));
+  }, [currentTabId]);
+
+  // 4. Tab click
+  const handleTabClick = (id, index: string) => {
+    setCurrentTabId(index);
+    tabClick(index, availableTabs, currentTabId, setCurrentTabId, tabItems);
+  };
+
+  // 5. Render: TabContext + Tabs (scrollable) + TabPanels (no heading)
+  return (
+    <TabContext value={currentTabId.toString()}>
+      <TabBar onChange={handleTabClick} value={currentTabId} variant="scrollable">
+        {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>
+  );
+}
+```
+
+> **Key difference from `DetailsSubTabs`:** No heading, uses `'tabsSubs'` identifier, `getVisibleTabs` called directly (not in useEffect).
+
 ## Behavioral Contract
 
 1. **Extract deferred tabs:** `deferLoadedTabs = Children.toArray(children)[0]`.

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

@@ -24,6 +24,55 @@ Renders two child components side by side in a responsive grid. Column widths ar
 
 All three extend `PConnProps`. Children are received as React `children` (not via `getPConnect().getChildren()`).
 
+## Component Skeletons
+
+### TwoColumn (core)
+
+```typescript
+import type { PropsWithChildren, ReactElement } from 'react';
+import type { GridSize } from '@mui/material/Grid';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface TwoColumnProps extends PConnProps {
+  templateCol?: string;
+}
+
+export default function TwoColumn(props: PropsWithChildren<TwoColumnProps>) {
+  const { children, templateCol = '1fr 1fr' } = props;
+  const childrenToRender = children as ReactElement[];
+
+  if (childrenToRender.length !== 2) {
+    console.error(`TwoColumn sees ${childrenToRender.length} children (expected 2)`);
+  }
+
+  // Parse templateCol to compute column sizes (12-grid)
+  const colAArray = templateCol.replaceAll(/[a-z]+/g, '').split(/\s/).map(Number);
+  const totalCols = colAArray.reduce((v, itm) => itm + v, 0);
+  const ratio = 12 / totalCols;
+  const aSize = (ratio * colAArray[0]) as GridSize;
+  const bSize = (ratio * colAArray[1]) as GridSize;
+
+  return (
+    <GridContainer spacing={1}>
+      <GridItem xs={12} md={aSize} className="col-styles">{childrenToRender[0]}</GridItem>
+      <GridItem xs={12} md={bSize} className="col-styles">{childrenToRender[1]}</GridItem>
+    </GridContainer>
+  );
+}
+// CSS: .col-styles { display: grid; gap: 1rem; align-content: baseline; }
+```
+
+### TwoColumnPage
+
+```typescript
+const TwoColumn = getComponentFromRegistry('TwoColumn');
+return <TwoColumn {...props} />;
+```
+
+### TwoColumnTab
+
+Identical implementation to `TwoColumn` — same `templateCol` parsing, same grid output.
+
 ## Props
 
 | Prop          | Type          | Required | Description                                                                    |

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

@@ -26,6 +26,77 @@ Provides the top navigation bar for WSS (Web Self-Service) portals. Responsive:
 | `operatorInfo`      | `object`   | No       | `{ displayName: string }` — for avatar initials       |
 | `getPConnect`       | `function` | Yes      | PConnect getter                                       |
 
+## Component Skeleton
+
+```typescript
+import { useState } from 'react';
+import { logout } from '@pega/auth/lib/sdk-auth-manager';
+import type { PConnProps } from '@pega/sdk-react';
+import './WssNavBar.css';
+
+interface WssNavBarProps extends PConnProps {
+  appInfo: any;
+  navLinks: any[];
+  operator: { currentUserInitials: string };
+  navDisplayOptions: { alignment: string; position: string };
+  portalName: string;
+  imageSrc: string;
+  fullImageSrc: string;
+  appName: any;
+}
+
+export default function WssNavBar(props: WssNavBarProps) {
+  const { appInfo, navLinks, operator, navDisplayOptions } = props;
+  const { alignment, position } = navDisplayOptions;
+
+  // 1. Menu state
+  const [anchorElNav, setAnchorElNav] = useState(null);  // hamburger menu
+  const [anchorElUser, setAnchorElUser] = useState(null); // user menu
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+
+  // 2. Nav links content (hidden on mobile, shown on desktop)
+  const navLinksContent = (
+    <Box sx={{ display: { xs: 'none', md: 'flex' }, justifyContent: alignment }}>
+      {navLinks.map(link => <Button key={link.text} onClick={link.onClick}>{link.text}</Button>)}
+    </Box>
+  );
+
+  // 3. Render: AppBar > Toolbar > (logo + hamburger(mobile) + navLinks(desktop) + avatar)
+  return (
+    <AppBar position="static">
+      <Toolbar>
+        {/* App logo + name */}
+        <Button onClick={appInfo.onClick}>
+          <img src={appInfo.imageSrc} />
+          <span>{appInfo.appName}</span>
+        </Button>
+
+        {/* Hamburger (mobile only) */}
+        <HamburgerButton sx={{ display: { xs: 'flex', md: 'none' } }}
+          onClick={e => setAnchorElNav(e.currentTarget)} />
+        <MobileMenu anchorEl={anchorElNav} open={Boolean(anchorElNav)}
+          onClose={() => setAnchorElNav(null)}>
+          {navLinks.map(link => <MenuItem key={link.text} onClick={link.onClick}>{link.text}</MenuItem>)}
+        </MobileMenu>
+
+        {/* Nav links inline (position === 'inline') */}
+        {position === 'inline' && navLinksContent}
+
+        {/* Operator avatar + logout menu */}
+        <Avatar onClick={e => setAnchorElUser(e.currentTarget)}>{operator.currentUserInitials}</Avatar>
+        <UserMenu anchorEl={anchorElUser} open={Boolean(anchorElUser)}
+          onClose={() => setAnchorElUser(null)}>
+          <MenuItem onClick={logout}>{localizedVal('Log off', 'AppShell')}</MenuItem>
+        </UserMenu>
+      </Toolbar>
+
+      {/* Nav links below (position === 'below') */}
+      {position === 'below' && navLinksContent}
+    </AppBar>
+  );
+}
+```
+
 ## Behavioral Contract
 
 ### Responsive Layout

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

@@ -118,7 +118,7 @@ export default function MyWidget(props: MyWidgetProps) {
 
 The PCore data-fetching logic (all `PCore.*` calls) is always identical regardless of design system. Only the `// [DS RENDER]` section changes.
 
-**1. Check the component-specific skill file** — `.claude/skills/widget-skills/<ComponentName>.md` contains a **Design System Mapping** table where available. Use it as a starting point.
+**1. Check the component-specific skill file** — `{{SKILL_DIR}}/widget-skills/<ComponentName>.md` contains a **Design System Mapping** table where available. Use it as a starting point.
 
 **2. If the chosen design system is not listed** — use the component purpose description to identify the appropriate DS primitives (card, list, table, button, badge, etc.).
 

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

@@ -26,6 +26,43 @@ Renders an announcement card with a heading, description text, optional bullet l
 | `whatsnewlink` | `string`   | No       | URL for the "See what's new" button; if absent, button is not rendered |
 | `getPConnect`  | `function` | Yes      | PConnect getter                                                        |
 
+## Component Skeleton
+
+```typescript
+import type { PConnProps } from '@pega/sdk-react';
+
+interface AppAnnouncementProps extends PConnProps {
+  header?: string;
+  description?: string;
+  datasource?: any;
+  whatsnewlink?: string;
+}
+
+export default function AppAnnouncement(props: AppAnnouncementProps) {
+  const { header = '', description = '', datasource = [], whatsnewlink = '' } = props;
+
+  // 1. Extract item names from datasource
+  const details = datasource?.source?.map(item => item.name) || [];
+
+  // 2. Render: Card with left accent border + vertical margin for sibling spacing
+  //    ⚠️ margin '0.5rem 0' is REQUIRED — without it the card has no top spacing
+  return (
+    <Card style={{ borderLeft: '6px solid var(--app-primary-light-color)', margin: '0.5rem 0' }}>
+      <CardHeader><h6>{header}</h6></CardHeader>
+      <CardContent>
+        <p>{description}</p>
+        {details.map((itm, idx) => <p key={idx}>- {itm}</p>)}
+      </CardContent>
+      {whatsnewlink && (
+        <CardActions>
+          <Button onClick={() => window.open(whatsnewlink, '_blank')}>See what's new</Button>
+        </CardActions>
+      )}
+    </Card>
+  );
+}
+```
+
 ## Behavioral Contract
 
 1. **Item list extraction:** If `datasource` is provided and `datasource.source` is a non-empty array, extract item names and render them as a bullet list. Each array item is expected to have a `name` property.
@@ -46,7 +83,7 @@ Renders an announcement card with a heading, description text, optional bullet l
 
 **CSS-only implementation notes:**
 
-- Card: `border-left: 6px solid var(--app-primary-light-color); border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.12)`.
+- Card: `border-left: 6px solid var(--app-primary-light-color); border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.12); margin: 0.5rem 0` — the vertical margin ensures consistent spacing with sibling widgets (e.g., Pulse).
 - Card header: `padding: 12px 16px; font-weight: 600`.
 - Card content: `padding: 0 16px 16px`.
 - Bullet list: `padding-left: 1.5rem; margin: 0.5rem 0`.

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

@@ -33,6 +33,64 @@ Renders a file attachment control within a Pega form. Users can upload one or mu
 | `helperText`       | `string`            | No                         | Helper text shown below the control                                          |
 | `getPConnect`      | `function`          | Yes                        | PConnect getter                                                              |
 
+## Component Skeleton
+
+This is a complex form-field widget (~400 lines). Key structural outline:
+
+```typescript
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { validateMaxSize } from '../../helpers/attachmentShared';
+import { clearFieldErrorMessages, deleteAttachments, getIconFromFileType, insertAttachments,
+  useDeepMemo, useFileDownload, validateFileExtension } from './AttachmentUtils';
+import type { PConnFieldProps } from '@pega/sdk-react';
+import './Attachment.css';
+
+interface AttachmentProps extends Omit<PConnFieldProps, 'value'> {
+  value: any; allowMultiple: boolean | string; extensions: string;
+  editMode: string; isTableFormatter: boolean;
+}
+
+export default function Attachment(props: AttachmentProps) {
+  const { value, getPConnect, label, validatemessage, extensions, displayMode, helperText, editMode, isTableFormatter } = props;
+  let { required, disabled, allowMultiple } = props;
+  // Coerce string booleans
+  [required, disabled, allowMultiple] = [required, disabled, allowMultiple].map(
+    p => p === true || (typeof p === 'string' && p === 'true')
+  );
+  const pConn = getPConnect();
+  const actionSequencer = useMemo(() => PCore.getActionsSequencer(), []);
+  const contextName = pConn.getContextName();
+
+  // 1. Normalize attachment data (old vs new format)
+  const { attachments, isOldAttachment } = PCore.getAttachmentUtils().prepareAttachmentData(value);
+  // 2. Set reference list
+  let valueRef = (pConn.getStateProps() as any).value;
+  pConn.setReferenceList(`.${valueRef}`);
+
+  // 3. State: files array, error tracking, upload toggle
+  const [files, setFiles] = useState(attachments);
+  const [toggleUploadBegin, setToggleUploadBegin] = useState(false);
+
+  // 4. deleteFile — removes from state, calls deleteAttachments, deregisters sequencer
+  // 5. onFileAdded — validates extension + size, adds to files, sets toggleUploadBegin
+  // 6. uploadFiles — registerBlockingAction, uploadAttachment per file, insertAttachments on success
+  // 7. useEffect: trigger uploadFiles when toggleUploadBegin changes
+  // 8. useEffect: subscribe to ASSIGNMENT_SUBMISSION for state override
+
+  // 9. Render: label + upload button + validation message + file list with progress/delete
+  return (
+    <div className="file-upload-container">
+      <label>{label}</label>
+      {/* Upload button (hidden input + styled button) */}
+      {/* Validation/helper text */}
+      {/* File list: icon + name + meta + progress + delete button */}
+    </div>
+  );
+}
+```
+
+> **Key patterns:** Action sequencer blocking (`registerBlockingAction`/`deRegisterBlockingAction`), `prepareAttachmentData` normalization, per-file progress tracking, `insertAttachments`/`deleteAttachments` helpers for Redux state.
+
 ## Behavioral Contract
 
 ### Attachment Format Detection

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

@@ -22,6 +22,69 @@ Renders a table of case events sourced from the `D_pyWorkHistory` data page. Sho
 | ------------- | ---------- | -------- | ----------------------------------------------------- |
 | `getPConnect` | `function` | Yes      | PConnect getter — used to resolve case ID and context |
 
+## Component Skeleton
+
+```typescript
+import { useEffect, useRef, useState } from 'react';
+import isDeepEqual from 'fast-deep-equal/react';
+import { Utils } from '../../helpers/utils';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface CaseHistoryProps extends PConnProps {}
+
+export default function CaseHistory(props: CaseHistoryProps) {
+  const { getPConnect } = props;
+  const thePConn = getPConnect();
+  const rowData = useRef([]);
+  const [waitingForData, setWaitingForData] = useState(true);
+
+  const caseID = thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID, '');
+  const context = thePConn.getContextName();
+
+  const displayedColumns = [
+    { label: thePConn.getLocalizedValue('Date', '', ''), type: 'DateTime', fieldName: 'pxTimeCreated' },
+    { label: thePConn.getLocalizedValue('Description', '', ''), type: 'TextInput', fieldName: 'pyMessageKey' },
+    { label: thePConn.getLocalizedValue('Performed by', '', ''), type: 'TextInput', fieldName: 'pyPerformer' },
+  ];
+
+  // 1. Fetch D_pyWorkHistory on mount
+  useEffect(() => {
+    let active = true;
+    PCore.getDataApiUtils().getData('D_pyWorkHistory',
+      { dataViewParameters: [{ CaseInstanceKey: caseID }] }, context
+    ).then((historyJSON: any) => {
+      if (active) {
+        computeRowData(historyJSON.data.data);
+        setWaitingForData(false);
+      }
+    });
+    return () => { active = false; };
+  }, []);
+
+  // 2. computeRowData — format dates, use isDeepEqual to prevent unnecessary updates
+  function computeRowData(rows) {
+    const theRowData = rows.map(row => displayedColumns.map(col =>
+      col.type === 'DateTime' ? Utils.generateDateTime(row[col.fieldName], 'DateTime-Short') : row[col.fieldName]
+    ));
+    if (!isDeepEqual(theRowData, rowData.current)) rowData.current = theRowData;
+  }
+
+  // 3. Render: Table with 3 columns, '---' for missing values
+  return (
+    <TableContainer>
+      <Table>
+        <TableHead><TableRow>{displayedColumns.map(col => <TableCell key={col.fieldName}>{col.label}</TableCell>)}</TableRow></TableHead>
+        <TableBody>
+          {rowData.current.map((row, i) => (
+            <TableRow key={i}>{row.map((cell, j) => <TableCell key={j}>{cell || '---'}</TableCell>)}</TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
+```
+
 No additional custom props. All data is fetched internally.
 
 ## Behavioral Contract