@pega/sdk 0.0.4 → 0.0.6

package/templates/react-sdk-reference/.claude/skills/template-skills/MultiReferenceReadOnly.md

@@ -1,82 +0,0 @@
-# Skill: MultiReferenceReadOnly
-
-Multi-reference read-only template. Routes to `SimpleTableSelectReadonly` or `SimpleTable` based on `displayAs` for read-only rendering of multi-value reference fields.
-
-> **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-value reference field in read-only mode. Routing is based on the `displayAs` prop: certain display variants use `SimpleTableSelectReadonly` (link + modal), while others use `SimpleTable` directly.
-
-## Pega Metadata
-
-- **Registration key:** `MultiReferenceReadOnly` (in `component-map.ts`)
-- **Category:** Display template — read-only multi-reference
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop                  | Type       | Required | Description                                              |
-| --------------------- | ---------- | -------- | -------------------------------------------------------- |
-| `displayAs`           | `string`   | Yes      | UI variant that was used in edit mode                    |
-| `referenceList`       | `string`   | No       | Property path to the reference list                      |
-| `readonlyContextList` | `array`    | No       | Fallback data array when `referenceList` is not resolved |
-| `fieldMetadata`       | `object`   | No       | Field-level metadata                                     |
-| `getPConnect`         | `function` | Yes      | PConnect getter                                          |
-
-## Behavioral Contract
-
-### Routing by `displayAs`
-
-```
-if displayAs in ['readonlyMulti', 'combobox', 'checkboxgroup']:
-  → render SimpleTableSelectReadonly
-else:
-  → render SimpleTable (with readOnly=true / displayMode='DISPLAY_ONLY')
-```
-
-### Reference List Fallback
-
-- Primary: `pConn.getValue(referenceList + '.pxResults')`.
-- Fallback: use `readonlyContextList` directly if the above is undefined/empty.
-
-## Visual Specifications
-
-- `SimpleTableSelectReadonly` variant: link/chip showing selection count + modal dialog.
-- `SimpleTable` variant: flat read-only table of values.
-
-See `SimpleTable.md` and `ListView.md` for detailed visual specs.
-
-**CSS-only notes:**
-
-- Fallback to `readonlyContextList` renders identically to the resolved reference list.
-- No edit controls in either variant.
-
-## Edge Cases & Special Logic
-
-- `readonlyContextList` is the fallback — always use it when `pConn.getValue(referenceList)` returns nothing.
-- `displayAs` check uses an inclusion array: `['readonlyMulti', 'combobox', 'checkboxgroup']` — extend this list if new multi-select display variants are added.
-- The component is only reached in `DISPLAY_ONLY`/`readOnly` mode — never needs to handle edit states.
-
-## Dependencies
-
-- `SimpleTableSelectReadonly` (see `SimpleTable.md`)
-- `SimpleTable` (see `SimpleTable.md`)
-
-## Design System Mapping
-
-**UI control type:** Read-only multi-value reference display — routes to modal table or flat table.
-
-Listed design systems are examples only.
-
-| `displayAs`                                  | Routing                     | DS Implementation    |
-| -------------------------------------------- | --------------------------- | -------------------- |
-| `readonlyMulti`, `combobox`, `checkboxgroup` | `SimpleTableSelectReadonly` | Link/chip + modal    |
-| All others                                   | `SimpleTable`               | Flat read-only table |
-
-When implementing in a specific design system:
-
-- The `displayAs` routing list must match the edit-mode variants defined in `DataReference.md`
-- `readonlyContextList` fallback is critical — reference list data may not be available on initial render

package/templates/react-sdk-reference/.claude/skills/template-skills/NarrowWide.md

@@ -1,143 +0,0 @@
-# Skill: NarrowWide
-
-Asymmetric two-column layout with a narrow left column (~33%) and a wide right column (~67%). Includes four sub-variants for different contexts.
-
-> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
-
----
-
-## Component Purpose
-
-Renders two children side by side with the left column narrower than the right. Used for case layouts where a sidebar panel sits beside a main content area. Four sub-variants:
-
-- **`NarrowWide`** — core CSS-based layout, accepts either `a`/`b` slot props or React `children[0]`/`children[1]`
-- **`NarrowWidePage`** — wrapper that passes React children as `a` and `b` slot props to `NarrowWide`
-- **`NarrowWideForm`** — simplified wrapper using only `children` (no `a`/`b` slots, no title/icon)
-- **`NarrowWideDetails`** — details read-only variant; sets children to DISPLAY_ONLY mode and supports highlighted data
-
-## Pega Metadata
-
-| Variant           | Registration Key    |
-| ----------------- | ------------------- |
-| NarrowWide        | `NarrowWide`        |
-| NarrowWidePage    | `NarrowWidePage`    |
-| NarrowWideForm    | `NarrowWideForm`    |
-| NarrowWideDetails | `NarrowWideDetails` |
-
-All extend `PConnProps`.
-
-## Props
-
-### NarrowWide
-
-| Prop       | Type          | Required | Description                                                |
-| ---------- | ------------- | -------- | ---------------------------------------------------------- |
-| `children` | `ReactNode[]` | No       | Two children rendered in narrow/wide slots                 |
-| `a`        | `any`         | No       | Narrow (left) column content                               |
-| `b`        | `any`         | No       | Wide (right) column content                                |
-| `title`    | `string`      | No       | Optional title (not rendered in reference implementation)  |
-| `cols`     | `string`      | No       | Column template (not rendered in reference implementation) |
-| `icon`     | `string`      | No       | Optional icon (not rendered in reference implementation)   |
-
-### NarrowWidePage
-
-| Prop          | Type          | Required | Description                                           |
-| ------------- | ------------- | -------- | ----------------------------------------------------- |
-| `children`    | `ReactNode[]` | Yes      | Two children — `[0]` → narrow slot, `[1]` → wide slot |
-| `title`       | `string`      | Yes      | Page title (passed to NarrowWide)                     |
-| `templateCol` | `string`      | No       | Column ratio (default `'1fr 1fr'`)                    |
-| `icon`        | `string`      | No       | Icon name (strips `'pi pi-'` prefix)                  |
-
-### NarrowWideForm
-
-| Prop       | Type          | Required | Description                                           |
-| ---------- | ------------- | -------- | ----------------------------------------------------- |
-| `children` | `ReactNode[]` | Yes      | Two children — `[0]` → narrow slot, `[1]` → wide slot |
-
-### NarrowWideDetails
-
-| Prop                  | Type       | Required | Description                                                               |
-| --------------------- | ---------- | -------- | ------------------------------------------------------------------------- |
-| `label`               | `string`   | Yes      | Section label for FieldGroup                                              |
-| `showLabel`           | `boolean`  | No       | Whether to show the label. Default `true`                                 |
-| `showHighlightedData` | `boolean`  | No       | Whether to render highlighted data fields above children. Default `false` |
-| `getPConnect`         | `function` | Yes      | PConnect getter                                                           |
-
-## Behavioral Contract
-
-### NarrowWide
-
-1. If `children` is provided and has exactly 2 items, render `children[0]` in `.psdk-narrow-column-column` and `children[1]` in `.psdk-wide-column-column` (both wrapped in `.psdk-narrow-wide-column`).
-2. If `a` and `b` are provided (and children is empty/not 2 items), render `a` in the narrow slot and `b` in the wide slot.
-3. The two render paths are independent — priority is `children` if length === 2, otherwise `a`/`b`.
-
-### NarrowWidePage
-
-1. Extract `childrenToRender = children as ReactElement[]`.
-2. Retrieve `NarrowWide` from the component registry.
-3. Render `<NarrowWide a={childrenToRender[0]} b={childrenToRender[1]} title={title} cols={templateCol} icon={icon?.replace('pi pi-', '')} />`.
-
-### NarrowWideForm
-
-1. Render exactly as `NarrowWide` with `children` path — checks `children.length === 2`, renders narrow/wide slots.
-2. Does not support `a`/`b` props.
-
-### NarrowWideDetails
-
-1. Call `getPConnect().getInheritedProps()` and merge with `{ label, showLabel }` for `propsToUse`.
-2. Set `getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY')` and `setInheritedProp('readOnly', true)`.
-3. Map `getPConnect().getChildren()` → `createElement(PConnectComponent, { ...configObject, key: index })`.
-4. If `showHighlightedData` is true, read `getRawMetadata().config.highlightedData`, set each field's `displayMode = 'STACKED_LARGE_VAL'`, mark `pyStatusWork` fields as `type='TextInput', displayAsStatus=true`, and create components via `getPConnect().createComponent(field, '', 0, {})`.
-5. Wrap everything in `<FieldGroup name={theName}>` where `theName = propsToUse.showLabel && propsToUse.label ? propsToUse.label : ''`.
-6. Layout: highlighted data in `Grid size={{ xs: COLUMN_WIDTHS[i] }}` where `COLUMN_WIDTHS = [4, 8]`, then children in `Grid size={{ xs: 12 }}` rows.
-
-## Visual Specifications
-
-Derived from `NarrowWide.css`:
-
-### Container
-
-| CSS Class                    | Property | Value                         |
-| ---------------------------- | -------- | ----------------------------- |
-| `.psdk-narrow-wide-column`   | Display  | flex or grid (two-column row) |
-| `.psdk-narrow-column-column` | Width    | ~33% (1 of 3 parts)           |
-| `.psdk-wide-column-column`   | Width    | ~67% (2 of 3 parts)           |
-
-**CSS-only implementation notes:**
-
-- `.psdk-narrow-wide-column`: `display: grid; grid-template-columns: 1fr 2fr; gap: 1rem`.
-- `.psdk-narrow-column-column`: takes the first (narrower) grid column.
-- `.psdk-wide-column-column`: takes the second (wider) grid column.
-- On mobile: `grid-template-columns: 1fr` (stacks vertically).
-
-## Edge Cases & Special Logic
-
-- `NarrowWide` supports both `children` and `a`/`b` slot patterns — check `children` length first.
-- `NarrowWideDetails` highlighted data grid uses `[4, 8]` column widths (narrow left, wide right for STACKED_LARGE_VAL fields).
-- `NarrowWideDetails` reads `theName` from `propsToUse` (which merges inherited props) — the `label` prop alone may be overridden by inherited props.
-- Icon cleanup in `NarrowWidePage`: strip `'pi pi-'` prefix from the icon string before passing to `NarrowWide`.
-
-## Dependencies
-
-- `NarrowWidePage`: `getComponentFromRegistry` from `@pega/sdk-react`
-- `NarrowWideDetails`: `getComponentFromRegistry('FieldGroup')`, `PConnectComponent` from `@pega/sdk-react`
-
-## Design System Mapping
-
-**UI control type:** Asymmetric two-column layout (sidebar + main content).
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                                            |
-| ------------------ | -------------------------------------------------------------------------------- |
-| Default (CSS only) | CSS Grid `grid-template-columns: 1fr 2fr; gap: 1rem`                             |
-| MUI                | `<Grid container><Grid size={{ xs: 12, md: 4 }}><Grid size={{ xs: 12, md: 8 }}>` |
-| Ant Design         | `<Row gutter={16}><Col xs={24} md={8}><Col xs={24} md={16}>`                     |
-| Chakra UI          | `<Grid templateColumns={{ base: '1fr', md: '1fr 2fr' }} gap={4}>`                |
-| Shadcn/ui          | Tailwind `grid grid-cols-1 md:grid-cols-[1fr_2fr] gap-4`                         |
-
-When implementing in a specific design system:
-
-- Narrow column ≈ 33% width (1fr of 3fr total)
-- Wide column ≈ 67% width (2fr of 3fr total)
-- `NarrowWideDetails` always forces DISPLAY_ONLY + readOnly on children

package/templates/react-sdk-reference/.claude/skills/template-skills/OneColumn.md

@@ -1,114 +0,0 @@
-# Skill: OneColumn
-
-Single-column layout template that stacks all children in a full-width column.
-
-> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
-
----
-
-## Component Purpose
-
-Renders all children stacked vertically in a single full-width column. Three closely related sub-variants:
-
-- **`OneColumn`** — core layout with internal grid and column style
-- **`OneColumnPage`** — thin wrapper that delegates to `OneColumn` via the component registry
-- **`OneColumnTab`** — minimal pass-through wrapper for tab context (`<div id='OneColumnTab'>`)
-
-## Pega Metadata
-
-| Variant       | Registration Key |
-| ------------- | ---------------- |
-| OneColumn     | `OneColumn`      |
-| OneColumnPage | `OneColumnPage`  |
-| OneColumnTab  | `OneColumnTab`   |
-
-All extend `PConnProps`. Children are received as React `children`.
-
-## Props
-
-| Prop       | Type          | Required | Description                                         |
-| ---------- | ------------- | -------- | --------------------------------------------------- |
-| `children` | `ReactNode[]` | Yes      | One or more children to render in the single column |
-
-## Sub-Variants
-
-### OneColumnPage
-
-Thin pass-through wrapper. Retrieves `OneColumn` from the component registry and renders with all props forwarded:
-
-```typescript
-const OneColumn = getComponentFromRegistry('OneColumn');
-return <OneColumn {...props} />;
-```
-
-### OneColumnTab
-
-Minimal wrapper — renders children in a plain `<div>` with `id='OneColumnTab'`:
-
-```typescript
-return <div id='OneColumnTab'>{children}</div>;
-```
-
-No grid or column styles applied. Used purely as a slot container inside tab panels.
-
-## Behavioral Contract
-
-1. Render a Grid container with `spacing={2}`.
-2. Render a single inner Grid at `size={{ xs: 12 }}` with `colStyles` applied.
-3. Map over all `children` and render each child.
-4. `OneColumnPage` delegates all rendering to `OneColumn` from the registry.
-5. `OneColumnTab` renders children in a plain `<div>` — no Grid, no styles.
-
-## Visual Specifications
-
-Derived from `OneColumn.tsx` makeStyles:
-
-### Column Style
-
-| Property      | Value                                 |
-| ------------- | ------------------------------------- |
-| Display       | grid                                  |
-| Gap           | 1rem                                  |
-| Align content | baseline (children stack top-aligned) |
-
-### Grid Spacing
-
-| Property          | Value      |
-| ----------------- | ---------- |
-| Container spacing | 2 (≈ 16px) |
-
-**CSS-only implementation notes:**
-
-- Column: `display: grid; gap: 1rem; align-content: baseline; width: 100%`.
-- Outer container: `display: grid; grid-template-columns: 1fr; gap: 16px`.
-- `OneColumnTab`: just `<div>` with no special styling.
-
-## Edge Cases & Special Logic
-
-- `OneColumn` maps over all children (not just first/second) — supports any number of children.
-- `OneColumnPage` uses the registry — if an override exists for `OneColumn`, it will be used.
-- `OneColumnTab` does NOT apply the `colStyles` grid — it is intentionally simpler.
-
-## Dependencies
-
-- `OneColumnPage`: `getComponentFromRegistry` from `@pega/sdk-react`
-- `OneColumn` / `OneColumnTab`: no special dependencies
-
-## Design System Mapping
-
-**UI control type:** Single full-width column layout.
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                    |
-| ------------------ | -------------------------------------------------------- |
-| Default (CSS only) | `<div style="display:grid;gap:1rem;">` wrapping children |
-| MUI                | `<Grid container spacing={2}><Grid size={{ xs: 12 }}>`   |
-| Ant Design         | `<Row><Col span={24}>`                                   |
-| Chakra UI          | `<Stack spacing={4}>` or `<Grid templateColumns='1fr'>`  |
-| Shadcn/ui          | Tailwind `flex flex-col gap-4`                           |
-
-When implementing in a specific design system:
-
-- All children render in a single column, top-aligned
-- `OneColumnTab` variant is a minimal `<div>` container with no layout styling

package/templates/react-sdk-reference/.claude/skills/template-skills/PromotedFilters.md

@@ -1,130 +0,0 @@
-# Skill: PromotedFilters
-
-Promoted filters template. Renders a set of promoted filter fields above a `ListView`, allowing users to filter list data through a Clear/Search workflow using transient data.
-
-> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
-
----
-
-## Component Purpose
-
-Renders promoted filter controls above a list view. Filter fields are created dynamically via `PCore.createPConnect` and managed as transient data. On search, filter values are formatted and passed to the `ListView` as a query payload. The component also handles the `ListView` rendering below the filters.
-
-## Pega Metadata
-
-- **Registration key:** `PromotedFilters` (in `component-map.ts`)
-- **Category:** Search / Filter template
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop              | Type       | Required | Description                                                   |
-| ----------------- | ---------- | -------- | ------------------------------------------------------------- |
-| `viewName`        | `string`   | Yes      | Name of the promoted filters view — used as transient item ID |
-| `dataPageName`    | `string`   | Yes      | Data page name passed to `ListView`                           |
-| `promotedFilters` | `array`    | Yes      | Array of filter field definitions `{ name, classID, ... }`    |
-| `payload`         | `object`   | No       | Base query payload for the data page                          |
-| `isSearchable`    | `boolean`  | No       | Whether the ListView below shows a global search input        |
-| `getPConnect`     | `function` | Yes      | PConnect getter                                               |
-
-## Behavioral Contract
-
-### Transient Data Setup
-
-On mount:
-
-1. Build `filtersWithClassID`: add `classID` to each filter from `getPConnect().getContextName()` or metadata.
-2. Call `PCore.getDataPageUtils().addTransientItem({ id: viewName, data: filtersWithClassID })`.
-3. This creates a transient data context for the filter fields.
-
-### Filters Sub-Component
-
-The `<Filters>` inline sub-component:
-
-1. Creates each filter field via `PCore.createPConnect({ ... filterFieldConfig, contextName: viewName + '.' + filter.name })`.
-2. Renders each created pConnect as a field component via `createElement(PConnectComponent, { ...fieldConfig })`.
-
-### Search
-
-On Search button click:
-
-1. Call `getFilterData(viewName, promotedFilters)`:
-   - For each filter, read current value from transient store.
-   - Build filter objects: `{ lhs: { field: filter.name }, comparator: 'EQ', rhs: { value: currentValue } }`.
-   - Skip filters with empty/null values.
-2. Pass the resulting filter array to `ListView` as `payload.filters`.
-3. `ListView` re-fetches with the filter payload.
-
-### Clear
-
-On Clear button click:
-
-1. Call `clearFilterData(viewName, promotedFilters)`:
-   - For each filter, reset the transient value to `''` or `null`.
-2. Reset `payload.filters` to `[]`.
-3. `ListView` re-fetches without filters.
-
-### Render Structure
-
-```
-<div className="psdk-promoted-filters">
-  <div className="psdk-promoted-filters-fields">
-    <Filters />   {/* filter fields */}
-  </div>
-  <div className="psdk-promoted-filters-actions">
-    <Button onClick={handleClear}>Clear</Button>
-    <Button onClick={handleSearch}>Search</Button>
-  </div>
-  <ListView bInForm={true} isSearchable={isSearchable} dataPageName={dataPageName} payload={activePayload} />
-</div>
-```
-
-## Visual Specifications
-
-| Element           | Description                                |
-| ----------------- | ------------------------------------------ |
-| Filter fields row | Horizontal flex row of filter field inputs |
-| Action buttons    | Clear + Search buttons, right-aligned      |
-| ListView          | Below the filter row, full width           |
-
-**CSS-only implementation notes:**
-
-- Outer container: `display: flex; flex-direction: column; gap: 1rem`.
-- Filter fields row: `display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end`.
-- Action buttons row: `display: flex; gap: 0.5rem; justify-content: flex-end`.
-
-## Edge Cases & Special Logic
-
-- Transient item must be cleaned up on unmount: call `PCore.getDataPageUtils().removeTransientItem(viewName)`.
-- `getFilterData` skips empty values — a filter with no input is not sent to the query.
-- If all filters are empty, the Search returns unfiltered results.
-- `PCore.createPConnect` creates new pConnect instances for each filter — these must be properly keyed and managed.
-
-## Dependencies
-
-- `getFilterData`, `clearFilterData` from `./utils`
-- `PCore.getDataPageUtils().addTransientItem()` — transient context setup
-- `PCore.createPConnect()` — creates pConnect instances for filter fields
-- `ListView` — the list below the filters
-- `PConnectComponent` from `@pega/sdk-react`
-- MUI: `<Button>`
-
-## Design System Mapping
-
-**UI control type:** Filter bar above a list view — transient field inputs + Clear/Search actions.
-
-Listed design systems are examples only.
-
-| Design System      | Filter Row                                     | Action Buttons                       |
-| ------------------ | ---------------------------------------------- | ------------------------------------ |
-| Default (CSS only) | `display: flex; flex-wrap: wrap` inputs        | `<button>` for Clear/Search          |
-| MUI                | `<Box display='flex' flexWrap='wrap' gap={1}>` | `<Button>` variants                  |
-| Ant Design         | `<Space wrap>`                                 | `<Button type='primary'>` for Search |
-| Chakra UI          | `<HStack wrap='wrap'>`                         | `<Button colorScheme='blue'>`        |
-| Shadcn/ui          | Tailwind `flex flex-wrap gap-2`                | `<Button>` variants                  |
-
-When implementing in a specific design system:
-
-- Transient data pattern is critical — each filter field must read/write to `PCore`'s transient store
-- `getFilterData` builds the query filter payload — use it unchanged
-- Transient item cleanup on unmount is required to avoid stale data

package/templates/react-sdk-reference/.claude/skills/template-skills/SelfServiceCaseView.md

@@ -1,142 +0,0 @@
-# Skill: SelfServiceCaseView
-
-Self-service portal case view template. Renders a case workspace optimized for self-service channels, with a compact summary sidebar, main content area, and optional utilities panel.
-
-> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
-
----
-
-## Component Purpose
-
-A case view variant designed for self-service portal channels. Uses a horizontal flex layout (25% summary / flex:1 main / 25% utilities) instead of the 3-column grid of `CaseView`. Filters case summary data to only include fields available in the self-service channel, and filters utilities to self-service-appropriate actions.
-
-## Pega Metadata
-
-- **Registration key:** `SelfServiceCaseView` (in `component-map.ts`)
-- **Category:** Page template — self-service case workspace
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop           | Type          | Required | Description                                                     |
-| -------------- | ------------- | -------- | --------------------------------------------------------------- |
-| `children`     | `ReactNode[]` | Yes      | Region children (variable count based on `isObjectType`)        |
-| `isObjectType` | `boolean`     | No       | Whether the case is an object-type (affects child region count) |
-| `getPConnect`  | `function`    | Yes      | PConnect getter                                                 |
-
-## Behavioral Contract
-
-### Region Assignment by Child Index
-
-Child indexing depends on `isObjectType`:
-
-**`isObjectType === false` (5 children):**
-
-| Index | Region          |
-| ----- | --------------- |
-| 0     | Summary         |
-| 1     | (Header/Stages) |
-| 2     | Main content    |
-| 3     | Utilities       |
-| 4     | (Additional)    |
-
-**`isObjectType === true` (3 children):**
-
-| Index | Region       |
-| ----- | ------------ |
-| 0     | Summary      |
-| 1     | Main content |
-| 2     | Utilities    |
-
-Show/hide individual regions based on:
-
-- `showSummary`: always show summary region.
-- `showMain`: always show main content region.
-- `showUtilities`: show utilities only if the region has content.
-
-### `selfServiceCaseViewHeader`
-
-Renders a slim header bar above the main flex layout showing:
-
-- Case ID / case type name
-- Case status badge
-
-### Case Summary Data
-
-Call `prepareCaseSummaryData(primaryFields, secondaryFields, getPConnect)` with a filter:
-
-- Only include fields where `availableInChannel.selfService === true`.
-
-### Utilities Filter
-
-Call `filterUtilities(utilitiesChildren, getPConnect)` to remove utilities not appropriate for self-service channels.
-
-### Render Structure
-
-```
-<div className="psdk-ss-case-view">
-  <selfServiceCaseViewHeader />
-  <div className="psdk-ss-case-view-body" style="display:flex; flex-direction:row">
-    <div style="flex: 0 0 25%">   {/* Summary */}
-      {showSummary && summaryRegion}
-    </div>
-    <div style="flex: 1">         {/* Main content */}
-      {showMain && mainRegion}
-    </div>
-    <div style="flex: 0 0 25%">  {/* Utilities */}
-      {showUtilities && utilitiesRegion}
-    </div>
-  </div>
-</div>
-```
-
-## Visual Specifications
-
-| Column    | Width       | Contents                                    |
-| --------- | ----------- | ------------------------------------------- |
-| Summary   | 25% (fixed) | Case summary fields (self-service filtered) |
-| Main      | flex: 1     | Main case content / assignment form         |
-| Utilities | 25% (fixed) | Filtered utilities                          |
-
-**CSS-only implementation notes:**
-
-- Body layout: `display: flex; flex-direction: row; gap: 1rem`.
-- Summary column: `flex: 0 0 25%; min-width: 0`.
-- Main column: `flex: 1 1 auto; min-width: 0`.
-- Utilities column: `flex: 0 0 25%; min-width: 0`.
-- Header bar: `display: flex; align-items: center; gap: 1rem; padding: 0.5rem 0; margin-bottom: 1rem`.
-- Responsive: collapse to single column on mobile.
-
-## Edge Cases & Special Logic
-
-- `isObjectType` changes the number of `children` — always derive regions by index based on this flag.
-- `filterUtilities` may return empty array — `showUtilities` should be `false` in that case (hide the column entirely).
-- Summary fields filtered by `availableInChannel.selfService` — if all fields are filtered out, the summary column may be empty.
-- The self-service header differs from the standard case header — it is a separate sub-component, not the full `CaseView` header.
-
-## Dependencies
-
-- `prepareCaseSummaryData` from `./utils` — with self-service channel filter applied
-- `filterUtilities` from `./utils` — removes non-self-service utilities
-- `selfServiceCaseViewHeader` — inline sub-component or imported header
-- `PConnectComponent` from `@pega/sdk-react`
-
-## Design System Mapping
-
-**UI control type:** Self-service portal case workspace — horizontal 3-panel flex layout.
-
-Listed design systems are examples only.
-
-| Design System      | Layout                                                                 | Header Bar                  |
-| ------------------ | ---------------------------------------------------------------------- | --------------------------- |
-| Default (CSS only) | CSS `display:flex` with percentage widths                              | Custom `<header>`           |
-| MUI                | `<Box display='flex' flexDirection='row'>` with `<Box flex='0 0 25%'>` | `<Box>` with `<Typography>` |
-| Ant Design         | `<Layout>` with `<Sider>` + `<Content>`                                | `<PageHeader>`              |
-| Chakra UI          | `<HStack align='stretch'>` with width constraints                      | `<Flex>`                    |
-| Shadcn/ui          | Tailwind `flex flex-row`                                               | Custom header               |
-
-When implementing in a specific design system:
-
-- `isObjectType` determines child count — do not assume fixed child order without checking this flag
-- Self-service channel filter on summary data is mandatory — `availableInChannel.selfService === true`
-- `filterUtilities` result controls utilities column visibility