@pega/sdk 0.0.2 → 0.0.4

package/templates/react-sdk-reference/.github/skills/run-and-verify.md

@@ -24,6 +24,7 @@ npm run build
 ```
 
 ### What to check:
+
 - Zero TypeScript errors
 - Zero build warnings related to missing imports
 - Output bundle is generated
@@ -38,6 +39,7 @@ npm run dev
 ```
 
 ### What to verify:
+
 1. App loads without console errors
 2. "Create Case" button appears after auth
 3. Clicking "Create Case" renders the form
@@ -50,14 +52,14 @@ npm run dev
 
 ## Common Issues
 
-| Symptom | Cause | Fix |
-|---------|-------|-----|
-| "X is not registered" console error | Component missing from `component-map.ts` | Add the import + map entry |
-| Field value doesn't persist after blur | `handleEvent` not called on blur | Add `onBlur` handler calling `handleEvent(actions, 'changeNblur', propName, value)` |
-| Read-only view shows nothing | Missing `displayMode` handling | Add the `DISPLAY_ONLY` / `STACKED_LARGE_VAL` checks |
-| TypeScript error on `getPConnect` | Wrong props interface | Extend `PConnFieldProps` or `PConnProps` from `@pega/sdk-react` |
-| Build fails on CSS import | Missing CSS loader config | Ensure Vite config handles `.css` imports |
-| "Cannot read property of undefined" on theme | Design system provider missing | Wrap app in the design system's ThemeProvider/Provider |
+| Symptom                                      | Cause                                     | Fix                                                                                 |
+| -------------------------------------------- | ----------------------------------------- | ----------------------------------------------------------------------------------- |
+| "X is not registered" console error          | Component missing from `component-map.ts` | Add the import + map entry                                                          |
+| Field value doesn't persist after blur       | `handleEvent` not called on blur          | Add `onBlur` handler calling `handleEvent(actions, 'changeNblur', propName, value)` |
+| Read-only view shows nothing                 | Missing `displayMode` handling            | Add the `DISPLAY_ONLY` / `STACKED_LARGE_VAL` checks                                 |
+| TypeScript error on `getPConnect`            | Wrong props interface                     | Extend `PConnFieldProps` or `PConnProps` from `@pega/sdk-react`                     |
+| Build fails on CSS import                    | Missing CSS loader config                 | Ensure Vite config handles `.css` imports                                           |
+| "Cannot read property of undefined" on theme | Design system provider missing            | Wrap app in the design system's ThemeProvider/Provider                              |
 
 ---
 

package/templates/react-sdk-reference/.github/skills/template-components.md

@@ -48,35 +48,73 @@ Templates typically receive children through `getPConnect().getChildren()` rathe
 
 Used for: TwoColumn, OneColumn, NarrowWide, WideNarrow
 
+This pattern is design-system agnostic. The `// [DS GRID]` section must be replaced with your design system's grid or flex layout primitive — see the "Design System Adaptation" section below.
+
 ```typescript
 import type { PropsWithChildren, ReactElement } from 'react';
-import Grid, { type GridSize } from '@mui/material/Grid';
-import type { PConnProps } from '../../../types/PConnProps';
+// Import your design system layout primitive here:
+// e.g. import { Grid } from 'antd';
+// e.g. import { SimpleGrid } from '@chakra-ui/react';
+import type { PConnProps } from '@pega/sdk-react';
 
 interface TwoColumnProps extends PConnProps {
-  templateCol?: string;  // e.g. "1fr 1fr", "2fr 1fr"
+  templateCol?: string; // e.g. '1fr 1fr', '2fr 1fr'
 }
 
 export default function TwoColumn(props: PropsWithChildren<TwoColumnProps>) {
   const { children, templateCol = '1fr 1fr' } = props;
   const childrenToRender = children as ReactElement[];
 
-  // Parse templateCol to calculate grid sizes
+  // Parse templateCol into column width ratios
+  // Strip unit suffixes, split on whitespace, convert to numbers
   const colArray = templateCol.replaceAll(/[a-z]+/g, '').split(/\s/).map(Number);
   const totalCols = colArray.reduce((v, itm) => itm + v, 0);
-  const ratio = 12 / totalCols;
-  const aSize = (ratio * colArray[0]) as GridSize;
-  const bSize = (ratio * colArray[1]) as GridSize;
+  // colArray[0] / totalCols = left column fraction
+  // colArray[1] / totalCols = right column fraction
 
+  // [DS GRID] — render two children in a responsive grid using the computed ratios
+  // On mobile (narrow viewport): both columns should stack to full width
+  // On desktop: apply the computed left/right ratio
   return (
-    <Grid container spacing={1}>
-      <Grid size={{ xs: 12, md: aSize }}>{childrenToRender[0]}</Grid>
-      <Grid size={{ xs: 12, md: bSize }}>{childrenToRender[1]}</Grid>
-    </Grid>
+    <YourDesignSystemGrid>
+      <YourDesignSystemColumn ratio={colArray[0] / totalCols}>
+        {childrenToRender[0]}
+      </YourDesignSystemColumn>
+      <YourDesignSystemColumn ratio={colArray[1] / totalCols}>
+        {childrenToRender[1]}
+      </YourDesignSystemColumn>
+    </YourDesignSystemGrid>
   );
 }
 ```
 
+---
+
+## Design System Adaptation (Layout Templates Only)
+
+> Form templates and page templates use the PConnect bridge pattern and do **not** use any design system primitives. This section applies only to layout templates: TwoColumn, OneColumn, NarrowWide, WideNarrow, and their sub-variants.
+
+**1. Check the component-specific skill file** — `.github/skills/template-skills/<ComponentName>.md` contains a **Design System Mapping** table where available. Use it as a starting point.
+
+**2. If the chosen design system is not listed** — use the **component purpose** description to identify the appropriate DS layout primitive (grid, flex, columns).
+
+**3. Discover the API from installed packages** — confirm layout component names and props from `.d.ts` before writing JSX:
+
+```bash
+find node_modules/<ds-package> -name "*.d.ts" | xargs grep -l "Grid\|Columns\|Flex" | head -5
+grep -A 30 "interface.*Props" <path-to-file>
+```
+
+**4. Column ratio mapping** — the `templateCol` prop (e.g., `'2fr 1fr'`) gives you fractional widths. Map to your DS's column system:
+
+| `templateCol` | Fraction  | MUI 12-col | CSS `grid-template-columns` |
+| ------------- | --------- | ---------- | --------------------------- |
+| `'1fr 1fr'`   | 50% / 50% | 6 / 6      | `1fr 1fr`                   |
+| `'2fr 1fr'`   | 67% / 33% | 8 / 4      | `2fr 1fr`                   |
+| `'1fr 2fr'`   | 33% / 67% | 4 / 8      | `1fr 2fr`                   |
+
+**5. Responsive behavior** — on mobile, both columns must stack to full width. Use your DS's responsive breakpoint props or a CSS media query.
+
 ### Form Template (renders children via PConnect bridge)
 
 Used for: DefaultForm, HierarchicalForm
@@ -161,9 +199,7 @@ import createPConnectComponent from '../../helpers/react_pconnect';
 const children = getPConnect().getChildren();
 
 // Render each child through the PConnect bridge
-children.map((child, i) =>
-  createElement(createPConnectComponent(), { ...child, key: `child-${i}` }),
-);
+children.map((child, i) => createElement(createPConnectComponent(), { ...child, key: `child-${i}` }));
 ```
 
 ### 3. State-connected children (DefaultForm pattern)

package/templates/react-sdk-reference/.github/skills/template-skills/AdvancedSearch.md

@@ -18,11 +18,11 @@ Renders a multi-section advanced search form where search fields are organized i
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `dataPageName` | `string` | Yes | Data page for search results |
-| `parameters` | `object` | No | Parameters passed to the data page |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop           | Type       | Required | Description                        |
+| -------------- | ---------- | -------- | ---------------------------------- |
+| `dataPageName` | `string`   | Yes      | Data page for search results       |
+| `parameters`   | `object`   | No       | Parameters passed to the data page |
+| `getPConnect`  | `function` | Yes      | PConnect getter                    |
 
 ## Behavioral Contract
 
@@ -42,9 +42,12 @@ Renders a multi-section advanced search form where search fields are organized i
 ### Context (`DataReferenceAdvancedSearchContext`)
 
 Provides shared config to `SearchGroups`:
+
 ```tsx
 <DataReferenceAdvancedSearchContext.Provider value={{ dataPageName, parameters, getPConnect }}>
-  {searchGroups.map((group) => <SearchGroups key={group.label} group={group} />)}
+  {searchGroups.map((group) => (
+    <SearchGroups key={group.label} group={group} />
+  ))}
 </DataReferenceAdvancedSearchContext.Provider>
 ```
 
@@ -66,13 +69,14 @@ Renders a single search group section: a heading + a list of editable search fie
 
 ### Props
 
-| Prop | Type | Description |
-|------|------|-------------|
+| Prop    | Type     | Description                        |
+| ------- | -------- | ---------------------------------- |
 | `group` | `object` | `{ label: string, fields: array }` |
 
 ### Behavioral Contract
 
 For each field in `group.fields`:
+
 1. Get `firstChildPConnect = getPConnect().getChildren()[0]`.
 2. Create an editable field component: `firstChildPConnect.createComponent({ type: field.type, config: { ...field.config } })`.
 3. Render the created component alongside a `<SearchGroups>` label row.
@@ -94,18 +98,19 @@ For each field in `group.fields`:
 
 ### AdvancedSearch Container
 
-| Element | Description |
-|---------|-------------|
+| Element         | Description                             |
+| --------------- | --------------------------------------- |
 | Outer container | Vertical stack of search group sections |
 
 ### SearchGroups Section
 
-| Element | Description |
-|---------|-------------|
-| Group heading | `<h4>` with group label |
-| Field rows | Each field rendered as a form control |
+| Element       | Description                           |
+| ------------- | ------------------------------------- |
+| Group heading | `<h4>` with group label               |
+| Field rows    | Each field rendered as a form control |
 
 **CSS-only implementation notes:**
+
 - Outer container: `display: flex; flex-direction: column; gap: 1.5rem`.
 - Group section: `display: flex; flex-direction: column; gap: 0.75rem`.
 - Group heading: `font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem`.
@@ -130,15 +135,16 @@ For each field in `group.fields`:
 
 Listed design systems are examples only.
 
-| Design System | Group Heading | Field Layout |
-|---|---|---|
-| Default (CSS only) | `<h4>` | CSS grid 2-col (label + input) |
-| MUI | `<Typography variant='h6'>` | `<Grid container>` |
-| Ant Design | `<Typography.Title level={5}>` | `<Form.Item>` |
-| Chakra UI | `<Heading size='sm'>` | `<FormControl>` rows |
-| Shadcn/ui | `<h4>` or `<Label>` | Tailwind grid |
+| Design System      | Group Heading                  | Field Layout                   |
+| ------------------ | ------------------------------ | ------------------------------ |
+| Default (CSS only) | `<h4>`                         | CSS grid 2-col (label + input) |
+| MUI                | `<Typography variant='h6'>`    | `<Grid container>`             |
+| Ant Design         | `<Typography.Title level={5}>` | `<Form.Item>`                  |
+| Chakra UI          | `<Heading size='sm'>`          | `<FormControl>` rows           |
+| Shadcn/ui          | `<h4>` or `<Label>`            | Tailwind grid                  |
 
 When implementing in a specific design system:
+
 - `DataReferenceAdvancedSearchContext` must be provided — `SearchGroups` consumes it via `useContext`
 - Field deduplication by `field.value` must happen before rendering
 - `createComponent` creates live editable fields — render via `createElement(PConnectComponent, fieldConfig)`

package/templates/react-sdk-reference/.github/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/.github/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/.github/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/.github/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/.github/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