@pega/sdk 0.0.1

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

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

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

@@ -0,0 +1,190 @@
+# 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()`

package/templates/react-sdk-reference/AGENTS.md

@@ -0,0 +1,59 @@
+# Agents
+
+AI assistant guide for React SDK Reference application.
+
+For complete rules, see [`.github/copilot-instructions.md`](.github/copilot-instructions.md).
+
+---
+
+## Purpose
+
+This is a **reference app** for Pega Infinity SDK. Customers clone it and replace the MUI-based sample components with their own design system. The SDK wiring (`@pega/sdk-react`, bootstrap, PConnect bridge) is infrastructure — only the UI layer is meant to be customized.
+
+---
+
+## Replaceable Component Directories
+
+```
+src/components/
+├── field/                  ← Form inputs (TextInput, Dropdown, Date, etc.)
+├── template/               ← Layouts (OneColumn, TwoColumn, Details, etc.)
+├── widget/                 ← Data widgets (ToDo, Attachment, CaseHistory, etc.)
+└── designSystemExtension/  ← Extended UI (AlertBanner, FieldGroup, etc.)
+```
+
+## Do Not Modify
+
+```
+src/MashupApp.tsx            ← Bootstrap/auth flow
+src/components/component-map.ts  ← Only add/remove entries, don't restructure
+src/components/infra/        ← SDK infrastructure
+src/components/helpers/      ← Shared utilities (event-utils, formatters)
+```
+
+---
+
+## Quick Commands
+
+```bash
+npm run dev       # Vite dev server (port 3500)
+npm run build     # Production build
+```
+
+---
+
+## Key Pattern
+
+Every replaceable component receives `getPConnect()` prop → extracts field state → renders UI → calls `handleEvent(actions, 'changeNblur', propName, value)` on blur to push changes back to Pega.
+
+---
+
+## Reference
+
+| Topic | File |
+|-------|------|
+| Full instructions | `.github/copilot-instructions.md` |
+| Field component skill | `.github/skills/field-components.md` |
+| Template component skill | `.github/skills/template-components.md` |
+| Widget component skill | `.github/skills/widget-components.md` |
+| DSE component skill | `.github/skills/design-system-extension.md` |

package/templates/react-sdk-reference/assets/icons/analytics-good-solid.svg

@@ -0,0 +1,3 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M41.8594 7.18437C37.0703 2.39531 31.3234 0 24.5219 0C17.7203 0 11.9734 2.39531 7.18437 7.18437C2.39531 11.9734 0 17.7203 0 24.5219C0 27.0125 0.382812 29.5984 1.24531 32.2812L1.4375 32.0891L11.7828 21.8406C12.2609 21.3625 12.6453 21.3625 13.1234 21.8406L20.4031 29.025L33.7172 15.7109H20.4031C19.7328 15.7109 19.35 15.4234 19.35 14.7531C19.35 13.9875 19.7328 13.6031 20.4031 13.6031H36.0156C36.1109 13.5078 36.3031 13.6031 36.5906 13.6984C36.8781 13.7937 37.0688 14.0812 37.1656 14.3687C37.2609 14.4641 37.2609 14.6562 37.2609 14.9438V30.3656C37.2609 31.1313 36.9734 31.5156 36.3031 31.5156C35.6328 31.5156 35.3453 31.1328 35.3453 30.3656V17.0516L21.0734 31.2281C20.5953 31.7062 20.1156 31.7062 19.6359 31.2281L12.4516 24.0438L2.10625 34.2922C3.92656 38.6984 6.89531 42.2422 11.0141 44.925C15.0375 47.7031 19.5391 49.0438 24.5203 49.0438C31.3203 49.0438 37.0687 46.6484 41.8578 41.8594C46.6469 37.0703 49.0422 31.3234 49.0422 24.5219C49.0422 17.7203 46.6469 11.9734 41.8578 7.18437H41.8594Z" fill="#C70BB5"/>
+</svg>

package/templates/react-sdk-reference/assets/icons/cart-solid.svg

@@ -0,0 +1,3 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.0422 12.9078V13.1L43.1031 34.7469C43.0078 35.225 42.7203 35.4172 42.2406 35.4172V35.4172L19.3484 37.1406L18.2953 39.3438H40.2297C40.9 39.3438 41.1875 39.6313 41.1875 40.3016V40.3016C41.1875 40.9719 40.9 41.3547 40.2297 41.3547V41.3547H16.6672C15.9969 41.3547 15.7094 40.9719 15.7094 40.3016V40.3016C15.7094 40.1094 15.7094 40.0141 15.8047 39.9188V39.9188L17.05 37.3328L16.7625 37.4281H16.6672C16.1891 37.4281 15.8047 37.1406 15.7094 36.6625V36.6625L8.2375 6.68125C8.14219 6.20313 7.75937 6.01094 7.27969 6.01094V6.01094H0.957812C0.2875 6.01094 0 5.72344 0 5.05313V5.05313C0 4.38281 0.2875 4 0.957812 4V4H7.27969C8.71719 4 9.675 4.76562 10.1531 6.20312V6.20312L11.5906 11.95C11.5906 11.8547 11.6859 11.8547 11.7828 11.8547V11.8547H48.0859C48.7563 11.8547 49.0438 12.2375 49.0438 12.9078V12.9078H49.0422ZM19.6355 43.272V43.272C19.0605 43.272 18.5824 43.4642 18.198 43.847C17.8137 44.2298 17.623 44.7095 17.623 45.1876V45.1876C17.623 45.7626 17.8152 46.2407 18.198 46.6251C18.5809 47.0095 19.0605 47.2001 19.6355 47.2001V47.2001C20.1137 47.2001 20.5934 47.0079 20.9762 46.6251C21.359 46.2423 21.5512 45.7626 21.5512 45.1876V45.1876C21.5512 44.7095 21.359 44.2298 20.9762 43.847C20.5934 43.4642 20.1137 43.272 19.6355 43.272ZM38.6969 43.8453C38.2188 43.4625 37.7391 43.2703 37.2594 43.2703C36.7797 43.2703 36.3016 43.4625 35.9187 43.8453C35.5359 44.2281 35.3438 44.7078 35.3438 45.1859V45.1859C35.3438 45.7609 35.5359 46.239 35.9187 46.6234C36.3016 47.0078 36.7812 47.1984 37.2594 47.1984C37.7375 47.1984 38.2172 47.0062 38.6969 46.6234C39.0797 46.2406 39.2719 45.7609 39.2719 45.1859V45.1859C39.2719 44.7078 39.0797 44.2281 38.6969 43.8453Z" fill="#C70BB5"/>
+</svg>

package/templates/react-sdk-reference/assets/icons/headset.svg

@@ -0,0 +1,3 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.5918 42.9016V47.0203H30.8402V42.9016H20.5918ZM8.14141 24.5094V34.7578C8.14141 35.4281 7.85391 35.7156 7.18359 35.7156H3.06484C2.39453 35.7156 2.01172 35.4281 2.01172 34.7578V24.5094C2.01172 23.8391 2.39453 23.4562 3.06484 23.4562H7.18359C7.85391 23.4562 8.14141 23.8391 8.14141 24.5094ZM8.14062 21.6359H2.01094C0.670312 22.114 0 23.0734 0 24.5094V34.7578C0 35.6203 0.2875 36.2906 0.957812 36.8656C1.53281 37.5359 2.20312 37.8234 3.06562 37.8234H7.18437C8.04688 37.8234 8.71719 37.5359 9.3875 36.8656C9.9625 36.2906 10.25 35.6203 10.25 34.7578V24.5094C10.25 23.0719 9.57969 22.114 8.14219 21.6359H8.14062ZM44.9227 24.5094V34.7578C44.9227 35.4281 44.6352 35.7156 43.9648 35.7156H39.8461C39.1758 35.7156 38.793 35.4281 38.793 34.7578V24.5094C38.793 23.8391 39.1758 23.4562 39.8461 23.4562H43.9648C44.6352 23.4562 44.9227 23.8391 44.9227 24.5094ZM45.0168 21.6359H38.8871C37.4496 22.114 36.7793 23.0734 36.7793 24.5094V34.7578C36.7793 35.6203 37.0668 36.2906 37.7371 36.8656C38.3121 37.5359 38.9824 37.8234 39.8449 37.8234H43.9637C44.8262 37.8234 45.4965 37.5359 46.1668 36.8656C46.7418 36.2906 47.0293 35.6203 47.0293 34.7578V24.5094C47.0293 23.1687 46.359 22.2109 45.0184 21.6359H45.0168ZM2.00938 22.4031H4.11719C4.40469 17.3266 6.41563 12.9203 10.1516 9.37656C13.8875 5.83281 18.2938 4.10781 23.4656 4.10781C28.6375 4.10781 33.0437 5.83125 36.7797 9.37656C40.5156 12.9219 42.5266 17.3266 42.8141 22.4031H44.825C44.5375 16.7516 42.3344 11.8672 38.2156 7.93906C34.0969 4.01094 29.1156 2 23.4641 2C17.7172 2 12.8313 4.01094 8.7125 7.93906C4.59375 11.8672 2.29531 16.7516 2.00781 22.4031H2.00938ZM29.1168 49.0313H28.6387H24.5199C23.8496 49.0313 23.4668 48.6484 23.4668 47.9781C23.4668 47.3078 23.8496 46.925 24.5199 46.925H28.6387C37.7387 46.925 43.2934 45.8719 45.4965 43.6688C46.5496 42.7109 47.0293 41.4656 47.0293 39.8375V29.5891C47.0293 28.9188 47.3168 28.5359 47.9871 28.5359C48.6574 28.5359 49.0402 28.9188 49.0402 29.5891V39.8375C49.0402 42.0406 48.3699 43.7641 47.0293 45.1063C44.348 47.6922 38.409 49.0328 29.1168 49.0328V49.0313Z" fill="#C70BB5"/>
+</svg>

package/templates/react-sdk-reference/assets/icons/mobile-phone-solid.svg

@@ -0,0 +1,3 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.7766 4H34.7C35.5625 4 36.2328 4.2875 36.7109 4.76562C37.1891 5.24375 37.4766 5.81875 37.4766 6.48906V42.6953C37.4766 43.3656 37.1891 43.9406 36.7109 44.4188C36.2328 44.8969 35.5609 45.1844 34.7 45.1844H14.7766C13.9141 45.1844 13.2437 44.8969 12.7656 44.4188C12.2875 43.9406 12 43.3656 12 42.6953V6.48906C12 5.81875 12.2875 5.24375 12.7656 4.76562C13.2437 4.2875 13.9156 4 14.7766 4C14.7766 4 14.7766 4 14.7766 4ZM33.55 7.92656L29.6234 8.02187C29.6234 8.5 29.4312 8.97969 29.0484 9.26719C28.6656 9.65 28.1859 9.84219 27.7078 9.84219H21.7688C21.2906 9.84219 20.8109 9.65 20.4281 9.26719C20.0453 8.97969 19.8531 8.50156 19.8531 8.02187L15.9266 7.92656C15.2562 7.92656 14.9688 8.21406 14.9688 8.88437V41.2594C14.9688 41.9297 15.2562 42.2172 15.9266 42.2172H33.5516C34.2219 42.2172 34.5094 41.9297 34.5094 41.2594V8.88437C34.5094 8.21406 34.2219 7.92656 33.5516 7.92656H33.55ZM26.7508 35.4172H22.7273C22.057 35.4172 21.7695 35.7047 21.7695 36.2797V36.375C21.7695 37.0453 22.057 37.3328 22.7273 37.3328H26.7508C27.4211 37.3328 27.7086 37.0453 27.7086 36.375V36.2797C27.7086 35.7047 27.4211 35.4172 26.7508 35.4172Z" fill="#C70BB5"/>
+</svg>

package/templates/react-sdk-reference/assets/icons/money-solid.svg

@@ -0,0 +1,3 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.0414 9.92812V36.3656C49.0414 37.0359 48.7539 37.4188 48.0836 37.4188C47.4133 37.4188 47.1258 37.0359 47.1258 36.3656V9.92812C47.1258 9.45 46.9336 8.97031 46.5508 8.49062C46.0727 8.10781 45.593 7.91562 45.1133 7.91562H4.88359C4.21328 7.91562 3.92578 7.62812 3.92578 6.95781C3.92578 6.2875 4.21328 6 4.88359 6H45.1133C46.1664 6 47.1242 6.38281 47.8914 7.15C48.6586 7.91719 49.0414 8.87344 49.0414 9.92812ZM45.1141 11.8438V39.3344C45.1141 39.8125 44.9219 40.2922 44.5391 40.675C44.1562 41.1531 43.6766 41.3453 43.1984 41.3453H1.91562C1.4375 41.3453 0.957812 41.1531 0.575 40.675C0.192187 40.2922 0 39.8125 0 39.3344V11.8438C0 11.3656 0.192187 10.8859 0.575 10.5031C0.957812 10.1203 1.4375 9.92813 1.91562 9.92813H43.1984C43.6766 9.92813 44.1562 10.1203 44.5391 10.5031C44.9219 10.8859 45.1141 11.3656 45.1141 11.8438ZM9.76797 16.825C9.76797 16.1547 9.48047 15.7719 8.81016 15.7719H4.88359C4.21328 15.7719 3.92578 16.1547 3.92578 16.825C3.92578 17.4953 4.21328 17.7828 4.88359 17.7828H8.81016C9.48047 17.7828 9.76797 17.4953 9.76797 16.825ZM29.4043 25.5422V25.6375V25.1594C29.4043 23.1484 28.734 21.5203 27.4887 20.0828C26.148 18.6453 24.5199 17.8797 22.6043 17.7844C20.5934 17.8797 18.9652 18.6469 17.7199 20.0828C16.3793 21.5203 15.709 23.1484 15.709 25.1594V25.6375V26.0203C15.709 28.0312 16.3793 29.6594 17.7199 31.0969C18.9652 32.5344 20.5934 33.3953 22.509 33.4922C24.5199 33.3969 26.1496 32.5344 27.4902 31.0969C28.7355 29.6594 29.4059 28.0312 29.4059 26.0203V25.5422H29.4043ZM40.2281 35.4078C40.8984 35.4078 41.1859 35.1203 41.1859 34.45C41.1859 33.7797 40.8984 33.4922 40.2281 33.4922H36.3016C35.6312 33.4922 35.3438 33.7797 35.3438 34.45C35.3438 35.1203 35.6312 35.4078 36.3016 35.4078H40.2281Z" fill="#C70BB5"/>
+</svg>

package/templates/react-sdk-reference/assets/icons/multi-device-solid.svg

@@ -0,0 +1,3 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M47.1297 25.5656H35.3484C34.7734 25.5656 34.2953 25.7578 33.9109 26.1406C33.5266 26.5234 33.3359 27.0031 33.3359 27.4812V47.1172C33.3359 47.5953 33.5281 48.075 33.9109 48.4578C34.2938 48.8406 34.7734 49.0328 35.3484 49.0328H47.1297C47.6078 49.0328 48.0875 48.8406 48.4703 48.4578C48.8531 48.075 49.0453 47.5953 49.0453 47.1172V27.4812C49.0453 27.0031 48.8531 26.5234 48.4703 26.1406C48.0875 25.7578 47.6078 25.5656 47.1297 25.5656ZM42.1488 45.2015H40.2332C39.5629 45.2015 39.2754 44.8187 39.2754 44.1484C39.2754 43.4781 39.5629 43.1906 40.2332 43.1906H42.1488C42.8191 43.1906 43.202 43.4781 43.202 44.1484C43.202 44.8187 42.8191 45.2015 42.1488 45.2015ZM1.91875 31.4078V4.97031C1.91875 4.3 2.30156 3.91719 2.97187 3.91719H42.1484C42.8187 3.91719 43.2016 4.3 43.2016 4.97031V22.5953C43.2016 23.2656 43.4891 23.5531 44.1594 23.5531C44.8297 23.5531 45.1172 23.2656 45.1172 22.5953V4.97031C45.1172 4.10781 44.8297 3.4375 44.2547 2.8625C43.6797 2.2875 43.0094 2 42.1469 2H2.97031C2.10781 2 1.4375 2.2875 0.8625 2.8625C0.2875 3.4375 0 4.10781 0 4.97031V38.3031C0 39.1656 0.2875 39.8359 0.8625 40.4109C1.4375 40.9859 2.10781 41.2734 2.97031 41.2734H17.625V47.1156H14.7516C14.0812 47.1156 13.6984 47.4031 13.6984 48.0734C13.6984 48.7437 14.0812 49.0312 14.7516 49.0312H30.3641C31.0344 49.0312 31.4172 48.7437 31.4172 48.0734C31.4172 47.4031 31.0344 47.1156 30.3641 47.1156H27.4906V41.2734H31.4172V31.4078H1.91562H1.91875ZM19.6387 47.1172V41.275H25.4809V47.1172H19.6387Z" fill="#C70BB5"/>
+</svg>

package/templates/react-sdk-reference/index.html

@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pega SDK React Portal — @pega/sdk-react</title>
+    <base href="/" />
+    <style>
+      body {
+        margin: 0;
+        font-family:
+          system-ui,
+          -apple-system,
+          sans-serif;
+      }
+      .loading-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+      }
+      .loading-text {
+        font-size: 18px;
+        color: #555;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outlet" style="width: 100%"></div>
+    <script
+      src="node_modules/@pega/constellationjs/dist/constellation-core-web.js"
+      type="text/javascript"
+    ></script>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

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

@@ -0,0 +1,52 @@
+{
+  "name": "@pega/react-sdk-reference",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^9.0.0",
+    "@mui/lab": "^9.0.0-beta.3",
+    "@mui/material": "^9.0.0",
+    "@mui/styles": "^6.5.0",
+    "@mui/x-date-pickers": "^9.2.0",
+    "@pega/auth": "file:pega-auth-0.2.42.tgz",
+    "@pega/constellationjs": "file:pega-constellationjs-0.26.2.tgz",
+    "@pega/sdk-react": "^0.1.0",
+    "@react-google-maps/api": "^2.20.8",
+    "@tinymce/tinymce-react": "^6.3.0",
+    "clsx": "^2.1.1",
+    "dayjs": "^1.11.20",
+    "downloadjs": "^1.4.7",
+    "fast-deep-equal": "^3.1.3",
+    "lodash.clonedeep": "^4.5.0",
+    "mui-tel-input": "^11.0.0",
+    "react": "^18.3.1",
+    "react-datepicker": "^9.1.0",
+    "react-dom": "^18.3.1",
+    "react-number-format": "^5.4.5",
+    "react-redux": "^9.3.0",
+    "react-router-dom": "^7.6.1",
+    "throttle-debounce": "^5.0.2"
+  },
+  "devDependencies": {
+    "@pega/pcore-pconnect-typedefs": "^4.1.0",
+    "@types/downloadjs": "^1.4.6",
+    "@types/lodash.clonedeep": "^4.5.9",
+    "@types/react": "^18.3.18",
+    "@types/react-datepicker": "^6.2.0",
+    "@types/react-dom": "^18.3.5",
+    "@types/react-redux": "^7.1.34",
+    "@types/throttle-debounce": "^5.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "~5.8.2",
+    "vite": "^6.3.5",
+    "vite-plugin-static-copy": "^2.3.0"
+  }
+}

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

@@ -0,0 +1,26 @@
+{
+  "serverConfig": {
+    "infinityRestServerUrl": "https://lab-16027-us-east-1.internal.pegalabs.io/prweb",
+    "appAlias": "MediaCo",
+    "sdkContentServerUrl": "",
+    "appPortal": "MediaCoSelfService",
+    "appMashupCaseType": "DIXL-MediaCo-Work-NewService",
+    "excludePortals": [
+      "pxExpress",
+      "Developer",
+      "pxPredictionStudio",
+      "pxAdminStudio",
+      "pyCaseWorker",
+      "pyCaseManager7"
+    ]
+  },
+  "authConfig": {
+    "authService": "pega",
+    "mashupClientId": "25795373220702300272",
+    "mashupUserIdentifier": "customer@mediaco",
+    "mashupPassword": "",
+    "portalClientId": "25795373220702300272",
+    "portalClientSecret": "",
+    "portalGrantType": ""
+  }
+}

package/templates/react-sdk-reference/src/AppSelector.tsx

@@ -0,0 +1,18 @@
+import { Route, Routes } from 'react-router-dom';
+import { MashupApp } from './MashupApp';
+import { PortalApp } from './PortalApp';
+
+function AppSelector() {
+  return (
+    <Routes>
+      <Route path='/portal' element={<PortalApp />} />
+      <Route path='/portal.html' element={<PortalApp />} />
+      <Route path='/embedded' element={<MashupApp />} />
+      <Route path='/embedded.html' element={<MashupApp />} />
+      <Route path='/' element={<MashupApp />} />
+      <Route path='*' element={<MashupApp />} />
+    </Routes>
+  );
+}
+
+export { AppSelector };

package/templates/react-sdk-reference/src/FallbackComponent.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+import { styles } from './MashupApp.styles';
+
+/**
+ * Generic Fallback Component.
+ * Renders any PConnect node as a styled block showing its type + props + children.
+ * In production, you'd replace this with real component implementations.
+ */
+function FallbackComponent({
+  componentName,
+  children,
+  ...props
+}: {
+  componentName?: string;
+  children?: ReactNode;
+  [key: string]: unknown;
+}) {
+  const displayProps = Object.fromEntries(
+    Object.entries(props).filter(
+      ([k]) =>
+        !['getPConnect', 'pConnect', 'fallback', 'componentRegistry'].includes(
+          k,
+        ) && typeof props[k] !== 'function',
+    ),
+  );
+
+  return (
+    <div style={styles.fallback.container}>
+      <div style={styles.fallback.label}>{componentName ?? 'Unknown'}</div>
+      {Object.keys(displayProps).length > 0 && (
+        <pre style={styles.fallback.props}>
+          {JSON.stringify(displayProps, null, 2)}
+        </pre>
+      )}
+      {children && <div style={styles.fallback.children}>{children}</div>}
+    </div>
+  );
+}
+
+export { FallbackComponent };