@pega/sdk 0.0.3 → 0.0.5

package/templates/react-sdk-reference/.cursor/rules/skills/field-skills/UserReference.mdrules

@@ -1,185 +0,0 @@
----
-description: Field component skill: UserReference
-alwaysApply: false
----
-
-# Skill: UserReference
-
-User picker field that renders as either a search box (AutoComplete) or a dropdown, populated from the Pega operators data page.
-
-> **Prerequisite skill:** [`field-components.md`](../field-components.md) — covers architecture, props interface, display modes, event handling, and registration patterns common to ALL field components.
-
----
-
-## Component Purpose
-
-Renders a user selection field. Can display as a typeahead search box or a dropdown list of Pega users. Resolves user IDs to display names for read-only and display modes. Optimized with shallow comparison to avoid unnecessary re-renders.
-
-## Pega Metadata
-
-- **Pega Name:** `UserReference`
-- **Type / Subtype:** `Field` / `Text-UserReference`
-- **Registration key:** `UserReference` (in `component-map.ts`)
-
-## Props (component-specific)
-
-> Extends `PConnProps` (NOT `PConnFieldProps` — field-specific props are defined manually):
-
-```typescript
-import type { PConnProps } from '@pega/sdk-react';
-```
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `displayAs` | `string` (optional) | `''` | `'Drop-down list'` or `'Search box'` — determines the input type |
-| `displayMode` | `string` (optional) | `''` | `'DISPLAY_ONLY'` or `'STACKED_LARGE_VAL'` |
-| `label` | `string` (optional) | `''` | Field label |
-| `value` | `any` (optional) | `''` | Raw value from Pega store (may be a user object or string ID) |
-| `testId` | `string` (optional) | `''` | Test identifier |
-| `placeholder` | `string` (optional) | `''` | Placeholder text |
-| `helperText` | `string` (optional) | `''` | Helper text |
-| `disabled` | `boolean` (optional) | `false` | |
-| `readOnly` | `boolean` (optional) | `false` | |
-| `required` | `boolean` (optional) | `false` | |
-| `validatemessage` | `string` (optional) | `''` | Validation error message |
-| `showAsFormattedText` | `boolean` (optional) | `false` | When `true` in read-only mode, show formatted user name text |
-| `additionalProps` | `object` (optional) | `{}` | Extra props forwarded to the child component |
-| `hideLabel` | `boolean` (optional) | `false` | |
-| `variant` | `string` (optional) | `'inline'` | Layout variant |
-| `onChange` | `any` (optional) | — | Change handler (passed through to child) |
-
-## Behavioral Contract
-
-### User ID extraction
-
-`getUserId(value)` — utility that extracts the user identifier from the value (which may be a plain string or a user object with an ID property).
-
-### State
-
-- `dropDownDataSource` (array): populated when `displayAs === 'Drop-down list'`
-- `userName` (string): resolved display name for formatted text mode
-
-### Mount effect: `useEffect([displayAs, readOnly, showAsFormattedText, value])`
-
-**Case 1: `userId && readOnly && showAsFormattedText`**
-- If `isUserNameAvailable(value)`: `setUserName(value.userName)` — username already in value object
-- Else: call `PCore.getUserApi().getOperatorDetails(userId)` and extract `pyUserName` from response
-
-**Case 2: `displayAs === 'Drop-down list'`**
-- Call `PCore.getRestClient().invokeRestApi('getListData', { queryPayload: { dataViewName: OPERATORS_DP } })`
-- Map results to `{key: pyUserIdentifier, value: pyUserName}` array
-- `setDropDownDataSource(mapped)`
-
-`OPERATORS_DP = PCore.getEnvironmentInfo().getDefaultOperatorDP()` — the default operators data page name.
-
-### Rendering decision tree
-
-```
-if displayMode === 'DISPLAY_ONLY' → FieldValueList(userName || '')
-if displayMode === 'STACKED_LARGE_VAL' → FieldValueList(userName || '', variant='stacked')
-if readOnly && showAsFormattedText && userId → formatted text label+body
-else if displayAs === 'Search box' → AutoComplete component
-else if displayAs === 'Drop-down list' → Dropdown component
-```
-
-### Subsection: Search box mode (`displayAs === 'Search box'`)
-
-Render `AutoComplete` with hardcoded columns for operator search:
-```typescript
-columns = [
-  { value: 'pyUserName', display: 'true', useForSearch: true, primary: 'true' },
-  { value: 'pyUserIdentifier', setProperty: 'Associated property', key: 'true', display: 'true', secondary: 'true', useForSearch: 'true' }
-]
-```
-Props: `datasource={OPERATORS_DP}`, `listType='datapage'`, `value={userId}`, plus label/placeholder/readOnly/disabled/required/helperText/validatemessage/hideLabel/onChange/additionalProps/testId.
-
-### Subsection: Dropdown mode (`displayAs === 'Drop-down list'`)
-
-Render `Dropdown` with:
-- `datasource={dropDownDataSource}` (fetched user list)
-- `listType='associated'`
-- `value={userId}`
-- Plus same field props as above
-
-### Subsection: Formatted text read-only (`readOnly && showAsFormattedText && userId`)
-
-Render a label + name display:
-```html
-<div>
-  <caption-text>{label}</caption-text>
-  <body-text>{userName}</body-text>
-</div>
-```
-
-### Re-render optimization
-
-Export with `memo` using custom comparison `comparisonFn`:
-```typescript
-const comparisonFn = (prevProps, nextProps) =>
-  getUserId(prevProps.value) === getUserId(nextProps.value) &&
-  prevProps.validatemessage === nextProps.validatemessage &&
-  prevProps.required === nextProps.required &&
-  prevProps.disabled === nextProps.disabled &&
-  prevProps.readOnly === nextProps.readOnly
-```
-
-`export default memo(UserReference, comparisonFn)`
-
-## Display Mode Rendering
-
-Uses resolved `userName` (not raw `value`):
-- **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : label} value={userName || ''} />`
-- **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : label} value={userName || ''} variant='stacked' />`
-
-`userName` may still be empty string while the async `getOperatorDetails` call resolves — this is expected.
-
-## Visual Specifications
-
-The visual appearance is determined by the child component rendered:
-- **Search box**: Same as `AutoComplete` — combobox input with outlined border, floating label
-- **Dropdown**: Same as `Dropdown` — select field with outlined border, floating label
-- **Formatted text read-only**:
-
-| Property | Value |
-|----------|-------|
-| Label | Caption-size text (small, secondary color) above the name |
-| Name | Body text (normal size) |
-| Spacing | Standard form field spacing |
-
-**CSS-only for formatted text:**
-```css
-.user-reference-label { font-size: 0.75rem; color: rgba(0,0,0,0.6); margin-bottom: 4px; }
-.user-reference-name { font-size: 1rem; }
-```
-
-## Edge Cases & Special Logic
-
-- **`getUserId`**: handles both plain string values and object values with an ID property.
-- **`isUserNameAvailable`**: checks whether the value object already contains a `userName` property (avoiding unnecessary API call).
-- **Async name resolution**: when `userName` is not available in the value object, a REST call is made. The component renders empty initially and updates when the call completes.
-- **Drop-down source**: Users are fetched via REST API (`getListData`), not via a data page config — this is different from `AutoComplete`/`Dropdown` field patterns.
-- **`onChange` prop** is passed through to the child component unchanged — it's the platform-wired handler.
-
-## Dependencies
-
-- `memo` from React.
-- `getUserId`, `isUserNameAvailable` from `./UserReferenceUtils` (local utility).
-- `getComponentFromRegistry('AutoComplete')` — for search box mode.
-- `getComponentFromRegistry('Dropdown')` — for dropdown mode.
-- `getComponentFromRegistry('FieldValueList')` — for display modes.
-- `PCore.getUserApi().getOperatorDetails()` — for async user name resolution.
-- `PCore.getRestClient().invokeRestApi('getListData', ...)` — for dropdown data source.
-- `PCore.getEnvironmentInfo().getDefaultOperatorDP()` — for operators data page name.
-
-## Design System Mapping
-
-**UI control type:** User picker — delegates to AutoComplete or Dropdown for the actual input.
-
-Listed design systems are examples only.
-
-| Mode | Underlying control |
-|------|--------------------|
-| Search box | AutoComplete (combobox/typeahead) |
-| Drop-down list | Dropdown (select) |
-| Formatted text read-only | Label + text display |
-| Display mode | FieldValueList |

package/templates/react-sdk-reference/.cursor/rules/skills/run-and-verify.mdrules

@@ -1,73 +0,0 @@
----
-description: run-and-verify
-alwaysApply: false
----
-
-# Skill: Run and Verify
-
-Build the application, run the dev server, and verify changes work correctly.
-
----
-
-## Build Verification
-
-### If inside the pega-sdk monorepo:
-
-```bash
-# Full build (all packages + samples)
-cd /path/to/pega-sdk
-npm run build
-
-# Force rebuild sdk-react (if you modified it)
-npx nx run sdk-react:build --skip-nx-cache
-```
-
-### If standalone repo:
-
-```bash
-npm run build
-```
-
-### What to check:
-- Zero TypeScript errors
-- Zero build warnings related to missing imports
-- Output bundle is generated
-
----
-
-## Dev Server
-
-```bash
-npm run dev
-# Opens on http://localhost:3500
-```
-
-### What to verify:
-1. App loads without console errors
-2. "Create Case" button appears after auth
-3. Clicking "Create Case" renders the form
-4. Field inputs accept keyboard input
-5. Tabbing between fields triggers blur (values persist)
-6. Validation errors appear when required fields are empty
-7. Form submission works (assignment completes)
-
----
-
-## Common Issues
-
-| Symptom | Cause | Fix |
-|---------|-------|-----|
-| "X is not registered" console error | Component missing from `component-map.ts` | Add the import + map entry |
-| Field value doesn't persist after blur | `handleEvent` not called on blur | Add `onBlur` handler calling `handleEvent(actions, 'changeNblur', propName, value)` |
-| Read-only view shows nothing | Missing `displayMode` handling | Add the `DISPLAY_ONLY` / `STACKED_LARGE_VAL` checks |
-| TypeScript error on `getPConnect` | Wrong props interface | Extend `PConnFieldProps` or `PConnProps` from `@pega/sdk-react` |
-| Build fails on CSS import | Missing CSS loader config | Ensure Vite config handles `.css` imports |
-| "Cannot read property of undefined" on theme | Design system provider missing | Wrap app in the design system's ThemeProvider/Provider |
-
----
-
-## Quick Lint Check
-
-```bash
-npx tsc --noEmit   # TypeScript only, no output
-```

package/templates/react-sdk-reference/.cursor/rules/skills/template-skills/AdvancedSearch.mdrules

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

package/templates/react-sdk-reference/.cursor/rules/skills/template-skills/AppShell.mdrules

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

package/templates/react-sdk-reference/.cursor/rules/skills/template-skills/CaseSummary.mdrules

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