@pega/sdk 0.0.5 → 0.0.6

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

@@ -10,30 +10,31 @@ Case view template. Renders the full case workspace: summary sidebar, stages, to
 >
 > This is the most complex Page template (~260 lines in the reference). It MUST NOT be collapsed into a single-line return. The following are MANDATORY in the generated output:
 >
-> 1. `getChildRegionByName()` helper — extract regions by metadata name, NOT by array index
-> 2. `getComponentFromRegistry('VerticalTabs')` — for tab navigation in the sidebar
-> 3. `getComponentFromRegistry('DeferLoad')` — for lazy-loading tab content
-> 4. `getComponentFromRegistry('CaseViewActionsMenu')` — for case actions
-> 5. `useEffect` for `VerticalTabClick` event listener (add + remove on unmount)
-> 6. `useEffect` for `hasNewAttachments` → publish `CASE_ATTACHMENTS_UPDATED`
-> 7. `displayOnlyFA` check from `useContext(StoreContext)` — renders only todo region in focused action mode
-> 8. `activeVertTab` state for tracking which tab is selected
-> 9. `vertTabInfo` + `deferLoadInfo` arrays built from tabs region children — **`vertTabInfo` MUST be `{ name: string; id: number }[]`, NOT a React element**
+> 1. `getChildRegionByName` from `PCore.getSDKUtils().getSDKCaseUtils()` — extract regions by metadata name, NOT by array index, NOT by a custom helper calling `child.getPConnect()`
+> 2. Resolve `VerticalTabs` from the project's component registry — for tab navigation in the sidebar
+> 3. Resolve `DeferLoad` from the project's component registry — for lazy-loading tab content
+> 4. Resolve `CaseViewActionsMenu` from the project's component registry — for case actions
+> 5. Lifecycle effect for `VerticalTabClick` event listener (add + remove on teardown)
+> 6. Lifecycle effect for `hasNewAttachments` → publish `CASE_ATTACHMENTS_UPDATED`
+> 7. `displayOnlyFA` check from the application store context — renders only todo region in focused action mode
+> 8. `activeVertTab` local state for tracking which tab is selected
+> 9. `vertTabInfo` + `deferLoadInfo` obtained from `extractTabsInfo(theTabsRegion)` SDK utility — **`vertTabInfo` MUST be `{ name: string; id: number }[]`, NOT a renderable element**
 > 10. 3-column grid layout: sidebar (3) + main content (6) + utilities (3)
 >
 > **Minimum Implementation Checklist:**
 >
-> - [ ] `getChildRegionByName()` helper function defined
+> - [ ] `getChildRegionByName` and `extractTabsInfo` obtained from `PCore.getSDKUtils().getSDKCaseUtils()`
 > - [ ] All 5 named regions extracted: summary, stages, todo, utilities, tabs
-> - [ ] **Case header card** rendered at top of sidebar with: title (`header` prop), subheader (case ID), action buttons from `availableActions`, CaseViewActionsMenu
+> - [ ] Regions rendered DIRECTLY in the template — NOT passed through the PConnect bridge component
+> - [ ] **Case header card** rendered at top of sidebar with: title (`header` input), subheader (case ID), action buttons from `availableActions`, CaseViewActionsMenu
 > - [ ] Action buttons rendered **dynamically from `caseInfo.availableActions`** — labels localized via `PCore.getLocaleUtils().getLocaleValue()`
 > - [ ] VerticalTabs component rendered with tab config array
 > - [ ] DeferLoad component rendered with `name={deferLoadInfo[activeTab].config.name}` — **NOT the display label**
 > - [ ] **`vertTabInfo` and `deferLoadInfo` are SEPARATE arrays** — never merged into one
 > - [ ] CaseViewActionsMenu rendered **inside the case header card** (NOT standalone)
 > - [ ] displayOnlyFA check returning only todo region
-> - [ ] useEffect for VerticalTabClick event
-> - [ ] useEffect for hasNewAttachments pub/sub
+> - [ ] Lifecycle effect for VerticalTabClick event
+> - [ ] Lifecycle effect for hasNewAttachments pub/sub
 > - [ ] **Stages region in CENTER column** (main), NOT in sidebar
 
 ---
@@ -42,208 +43,73 @@ Case view template. Renders the full case workspace: summary sidebar, stages, to
 
 The primary case workspace template. Extracts named regions from PConnect children by metadata type and name, arranges them in a 3-column responsive grid (3/6/3), handles deferred tab loading, and supports a `displayOnlyFA` mode that shows only the to-do region. Edit actions are triggered via the utilities column.
 
-> **Note:** `ObjectPage` is a direct re-export of `CaseView` — `export { default } from '../CaseView'`. Do not create a separate `ObjectPage` component; register both keys pointing to the same implementation.
+> **Note:** `ObjectPage` is a direct re-export of `CaseView` — the ObjectPage module simply re-exports CaseView's default export. Do not create a separate `ObjectPage` component; register both keys pointing to the same implementation.
 
 ## Pega Metadata
 
 - **Registration key:** `CaseView` and `ObjectPage` (both point to the same component)
 - **Category:** Page template — case workspace
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop            | Type          | Required | Description                                                    |
-| --------------- | ------------- | -------- | -------------------------------------------------------------- |
-| `children`      | `ReactNode[]` | Yes      | Named region children (summary, stages, todo, utilities, tabs) |
-| `displayOnlyFA` | `boolean`     | No       | If true, renders only the to-do region (focused action mode)   |
-| `getPConnect`   | `function`    | Yes      | PConnect getter                                                |
-
-## Component Skeleton
-
-```typescript
-import { type PropsWithChildren, type ReactElement, useContext, useEffect, useState } from 'react';
-import { PegaStoreContext as StoreContext, getComponentFromRegistry } from '@pega/sdk-react';
-import type { PConnProps } from '@pega/sdk-react';
-import { Utils } from '../../helpers/utils';
-
-interface CaseViewProps extends PConnProps {
-  icon: string;
-  subheader: string;
-  header: string;
-  showIconInHeader: boolean;
-  caseInfo: any;
-  lastUpdateCaseTime: any;
-}
-
-export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
-  // 1. Registry lookups
-  const CaseViewActionsMenu = getComponentFromRegistry('CaseViewActionsMenu');
-  const VerticalTabs = getComponentFromRegistry('VerticalTabs');
-  const DeferLoad = getComponentFromRegistry('DeferLoad');
-
-  // 2. Destructure props
-  const {
-    getPConnect, icon = '', header, subheader, children = [],
-    caseInfo: { availableActions = [], availableProcesses = [],
-      hasNewAttachments, caseTypeID = '', caseTypeName = '', caseTypeIcon },
-  } = props;
-  const { lastUpdateCaseTime = getPConnect().getValue('caseInfo.lastUpdateTime') } = props;
-  const currentCaseID = props.caseInfo.ID;
-  const { displayOnlyFA } = useContext<any>(StoreContext);
-  const thePConn = getPConnect();
-
-  // 3. Extract named regions from children by metadata type+name
-  //    IMPORTANT: children may be a single element or array — normalize first
-  const childArr = Array.isArray(children) ? children : [children].filter(Boolean);
-  function getChildRegionByName(inName: string): any {
-    for (const child of childArr as ReactElement[]) {
-      const meta = (child as any)?.props?.getPConnect?.()?.getRawMetadata?.();
-      if (meta?.type?.toLowerCase() === 'region' && meta?.name?.toLowerCase() === inName)
-        return child;
-    }
-    return null;
-  }
-  const theSummaryRegion = getChildRegionByName('summary');
-  const theStagesRegion = getChildRegionByName('stages');
-  const theTodoRegion = getChildRegionByName('todo');
-  const theUtilitiesRegion = getChildRegionByName('utilities');
-  const theTabsRegion = getChildRegionByName('tabs');
-
-  // 4. Build tab info + deferred load info from tabs region children
-  //    ⚠️ CRITICAL: vertTabInfo MUST be an array of { name, id } objects.
-  //    DO NOT pass the React element (theTabsRegion) directly to <VerticalTabs tabconfig={...}>.
-  //    VerticalTabs calls tabconfig.map() — passing a React element causes:
-  //    "TypeError: tabconfig.map is not a function"
-  //
-  //    ⚠️ CRITICAL: vertTabInfo and deferLoadInfo MUST be TWO SEPARATE arrays.
-  //    - vertTabInfo stores { name: LABEL, id } — the DISPLAY LABEL for VerticalTabs UI
-  //    - deferLoadInfo stores { config } — the FULL CONFIG object including config.name
-  //    - DeferLoad's `name` prop MUST use deferLoadInfo[activeTab].config.name
-  //      (the VIEW RULE NAME, e.g., "pyDetailsTabContent")
-  //    - DO NOT pass the display label (e.g., "Details") to DeferLoad — it causes:
-  //      "View not found for the given parameter ID" (404 on /views/Details/refresh)
-  //    - config.label = "Details" (display) ≠ config.name = "pyDetailsTabContent" (view rule)
-  //    DO NOT collapse these into a single array. They serve different purposes.
-  const vertTabInfo: { name: string; id: number }[] = [];
-  const deferLoadInfo: any[] = [];
-  const tabChildren = theTabsRegion?.props?.getPConnect?.().getChildren?.() ?? [];
-  tabChildren.forEach((tabComp, index) => {
-    const config = tabComp.getPConnect?.().getConfigProps?.() ?? tabComp.getPConnect?.().getRawMetadata?.()?.config ?? {};
-    let label = config.label || '';
-    if (!label && config.inheritedProps) config.inheritedProps.forEach(ip => { if (ip.prop === 'label') label = ip.value; });
-    if (config.visibility === undefined || config.visibility === true) {
-      vertTabInfo.push({ name: label || `Tab ${index + 1}`, id: index });
-      deferLoadInfo.push({ type: 'DeferLoad', config });
-    }
-  });
-
-  const [activeVertTab, setActiveVertTab] = useState(0);
-  // editAction is data-driven — comes from the availableActions array in the network response.
-  // The ID 'pyUpdateCaseDetails' is a common Pega convention but may differ per case type.
-  // If this action exists, render a shortcut button in the header; label is localized.
-  const editAction = availableActions.find(a => a.ID === 'pyUpdateCaseDetails');
-
-  // 5. useEffect: VerticalTabClick event listener (DOM event, not PubSub)
-  useEffect(() => {
-    const handler = (event) => { const idx = parseInt(event?.detail?.additionalData?.itemClicked ?? event, 10); if (!isNaN(idx)) setActiveVertTab(idx); };
-    document.addEventListener('VerticalTabClick', handler);
-    return () => document.removeEventListener('VerticalTabClick', handler);
-  }, []);
-  // 6. useEffect: publish CASE_ATTACHMENTS_UPDATED on hasNewAttachments
-  useEffect(() => { if (hasNewAttachments) PCore.getPubSubUtils().publish((PCore.getEvents().getCaseEvent()).CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, true); }, [hasNewAttachments]);
-
-  // 7. Edit action click handler
-  function _editClick() {
-    const actionsAPI = thePConn.getActionsApi();
-    actionsAPI.openLocalAction(editAction.ID, {
-      ...editAction, containerName: 'modal', type: 'express',
-    });
-  }
-
-  // 8. Render
-  //    ⚠️ CRITICAL — USE THE PROJECT'S DESIGN SYSTEM for buttons and header card.
-  //    Check `package.json` for the installed DS and use its button component (ghost/text variant).
-  //    NEVER use plain HTML <button> — always use the DS button.
-  //    Localize labels: PCore.getLocaleUtils().getLocaleValue('Edit', 'CaseView')
-  //
-  //    Examples of known design systems (check package.json for actual installed DS):
-  //    | DS | Action Button | Header Background |
-  //    |---|---|---|
-  //    | @carbon/react | <Button kind="ghost" size="sm"> | use $blue-10 token or #e3f2fd |
-  //    | @mui/material | <Button variant="text"> | theme.palette.info.light |
-  //    | antd | <Button type="link"> | token blue-1 |
-  //    | CSS-only | <button> with styled class | #e3f2fd |
-  if (displayOnlyFA) {
-    return <div>{theTodoRegion}</div>;
-  }
-  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
-  return (
-    <div className='psdk-case-view'>
-      <aside>
-        <div hidden id='current-caseID'>{currentCaseID}</div>
-        {/* Case header card — themed background, DS buttons, localized labels */}
-        <div className='psdk-case-view-header'>
-          <div className='psdk-case-view-header-content'>
-            <h2 className='psdk-case-view-header-title'>{header}</h2>
-            {subheader && <span className='psdk-case-view-header-id'>{subheader}</span>}
-          </div>
-          <div className='psdk-case-view-header-actions'>
-            {/* Action buttons are DATA-DRIVEN from availableActions (network response).
-                The edit shortcut uses a known Pega action ID but could be any action.
-                Labels MUST be localized — never hardcode button text. */}
-            {editAction && (
-              <DSButton variant='ghost' onClick={_editClick}>{localizedVal('Edit', 'CaseView')}</DSButton>
-            )}
-            {/* CaseViewActionsMenu renders ALL available actions + processes as dropdown items */}
-            {CaseViewActionsMenu && (
-              <CaseViewActionsMenu
-                getPConnect={getPConnect}
-                availableActions={availableActions}
-                availableProcesses={availableProcesses}
-                caseTypeID={caseTypeID}
-                caseTypeName={caseTypeName}
-              />
-            )}
-          </div>
-        </div>
-        {theSummaryRegion}
-        {vertTabInfo.length > 1 && <VerticalTabs tabconfig={vertTabInfo} />}
-      </aside>
-      <main>
-        {/* ⚠️ STAGES MUST be in the CENTER column, above ToDo — NOT in the sidebar */}
-        {theStagesRegion}
-        {theTodoRegion}
-        {deferLoadInfo.length > 0 && deferLoadInfo[activeVertTab] && <DeferLoad getPConnect={getPConnect}
-          name={deferLoadInfo[activeVertTab].config.name} isTab
-          lastUpdateCaseTime={lastUpdateCaseTime} />}
-      </main>
-      <aside>{theUtilitiesRegion}</aside>
-    </div>
-  );
-}
-```
-
-> **Note:** `ObjectPage` is a re-export: `export { default } from '../CaseView'`. Register both keys to the same component.
+- **Extends:** the project's base component interface
+
+## Inputs
+
+| Input                | Type               | Required | Description                                                                                                         |
+| -------------------- | ------------------ | -------- | ------------------------------------------------------------------------------------------------------------------- |
+| `children`           | renderable content | Yes      | Named region children (summary, stages, todo, utilities, tabs)                                                      |
+| `displayOnlyFA`      | `boolean`          | No       | If true, renders only the to-do region (focused action mode)                                                        |
+| `getPConnect`        | `function`         | Yes      | PConnect getter                                                                                                     |
+| `icon`               | `string`           | No       | Icon identifier for case type                                                                                       |
+| `subheader`          | `string`           | No       | Case ID displayed below the header                                                                                  |
+| `header`             | `string`           | Yes      | Case name/title                                                                                                     |
+| `showIconInHeader`   | `boolean`          | No       | Whether to show the case type icon in the header card                                                               |
+| `caseInfo`           | `object`           | Yes      | Case metadata (availableActions, availableProcesses, hasNewAttachments, caseTypeID, caseTypeName, caseTypeIcon, ID) |
+| `lastUpdateCaseTime` | `any`              | No       | Last case update timestamp; defaults to `getPConnect().getValue('caseInfo.lastUpdateTime')`                         |
+
+## Implementation Structure
+
+**Module Setup:** Obtain the project's base component interface for typing. Obtain the project's component registry for resolving child components at runtime. Obtain the application store context for reading `displayOnlyFA`. Obtain a static-content URL utility for resolving icon paths.
+
+**Main Component Logic** — steps in order:
+
+1. Retrieve `CaseViewActionsMenu`, `VerticalTabs`, and `DeferLoad` from the project's component registry.
+2. Receive inputs: extract `getPConnect`, `icon` (default `''`), `header`, `subheader`, `children` (default `[]`), and the nested `caseInfo` fields `availableActions` (default `[]`), `availableProcesses` (default `[]`), `hasNewAttachments`, `caseTypeID` (default `''`), `caseTypeName` (default `''`), and `caseTypeIcon`. Default `lastUpdateCaseTime` to `getPConnect().getValue('caseInfo.lastUpdateTime')` when not supplied. Read `currentCaseID` from `caseInfo.ID`; read `displayOnlyFA` from the application store context; call `getPConnect()` once into `thePConn`.
+3. **Extract named regions using SDK utilities:** Obtain `getChildRegionByName`, `extractTabsInfo`, and `openCaseEditAction` from `PCore.getSDKUtils().getSDKCaseUtils()`. Normalize `children` into an array (`childArr`). Use `getChildRegionByName(childArr, 'summary')` etc. to extract `theSummaryRegion`, `theStagesRegion`, `theTodoRegion`, `theUtilitiesRegion`, and `theTabsRegion`. **Do NOT implement a custom `getChildRegionByName` helper** — the SDK utility handles the internal child format correctly (children passed to page templates are rendered elements that do not expose `.getPConnect()` as a direct method).
+4. **Build tab info using SDK utility:** Call `extractTabsInfo(theTabsRegion)` to get `{ vertTabInfo, deferLoadInfo }`. Destructure with defaults: `const { vertTabInfo = [], deferLoadInfo = [] } = extractTabsInfo(theTabsRegion) ?? {}`. `vertTabInfo` is a plain array of `{ name: string; id: number }` objects (display labels for `VerticalTabs`). `deferLoadInfo` is a separate array of `{ type: 'DeferLoad', config }` objects (the full config for each tab). `DeferLoad`'s `name` input must always come from `deferLoadInfo[activeTab].config.name` (e.g., `"pyDetailsTabContent"`) — never the display label. **Do NOT manually iterate tab children to build these arrays** — the SDK utility handles the extraction correctly.
+5. Declare local state `activeVertTab` (number, default `0`). Determine `editAction` by finding the entry in `availableActions` whose `ID === 'pyUpdateCaseDetails'` — this action is data-driven from the network response; the ID is a common Pega convention but may differ per case type, and its label must always be localized rather than hardcoded.
+6. **`VerticalTabClick` listener:** in a lifecycle effect that runs once on initialization, add a `document` listener for the custom `VerticalTabClick` DOM event (not PubSub) that parses `event?.detail?.additionalData?.itemClicked` (or the event itself) as an integer and updates `activeVertTab` when valid; remove the listener on teardown. Track a mounted flag to avoid updating local state after teardown.
+7. **Attachment updates:** in a lifecycle effect keyed on `hasNewAttachments`, when it's true, publish `PCore.getPubSubUtils().publish(PCore.getEvents().getCaseEvent().CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, true)`.
+8. Define `_editClick()`: call `openCaseEditAction(thePConn, editAction)` — this SDK utility handles the local action invocation correctly.
+9. **Render:** when `displayOnlyFA` is true, render only a wrapping container holding `theTodoRegion` directly (NOT through the PConnect bridge component) and stop there. Otherwise, bind `localizedVal = PCore.getLocaleUtils().getLocaleValue` and render a `psdk-case-view` container with three sections. **Regions returned by `getChildRegionByName` are rendered directly in the template** — do NOT pass them through the PConnect bridge component because they are already renderable elements:
+   - **Sidebar (column width 3/12):** a hidden element holding `currentCaseID`; a case header card (`psdk-case-view-header`) with a themed background, containing the title (`header`) and subheader/case-ID (`subheader`, when present) in a `psdk-case-view-header-content` block, followed by a `psdk-case-view-header-actions` block holding: an Edit button (rendered with the project's installed design system button component, NOT a plain button element, labeled via `localizedVal('Edit', 'CaseView')`, shown only when `editAction` exists, wired to `_editClick`); and the `CaseViewActionsMenu` (passed `getPConnect`, `availableActions`, `availableProcesses`, `caseTypeID`, `caseTypeName`) rendered inside this header card, not standalone. After the header card, render `theSummaryRegion`, then `VerticalTabs` (with `tabconfig` set to `vertTabInfo`) when there's more than one tab.
+   - **Main (column width 6/12):** `theStagesRegion` MUST appear here in the center column (never in the sidebar), followed by `theTodoRegion`, followed by `DeferLoad` (passed `getPConnect`, `name` set to `deferLoadInfo[activeVertTab].config.name`, `isTab`, `lastUpdateCaseTime`) when `deferLoadInfo` has an entry for the active tab.
+   - **Utilities (column width 3/12):** `theUtilitiesRegion`.
+
+   For the Edit button and header card styling, use the project's installed design system: e.g. a ghost/small button for a Carbon-based system, a text-variant button for a Material-based system, a link-type button for an Ant-based system, or a styled plain button when CSS-only; the header background should use a matching light accent token or color for each.
+
+> **Note:** `ObjectPage` is a re-export: its module simply re-exports CaseView's default export. Register both keys to the same component.
 
 ## Behavioral Contract
 
 ### Region Extraction
 
-Use `getRawMetadata()` to access `children` with `type` and `name` metadata. Extract by:
+> ⚠️ **CRITICAL:** Use `PCore.getSDKUtils().getSDKCaseUtils().getChildRegionByName(childArr, name)` to extract regions. Do NOT implement a custom helper that calls `child.getPConnect()` — children passed to page templates are rendered elements and do not expose `getPConnect` as a direct method. The SDK utility handles the internal format correctly.
+
+Extract the following named regions:
 
-- **Summary region:** `type === 'Region' && name === 'Summary'`
-- **Stages region:** `type === 'Region' && name === 'Stages'`
-- **ToDo region:** `type === 'Region' && name === 'ToDo'`
-- **Utilities region:** `type === 'Region' && name === 'Utilities'`
-- **Tabs region:** `type === 'Region' && name === 'Tabs'`
+- **Summary region:** `getChildRegionByName(childArr, 'summary')`
+- **Stages region:** `getChildRegionByName(childArr, 'stages')`
+- **ToDo region:** `getChildRegionByName(childArr, 'todo')`
+- **Utilities region:** `getChildRegionByName(childArr, 'utilities')`
+- **Tabs region:** `getChildRegionByName(childArr, 'tabs')`
 
-Render each region as a React child element using `createElement(PConnectComponent, { ...regionConfig })`.
+Render each extracted region directly in the template — they are already renderable elements.
 
 ### Tabs Region — Deferred Load
 
-- From the Tabs region children, build `vertTabInfo` (vertical tab definitions) and `deferLoadInfo` (deferred loading metadata).
-- Pass both to `<DeferLoad>` component which handles lazy rendering of tab content.
-- The tabs list comes from `theTabsRegionChildren` (the children of the Tabs region).
+- Call `extractTabsInfo(theTabsRegion)` from `PCore.getSDKUtils().getSDKCaseUtils()` to build `vertTabInfo` (vertical tab definitions) and `deferLoadInfo` (deferred loading metadata).
+- Do NOT manually iterate tab children — the SDK utility handles this correctly.
+- Pass `vertTabInfo` to `VerticalTabs` component as its `tabconfig` prop.
+- Pass `deferLoadInfo[activeVertTab].config.name` to `DeferLoad` as its `name` prop.
 
 ### displayOnlyFA Mode
 
@@ -271,20 +137,13 @@ If `displayOnlyFA === true`:
 > The sidebar contains: case header card → summary → vertical tabs.
 > The center contains: stages → todo → deferred tab content.
 
-```
-[Col xs:3 — Sidebar]     [Col xs:6 — Main]         [Col xs:3 — Utilities]
- Case Header Card         Stages                    Utilities region
- (title + ID)             ToDo / Assignment
- (Edit + Actions btns)    DeferLoad tab content
- Summary region
- VerticalTabs
-```
-
-| Column | xs  | Contents                                                    |
-| ------ | --- | ----------------------------------------------------------- |
-| Left   | 3   | Case header card, Summary, VerticalTabs                     |
-| Center | 6   | **Stages**, ToDo/assignment, DeferLoad (active tab content) |
-| Right  | 3   | Utilities region (attachments, etc.)                        |
+Three columns share the row: a 3/12-width sidebar column holding the case header card (title + ID), the Edit and Actions buttons, the summary region, and the vertical tabs; a 6/12-width main column holding the stages region, the to-do/assignment region, and the deferred tab content; and a 3/12-width utilities column holding the utilities region (attachments, etc.).
+
+| Column | Width | Contents                                                    |
+| ------ | ----- | ----------------------------------------------------------- |
+| Left   | 3/12  | Case header card, Summary, VerticalTabs                     |
+| Center | 6/12  | **Stages**, ToDo/assignment, DeferLoad (active tab content) |
+| Right  | 3/12  | Utilities region (attachments, etc.)                        |
 
 **CSS-only implementation notes:**
 
@@ -293,62 +152,7 @@ If `displayOnlyFA === true`:
 - Center column: `overflow: hidden`.
 - Responsive: on mobile (`max-width: 672px`), stack to single column.
 
-**Case header card CSS (MUST be included in `CaseView.css`):**
-
-```css
-.psdk-case-view {
-  display: grid;
-  grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr);
-  gap: 1rem;
-  width: 100%;
-}
-.psdk-case-view aside,
-.psdk-case-view main {
-  min-width: 0;
-}
-@media (max-width: 672px) {
-  .psdk-case-view {
-    grid-template-columns: 1fr;
-  }
-}
-.psdk-case-view-header {
-  background-color: #e3f2fd;
-  border-radius: 4px;
-  padding: 1rem;
-  margin-bottom: 1rem;
-}
-.psdk-case-view-header-content {
-  margin-bottom: 0.5rem;
-}
-.psdk-case-view-header-title {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 500;
-  color: #1565c0;
-}
-.psdk-case-view-header-id {
-  font-size: 0.875rem;
-  color: #555;
-}
-.psdk-case-view-header-actions {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-}
-.psdk-case-view-edit-btn {
-  background: none;
-  border: none;
-  color: #1976d2;
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  text-transform: uppercase;
-  padding: 0.25rem 0.5rem;
-}
-.psdk-case-view-edit-btn:hover {
-  background-color: rgba(25, 118, 210, 0.04);
-}
-```
+**Case header card CSS (MUST be included in companion styles):** the `.psdk-case-view` container is a CSS grid with columns `minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr)`, a `1rem` gap, and full width; its direct children get `min-width: 0`; at `max-width: 672px` it collapses to a single column. The `.psdk-case-view-header` card has a light blue background (`#e3f2fd`), `4px` border radius, `1rem` padding, and `1rem` bottom margin; `.psdk-case-view-header-content` has `0.5rem` bottom margin; `.psdk-case-view-header-title` has no margin, `1.25rem` font size, medium weight, and a blue accent color (`#1565c0`); `.psdk-case-view-header-id` is smaller (`0.875rem`) and gray (`#555`); `.psdk-case-view-header-actions` is a flex row with `0.5rem` gap and centered items; `.psdk-case-view-edit-btn` is an unstyled, borderless, uppercase text button in blue (`#1976d2`, `0.875rem`, medium weight) with a subtle hover background (`rgba(25, 118, 210, 0.04)`).
 
 ## Edge Cases & Special Logic
 
@@ -359,40 +163,33 @@ If `displayOnlyFA === true`:
 
 ## Dependencies
 
-- `DeferLoad` component from `@pega/sdk-react` — deferred tab content loading
+- `DeferLoad` component — resolved from the project's component registry; handles deferred tab content loading
 - `PCore.getPubSubUtils()` — pub/sub for attachment updates
-- `PConnectComponent` from `@pega/sdk-react`
-- `CASE_ATTACHMENTS_UPDATED` constant from `@pega/sdk-core` (or local constants)
+- The project's PConnect bridge utility — for rendering region children
+- `CASE_ATTACHMENTS_UPDATED` constant from PCore events API
 
 ## Sub-Variants
 
 ### ObjectPage
 
-`ObjectPage` is registered as:
-
-```tsx
-// packages/sdk-react/src/components/template/ObjectPage/index.tsx
-export { default } from '../CaseView';
-```
+`ObjectPage` is registered as a direct re-export module whose default export simply re-exports `CaseView`'s default export.
 
 - No separate implementation needed.
-- In `component-map.ts`, register `ObjectPage` key pointing to the same component as `CaseView`.
+- In the project's component map, register `ObjectPage` key pointing to the same component as `CaseView`.
 
 ## Design System Mapping
 
 **UI control type:** Full case workspace layout — 3-column grid with sidebar, main content, and utilities.
 
-Listed design systems are examples only.
+When implementing in a specific design system, map the following:
 
-| Design System      | Grid                                                  | Sidebar   | Deferred Tabs                   |
-| ------------------ | ----------------------------------------------------- | --------- | ------------------------------- |
-| Default (CSS only) | CSS Grid 25/50/25                                     | `<aside>` | Intersection Observer lazy load |
-| MUI                | `<Grid container>` with `<Grid size={{ xs: 3/6/3 }}>` | `<Box>`   | MUI `<Tabs>` + DeferLoad        |
-| Ant Design         | `<Row><Col span={6/12/6}>`                            | `<Sider>` | `<Tabs>` lazy                   |
-| Chakra UI          | `<Grid templateColumns='1fr 2fr 1fr'>`                | `<Box>`   | Custom lazy tabs                |
-| Shadcn/ui          | Tailwind `grid grid-cols-[1fr_2fr_1fr]`               | `<aside>` | Custom                          |
+- **Grid layout:** Use the design system's grid component with a 3/6/3 column ratio. For CSS-only, use CSS Grid with `grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr)`.
+- **Sidebar container:** Use the design system's card or panel component to wrap the case header, summary, and vertical tabs.
+- **Deferred tabs:** Use the design system's tab component for the vertical tab list, paired with the DeferLoad component for lazy content rendering. The VerticalTabs component handles its own rendering — just pass `tabconfig` as the array of `{ name, id }` objects.
+- **Case header card:** A card with a light accent background, containing the case title, case ID, and action buttons.
+- **Action buttons:** Use the design system's button component (text/ghost variant for Edit, menu component for CaseViewActionsMenu).
 
-When implementing in a specific design system:
+Regardless of design system:
 
 - `displayOnlyFA` must completely bypass the grid — render only ToDo region
 - Region extraction by metadata name is required — do not assume positional ordering