@pega/sdk 0.0.4 → 0.0.5

package/templates/react-sdk-reference/.github/skills/widget-skills/CaseHistory.md

@@ -1,110 +0,0 @@
-# Skill: CaseHistory
-
-Case history widget. Fetches and displays the full audit trail for the current case in a table with Date, Description, and Performer columns.
-
-> **Prerequisite skill:** [`widget-components.md`](../widget-components.md) — covers architecture, props interface, data-fetching patterns, and registration conventions common to ALL widget components.
-
----
-
-## Component Purpose
-
-Renders a table of case events sourced from the `D_pyWorkHistory` data page. Shows when each event happened (`pyUpdatedDateTime`), what happened (`pyMessageKey`), and who performed it (`pyPerformer`). Uses `fast-deep-equal` to skip unnecessary re-renders when data has not changed.
-
-## Pega Metadata
-
-- **Registration key:** `CaseHistory` (in `component-map.ts`)
-- **Category:** Widget — case data display
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop          | Type       | Required | Description                                           |
-| ------------- | ---------- | -------- | ----------------------------------------------------- |
-| `getPConnect` | `function` | Yes      | PConnect getter — used to resolve case ID and context |
-
-No additional custom props. All data is fetched internally.
-
-## Behavioral Contract
-
-### Data Fetch
-
-On mount, fetch history from the `D_pyWorkHistory` data page:
-
-```
-PCore.getDataApiUtils().getData(
-  'D_pyWorkHistory',
-  { pyCaseInsKey: caseKey },
-  context
-)
-```
-
-- `caseKey` = `pConn.getCaseInfo().getKey()` (the fully-qualified case key).
-- `context` = `pConn.getContextName()`.
-- Store result in `historyData` state array.
-- On error or empty response, `historyData` stays as `[]`.
-
-### Re-render Optimization
-
-Use `fast-deep-equal/react` to compare new `historyData` with previous value — only call `setHistoryData` if the data has actually changed. This prevents unnecessary re-renders caused by reference inequality.
-
-### Data Transformation
-
-For each history row, map:
-
-- **Date column:** Format `pyUpdatedDateTime` using the SDK date formatter (e.g., `formatDateTime(row.pyUpdatedDateTime)`) or display as-is.
-- **Description column:** `row.pyMessageKey` — the localized event description string.
-- **Performer column:** `row.pyPerformer` — the operator who performed the action.
-- Missing values: display `"---"` for any undefined/null field.
-
-## Visual Specifications
-
-### Table Layout
-
-| Column      | Field                           | Width |
-| ----------- | ------------------------------- | ----- |
-| Date        | `pyUpdatedDateTime` (formatted) | ~25%  |
-| Description | `pyMessageKey`                  | ~50%  |
-| Performer   | `pyPerformer`                   | ~25%  |
-
-**CSS-only implementation notes:**
-
-- Table container: `width: 100%; overflow-x: auto`.
-- Table: `border-collapse: collapse; width: 100%`.
-- Header cells: `background: var(--table-header-bg); font-weight: 600; padding: 8px 12px; border-bottom: 2px solid var(--divider-color)`.
-- Body cells: `padding: 8px 12px; border-bottom: 1px solid var(--divider-color)`.
-- Missing value placeholder `"---"`: `color: var(--secondary-text-color)`.
-- No pagination in the reference implementation — all rows shown.
-
-## Edge Cases & Special Logic
-
-- `D_pyWorkHistory` may return an empty array for cases with no history events — render an empty table body (or an empty-state message like `"No history available"`).
-- `pyUpdatedDateTime` format varies — always run it through the SDK date formatter before display.
-- `pyMessageKey` may be a locale key — resolve it via `PCore.getLocaleUtils().getLocaleValue()` if a localized string is required.
-- The widget has no pagination — for cases with very long history, the table may become very tall. Consider adding pagination if needed.
-
-## Dependencies
-
-- `PCore.getDataApiUtils().getData()` — fetches `D_pyWorkHistory` data page
-- `fast-deep-equal/react` — prevents unnecessary re-renders
-- `PCore.getConstants().CASE_INFO.CASE_INFO_ID` — resolves case ID constant
-- MUI: `<Table>`, `<TableBody>`, `<TableCell>`, `<TableContainer>`, `<TableHead>`, `<TableRow>`
-
-## Design System Mapping
-
-**UI control type:** Read-only case audit table with 3 columns.
-
-Listed design systems are examples only.
-
-| Design System      | Table                                                                             |
-| ------------------ | --------------------------------------------------------------------------------- |
-| Default (CSS only) | `<table>/<thead>/<tbody>/<tr>/<td>`                                               |
-| MUI                | `<TableContainer>` + `<Table>` + `<TableHead>/<TableBody>/<TableRow>/<TableCell>` |
-| Ant Design         | `<Table dataSource={historyData} columns={...}>`                                  |
-| Chakra UI          | `<Table>` + `<Thead>/<Tbody>/<Tr>/<Th>/<Td>`                                      |
-| Shadcn/ui          | `<Table>` + `<TableHeader>/<TableBody>/<TableRow>/<TableHead>/<TableCell>`        |
-
-When implementing in a specific design system:
-
-- `fast-deep-equal` comparison is a performance optimization — include it to avoid redundant renders on re-subscription
-- Data page name `D_pyWorkHistory` is fixed — do not make it configurable
-- Missing field fallback `"---"` should be consistent across all three columns

package/templates/react-sdk-reference/.github/skills/widget-skills/Followers.md

@@ -1,103 +0,0 @@
-# Skill: Followers
-
-Followers widget. Displays the list of users following the current case. Currently a stub/placeholder in the reference implementation — renders an "unsupported" message.
-
-> **Prerequisite skill:** [`widget-components.md`](../widget-components.md) — covers architecture, props interface, data-fetching patterns, and registration conventions common to ALL widget components.
-
----
-
-## Component Purpose
-
-Intended to display the list of operators following a case, allowing users to follow/unfollow a case and see who else is following it. The reference implementation is a **stub** — it renders a `"Followers - unsupported"` message inside a card. A full implementation would fetch follower data from the Pega data layer and provide follow/unfollow actions.
-
-## Pega Metadata
-
-- **Registration key:** `Followers` (in `component-map.ts`)
-- **Category:** Widget — social / collaboration
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop          | Type       | Required | Description     |
-| ------------- | ---------- | -------- | --------------- |
-| `getPConnect` | `function` | Yes      | PConnect getter |
-
-No additional custom props in the current stub implementation. A full implementation would likely include:
-
-- `datasource` — data page name for follower list
-- `headerText` — widget title (e.g., `"Followers"`)
-
-## Behavioral Contract
-
-### Current (Stub) Implementation
-
-1. Render a `<Card>` with title `"Followers"`.
-2. Show `"Followers - unsupported"` body text.
-3. No data fetching, no actions.
-
-### Expected Full Implementation
-
-1. **Fetch followers:** Call `PCore.getDataPageUtils().getDataAsync('D_pyCaseFollowers', context, { caseKey })` on mount.
-2. **Display follower list:** Render each follower's avatar (initials) and display name.
-3. **Follow/unfollow toggle:** Button to follow or unfollow the current case:
-   - Follow: `PCore.getRestClient().invokeCustomRestApi('/api/v1/cases/{caseID}/followers', { method: 'POST', ... })`.
-   - Unfollow: same endpoint with `DELETE` method.
-4. **Real-time update:** Subscribe to follower change events via pub-sub if available.
-
-## Visual Specifications
-
-### Stub Rendering
-
-| Element    | Value                                  |
-| ---------- | -------------------------------------- |
-| Card title | `"Followers"`                          |
-| Card body  | `"Followers - unsupported"` plain text |
-
-### Expected Full Rendering
-
-| Element          | Description                             |
-| ---------------- | --------------------------------------- |
-| Card header      | `"Followers"` + count badge             |
-| Follower avatars | Row of avatar initials circles          |
-| Follow button    | Toggle button `"Follow"` / `"Unfollow"` |
-
-**CSS-only implementation notes (stub):**
-
-- Card: standard card layout — `border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.12); padding: 1rem`.
-- Unsupported message: `color: var(--secondary-text-color); font-size: 0.875rem`.
-
-**CSS-only implementation notes (full):**
-
-- Avatar row: `display: flex; flex-wrap: wrap; gap: 4px`.
-- Avatar circle: `width: 32px; height: 32px; border-radius: 50%; background: var(--avatar-bg); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600`.
-
-## Edge Cases & Special Logic
-
-- If the stub message `"Followers - unsupported"` is shown in production, it means this widget has not been fully implemented yet — that is expected behavior.
-- When implementing: guard against empty follower arrays — show a `"No followers yet"` state.
-- Follow/unfollow toggle must reflect the current user's follow status — fetch this as part of the initial data load.
-
-## Dependencies
-
-- MUI: `<Card>`, `<CardContent>`, `<CardHeader>`, `<Typography>` (current stub)
-- Future full implementation would add: `<Avatar>`, `<Button>`, `<Badge>`, pub-sub subscriptions
-
-## Design System Mapping
-
-**UI control type:** Social widget — follower list with follow/unfollow action.
-
-Listed design systems are examples only.
-
-| Design System      | Card                  | Avatar                   | Toggle Button             |
-| ------------------ | --------------------- | ------------------------ | ------------------------- |
-| Default (CSS only) | `<div>` with border   | CSS circle with initials | `<button>`                |
-| MUI                | `<Card>` + `<Avatar>` | `<Avatar>`               | `<Button>` variant toggle |
-| Ant Design         | `<Card>`              | `<Avatar>`               | `<Button>`                |
-| Chakra UI          | `<Card>`              | `<Avatar>`               | `<Button>`                |
-| Shadcn/ui          | `<Card>`              | Custom avatar            | `<Button>`                |
-
-When implementing in a specific design system:
-
-- The current stub only needs a card with a message — implement the full behavior once the Pega backend supports it
-- Follow/unfollow must be scoped to the current case (`caseKey` from `pConn.getCaseInfo().getKey()`)
-- Follower count badge in the card header improves scannability

package/templates/react-sdk-reference/.github/skills/widget-skills/SummaryItem.md

@@ -1,169 +0,0 @@
-# Skill: SummaryItem
-
-Individual item card for displaying an attachment, file, or link with an icon, name, metadata, and an actions menu. Also covers `SummaryList` — the container that renders multiple `SummaryItem` cards.
-
-> **Prerequisite skill:** [`widget-components.md`](../widget-components.md) — covers architecture, props interface, data-fetching patterns, and registration conventions common to ALL widget components.
-
----
-
-## Component Purpose
-
-`SummaryItem` renders a single row/card for an attachment or link item. It shows a file-type icon, the item name (as a link for URLs or plain text for files), secondary metadata text, and an action menu. Used by `FileUtility` via the `SummaryList` container.
-
-`SummaryList` is a thin wrapper that maps an array of item objects to individual `SummaryItem` cards, passing down menu icon overrides for all items.
-
-## Pega Metadata
-
-- **Registration keys:**
-  - `SummaryItem` — the individual item card
-  - `SummaryList` — the container/list component
-- **Category:** Widget — display / composition
-- **Extends:** `PConnProps`
-
----
-
-## SummaryItem
-
-### Props
-
-| Prop                      | Type       | Required | Description                                                                             |
-| ------------------------- | ---------- | -------- | --------------------------------------------------------------------------------------- |
-| `arItems$`                | `object`   | Yes      | A single item object (see Item Structure below)                                         |
-| `menuIconOverride$`       | `string`   | No       | If provided, replaces the standard actions menu with a single direct-action icon button |
-| `menuIconOverrideAction$` | `function` | No       | Callback invoked when the override icon button is clicked                               |
-| `getPConnect`             | `function` | Yes      | PConnect getter                                                                         |
-
-### Item Structure (`arItems$`)
-
-```typescript
-{
-  id: string;
-  visual: {
-    icon: string;        // Icon identifier or URL
-    progress?: number;   // Upload progress 0–100 (optional)
-  };
-  primary: {
-    type: 'FILE' | 'URL';
-    name: string;        // Display name of the item
-    icon: string;        // Icon for the primary element
-    click: () => void;   // Download (FILE) or open in new tab (URL)
-  };
-  secondary: {
-    text: string;        // Metadata text (e.g., "John Smith · 01/15/2025")
-    error?: boolean;     // If true, render text in error/red color
-  };
-  actions: Array<{
-    id: string;
-    text: string;        // Menu item label
-    icon: string;        // Menu item icon identifier
-    onClick: () => void; // Action callback
-  }>;
-}
-```
-
-### Behavioral Contract
-
-1. **Visual area:** Render `visual.icon` (file type icon). If `visual.progress` is defined and between 0–99, overlay a progress indicator.
-2. **Primary element:**
-   - `type === 'FILE'`: render `primary.name` as plain text (clicking calls `primary.click` which triggers download).
-   - `type === 'URL'`: render `primary.name` as a link button that calls `primary.click` (opens URL in new tab).
-3. **Secondary text:** Render `secondary.text` below the primary element. If `secondary.error === true`, render in error/red color.
-4. **Actions:**
-   - **Standard mode (no `menuIconOverride$`):** Render a `<MoreVertIcon>` icon button. On click, open a `<Menu>` with one `<MenuItem>` per `actions` entry.
-   - **Override mode (`menuIconOverride$` provided):** Render a single direct-action icon button using `menuIconOverride$` as the icon. On click, call `menuIconOverrideAction$()`. No menu rendered.
-
-## Visual Specifications
-
-### Item Layout
-
-```
-[File Icon]  [Name (link if URL)]
-             [Secondary metadata text]
-                                    [Actions button (⋮ or override)]
-```
-
-| Element        | Description                                   |
-| -------------- | --------------------------------------------- |
-| File icon      | Left side, fixed size (~36px square)          |
-| Name           | Bold, truncated with ellipsis if too long     |
-| Metadata       | Smaller, secondary-color text                 |
-| Actions button | Right side, `<MoreVertIcon>` or override icon |
-
-**CSS-only implementation notes:**
-
-- Row: `display: flex; align-items: center; gap: 0.75rem; padding: 8px 0`.
-- File icon: `width: 36px; height: 36px; flex-shrink: 0`.
-- Content area: `flex: 1; min-width: 0` (prevents text overflow).
-- Name: `font-size: 0.875rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap`.
-- Metadata: `font-size: 0.75rem; color: var(--secondary-text-color)`.
-- Error metadata: `color: var(--error-color)`.
-- Actions button: `flex-shrink: 0; margin-left: auto`.
-- URL name: `color: var(--link-color); cursor: pointer; text-decoration: underline`.
-
-## Edge Cases & Special Logic
-
-- `visual.progress` — show a progress indicator only when `0 <= progress < 100`. When `progress === 100` (complete) or `progress === undefined`, show only the file icon.
-- `secondary.error === true` — the metadata text (e.g., upload error message) must be red, not the normal secondary color.
-- `menuIconOverride$` replaces the menu entirely — do not render `<MoreVertIcon>` when an override is provided.
-- `actions` may be empty — if empty and no override provided, do not render the actions button at all.
-
----
-
-## SummaryList
-
-### Props
-
-| Prop                      | Type       | Required | Description                                                      |
-| ------------------------- | ---------- | -------- | ---------------------------------------------------------------- |
-| `arItems$`                | `any[]`    | Yes      | Array of item objects (same shape as `SummaryItem`'s `arItems$`) |
-| `menuIconOverride$`       | `string`   | No       | Passed to every `SummaryItem`                                    |
-| `menuIconOverrideAction$` | `any`      | No       | Passed to every `SummaryItem`                                    |
-| `getPConnect`             | `function` | Yes      | PConnect getter                                                  |
-
-### Behavioral Contract
-
-```tsx
-const SummaryItemComp = getComponentFromRegistry('SummaryItem');
-
-return (
-  <div>
-    {arItems$.map((item, i) => (
-      <SummaryItemComp
-        key={item.id || i}
-        arItems$={item}
-        menuIconOverride$={menuIconOverride$}
-        menuIconOverrideAction$={menuIconOverrideAction$}
-        getPConnect={getPConnect}
-      />
-    ))}
-  </div>
-);
-```
-
-No state, no data fetching — purely a mapping wrapper.
-
-## Dependencies
-
-- **SummaryItem:** MUI `<IconButton>`, `<Menu>`, `<MenuItem>`, MUI Icons `<MoreVertIcon>`, utils helper for icon path resolution
-- **SummaryList:** `getComponentFromRegistry('SummaryItem')` — resolves the item component dynamically
-
-## Design System Mapping
-
-**UI control type:** File/link item row with icon, name, metadata, and action menu.
-
-Listed design systems are examples only.
-
-| Design System      | Row Layout                             | Action Menu                          |
-| ------------------ | -------------------------------------- | ------------------------------------ |
-| Default (CSS only) | `<div>` flexbox row                    | `<button>` + custom dropdown         |
-| MUI                | `<ListItem>` or `<Box display='flex'>` | `<IconButton>` + `<Menu>/<MenuItem>` |
-| Ant Design         | `<List.Item>`                          | `<Dropdown menu={{ items }}>`        |
-| Chakra UI          | `<HStack>`                             | `<Menu>/<MenuButton>/<MenuList>`     |
-| Shadcn/ui          | `<div>` flexbox                        | `<DropdownMenu>`                     |
-
-When implementing in a specific design system:
-
-- `menuIconOverride$` completely replaces the standard `⋮` menu — check for it before rendering the actions area
-- `type === 'URL'` must render the name as a clickable link (not plain text)
-- `secondary.error` is a boolean — apply error styling to the `secondary.text` when `true`
-- `SummaryList` is purely compositional — no logic beyond mapping items to `SummaryItem`

package/templates/react-sdk-reference/.github/skills/widget-skills/ToDo.md

@@ -1,198 +0,0 @@
-# Skill: ToDo
-
-Assignment worklist widget. Displays the current user's pending assignments with expand/collapse, click-to-open, priority indicators, badge counts, responsive layout, and snackbar error notifications.
-
-> **Prerequisite skill:** [`widget-components.md`](../widget-components.md) — covers architecture, props interface, data-fetching patterns, and registration conventions common to ALL widget components.
-
----
-
-## Component Purpose
-
-Renders a compact to-do / worklist panel showing the user's pending assignments. Shows the top 3 items by default with a "Show more" / "Show less" toggle. Supports two modes: `worklist` (personal workbasket) and `todo` (case-level assignments). Clicking an item opens the assignment. A badge in the card header shows the total count.
-
-## Pega Metadata
-
-- **Registration key:** `Todo` (note: lowercase `o` in the key; file is `ToDo.tsx`)
-- **Category:** Widget — assignment / action
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop           | Type       | Required | Description                                                                                        |
-| -------------- | ---------- | -------- | -------------------------------------------------------------------------------------------------- |
-| `datasource`   | `any`      | No       | Array of assignments passed directly (used in `todo` type). If provided, skips the data page fetch |
-| `myWorkList`   | `any`      | No       | Work list config object `{ datapage: string, fields: [...] }` — for `worklist` type                |
-| `caseInfoID`   | `string`   | No       | Case ID to filter assignments (used in `todo` type)                                                |
-| `headerText`   | `string`   | No       | Widget title. Default: `"To do"`                                                                   |
-| `itemKey`      | `string`   | No       | Field key (reserved, currently unused)                                                             |
-| `showTodoList` | `boolean`  | No       | Whether to show the assignment list. Default `true`                                                |
-| `type`         | `string`   | No       | `'worklist'` (personal work) or `'todo'` (case-level). Default `'worklist'`                        |
-| `context`      | `string`   | No       | Context name for API calls. Falls back to `pConn.getContextName()`                                 |
-| `isConfirm`    | `boolean`  | No       | Confirmation mode — adjusts rendering for post-submit confirmation view                            |
-| `getPConnect`  | `function` | Yes      | PConnect getter                                                                                    |
-
-## Behavioral Contract
-
-### Data Source Resolution
-
-**`type === 'todo'` (case-level):**
-
-- Use `datasource` prop directly (array of assignment objects).
-- `caseInfoID` is used to scope the assignments.
-
-**`type === 'worklist'` (personal work):**
-
-- Fetch from `myWorkList.datapage` (e.g., `D_WorkList`) via:
-  ```
-  PCore.getDataPageUtils().getDataAsync(
-    myWorkList.datapage,
-    context,
-    {},
-    { pageNumber: 1, pageSize: 50 },
-    { select: myWorkList.fields },
-    { invalidateCache: true }
-  )
-  ```
-- Map the response to assignment objects.
-
-### Top 3 + Show More
-
-- `showCount` state: default `3`.
-- Render only `assignments.slice(0, showCount)`.
-- If `assignments.length > 3`:
-  - Show a `"Show more"` button → sets `showCount = assignments.length`.
-  - When expanded: show `"Show less"` button → sets `showCount = 3`.
-
-### Badge Count
-
-- Render a `<Badge badgeContent={assignments.length}>` on the card header or alongside the title.
-- Badge shows the total count of assignments, not the currently-visible count.
-
-### Open Assignment
-
-On item click:
-
-```typescript
-pConn.getActionsApi().openAssignment(
-  assignment.pxRefObjectKey, // case key
-  assignment.pxRefObjectClass, // class name
-  {
-    containerName: pConn.getContainerName() || PCore.getConstants().APP.APP,
-    channelName: '',
-  },
-);
-```
-
-### Assignment Item Rendering
-
-For each assignment, show:
-
-- **Avatar:** Circle with user initials (derived from `pConn.getContextObject?.().pyLabel` or operator name).
-- **Name/title:** `assignment.pyLabel` — the assignment task name.
-- **Status badge (worklist only):** `assignment.pyStatusWork` — colored status pill.
-- **Priority/urgency:** `assignment.pyUrgencyWork` — urgency level indicator.
-- **Child case indicator:** If `assignment.isChild === true`, show an indent or nested indicator.
-- **Arrow icon:** Right-pointing arrow (`<ArrowForwardIosOutlinedIcon>`) indicating clickable.
-
-### Responsive Layout
-
-Use `useMediaQuery(theme.breakpoints.down('sm'))` (MUI) to detect mobile:
-
-- **Desktop:** Show avatar, name, status, priority, and arrow in a horizontal row.
-- **Mobile:** Stack or truncate elements for narrow display.
-
-### `canPerform` Permission Check
-
-If an assignment has `canPerform === false`, render it as non-clickable (greyed out, no onClick handler).
-
-### Snackbar Error
-
-- On `openAssignment` failure, catch the error and show a `<Snackbar>` with the error message.
-- Auto-hide after 3000ms.
-- `<IconButton>` (`<CloseIcon>`) to manually dismiss.
-
-### Operator Avatar Initials
-
-Extract initials from `PCore.getEnvironmentInfo().getOperatorName()`:
-
-```typescript
-const initials = operatorName
-  .split(' ')
-  .map((w) => w[0])
-  .join('')
-  .substring(0, 2)
-  .toUpperCase();
-```
-
-## Visual Specifications
-
-### Card Layout
-
-| Element               | Description                                         |
-| --------------------- | --------------------------------------------------- |
-| Card header           | `headerText` (default `"To do"`) + badge with count |
-| Assignment rows       | Up to `showCount` items                             |
-| Show more/less button | Below the last visible item                         |
-
-### Assignment Row
-
-| Element            | Desktop   | Mobile          |
-| ------------------ | --------- | --------------- |
-| Avatar circle      | Shown     | Shown           |
-| Task name          | Full text | Truncated       |
-| Status badge       | Shown     | Hidden or small |
-| Priority indicator | Shown     | Simplified      |
-| Arrow icon         | Shown     | Shown           |
-
-**CSS-only implementation notes:**
-
-- Card: standard card layout.
-- Assignment row: `display: flex; align-items: center; gap: 0.75rem; padding: 10px 0; cursor: pointer; border-bottom: 1px solid var(--divider-color)`.
-- Avatar: `width: 36px; height: 36px; border-radius: 50%; background: var(--avatar-bg); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 600`.
-- Status badge: `padding: 2px 6px; border-radius: 10px; font-size: 0.75rem; background: var(--status-bg-color)`.
-- Priority: `font-size: 0.75rem; color: var(--secondary-text-color)`.
-- Arrow: `margin-left: auto; color: var(--secondary-text-color)`.
-- Non-clickable (canPerform=false): `opacity: 0.5; cursor: not-allowed`.
-- Show more button: `width: 100%; text-align: center; padding: 8px; color: var(--app-primary-color)`.
-
-## Edge Cases & Special Logic
-
-- `type` defaults to `'worklist'` — handle the fallback gracefully if `type` is undefined.
-- `datasource` prop vs fetch: if `datasource` is provided (non-empty), skip the data page fetch entirely.
-- `myWorkList` may be undefined for `todo` type — do not attempt a fetch if it's missing.
-- `showTodoList === false` — render only the card header (with badge count) and hide the list body.
-- `isConfirm === true` — used in the Confirmation template context; may adjust layout to hide certain elements (e.g., hide status badge, show simpler view).
-- Empty assignments — show a `"No tasks"` or `"You're all caught up!"` empty state message.
-- `canPerform` check: if `false`, disable click and show cursor `not-allowed`. Do not open the assignment.
-- Container name fallback: `pConn.getContainerName() || PCore.getConstants().APP.APP` — always provide a container name to `openAssignment`.
-
-## Dependencies
-
-- `PCore.getDataPageUtils().getDataAsync()` — worklist data page fetch
-- `PCore.getEnvironmentInfo()` — operator name for avatar initials
-- `PCore.getConstants()` — CASE_INFO, WORK_BASKET, TODO, APP constants
-- `PCore.getLocaleUtils()` — assignment label localization
-- `pConn.getActionsApi().openAssignment()` — opens the selected assignment
-- MUI: `<Card>`, `<CardContent>`, `<CardHeader>`, `<Avatar>`, `<Typography>`, `<Badge>`, `<List>`, `<ListItem>`, `<ListItemText>`, `<Button>`, `<Snackbar>`, `<IconButton>`, `useMediaQuery`, `useTheme`
-- MUI Icons: `<CloseIcon>`, `<ArrowForwardIosOutlinedIcon>`
-
-## Design System Mapping
-
-**UI control type:** Assignment worklist widget with expand/collapse, click-to-open, badge count, and error toast.
-
-Listed design systems are examples only.
-
-| Design System      | Card                      | List                | Badge               | Snackbar                      |
-| ------------------ | ------------------------- | ------------------- | ------------------- | ----------------------------- |
-| Default (CSS only) | `<div>` card              | `<ul>/<li>`         | CSS counter badge   | Custom toast overlay          |
-| MUI                | `<Card>` + `<CardHeader>` | `<List>/<ListItem>` | `<Badge>`           | `<Snackbar>/<Alert>`          |
-| Ant Design         | `<Card>`                  | `<List>`            | `<Badge count={N}>` | `message.error()`             |
-| Chakra UI          | `<Card>`                  | `<VStack>`          | `<Badge>`           | `useToast()`                  |
-| Shadcn/ui          | `<Card>`                  | `<ul>/<li>`         | Custom badge        | `<Toaster>` + `toast.error()` |
-
-When implementing in a specific design system:
-
-- Show top 3 items by default — `showCount` state controls slice; "Show more/less" toggles between 3 and full length
-- `canPerform === false` must make the row non-clickable — check this before calling `openAssignment`
-- `type === 'worklist'` fetches from a data page; `type === 'todo'` uses the `datasource` prop — both paths must be implemented
-- Operator initials for the avatar must be derived from `PCore.getEnvironmentInfo().getOperatorName()`