@pega/sdk 0.0.4 → 0.0.5

package/templates/react-sdk-reference/.github/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/.github/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

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

@@ -1,133 +0,0 @@
-# Skill: TwoColumn
-
-Two-column layout template that splits children into two responsive grid columns with configurable width ratios.
-
-> **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 child components side by side in a responsive grid. Column widths are driven by the `templateCol` prop (e.g., `'1fr 1fr'`, `'2fr 1fr'`). On mobile (`xs`), both columns collapse to full width. Three closely related sub-variants share this same layout logic:
-
-- **`TwoColumn`** — core layout, used inside forms and views
-- **`TwoColumnPage`** — thin wrapper that delegates to `TwoColumn` via the component registry
-- **`TwoColumnTab`** — identical layout implementation used inside tab contexts
-
-## Pega Metadata
-
-| Variant       | Registration Key |
-| ------------- | ---------------- |
-| TwoColumn     | `TwoColumn`      |
-| TwoColumnPage | `TwoColumnPage`  |
-| TwoColumnTab  | `TwoColumnTab`   |
-
-All three extend `PConnProps`. Children are received as React `children` (not via `getPConnect().getChildren()`).
-
-## Props
-
-| Prop          | Type          | Required | Description                                                                    |
-| ------------- | ------------- | -------- | ------------------------------------------------------------------------------ |
-| `children`    | `ReactNode[]` | Yes      | Exactly 2 children (left column, right column)                                 |
-| `templateCol` | `string`      | No       | Column width ratio string, e.g., `'1fr 1fr'`, `'2fr 1fr'`. Default `'1fr 1fr'` |
-
-## Sub-Variants
-
-### TwoColumnPage
-
-Thin pass-through wrapper. Retrieves `TwoColumn` from the component registry and renders it with all props forwarded:
-
-```typescript
-const TwoColumn = getComponentFromRegistry('TwoColumn');
-return <TwoColumn {...props} />;
-```
-
-### TwoColumnTab
-
-Identical implementation to `TwoColumn` — same grid layout, same `templateCol` parsing, same column styles. Registered separately under `TwoColumnTab` key to support tab context rendering.
-
-## Behavioral Contract
-
-1. Accept exactly 2 children. If a different count is received, log an error (console only — still render).
-2. Parse `templateCol` to compute MUI Grid column sizes:
-   - Strip unit suffixes (e.g., `'fr'`) from each token using regex: `.replaceAll(/[a-z]+/g, '')`.
-   - Split on whitespace and convert to numbers.
-   - Compute `totalCols = sum(colArray)`.
-   - Compute `ratio = 12 / totalCols`.
-   - `aSize = ratio * colArray[0]`, `bSize = ratio * colArray[1]` (both clamped to MUI's 1–12 GridSize range).
-3. Render a Grid container with `spacing={1}`.
-4. Render `children[0]` in the left column at `size={{ xs: 12, md: aSize }}`.
-5. Render `children[1]` in the right column at `size={{ xs: 12, md: bSize }}`.
-6. Apply `colStyles` class to each column: `display: grid; gap: 1rem; alignContent: baseline`.
-
-## Visual Specifications
-
-Derived from `TwoColumn.tsx` and `TwoColumnTab.tsx` makeStyles:
-
-### Column Style
-
-| Property      | Value                                 |
-| ------------- | ------------------------------------- |
-| Display       | grid                                  |
-| Gap           | 1rem                                  |
-| Align content | baseline (children stack top-aligned) |
-
-### Grid Spacing
-
-| Property          | Value                     |
-| ----------------- | ------------------------- |
-| Container spacing | 1 (≈ 8px between columns) |
-
-### Responsive Behavior
-
-| Breakpoint    | Column A           | Column B                         |
-| ------------- | ------------------ | -------------------------------- |
-| xs (mobile)   | 12/12 (full width) | 12/12 (full width, stacks below) |
-| md+ (desktop) | `aSize`/12         | `bSize`/12                       |
-
-**Column ratio examples:**
-
-| `templateCol` | Column A   | Column B   |
-| ------------- | ---------- | ---------- |
-| `'1fr 1fr'`   | 6/12 (50%) | 6/12 (50%) |
-| `'2fr 1fr'`   | 8/12 (67%) | 4/12 (33%) |
-| `'1fr 2fr'`   | 4/12 (33%) | 8/12 (67%) |
-| `'3fr 1fr'`   | 9/12 (75%) | 3/12 (25%) |
-
-**CSS-only implementation notes:**
-
-- Column container: `display: grid; gap: 1rem; align-content: start`.
-- Outer grid: `display: grid; grid-template-columns: <aFraction>fr <bFraction>fr; gap: 8px`.
-- Mobile: `grid-template-columns: 1fr` (single column stack).
-- Each column has `display: grid; gap: 1rem; align-content: baseline` for internal stacking.
-
-## Edge Cases & Special Logic
-
-- Default `templateCol` is `'1fr 1fr'` (equal split) when not provided.
-- The `templateCol` parsing is regex-based — any non-numeric suffix is stripped. If only numbers are provided (e.g., `'6 6'`), it still works.
-- `TwoColumnPage` uses `getComponentFromRegistry('TwoColumn')` — if the registry returns an override, that override is used instead of the default `TwoColumn` implementation.
-
-## Dependencies
-
-- `TwoColumnPage`: `getComponentFromRegistry` from `@pega/sdk-react` — to resolve the `TwoColumn` component at runtime
-- `TwoColumn` / `TwoColumnTab`: no special dependencies beyond layout
-
-## Design System Mapping
-
-**UI control type:** Responsive two-column grid layout.
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                                |
-| ------------------ | -------------------------------------------------------------------- |
-| Default (CSS only) | CSS Grid with `grid-template-columns: <a>fr <b>fr; gap: 8px`         |
-| MUI                | `<Grid container spacing={1}><Grid size={{ xs: 12, md: N }}>`        |
-| Ant Design         | `<Row gutter={8}><Col xs={24} md={N * 2}>` (Ant uses 24-column grid) |
-| Chakra UI          | `<SimpleGrid columns={{ base: 1, md: 2 }} spacing={2}>`              |
-| Shadcn/ui          | Tailwind `grid grid-cols-1 md:grid-cols-[<a>fr_<b>fr] gap-2`         |
-
-When implementing in a specific design system:
-
-- Parse `templateCol` using the same ratio algorithm (strip units, divide 12 by total)
-- Apply `align-content: baseline` so children within each column stack top-aligned
-- Collapse to single column on mobile breakpoint

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

@@ -1,152 +0,0 @@
-# Skill: WideNarrow
-
-Asymmetric two-column layout with a wide left column (~67%) and a narrow right column (~33%). Mirror of NarrowWide. Includes four sub-variants.
-
-> **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 wider than the right. Typically used when the main content occupies the left and a utility/sidebar panel sits on the right. Four sub-variants:
-
-- **`WideNarrow`** — core CSS-based layout, accepts either `a`/`b` slot props or React `children[0]`/`children[1]`
-- **`WideNarrowPage`** — wrapper that passes React children as `a` and `b` slot props to `WideNarrow`
-- **`WideNarrowForm`** — simplified wrapper using only `children`
-- **`WideNarrowDetails`** — details read-only variant; sets children to DISPLAY_ONLY mode and supports highlighted data
-
-> This component is the mirror of `NarrowWide`. All behavioral and structural patterns are identical except column order and CSS class names. See the `NarrowWide` skill for detailed pattern descriptions.
-
-## Pega Metadata
-
-| Variant           | Registration Key    |
-| ----------------- | ------------------- |
-| WideNarrow        | `WideNarrow`        |
-| WideNarrowPage    | `WideNarrowPage`    |
-| WideNarrowForm    | `WideNarrowForm`    |
-| WideNarrowDetails | `WideNarrowDetails` |
-
-All extend `PConnProps`.
-
-## Props
-
-### WideNarrow
-
-| Prop       | Type          | Required | Description                                                |
-| ---------- | ------------- | -------- | ---------------------------------------------------------- |
-| `children` | `ReactNode[]` | No       | Two children — `[0]` → wide (left), `[1]` → narrow (right) |
-| `a`        | `any`         | No       | Wide (left) column content                                 |
-| `b`        | `any`         | No       | Narrow (right) column content                              |
-| `title`    | `string`      | No       | Optional title (not rendered)                              |
-| `cols`     | `string`      | No       | Column template (not rendered)                             |
-| `icon`     | `string`      | No       | Icon name (not rendered)                                   |
-
-### WideNarrowPage
-
-| Prop          | Type          | Required | Description                                           |
-| ------------- | ------------- | -------- | ----------------------------------------------------- |
-| `children`    | `ReactNode[]` | Yes      | Two children — `[0]` → wide slot, `[1]` → narrow slot |
-| `title`       | `string`      | Yes      | Page title (passed to WideNarrow)                     |
-| `templateCol` | `string`      | No       | Column ratio (default `'1fr 1fr'`)                    |
-| `icon`        | `string`      | No       | Icon name (strips `'pi pi-'` prefix)                  |
-
-### WideNarrowForm
-
-| Prop       | Type          | Required | Description                                |
-| ---------- | ------------- | -------- | ------------------------------------------ |
-| `children` | `ReactNode[]` | Yes      | Two children rendered in wide/narrow slots |
-
-### WideNarrowDetails
-
-| Prop                  | Type       | Required | Description                                                |
-| --------------------- | ---------- | -------- | ---------------------------------------------------------- |
-| `label`               | `string`   | No       | Section label for FieldGroup                               |
-| `showLabel`           | `boolean`  | No       | Whether to show the label. Default `true`                  |
-| `showHighlightedData` | `boolean`  | No       | Whether to render highlighted data fields. Default `false` |
-| `getPConnect`         | `function` | Yes      | PConnect getter                                            |
-
-## Behavioral Contract
-
-### WideNarrow
-
-1. If `children` is provided and has exactly 2 items: render `children[0]` in `.psdk-wide-column-column` and `children[1]` in `.psdk-narrow-column-column` (both wrapped in `.psdk-wide-narrow-column`).
-2. If `a` and `b` are provided: render `a` in the wide slot and `b` in the narrow slot.
-3. `children` takes priority over `a`/`b` when both are present.
-
-### WideNarrowPage
-
-1. Extract `childArray = Children.toArray(children)`.
-2. Retrieve `WideNarrow` from the component registry.
-3. Render `<WideNarrow a={childArray[0]} b={childArray[1]} title={title} cols={templateCol} icon={icon?.replace('pi pi-', '')} />`.
-
-### WideNarrowForm
-
-1. Render using `children` path — checks `children.length === 2`, renders wide/narrow CSS divs.
-
-### WideNarrowDetails
-
-1. Set `getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY')` and `setInheritedProp('readOnly', true)`.
-2. Map `getPConnect().getChildren()` → `createElement(PConnectComponent, { ...configObject, key: index })`.
-3. If `showHighlightedData` is true, read `getRawMetadata().config.highlightedData`, set each field's `displayMode = 'STACKED_LARGE_VAL'`, mark `pyStatusWork` as `displayAsStatus=true`, and create components via `getPConnect().createComponent(field, '', 0, {})`.
-4. Wrap in `<FieldGroup name={theName}>` using `propsToUse.showLabel && propsToUse.label`.
-5. Layout: highlighted data in `Grid size={{ xs: COLUMN_WIDTHS[i] }}` where **`COLUMN_WIDTHS = [8, 4]`** (wide left, narrow right — reversed vs NarrowWideDetails).
-6. Children rendered in `Grid size={{ xs: 12 }}` rows.
-
-## Visual Specifications
-
-Derived from `WideNarrow.css`:
-
-### Container
-
-| CSS Class                    | Property | Value                              |
-| ---------------------------- | -------- | ---------------------------------- |
-| `.psdk-wide-narrow-column`   | Display  | two-column row layout              |
-| `.psdk-wide-column-column`   | Width    | ~67% (2 of 3 parts) — LEFT column  |
-| `.psdk-narrow-column-column` | Width    | ~33% (1 of 3 parts) — RIGHT column |
-
-**CSS-only implementation notes:**
-
-- `.psdk-wide-narrow-column`: `display: grid; grid-template-columns: 2fr 1fr; gap: 1rem`.
-- Wide column (left): `2fr` — takes the first grid column.
-- Narrow column (right): `1fr` — takes the second grid column.
-- On mobile: `grid-template-columns: 1fr` (stacks vertically, wide on top).
-
-### Key Difference from NarrowWide
-
-|                           | NarrowWide                 | WideNarrow                 |
-| ------------------------- | -------------------------- | -------------------------- |
-| Left column               | Narrow (~33%)              | Wide (~67%)                |
-| Right column              | Wide (~67%)                | Narrow (~33%)              |
-| CSS container class       | `.psdk-narrow-wide-column` | `.psdk-wide-narrow-column` |
-| `COLUMN_WIDTHS` (Details) | `[4, 8]`                   | `[8, 4]`                   |
-
-## Edge Cases & Special Logic
-
-- `WideNarrowDetails` defaults `children` to empty (`= []`) — safe even if no children are provided.
-- Highlighted data guard: check `if (!theConfigObject) theConfigObject = {}` before creating PConnectComponent — prevents crash on null config objects.
-- Icon cleanup in `WideNarrowPage`: strip `'pi pi-'` from icon string before passing to `WideNarrow`.
-
-## Dependencies
-
-- `WideNarrowPage`: `getComponentFromRegistry` from `@pega/sdk-react`
-- `WideNarrowDetails`: `getComponentFromRegistry('FieldGroup')`, `PConnectComponent` from `@pega/sdk-react`
-
-## Design System Mapping
-
-**UI control type:** Asymmetric two-column layout (main content + sidebar).
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                                            |
-| ------------------ | -------------------------------------------------------------------------------- |
-| Default (CSS only) | CSS Grid `grid-template-columns: 2fr 1fr; gap: 1rem`                             |
-| MUI                | `<Grid container><Grid size={{ xs: 12, md: 8 }}><Grid size={{ xs: 12, md: 4 }}>` |
-| Ant Design         | `<Row gutter={16}><Col xs={24} md={16}><Col xs={24} md={8}>`                     |
-| Chakra UI          | `<Grid templateColumns={{ base: '1fr', md: '2fr 1fr' }} gap={4}>`                |
-| Shadcn/ui          | Tailwind `grid grid-cols-1 md:grid-cols-[2fr_1fr] gap-4`                         |
-
-When implementing in a specific design system:
-
-- Wide column ≈ 67% width (left side)
-- Narrow column ≈ 33% width (right side)
-- `WideNarrowDetails` forces DISPLAY_ONLY + readOnly on all children