@pega/sdk 0.0.3 → 0.0.4

package/templates/react-sdk-reference/.claude/skills/template-skills/AppShell.md

@@ -18,14 +18,14 @@ The outermost container for the Pega SDK React app. Determines whether the app i
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `pages` | `array` | Yes | Array of portal page objects `{ name, pyLabel, linkUrl }` |
-| `caseTypes` | `array` | No | Fallback case types (overridden by data page fetch if empty) |
-| `portalName` | `string` | Yes | Portal identifier — determines WSS vs standard rendering |
-| `displayName` | `string` | No | Operator display name for avatar |
-| `getPConnect` | `function` | Yes | PConnect getter |
-| `children` | `ReactNode` | Yes | Main content area |
+| Prop          | Type        | Required | Description                                                  |
+| ------------- | ----------- | -------- | ------------------------------------------------------------ |
+| `pages`       | `array`     | Yes      | Array of portal page objects `{ name, pyLabel, linkUrl }`    |
+| `caseTypes`   | `array`     | No       | Fallback case types (overridden by data page fetch if empty) |
+| `portalName`  | `string`    | Yes      | Portal identifier — determines WSS vs standard rendering     |
+| `displayName` | `string`    | No       | Operator display name for avatar                             |
+| `getPConnect` | `function`  | Yes      | PConnect getter                                              |
+| `children`    | `ReactNode` | Yes      | Main content area                                            |
 
 ## Behavioral Contract
 
@@ -80,6 +80,7 @@ The outermost container for the Pega SDK React app. Determines whether the app i
 ## Visual Specifications
 
 **CSS-only implementation notes:**
+
 - Shell wrapper: `display: flex; flex-direction: column; height: 100vh`.
 - Nav bar: `flex: 0 0 auto` (fixed height).
 - Alert banner: `flex: 0 0 auto` (shown below nav, pushes content down).
@@ -108,15 +109,16 @@ The outermost container for the Pega SDK React app. Determines whether the app i
 
 Listed design systems are examples only.
 
-| Design System | Nav Bar | Alert Banner | Shell Layout |
-|---|---|---|---|
-| Default (CSS only) | `<header>` + custom nav | `<div role='alert'>` | CSS flexbox column |
-| MUI | `<AppBar>` + `<Toolbar>` | `<Alert>` | `<Box display='flex' flexDirection='column'>` |
-| Ant Design | `<Layout.Header>` | `<Alert>` | `<Layout>` |
-| Chakra UI | `<Box as='header'>` | `<Alert>` | `<Flex direction='column'>` |
-| Shadcn/ui | Custom header | `<Alert>` | Tailwind `flex flex-col h-screen` |
+| Design System      | Nav Bar                  | Alert Banner         | Shell Layout                                  |
+| ------------------ | ------------------------ | -------------------- | --------------------------------------------- |
+| Default (CSS only) | `<header>` + custom nav  | `<div role='alert'>` | CSS flexbox column                            |
+| MUI                | `<AppBar>` + `<Toolbar>` | `<Alert>`            | `<Box display='flex' flexDirection='column'>` |
+| Ant Design         | `<Layout.Header>`        | `<Alert>`            | `<Layout>`                                    |
+| Chakra UI          | `<Box as='header'>`      | `<Alert>`            | `<Flex direction='column'>`                   |
+| Shadcn/ui          | Custom header            | `<Alert>`            | Tailwind `flex flex-col h-screen`             |
 
 When implementing in a specific design system:
+
 - WSS vs portal detection must remain — the nav bar component differs for each
 - Logo URL must be loaded asynchronously from `PCore.getAssetLoader()`
 - `NavContext.Provider` must wrap children so descendant nav-aware components can access links

package/templates/react-sdk-reference/.claude/skills/template-skills/BannerPage.md

@@ -18,16 +18,16 @@ A thin template wrapper that delegates entirely to the `Banner` DSE component. T
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode[]` | Yes | At least 2 children — `[0]` → left (`a`) slot, `[1]` → right (`b`) slot |
-| `layout` | `string` | No | Column layout variant for `Banner`: `'two-column'` (default), `'narrow-wide'`, `'wide-narrow'` |
-| `heading` | `string` | No | Hero section heading text. Default `''` |
-| `message` | `string` | No | Hero section message/subtitle. Default `''` |
-| `imageTheme` | `string` | No | Banner image theme (e.g., `'light'`). Default `'light'` |
-| `backgroundImage` | `string` | No | URL of the background image for the hero. Default `''` |
-| `backgroundColor` | `string` | No | Background color for the hero. Default `''` |
-| `tintImage` | `boolean` | No | Whether to tint the background image. Default `false` |
+| Prop              | Type          | Required | Description                                                                                    |
+| ----------------- | ------------- | -------- | ---------------------------------------------------------------------------------------------- |
+| `children`        | `ReactNode[]` | Yes      | At least 2 children — `[0]` → left (`a`) slot, `[1]` → right (`b`) slot                        |
+| `layout`          | `string`      | No       | Column layout variant for `Banner`: `'two-column'` (default), `'narrow-wide'`, `'wide-narrow'` |
+| `heading`         | `string`      | No       | Hero section heading text. Default `''`                                                        |
+| `message`         | `string`      | No       | Hero section message/subtitle. Default `''`                                                    |
+| `imageTheme`      | `string`      | No       | Banner image theme (e.g., `'light'`). Default `'light'`                                        |
+| `backgroundImage` | `string`      | No       | URL of the background image for the hero. Default `''`                                         |
+| `backgroundColor` | `string`      | No       | Background color for the hero. Default `''`                                                    |
+| `tintImage`       | `boolean`     | No       | Whether to tint the background image. Default `false`                                          |
 
 ## Behavioral Contract
 
@@ -45,10 +45,12 @@ A thin template wrapper that delegates entirely to the `Banner` DSE component. T
 This component has no independent visual output — all visual behavior is defined by the `Banner` DSE component. See [`design-system-extension-skills/Banner.md`](../design-system-extension-skills/Banner.md) for full visual specs.
 
 Key visual behaviors inherited from `Banner`:
+
 - Hero: full-width background image section, height `19rem`, centered title and message overlay
 - Content area: two-column grid below the hero, column widths driven by `variant`/`layout`
 
 **CSS-only implementation notes:**
+
 - This template creates no CSS of its own — implement it as a pure pass-through to `Banner`.
 - The `layout` prop maps directly to `Banner`'s `variant` prop.
 - `heading` → `Banner.banner.title`, `message` → `Banner.banner.message`.
@@ -70,14 +72,15 @@ Key visual behaviors inherited from `Banner`:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
+| Design System      | Recommended Component                                                |
+| ------------------ | -------------------------------------------------------------------- |
 | Default (CSS only) | Pass-through to `Banner` — implement Banner's CSS hero + grid layout |
-| MUI | Pass-through to `Banner` (MUI-based) |
-| Ant Design | Pass-through to `Banner` (Ant-based) |
-| Chakra UI | Pass-through to `Banner` (Chakra-based) |
-| Shadcn/ui | Pass-through to `Banner` (Shadcn-based) |
+| MUI                | Pass-through to `Banner` (MUI-based)                                 |
+| Ant Design         | Pass-through to `Banner` (Ant-based)                                 |
+| Chakra UI          | Pass-through to `Banner` (Chakra-based)                              |
+| Shadcn/ui          | Pass-through to `Banner` (Shadcn-based)                              |
 
 When implementing in a specific design system:
+
 - `BannerPage` is always a thin wrapper — implement `Banner` first, then `BannerPage` simply delegates to it
 - Prop mapping: `layout` → `variant`, `heading` → `banner.title`, `message` → `banner.message`, `backgroundImage` → `banner.backgroundImage`

package/templates/react-sdk-reference/.claude/skills/template-skills/CaseSummary.md

@@ -18,12 +18,12 @@ Displays a case's key summary data in a structured summary panel. Primary fields
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode[]` | No | Region children when fields come from PConnect metadata |
-| `arPrimaryFields` | `array` | No | Array of primary field objects (direct prop) |
-| `arSecondaryFields` | `array` | No | Array of secondary field objects (direct prop) |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop                | Type          | Required | Description                                             |
+| ------------------- | ------------- | -------- | ------------------------------------------------------- |
+| `children`          | `ReactNode[]` | No       | Region children when fields come from PConnect metadata |
+| `arPrimaryFields`   | `array`       | No       | Array of primary field objects (direct prop)            |
+| `arSecondaryFields` | `array`       | No       | Array of secondary field objects (direct prop)          |
+| `getPConnect`       | `function`    | Yes      | PConnect getter                                         |
 
 ## Behavioral Contract
 
@@ -32,10 +32,12 @@ Displays a case's key summary data in a structured summary panel. Primary fields
 Two modes — prefer direct props if provided:
 
 **Mode A — Direct props:**
+
 - `arPrimaryFields` and `arSecondaryFields` are passed directly.
 - Call `prepareCaseSummaryData(primaryFields, secondaryFields, getPConnect)` to localize values.
 
 **Mode B — Child extraction:**
+
 - Extract primary and secondary regions from `children` by type/name matching.
 - Primary region: first region child (or `type === 'Region' && name === 'Primary'`).
 - Secondary region: second region child (or `type === 'Region' && name === 'Secondary'`).
@@ -45,6 +47,7 @@ Two modes — prefer direct props if provided:
 ### `prepareCaseSummaryData(primaryFields, secondaryFields, getPConnect)`
 
 Helper that:
+
 1. Iterates each field in both arrays.
 2. Localizes the field value via `PCore.getLocaleUtils().getLocaleValue(value, classID, value)`.
 3. Returns `{ arPrimaryFields: localizedPrimary, arSecondaryFields: localizedSecondary }`.
@@ -52,6 +55,7 @@ Helper that:
 ### Render
 
 Delegates entirely to `<CaseSummaryFields>` DSE component, passing:
+
 - `arPrimaryFields` — array of `{ name, value }` objects for primary display
 - `arSecondaryFields` — array of `{ name, value, displayLabel }` objects for secondary display
 
@@ -62,6 +66,7 @@ Delegates entirely to `<CaseSummaryFields>` DSE component, passing:
 - Secondary fields: label + value pairs.
 
 **CSS-only implementation notes (for `CaseSummaryFields` wrapper):**
+
 - Container: `display: flex; flex-direction: column; gap: 8px`.
 - Primary field value: `font-size: 1rem; font-weight: 600`.
 - Secondary field row: `display: flex; gap: 4px; font-size: 0.875rem`.
@@ -86,15 +91,16 @@ Delegates entirely to `<CaseSummaryFields>` DSE component, passing:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Approach |
-|---|---|
-| Default (CSS only) | Flexbox column with CSS-styled field rows |
-| MUI | `<Typography>` variants for primary/secondary text |
-| Ant Design | `<Descriptions>` with `bordered={false}` |
-| Chakra UI | `<VStack>` with `<Text>` variants |
-| Shadcn/ui | Custom `<dl>/<dt>/<dd>` or card |
+| Design System      | Recommended Approach                               |
+| ------------------ | -------------------------------------------------- |
+| Default (CSS only) | Flexbox column with CSS-styled field rows          |
+| MUI                | `<Typography>` variants for primary/secondary text |
+| Ant Design         | `<Descriptions>` with `bordered={false}`           |
+| Chakra UI          | `<VStack>` with `<Text>` variants                  |
+| Shadcn/ui          | Custom `<dl>/<dt>/<dd>` or card                    |
 
 When implementing in a specific design system:
+
 - Always localize field values before display — use `PCore.getLocaleUtils().getLocaleValue()`
 - `CaseSummaryFields` is a DSE component — implement it separately and call it from here
 - Primary fields have no labels; secondary fields have labels

package/templates/react-sdk-reference/.claude/skills/template-skills/CaseView.md

@@ -20,17 +20,18 @@ The primary case workspace template. Extracts named regions from PConnect childr
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode[]` | Yes | Named region children (summary, stages, todo, utilities, tabs) |
-| `displayOnlyFA` | `boolean` | No | If true, renders only the to-do region (focused action mode) |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop            | Type          | Required | Description                                                    |
+| --------------- | ------------- | -------- | -------------------------------------------------------------- |
+| `children`      | `ReactNode[]` | Yes      | Named region children (summary, stages, todo, utilities, tabs) |
+| `displayOnlyFA` | `boolean`     | No       | If true, renders only the to-do region (focused action mode)   |
+| `getPConnect`   | `function`    | Yes      | PConnect getter                                                |
 
 ## Behavioral Contract
 
 ### Region Extraction
 
 Use `getRawMetadata()` to access `children` with `type` and `name` metadata. Extract by:
+
 - **Summary region:** `type === 'Region' && name === 'Summary'`
 - **Stages region:** `type === 'Region' && name === 'Stages'`
 - **ToDo region:** `type === 'Region' && name === 'ToDo'`
@@ -48,6 +49,7 @@ Render each region as a React child element using `createElement(PConnectCompone
 ### displayOnlyFA Mode
 
 If `displayOnlyFA === true`:
+
 - Render only the ToDo region, centered.
 - Skip summary, stages, tabs, utilities rendering.
 
@@ -73,13 +75,14 @@ If `displayOnlyFA === true`:
  ToDo
 ```
 
-| Column | xs | Contents |
-|--------|----|----------|
-| Left | 3 | Summary, Stages, ToDo regions |
-| Center | 6 | Tabs region (deferred content) |
-| Right | 3 | Utilities region |
+| Column | xs  | Contents                       |
+| ------ | --- | ------------------------------ |
+| Left   | 3   | Summary, Stages, ToDo regions  |
+| Center | 6   | Tabs region (deferred content) |
+| Right  | 3   | Utilities region               |
 
 **CSS-only implementation notes:**
+
 - Outer grid: `display: grid; grid-template-columns: 25% 50% 25%; gap: 1rem`.
 - Left column: `display: flex; flex-direction: column; gap: 0.5rem`.
 - Center column: `overflow: hidden`.
@@ -104,10 +107,12 @@ If `displayOnlyFA === true`:
 ### ObjectPage
 
 `ObjectPage` is registered as:
+
 ```tsx
 // packages/sdk-react/src/components/template/ObjectPage/index.tsx
 export { default } from '../CaseView';
 ```
+
 - No separate implementation needed.
 - In `component-map.ts`, register `ObjectPage` key pointing to the same component as `CaseView`.
 
@@ -117,15 +122,16 @@ export { default } from '../CaseView';
 
 Listed design systems are examples only.
 
-| Design System | Grid | Sidebar | Deferred Tabs |
-|---|---|---|---|
-| Default (CSS only) | CSS Grid 25/50/25 | `<aside>` | Intersection Observer lazy load |
-| MUI | `<Grid container>` with `<Grid size={{ xs: 3/6/3 }}>` | `<Box>` | MUI `<Tabs>` + DeferLoad |
-| Ant Design | `<Row><Col span={6/12/6}>` | `<Sider>` | `<Tabs>` lazy |
-| Chakra UI | `<Grid templateColumns='1fr 2fr 1fr'>` | `<Box>` | Custom lazy tabs |
-| Shadcn/ui | Tailwind `grid grid-cols-[1fr_2fr_1fr]` | `<aside>` | Custom |
+| Design System      | Grid                                                  | Sidebar   | Deferred Tabs                   |
+| ------------------ | ----------------------------------------------------- | --------- | ------------------------------- |
+| Default (CSS only) | CSS Grid 25/50/25                                     | `<aside>` | Intersection Observer lazy load |
+| MUI                | `<Grid container>` with `<Grid size={{ xs: 3/6/3 }}>` | `<Box>`   | MUI `<Tabs>` + DeferLoad        |
+| Ant Design         | `<Row><Col span={6/12/6}>`                            | `<Sider>` | `<Tabs>` lazy                   |
+| Chakra UI          | `<Grid templateColumns='1fr 2fr 1fr'>`                | `<Box>`   | Custom lazy tabs                |
+| Shadcn/ui          | Tailwind `grid grid-cols-[1fr_2fr_1fr]`               | `<aside>` | Custom                          |
 
 When implementing in a specific design system:
+
 - `displayOnlyFA` must completely bypass the grid — render only ToDo region
 - Region extraction by metadata name is required — do not assume positional ordering
 - Deferred loading is mandatory for performance — tab content must not all load at once

package/templates/react-sdk-reference/.claude/skills/template-skills/CaseViewActionsMenu.md

@@ -18,13 +18,13 @@ Renders a button that opens a dropdown menu containing all available case action
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `localActions` | `array` | No | Array of `{ ID, name }` local action objects |
-| `processActions` | `array` | No | Array of `{ ID, name }` process action objects |
-| `caseTypeID` | `string` | Yes | Case type identifier for label localization |
-| `caseTypeName` | `string` | Yes | Case type display name for label localization |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop             | Type       | Required | Description                                    |
+| ---------------- | ---------- | -------- | ---------------------------------------------- |
+| `localActions`   | `array`    | No       | Array of `{ ID, name }` local action objects   |
+| `processActions` | `array`    | No       | Array of `{ ID, name }` process action objects |
+| `caseTypeID`     | `string`   | Yes      | Case type identifier for label localization    |
+| `caseTypeName`   | `string`   | Yes      | Case type display name for label localization  |
+| `getPConnect`    | `function` | Yes      | PConnect getter                                |
 
 ## Behavioral Contract
 
@@ -36,6 +36,7 @@ Renders a button that opens a dropdown menu containing all available case action
 ### Menu Items
 
 The menu combines:
+
 1. **Local actions** — each item triggers `getPConnect().getActionsApi().openLocalAction(action.ID, { caseID: getPConnect().getCaseInfo().getID() })`.
 2. **Process actions** — each item triggers `getPConnect().getActionsApi().openProcessAction(action.ID, { ... })`.
 
@@ -44,9 +45,11 @@ If both groups exist, render a divider between them.
 ### Localized Action Labels
 
 For localized case type context:
+
 ```
 localeKey = `${caseTypeID}!CASE!${caseTypeName.toUpperCase()}`
 ```
+
 Action name localization: `PCore.getLocaleUtils().getLocaleValue(action.name, localeKey, action.name)`.
 
 ### Process Action Error Handling
@@ -65,21 +68,22 @@ Action name localization: `PCore.getLocaleUtils().getLocaleValue(action.name, lo
 
 ### Button
 
-| Property | Value |
-|----------|-------|
-| Label | Localized `"Actions"` |
-| Variant | Outlined or secondary |
-| Icon | Dropdown chevron or expand_more |
+| Property | Value                           |
+| -------- | ------------------------------- |
+| Label    | Localized `"Actions"`           |
+| Variant  | Outlined or secondary           |
+| Icon     | Dropdown chevron or expand_more |
 
 ### Menu
 
-| Property | Value |
-|----------|-------|
-| Position | Anchored below the button |
-| Divider | Between local and process action groups |
-| Item height | Standard menu item height |
+| Property    | Value                                   |
+| ----------- | --------------------------------------- |
+| Position    | Anchored below the button               |
+| Divider     | Between local and process action groups |
+| Item height | Standard menu item height               |
 
 **CSS-only implementation notes:**
+
 - Button: `padding: 6px 12px; border: 1px solid var(--app-primary-color); border-radius: 4px; cursor: pointer`.
 - Dropdown menu: `position: absolute; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.2); border-radius: 4px; min-width: 160px; z-index: 1000`.
 - Menu item: `padding: 8px 16px; cursor: pointer`. Hover: `background: var(--hover-bg)`.
@@ -87,11 +91,11 @@ Action name localization: `PCore.getLocaleUtils().getLocaleValue(action.name, lo
 
 ### Snackbar Toast
 
-| Property | Value |
-|----------|-------|
-| Position | Bottom-center or bottom-right |
-| Auto-hide | 3000ms |
-| Severity | Error (red) |
+| Property  | Value                         |
+| --------- | ----------------------------- |
+| Position  | Bottom-center or bottom-right |
+| Auto-hide | 3000ms                        |
+| Severity  | Error (red)                   |
 
 ## Edge Cases & Special Logic
 
@@ -112,15 +116,16 @@ Action name localization: `PCore.getLocaleUtils().getLocaleValue(action.name, lo
 
 Listed design systems are examples only.
 
-| Design System | Button | Menu | Toast |
-|---|---|---|---|
-| Default (CSS only) | `<button>` + custom dropdown | `<ul>/<li>` with CSS | Custom toast overlay |
-| MUI | `<Button>` + `<Menu>/<MenuItem>` | MUI Menu | `<Snackbar>/<Alert>` |
-| Ant Design | `<Dropdown menu={{ items }}>` | Ant Dropdown | `message.error()` |
-| Chakra UI | `<Menu>/<MenuButton>/<MenuList>` | Chakra Menu | `useToast()` |
-| Shadcn/ui | `<DropdownMenu>/<DropdownMenuTrigger>` | Shadcn DropdownMenu | `<Toaster>` + `toast.error()` |
+| Design System      | Button                                 | Menu                 | Toast                         |
+| ------------------ | -------------------------------------- | -------------------- | ----------------------------- |
+| Default (CSS only) | `<button>` + custom dropdown           | `<ul>/<li>` with CSS | Custom toast overlay          |
+| MUI                | `<Button>` + `<Menu>/<MenuItem>`       | MUI Menu             | `<Snackbar>/<Alert>`          |
+| Ant Design         | `<Dropdown menu={{ items }}>`          | Ant Dropdown         | `message.error()`             |
+| Chakra UI          | `<Menu>/<MenuButton>/<MenuList>`       | Chakra Menu          | `useToast()`                  |
+| Shadcn/ui          | `<DropdownMenu>/<DropdownMenuTrigger>` | Shadcn DropdownMenu  | `<Toaster>` + `toast.error()` |
 
 When implementing in a specific design system:
+
 - Local vs process action distinction must be preserved — they call different APIs
 - Localized labels via `localeKey = ${caseTypeID}!CASE!${caseTypeName.toUpperCase()}`
 - Process action errors must be surfaced via a dismissible toast

package/templates/react-sdk-reference/.claude/skills/template-skills/Confirmation.md

@@ -18,10 +18,10 @@ Displayed after a case or assignment is submitted. Shows the confirmation view (
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode[]` | Yes | Region children: `[0]` = ToDo region, `[1]` = Details region (when available) |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop          | Type          | Required | Description                                                                   |
+| ------------- | ------------- | -------- | ----------------------------------------------------------------------------- |
+| `children`    | `ReactNode[]` | Yes      | Region children: `[0]` = ToDo region, `[1]` = Details region (when available) |
+| `getPConnect` | `function`    | Yes      | PConnect getter                                                               |
 
 ## Behavioral Contract
 
@@ -56,13 +56,14 @@ Displayed after a case or assignment is submitted. Shows the confirmation view (
 
 ### Confirm View
 
-| Element | Description |
-|---------|-------------|
-| Confirmation header | Success icon + heading text |
-| Details section | Optional — rendered below confirmation header |
-| Done button | Primary button, bottom of the form |
+| Element             | Description                                   |
+| ------------------- | --------------------------------------------- |
+| Confirmation header | Success icon + heading text                   |
+| Details section     | Optional — rendered below confirmation header |
+| Done button         | Primary button, bottom of the form            |
 
 **CSS-only implementation notes:**
+
 - Confirm view: `display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 2rem`.
 - Success icon: large checkmark or success indicator, centered.
 - Confirmation heading: `font-size: 1.5rem; font-weight: 600; text-align: center`.
@@ -93,15 +94,16 @@ Displayed after a case or assignment is submitted. Shows the confirmation view (
 
 Listed design systems are examples only.
 
-| Design System | Success Indicator | Done Button | Layout |
-|---|---|---|---|
-| Default (CSS only) | CSS checkmark SVG | `<button class='primary'>` | Centered flexbox column |
-| MUI | `<CheckCircleIcon>` | `<Button variant='contained'>` | `<Box display='flex' flexDirection='column'>` |
-| Ant Design | `<Result status='success'>` | `<Button type='primary'>` | Ant Result component |
-| Chakra UI | `<CheckCircleIcon>` + `<Text>` | `<Button colorScheme='blue'>` | `<VStack>` |
-| Shadcn/ui | Custom icon + `<h2>` | `<Button>` | Tailwind centered div |
+| Design System      | Success Indicator              | Done Button                    | Layout                                        |
+| ------------------ | ------------------------------ | ------------------------------ | --------------------------------------------- |
+| Default (CSS only) | CSS checkmark SVG              | `<button class='primary'>`     | Centered flexbox column                       |
+| MUI                | `<CheckCircleIcon>`            | `<Button variant='contained'>` | `<Box display='flex' flexDirection='column'>` |
+| Ant Design         | `<Result status='success'>`    | `<Button type='primary'>`      | Ant Result component                          |
+| Chakra UI          | `<CheckCircleIcon>` + `<Text>` | `<Button colorScheme='blue'>`  | `<VStack>`                                    |
+| Shadcn/ui          | Custom icon + `<h2>`           | `<Button>`                     | Tailwind centered div                         |
 
 When implementing in a specific design system:
+
 - Done button must check remaining `toDoAssignments` before deciding whether to show ToDo view or close
 - `CLOSE_CONFIRM_VIEW` publish must happen only after confirming no assignments remain
 - `showDetails` check must guard `children[1]` access

package/templates/react-sdk-reference/.claude/skills/template-skills/DataReference.md

@@ -18,44 +18,45 @@ Renders a data reference field that can be displayed as a dropdown, autocomplete
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `label` | `string` | Yes | Field label |
-| `displayAs` | `string` | Yes | UI variant: `'dropdown'`, `'autocomplete'`, `'checkbox'`, `'radiobutton'`, `'listview'`, `'searchbox'` |
-| `selectionMode` | `string` | Yes | `'single'` or `'multi'` |
-| `displayMode` | `string` | No | `'DISPLAY_ONLY'` for read-only rendering |
-| `readOnly` | `boolean` | No | Alternative read-only flag |
-| `ruleClass` | `string` | Yes | Data page class reference |
-| `dataRelationship` | `string` | No | Relationship type |
-| `isDDSourceDeferred` | `boolean` | No | Whether data source is loaded asynchronously |
-| `parameters` | `object` | No | Parameters passed to the data page for deferred sources |
-| `allowSearch` | `boolean` | No | Show search input inside dropdown/autocomplete |
-| `searchIcon` | `boolean` | No | Show search icon in the field |
-| `numCols` | `string` | No | Column count for checkbox/radiobutton layouts: `'1'`, `'2'`, `'3'` |
-| `listType` | `string` | No | `'associated'` or `'datapage'` |
-| `fieldMetadata` | `object` | No | Extra field-level metadata |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop                 | Type       | Required | Description                                                                                            |
+| -------------------- | ---------- | -------- | ------------------------------------------------------------------------------------------------------ |
+| `label`              | `string`   | Yes      | Field label                                                                                            |
+| `displayAs`          | `string`   | Yes      | UI variant: `'dropdown'`, `'autocomplete'`, `'checkbox'`, `'radiobutton'`, `'listview'`, `'searchbox'` |
+| `selectionMode`      | `string`   | Yes      | `'single'` or `'multi'`                                                                                |
+| `displayMode`        | `string`   | No       | `'DISPLAY_ONLY'` for read-only rendering                                                               |
+| `readOnly`           | `boolean`  | No       | Alternative read-only flag                                                                             |
+| `ruleClass`          | `string`   | Yes      | Data page class reference                                                                              |
+| `dataRelationship`   | `string`   | No       | Relationship type                                                                                      |
+| `isDDSourceDeferred` | `boolean`  | No       | Whether data source is loaded asynchronously                                                           |
+| `parameters`         | `object`   | No       | Parameters passed to the data page for deferred sources                                                |
+| `allowSearch`        | `boolean`  | No       | Show search input inside dropdown/autocomplete                                                         |
+| `searchIcon`         | `boolean`  | No       | Show search icon in the field                                                                          |
+| `numCols`            | `string`   | No       | Column count for checkbox/radiobutton layouts: `'1'`, `'2'`, `'3'`                                     |
+| `listType`           | `string`   | No       | `'associated'` or `'datapage'`                                                                         |
+| `fieldMetadata`      | `object`   | No       | Extra field-level metadata                                                                             |
+| `getPConnect`        | `function` | Yes      | PConnect getter                                                                                        |
 
 ## Behavioral Contract
 
 ### Read-Only Routing
 
 If `displayMode === 'DISPLAY_ONLY'` or `readOnly === true`:
+
 - `selectionMode === 'single'` → render `<SingleReferenceReadOnly />`.
 - `selectionMode === 'multi'` → render `<MultiReferenceReadOnly />`.
 - Both receive all relevant props plus `getPConnect`.
 
 ### Edit Routing (by `displayAs`)
 
-| `displayAs` | Rendered component |
-|-------------|--------------------|
-| `'dropdown'` | Registered `Dropdown` field component |
+| `displayAs`      | Rendered component                        |
+| ---------------- | ----------------------------------------- |
+| `'dropdown'`     | Registered `Dropdown` field component     |
 | `'autocomplete'` | Registered `AutoComplete` field component |
-| `'checkbox'` | Registered `CheckboxGroup` with `numCols` |
-| `'radiobutton'` | Registered `RadioButtons` with `numCols` |
-| `'listview'` | Inline `ListView` sub-component |
-| `'searchbox'` | Inline `SearchForm` sub-component |
-| Default | `Dropdown` |
+| `'checkbox'`     | Registered `CheckboxGroup` with `numCols` |
+| `'radiobutton'`  | Registered `RadioButtons` with `numCols`  |
+| `'listview'`     | Inline `ListView` sub-component           |
+| `'searchbox'`    | Inline `SearchForm` sub-component         |
+| Default          | `Dropdown`                                |
 
 ### Deferred Data Source (`isDDSourceDeferred === true`)
 
@@ -71,6 +72,7 @@ If `displayMode === 'DISPLAY_ONLY'` or `readOnly === true`:
 ### SearchForm Sub-Component
 
 When `displayAs === 'searchbox'`, renders an inline `<SearchForm>` sub-component that:
+
 1. Shows a text input with search icon.
 2. On submit: calls `getPConnect().getListActions().search(searchText)`.
 3. Renders the search results list below the input using `buildView`.
@@ -78,6 +80,7 @@ When `displayAs === 'searchbox'`, renders an inline `<SearchForm>` sub-component
 ## Visual Specifications
 
 **CSS-only implementation notes:**
+
 - Wrapper: `display: flex; flex-direction: column; gap: 4px`.
 - Label: `font-size: 0.875rem; font-weight: 500; margin-bottom: 4px`.
 - Dropdown/Autocomplete: standard select input, full-width.
@@ -106,15 +109,16 @@ When `displayAs === 'searchbox'`, renders an inline `<SearchForm>` sub-component
 
 Listed design systems are examples only.
 
-| Design System | Dropdown | Autocomplete | Checkbox Group | Radio Group |
-|---|---|---|---|---|
-| Default (CSS only) | `<select>` | Custom combobox | `<input type='checkbox'>` list | `<input type='radio'>` list |
-| MUI | `<Select>/<MenuItem>` | `<Autocomplete>` | `<FormGroup><Checkbox>` | `<RadioGroup><Radio>` |
-| Ant Design | `<Select>` | `<AutoComplete>` | `<Checkbox.Group>` | `<Radio.Group>` |
-| Chakra UI | `<Select>` | Custom | `<CheckboxGroup>` | `<RadioGroup>` |
-| Shadcn/ui | `<Select>` + combobox | `<Combobox>` | custom | `<RadioGroup>` |
+| Design System      | Dropdown              | Autocomplete     | Checkbox Group                 | Radio Group                 |
+| ------------------ | --------------------- | ---------------- | ------------------------------ | --------------------------- |
+| Default (CSS only) | `<select>`            | Custom combobox  | `<input type='checkbox'>` list | `<input type='radio'>` list |
+| MUI                | `<Select>/<MenuItem>` | `<Autocomplete>` | `<FormGroup><Checkbox>`        | `<RadioGroup><Radio>`       |
+| Ant Design         | `<Select>`            | `<AutoComplete>` | `<Checkbox.Group>`             | `<Radio.Group>`             |
+| Chakra UI          | `<Select>`            | Custom           | `<CheckboxGroup>`              | `<RadioGroup>`              |
+| Shadcn/ui          | `<Select>` + combobox | `<Combobox>`     | custom                         | `<RadioGroup>`              |
 
 When implementing in a specific design system:
+
 - Always check `displayMode`/`readOnly` first and route to read-only components before rendering editable variants
 - Deferred loading must be handled — show skeleton/spinner until data is ready
 - `numCols` applies to checkbox and radiobutton layouts only