@pega/sdk 0.0.3 → 0.0.5

package/templates/react-sdk-reference/.cursor/rules/skills/widget-skills/AppAnnouncement.mdrules

@@ -1,87 +0,0 @@
----
-description: Widget component skill: AppAnnouncement
-alwaysApply: false
----
-
-# Skill: AppAnnouncement
-
-Card-based announcement widget. Displays a system-wide or application announcement with an optional bullet list of items and a "See what's new" external link button.
-
-> **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 an announcement card with a heading, description text, optional bullet list of items sourced from a `datasource` prop, and an optional external link button. Styled with a left accent border to visually distinguish it from other cards.
-
-## Pega Metadata
-
-- **Registration key:** `AppAnnouncement` (in `component-map.ts`)
-- **Category:** Widget — informational display
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `header` | `string` | No | Announcement card title |
-| `description` | `string` | No | Announcement body text |
-| `datasource` | `object` | No | Data source object — `datasource.source` is an array of item objects |
-| `whatsnewlink` | `string` | No | URL for the "See what's new" button; if absent, button is not rendered |
-| `getPConnect` | `function` | Yes | PConnect getter |
-
-## Behavioral Contract
-
-1. **Item list extraction:** If `datasource` is provided and `datasource.source` is a non-empty array, extract item names and render them as a bullet list. Each array item is expected to have a `name` property.
-2. **Button:** If `whatsnewlink` is non-empty, render a button labeled `"See what's new"` (or localized equivalent). On click, open the URL in a new browser tab (`window.open(whatsnewlink, '_blank')`).
-3. **Description:** Render the `description` string as plain text below the header.
-4. **No data fetching:** This widget is purely prop-driven — it does not call any PCore data APIs.
-
-## Visual Specifications
-
-### Card Layout
-
-| Element | Position |
-|---------|----------|
-| Left accent border | 6px solid, primary light color |
-| Card header | `header` prop as title |
-| Card content | Description text + optional bullet list |
-| "See what's new" button | Below description / bullet list |
-
-**CSS-only implementation notes:**
-- Card: `border-left: 6px solid var(--app-primary-light-color); border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.12)`.
-- Card header: `padding: 12px 16px; font-weight: 600`.
-- Card content: `padding: 0 16px 16px`.
-- Bullet list: `padding-left: 1.5rem; margin: 0.5rem 0`.
-- "See what's new" button: `margin-top: 0.75rem; text-transform: none`.
-
-## Edge Cases & Special Logic
-
-- `datasource` may be `undefined` or `datasource.source` may be an empty array — in both cases, render no bullet list (not even an empty `<ul>`).
-- `whatsnewlink` may be an empty string — treat the same as absent (no button rendered).
-- `header` and `description` may both be absent — render the card with empty/placeholder content without crashing.
-- Item objects in `datasource.source` are expected to have `name` — guard against items where `name` is `undefined`.
-
-## Dependencies
-
-- MUI: `<Card>`, `<CardHeader>`, `<CardContent>`, `<Typography>`, `<Button>`
-
-## Design System Mapping
-
-**UI control type:** Announcement / informational card with bullet list and external link.
-
-Listed design systems are examples only.
-
-| Design System | Card | Bullet List | Button |
-|---|---|---|---|
-| Default (CSS only) | `<div>` with left border + box-shadow | `<ul>/<li>` | `<button>` opening new tab |
-| MUI | `<Card>` + `<CardHeader>` + `<CardContent>` | `<List>/<ListItem>` or `<ul>` | `<Button>` |
-| Ant Design | `<Card>` with `title` prop | `<ul>/<li>` | `<Button>` |
-| Chakra UI | `<Card>` + `<CardHeader>` + `<CardBody>` | `<UnorderedList>/<ListItem>` | `<Button>` |
-| Shadcn/ui | `<Card>` + `<CardHeader>` + `<CardContent>` | `<ul>/<li>` | `<Button>` |
-
-When implementing in a specific design system:
-- Left accent border is a key visual identifier — implement it via CSS or the design system's border utilities
-- "See what's new" must open in a new tab (`target='_blank'` + `rel='noopener noreferrer'`)
-- The widget is entirely prop-driven — no data fetching needed

package/templates/react-sdk-reference/.cursor/rules/skills/widget-skills/Attachment.mdrules

@@ -1,151 +0,0 @@
----
-description: Widget component skill: Attachment
-alwaysApply: false
----
-
-# Skill: Attachment
-
-File upload/download widget for case attachments. Behaves like a form field — binds to a case attachment property, supports multiple files, validates extensions and size, tracks upload progress, and blocks form submission during active uploads.
-
-> **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 file attachment control within a Pega form. Users can upload one or multiple files, download existing attachments, and delete attachments. The widget validates file extensions and enforces a maximum size from environment config. Upload progress is shown per-file. Form submission is blocked while uploads are in progress via the action sequencer.
-
-## Pega Metadata
-
-- **Registration key:** `Attachment` (in `component-map.ts`)
-- **Category:** Widget — form field (file input)
-- **Extends:** `Omit<PConnFieldProps, 'value'>` (uses `value: any` instead of the standard string value)
-
-## Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `value` | `any` | Yes | Attachment list or single attachment object (from Pega property) |
-| `allowMultiple` | `boolean \| string` | No | Whether multiple files can be attached. Default `false` |
-| `extensions` | `string` | No | Comma-separated list of allowed file extensions (e.g., `".pdf,.doc,.jpg"`) |
-| `editMode` | `string` | No | `"tableRows"` for inline table edit mode (special multi-attachment handling) |
-| `isTableFormatter` | `boolean` | No | Whether this widget is used inside a table formatter |
-| `label` | `string` | Yes (from PConnFieldProps) | Field label |
-| `required` | `boolean` | No | Whether a file is required |
-| `disabled` | `boolean` | No | Whether the control is disabled |
-| `displayMode` | `string` | No | `"DISPLAY_ONLY"` for read-only rendering |
-| `validatemessage` | `string` | No | Validation error message to display |
-| `helperText` | `string` | No | Helper text shown below the control |
-| `getPConnect` | `function` | Yes | PConnect getter |
-
-## Behavioral Contract
-
-### Attachment Format Detection
-
-Pega has two attachment data formats — detect which one is in use:
-
-**Old format (annotation-based):**
-```typescript
-value = { pxResults: [...], pyAttachCount: N }
-```
-
-**New standard format:**
-```typescript
-value = [{ ID, name, mimeType, category, ... }]  // array
-```
-
-Call `PCore.getAttachmentUtils().prepareAttachmentData(value)` to normalize both formats into a unified `FileObject[]` array.
-
-### File Validation
-
-On file selection (via `<input type='file'>`):
-1. **Extension check:** Compare selected file's extension against `extensions` prop (split by comma). If not allowed, add an error to the file and do not upload.
-2. **Size check:** Compare file size against `PCore.getEnvironmentInfo().getMaxAttachmentSize()` (in bytes). If too large, add a size error.
-3. Valid files proceed to upload.
-
-### Upload Flow
-
-1. Call `PCore.getActionsSequencer().addAction('attachment_upload_' + fileId)` — blocks form submission.
-2. Call `PCore.getAttachmentUtils().uploadAttachment(file, onProgress, onError, context)`.
-3. On progress: update per-file `progress` value (0–100) in state.
-4. On success: add the returned attachment metadata to the local file list; update the Pega property via `pConn.setReferenceList(newAttachmentList)`.
-5. Call `PCore.getActionsSequencer().removeAction('attachment_upload_' + fileId)` — unblocks form submission.
-6. On error: set file error state; call `PCore.getMessageManager().addMessages([errorMessage])`.
-
-### Download
-
-Call `PCore.getAttachmentUtils().downloadAttachment(attachmentID, context)` — triggers browser file download.
-
-### Delete
-
-Remove the attachment from the local list and update `pConn.setReferenceList(updatedList)`. Do not call a separate delete API in the reference implementation — deletion is committed on form save.
-
-### Pub-Sub: Assignment Submission
-
-Subscribe to `PCore.getPubSubUtils().subscribe(BEFORE_ASSIGNMENT_SUBMIT, handleBeforeSubmit, 'Attachment')`. In `handleBeforeSubmit`, validate that no uploads are still in progress.
-
-### Read-Only Mode (`displayMode === 'DISPLAY_ONLY'`)
-
-Render a list of existing attachments as download links. No upload controls shown.
-
-### Inline Table Edit Mode (`editMode === 'tableRows'`)
-
-Compressed display for use inside a table cell. Show attachment count and a small upload button. Clicking opens a minimal upload dialog.
-
-## Visual Specifications
-
-| Element | Description |
-|---------|-------------|
-| Label | Standard field label above the control |
-| Drop zone / Upload button | Clickable area to select files; optionally supports drag-and-drop |
-| File list | Each uploaded file: icon + name + size + progress bar (during upload) + delete button |
-| Error state | Red error text below the control for invalid files or upload failures |
-| Helper text | Secondary text below the control |
-
-**CSS-only implementation notes:**
-- Drop zone: `border: 2px dashed var(--border-color); border-radius: 4px; padding: 1rem; text-align: center; cursor: pointer`.
-- Drop zone hover: `border-color: var(--app-primary-color); background: var(--hover-bg)`.
-- File row: `display: flex; align-items: center; gap: 0.5rem; padding: 4px 0`.
-- Progress bar: `height: 4px; background: var(--app-primary-color); border-radius: 2px; transition: width 0.2s`.
-- Error text: `color: var(--error-color); font-size: 0.75rem; margin-top: 4px`.
-- Delete button: `color: var(--error-color)`.
-
-## Edge Cases & Special Logic
-
-- `allowMultiple` may be a string `"true"` / `"false"` or a boolean — always coerce: `allowMultiple === true || allowMultiple === 'true'`.
-- Upload progress: track per-file progress in a `Map<fileId, number>` state object.
-- `isTableFormatter`: when `true`, hide the label and reduce padding for compact table display.
-- Concurrent uploads: multiple files may upload simultaneously — the sequencer action must be keyed per-file.
-- Max size: call `PCore.getEnvironmentInfo().getMaxAttachmentSize()` at validation time (not at mount) — size config may be dynamic.
-- `extensions` may be empty string — if empty, allow all file types.
-
-## Dependencies
-
-- `AttachmentUtils.ts` — `validateExtension`, `validateSize`, `getFileTypeIcon`, `buildDownloadURL`, error handling helpers
-- `Attachment.types.ts` — `FileObject`, `AttachmentLinks`, `PageInstructionOptions` type definitions
-- `PCore.getAttachmentUtils()` — upload, download, prepareAttachmentData
-- `PCore.getActionsSequencer()` — block/unblock form submission during upload
-- `PCore.getEnvironmentInfo()` — max attachment size
-- `PCore.getMessageManager()` — error message display
-- `PCore.getPubSubUtils()` — before-submit subscription
-- `downloadjs` library — browser file download trigger
-
-## Design System Mapping
-
-**UI control type:** File upload form field with progress tracking, validation, and attachment list.
-
-Listed design systems are examples only.
-
-| Design System | File Input | Progress | File List |
-|---|---|---|---|
-| Default (CSS only) | `<input type='file'>` + custom styled drop zone | `<progress>` element or CSS bar | `<ul>/<li>` rows |
-| MUI | Custom styled `<Box>` drop zone + hidden `<input>` | `<LinearProgress>` | `<List>/<ListItem>` |
-| Ant Design | `<Upload dragger>` | `<Progress>` | Built-in upload file list |
-| Chakra UI | Custom `<Box>` with `useDropzone` | `<Progress>` | `<VStack>` rows |
-| Shadcn/ui | Custom drop zone | Custom CSS progress bar | `<ul>/<li>` rows |
-
-When implementing in a specific design system:
-- Action sequencer blocking (`addAction`/`removeAction`) is mandatory — do not skip it; form submission must be blocked during uploads
-- Detect and normalize both old and new attachment formats via `prepareAttachmentData`
-- `allowMultiple` coercion (string vs boolean) is required
-- Extension and size validation must happen client-side before calling the upload API

package/templates/react-sdk-reference/.cursor/rules/skills/widget-skills/FileUtility.mdrules

@@ -1,205 +0,0 @@
----
-description: Widget component skill: FileUtility
-alwaysApply: false
----
-
-# Skill: FileUtility
-
-File and URL management utility widget. Displays case attachments and links, supports upload/download/delete, and provides modals for adding new files or URLs. Also covers `ActionButtonsForFileUtil` sub-component.
-
-> **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
-
-The primary attachments management panel in the case utilities column. Shows up to 3 attachments/links in the main view with a "View all" option that opens a modal with the full list. Users can upload files, attach URLs, download, and delete items. Attachment state is kept fresh via debounced pub-sub subscriptions.
-
-## Pega Metadata
-
-- **Registration key:** `FileUtility` (in `component-map.ts`)
-- **Category:** Widget — file management
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `caseId` | `string` | No | Optional case ID override. If absent, resolved from `pConn.getCaseInfo().getID()` |
-| `getPConnect` | `function` | Yes | PConnect getter |
-
-## Behavioral Contract
-
-### Attachment Fetch
-
-On mount and on attachment change events:
-```
-PCore.getAttachmentUtils().getCaseAttachments(caseKey, context)
-```
-Returns array of attachment/link objects. Store in `attachments` state.
-
-Debounced auto-refresh: on `CASE_ATTACHMENTS_UPDATED` pub-sub event, wait 1000ms (debounced) then re-fetch. This prevents rapid re-fetches when multiple files are uploaded simultaneously.
-
-### Main View — Top 3 Display
-
-Show only the first 3 items from `attachments`. If `attachments.length > 3`, show a `"View all (N)"` button that opens the full-list modal.
-
-### SummaryList Integration
-
-Map each attachment/link to a `SummaryItem`-compatible object:
-```typescript
-{
-  id: attachment.ID,
-  visual: { icon: getFileIcon(attachment.mimeType) },
-  primary: {
-    type: attachment.category === 'FILE' ? 'FILE' : 'URL',
-    name: attachment.name,
-    click: () => handleDownloadOrOpen(attachment)
-  },
-  secondary: { text: attachment.createdBy + ' · ' + formatDate(attachment.createTime) }
-  actions: [
-    { id: 'delete', text: 'Delete', icon: 'trash', onClick: () => handleDelete(attachment.ID) }
-  ]
-}
-```
-
-Pass to `<SummaryList arItems$={summaryItems} />`.
-
-### File Upload
-
-1. User clicks "Add file" from the `<Menu>`.
-2. Opens an add-file modal (dialog).
-3. User selects a file via `<input type='file'>`.
-4. On confirm: call `PCore.getAttachmentUtils().uploadAttachment(file, onProgress, onError, context)`.
-5. On success: call `PCore.getAttachmentUtils().linkAttachmentsToCase(caseKey, [newAttachment], context)`.
-6. Refresh attachment list.
-
-### URL Attachment
-
-1. User clicks "Add link" from the `<Menu>`.
-2. Opens add-link modal with two fields: `Title` (required) and `URL` (required).
-3. The "Attach" button is enabled only when both `title` and `url` are non-empty.
-4. On confirm: call `PCore.getAttachmentUtils().linkAttachmentsToCase(caseKey, [{ name: title, url, category: 'URL' }], context)`.
-5. Refresh attachment list.
-
-### Download / Open
-
-- **FILE type:** Call `PCore.getAttachmentUtils().downloadAttachment(attachmentID, context)` then trigger browser download via `downloadjs`.
-- **URL type:** Open `attachment.url` in a new browser tab (`window.open(url, '_blank')`).
-
-### Delete
-
-Call `PCore.getAttachmentUtils().deleteAttachment(attachmentID, context)`. Refresh attachment list after success.
-
-### Actions Menu
-
-Render a `<MoreVertIcon>` `<IconButton>` that opens a `<Menu>` with:
-- `"Add file"` — opens add-file modal
-- `"Add link"` — opens add-link modal
-
-## Visual Specifications
-
-### Main Card
-
-| Element | Description |
-|---------|-------------|
-| Card header | `"Attachments"` (or localized) + count badge |
-| Actions icon | `<MoreVertIcon>` button top-right |
-| Attachment rows | Up to 3 `SummaryItem` cards |
-| "View all" button | Text button, shown when > 3 attachments |
-
-### "View all" Modal
-
-| Element | Description |
-|---------|-------------|
-| Modal header | `"All attachments (N)"` |
-| Attachment rows | All items in `SummaryList` |
-| Close button | `X` in modal header |
-
-### Add File Modal
-
-| Element | Description |
-|---------|-------------|
-| File picker | `<input type='file'>` |
-| Progress bar | Per-file upload progress |
-| Action buttons | `ActionButtonsForFileUtil` (Cancel + Attach) |
-
-### Add Link Modal
-
-| Element | Description |
-|---------|-------------|
-| Title field | `<TextField label='Title'>` — required |
-| URL field | `<TextField label='URL'>` — required |
-| Attach button | Enabled only when both fields are filled |
-| Action buttons | `ActionButtonsForFileUtil` (Cancel + Attach) |
-
-**CSS-only implementation notes:**
-- Main card: standard card styles.
-- Modal: `position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; border-radius: 8px; box-shadow: 0 4px 24px rgba(0,0,0,0.2); min-width: 480px; padding: 1.5rem`.
-- "View all" button: text style, `color: var(--app-primary-color); cursor: pointer`.
-- Progress bar: `height: 4px; background: var(--app-primary-color); transition: width 0.3s`.
-
-## Sub-Component: ActionButtonsForFileUtil
-
-**Registration key:** `ActionButtonsForFileUtil`
-
-A simple button row component used inside the FileUtility modals to render Cancel + primary action buttons.
-
-### Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `arMainButtons` | `any[]` | Yes | Primary button definitions `[{ actionID, name }]` |
-| `arSecondaryButtons` | `any[]` | Yes | Secondary (cancel) button definitions `[{ actionID, name }]` |
-| `primaryAction` | `function` | Yes | Callback invoked when the primary button is clicked |
-| `secondaryAction` | `function` | Yes | Callback invoked when the secondary/cancel button is clicked |
-| `getPConnect` | `function` | Yes | PConnect getter |
-
-### Layout
-
-```
-[Secondary buttons (left)]   [Primary buttons (right)]
-      Cancel                        Attach
-```
-
-- Secondary buttons: outlined/text style.
-- Primary buttons: contained/filled style with theme primary color.
-- Render using `arSecondaryButtons.map(...)` and `arMainButtons.map(...)`.
-
-## Edge Cases & Special Logic
-
-- **Debounce (1000ms):** Prevents excessive re-fetches when multiple attachment events fire in quick succession.
-- **Add link "Attach" button disabled state:** Title and URL validation must happen on every keystroke — use controlled inputs with `!title || !url` to derive disabled state.
-- **`linkAttachmentsToCase`:** After upload, the file must be explicitly linked to the case. Uploading alone does not associate the file with the case.
-- **Pub-sub cleanup:** Unsubscribe from `CASE_ATTACHMENTS_UPDATED` on unmount to prevent stale callbacks.
-- **Error display:** Use `PCore.getMessageManager()` or inline error state in the modal — do not silently fail on upload/link errors.
-
-## Dependencies
-
-- `PCore.getAttachmentUtils()` — getCaseAttachments, uploadAttachment, downloadAttachment, deleteAttachment, linkAttachmentsToCase
-- `PCore.getMessagingServiceManager()` — subscribe to attachment change events
-- `PCore.getConstants()` — case info ID, summary refresh timing
-- `getComponentFromRegistry('SummaryList')` — renders the attachment item list
-- `getComponentFromRegistry('ActionButtonsForFileUtil')` — renders modal action buttons
-- `downloadjs` — browser file download trigger
-- MUI: `<Card>`, `<CardHeader>`, `<CardContent>`, `<IconButton>`, `<Menu>`, `<MenuItem>`, `<Button>`, `<TextField>`, `<Dialog>`, `<CircularProgress>`
-- MUI Icons: `<MoreVertIcon>`
-
-## Design System Mapping
-
-**UI control type:** File management widget — attachment list with upload/download/delete and add modals.
-
-Listed design systems are examples only.
-
-| Design System | Card | Action Menu | Modal | Progress |
-|---|---|---|---|---|
-| Default (CSS only) | `<div>` card | `<button>` + custom dropdown | `<dialog>` | CSS progress bar |
-| MUI | `<Card>` | `<IconButton>` + `<Menu>/<MenuItem>` | `<Dialog>` | `<CircularProgress>` or `<LinearProgress>` |
-| Ant Design | `<Card>` | `<Dropdown menu={{ items }}>` | `<Modal>` | `<Progress>` |
-| Chakra UI | `<Card>` | `<Menu>/<MenuButton>/<MenuList>` | `<Modal>` | `<Progress>` |
-| Shadcn/ui | `<Card>` | `<DropdownMenu>` | `<Dialog>` | Custom progress bar |
-
-When implementing in a specific design system:
-- Debounced refresh (1000ms) after pub-sub attachment events is required — prevents excessive API calls
-- `linkAttachmentsToCase` must be called after upload — uploading alone does not attach to the case
-- `ActionButtonsForFileUtil` receives button definition arrays — render them generically from `arMainButtons`/`arSecondaryButtons`

package/templates/react-sdk-reference/.cursor/rules/skills/widget-skills/ToDo.mdrules

@@ -1,195 +0,0 @@
----
-description: Widget component skill: ToDo
-alwaysApply: false
----
-
-# 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()`