@pega/sdk 0.0.5 → 0.0.7

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

@@ -2,7 +2,7 @@
 
 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.
+> **Prerequisite skill:** [`widget-components.md`](../widget-components.md) — covers architecture, input contract, data-fetching patterns, and registration conventions common to ALL widget components.
 
 ---
 
@@ -18,79 +18,34 @@ Individual item card for displaying an attachment, file, or link with an icon, n
   - `SummaryItem` — the individual item card
   - `SummaryList` — the container/list component
 - **Category:** Widget — display / composition
-- **Extends:** `PConnProps`
+- **Extends:** The project's base component interface
 
 ---
 
-## Component Skeletons
+## Implementation Structure
 
 ### SummaryItem
 
-```typescript
-import { useState } from 'react';
-import { Utils } from '../../helpers/utils';
-import type { PConnProps } from '@pega/sdk-react';
-import './SummaryItem.css';
-
-interface SummaryItemProps extends PConnProps {
-  menuIconOverride$: string;
-  menuIconOverrideAction$: any;
-  arItems$: any;
-}
-
-export default function SummaryItem(props: SummaryItemProps) {
-  let { menuIconOverride$ } = props;
-  const item = props.arItems$;
-  const imagePath = Utils.getIconPath(Utils.getSDKStaticConentUrl());
-  const srcImg = `${imagePath}${item.visual.icon}.svg`;
-  const [anchorEl, setAnchorEl] = useState(null);
-  if (menuIconOverride$) menuIconOverride$ = Utils.getImageSrc(menuIconOverride$, Utils.getSDKStaticConentUrl());
-
-  return (
-    <div className="psdk-utility-card">
-      <div className="psdk-utility-card-icon"><img src={srcImg} /></div>
-      <div className="psdk-utility-card-main">
-        {item.primary.type !== 'URL'
-          ? <div className="primary-label">{item.primary.name}</div>
-          : <button className="link-button">{item.primary.name}</button>}
-        {item.secondary.text && <div style={{ color: item.secondary.error ? 'red' : undefined }}>{item.secondary.text}</div>}
-      </div>
-      <div className="psdk-utility-action">
-        {menuIconOverride$
-          ? <button onClick={() => props.menuIconOverrideAction$(item)}><img src={menuIconOverride$} /></button>
-          : <IconButton onClick={e => setAnchorEl(e.currentTarget)}><MoreVertIcon /></IconButton>}
-        {!menuIconOverride$ && <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={() => setAnchorEl(null)}>
-          {item.actions?.map(opt => <MenuItem key={opt.id} onClick={opt.onClick}>{opt.text}</MenuItem>)}
-        </Menu>}
-      </div>
-    </div>
-  );
-}
-```
+**Module Setup:** The component depends on local state management and the project's SDK utility helpers for icon path resolution. Define the input contract as an extension of the project's base component interface with `menuIconOverride$`, `menuIconOverrideAction$`, and `arItems$` fields. Import a companion stylesheet.
+
+**Main Component Logic** — steps in order:
+
+1. Receive `menuIconOverride$` (as a reassignable variable) from inputs; read the single item into `item` from the `arItems$` input. Resolve `imagePath` via `Utils.getIconPath(Utils.getSDKStaticConentUrl())` and build `srcImg` by concatenating `imagePath`, `item.visual.icon`, and `.svg`. Declare `anchorEl` state (default `null`) for the actions menu.
+2. When `menuIconOverride$` is provided, resolve it to a full image source via `Utils.getImageSrc(menuIconOverride$, Utils.getSDKStaticConentUrl())`.
+3. **Render** a `psdk-utility-card` container with three sections: an icon block showing `srcImg`; a main content block showing the primary element (plain text when `item.primary.type !== 'URL'`, or a link-styled button element when it is a URL, both displaying `item.primary.name`) followed by the secondary metadata text (`item.secondary.text`, styled red when `item.secondary.error` is true); and an actions block that either renders a single override icon button (calling the `menuIconOverrideAction$` callback with the item on click, shown when `menuIconOverride$` is set) or an overflow menu icon button that opens a dropdown menu listing one menu item per entry in `item.actions` (shown when no override is set).
 
 ### SummaryList
 
-```typescript
-import { getComponentFromRegistry } from '@pega/sdk-react';
-
-export default function SummaryList(props) {
-  const SummaryItem = getComponentFromRegistry('SummaryItem');
-  const { arItems$, menuIconOverride$ = '', menuIconOverrideAction$ } = props;
-  return (
-    <div>
-      {arItems$.map(file => (
-        <SummaryItem key={file.id} arItems$={file}
-          menuIconOverride$={menuIconOverride$}
-          menuIconOverrideAction$={menuIconOverrideAction$} />
-      ))}
-    </div>
-  );
-}
-```
+**Module Setup:** The component depends on the project's component registry (to resolve `SummaryItem`).
+
+**Main Component Logic** — steps in order:
+
+1. Resolve `SummaryItem` from the project's component registry. Receive `arItems$`, `menuIconOverride$` (default `''`), and `menuIconOverrideAction$` from inputs.
+2. Render a wrapping `div` containing one `SummaryItem` per entry in `arItems$`, keyed by `file.id`, passing that entry as `arItems$`, plus `menuIconOverride$` and `menuIconOverrideAction$`.
 
 ## SummaryItem
 
-### Props
+### Inputs
 
 | Prop                      | Type       | Required | Description                                                                             |
 | ------------------------- | ---------- | -------- | --------------------------------------------------------------------------------------- |
@@ -101,31 +56,7 @@ export default function SummaryList(props) {
 
 ### 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
-  }>;
-}
-```
+Each item object has: `id` (string); a `visual` object with an `icon` (string identifier or URL) and an optional `progress` (number, upload progress 0–100); a `primary` object with `type` (`'FILE'` or `'URL'`), `name` (display name), `icon` (icon for the primary element), and `click` (a callback that downloads the file or opens the URL in a new tab); a `secondary` object with `text` (metadata, e.g. "John Smith · 01/15/2025") and an optional `error` boolean (renders the text in error/red color when true); and an `actions` array of `{ id, text, icon, onClick }` entries describing the menu items.
 
 ### Behavioral Contract
 
@@ -142,11 +73,7 @@ export default function SummaryList(props) {
 
 ### Item Layout
 
-```
-[File Icon]  [Name (link if URL)]
-             [Secondary metadata text]
-                                    [Actions button (⋮ or override)]
-```
+The file icon sits on the left, followed by the name (rendered as a link when the item is a URL) with the secondary metadata text below it, and the actions button (the overflow `⋮` icon or the override icon) anchored to the far right.
 
 | Element        | Description                                   |
 | -------------- | --------------------------------------------- |
@@ -177,7 +104,7 @@ export default function SummaryList(props) {
 
 ## SummaryList
 
-### Props
+### Inputs
 
 | Prop                      | Type       | Required | Description                                                      |
 | ------------------------- | ---------- | -------- | ---------------------------------------------------------------- |
@@ -188,44 +115,25 @@ export default function SummaryList(props) {
 
 ### 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>
-);
-```
+Resolve `SummaryItem` from the project's component registry. Render a wrapping container with one `SummaryItem` instance per entry in `arItems$` (keyed by `item.id` or its index), passing that entry as `arItems$`, plus `menuIconOverride$`, `menuIconOverrideAction$`, and `getPConnect`.
 
 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
+- **SummaryItem:** The DS's icon button and menu/dropdown components, the project's SDK utility helpers for icon path resolution.
+- **SummaryList:** The project's component registry, resolving `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.
+When implementing in a specific design system, map the following:
 
-| 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>`                     |
+- **Item row** → use the DS's list-item or flex-row container
+- **Actions menu** → use the DS's overflow/dropdown menu with an icon button trigger
+- **Override icon button** → render a single icon button with the override image when `menuIconOverride$` is set
+- **URL item** → render as a link-styled button element
 
 When implementing in a specific design system:
 

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

@@ -2,7 +2,7 @@
 
 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.
+> **Prerequisite skill:** [`widget-components.md`](../widget-components.md) — covers architecture, input contract, data-fetching patterns, and registration conventions common to ALL widget components.
 
 ---
 
@@ -12,11 +12,11 @@ Renders a compact to-do / worklist panel showing the user's pending assignments.
 
 ## Pega Metadata
 
-- **Registration key:** `Todo` (note: lowercase `o` in the key; file is `ToDo.tsx`)
+- **Registration key:** `Todo` (note: lowercase `o` in the key)
 - **Category:** Widget — assignment / action
-- **Extends:** `PConnProps`
+- **Extends:** The project's base component interface
 
-## Props
+## Inputs
 
 | Prop           | Type       | Required | Description                                                                                        |
 | -------------- | ---------- | -------- | -------------------------------------------------------------------------------------------------- |
@@ -31,70 +31,19 @@ Renders a compact to-do / worklist panel showing the user's pending assignments.
 | `isConfirm`    | `boolean`  | No       | Confirmation mode — adjusts rendering for post-submit confirmation view                            |
 | `getPConnect`  | `function` | Yes      | PConnect getter                                                                                    |
 
-## Component Skeleton
-
-```typescript
-import { useCallback, useEffect, useState } from 'react';
-import { Utils } from '../../helpers/utils';
-import type { PConnProps } from '@pega/sdk-react';
-import './ToDo.css';
-
-interface ToDoProps extends PConnProps {
-  datasource?: any; myWorkList?: any; caseInfoID?: string;
-  headerText?: string; showTodoList?: boolean; type?: string;
-  context?: string; isConfirm?: boolean;
-}
-
-export default function ToDo(props: ToDoProps) {
-  const {
-    getPConnect, context, datasource = [], headerText = 'To do',
-    showTodoList = true, myWorkList = {}, type = 'worklist', isConfirm = false,
-  } = props;
-  const CONSTS = PCore.getConstants();
-  const thePConn = getPConnect();
-  const currentUser = PCore.getEnvironmentInfo().getOperatorName() ?? '';
-  const currentUserInitials = Utils.getInitials(currentUser);
-
-  // 1. Data: derive assignments from props OR fetch
-  const assignmentsSource = Array.isArray(datasource) ? datasource : Array.isArray(datasource?.source) ? datasource.source : Array.isArray(myWorkList?.source) ? myWorkList.source : null;
-  const [fetchedAssignments, setFetchedAssignments] = useState([]);
-
-  // 2. Only fetch for WORKLIST type — TODO type gets data from props directly
-  useEffect(() => {
-    if (type === CONSTS.WORKLIST && myWorkList?.datapage && !assignmentsSource?.length) {
-      PCore.getDataPageUtils().getDataAsync(myWorkList.datapage, context || pConn.getContextName(), ...)
-        .then(response => setFetchedAssignments(response?.data || []));
-    }
-  }, [type, myWorkList?.datapage, context]);
-
-  // Use prop data if available, otherwise use fetched data
-  const assignments = assignmentsSource?.length ? assignmentsSource : fetchedAssignments;
-
-  // 3. clickGo — openAssignment with container options
-  //    IMPORTANT: assignment ID field differs by type!
-  const CONSTS = PCore.getConstants();
-  const getAssignmentId = (assignment) => type === CONSTS.TODO ? assignment.ID : assignment.id;
-
-  function clickGo(assignment) {
-    const id = getAssignmentId(assignment);
-    let classname = assignment.classname || '';
-    if (!classname) classname = thePConn.getCaseInfo().getClassName();
-    const sTarget = thePConn.getContainerName() || '';
-    const options: any = { containerName: sTarget || CONSTS.APP.APP, channelName: '' };
-    if (sTarget === 'workarea') { options.isActionFromToDoList = true; options.target = ''; options.context = null; options.isChild = assignment.isChild; }
-    else { options.isActionFromToDoList = false; options.target = sTarget; }
-    thePConn.getActionsApi().openAssignment(id, classname, options)
-      .catch(() => { setSnackbarMessage('Submit failed!'); setShowSnackbar(true); });
-  }
-
-  // 4. Show more/less toggle
-  function _showMore() { setBShowMore(false); /* fetch all or setAssignments(full list) */ }
-  function _showLess() { setBShowMore(true); setAssignments(a => a.slice(0, 3)); }
-
-  // 5. Render: WORKLIST and TODO have DIFFERENT render structures
-  //    See the two render paths below — they MUST be separate.
-}
-```
+## Implementation Structure
+
+**Module Setup:** The component depends on cached callbacks, lifecycle effects, and local state management; the project's SDK utility helpers; and companion styles. Define the input contract as an extension of the project's base component interface with optional `datasource`, `myWorkList`, `caseInfoID`, `headerText`, `showTodoList`, `type`, `context`, and `isConfirm` fields.
+
+**Main Component Logic** — steps in order:
+
+1. Receive `getPConnect`, `context`, `datasource` (default `[]`), `headerText` (default `'To do'`), `showTodoList` (default `true`), `myWorkList` (default `{}`), `type` (default `'worklist'`), and `isConfirm` (default `false`) from inputs. Read `CONSTS = PCore.getConstants()`; call `getPConnect()` into `thePConn`; resolve `currentUser` via `PCore.getEnvironmentInfo().getOperatorName() ?? ''` and `currentUserInitials` via the SDK utility helper `getInitials(currentUser)`.
+2. **Derive assignments from inputs OR fetch:** compute `assignmentsSource` by checking, in order, whether `datasource` is itself an array, whether `datasource?.source` is an array, or whether `myWorkList?.source` is an array — using whichever matches first, or `null` if none do. Declare `fetchedAssignments` local state (default `[]`).
+3. **Only fetch for WORKLIST type** — TODO type gets its data from inputs directly. In a lifecycle effect keyed on `[type, myWorkList?.datapage, context]`: when `type === CONSTS.WORKLIST`, `myWorkList?.datapage` is set, and `assignmentsSource` has no length, call `PCore.getDataPageUtils().getDataAsync(myWorkList.datapage, context || pConn.getContextName(), ...)` and store the response's `data` (or `[]`) via `setFetchedAssignments`.
+4. Resolve the final `assignments` array: use `assignmentsSource` when it has entries, otherwise fall back to `fetchedAssignments`.
+5. **`clickGo` — open the assignment with container options.** The assignment ID field differs by type, so define `getAssignmentId(assignment)` to return `assignment.ID` (uppercase) when `type === CONSTS.TODO`, otherwise `assignment.id` (lowercase). Then define `clickGo(assignment)`: resolve `id` via `getAssignmentId`; resolve `classname` from `assignment.classname`, falling back to `thePConn.getCaseInfo().getClassName()` when empty; resolve `sTarget` from `thePConn.getContainerName() || ''`; build `options = { containerName: sTarget || CONSTS.APP.APP, channelName: '' }`; when `sTarget === 'workarea'`, additionally set `options.isActionFromToDoList = true`, `options.target = ''`, `options.context = null`, and `options.isChild = assignment.isChild`; otherwise set `options.isActionFromToDoList = false` and `options.target = sTarget`. Call `thePConn.getActionsApi().openAssignment(id, classname, options)`, and on failure, set a snackbar error message ("Submit failed!") and show the snackbar.
+6. **Show more/less toggle:** define `_showMore()` to clear the `bShowMore` flag (revealing the full list, either by fetching all or using the already-available full list), and `_showLess()` to set the `bShowMore` flag back to true and slice the visible assignments back down to the first 3.
+7. **Render:** WORKLIST and TODO have DIFFERENT render structures — the two render paths described below MUST be kept separate.
 
 > ⚠️ **CRITICAL — WORKLIST AND TODO RENDER DIFFERENTLY**
 >
@@ -118,145 +67,22 @@ export default function ToDo(props: ToDoProps) {
 
 > ⚠️ **CRITICAL — USE THE PROJECT'S DESIGN SYSTEM**
 >
-> Check `package.json` for the installed design system and use its components:
+> Check the project's installed design system and use its components for the card, badge/count indicator, chevron icon, and button elements. Do NOT use plain unstyled elements when a design system is available.
 >
-> | If installed DS is... | Card/Tile                | Badge/Count                 | Chevron Icon                              | Button                   |
-> | --------------------- | ------------------------ | --------------------------- | ----------------------------------------- | ------------------------ |
-> | `@carbon/react`       | `Tile`                   | `Tag type='blue' size='sm'` | `ChevronRight` from `@carbon/react/icons` | `Button kind='ghost'`    |
-> | `@mui/material`       | `Card` + `CardHeader`    | `Badge`                     | `ArrowForwardIosOutlinedIcon`             | `Button`                 |
-> | `antd`                | `Card`                   | `Badge count={N}`           | `RightOutlined`                           | `Button type='link'`     |
-> | `@chakra-ui/react`    | `Card`                   | `Badge`                     | `ChevronRightIcon`                        | `Button variant='ghost'` |
-> | None / CSS-only       | `<div>` with card styles | `<span>` with badge CSS     | `›` character                             | `<button>`               |
->
-> ❌ **NEVER** use plain `<button>` with inline styles for assignment rows.
+> ❌ **NEVER** use plain unstyled elements for assignment rows when a DS is available.
 > ❌ **NEVER** use text `›` when a DS chevron icon is available.
 
-### WORKLIST Render Path (complete JSX)
-
-```tsx
-// ─── WORKLIST MODE (homepage) ───
-if (type === CONSTS.WORKLIST) {
-  return (
-    <Card className="psdk-todo">
-      {showTodoList && (
-        <div className="psdk-todo-header">
-          <Avatar>{currentUserInitials}</Avatar>
-          <h4 className="psdk-todo-title">{headerText}</h4>
-          <Badge>{getCount()}</Badge> {/* Badge IMMEDIATELY next to title */}
-        </div>
-      )}
-      <List>
-        {(bShowMore ? assignments.slice(0, 3) : assignments).map((assignment) => (
-          <ListItem
-            key={getAssignmentId(assignment)}
-            onClick={() => clickGo(assignment)}
-            disabled={assignment.canPerform === false}
-          >
-            <div>
-              <strong>{getAssignmentName(assignment)}</strong>
-              <span>
-                In {assignment.name} {getDisplayId(assignment)} • {assignment.status} • Urgency{' '}
-                {getPriority(assignment)}
-              </span>
-            </div>
-            <ChevronRightIcon />
-          </ListItem>
-        ))}
-      </List>
-      {getCount() > 3 &&
-        (bShowMore ? (
-          <Button onClick={handleShowMore}>Show more</Button>
-        ) : (
-          <Button onClick={handleShowLess}>Show less</Button>
-        ))}
-    </Card>
-  );
-}
-```
-
-### TODO Render Path (complete JSX)
-
-```tsx
-// ─── TODO MODE (case view) ───
-const todoContent = (
-  <>
-    {showTodoList && (
-      <div className="psdk-todo-header">
-        <h4 className="psdk-todo-title">{headerText}</h4>
-        <Badge>{assignments.length}</Badge>
-      </div>
-    )}
-    <List>
-      {assignments.map((assignment) => (
-        <ListItem
-          key={getAssignmentId(assignment)}
-          onClick={() => clickGo(assignment)}
-          disabled={assignment.canPerform === false}
-        >
-          <Avatar>{currentUserInitials}</Avatar>
-          <div>
-            <strong>{getAssignmentName(assignment)}</strong>
-            <span>
-              In {getDisplayId(assignment)} • Urgency {getPriority(assignment)}
-            </span>
-          </div>
-          {(!isConfirm || canPerform) && <ChevronRightIcon />}
-        </ListItem>
-      ))}
-      {assignments.length === 0 && showTodoList && <p>You're all caught up!</p>}
-    </List>
-  </>
-);
-if (isConfirm) return <div>{todoContent}</div>;
-return <Card>{todoContent}</Card>;
-```
+### WORKLIST Render Path
+
+When `type === CONSTS.WORKLIST`, render a `Card` (class `psdk-todo`). When `showTodoList` is true, render a `psdk-todo-header` div containing an `Avatar` with `currentUserInitials`, an `h4` title (`psdk-todo-title`) showing `headerText`, and a `Badge` showing the total count — the badge must sit immediately next to the title. Below the header, render a `List` of the visible assignments (`bShowMore ? assignments.slice(0, 3) : assignments`), each as a `ListItem` keyed by `getAssignmentId(assignment)`, clickable via `clickGo(assignment)`, and disabled when `assignment.canPerform === false`; each item shows the assignment name in bold plus a subtitle line "In {assignment.name} {getDisplayId(assignment)} • {assignment.status} • Urgency {getPriority(assignment)}", followed by a `ChevronRightIcon`. Below the list, when the total count exceeds 3, render either a "Show more" button (when collapsed) or a "Show less" button (when expanded), wired to the corresponding toggle handlers.
+
+### TODO Render Path
+
+Build a `todoContent` fragment: when `showTodoList` is true, render a `psdk-todo-header` div containing only the `h4` title (`psdk-todo-title`) and a `Badge` showing `assignments.length` (no avatar in the header). Below the header, render a `List` of all `assignments`, each as a `ListItem` keyed by `getAssignmentId(assignment)`, clickable via `clickGo(assignment)`, and disabled when `assignment.canPerform === false`; each item shows an `Avatar` with `currentUserInitials`, the assignment name in bold plus a subtitle line "In {getDisplayId(assignment)} • Urgency {getPriority(assignment)}", and a `ChevronRightIcon` (hidden when `isConfirm` is true and `canPerform` is false). When there are zero assignments and `showTodoList` is true, show the text "You're all caught up!" instead. Finally: when `isConfirm` is true, render `todoContent` inside a plain `div` (no card wrapper); otherwise wrap it in a `Card`.
 
 ### Required CSS (create `ToDo.css`)
 
-```css
-.psdk-todo {
-  padding: 1rem;
-}
-.psdk-todo-header {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin-bottom: 1rem;
-}
-.psdk-todo-title {
-  margin: 0;
-  font-size: 1.125rem;
-  font-weight: 500;
-}
-/* Do NOT use flex: 1 on title — badge must sit immediately next to text */
-.psdk-todo-avatar {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background: #c6c6c6;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.8125rem;
-  font-weight: 600;
-  flex-shrink: 0;
-}
-.psdk-todo-row {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 0;
-  border-bottom: 1px solid #e0e0e0;
-  cursor: pointer;
-}
-.psdk-todo-row:hover {
-  background: #f4f4f4;
-}
-.psdk-todo-row--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-```
+Define `.psdk-todo` with `1rem` padding. Define `.psdk-todo-header` as a flex row with `0.75rem` gap and `1rem` bottom margin. Define `.psdk-todo-title` with no margin, `1.125rem` font size, and medium (500) font weight — do NOT apply `flex: 1` to it, since the badge must sit immediately next to the text. Define `.psdk-todo-avatar` as a `36px` circle (`border-radius: 50%`) with a gray background (`#c6c6c6`), centered content, `0.8125rem` font size, semi-bold (600) weight, and `flex-shrink: 0`. Define `.psdk-todo-row` as a flex row with `0.75rem` gap, `0.75rem 0` padding, a `1px solid #e0e0e0` bottom border, and a pointer cursor; on hover, give it a light gray background (`#f4f4f4`). Define a `.psdk-todo-row--disabled` modifier with `0.5` opacity and a `not-allowed` cursor.
 
 ## Behavioral Contract
 
@@ -269,17 +95,7 @@ return <Card>{todoContent}</Card>;
 
 **`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 }
-  )
-  ```
+- Fetch from `myWorkList.datapage` (e.g., `D_WorkList`) by calling `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
@@ -306,28 +122,7 @@ On item click:
 >
 > Using the wrong casing will pass `undefined` and produce "assignmentID is required parameter" error.
 
-```typescript
-const CONSTS = PCore.getConstants();
-const getAssignmentId = (assignment) => (type === CONSTS.TODO ? assignment.ID : assignment.id);
-
-function clickGo(assignment) {
-  const id = getAssignmentId(assignment);
-  let classname = assignment.classname || '';
-  if (!classname) classname = pConn.getCaseInfo().getClassName(); // fallback
-  const sTarget = pConn.getContainerName() || '';
-  const options: any = { containerName: sTarget || PCore.getConstants().APP.APP, channelName: '' };
-  if (sTarget === 'workarea') {
-    options.isActionFromToDoList = true;
-    options.target = '';
-    options.context = null;
-    options.isChild = assignment.isChild;
-  } else {
-    options.isActionFromToDoList = false;
-    options.target = sTarget;
-  }
-  pConn.getActionsApi().openAssignment(id, classname, options);
-}
-```
+Read `CONSTS = PCore.getConstants()` and define `getAssignmentId(assignment)` to return `assignment.ID` (uppercase) when `type === CONSTS.TODO`, otherwise `assignment.id` (lowercase). Then define `clickGo(assignment)`: resolve `id` via `getAssignmentId`; resolve `classname` from `assignment.classname`, falling back to `pConn.getCaseInfo().getClassName()` when empty; resolve `sTarget` from `pConn.getContainerName() || ''`; build `options = { containerName: sTarget || PCore.getConstants().APP.APP, channelName: '' }`; when `sTarget === 'workarea'`, additionally set `options.isActionFromToDoList = true`, `options.target = ''`, `options.context = null`, and `options.isChild = assignment.isChild`; otherwise set `options.isActionFromToDoList = false` and `options.target = sTarget`. Finally call `pConn.getActionsApi().openAssignment(id, classname, options)`.
 
 ### Assignment Item Rendering
 
@@ -335,17 +130,7 @@ function clickGo(assignment) {
 
 #### Helper functions (MUST include):
 
-```typescript
-const CONSTS = PCore.getConstants();
-const getAssignmentId = (assignment) => (type === CONSTS.TODO ? assignment.ID : assignment.id);
-const getDisplayId = (assignment) => {
-  const refKey = assignment.value || assignment.ID || assignment.id || '';
-  if (assignment.value) return refKey.substring(refKey.lastIndexOf(' ') + 1);
-  const parts = refKey.split('!')[0]?.split(' ');
-  return parts?.[2] || parts?.[parts.length - 1] || refKey;
-};
-const getPriority = (assignment) => (type === CONSTS.TODO ? assignment.urgency : assignment.priority);
-```
+Read `CONSTS = PCore.getConstants()`. Define `getAssignmentId(assignment)` to return `assignment.ID` (uppercase) when `type === CONSTS.TODO`, otherwise `assignment.id` (lowercase). Define `getDisplayId(assignment)`: resolve `refKey` from `assignment.value || assignment.ID || assignment.id || ''`; when `assignment.value` is present, return the substring of `refKey` after its last space; otherwise split `refKey` on `'!'` and take the first segment, split that on spaces into `parts`, and return `parts[2]` if present, else the last element of `parts`, else `refKey` itself. Define `getPriority(assignment)` to return `assignment.urgency` when `type === CONSTS.TODO`, otherwise `assignment.priority`.
 
 #### Data source:
 
@@ -385,7 +170,7 @@ Use prop data directly when available (`assignmentsSource`), only fetch for WORK
 
 ### Responsive Layout
 
-Use `useMediaQuery(theme.breakpoints.down('sm'))` (MUI) to detect mobile:
+Use the DS's responsive breakpoint utility or a CSS media query to detect mobile:
 
 - **Desktop:** Show avatar, name, status, priority, and arrow in a horizontal row.
 - **Mobile:** Stack or truncate elements for narrow display.
@@ -402,16 +187,7 @@ 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])
-  .join('')
-  .substring(0, 2)
-  .toUpperCase();
-```
+Extract initials from `PCore.getEnvironmentInfo().getOperatorName()`: split the operator name on spaces, take the first character of each word, join them together, take the first 2 characters, and uppercase the result.
 
 ## Visual Specifications
 
@@ -462,31 +238,24 @@ const initials = operatorName
 - `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>`
+- The DS's card, avatar, badge, list, button, snackbar/toast, and icon components.
+- The DS's responsive breakpoint utility or CSS media queries for mobile detection.
 
 ## 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:
+When implementing in a specific design system, map the following:
 
-- **ALWAYS check `package.json`** to identify the installed design system BEFORE writing render code
-- Import and use the DS's card/badge/icon/button components — do NOT fall back to plain HTML
+- **Card** → use the DS's card component for the widget container
+- **List** → use the DS's list or vertical stack component for assignment rows
+- **Badge** → use the DS's badge/count indicator component next to the title
+- **Snackbar/toast** → use the DS's notification/toast component for error messages
+- **Avatar** → use the DS's avatar component (or a styled circle with initials)
+- **Chevron icon** → use the DS's right-pointing arrow/chevron icon (not text `›`)
 - **WORKLIST and TODO MUST have separate render paths** — they have different header layouts and subtitle formats
 - **Badge/count MUST sit immediately next to the title** — do NOT use `flex: 1` on the title or push badge to far right
 - Show top 3 items by default — `bShowMore ? assignments.slice(0, 3) : assignments` controls the slice
-- Use the DS's chevron/arrow icon (not text `›`) for the row action indicator
 - `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()`

package/templates/react-sdk-reference/package.json

@@ -16,7 +16,7 @@
     "@mui/material": "^9.2.0",
     "@mui/styles": "^6.5.0",
     "@mui/x-date-pickers": "^9.9.0",
-    "@pega/auth": "file:pega-auth-0.2.42.tgz",
+    "@pega/auth": "file:pega-auth-0.2.44.tgz",
     "@pega/constellationjs": "file:pega-constellationjs-0.26.3-local.tgz",
     "@pega/sdk-react": "file:pega-sdk-react-0.1.0.tgz",
     "@pega/sdk-types": "file:pega-sdk-types-0.1.0.tgz",