@pega/sdk 0.0.4 → 0.0.6

package/templates/react-sdk-reference/.github/skills/template-skills/AdvancedSearch.md

@@ -1,150 +0,0 @@
-# Skill: AdvancedSearch
-
-Advanced search template. Renders grouped search field sections with deduplication, delegating each section to a `SearchGroups` sub-component. Also covers the `SearchGroups` sub-component.
-
-> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
-
----
-
-## Component Purpose
-
-Renders a multi-section advanced search form where search fields are organized into groups. Deduplicates search fields by value across groups. Each group is rendered by the `SearchGroups` sub-component. Shares search configuration via a React context (`DataReferenceAdvancedSearchContext`).
-
-## Pega Metadata
-
-- **Registration key:** `AdvancedSearch` (in `component-map.ts`)
-- **Category:** Search / Filter template
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop           | Type       | Required | Description                        |
-| -------------- | ---------- | -------- | ---------------------------------- |
-| `dataPageName` | `string`   | Yes      | Data page for search results       |
-| `parameters`   | `object`   | No       | Parameters passed to the data page |
-| `getPConnect`  | `function` | Yes      | PConnect getter                    |
-
-## Behavioral Contract
-
-### Search Groups from Metadata
-
-1. `rawViewMetadata = getPConnect().getRawMetadata()`.
-2. `searchGroups = rawViewMetadata.config.searchGroups` — array of group config objects.
-3. Each group has a `label` and a `fields` array.
-
-### Field Deduplication
-
-- Track seen field values in a `Set`.
-- For each field across all groups: if `field.value` already in Set, skip it.
-- Else add `field.value` to Set and include the field.
-- Deduplication is applied per-group in order — earlier groups take precedence.
-
-### Context (`DataReferenceAdvancedSearchContext`)
-
-Provides shared config to `SearchGroups`:
-
-```tsx
-<DataReferenceAdvancedSearchContext.Provider value={{ dataPageName, parameters, getPConnect }}>
-  {searchGroups.map((group) => (
-    <SearchGroups key={group.label} group={group} />
-  ))}
-</DataReferenceAdvancedSearchContext.Provider>
-```
-
-### Render Structure
-
-```
-<div className="psdk-advanced-search">
-  {searchGroups.map(group => (
-    <SearchGroups group={group} key={group.label} />
-  ))}
-</div>
-```
-
----
-
-## Sub-Component: SearchGroups
-
-Renders a single search group section: a heading + a list of editable search fields.
-
-### Props
-
-| Prop    | Type     | Description                        |
-| ------- | -------- | ---------------------------------- |
-| `group` | `object` | `{ label: string, fields: array }` |
-
-### Behavioral Contract
-
-For each field in `group.fields`:
-
-1. Get `firstChildPConnect = getPConnect().getChildren()[0]`.
-2. Create an editable field component: `firstChildPConnect.createComponent({ type: field.type, config: { ...field.config } })`.
-3. Render the created component alongside a `<SearchGroups>` label row.
-
-### Render Structure
-
-```
-<div className="psdk-search-group">
-  <h4>{group.label}</h4>
-  {group.fields.map((field, i) => (
-    <div key={i} className="psdk-search-group-field">
-      {createdFieldComponent[i]}
-    </div>
-  ))}
-</div>
-```
-
-## Visual Specifications
-
-### AdvancedSearch Container
-
-| Element         | Description                             |
-| --------------- | --------------------------------------- |
-| Outer container | Vertical stack of search group sections |
-
-### SearchGroups Section
-
-| Element       | Description                           |
-| ------------- | ------------------------------------- |
-| Group heading | `<h4>` with group label               |
-| Field rows    | Each field rendered as a form control |
-
-**CSS-only implementation notes:**
-
-- Outer container: `display: flex; flex-direction: column; gap: 1.5rem`.
-- Group section: `display: flex; flex-direction: column; gap: 0.75rem`.
-- Group heading: `font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem`.
-- Field row: `display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: 0.5rem`.
-
-## Edge Cases & Special Logic
-
-- `rawViewMetadata.config.searchGroups` may be undefined if the view has no search groups — default to `[]`.
-- Field deduplication is by `field.value` (the property path), not by label.
-- `firstChildPConnect.createComponent` — must use the correct field type from `field.type`; the created component is a live PConnect view.
-- Context is required by `SearchGroups` — always wrap `SearchGroups` with the context provider.
-
-## Dependencies
-
-- `DataReferenceAdvancedSearchContext` — shared context (defined in `./context` or inline)
-- `PConnectComponent` from `@pega/sdk-react` — renders created field components
-- `getRawMetadata()` — for search group config extraction
-
-## Design System Mapping
-
-**UI control type:** Multi-section advanced search form with grouped field rows.
-
-Listed design systems are examples only.
-
-| Design System      | Group Heading                  | Field Layout                   |
-| ------------------ | ------------------------------ | ------------------------------ |
-| Default (CSS only) | `<h4>`                         | CSS grid 2-col (label + input) |
-| MUI                | `<Typography variant='h6'>`    | `<Grid container>`             |
-| Ant Design         | `<Typography.Title level={5}>` | `<Form.Item>`                  |
-| Chakra UI          | `<Heading size='sm'>`          | `<FormControl>` rows           |
-| Shadcn/ui          | `<h4>` or `<Label>`            | Tailwind grid                  |
-
-When implementing in a specific design system:
-
-- `DataReferenceAdvancedSearchContext` must be provided — `SearchGroups` consumes it via `useContext`
-- Field deduplication by `field.value` must happen before rendering
-- `createComponent` creates live editable fields — render via `createElement(PConnectComponent, fieldConfig)`

package/templates/react-sdk-reference/.github/skills/template-skills/AppShell.md

@@ -1,124 +0,0 @@
-# Skill: AppShell
-
-Top-level application shell template. Renders the outer portal/WSS portal frame: navigation bar, alert banners, operator avatar, portal logo, and case types. Provides NavContext to child components.
-
-> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
-
----
-
-## Component Purpose
-
-The outermost container for the Pega SDK React app. Determines whether the app is running in WSS portal or standard portal mode, renders the appropriate navigation bar, handles HTTP and page-level alert messages, loads the portal logo asynchronously, and passes navigation links and case types to the nav bar.
-
-## Pega Metadata
-
-- **Registration key:** `AppShell` (in `component-map.ts`)
-- **Category:** Page template — application shell
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop          | Type        | Required | Description                                                  |
-| ------------- | ----------- | -------- | ------------------------------------------------------------ |
-| `pages`       | `array`     | Yes      | Array of portal page objects `{ name, pyLabel, linkUrl }`    |
-| `caseTypes`   | `array`     | No       | Fallback case types (overridden by data page fetch if empty) |
-| `portalName`  | `string`    | Yes      | Portal identifier — determines WSS vs standard rendering     |
-| `displayName` | `string`    | No       | Operator display name for avatar                             |
-| `getPConnect` | `function`  | Yes      | PConnect getter                                              |
-| `children`    | `ReactNode` | Yes      | Main content area                                            |
-
-## Behavioral Contract
-
-### Portal Type Detection
-
-- Check `portalName` (or metadata flag) against WSS portal identifier.
-- WSS portal → render `<WssNavBar>` component.
-- Standard portal → render `<NavBar>` component.
-
-### Alert Banners
-
-1. Subscribe to `getPConnect()` for `httpMessages` and `pageMessages` updates.
-2. If either array is non-empty, render `<AlertBanner>` DSE component above the main content.
-3. `AlertBanner` receives the combined message array and a dismiss handler.
-
-### Portal Logo
-
-1. On mount, call `PCore.getAssetLoader().getSvcImageUrl(logoAssetName)` asynchronously.
-2. Store the resolved URL in `portalLogoUrl` state.
-3. Pass `portalLogoUrl` to the nav bar as the `logo` prop.
-
-### Operator Avatar
-
-- Read `displayName` from `getPConnect().getValue('.pyUserName')` or the `displayName` prop.
-- Render operator avatar (initials) in the nav bar via the `operatorInfo` prop.
-
-### Case Types
-
-1. On mount, fetch case types via `PCore.getDataPageUtils().getPageDataAsync('D_pyPortalTypeList', 'root', {})`.
-2. Store result in `caseTypes` state (overrides the prop default).
-3. Pass `caseTypes` to the nav bar.
-
-### NavContext
-
-- Wrap children in `<NavContext.Provider value={{ links, caseTypes }}>`.
-- `links` is derived from `pages` prop: `pages.map(p => ({ label: p.pyLabel, url: p.linkUrl, id: p.name }))`.
-
-### Render Structure
-
-```
-<div className="psdk-app-shell">
-  <NavBar | WssNavBar (with logo, caseTypes, operatorInfo, links) />
-  <AlertBanner (if messages) />
-  <main className="psdk-app-shell-content">
-    <NavContext.Provider>
-      {children}
-    </NavContext.Provider>
-  </main>
-</div>
-```
-
-## Visual Specifications
-
-**CSS-only implementation notes:**
-
-- Shell wrapper: `display: flex; flex-direction: column; height: 100vh`.
-- Nav bar: `flex: 0 0 auto` (fixed height).
-- Alert banner: `flex: 0 0 auto` (shown below nav, pushes content down).
-- Content area: `flex: 1 1 auto; overflow-y: auto`.
-
-## Edge Cases & Special Logic
-
-- Logo loading is async — show fallback (app name or blank) until URL resolves.
-- Case types fetch may fail — catch errors and fall back to the `caseTypes` prop.
-- `httpMessages` are transient (from API errors) — clear them after display or on next navigation.
-- `pageMessages` are persistent until explicitly dismissed.
-- If `pages` is empty, `links` array is empty — nav bar may render without page links.
-
-## Dependencies
-
-- `NavBar` DSE component — standard portal navigation
-- `WssNavBar` template component — WSS portal navigation (see `WssNavBar.md`)
-- `AlertBanner` DSE component — message display
-- `NavContext` from `../../context/nav-context`
-- `PCore.getAssetLoader().getSvcImageUrl()` — logo URL resolution
-- `PCore.getDataPageUtils().getPageDataAsync()` — case types data page
-
-## Design System Mapping
-
-**UI control type:** Application shell layout — fixed nav + scrollable content area.
-
-Listed design systems are examples only.
-
-| Design System      | Nav Bar                  | Alert Banner         | Shell Layout                                  |
-| ------------------ | ------------------------ | -------------------- | --------------------------------------------- |
-| Default (CSS only) | `<header>` + custom nav  | `<div role='alert'>` | CSS flexbox column                            |
-| MUI                | `<AppBar>` + `<Toolbar>` | `<Alert>`            | `<Box display='flex' flexDirection='column'>` |
-| Ant Design         | `<Layout.Header>`        | `<Alert>`            | `<Layout>`                                    |
-| Chakra UI          | `<Box as='header'>`      | `<Alert>`            | `<Flex direction='column'>`                   |
-| Shadcn/ui          | Custom header            | `<Alert>`            | Tailwind `flex flex-col h-screen`             |
-
-When implementing in a specific design system:
-
-- WSS vs portal detection must remain — the nav bar component differs for each
-- Logo URL must be loaded asynchronously from `PCore.getAssetLoader()`
-- `NavContext.Provider` must wrap children so descendant nav-aware components can access links

package/templates/react-sdk-reference/.github/skills/template-skills/BannerPage.md

@@ -1,86 +0,0 @@
-# Skill: BannerPage
-
-Page template that wraps the `Banner` DSE component, rendering a hero image section with a configurable two-column content area below.
-
-> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
-
----
-
-## Component Purpose
-
-A thin template wrapper that delegates entirely to the `Banner` DSE component. Translates page-template props (heading, message, layout, backgroundImage) into `Banner`'s props and passes the first two React children as the `a` (left) and `b` (right) content slot.
-
-## Pega Metadata
-
-- **Registration key:** `BannerPage` (in `component-map.ts`)
-- **Category:** Page template
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop              | Type          | Required | Description                                                                                    |
-| ----------------- | ------------- | -------- | ---------------------------------------------------------------------------------------------- |
-| `children`        | `ReactNode[]` | Yes      | At least 2 children — `[0]` → left (`a`) slot, `[1]` → right (`b`) slot                        |
-| `layout`          | `string`      | No       | Column layout variant for `Banner`: `'two-column'` (default), `'narrow-wide'`, `'wide-narrow'` |
-| `heading`         | `string`      | No       | Hero section heading text. Default `''`                                                        |
-| `message`         | `string`      | No       | Hero section message/subtitle. Default `''`                                                    |
-| `imageTheme`      | `string`      | No       | Banner image theme (e.g., `'light'`). Default `'light'`                                        |
-| `backgroundImage` | `string`      | No       | URL of the background image for the hero. Default `''`                                         |
-| `backgroundColor` | `string`      | No       | Background color for the hero. Default `''`                                                    |
-| `tintImage`       | `boolean`     | No       | Whether to tint the background image. Default `false`                                          |
-
-## Behavioral Contract
-
-1. Retrieve `Banner` from the component registry via `getComponentFromRegistry('Banner')`.
-2. Convert `children` to an array using `Children.toArray(children)` (memoized).
-3. Render `<Banner>` with the following props:
-   - `variant={layout}` — controls column widths below the hero
-   - `a={childArray[0]}` — left/first column content
-   - `b={childArray[1]}` — right/second column content
-   - `banner={{ variant: imageTheme, backgroundColor, title: heading, message, backgroundImage, tintImage }}`
-4. No additional wrapper or layout — this component IS a single `<Banner>` render.
-
-## Visual Specifications
-
-This component has no independent visual output — all visual behavior is defined by the `Banner` DSE component. See [`design-system-extension-skills/Banner.md`](../design-system-extension-skills/Banner.md) for full visual specs.
-
-Key visual behaviors inherited from `Banner`:
-
-- Hero: full-width background image section, height `19rem`, centered title and message overlay
-- Content area: two-column grid below the hero, column widths driven by `variant`/`layout`
-
-**CSS-only implementation notes:**
-
-- This template creates no CSS of its own — implement it as a pure pass-through to `Banner`.
-- The `layout` prop maps directly to `Banner`'s `variant` prop.
-- `heading` → `Banner.banner.title`, `message` → `Banner.banner.message`.
-
-## Edge Cases & Special Logic
-
-- Children are memoized: `useMemo(() => Children.toArray(children), [children])` — only recomputed when `children` changes.
-- If only one child is provided, `childArray[1]` will be `undefined` — `Banner` receives `b={undefined}` and should render an empty second column.
-- `BannerPage` does NOT call `getPConnect()` itself for layout — children are React children (passed by the Pega rendering engine).
-
-## Dependencies
-
-- `getComponentFromRegistry('Banner')` from `@pega/sdk-react` — all rendering delegated to `Banner`
-- `Children.toArray` from React — for child array normalization
-
-## Design System Mapping
-
-**UI control type:** Full-width banner hero page with configurable two-column content area.
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                                |
-| ------------------ | -------------------------------------------------------------------- |
-| Default (CSS only) | Pass-through to `Banner` — implement Banner's CSS hero + grid layout |
-| MUI                | Pass-through to `Banner` (MUI-based)                                 |
-| Ant Design         | Pass-through to `Banner` (Ant-based)                                 |
-| Chakra UI          | Pass-through to `Banner` (Chakra-based)                              |
-| Shadcn/ui          | Pass-through to `Banner` (Shadcn-based)                              |
-
-When implementing in a specific design system:
-
-- `BannerPage` is always a thin wrapper — implement `Banner` first, then `BannerPage` simply delegates to it
-- Prop mapping: `layout` → `variant`, `heading` → `banner.title`, `message` → `banner.message`, `backgroundImage` → `banner.backgroundImage`

package/templates/react-sdk-reference/.github/skills/template-skills/CaseSummary.md

@@ -1,106 +0,0 @@
-# Skill: CaseSummary
-
-Case summary template. Renders a summary panel with primary and secondary case fields, derived from either props or child region extraction.
-
-> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
-
----
-
-## Component Purpose
-
-Displays a case's key summary data in a structured summary panel. Primary fields are shown prominently; secondary fields are shown with labels. Data is sourced either directly from props or by extracting child regions. All field values are localized before display.
-
-## Pega Metadata
-
-- **Registration key:** `CaseSummary` (in `component-map.ts`)
-- **Category:** Page template — summary
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop                | Type          | Required | Description                                             |
-| ------------------- | ------------- | -------- | ------------------------------------------------------- |
-| `children`          | `ReactNode[]` | No       | Region children when fields come from PConnect metadata |
-| `arPrimaryFields`   | `array`       | No       | Array of primary field objects (direct prop)            |
-| `arSecondaryFields` | `array`       | No       | Array of secondary field objects (direct prop)          |
-| `getPConnect`       | `function`    | Yes      | PConnect getter                                         |
-
-## Behavioral Contract
-
-### Field Sourcing
-
-Two modes — prefer direct props if provided:
-
-**Mode A — Direct props:**
-
-- `arPrimaryFields` and `arSecondaryFields` are passed directly.
-- Call `prepareCaseSummaryData(primaryFields, secondaryFields, getPConnect)` to localize values.
-
-**Mode B — Child extraction:**
-
-- Extract primary and secondary regions from `children` by type/name matching.
-- Primary region: first region child (or `type === 'Region' && name === 'Primary'`).
-- Secondary region: second region child (or `type === 'Region' && name === 'Secondary'`).
-- Build field arrays from the extracted region children metadata.
-- Then call `prepareCaseSummaryData(...)` as in Mode A.
-
-### `prepareCaseSummaryData(primaryFields, secondaryFields, getPConnect)`
-
-Helper that:
-
-1. Iterates each field in both arrays.
-2. Localizes the field value via `PCore.getLocaleUtils().getLocaleValue(value, classID, value)`.
-3. Returns `{ arPrimaryFields: localizedPrimary, arSecondaryFields: localizedSecondary }`.
-
-### Render
-
-Delegates entirely to `<CaseSummaryFields>` DSE component, passing:
-
-- `arPrimaryFields` — array of `{ name, value }` objects for primary display
-- `arSecondaryFields` — array of `{ name, value, displayLabel }` objects for secondary display
-
-## Visual Specifications
-
-- `<CaseSummaryFields>` handles all rendering — see the DSE component skill for details.
-- Primary fields: large text, no label.
-- Secondary fields: label + value pairs.
-
-**CSS-only implementation notes (for `CaseSummaryFields` wrapper):**
-
-- Container: `display: flex; flex-direction: column; gap: 8px`.
-- Primary field value: `font-size: 1rem; font-weight: 600`.
-- Secondary field row: `display: flex; gap: 4px; font-size: 0.875rem`.
-- Secondary label: `color: var(--secondary-text-color)`.
-
-## Edge Cases & Special Logic
-
-- If both `arPrimaryFields` prop and children are present, the direct prop takes priority.
-- `prepareCaseSummaryData` — guard against undefined/null field values before passing to `getLocaleValue`.
-- `displayLabel` on secondary fields controls whether the field label is shown alongside the value.
-- If `arSecondaryFields` is empty, the secondary section is not rendered.
-
-## Dependencies
-
-- `prepareCaseSummaryData` from `./utils` (local helper)
-- `CaseSummaryFields` — DSE component registered in the component registry
-- `PCore.getLocaleUtils().getLocaleValue()` — value localization
-
-## Design System Mapping
-
-**UI control type:** Read-only case summary panel with primary and secondary field groups.
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Approach                               |
-| ------------------ | -------------------------------------------------- |
-| Default (CSS only) | Flexbox column with CSS-styled field rows          |
-| MUI                | `<Typography>` variants for primary/secondary text |
-| Ant Design         | `<Descriptions>` with `bordered={false}`           |
-| Chakra UI          | `<VStack>` with `<Text>` variants                  |
-| Shadcn/ui          | Custom `<dl>/<dt>/<dd>` or card                    |
-
-When implementing in a specific design system:
-
-- Always localize field values before display — use `PCore.getLocaleUtils().getLocaleValue()`
-- `CaseSummaryFields` is a DSE component — implement it separately and call it from here
-- Primary fields have no labels; secondary fields have labels

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

@@ -1,137 +0,0 @@
-# Skill: CaseView
-
-Case view template. Renders the full case workspace: summary sidebar, stages, to-do region, main content tabs, and utilities column. Also covers `ObjectPage` (which is a re-export of `CaseView`).
-
-> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
-
----
-
-## Component Purpose
-
-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.
-
-## 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                                                |
-
-## Behavioral Contract
-
-### Region Extraction
-
-Use `getRawMetadata()` to access `children` with `type` and `name` metadata. Extract by:
-
-- **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'`
-
-Render each region as a React child element using `createElement(PConnectComponent, { ...regionConfig })`.
-
-### 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).
-
-### displayOnlyFA Mode
-
-If `displayOnlyFA === true`:
-
-- Render only the ToDo region, centered.
-- Skip summary, stages, tabs, utilities rendering.
-
-### Attachments Subscription
-
-- Subscribe to `PCore.getPubSubUtils().subscribe(CASE_ATTACHMENTS_UPDATED, handleAttachmentUpdate, 'CaseView')`.
-- Track `hasNewAttachments` boolean state — passed to utilities region.
-- Unsubscribe on unmount.
-
-### Edit Action
-
-- The utilities region may include an edit action button.
-- On click: call `getPConnect().getActionsApi().openLocalAction(editActionId, { ... })`.
-
-## Visual Specifications
-
-### 3-Column Grid Layout
-
-```
-[Col xs:3]  [Col xs:6]  [Col xs:3]
- Summary     Main tabs   Utilities
- Stages      (Deferred)
- ToDo
-```
-
-| Column | xs  | Contents                       |
-| ------ | --- | ------------------------------ |
-| Left   | 3   | Summary, Stages, ToDo regions  |
-| Center | 6   | Tabs region (deferred content) |
-| Right  | 3   | Utilities region               |
-
-**CSS-only implementation notes:**
-
-- Outer grid: `display: grid; grid-template-columns: 25% 50% 25%; gap: 1rem`.
-- Left column: `display: flex; flex-direction: column; gap: 0.5rem`.
-- Center column: `overflow: hidden`.
-- Responsive: on mobile, stack to single column.
-
-## Edge Cases & Special Logic
-
-- `displayOnlyFA === true` — completely different render tree (only ToDo), no grid layout.
-- Missing regions — guard each region before rendering; a region may not exist for all case types.
-- `DeferLoad` handles progressive loading — do not eagerly render all tab content.
-- `hasNewAttachments` is passed down to the utilities region — it affects attachment icon badge display.
-
-## Dependencies
-
-- `DeferLoad` component from `@pega/sdk-react` — 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)
-
-## Sub-Variants
-
-### ObjectPage
-
-`ObjectPage` is registered as:
-
-```tsx
-// packages/sdk-react/src/components/template/ObjectPage/index.tsx
-export { default } from '../CaseView';
-```
-
-- No separate implementation needed.
-- In `component-map.ts`, 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.
-
-| 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                          |
-
-When implementing in a specific design system:
-
-- `displayOnlyFA` must completely bypass the grid — render only ToDo region
-- Region extraction by metadata name is required — do not assume positional ordering
-- Deferred loading is mandatory for performance — tab content must not all load at once