@pega/sdk 0.0.3 → 0.0.5

package/templates/react-sdk-reference/.ai-common/skills/template-skills/DefaultPage.md

@@ -0,0 +1,161 @@
+# Skill: DefaultPage
+
+Flexible page layout template that renders children in a configurable column layout, with optional banner hero section.
+
+> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
+
+---
+
+## Component Purpose
+
+Renders a page's child regions in a responsive grid layout. The number and proportions of columns are driven by the `layout` prop. When `enableBanner` is true, delegates to the `Banner` DSE component for a full-width hero section with the child columns below it.
+
+## Pega Metadata
+
+- **Registration key:** `DefaultPage` (in `component-map.ts`)
+- **Category:** Page template
+- **Extends:** `CommonPageProps` (does NOT directly extend `PConnProps` — no `getPConnect` in props)
+
+## Props
+
+| Prop              | Type                                                                          | Required | Description                                                      |
+| ----------------- | ----------------------------------------------------------------------------- | -------- | ---------------------------------------------------------------- |
+| `layout`          | `'one-column' \| 'two-column' \| 'narrow-wide' \| 'wide-narrow' \| 'dynamic'` | No       | Column layout. Default `'one-column'`                            |
+| `children`        | `ReactNode \| ReactNode[]`                                                    | Yes      | Child region components to render in columns                     |
+| `title`           | `string`                                                                      | Yes      | Page title (part of `CommonPageProps`, not directly rendered)    |
+| `icon`            | `string`                                                                      | Yes      | Page icon (part of `CommonPageProps`, not directly rendered)     |
+| `localeReference` | `string`                                                                      | Yes      | Locale reference key                                             |
+| `enableBanner`    | `boolean`                                                                     | No       | If `true`, render `Banner` hero with children as `a`/`b` columns |
+| `heading`         | `string`                                                                      | No       | Banner heading. Default `''`                                     |
+| `message`         | `string`                                                                      | No       | Banner message. Default `''`                                     |
+| `imageTheme`      | `'light' \| 'dark' \| undefined`                                              | No       | Banner image theme                                               |
+| `backgroundImage` | `string`                                                                      | No       | Banner background image URL. Default `''`                        |
+| `backgroundColor` | `string`                                                                      | No       | Banner background color. Default `''`                            |
+| `tintImage`       | `boolean`                                                                     | No       | Banner image tint flag                                           |
+
+## Component Skeleton
+
+```typescript
+import { useMemo, Children } from 'react';
+import type { ReactNode } from 'react';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+
+const COLUMNS_WIDTHS = {
+  'one-column': [12],
+  'two-column': [6, 6],
+  'narrow-wide': [4, 8],
+  'wide-narrow': [8, 4],
+};
+
+export default function DefaultPage({
+  layout = 'one-column', children, enableBanner,
+  heading = '', message = '', imageTheme, backgroundImage = '',
+  backgroundColor = '', tintImage,
+}: DefaultPageProps) {
+  const Banner = getComponentFromRegistry('Banner');
+  const childArray = useMemo(() => Children.toArray(children), [children]);
+
+  // 1. Banner mode
+  if (enableBanner) {
+    return (
+      <Banner
+        variant={layout === 'one-column' ? 'two-column' : layout}
+        a={[childArray[0]]}
+        b={[childArray[1]]}
+        banner={{ variant: imageTheme, backgroundColor, title: heading, message, backgroundImage, tintImage }}
+      />
+    );
+  }
+
+  // 2. Standard grid mode
+  return (
+    <GridContainer spacing={1}>
+      {childArray.map((child, index) => (
+        <GridItem key={index} size={COLUMNS_WIDTHS[layout][index]}>
+          {child}
+        </GridItem>
+      ))}
+    </GridContainer>
+  );
+}
+```
+
+> **Note:** `DefaultPage` does NOT have a `getPConnect` prop — it extends `CommonPageProps`, not `PConnProps`.
+
+## Behavioral Contract
+
+### Without Banner (`enableBanner` is falsy)
+
+1. Convert children to an array using `Children.toArray(children)` (memoized).
+2. Look up column widths from `COLUMNS_WIDTHS` map using `layout`:
+   - `'one-column'`: `[12]` (single column, full width)
+   - `'two-column'`: `[6, 6]` (equal split)
+   - `'narrow-wide'`: `[4, 8]`
+   - `'wide-narrow'`: `[8, 4]`
+3. Render a `<Grid container spacing={1}>`.
+4. Map over children array: for each child at index `i`, render `<Grid key={i} size={COLUMNS_WIDTHS[layout][i]}>{child}</Grid>`.
+
+### With Banner (`enableBanner` is true)
+
+1. Retrieve `Banner` from the component registry.
+2. Determine banner variant:
+   - If `layout === 'one-column'`, use `'two-column'` for the banner layout (equal split for `a`/`b`).
+   - Otherwise use the `layout` value directly.
+3. Render `<Banner variant={...} a={[childArray[0]]} b={[childArray[1]]} banner={{ variant: imageTheme, backgroundColor, title: heading, message, backgroundImage, tintImage }} />`.
+
+## Visual Specifications
+
+### Column Widths
+
+| `layout`        | Column sizes (MUI 12-grid) |
+| --------------- | -------------------------- |
+| `'one-column'`  | 12                         |
+| `'two-column'`  | 6, 6                       |
+| `'narrow-wide'` | 4, 8                       |
+| `'wide-narrow'` | 8, 4                       |
+
+### Grid Spacing
+
+| Property          | Value                     |
+| ----------------- | ------------------------- |
+| Container spacing | 1 (≈ 8px between columns) |
+
+**CSS-only implementation notes:**
+
+- One-column: `display: grid; grid-template-columns: 1fr; gap: 8px`.
+- Two-column: `display: grid; grid-template-columns: 1fr 1fr; gap: 8px`.
+- Narrow-wide: `display: grid; grid-template-columns: 1fr 2fr; gap: 8px`.
+- Wide-narrow: `display: grid; grid-template-columns: 2fr 1fr; gap: 8px`.
+- With banner: delegate to Banner component structure (see `Banner.md`).
+- Responsive: collapse all to single column on mobile.
+
+## Edge Cases & Special Logic
+
+- `layout='dynamic'` is listed in the type union but has no entry in `COLUMNS_WIDTHS` — if accessed, it returns `undefined`, and no columns are rendered. This is a known stub.
+- When `enableBanner` is true and `layout === 'one-column'`, the banner layout is forced to `'two-column'` to provide a meaningful two-slot layout for `a` and `b`.
+- Children are memoized via `useMemo(() => Children.toArray(children), [children])` to avoid unnecessary re-renders.
+
+## Dependencies
+
+- When `enableBanner` is true: `getComponentFromRegistry('Banner')` from `@pega/sdk-react`
+- `Grid` from `@mui/material` (or equivalent CSS grid in non-MUI implementations)
+
+## Design System Mapping
+
+**UI control type:** Responsive multi-column page grid layout with optional banner hero.
+
+Listed design systems are examples only.
+
+| Design System      | Recommended Component                                           |
+| ------------------ | --------------------------------------------------------------- |
+| Default (CSS only) | CSS Grid with column template driven by `layout` prop           |
+| MUI                | `<Grid container spacing={1}>` with `<Grid size={N}>` per child |
+| Ant Design         | `<Row gutter={8}>` with `<Col span={N * 2}>` (24-col grid)      |
+| Chakra UI          | `<SimpleGrid columns={{ base: 1, md: N }}>`                     |
+| Shadcn/ui          | Tailwind grid utilities matching the layout                     |
+
+When implementing in a specific design system:
+
+- Map `layout` prop to the appropriate column template
+- Banner mode delegates to the `Banner` component — implement Banner first
+- All children are sized uniformly within their column (no per-child overrides)

package/templates/react-sdk-reference/{.cursor/rules/skills/template-skills/Details.mdrules → .ai-common/skills/template-skills/Details.md}

@@ -1,8 +1,3 @@
----
-description: Template component skill: Details
-alwaysApply: false
----
-
 # Skill: Details
 
 Read-only single-column details template. Renders all child fields in DISPLAY_ONLY mode inside a labeled FieldGroup, with optional highlighted data strip above.
@@ -23,12 +18,71 @@ Renders a labeled group of read-only fields in a single-column vertical stack. F
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `label` | `string` | Yes | Section heading for the FieldGroup wrapper |
-| `showLabel` | `boolean` | Yes | Whether to show the section label |
-| `showHighlightedData` | `boolean` | Yes | Whether to render highlighted fields above children |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop                  | Type       | Required | Description                                         |
+| --------------------- | ---------- | -------- | --------------------------------------------------- |
+| `label`               | `string`   | Yes      | Section heading for the FieldGroup wrapper          |
+| `showLabel`           | `boolean`  | Yes      | Whether to show the section label                   |
+| `showHighlightedData` | `boolean`  | Yes      | Whether to render highlighted fields above children |
+| `getPConnect`         | `function` | Yes      | PConnect getter                                     |
+
+## Component Skeleton
+
+```typescript
+import { createElement } from 'react';
+import { getComponentFromRegistry, PConnectComponent } from '@pega/sdk-react';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface DetailsProps extends PConnProps {
+  label: string;
+  showLabel: boolean;
+  showHighlightedData: boolean;
+}
+
+export default function Details(props: DetailsProps) {
+  const FieldGroup = getComponentFromRegistry('FieldGroup');
+  const { label, showLabel, getPConnect, showHighlightedData } = props;
+
+  // 1. Inherited props merge
+  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
+
+  // 2. Force all children into display-only mode (side effect)
+  getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
+  getPConnect().setInheritedProp('readOnly', true);
+
+  // 3. Create children from PConnect
+  const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
+    createElement(PConnectComponent, { ...configObject, key: index.toString() })
+  );
+
+  // 4. Highlighted data (optional)
+  let highlightedDataArr = [];
+  if (showHighlightedData) {
+    const { highlightedData = [] } = (getPConnect().getRawMetadata() as any).config;
+    highlightedDataArr = highlightedData.map((field) => {
+      field.config.displayMode = 'STACKED_LARGE_VAL';
+      if (field.config.value === '@P .pyStatusWork') {
+        field.type = 'TextInput';
+        field.config.displayAsStatus = true;
+      }
+      return getPConnect().createComponent(field, '', 0, {});
+    });
+  }
+
+  // 5. Render: FieldGroup > highlighted grid (xs:12) + children grid (xs:12)
+  return (
+    <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
+      {showHighlightedData && highlightedDataArr.length > 0 && (
+        <GridContainer spacing={1} style={{ padding: '0 0 1em' }}>
+          {highlightedDataArr.map((child, i) => <GridItem xs={12} key={`hf-${i+1}`}>{child}</GridItem>)}
+        </GridContainer>
+      )}
+      <GridContainer spacing={1}>
+        {children.map((child, i) => <GridItem xs={12} key={`r-${i+1}`}>{child}</GridItem>)}
+      </GridContainer>
+    </FieldGroup>
+  );
+}
+```
 
 ## Behavioral Contract
 
@@ -49,13 +103,14 @@ Renders a labeled group of read-only fields in a single-column vertical stack. F
 
 ### Overall Layout
 
-| Property | Value |
-|----------|-------|
-| Column structure | Single column (xs: 12 for each child) |
-| Inner spacing | Grid spacing 1 (≈ 8px between fields) |
+| Property                 | Value                                                    |
+| ------------------------ | -------------------------------------------------------- |
+| Column structure         | Single column (xs: 12 for each child)                    |
+| Inner spacing            | Grid spacing 1 (≈ 8px between fields)                    |
 | Highlighted data padding | `padding: 0 0 1em` (space below before regular children) |
 
 **CSS-only implementation notes:**
+
 - Outer wrapper: `FieldGroup` component (see `FieldGroupDSE.md` for styles).
 - Children grid: `display: grid; grid-template-columns: 1fr; gap: 8px`.
 - Highlighted data row: `display: grid; grid-template-columns: 1fr; gap: 8px; padding-bottom: 1rem`.
@@ -79,15 +134,16 @@ Renders a labeled group of read-only fields in a single-column vertical stack. F
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<fieldset>/<legend>` wrapper with CSS grid single column |
-| MUI | `<Grid container spacing={1}>` with `<Grid size={{ xs: 12 }}>` per field |
-| Ant Design | `<Card title={label}>` with `<Row><Col span={24}>` per field |
-| Chakra UI | `<Box>` with heading + `<Stack spacing={2}>` |
-| Shadcn/ui | `<Card><CardHeader><CardContent>` with stacked field items |
+| Design System      | Recommended Component                                                    |
+| ------------------ | ------------------------------------------------------------------------ |
+| Default (CSS only) | `<fieldset>/<legend>` wrapper with CSS grid single column                |
+| MUI                | `<Grid container spacing={1}>` with `<Grid size={{ xs: 12 }}>` per field |
+| Ant Design         | `<Card title={label}>` with `<Row><Col span={24}>` per field             |
+| Chakra UI          | `<Box>` with heading + `<Stack spacing={2}>`                             |
+| Shadcn/ui          | `<Card><CardHeader><CardContent>` with stacked field items               |
 
 When implementing in a specific design system:
+
 - All children must have `displayMode='DISPLAY_ONLY'` and `readOnly=true` inherited
 - Highlighted data uses `STACKED_LARGE_VAL` — larger/bolder value display
 - `showLabel=false` hides the section heading entirely

package/templates/react-sdk-reference/{.cursor/rules/skills/template-skills/DetailsSubTabs.mdrules → .ai-common/skills/template-skills/DetailsSubTabs.md}

@@ -1,8 +1,3 @@
----
-description: Template component skill: DetailsSubTabs
-alwaysApply: false
----
-
 # Skill: DetailsSubTabs
 
 Read-only tabbed details template. Renders sub-tabs with deferred-loaded tab content, using shared tab utilities.
@@ -23,12 +18,72 @@ Renders a tabbed layout for a details region. Each tab contains display-only con
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode[]` | Yes | Tab content — `children[0]` is the deferred-loaded tabs container |
-| `label` | `string` | Yes | Section heading shown above tabs when `showLabel` is true |
-| `showLabel` | `boolean` | No | Whether to show the section heading. Default `true` |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop          | Type          | Required | Description                                                       |
+| ------------- | ------------- | -------- | ----------------------------------------------------------------- |
+| `children`    | `ReactNode[]` | Yes      | Tab content — `children[0]` is the deferred-loaded tabs container |
+| `label`       | `string`      | Yes      | Section heading shown above tabs when `showLabel` is true         |
+| `showLabel`   | `boolean`     | No       | Whether to show the section heading. Default `true`               |
+| `getPConnect` | `function`    | Yes      | PConnect getter                                                   |
+
+## Component Skeleton
+
+```typescript
+import { Children, type PropsWithChildren, useEffect, useState } from 'react';
+import { getTransientTabs, getVisibleTabs, tabClick } from '../../SubTabs/tabUtils';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface DetailsSubTabsProps extends PConnProps {
+  showLabel: boolean;
+  label: string;
+}
+
+export default function DetailsSubTabs(props: PropsWithChildren<DetailsSubTabsProps>) {
+  const { children = [], label, showLabel = true, getPConnect } = props;
+  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
+
+  // 1. Extract deferred tabs from first child
+  const deferLoadedTabs = Children.toArray(children)[0];
+  let availableTabs = [];
+
+  // 2. Compute visible tabs on mount
+  useEffect(() => {
+    availableTabs = getVisibleTabs(deferLoadedTabs, 'detailsSubTabs');
+  }, [availableTabs]);
+
+  // 3. Tab state
+  const [currentTabId, setCurrentTabId] = useState('0');
+  const [tabItems, setTabitem] = useState([]);
+
+  // 4. Update tab items when currentTabId changes
+  useEffect(() => {
+    const tempTabItems = getTransientTabs(availableTabs, currentTabId, tabItems);
+    setTabitem(tempTabItems);
+  }, [currentTabId]);
+
+  // 5. Tab click handler
+  const handleTabClick = (id, index: string) => {
+    setCurrentTabId(index);
+    tabClick(index, availableTabs, currentTabId, setCurrentTabId, tabItems);
+  };
+
+  // 6. Render: optional heading + TabContext + Tabs + TabPanels
+  return (
+    <>
+      {propsToUse.showLabel && <h3>{propsToUse.label}</h3>}
+      <TabContext value={currentTabId.toString()}>
+        <TabBar onChange={handleTabClick} value={currentTabId}>
+          {tabItems.map(tab => <Tab key={tab.id} label={tab.name} value={tab.id} />)}
+        </TabBar>
+        {tabItems.map(tab => (
+          <TabPanel key={tab.id} value={tab.id} tabIndex={+tab.id}>
+            {tab.content || 'No content exists'}
+          </TabPanel>
+        ))}
+      </TabContext>
+    </>
+  );
+}
+```
 
 ## Behavioral Contract
 
@@ -48,19 +103,20 @@ Renders a tabbed layout for a details region. Each tab contains display-only con
 
 ### Heading
 
-| Property | Value |
-|----------|-------|
-| Tag | `<h3>` |
+| Property        | Value                           |
+| --------------- | ------------------------------- |
+| Tag             | `<h3>`                          |
 | Shown only when | `propsToUse.showLabel === true` |
 
 ### Tab Bar
 
-| Property | Value |
-|----------|-------|
-| Scrollable | Not specified (default non-scrollable in reference implementation) |
-| Tab text transform | Inherits design system default |
+| Property           | Value                                                              |
+| ------------------ | ------------------------------------------------------------------ |
+| Scrollable         | Not specified (default non-scrollable in reference implementation) |
+| Tab text transform | Inherits design system default                                     |
 
 **CSS-only implementation notes:**
+
 - Heading: `font-size: 1.25rem; font-weight: 600; margin-bottom: 8px`.
 - Tab bar: `display: flex; border-bottom: 2px solid var(--divider); gap: 0`.
 - Each tab: `padding: 8px 16px; cursor: pointer; border-bottom: 2px solid transparent`.
@@ -86,15 +142,16 @@ Renders a tabbed layout for a details region. Each tab contains display-only con
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | Custom tab bar with CSS underline indicator |
-| MUI | `<TabContext>` + `<Tabs>` + `<TabPanel>` from `@mui/lab` |
-| Ant Design | `<Tabs>` with `items` array |
-| Chakra UI | `<Tabs>` + `<TabList>` + `<TabPanels>` |
-| Shadcn/ui | `<Tabs>` + `<TabsList>` + `<TabsContent>` |
+| Design System      | Recommended Component                                    |
+| ------------------ | -------------------------------------------------------- |
+| Default (CSS only) | Custom tab bar with CSS underline indicator              |
+| MUI                | `<TabContext>` + `<Tabs>` + `<TabPanel>` from `@mui/lab` |
+| Ant Design         | `<Tabs>` with `items` array                              |
+| Chakra UI          | `<Tabs>` + `<TabList>` + `<TabPanels>`                   |
+| Shadcn/ui          | `<Tabs>` + `<TabsList>` + `<TabsContent>`                |
 
 When implementing in a specific design system:
+
 - `getVisibleTabs` and `getTransientTabs` are tabUtils helpers — use them regardless of UI library
 - Tab content is lazily loaded via the transient tab pattern
 - Optional `<h3>` heading above the tab bar (controlled by `showLabel`)

package/templates/react-sdk-reference/{.cursor/rules/skills/template-skills/DetailsThreeColumn.mdrules → .ai-common/skills/template-skills/DetailsThreeColumn.md}

@@ -1,8 +1,3 @@
----
-description: Template component skill: DetailsThreeColumn
-alwaysApply: false
----
-
 # Skill: DetailsThreeColumn
 
 Read-only three-column details template. Renders child fields in DISPLAY_ONLY mode in a 3-column grid inside a FieldGroup, with optional highlighted data.
@@ -25,12 +20,24 @@ Identical to `Details` and `DetailsTwoColumn` in all behavior except children ar
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `label` | `string` | Yes | Section heading for the FieldGroup wrapper |
-| `showLabel` | `boolean` | No | Whether to show the section label. Default `true` |
-| `showHighlightedData` | `boolean` | No | Whether to render highlighted fields above children. Default `false` |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop                  | Type       | Required | Description                                                          |
+| --------------------- | ---------- | -------- | -------------------------------------------------------------------- |
+| `label`               | `string`   | Yes      | Section heading for the FieldGroup wrapper                           |
+| `showLabel`           | `boolean`  | No       | Whether to show the section label. Default `true`                    |
+| `showHighlightedData` | `boolean`  | No       | Whether to render highlighted fields above children. Default `false` |
+| `getPConnect`         | `function` | Yes      | PConnect getter                                                      |
+
+## Component Skeleton
+
+Identical to `Details` skeleton except grid items use `xs={4}` (three columns).
+
+```typescript
+// Same as Details — only this line differs in the grid:
+// Highlighted data: <GridItem xs={4} key={...}>{child}</GridItem>
+// Regular children: <GridItem xs={4} key={...}>{child}</GridItem>
+```
+
+See `Details.md` skeleton for the full pattern. The ONLY change is `xs: 12` → `xs: 4`.
 
 ## Behavioral Contract
 
@@ -44,13 +51,14 @@ All steps identical to `Details`, except:
 
 ### Column Structure
 
-| | Details | DetailsTwoColumn | DetailsThreeColumn |
-|-|---------|-----------------|-------------------|
-| Column width per child | xs: 12 | xs: 6 | **xs: 4** |
-| Columns per row | 1 | 2 | **3** |
-| Highlighted data column | xs: 12 | xs: 6 | **xs: 4** |
+|                         | Details | DetailsTwoColumn | DetailsThreeColumn |
+| ----------------------- | ------- | ---------------- | ------------------ |
+| Column width per child  | xs: 12  | xs: 6            | **xs: 4**          |
+| Columns per row         | 1       | 2                | **3**              |
+| Highlighted data column | xs: 12  | xs: 6            | **xs: 4**          |
 
 **CSS-only implementation notes:**
+
 - Children grid: `display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px`.
 - Highlighted data row: `display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding-bottom: 1rem`.
 - Wrap in FieldGroup (see `FieldGroup.md` DSE skill).
@@ -70,14 +78,15 @@ All edge cases identical to `Details`. See `Details.md`.
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
+| Design System      | Recommended Component                                                         |
+| ------------------ | ----------------------------------------------------------------------------- |
 | Default (CSS only) | `<fieldset>/<legend>` with CSS `grid-template-columns: 1fr 1fr 1fr; gap: 8px` |
-| MUI | `<Grid container spacing={1}>` with `<Grid size={{ xs: 4 }}>` per field |
-| Ant Design | `<Descriptions column={3}>` or `<Row><Col span={8}>` per field |
-| Chakra UI | `<SimpleGrid columns={3} spacing={2}>` |
-| Shadcn/ui | Tailwind `grid grid-cols-3 gap-2` |
+| MUI                | `<Grid container spacing={1}>` with `<Grid size={{ xs: 4 }}>` per field       |
+| Ant Design         | `<Descriptions column={3}>` or `<Row><Col span={8}>` per field                |
+| Chakra UI          | `<SimpleGrid columns={3} spacing={2}>`                                        |
+| Shadcn/ui          | Tailwind `grid grid-cols-3 gap-2`                                             |
 
 When implementing in a specific design system:
+
 - 3-column layout — each field takes one-third of the available width
 - All other behaviors inherited from `Details` (DISPLAY_ONLY, readOnly, FieldGroup, highlighted data)

package/templates/react-sdk-reference/{.cursor/rules/skills/template-skills/DetailsTwoColumn.mdrules → .ai-common/skills/template-skills/DetailsTwoColumn.md}

@@ -1,8 +1,3 @@
----
-description: Template component skill: DetailsTwoColumn
-alwaysApply: false
----
-
 # Skill: DetailsTwoColumn
 
 Read-only two-column details template. Renders child fields in DISPLAY_ONLY mode in a 2-column grid inside a FieldGroup, with optional highlighted data.
@@ -25,12 +20,24 @@ Identical to `Details` in all behavior except children are distributed into a **
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `label` | `string` | Yes | Section heading for the FieldGroup wrapper |
-| `showLabel` | `boolean` | No | Whether to show the section label. Default `true` |
-| `showHighlightedData` | `boolean` | No | Whether to render highlighted fields above children. Default `false` |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop                  | Type       | Required | Description                                                          |
+| --------------------- | ---------- | -------- | -------------------------------------------------------------------- |
+| `label`               | `string`   | Yes      | Section heading for the FieldGroup wrapper                           |
+| `showLabel`           | `boolean`  | No       | Whether to show the section label. Default `true`                    |
+| `showHighlightedData` | `boolean`  | No       | Whether to render highlighted fields above children. Default `false` |
+| `getPConnect`         | `function` | Yes      | PConnect getter                                                      |
+
+## Component Skeleton
+
+Identical to `Details` skeleton except grid items use `xs={6}` (two columns).
+
+```typescript
+// Same as Details — only this line differs in the grid:
+// Highlighted data: <GridItem xs={6} key={...}>{child}</GridItem>
+// Regular children: <GridItem xs={6} key={...}>{child}</GridItem>
+```
+
+See `Details.md` skeleton for the full pattern. The ONLY change is `xs: 12` → `xs: 6`.
 
 ## Behavioral Contract
 
@@ -44,13 +51,14 @@ All steps identical to `Details`, except:
 
 ### Column Structure
 
-| | Details | DetailsTwoColumn |
-|-|---------|-----------------|
-| Column width per child | xs: 12 (full width) | **xs: 6 (half width)** |
-| Columns per row | 1 | **2** |
-| Highlighted data column | xs: 12 | **xs: 6** |
+|                         | Details             | DetailsTwoColumn       |
+| ----------------------- | ------------------- | ---------------------- |
+| Column width per child  | xs: 12 (full width) | **xs: 6 (half width)** |
+| Columns per row         | 1                   | **2**                  |
+| Highlighted data column | xs: 12              | **xs: 6**              |
 
 **CSS-only implementation notes:**
+
 - Children grid: `display: grid; grid-template-columns: 1fr 1fr; gap: 8px`.
 - Highlighted data row: `display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 1rem`.
 - Wrap in FieldGroup (see `FieldGroup.md` DSE skill).
@@ -70,14 +78,15 @@ All edge cases identical to `Details`. See `Details.md`.
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
+| Design System      | Recommended Component                                                     |
+| ------------------ | ------------------------------------------------------------------------- |
 | Default (CSS only) | `<fieldset>/<legend>` with CSS `grid-template-columns: 1fr 1fr; gap: 8px` |
-| MUI | `<Grid container spacing={1}>` with `<Grid size={{ xs: 6 }}>` per field |
-| Ant Design | `<Descriptions column={2}>` or `<Row><Col span={12}>` per field |
-| Chakra UI | `<SimpleGrid columns={2} spacing={2}>` |
-| Shadcn/ui | Tailwind `grid grid-cols-2 gap-2` |
+| MUI                | `<Grid container spacing={1}>` with `<Grid size={{ xs: 6 }}>` per field   |
+| Ant Design         | `<Descriptions column={2}>` or `<Row><Col span={12}>` per field           |
+| Chakra UI          | `<SimpleGrid columns={2} spacing={2}>`                                    |
+| Shadcn/ui          | Tailwind `grid grid-cols-2 gap-2`                                         |
 
 When implementing in a specific design system:
+
 - 2-column layout — each field takes half the available width
 - All other behaviors inherited from `Details` (DISPLAY_ONLY, readOnly, FieldGroup, highlighted data)