@pega/sdk 0.0.4 → 0.0.6

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

@@ -0,0 +1,161 @@
+# 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 inputs or `children[0]`/`children[1]`
+- **`NarrowWidePage`** — wrapper that passes children as `a` and `b` slot inputs 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 the project's base component interface.
+
+## Inputs
+
+### NarrowWide
+
+| Name       | Type               | Required | Description                                                |
+| ---------- | ------------------ | -------- | ---------------------------------------------------------- |
+| `children` | renderable content | 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
+
+| Name          | Type               | Required | Description                                           |
+| ------------- | ------------------ | -------- | ----------------------------------------------------- |
+| `children`    | renderable content | 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
+
+| Name       | Type               | Required | Description                                           |
+| ---------- | ------------------ | -------- | ----------------------------------------------------- |
+| `children` | renderable content | Yes      | Two children — `[0]` → narrow slot, `[1]` → wide slot |
+
+### NarrowWideDetails
+
+| Name                  | 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                                                           |
+
+## Implementation Structure
+
+### NarrowWide (core)
+
+**Module Setup:** Define the input contract as an extension of the project's base component interface, adding `a`, `b`, optional `title`, optional `cols`, and optional `icon` fields, and accepting children via the framework's content projection mechanism. Import a companion stylesheet for the layout CSS classes.
+
+**Main Component Logic** — steps in order:
+
+1. Receive `a`, `b`, and `children` from inputs.
+2. When `children` is present and has exactly 2 items, render a `.psdk-narrow-wide-column` container containing a `.psdk-narrow-column-column` element with `children[0]` and a `.psdk-wide-column-column` element with `children[1]`.
+3. When both `a` and `b` are present, render the same `.psdk-narrow-wide-column` / `.psdk-narrow-column-column` / `.psdk-wide-column-column` structure but with `a` and `b` in place of the children.
+4. Both render branches can coexist in the returned fragment — whichever condition is true determines what actually renders.
+
+### NarrowWidePage
+
+A wrapper that forwards children as `a`/`b` slot inputs: resolve `NarrowWide` from the project's component registry; receive `children`, `title`, `templateCol` (default `'1fr 1fr'`), and `icon` (default `''`) from inputs; render `NarrowWide` with `a` set to `children[0]`, `b` set to `children[1]`, `title`, `cols` set to `templateCol`, and `icon` with the `'pi pi-'` prefix stripped.
+
+### NarrowWideForm
+
+A simplified wrapper using only `children` (no `a`/`b` slots, no title/icon): receive `children` from inputs; when `children.length === 2`, render the same `.psdk-narrow-wide-column` structure as the core component (children[0] in the narrow column, children[1] in the wide column); otherwise render nothing.
+
+### NarrowWideDetails
+
+Same pattern as `Details` (see [`Details.md`](./Details.md)) but uses `COLUMN_WIDTHS = [4, 8]` for its grid items instead of `[12]` — highlighted data fields and regular children are both laid out with the column widths array, and the whole thing is wrapped in a `FieldGroup` with `displayMode` and `readOnly` forced via `setInheritedProp`.
+
+## 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 the children array from the content projection.
+2. Resolve `NarrowWide` from the project's component registry.
+3. Render `NarrowWide` with `a` set to `children[0]`, `b` set to `children[1]`, `title`, `cols` set to `templateCol`, and `icon` with the `'pi pi-'` prefix stripped.
+
+### NarrowWideForm
+
+1. Render exactly as `NarrowWide` with `children` path — checks `children.length === 2`, renders narrow/wide slots.
+2. Does not support `a`/`b` slot inputs.
+
+### 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()` → render each child using the project's PConnect bridge utility with the config object and a unique key.
+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 inputs) — the `label` input alone may be overridden by inherited inputs.
+- Icon cleanup in `NarrowWidePage`: strip `'pi pi-'` prefix from the icon string before passing to `NarrowWide`.
+
+## Dependencies
+
+- `NarrowWidePage`: the project's component registry — to resolve `NarrowWide` at runtime.
+- `NarrowWideDetails`: the project's component registry (to resolve `FieldGroup`) and the project's PConnect bridge utility.
+
+## Design System Mapping
+
+**UI control type:** Asymmetric two-column layout (sidebar + main content).
+
+When implementing in a specific design system, map the following:
+
+- **Two-column grid** → use the DS's grid with `1fr 2fr` column ratio (narrow left, wide right)
+- **Mobile** → collapse to single column (`1fr`)
+- **NarrowWideDetails** → forces DISPLAY_ONLY + readOnly on children via inherited inputs
+- **NarrowWidePage** → resolve via the project's component registry and delegate
+- **Narrow column** ≈ 33% width (1fr of 3fr total)
+- **Wide column** ≈ 67% width (2fr of 3fr total)

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

@@ -0,0 +1,114 @@
+# 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 project's component registry
+- **`OneColumnTab`** — minimal pass-through wrapper for tab context (a plain container element with id `OneColumnTab`)
+
+## Pega Metadata
+
+| Variant       | Registration Key |
+| ------------- | ---------------- |
+| OneColumn     | `OneColumn`      |
+| OneColumnPage | `OneColumnPage`  |
+| OneColumnTab  | `OneColumnTab`   |
+
+All extend the project's base component interface. Children are received via the framework's content projection mechanism.
+
+## Implementation Structure
+
+### OneColumn (core)
+
+**Module Setup:** Define the input contract as an extension of the project's base component interface, accepting children.
+
+**Main Component Logic** — steps in order:
+
+1. Receive `children` from inputs.
+2. Render a grid container with spacing of 2 units (≈ 16px) containing a single grid item at full width (12 of 12 columns) with a column-styles class, which iterates over `children` and renders each one unchanged.
+
+**Visual-only styling notes:** apply a column-styles class with `display: grid; gap: 1rem; align-content: baseline`.
+
+### OneColumnPage
+
+A thin pass-through wrapper: resolve `OneColumn` from the project's component registry and render it forwarding all inputs.
+
+### OneColumnTab
+
+A minimal wrapper that renders children inside a plain container element with `id="OneColumnTab"` — no grid or column styles applied.
+
+## Inputs
+
+| Name       | Type               | Required | Description                                         |
+| ---------- | ------------------ | -------- | --------------------------------------------------- |
+| `children` | renderable content | Yes      | One or more children to render in the single column |
+
+## Sub-Variants
+
+### OneColumnPage
+
+A thin pass-through wrapper: resolve `OneColumn` from the project's component registry and render it forwarding all inputs.
+
+### OneColumnTab
+
+Minimal wrapper — renders children in a plain container element with `id='OneColumnTab'` and no grid or column styles applied. Used purely as a slot container inside tab panels.
+
+## Behavioral Contract
+
+1. Render a grid container with spacing of 2 units.
+2. Render a single inner grid item at full width (12 of 12 columns) with column-styles applied.
+3. Iterate over all `children` and render each child.
+4. `OneColumnPage` delegates all rendering to `OneColumn` from the project's component registry.
+5. `OneColumnTab` renders children in a plain container element — no grid, no styles.
+
+## Visual Specifications
+
+### 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 a plain container with no special styling.
+
+## Edge Cases & Special Logic
+
+- `OneColumn` iterates 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 column-styles grid — it is intentionally simpler.
+
+## Design System Mapping
+
+**UI control type:** Single-column vertical stack layout.
+
+When implementing in a specific design system, map the following:
+
+- **Grid container** → use the DS's grid/layout component with a single full-width column
+- **Column style** → apply `display: grid; gap: 1rem; align-content: baseline` to the inner column
+- **OneColumnPage** → resolve via the project's component registry and delegate
+- **OneColumnTab** → render a plain container element (no styling)
+
+## Dependencies
+
+- `OneColumnPage`: the project's component registry — to resolve the `OneColumn` component at runtime.
+- `OneColumn` / `OneColumnTab`: no special dependencies.

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

@@ -0,0 +1,132 @@
+# 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 the project's component map)
+- **Category:** Search / Filter template
+- **Extends:** the project's base component interface
+
+## Inputs
+
+| Input             | 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                                               |
+
+## Implementation Structure
+
+**Constants:** Define a `SUPPORTED_TYPES_IN_PROMOTED_FILTERS` list containing field types that can be rendered as filters directly: `TextInput`, `Percentage`, `Email`, `Integer`, `Decimal`, `Checkbox`, `DateTime`, `Date`, `Time`, `Text`, `TextArea`, `Currency`, `URL`, `RichText`.
+
+**Filters Sub-Component** — accepts `filters`, `transientItemID`, and `localeReference`. For each filter: clone the filter object; if its `type` is not in the supported types list, coerce it to `'TextInput'` and remove its `config.placeholder`; set `config.contextName`, `config.readOnly = false`, `config.context`, and `config.localeReference` on the clone; create a PConnect environment via `PCore.createPConnect({ meta: filterClone, options: { hasForm: true, contextName: transientItemID } })`; and render the resulting component via the project's component registry bridge component.
+
+**Main Component Logic** — steps in order:
+
+1. Retrieve the `ListView` component from the project's component registry; bind `localizedVal` to `PCore.getLocaleUtils().getLocaleValue`.
+2. Receive inputs: `getPConnect`, `viewName`, `filters`, `listViewProps`, `pageClass`, and `parameters`. Initialize local state for `initTable` (boolean, default `false`) and `payload` (object, default `{}`).
+3. Build a transient item on mount (memoized computation, empty dependency list): construct a `filtersProperties` object mapping each filter's resolved property name (via `PCore.getAnnotationUtils().getPropertyName(f.config.value)`) to an empty string, then call `getPConnect().getContainerManager().addTransientItem({ id: viewName, data: { ...filtersProperties, classID: pageClass } })` and store the resulting `transientItemID`.
+4. Define a cached callback search handler (keyed on `transientItemID`) that: prevents the default event; reads form changes via `PCore.getFormUtils().getChanges(transientItemID)`; builds a `formValues` object from those changes, excluding the `context_data` and `pageInstructions` keys; formats the values into `promotedFilters` via a `formatPromotedFilters` helper; and, if the form is valid (`PCore.getFormUtils().isFormValid(transientItemID)`) and the input passes `isValidInput(formValues)`, sets `initTable` to `true` and builds a query object (`{ dataViewParameters: parameters }`, adding a `query.filter.filterConditions` when `promotedFilters` is non-empty) and stores it in the payload local state.
+5. Define a cached callback clear handler (keyed on `transientItemID`) that clears the transient data via `PCore.getContainerUtils().clearTransientData(transientItemID)`, resets `initTable` to `false`, and clears any selected rows via `getPConnect()?.getListActions?.()?.setSelectedRows([])`.
+6. Render: the `listViewProps.title` in a heading element; the Filters sub-component (passed `filters`, `transientItemID`, and `listViewProps.localeReference`); a container with a Clear button (wired to the clear handler) and a Search button (wired to the search handler); and, when `initTable` is true, a `ListView` spread with `listViewProps`, an empty `title`, the computed `payload`, and `isSearchable` set.
+
+## Behavioral Contract
+
+### Transient Data Setup
+
+On mount:
+
+1. Build `filtersWithClassID`: map each filter's property name (via `PCore.getAnnotationUtils().getPropertyName(filter.config.value)`) to an empty string, then add `classID` from `pageClass`.
+2. Call `getPConnect().getContainerManager().addTransientItem({ id: viewName, data: filtersWithClassID })`.
+3. This creates a transient data context for the filter fields and returns a `transientItemID`.
+
+### Filters Sub-Component
+
+The Filters sub-component:
+
+1. Creates each filter field via `PCore.createPConnect({ meta: filterClone, options: { hasForm: true, contextName: transientItemID } })`.
+2. If the filter type is not in `SUPPORTED_TYPES_IN_PROMOTED_FILTERS`, coerces it to `TextInput` and removes the placeholder.
+3. Renders each created PConnect as a field component via the project's component registry bridge.
+
+### Search
+
+On Search button click:
+
+1. Prevent default form submission.
+2. Read form changes via `PCore.getFormUtils().getChanges(transientItemID)`.
+3. Build `formValues` from the changes, excluding `context_data` and `pageInstructions` keys.
+4. Format filter values via `formatPromotedFilters`: for each non-empty field, build `{ lhs: { field }, comparator: 'EQ', rhs: { value } }`.
+5. Validate with `PCore.getFormUtils().isFormValid(transientItemID)` and `isValidInput(formValues)`.
+6. If valid, set `initTable` to true and build a query object with `dataViewParameters` and, if filters are non-empty, `query.filter.filterConditions`.
+7. Store the query in payload local state — `ListView` re-fetches with the filter payload.
+
+### Clear
+
+On Clear button click:
+
+1. Call `PCore.getContainerUtils().clearTransientData(transientItemID)`.
+2. Reset `initTable` to `false`.
+3. Clear any selected rows via `getPConnect()?.getListActions?.()?.setSelectedRows([])`.
+4. `ListView` re-fetches without filters.
+
+### Render Structure
+
+An outer container holding: a title heading element; a fields container with the Filters sub-component; an actions container with Clear and Search buttons (localized via `PCore.getLocaleUtils().getLocaleValue('Clear', 'SimpleTable')` and `PCore.getLocaleUtils().getLocaleValue('Search', 'SimpleTable')`); and a `ListView` below (shown only when `initTable` is true), receiving `listViewProps`, an empty `title`, the active `payload`, and `isSearchable` set.
+
+## 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           |
+
+- Outer container: vertical flex layout with 1rem gap.
+- Filter fields row: horizontal flex layout, wrapping enabled, 0.5rem gap, items aligned to bottom.
+- Action buttons row: horizontal flex layout, 0.5rem gap, justified to end.
+
+## Edge Cases & Special Logic
+
+- Transient item must be cleaned up on unmount: call `PCore.getContainerUtils().clearTransientData(transientItemID)` or equivalent lifecycle cleanup.
+- The search handler 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.
+- `isValidInput` returns true only if at least one filter value is truthy.
+
+## Dependencies
+
+- `formatPromotedFilters` — builds EQ filter condition objects from form values
+- `isValidInput` — validates that at least one filter field has a value
+- `PCore.getContainerManager().addTransientItem()` — transient context setup
+- `PCore.getContainerUtils().clearTransientData()` — transient context teardown
+- `PCore.getFormUtils().getChanges()` — reads transient form state
+- `PCore.getFormUtils().isFormValid()` — validates transient form
+- `PCore.getAnnotationUtils().getPropertyName()` — resolves property names from value references
+- `PCore.createPConnect()` — creates PConnect instances for filter fields
+- `PCore.getLocaleUtils().getLocaleValue()` — localizes button labels
+- `ListView` — the list below the filters (from the project's component registry)
+
+## Design System Mapping
+
+**UI control type:** Filter bar above a list view — transient field inputs + Clear/Search actions.
+
+When implementing in a specific design system, use the appropriate button component for Clear and Search actions, and a horizontal flex/wrap layout for the filter fields row. The filter fields themselves are rendered dynamically via PConnect and will use whatever field components are registered in the project's component registry. Each design system will have its own equivalents for the action buttons and layout containers.
+
+Design considerations:
+
+- Transient data pattern is critical — each filter field must read/write to `PCore`'s transient store
+- The `formatPromotedFilters` helper builds the query filter payload — use it unchanged
+- Transient item cleanup on unmount is required to avoid stale data
+- Button labels must be localized via `PCore.getLocaleUtils().getLocaleValue`

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

@@ -0,0 +1,173 @@
+# 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 the project's component map)
+- **Category:** Page template — self-service case workspace
+- **Extends:** the project's base component interface
+
+## Inputs
+
+| Name                  | Type                | Required | Description                                                                              |
+| --------------------- | ------------------- | -------- | ---------------------------------------------------------------------------------------- |
+| `children`            | renderable content  | Yes      | Region children (variable count based on `isObjectType`)                                 |
+| `icon`                | `string`            | No       | Icon identifier for the case type avatar                                                 |
+| `header`              | `string`            | Yes      | Case type display name / header text                                                     |
+| `subheader`           | `string`            | No       | Secondary header text (typically case ID)                                                |
+| `showCaseLifecycle`   | `boolean \| string` | No       | Whether to show the lifecycle/stages region (default `true`)                             |
+| `showSummaryRegion`   | `boolean \| string` | No       | Whether to show the summary column (default `true`)                                      |
+| `showUtilitiesRegion` | `boolean \| string` | No       | Whether to show the utilities column (default `true`)                                    |
+| `showCaseActions`     | `boolean \| string` | No       | Whether to show the actions menu (default `true`)                                        |
+| `caseClass`           | `string`            | No       | Case class used to determine object-type behavior                                        |
+| `caseInfo`            | `object`            | No       | Object containing `availableActions`, `availableProcesses`, `caseTypeID`, `caseTypeName` |
+| `getPConnect`         | `function`          | Yes      | PConnect getter                                                                          |
+
+## Implementation Structure
+
+**Module Setup:** The component needs the project's component registry (to retrieve `CaseViewActionsMenu` and `CaseSummary` at runtime), a `prepareCaseSummaryData` utility for filtering summary fields, a `filterUtilities` utility for filtering non-self-service utilities, a `Utils` helper for resolving image sources, and companion styles for the layout and header.
+
+**Main Component Logic** — steps in order:
+
+1. Retrieve `CaseViewActionsMenu` and `CaseSummary` from the project's component registry.
+2. Receive inputs: `icon` (default `''`), `getPConnect`, `header`, `subheader`, `showCaseLifecycle`/`showSummaryRegion`/`showUtilitiesRegion`/`showCaseActions` (each defaulting to `true`), `children`, `caseClass`, and `caseInfo` fields (`availableActions`, `availableProcesses`, `caseTypeID`, `caseTypeName`, each with sensible defaults); call `getPConnect()` once and reuse the result.
+3. Coerce the four `show*` boolean-ish inputs (which may arrive as strings) to real booleans by checking `p === true || p === 'true'` for each.
+4. Determine `isObjectType` via `PCore.getCaseUtils().isObjectCaseType(caseClass)` — this affects how children are indexed.
+5. Get the locale key via `pConnect.getCaseLocaleReference()`.
+6. Resolve the case icon image source via `Utils.getImageSrc(icon, Utils.getSDKStaticConentUrl())`.
+7. **Assign regions using TWO parallel arrays:** rendered children (for display) and PConnect child envs (for metadata access). Get `renderChildren` from the framework's content projection input (as a renderable array). Get `pConnChildren` from `pConnect.getChildren()` (PConnect child envs that DO have `getPConnect` methods). Index both by the same positions. For rendering: `stagesElement = renderChildren[1]`, `todoElement = renderChildren[2]`, `utilitiesElement = renderChildren[4]` (non-object) or `mainElement = renderChildren[1]`, `utilitiesElement = renderChildren[2]` (object). For metadata: `summaryEnv = pConnChildren[0]`, `utilitiesEnv = pConnChildren[4]` (non-object) or `pConnChildren[2]` (object). **Do NOT call `.getPConnect()` on rendered children** — they are rendered elements without a direct `getPConnect` method.
+8. Filter summary fields for the self-service channel: call `prepareCaseSummaryData(summaryEnv, filterFn)` where `summaryEnv` is from `pConnChildren` (not from rendered children). The helper calls `summaryEnv.getPConnect().getChildren()` which works because PConnect child envs have `getPConnect` methods.
+9. Compute utilities visibility: `isUtilitiesRegionNotEmpty(utilitiesEnv)` uses the PConnect child env (from `pConnChildren`) to check whether utilities have visible children.
+10. Compute visibility flags: `showUtilities` is true when `bShowUtilitiesRegion` and `isUtilitiesRegionNotEmpty()`; `showSummary` is true when `bShowSummaryRegion` and either summary field list is non-empty.
+11. Render a self-service header bar (class `selfServiceCaseViewHeader`) showing the localized `header` text and (when `bShowCaseActions`) the `CaseViewActionsMenu` component with the action inputs passed through.
+12. Below the header, render a horizontal flex row with three sections: the summary region at `flex: 0 0 25%` (rendered only when `showSummary`, containing a card with the case icon avatar, localized header, subheader, dividers, and the `CaseSummary` component with `arPrimaryFields` and `arSecondaryFields`); the main content area at `flex: 1` (containing the stages element directly when `bShowCaseLifecycle`, followed by the todo/main element directly); and the utilities region at `flex: 0 0 25%` (rendered only when `showUtilities`, rendering the utilities element directly). **Render children directly in the template** — do NOT pass them through the PConnect bridge component.
+
+## Behavioral Contract
+
+### Region Assignment by Child Index
+
+> ⚠️ **CRITICAL:** Use TWO parallel arrays for child access:
+>
+> - `renderChildren` (from the framework's content projection input) — for RENDERING regions directly in the template
+> - `pConnChildren` (from `pConnect.getChildren()`) — for METADATA access (filtering, field extraction)
+>
+> **Do NOT call `.getPConnect()` on rendered children** — they are rendered elements without a direct `getPConnect` method. Only PConnect child envs (from `pConnect.getChildren()`) have `getPConnect`.
+
+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`: show summary only when the region has filtered content.
+- `showMain`: always show main content region.
+- `showUtilities`: show utilities only if the region has visible children.
+
+### Self-Service Case View Header
+
+Renders a slim header bar above the main flex layout showing:
+
+- Localized header text via `PCore.getLocaleUtils().getLocaleValue(header, '', localeKey)`
+- The `CaseViewActionsMenu` component (when `bShowCaseActions` is true)
+
+### Case Summary Data
+
+Call `prepareCaseSummaryData(summaryEnv, filterFn)` where `summaryEnv` is a PConnect child env (from `pConnect.getChildren()`, NOT from rendered children). The helper accesses `summaryEnv.getPConnect().getChildren()` to iterate region children.
+
+- Only include fields where `availableInChannel.selfService === true`.
+
+### Utilities Filter
+
+The `isUtilitiesRegionNotEmpty` function uses the PConnect child env (from `pConnect.getChildren()`) to access `utilitiesEnv.getPConnect().getChildren()` and check visibility.
+
+### Utilities Visibility Check
+
+Uses the PConnect child env — NOT the rendered element — to access children metadata via `getPConnect().getChildren()` and verify at least one child has `getConfigProps().visibility !== false`.
+
+### Render Structure
+
+An outer container holding the self-service header (`psdk-ss-case-view-header` or equivalent class), followed by a flex row body (`display: flex; flex-direction: row`) with three children: a `flex: 0 0 25%` box showing the summary card when `showSummary` is true; a `flex: 1` box showing the main region; and a `flex: 0 0 25%` box showing the utilities region when `showUtilities` is true.
+
+## 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                          |
+
+**Companion styles:**
+
+- 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: `margin: 10px 8px 0 8px; height: 50px; display: flex; justify-content: space-between; align-items: center; padding: 0 8px`. Background uses the primary light color with contrasting text.
+- Summary card root: padding and margin of one spacing unit on all sides.
+- Summary card header: uses the info light background with contrasting text, rounded corners.
+- Case icon box: info dark background, fixed size (e.g. 64x64), with padding.
+- 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 an 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 is hidden.
+- The self-service header differs from the standard case header — it is a separate sub-component, not the full `CaseView` header.
+- The four `show*` inputs may arrive as string `"true"`/`"false"` — coerce to boolean before use.
+
+## Dependencies
+
+- `prepareCaseSummaryData` from the template utilities — with self-service channel filter applied
+- `filterUtilities` from the template utilities — removes non-self-service utilities
+- `Utils.getImageSrc` / `Utils.getSDKStaticConentUrl` — resolves case icon image paths
+- `PCore.getCaseUtils().isObjectCaseType()` — determines child region indexing
+- `PCore.getLocaleUtils().getLocaleValue()` — header localization
+- `pConnect.getCaseLocaleReference()` — locale key for the case
+- The project's component registry — to retrieve `CaseViewActionsMenu` and `CaseSummary`
+- The project's base component interface
+
+## Design System Mapping
+
+**UI control type:** Self-service portal case workspace — horizontal 3-panel flex layout with card-based summary.
+
+When implementing in a specific design system, map the following:
+
+- **Layout container:** Use the design system's flex/grid primitives for the 3-column row. The key constraint is 25%/flex-1/25% proportions.
+- **Summary card:** Use the design system's card component with a header section (avatar + title + subtitle) and dividers between sections. The header should use the theme's info/primary color.
+- **Avatar/Icon:** Use the design system's avatar component (square variant) with the resolved case icon image.
+- **Header bar:** Use the design system's flex container with space-between alignment. Background should be the theme's primary-light color with contrasting text.
+- **Dividers:** Use the design system's divider/separator component between card sections.
+- **Typography:** Use the design system's heading (h6) for the case name and body text for the case ID.
+
+Key constraints regardless of 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
+- Utilities visibility requires checking child `getConfigProps().visibility !== false`