@pega/sdk 0.0.3 → 0.0.5

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

@@ -1,8 +1,3 @@
----
-description: Template component skill: DynamicTabs
-alwaysApply: false
----
-
 # Skill: DynamicTabs
 
 Data-driven tab template. Renders tabs dynamically from a `referenceList` data source — one tab per row in the list, with tab labels derived from a configurable property.
@@ -23,10 +18,77 @@ Unlike `SubTabs` or `DetailsSubTabs` where tabs are defined statically in metada
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `referenceList` | `string` | Yes | Property path to the reference list (e.g. `'.pxResults'`) |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop            | Type       | Required | Description                                               |
+| --------------- | ---------- | -------- | --------------------------------------------------------- |
+| `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
 
@@ -42,14 +104,17 @@ Unlike `SubTabs` or `DetailsSubTabs` where tabs are defined statically in metada
 ```
 referenceListData = pConnect.getValue(referenceList + '.pxResults')
 ```
+
 Returns an array of row objects.
 
 ### Tab Views
 
 For each row index `i`:
+
 ```
 tabView = buildView(pConnect, i, '')
 ```
+
 Memoized — recalculate only when `referenceListData` changes.
 
 ### State
@@ -68,6 +133,7 @@ Memoized — recalculate only when `referenceListData` changes.
 Identical tab bar appearance to `SubTabs`.
 
 **CSS-only implementation notes:**
+
 - Same tab bar and panel styles as `SubTabs.md`.
 - Tab count is dynamic — do not hard-code tab widths.
 
@@ -92,15 +158,16 @@ Identical tab bar appearance to `SubTabs`.
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
+| Design System      | Recommended Component                            |
+| ------------------ | ------------------------------------------------ |
 | Default (CSS only) | Custom tab bar, dynamically generated from array |
-| MUI | `<TabContext>` + `<Tabs>` + `<TabPanel>` |
-| Ant Design | `<Tabs items={dynamicItems}>` |
-| Chakra UI | `<Tabs>` with dynamic `<TabList>/<TabPanels>` |
-| Shadcn/ui | `<Tabs>` with mapped triggers and content |
+| MUI                | `<TabContext>` + `<Tabs>` + `<TabPanel>`         |
+| Ant Design         | `<Tabs items={dynamicItems}>`                    |
+| Chakra UI          | `<Tabs>` with dynamic `<TabList>/<TabPanels>`    |
+| Shadcn/ui          | `<Tabs>` with mapped triggers and content        |
 
 When implementing in a specific design system:
+
 - `tablabelProp` resolution via `PCore.getAnnotationUtils().getPropertyName()` is required — do not hardcode the label field
 - `buildView(pConnect, rowIndex, '')` generates the content for each tab — the empty string third arg means no specific child config lookup
 - Tab count is entirely data-driven — handle 0, 1, and many tab cases

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

@@ -0,0 +1,231 @@
+# Skill: FieldGroupTemplate
+
+Repeating field group template. Renders a list of field group rows from a reference list, supporting add/delete row actions and a read-only display mode.
+
+> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
+
+---
+
+> ⚠️ **CRITICAL — DO NOT SIMPLIFY THIS COMPONENT**
+>
+> This template manages a repeating list of field groups with add/delete actions. It MUST NOT be reduced to a simple delegation to `FieldGroup` or `FieldGroupList`. The following are MANDATORY:
+>
+> 1. `getReferenceList(pConn)` from `../../helpers/field-group-utils` — resolves the reference list path
+> 2. `buildView(pConn, index, lookForChildInConfig)` from `../../helpers/field-group-utils` — builds each row's view
+> 3. `pConn.setReferenceList(resolvedList)` — sets the reference list on PConnect
+> 4. `pConn.getListActions().initDefaultPageInstructions(resolvedList)` — initializes list instructions
+> 5. `useLayoutEffect` for list initialization (not useEffect)
+> 6. Add/delete record handlers using `pConn.getListActions().insert()` and `.deleteEntry()`
+> 7. `useMemo` for `MemoisedChildren` built from `referenceList.map(...)` + `buildView`
+> 8. `allowActions` handling (allowAdd, allowDelete)
+> 9. `isReadonlyMode` check switching between FieldGroupList (edit) and FieldGroup (read-only)
+>
+> **Minimum Implementation Checklist:**
+>
+> - [ ] `getReferenceList` and `buildView` imported from `../../helpers/field-group-utils`
+> - [ ] `pConn.getListActions()` used for insert/delete
+> - [ ] `useLayoutEffect` for `initDefaultPageInstructions`
+> - [ ] `addRecord` and `deleteFieldGroupItem` handlers
+> - [ ] Edit mode → `<FieldGroupList items={...} onAdd={...} onDelete={...} />`
+> - [ ] Read-only mode → `<FieldGroup>` with `buildView` children
+> - [ ] `allowActions` / `allowTableEdit` props respected
+
+---
+
+## Component Purpose
+
+Renders a repeating list of field group rows sourced from a PConnect reference list. In edit mode, rows can be added and deleted via list actions. In read-only mode (DISPLAY_ONLY), delegates to a read-only `FieldGroup` renderer. Each row is built via `buildView`.
+
+## Pega Metadata
+
+- **Registration key:** `FieldGroupTemplate` (in `component-map.ts`)
+- **Category:** Form template — repeating
+- **Extends:** `PConnProps`
+
+## Props
+
+| Prop             | Type       | Required | Description                                                      |
+| ---------------- | ---------- | -------- | ---------------------------------------------------------------- |
+| `label`          | `string`   | Yes      | Section heading                                                  |
+| `showLabel`      | `boolean`  | No       | Whether to show the heading. Default `true`                      |
+| `fieldHeader`    | `string`   | No       | Property ref for the dynamic row heading. E.g. `'.pyStatusWork'` |
+| `allowTableEdit` | `boolean`  | No       | Whether to show add/delete row controls. Default `true`          |
+| `displayMode`    | `string`   | No       | `'DISPLAY_ONLY'` triggers read-only rendering                    |
+| `readOnly`       | `boolean`  | No       | Alternative read-only flag                                       |
+| `getPConnect`    | `function` | Yes      | PConnect getter                                                  |
+
+## Component Skeleton
+
+```typescript
+import { useLayoutEffect, useMemo } from 'react';
+import { getReferenceList, buildView } from '../../helpers/field-group-utils';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface FieldGroupTemplateProps extends PConnProps {
+  referenceList?: any[];
+  contextClass: string;
+  renderMode?: string;
+  heading?: string;
+  lookForChildInConfig?: boolean;
+  displayMode?: string;
+  fieldHeader?: string;
+  allowTableEdit: boolean;
+  allowActions?: any;
+}
+
+export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
+  const FieldGroup = getComponentFromRegistry('FieldGroup');
+  const FieldGroupList = getComponentFromRegistry('FieldGroupList');
+
+  const {
+    referenceList = [], renderMode, contextClass, getPConnect,
+    lookForChildInConfig, heading = '', displayMode, fieldHeader,
+    allowActions, allowTableEdit: allowAddEdit,
+  } = props;
+  const pConn = getPConnect();
+  const resolvedList = getReferenceList(pConn);
+  pConn.setReferenceList(resolvedList);
+  const pageReference = `${pConn.getPageReference()}${resolvedList}`;
+  const isReadonlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY';
+  const HEADING = heading ?? 'Row';
+
+  // 1. Resolve allowAdd/allowDelete from allowActions or allowTableEdit
+  const hasAllowActions = Object.keys(allowActions ?? {}).length > 0;
+  const { allowAdd: actionAdd, allowDelete: actionDelete } = allowActions ?? {};
+  const allowAdd = hasAllowActions ? (actionAdd ?? true) : (allowAddEdit ?? true);
+  const allowDelete = hasAllowActions ? (actionDelete ?? true) : (allowAddEdit ?? true);
+
+  // 2. Init page instructions on mount (edit mode only)
+  useLayoutEffect(() => {
+    if (!isReadonlyMode) {
+      pConn.getListActions().initDefaultPageInstructions(resolvedList);
+    }
+  }, [referenceList?.length]);
+
+  // 3. Dynamic header per row
+  const getDynamicHeaderProp = (item, index) => {
+    if (fieldHeader === 'propertyRef' && heading && item[heading.substring(1)])
+      return item[heading.substring(1)];
+    return `Row ${index + 1}`;
+  };
+
+  // 4. Add/delete handlers
+  const addRecord = () => {
+    if (PCore.getPCoreVersion()?.includes('8.7'))
+      pConn.getListActions().insert({ classID: contextClass }, referenceList.length, pageReference);
+    else pConn.getListActions().insert({}, referenceList.length);
+  };
+  const deleteRecord = (index) => {
+    if (PCore.getPCoreVersion()?.includes('8.7'))
+      pConn.getListActions().deleteEntry(index, pageReference);
+    else pConn.getListActions().deleteEntry(index);
+  };
+
+  // 5. Edit mode: auto-add first row if empty, render FieldGroupList
+  if (!isReadonlyMode) {
+    if (referenceList.length === 0 && allowAdd) addRecord();
+    const items = useMemo(() => referenceList.map((item, index) => ({
+      id: index,
+      name: fieldHeader === 'propertyRef' ? getDynamicHeaderProp(item, index) : `${HEADING} ${index + 1}`,
+      children: buildView(pConn, index, lookForChildInConfig),
+    })), [referenceList?.length]);
+    return <FieldGroupList items={items}
+      onAdd={allowAdd ? addRecord : undefined}
+      onDelete={allowDelete ? deleteRecord : undefined} />;
+  }
+
+  // 6. Read-only mode: FieldGroup per row
+  pConn.setInheritedProp('displayMode', 'DISPLAY_ONLY');
+  const readOnlyList = useMemo(() => referenceList.map((item, index) => (
+    <FieldGroup key={item[heading] || `field-group-row-${index}`}
+      name={fieldHeader === 'propertyRef' ? getDynamicHeaderProp(item, index) : `${HEADING} ${index + 1}`}>
+      {buildView(pConn, index, lookForChildInConfig)}
+    </FieldGroup>
+  )), []);
+  return <div>{readOnlyList}</div>;
+}
+```
+
+## Behavioral Contract
+
+### Read-Only Mode
+
+If `displayMode === 'DISPLAY_ONLY'` or `readOnly === true`:
+
+1. Set `setInheritedProp('DISPLAY_ONLY', true)` on the pConn.
+2. Render `<FieldGroup>` — the DSE component that shows data in a read-only layout.
+
+### Edit Mode
+
+1. **Get reference list:** `resolvedList = getReferenceList(pConn)` — extracts the array of row data objects.
+2. **Set reference list:** `pConn.setReferenceList(resolvedList)` — ensures the pConn has the resolved list.
+3. **Build row views:** For each row index `i`, call `buildView(pConn, i, true)` to get the PConnect view for that row.
+4. **Render `<FieldGroupList>`** — the DSE component for edit mode, receiving:
+   - `resolvedList` for row count
+   - Row views as children
+   - `onAdd`: calls `pConn.getListActions().insert({})`
+   - `onDelete(index)`: calls `pConn.getListActions().deleteEntry(index)`
+   - `fieldHeader`: evaluated property ref for dynamic row heading
+   - `allowActions`: from `allowTableEdit` prop (controls visibility of add/delete buttons)
+
+### `allowActions` Override
+
+If the field group is inside a read-only context (parent has set `readOnly` or `DISPLAY_ONLY`), `allowActions` is forced to `false` regardless of `allowTableEdit`.
+
+## Visual Specifications
+
+### Edit Mode
+
+- Section heading (`label`) at top (if `showLabel`).
+- List of row sections, each with:
+  - Dynamic heading from `fieldHeader` property value (e.g. `"Active"`, `"Pending"`).
+  - Row fields in a grid layout.
+  - Delete button (trash icon) per row.
+- Add row button at the bottom (e.g. `"+ Add row"`).
+
+### Read-Only Mode
+
+- Section heading at top (if `showLabel`).
+- Flat list of rows — no add/delete controls.
+
+**CSS-only implementation notes:**
+
+- Row section: `border: 1px solid var(--border-color); border-radius: 4px; padding: 1rem; margin-bottom: 0.5rem`.
+- Add button: text button, below the last row.
+- Delete button: icon button, top-right of each row section.
+
+## Edge Cases & Special Logic
+
+- `getReferenceList(pConn)` returns `undefined` if the reference list is not yet loaded — guard and render empty list.
+- `buildView(pConn, index, true)` — third argument `lookForChildInConfig=true` — required for embedded field groups.
+- Row index must be passed to `deleteEntry` as a number (not string).
+- `fieldHeader` is a property ref like `'.pyStatusWork'` — evaluate it per-row via `pConn.getValue(fieldHeader, index)` to get the display label for each row heading.
+- `FieldGroupList` and `FieldGroup` are DSE (design system extension) components registered in the component registry.
+
+## Dependencies
+
+- `getReferenceList`, `buildView` from `../../helpers/field-group-utils`
+- `getComponentFromRegistry('FieldGroupList')` — edit mode renderer
+- `getComponentFromRegistry('FieldGroup')` — read-only renderer
+- `PConnectComponent` from `@pega/sdk-react` — used inside `buildView`
+
+## Design System Mapping
+
+**UI control type:** Repeating list of grouped form sections with add/delete row management.
+
+Listed design systems are examples only.
+
+| Design System      | Recommended Component                                              |
+| ------------------ | ------------------------------------------------------------------ |
+| Default (CSS only) | Custom row card list with add/delete buttons                       |
+| MUI                | `<Paper>` per row + `<IconButton>` for delete + `<Button>` for add |
+| Ant Design         | `<Form.List>` with `<Card>` per row                                |
+| Chakra UI          | Custom repeating section with `<Box>` rows                         |
+| Shadcn/ui          | Custom list with `<Card>` per row + `<Button variant='ghost'>`     |
+
+When implementing in a specific design system:
+
+- The add/delete controls must be hidden when `allowActions` is false
+- Row heading is dynamic — evaluate `fieldHeader` property ref per row
+- `buildView` generates child PConnect views — render them inside each row section

package/templates/react-sdk-reference/{.cursor/rules/skills/template-skills/HierarchicalForm.mdrules → .ai-common/skills/template-skills/HierarchicalForm.md}

@@ -1,8 +1,3 @@
----
-description: Template component skill: HierarchicalForm
-alwaysApply: false
----
-
 # Skill: HierarchicalForm
 
 Multi-step tabbed form template. Renders form sections as horizontal tabs with per-tab validation error badges and persisted active tab navigation.
@@ -23,17 +18,63 @@ Renders a multi-step form where each section is a tab. Tabs display error badges
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode[]` | Yes | One child per tab section |
-| `instructions` | `string` | No | HTML instruction text shown above the tab bar |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop           | Type          | Required | Description                                   |
+| -------------- | ------------- | -------- | --------------------------------------------- |
+| `children`     | `ReactNode[]` | Yes      | One child per tab section                     |
+| `instructions` | `string`      | No       | HTML instruction text shown above the tab bar |
+| `getPConnect`  | `function`    | Yes      | PConnect getter                               |
+
+## Component Skeleton
+
+```typescript
+import { type PropsWithChildren } from 'react';
+import { useHierarchicalForm, type HierarchicalFormProps } from './hooks';
+
+export default function HierarchicalForm(props: PropsWithChildren<HierarchicalFormProps>) {
+  // 1. Custom hook handles: active tab, tab click, error counts, instructions, processed tabs
+  const { currentTabId, handleTabClick, processedTabs, instructions } = useHierarchicalForm(props);
+
+  // 2. Guard: no visible tabs
+  if (!currentTabId) return null;
+
+  // 3. Render: instructions + TabContext + Tabs (with error badges) + TabPanels
+  return (
+    <FlexColumn>
+      {instructions && <div dangerouslySetInnerHTML={{ __html: instructions }} />}
+      <TabContext value={currentTabId.toString()}>
+        <TabBar onChange={handleTabClick} value={currentTabId.toString()} variant="scrollable">
+          {processedTabs.map(tab => {
+            const tabLabel = tab.name || tab.label;
+            return (
+              <Tab key={tab.id} value={tab.id?.toString()} label={
+                tab.errors
+                  ? <Tooltip title={`${tabLabel} has errors`}>
+                      <span>{tabLabel} <Badge badgeContent={tab.errors} color="error" /></span>
+                    </Tooltip>
+                  : tabLabel
+              } />
+            );
+          })}
+        </TabBar>
+        {processedTabs.map(tab => (
+          <TabPanel key={tab.id} value={tab.id?.toString()} tabIndex={+tab.id} keepMounted>
+            {tab.content || 'No content exists'}
+          </TabPanel>
+        ))}
+      </TabContext>
+    </FlexColumn>
+  );
+}
+```
+
+> **Key implementation note:** All tab logic (active tab persistence, error counting, tab filtering) is encapsulated in the `useHierarchicalForm` hook. Implement that hook separately — it uses `PCore.getNavigationUtils()` for tab persistence and `useGetTabsCount` for error tracking.
 
 ## Behavioral Contract
 
 ### Hook: `useHierarchicalForm`
 
 `useHierarchicalForm(getPConnect, numTabs)` returns:
+
 - `activeTabId`: currently selected tab index (string, e.g. `'0'`)
 - `setActiveTabId`: setter for `activeTabId`
 - `tabErrorCounts`: `Record<string, number>` — error count per tab index key
@@ -73,12 +114,13 @@ Internally it calls `useGetTabsCount(getPConnect)` to compute `tabErrorCounts`.
 
 ### Tab Bar
 
-| Property | Value |
-|----------|-------|
-| Orientation | Horizontal |
+| Property    | Value                                                  |
+| ----------- | ------------------------------------------------------ |
+| Orientation | Horizontal                                             |
 | Error badge | Red MUI Badge with tooltip showing error count message |
 
 **CSS-only implementation notes:**
+
 - Tab bar: same as `DetailsSubTabs` — `display: flex; border-bottom: 2px solid var(--divider)`.
 - Error badge: red circle badge overlaid top-right of the tab label text.
 - Instruction text: `padding: 0.5rem 0; margin-bottom: 0.5rem; font-size: 0.875rem`.
@@ -104,15 +146,16 @@ Internally it calls `useGetTabsCount(getPConnect)` to compute `tabErrorCounts`.
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | Custom tab bar + CSS badge (red circle via pseudo-element) |
-| MUI | `<Tabs>` + `<Badge>` + `<Tooltip>` + `<TabContext>/<TabPanel>` |
-| Ant Design | `<Tabs>` with custom `tabBarExtraContent` for error badges |
-| Chakra UI | `<Tabs>` + `<Badge colorScheme='red'>` inside tab label |
-| Shadcn/ui | `<Tabs>` + custom badge overlay on tab trigger |
+| Design System      | Recommended Component                                          |
+| ------------------ | -------------------------------------------------------------- |
+| Default (CSS only) | Custom tab bar + CSS badge (red circle via pseudo-element)     |
+| MUI                | `<Tabs>` + `<Badge>` + `<Tooltip>` + `<TabContext>/<TabPanel>` |
+| Ant Design         | `<Tabs>` with custom `tabBarExtraContent` for error badges     |
+| Chakra UI          | `<Tabs>` + `<Badge colorScheme='red'>` inside tab label        |
+| Shadcn/ui          | `<Tabs>` + custom badge overlay on tab trigger                 |
 
 When implementing in a specific design system:
+
 - Error badge is mandatory — always show error counts when `tabErrorCounts[id] > 0`
 - Active tab must be persisted via `PCore.getNavigationUtils()` for correct navigation behavior
 - Instructions HTML renders above the entire tab bar, not per-tab

package/templates/react-sdk-reference/{.cursor/rules/skills/template-skills/InlineDashboard.mdrules → .ai-common/skills/template-skills/InlineDashboard.md}

@@ -1,8 +1,3 @@
----
-description: Template component skill: InlineDashboard
-alwaysApply: false
----
-
 # Skill: InlineDashboard
 
 Inline dashboard template. Renders a dashboard with a title, a main content area, and an optional filter panel whose position is configurable.
@@ -23,12 +18,53 @@ Renders an inline dashboard layout consisting of a title heading, a main content
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `title` | `string` | No | Dashboard title displayed above the content area |
-| `filterPosition` | `string` | No | Filter panel position: `'block-start'` (above) or other (side). Default: side |
-| `children` | `ReactNode[]` | Yes | `children[0]` = main content, `children[1]` = filter panel |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop             | Type          | Required | Description                                                                   |
+| ---------------- | ------------- | -------- | ----------------------------------------------------------------------------- |
+| `title`          | `string`      | No       | Dashboard title displayed above the content area                              |
+| `filterPosition` | `string`      | No       | Filter panel position: `'block-start'` (above) or other (side). Default: side |
+| `children`       | `ReactNode[]` | Yes      | `children[0]` = main content, `children[1]` = filter panel                    |
+| `getPConnect`    | `function`    | Yes      | PConnect getter                                                               |
+
+## Component Skeleton
+
+```typescript
+import type { PropsWithChildren, ReactElement } from 'react';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface InlineDashboardProps extends PConnProps {
+  title: string;
+  filterPosition?: string;
+}
+
+export default function InlineDashboard(props: PropsWithChildren<InlineDashboardProps>) {
+  const { children, title, filterPosition } = props;
+  const childrenToRender = children as ReactElement[];
+
+  // 1. Direction for side layout
+  const direction = filterPosition === 'inline-start' ? 'row-reverse' : 'row';
+
+  // 2. Render: title + layout based on filterPosition
+  return (
+    <>
+      <Heading variant="h4">{title}</Heading>
+
+      {filterPosition === 'block-start' ? (
+        // Stacked: filter above content (column-reverse so filter renders visually above)
+        <GridContainer direction="column-reverse">
+          <GridItem xs={12}>{childrenToRender[0]}</GridItem>
+          <GridItem id="filters" xs={12}>{childrenToRender[1]}</GridItem>
+        </GridContainer>
+      ) : (
+        // Side: content left, filters right (or reversed if inline-start)
+        <GridContainer direction={direction}>
+          <GridItem xs={9}>{childrenToRender[0]}</GridItem>
+          <GridItem id="filters" xs={3}>{childrenToRender[1]}</GridItem>
+        </GridContainer>
+      )}
+    </>
+  );
+}
+```
 
 ## Behavioral Contract
 
@@ -39,6 +75,7 @@ Renders an inline dashboard layout consisting of a title heading, a main content
 ### Filter Position: `'block-start'`
 
 Stacked layout — filter panel above main content:
+
 - `<Grid container direction='column-reverse'>` (reverse so filter renders visually above content).
 - Filter panel: `<Grid id='filters' size={{ xs: 12 }}>`.
 - Main content: `<Grid size={{ xs: 12 }}>`.
@@ -46,6 +83,7 @@ Stacked layout — filter panel above main content:
 ### Filter Position: Other (side)
 
 Side-by-side layout — main content left, filters right:
+
 - `<Grid container direction={...}>` (optionally `row-reverse` based on position value).
 - Main content: `<Grid size={{ xs: 9 }}>`.
 - Filter panel: `<Grid id='filters' size={{ xs: 3 }}>`.
@@ -71,6 +109,7 @@ Side-by-side layout — main content left, filters right:
 ```
 
 **CSS-only implementation notes:**
+
 - Title: `font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem`.
 - Block-start: `display: flex; flex-direction: column; gap: 1rem` (filter div first in DOM but ordered last visually with `order: -1`).
 - Side: `display: grid; grid-template-columns: 3fr 1fr; gap: 1rem`.
@@ -95,15 +134,16 @@ Side-by-side layout — main content left, filters right:
 
 Listed design systems are examples only.
 
-| Design System | Title | Content/Filter Grid |
-|---|---|---|
-| Default (CSS only) | `<h2>` | CSS grid or flexbox |
-| MUI | `<Typography variant='h4'>` | `<Grid container>` |
-| Ant Design | `<Typography.Title level={2}>` | `<Row>/<Col>` |
-| Chakra UI | `<Heading>` | `<Grid>` or `<HStack>` |
-| Shadcn/ui | `<h2>` | Tailwind grid |
+| Design System      | Title                          | Content/Filter Grid    |
+| ------------------ | ------------------------------ | ---------------------- |
+| Default (CSS only) | `<h2>`                         | CSS grid or flexbox    |
+| MUI                | `<Typography variant='h4'>`    | `<Grid container>`     |
+| Ant Design         | `<Typography.Title level={2}>` | `<Row>/<Col>`          |
+| Chakra UI          | `<Heading>`                    | `<Grid>` or `<HStack>` |
+| Shadcn/ui          | `<h2>`                         | Tailwind grid          |
 
 When implementing in a specific design system:
+
 - `filterPosition === 'block-start'` requires stacked layout (12/12) — not side layout (9/3)
 - Filter panel must always have `id='filters'`
 - Title heading (`h4` level) is optional — only render when `title` is provided