@pega/sdk 0.0.2 → 0.0.4

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

@@ -18,9 +18,9 @@ Renders a table of case events sourced from the `D_pyWorkHistory` data page. Sho
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `getPConnect` | `function` | Yes | PConnect getter — used to resolve case ID and context |
+| 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.
 
@@ -50,6 +50,7 @@ Use `fast-deep-equal/react` to compare new `historyData` with previous value —
 ### 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.
@@ -59,13 +60,14 @@ For each history row, map:
 
 ### Table Layout
 
-| Column | Field | Width |
-|--------|-------|-------|
-| Date | `pyUpdatedDateTime` (formatted) | ~25% |
-| Description | `pyMessageKey` | ~50% |
-| Performer | `pyPerformer` | ~25% |
+| 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)`.
@@ -93,15 +95,16 @@ For each history row, map:
 
 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>` |
+| 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/FileUtility.md

@@ -18,19 +18,21 @@ The primary attachments management panel in the case utilities column. Shows up
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `caseId` | `string` | No | Optional case ID override. If absent, resolved from `pConn.getCaseInfo().getID()` |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| 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.
@@ -42,6 +44,7 @@ Show only the first 3 items from `attachments`. If `attachments.length > 3`, sho
 ### SummaryList Integration
 
 Map each attachment/link to a `SummaryItem`-compatible object:
+
 ```typescript
 {
   id: attachment.ID,
@@ -89,6 +92,7 @@ Call `PCore.getAttachmentUtils().deleteAttachment(attachmentID, context)`. Refre
 ### Actions Menu
 
 Render a `<MoreVertIcon>` `<IconButton>` that opens a `<Menu>` with:
+
 - `"Add file"` — opens add-file modal
 - `"Add link"` — opens add-link modal
 
@@ -96,39 +100,40 @@ Render a `<MoreVertIcon>` `<IconButton>` that opens a `<Menu>` with:
 
 ### 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 |
+| 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)"` |
+| Element         | Description                |
+| --------------- | -------------------------- |
+| Modal header    | `"All attachments (N)"`    |
 | Attachment rows | All items in `SummaryList` |
-| Close button | `X` in modal header |
+| Close button    | `X` in modal header        |
 
 ### Add File Modal
 
-| Element | Description |
-|---------|-------------|
-| File picker | `<input type='file'>` |
-| Progress bar | Per-file upload progress |
+| 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 |
+| 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`.
@@ -142,13 +147,13 @@ A simple button row component used inside the FileUtility modals to render Cance
 
 ### 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 |
+| 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
 
@@ -186,15 +191,16 @@ A simple button row component used inside the FileUtility modals to render Cance
 
 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 |
+| 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/.github/skills/widget-skills/Followers.md

@@ -18,11 +18,12 @@ Intended to display the list of operators following a case, allowing users to fo
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `getPConnect` | `function` | Yes | PConnect getter |
+| 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"`)
 
@@ -47,24 +48,26 @@ No additional custom props in the current stub implementation. A full implementa
 
 ### Stub Rendering
 
-| Element | Value |
-|---------|-------|
-| Card title | `"Followers"` |
-| Card body | `"Followers - unsupported"` plain text |
+| 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"` |
+| 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`.
 
@@ -85,15 +88,16 @@ No additional custom props in the current stub implementation. A full implementa
 
 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>` |
+| 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/QuickCreate.md

@@ -18,12 +18,12 @@ Provides a shortcut panel for creating new cases. Case types are sourced from th
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `heading` | `string` | Yes | Widget title (e.g., `"Create"`) |
-| `showCaseIcons` | `boolean` | No | Whether to show case type icons alongside labels. Default `false` |
-| `classFilter` | `any[]` | No | Array of class names to filter available case types. Empty array = show all |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop            | Type       | Required | Description                                                                 |
+| --------------- | ---------- | -------- | --------------------------------------------------------------------------- |
+| `heading`       | `string`   | Yes      | Widget title (e.g., `"Create"`)                                             |
+| `showCaseIcons` | `boolean`  | No       | Whether to show case type icons alongside labels. Default `false`           |
+| `classFilter`   | `any[]`    | No       | Array of class names to filter available case types. Empty array = show all |
+| `getPConnect`   | `function` | Yes      | PConnect getter                                                             |
 
 ## Behavioral Contract
 
@@ -39,6 +39,7 @@ Provides a shortcut panel for creating new cases. Case types are sourced from th
 ### Case Type Object Mapping
 
 For each case type, build:
+
 ```typescript
 {
   classname: caseType.pyClassName,
@@ -54,6 +55,7 @@ For each case type, build:
 ### Rendering Delegation
 
 Pass the mapped case type array to `WssQuickCreate` (retrieved via `getComponentFromRegistry('WssQuickCreate')`):
+
 ```tsx
 const WssQuickCreate = getComponentFromRegistry('WssQuickCreate');
 return <WssQuickCreate heading={heading} caseTypes={caseTypeObjects} />;
@@ -65,12 +67,13 @@ This component handles all button rendering — `QuickCreate` is purely a data-p
 
 Visual rendering is owned by `WssQuickCreate` (a design system extension component). Typical layout:
 
-| Element | Description |
-|---------|-------------|
-| Heading | Widget title at the top |
+| Element           | Description                                       |
+| ----------------- | ------------------------------------------------- |
+| Heading           | Widget title at the top                           |
 | Case type buttons | One button per case type; icon (optional) + label |
 
 **CSS-only implementation notes (if implementing without `WssQuickCreate`):**
+
 - Container: `display: flex; flex-direction: column; gap: 0.5rem`.
 - Heading: `font-weight: 600; margin-bottom: 0.5rem`.
 - Case type button: `display: flex; align-items: center; gap: 0.5rem; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 4px; cursor: pointer; background: white`.
@@ -100,15 +103,16 @@ Rendering is delegated to `WssQuickCreate` — implement that DSE component for
 
 If implementing without `WssQuickCreate`:
 
-| Design System | Button List |
-|---|---|
-| Default (CSS only) | `<button>` list with optional `<img>` icon |
-| MUI | `<List>` + `<ListItemButton>` or `<Button>` stack |
-| Ant Design | `<Space direction='vertical'>` + `<Button>` per case type |
-| Chakra UI | `<VStack>` + `<Button>` per case type |
-| Shadcn/ui | `<div>` stack + `<Button variant='outline'>` |
+| Design System      | Button List                                               |
+| ------------------ | --------------------------------------------------------- |
+| Default (CSS only) | `<button>` list with optional `<img>` icon                |
+| MUI                | `<List>` + `<ListItemButton>` or `<Button>` stack         |
+| Ant Design         | `<Space direction='vertical'>` + `<Button>` per case type |
+| Chakra UI          | `<VStack>` + `<Button>` per case type                     |
+| Shadcn/ui          | `<div>` stack + `<Button variant='outline'>`              |
 
 When implementing in a specific design system:
+
 - `classFilter` empty array = show ALL case types (not zero) — this is a common gotcha
 - `createWork` must be called with the correct `containerName` constant (`APP.APP`)
 - `showCaseIcons` is optional — only fetch/render icons when this prop is `true`

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

@@ -26,12 +26,12 @@ Individual item card for displaying an attachment, file, or link with an icon, n
 
 ### 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 |
+| 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$`)
 
@@ -82,14 +82,15 @@ Individual item card for displaying an attachment, file, or link with an icon, n
                                     [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 |
+| 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).
@@ -112,12 +113,12 @@ Individual item card for displaying an attachment, file, or link with an icon, n
 
 ### 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 |
+| 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
 
@@ -152,15 +153,16 @@ No state, no data fetching — purely a mapping wrapper.
 
 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>` |
+| 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`

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

@@ -18,28 +18,30 @@ Renders a compact to-do / worklist panel showing the user's pending assignments.
 
 ## 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 |
+| 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(
@@ -69,20 +71,22 @@ Renders a compact to-do / worklist panel showing the user's pending assignments.
 ### Open Assignment
 
 On item click:
+
 ```typescript
 pConn.getActionsApi().openAssignment(
-  assignment.pxRefObjectKey,   // case key
+  assignment.pxRefObjectKey, // case key
   assignment.pxRefObjectClass, // class name
   {
     containerName: pConn.getContainerName() || PCore.getConstants().APP.APP,
-    channelName: ''
-  }
+    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.
@@ -93,6 +97,7 @@ For each assignment, show:
 ### 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.
 
@@ -109,10 +114,11 @@ If an assignment has `canPerform === false`, render it as non-clickable (greyed
 ### Operator Avatar Initials
 
 Extract initials from `PCore.getEnvironmentInfo().getOperatorName()`:
+
 ```typescript
 const initials = operatorName
   .split(' ')
-  .map(w => w[0])
+  .map((w) => w[0])
   .join('')
   .substring(0, 2)
   .toUpperCase();
@@ -122,23 +128,24 @@ const initials = operatorName
 
 ### 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 |
+| 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 |
+| 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`.
@@ -175,15 +182,16 @@ const initials = operatorName
 
 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()` |
+| 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