@pega/sdk 0.0.3 → 0.0.5

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

@@ -1,140 +0,0 @@
----
-description: Template component skill: SelfServiceCaseView
-alwaysApply: false
----
-
-# 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/.cursor/rules/skills/template-skills/SimpleTable.mdrules

@@ -1,132 +0,0 @@
----
-description: Template component skill: SimpleTable
-alwaysApply: false
----
-
-# Skill: SimpleTable
-
-Simple table template. Routes to FieldGroupTemplate, ListView (read-only), or the manual editable table based on configuration. Also covers `SimpleTableManual`, `SimpleTableSelect`, and `SimpleTableSelectReadonly` 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
-
-Entry-point template for embedded table data in a form or detail view. Routes to the appropriate sub-component based on `multiRecordDisplayAs`, `fieldMetadata.dataRetrievalType`, and `readOnly`/`displayMode` flags. Sub-variants handle selection, read-only display, and full manual editing.
-
-## Pega Metadata
-
-- **Registration keys:** `SimpleTable`, `SimpleTableManual`, `SimpleTableSelect`, `SimpleTableSelectReadonly` (all in `component-map.ts`)
-- **Category:** Data display / Form template — embedded table
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `multiRecordDisplayAs` | `string` | No | `'fieldGroup'` delegates to FieldGroupTemplate; else table |
-| `fieldMetadata` | `object` | No | Field-level metadata including `dataRetrievalType` |
-| `referenceList` | `string` | No | Property path to the reference list |
-| `displayAs` | `string` | No | For SimpleTableSelectReadonly: `'readonlyMulti'`, `'combobox'`, `'checkboxgroup'` routing |
-| `selectionMode` | `string` | No | `'single'` or `'multi'` (for SimpleTableSelect) |
-| `displayMode` | `string` | No | `'DISPLAY_ONLY'` triggers read-only sub-variant |
-| `readOnly` | `boolean` | No | Alternative read-only flag |
-| `getPConnect` | `function` | Yes | PConnect getter |
-
-## Behavioral Contract
-
-### SimpleTable — Routing Logic
-
-```
-if multiRecordDisplayAs === 'fieldGroup':
-  → render FieldGroupTemplate
-else if fieldMetadata.dataRetrievalType === 'refer':
-  → render ListView (read-only, bInForm: true)
-else:
-  → render SimpleTableManual (editable table)
-```
-
-### SimpleTableManual — Full Editable Table
-
-Full MUI table with add/delete rows, inline editing, sort, filter, and column customization (~600+ lines).
-
-Key behaviors:
-1. **Row data source:** `referenceList` property path via `pConn.getValue(referenceList + '.pxResults')`.
-2. **Add row:** `pConn.getListActions().insert({})`.
-3. **Delete row:** `pConn.getListActions().deleteEntry(index)`.
-4. **Inline field editing:** Each cell renders the field's registered edit component via `buildView(pConn, rowIndex, colFieldName)`.
-5. **Sort:** Client-side sort on loaded data.
-6. **Column customization:** Visibility toggles per column via a settings popover.
-7. **Filter dialog:** Same filter pattern as ListView.
-
-### SimpleTableSelect — Selection Mode
-
-Wraps `ListView` with additional selection configuration:
-- Passes `additionalTableConfig` with `selectionMode: 'single'` or `'multi'`.
-- On selection: calls `pConn.getListActions().setSelectedRow(selectedData)`.
-- Used when `DataReference` routes to table-based selection.
-
-### SimpleTableSelectReadonly — Read-Only with Modal
-
-1. Renders a link/chip showing the current selection count.
-2. On click: opens a `<Dialog>` containing a `<SimpleTableManual>` in read-only mode.
-3. Props: same as `SimpleTableManual` but all fields locked (no add/delete/edit).
-
-## Visual Specifications
-
-### SimpleTableManual
-
-| Element | Description |
-|---------|-------------|
-| Toolbar | Column settings button, filter button, optional search |
-| Table | Full-width, alternating row colors |
-| Add row | `"+ Add row"` button below the table |
-| Delete row | Trash icon per row (rightmost column) |
-| Column settings | Popover with checkboxes for visibility toggles |
-
-**CSS-only implementation notes:**
-- Table: `width: 100%; border-collapse: collapse`.
-- Add row button: `margin-top: 0.5rem; text-align: left`.
-- Delete cell: `width: 40px; text-align: center`.
-- Read-only mode: hide add/delete controls; cells show plain text.
-
-### SimpleTableSelectReadonly
-
-| Element | Description |
-|---------|-------------|
-| Trigger | Link or chip showing selection count |
-| Modal | Full-screen or large dialog with SimpleTableManual |
-| Modal close | `X` button in modal header |
-
-## Edge Cases & Special Logic
-
-- `multiRecordDisplayAs === 'fieldGroup'` — completely bypasses table; delegates to `FieldGroupTemplate`.
-- `dataRetrievalType === 'refer'` — data comes from a reference list, not a full data page; use `ListView` in read-only mode.
-- `SimpleTableManual` with 600+ lines — break into sub-hooks if re-implementing.
-- Row keys must be unique — use composite keys from `compositeKeys` config if available.
-- Column customization state is local — not persisted across navigation.
-
-## Dependencies
-
-- `FieldGroupTemplate` (for `multiRecordDisplayAs === 'fieldGroup'` routing)
-- `ListView` (for `dataRetrievalType === 'refer'` routing)
-- `buildView` from `../../helpers/field-group-utils` (for inline cell rendering in SimpleTableManual)
-- MUI: `<Table>`, `<Dialog>`, `<Popover>`, `<IconButton>`, `<Button>`, `<Checkbox>`
-
-## Design System Mapping
-
-**UI control type:** Embedded data table with routing to field group, read-only list, or fully editable table.
-
-Listed design systems are examples only.
-
-| Sub-variant | Default (CSS only) | MUI |
-|---|---|---|
-| SimpleTableManual | `<table>` + custom controls | MUI `<Table>` |
-| SimpleTableSelect | Custom table + radio/checkbox | `<ListView>` wrapper |
-| SimpleTableSelectReadonly | Link + `<dialog>` | Chip + `<Dialog>` |
-
-When implementing in a specific design system:
-- Always check `multiRecordDisplayAs === 'fieldGroup'` first — this bypasses the table entirely
-- `SimpleTableManual` add/delete row controls must be hidden when `readOnly === true` or `displayMode === 'DISPLAY_ONLY'`
-- `SimpleTableSelect` uses the same `ListView` but adds selection callbacks

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

@@ -1,108 +0,0 @@
----
-description: Template component skill: SingleReferenceReadOnly
-alwaysApply: false
----
-
-# Skill: SingleReferenceReadOnly
-
-Single reference read-only template. Renders a read-only reference field as a semantic link for editable field types, or as a plain label otherwise.
-
-> **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 single data reference field in read-only mode. For fields that were displayed as editable selection controls (autocomplete, table select, dropdown), renders a `SemanticLink` component so the reference value is clickable/navigable. For other display types, renders a plain read-only label.
-
-## Pega Metadata
-
-- **Registration key:** `SingleReferenceReadOnly` (in `component-map.ts`)
-- **Category:** Display template — read-only reference
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `label` | `string` | Yes | Field label |
-| `displayAs` | `string` | Yes | The edit-mode display type this field was configured with |
-| `value` | `string` | No | Current field value (display text) |
-| `caseClass` | `string` | No | Class identifier for the referenced case |
-| `text` | `string` | No | Display text for the semantic link |
-| `caseID` | `string` | No | Case ID for the semantic link |
-| `contextPage` | `string` | No | Context page identifier |
-| `resourceParams` | `object` | No | Parameters for the referenced resource |
-| `resourcePayload` | `object` | No | Payload for resource navigation |
-| `getPConnect` | `function` | Yes | PConnect getter |
-
-## Behavioral Contract
-
-### Editable Component Check
-
-```
-editableComponents = ['AutoComplete', 'SimpleTableSelect', 'Dropdown']
-```
-
-If `displayAs` is in `editableComponents`:
-1. Build config with: `caseClass`, `text`, `caseID`, `contextPage`, `resourceParams`, `resourcePayload`.
-2. Create: `createComponent({ type: 'SemanticLink', config: { ...builtConfig } })`.
-3. Render the created `SemanticLink` component.
-
-Else:
-- Render a plain read-only display using `<FormControl variant='standard'>` + `<FormLabel>` + value text.
-
-### Layout
-
-For both variants, wrap with:
-```tsx
-<FormControl variant='standard' sx={{ flexDirection: 'row' }}>
-  <FormLabel sx={{ marginRight: '2rem' }}>{label}</FormLabel>
-  {semanLinkOrValue}
-</FormControl>
-```
-
-## Visual Specifications
-
-| Variant | Layout |
-|---------|--------|
-| SemanticLink | Label (left) + clickable link (right) |
-| Plain read-only | Label (left) + plain text (right) |
-
-**CSS-only implementation notes:**
-- Wrapper: `display: flex; flex-direction: row; align-items: baseline; gap: 1rem`.
-- Label: `font-size: 0.875rem; color: var(--secondary-text-color); min-width: 120px`.
-- Semantic link: `color: var(--link-color); text-decoration: underline; cursor: pointer`.
-- Plain value: `font-size: 0.875rem; color: var(--primary-text-color)`.
-
-## Edge Cases & Special Logic
-
-- `displayAs` check is case-sensitive — values are `'AutoComplete'`, `'SimpleTableSelect'`, `'Dropdown'` (exact match).
-- `createComponent` returns a PConnect config — render via `createElement(PConnectComponent, { ...createdConfig })`.
-- If `text` is empty/undefined, the semantic link shows the `caseID` as fallback text.
-- `SemanticLink` navigation requires `caseClass` and `caseID` — if either is missing, fall back to plain read-only display.
-
-## Dependencies
-
-- `PConnectComponent` from `@pega/sdk-react` — for rendering the `SemanticLink`
-- `getPConnect().createComponent()` — creates the SemanticLink component config
-- MUI: `<FormControl>`, `<FormLabel>`
-
-## Design System Mapping
-
-**UI control type:** Read-only reference field — semantic link for navigable references, plain label otherwise.
-
-Listed design systems are examples only.
-
-| Design System | Semantic Link | Plain Read-Only |
-|---|---|---|
-| Default (CSS only) | `<a>` with case navigation | `<span>` |
-| MUI | `SemanticLink` rendered via `createComponent` | `<Typography>` |
-| Ant Design | `<Typography.Link>` | `<Typography.Text>` |
-| Chakra UI | `<Link>` | `<Text>` |
-| Shadcn/ui | Custom link | `<span>` |
-
-When implementing in a specific design system:
-- The `editableComponents` list (`'AutoComplete'`, `'SimpleTableSelect'`, `'Dropdown'`) controls semantic link vs plain display
-- `SemanticLink` must be rendered via `createComponent` — do not implement the link logic directly in this component
-- Horizontal label + value layout (row direction) is required

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

@@ -1,155 +0,0 @@
----
-description: Template component skill: WideNarrow
-alwaysApply: false
----
-
-# 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

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

@@ -1,140 +0,0 @@
----
-description: Template component skill: WssNavBar
-alwaysApply: false
----
-
-# Skill: WssNavBar
-
-WSS (Web Self-Service) navigation bar template. Renders the app bar for WSS portal with responsive hamburger menu, navigation links, operator avatar, and logout.
-
-> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
-
----
-
-## Component Purpose
-
-Provides the top navigation bar for WSS (Web Self-Service) portals. Responsive: shows a hamburger menu on mobile, full nav links on desktop. Navigation position and alignment are configurable. Includes operator avatar with initials and a logout action.
-
-## Pega Metadata
-
-- **Registration key:** `WssNavBar` (in `component-map.ts`)
-- **Category:** Navigation template — WSS portal
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `links` | `array` | Yes | Array of `{ label, url, id }` navigation link objects |
-| `navDisplayOptions` | `object` | No | `{ alignment: 'left'|'right'|'center', position: 'inline'|'below' }` |
-| `portalLogoUrl` | `string` | No | URL for the portal logo image |
-| `operatorInfo` | `object` | No | `{ displayName: string }` — for avatar initials |
-| `getPConnect` | `function` | Yes | PConnect getter |
-
-## Behavioral Contract
-
-### Responsive Layout
-
-- **Mobile (xs breakpoint):** Hamburger menu button (`<MenuIcon>`) shown; nav links hidden.
-  - On click: opens a `<Drawer>` or dropdown menu with nav links.
-  - CSS: `display: { xs: 'flex', md: 'none' }` on hamburger; `display: { xs: 'none', md: 'flex' }` on nav links.
-- **Desktop (md+ breakpoint):** Nav links shown inline; hamburger hidden.
-
-### Navigation Position
-
-From `navDisplayOptions.position`:
-- `'inline'` — nav links appear in the same row as the logo.
-- `'below'` — nav links appear in a second row below the logo/title row.
-
-### Navigation Alignment
-
-From `navDisplayOptions.alignment`:
-- `'left'` — links flush left.
-- `'right'` — links pushed to the right (flex with `ml: 'auto'`).
-- `'center'` — links centered.
-
-### Operator Avatar
-
-- Extract initials from `operatorInfo.displayName`:
-  - Split by space, take first letter of first and last word.
-  - E.g. `"John Smith"` → `"JS"`.
-- Render as `<Avatar>{initials}</Avatar>`.
-- Clicking avatar opens a menu with a Logout option.
-
-### Logout
-
-- Import `logout` from `@pega/auth/lib/sdk-auth-manager`.
-- Call `logout()` when the Logout menu item is clicked.
-
-### Render Structure
-
-```
-<AppBar position='static'>
-  <Toolbar>
-    {/* Logo */}
-    {portalLogoUrl && <img src={portalLogoUrl} alt='logo' />}
-
-    {/* Hamburger (mobile) */}
-    <IconButton sx={{ display: { xs: 'flex', md: 'none' } }} onClick={openMobileMenu}>
-      <MenuIcon />
-    </IconButton>
-
-    {/* Nav links (desktop) */}
-    <Box sx={{ display: { xs: 'none', md: 'flex' }, ...alignmentStyles }}>
-      {links.map(link => <Button key={link.id} href={link.url}>{link.label}</Button>)}
-    </Box>
-
-    {/* Operator avatar */}
-    <Avatar onClick={openUserMenu}>{initials}</Avatar>
-  </Toolbar>
-</AppBar>
-```
-
-## Visual Specifications
-
-| Element | Mobile | Desktop |
-|---------|--------|---------|
-| Logo | Shown | Shown |
-| Nav links | Hidden (hamburger menu) | Shown inline or below |
-| Avatar | Shown | Shown |
-| Hamburger | Shown | Hidden |
-
-**CSS-only implementation notes:**
-- App bar: `background: var(--app-primary-color); color: white`.
-- Toolbar: `display: flex; align-items: center; gap: 1rem; padding: 0 1rem`.
-- Hamburger: `display: none`. At mobile breakpoint: `display: flex`.
-- Nav links: `display: flex; gap: 0.5rem`. At mobile breakpoint: `display: none`.
-- Avatar: `width: 36px; height: 36px; border-radius: 50%; background: var(--avatar-bg); cursor: pointer`.
-- Logout menu: `position: absolute; top: 100%; right: 0; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.2)`.
-
-## Edge Cases & Special Logic
-
-- `portalLogoUrl` is async — show fallback text until resolved.
-- `operatorInfo.displayName` may be undefined — guard and show a default avatar (single letter or icon).
-- `navDisplayOptions` may be absent — default to `{ alignment: 'left', position: 'inline' }`.
-- Mobile drawer state must be managed separately from the user menu state.
-
-## Dependencies
-
-- `logout` from `@pega/auth/lib/sdk-auth-manager` — logout handler
-- MUI: `<AppBar>`, `<Toolbar>`, `<IconButton>`, `<Avatar>`, `<Menu>`, `<MenuItem>`, `<Button>`, `<Box>`
-- MUI Icons: `<MenuIcon>`
-
-## Design System Mapping
-
-**UI control type:** Responsive application navigation bar with avatar and logout.
-
-Listed design systems are examples only.
-
-| Design System | App Bar | Avatar | Mobile Menu |
-|---|---|---|---|
-| Default (CSS only) | `<header>` + CSS | `<div class='avatar'>` | CSS hamburger + dropdown |
-| MUI | `<AppBar>` + `<Toolbar>` | `<Avatar>` | `<Drawer>` or `<Menu>` |
-| Ant Design | `<Layout.Header>` | `<Avatar>` | `<Drawer>` |
-| Chakra UI | `<Box as='header'>` | `<Avatar>` | `<Drawer>` |
-| Shadcn/ui | Custom `<header>` | Custom initials avatar | `<Sheet>` (drawer) |
-
-When implementing in a specific design system:
-- `logout` from `@pega/auth/lib/sdk-auth-manager` is mandatory — always call the SDK logout, not a custom one
-- Responsive breakpoints for hamburger/nav visibility must be implemented
-- `navDisplayOptions.alignment` and `.position` must be respected