@pega/sdk 0.0.3 → 0.0.5

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

@@ -0,0 +1,198 @@
+# Skill: SelfServiceCaseView
+
+Self-service portal case view template. Renders a case workspace optimized for self-service channels, with a compact summary sidebar, main content area, and optional utilities panel.
+
+> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
+
+---
+
+## Component Purpose
+
+A case view variant designed for self-service portal channels. Uses a horizontal flex layout (25% summary / flex:1 main / 25% utilities) instead of the 3-column grid of `CaseView`. Filters case summary data to only include fields available in the self-service channel, and filters utilities to self-service-appropriate actions.
+
+## Pega Metadata
+
+- **Registration key:** `SelfServiceCaseView` (in `component-map.ts`)
+- **Category:** Page template — self-service case workspace
+- **Extends:** `PConnProps`
+
+## Props
+
+| Prop           | Type          | Required | Description                                                     |
+| -------------- | ------------- | -------- | --------------------------------------------------------------- |
+| `children`     | `ReactNode[]` | Yes      | Region children (variable count based on `isObjectType`)        |
+| `isObjectType` | `boolean`     | No       | Whether the case is an object-type (affects child region count) |
+| `getPConnect`  | `function`    | Yes      | PConnect getter                                                 |
+
+## Component Skeleton
+
+```typescript
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import { prepareCaseSummaryData, filterUtilities } from '../utils';
+import { Utils } from '../../helpers/utils';
+
+export default function SelfServiceCaseView(props) {
+  const CaseViewActionsMenu = getComponentFromRegistry('CaseViewActionsMenu');
+  const CaseSummary = getComponentFromRegistry('CaseSummary');
+  const {
+    icon = '', getPConnect, header, subheader,
+    showCaseLifecycle = true, showSummaryRegion = true,
+    showUtilitiesRegion = true, showCaseActions = true,
+    children, caseClass,
+    caseInfo: { availableActions = [], availableProcesses = [], caseTypeID = '', caseTypeName = '' },
+  } = props;
+  const pConnect = getPConnect();
+
+  // 1. Boolean coercion (props may be strings)
+  const [bShowCaseLifecycle, bShowSummaryRegion, bShowUtilitiesRegion, bShowCaseActions] =
+    [showCaseLifecycle, showSummaryRegion, showUtilitiesRegion, showCaseActions]
+      .map(p => p === true || p === 'true');
+
+  // 2. Object type check — affects child indexing
+  const isObjectType = (PCore.getCaseUtils() as any).isObjectCaseType(caseClass);
+
+  // 3. Region assignment by child index
+  const renderedRegions = isObjectType
+    ? { caseSummary: children[0], utilities: filterUtilities(children[2]) }
+    : { caseSummary: children[0], stages: children[1], todo: children[2], utilities: filterUtilities(children[4]) };
+
+  // 4. Filter summary fields for self-service channel
+  const { primarySummaryFields, secondarySummaryFields } = prepareCaseSummaryData(
+    renderedRegions.caseSummary,
+    (config) => config?.availableInChannel?.selfService === true
+  );
+
+  // 5. Utilities visibility check
+  const showUtilities = bShowUtilitiesRegion && isUtilitiesRegionNotEmpty();
+  const showSummary = bShowSummaryRegion && (primarySummaryFields.length > 0 || secondarySummaryFields.length > 0);
+
+  // 6. Render: header bar + flex row (summary 25% | main flex:1 | utilities 25%)
+  return (
+    <div>
+      <HeaderBar>{header} {bShowCaseActions && <CaseViewActionsMenu ... />}</HeaderBar>
+      <div style={{ display: 'flex', flexDirection: 'row' }}>
+        {showSummary && <div style={{ flex: '0 0 25%' }}><CaseSummary ... /></div>}
+        <div style={{ flex: 1 }}>{bShowCaseLifecycle && renderedRegions.stages}{renderedRegions.todo}</div>
+        {showUtilities && <div style={{ flex: '0 0 25%' }}>{renderedRegions.utilities}</div>}
+      </div>
+    </div>
+  );
+}
+```
+
+## Behavioral Contract
+
+### Region Assignment by Child Index
+
+Child indexing depends on `isObjectType`:
+
+**`isObjectType === false` (5 children):**
+
+| Index | Region          |
+| ----- | --------------- |
+| 0     | Summary         |
+| 1     | (Header/Stages) |
+| 2     | Main content    |
+| 3     | Utilities       |
+| 4     | (Additional)    |
+
+**`isObjectType === true` (3 children):**
+
+| Index | Region       |
+| ----- | ------------ |
+| 0     | Summary      |
+| 1     | Main content |
+| 2     | Utilities    |
+
+Show/hide individual regions based on:
+
+- `showSummary`: always show summary region.
+- `showMain`: always show main content region.
+- `showUtilities`: show utilities only if the region has content.
+
+### `selfServiceCaseViewHeader`
+
+Renders a slim header bar above the main flex layout showing:
+
+- Case ID / case type name
+- Case status badge
+
+### Case Summary Data
+
+Call `prepareCaseSummaryData(primaryFields, secondaryFields, getPConnect)` with a filter:
+
+- Only include fields where `availableInChannel.selfService === true`.
+
+### Utilities Filter
+
+Call `filterUtilities(utilitiesChildren, getPConnect)` to remove utilities not appropriate for self-service channels.
+
+### Render Structure
+
+```
+<div className="psdk-ss-case-view">
+  <selfServiceCaseViewHeader />
+  <div className="psdk-ss-case-view-body" style="display:flex; flex-direction:row">
+    <div style="flex: 0 0 25%">   {/* Summary */}
+      {showSummary && summaryRegion}
+    </div>
+    <div style="flex: 1">         {/* Main content */}
+      {showMain && mainRegion}
+    </div>
+    <div style="flex: 0 0 25%">  {/* Utilities */}
+      {showUtilities && utilitiesRegion}
+    </div>
+  </div>
+</div>
+```
+
+## Visual Specifications
+
+| Column    | Width       | Contents                                    |
+| --------- | ----------- | ------------------------------------------- |
+| Summary   | 25% (fixed) | Case summary fields (self-service filtered) |
+| Main      | flex: 1     | Main case content / assignment form         |
+| Utilities | 25% (fixed) | Filtered utilities                          |
+
+**CSS-only implementation notes:**
+
+- Body layout: `display: flex; flex-direction: row; gap: 1rem`.
+- Summary column: `flex: 0 0 25%; min-width: 0`.
+- Main column: `flex: 1 1 auto; min-width: 0`.
+- Utilities column: `flex: 0 0 25%; min-width: 0`.
+- Header bar: `display: flex; align-items: center; gap: 1rem; padding: 0.5rem 0; margin-bottom: 1rem`.
+- Responsive: collapse to single column on mobile.
+
+## Edge Cases & Special Logic
+
+- `isObjectType` changes the number of `children` — always derive regions by index based on this flag.
+- `filterUtilities` may return empty array — `showUtilities` should be `false` in that case (hide the column entirely).
+- Summary fields filtered by `availableInChannel.selfService` — if all fields are filtered out, the summary column may be empty.
+- The self-service header differs from the standard case header — it is a separate sub-component, not the full `CaseView` header.
+
+## Dependencies
+
+- `prepareCaseSummaryData` from `./utils` — with self-service channel filter applied
+- `filterUtilities` from `./utils` — removes non-self-service utilities
+- `selfServiceCaseViewHeader` — inline sub-component or imported header
+- `PConnectComponent` from `@pega/sdk-react`
+
+## Design System Mapping
+
+**UI control type:** Self-service portal case workspace — horizontal 3-panel flex layout.
+
+Listed design systems are examples only.
+
+| Design System      | Layout                                                                 | Header Bar                  |
+| ------------------ | ---------------------------------------------------------------------- | --------------------------- |
+| Default (CSS only) | CSS `display:flex` with percentage widths                              | Custom `<header>`           |
+| MUI                | `<Box display='flex' flexDirection='row'>` with `<Box flex='0 0 25%'>` | `<Box>` with `<Typography>` |
+| Ant Design         | `<Layout>` with `<Sider>` + `<Content>`                                | `<PageHeader>`              |
+| Chakra UI          | `<HStack align='stretch'>` with width constraints                      | `<Flex>`                    |
+| Shadcn/ui          | Tailwind `flex flex-row`                                               | Custom header               |
+
+When implementing in a specific design system:
+
+- `isObjectType` determines child count — do not assume fixed child order without checking this flag
+- Self-service channel filter on summary data is mandatory — `availableInChannel.selfService === true`
+- `filterUtilities` result controls utilities column visibility

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

@@ -0,0 +1,190 @@
+# Skill: SimpleTable
+
+Simple table template. Routes to FieldGroupTemplate, ListView (read-only), or the manual editable table based on configuration. Also covers `SimpleTableManual`, `SimpleTableSelect`, and `SimpleTableSelectReadonly` sub-variants.
+
+> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
+
+---
+
+## Component Purpose
+
+Entry-point template for embedded table data in a form or detail view. Routes to the appropriate sub-component based on `multiRecordDisplayAs`, `fieldMetadata.dataRetrievalType`, and `readOnly`/`displayMode` flags. Sub-variants handle selection, read-only display, and full manual editing.
+
+## Pega Metadata
+
+- **Registration keys:** `SimpleTable`, `SimpleTableManual`, `SimpleTableSelect`, `SimpleTableSelectReadonly` (all in `component-map.ts`)
+- **Category:** Data display / Form template — embedded table
+- **Extends:** `PConnProps`
+
+## Props
+
+| Prop                   | Type       | Required | Description                                                                               |
+| ---------------------- | ---------- | -------- | ----------------------------------------------------------------------------------------- |
+| `multiRecordDisplayAs` | `string`   | No       | `'fieldGroup'` delegates to FieldGroupTemplate; else table                                |
+| `fieldMetadata`        | `object`   | No       | Field-level metadata including `dataRetrievalType`                                        |
+| `referenceList`        | `string`   | No       | Property path to the reference list                                                       |
+| `displayAs`            | `string`   | No       | For SimpleTableSelectReadonly: `'readonlyMulti'`, `'combobox'`, `'checkboxgroup'` routing |
+| `selectionMode`        | `string`   | No       | `'single'` or `'multi'` (for SimpleTableSelect)                                           |
+| `displayMode`          | `string`   | No       | `'DISPLAY_ONLY'` triggers read-only sub-variant                                           |
+| `readOnly`             | `boolean`  | No       | Alternative read-only flag                                                                |
+| `getPConnect`          | `function` | Yes      | PConnect getter                                                                           |
+
+## Component Skeleton
+
+### SimpleTable (router)
+
+```typescript
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import { buildMetaForListView, getContext } from '../../../helpers/simpleTableHelpers';
+
+export default function SimpleTable(props: SimpleTableProps) {
+  const ListView = getComponentFromRegistry('ListView');
+  const FieldGroupTemplate = getComponentFromRegistry('FieldGroupTemplate');
+  const SimpleTableManual = getComponentFromRegistry('SimpleTableManual');
+  const { getPConnect, multiRecordDisplayAs, allowTableEdit, fieldMetadata, displayMode, ... } = props;
+
+  // 1. Route: fieldGroup
+  if (multiRecordDisplayAs === 'fieldGroup') {
+    return <FieldGroupTemplate {...props} contextClass={contextClass} />;
+  }
+
+  // 2. Route: reference list (read-only ListView)
+  if (fieldMetadata?.type === 'Page List' && fieldMetadata?.dataRetrievalType === 'refer') {
+    const metaForListView = buildMetaForListView(...);
+    return <ListView {...listViewProps} bInForm={true} displayMode={displayMode} />;
+  }
+
+  // 3. Route: editable table
+  return <SimpleTableManual {...props} contextClass={contextClass} />;
+}
+```
+
+### SimpleTableManual (editable table — ~600+ lines)
+
+Key structural outline:
+
+- `getReferenceList(pConn)` + `setReferenceList`
+- `buildElementsForTable()` — creates PConnect views per cell
+- `generateRowsData()` — for read-only/modal mode
+- `addRecord()` / `deleteRecord()` / `editRecord()` with modal support
+- Sort/filter/column menu (same pattern as ListView)
+- Render: Table with header sort + body rows + add/delete controls
+
+### SimpleTableSelect (selection wrapper)
+
+```typescript
+const ListView = getComponentFromRegistry('ListView');
+const PromotedFilters = getComponentFromRegistry('PromotedFilters');
+// Build additionalTableConfig with selectionMode, compositeKeys
+// If promoted filters exist: <PromotedFilters ... />
+// Else: <ListView {...listViewProps} />
+```
+
+### SimpleTableSelectReadonly (link + modal)
+
+```typescript
+// Renders SemanticLink per selected item (comma-separated)
+// If list > 5 items: show "(N Total)" link that opens modal
+// Modal: <Dialog><SimpleTableManual readOnly ... /></Dialog>
+```
+
+## Behavioral Contract
+
+### SimpleTable — Routing Logic
+
+```
+if multiRecordDisplayAs === 'fieldGroup':
+  → render FieldGroupTemplate
+else if fieldMetadata.dataRetrievalType === 'refer':
+  → render ListView (read-only, bInForm: true)
+else:
+  → render SimpleTableManual (editable table)
+```
+
+### SimpleTableManual — Full Editable Table
+
+Full MUI table with add/delete rows, inline editing, sort, filter, and column customization (~600+ lines).
+
+Key behaviors:
+
+1. **Row data source:** `referenceList` property path via `pConn.getValue(referenceList + '.pxResults')`.
+2. **Add row:** `pConn.getListActions().insert({})`.
+3. **Delete row:** `pConn.getListActions().deleteEntry(index)`.
+4. **Inline field editing:** Each cell renders the field's registered edit component via `buildView(pConn, rowIndex, colFieldName)`.
+5. **Sort:** Client-side sort on loaded data.
+6. **Column customization:** Visibility toggles per column via a settings popover.
+7. **Filter dialog:** Same filter pattern as ListView.
+
+### SimpleTableSelect — Selection Mode
+
+Wraps `ListView` with additional selection configuration:
+
+- Passes `additionalTableConfig` with `selectionMode: 'single'` or `'multi'`.
+- On selection: calls `pConn.getListActions().setSelectedRow(selectedData)`.
+- Used when `DataReference` routes to table-based selection.
+
+### SimpleTableSelectReadonly — Read-Only with Modal
+
+1. Renders a link/chip showing the current selection count.
+2. On click: opens a `<Dialog>` containing a `<SimpleTableManual>` in read-only mode.
+3. Props: same as `SimpleTableManual` but all fields locked (no add/delete/edit).
+
+## Visual Specifications
+
+### SimpleTableManual
+
+| Element         | Description                                            |
+| --------------- | ------------------------------------------------------ |
+| Toolbar         | Column settings button, filter button, optional search |
+| Table           | Full-width, alternating row colors                     |
+| Add row         | `"+ Add row"` button below the table                   |
+| Delete row      | Trash icon per row (rightmost column)                  |
+| Column settings | Popover with checkboxes for visibility toggles         |
+
+**CSS-only implementation notes:**
+
+- Table: `width: 100%; border-collapse: collapse`.
+- Add row button: `margin-top: 0.5rem; text-align: left`.
+- Delete cell: `width: 40px; text-align: center`.
+- Read-only mode: hide add/delete controls; cells show plain text.
+
+### SimpleTableSelectReadonly
+
+| Element     | Description                                        |
+| ----------- | -------------------------------------------------- |
+| Trigger     | Link or chip showing selection count               |
+| Modal       | Full-screen or large dialog with SimpleTableManual |
+| Modal close | `X` button in modal header                         |
+
+## Edge Cases & Special Logic
+
+- `multiRecordDisplayAs === 'fieldGroup'` — completely bypasses table; delegates to `FieldGroupTemplate`.
+- `dataRetrievalType === 'refer'` — data comes from a reference list, not a full data page; use `ListView` in read-only mode.
+- `SimpleTableManual` with 600+ lines — break into sub-hooks if re-implementing.
+- Row keys must be unique — use composite keys from `compositeKeys` config if available.
+- Column customization state is local — not persisted across navigation.
+
+## Dependencies
+
+- `FieldGroupTemplate` (for `multiRecordDisplayAs === 'fieldGroup'` routing)
+- `ListView` (for `dataRetrievalType === 'refer'` routing)
+- `buildView` from `../../helpers/field-group-utils` (for inline cell rendering in SimpleTableManual)
+- MUI: `<Table>`, `<Dialog>`, `<Popover>`, `<IconButton>`, `<Button>`, `<Checkbox>`
+
+## Design System Mapping
+
+**UI control type:** Embedded data table with routing to field group, read-only list, or fully editable table.
+
+Listed design systems are examples only.
+
+| Sub-variant               | Default (CSS only)            | MUI                  |
+| ------------------------- | ----------------------------- | -------------------- |
+| SimpleTableManual         | `<table>` + custom controls   | MUI `<Table>`        |
+| SimpleTableSelect         | Custom table + radio/checkbox | `<ListView>` wrapper |
+| SimpleTableSelectReadonly | Link + `<dialog>`             | Chip + `<Dialog>`    |
+
+When implementing in a specific design system:
+
+- Always check `multiRecordDisplayAs === 'fieldGroup'` first — this bypasses the table entirely
+- `SimpleTableManual` add/delete row controls must be hidden when `readOnly === true` or `displayMode === 'DISPLAY_ONLY'`
+- `SimpleTableSelect` uses the same `ListView` but adds selection callbacks

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

@@ -0,0 +1,160 @@
+# Skill: SingleReferenceReadOnly
+
+Single reference read-only template. Renders a read-only reference field as a semantic link for editable field types, or as a plain label otherwise.
+
+> **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 single data reference field in read-only mode. For fields that were displayed as editable selection controls (autocomplete, table select, dropdown), renders a `SemanticLink` component so the reference value is clickable/navigable. For other display types, renders a plain read-only label.
+
+## Pega Metadata
+
+- **Registration key:** `SingleReferenceReadOnly` (in `component-map.ts`)
+- **Category:** Display template — read-only reference
+- **Extends:** `PConnProps`
+
+## Props
+
+| Prop              | Type       | Required | Description                                               |
+| ----------------- | ---------- | -------- | --------------------------------------------------------- |
+| `label`           | `string`   | Yes      | Field label                                               |
+| `displayAs`       | `string`   | Yes      | The edit-mode display type this field was configured with |
+| `value`           | `string`   | No       | Current field value (display text)                        |
+| `caseClass`       | `string`   | No       | Class identifier for the referenced case                  |
+| `text`            | `string`   | No       | Display text for the semantic link                        |
+| `caseID`          | `string`   | No       | Case ID for the semantic link                             |
+| `contextPage`     | `string`   | No       | Context page identifier                                   |
+| `resourceParams`  | `object`   | No       | Parameters for the referenced resource                    |
+| `resourcePayload` | `object`   | No       | Payload for resource navigation                           |
+| `getPConnect`     | `function` | Yes      | PConnect getter                                           |
+
+## Component Skeleton
+
+```typescript
+import type { PConnProps } from '@pega/sdk-react';
+
+interface SingleReferenceReadOnlyProps extends PConnProps {
+  config: any;
+  displayAs?: string;
+  ruleClass?: string;
+  label?: string;
+  displayMode?: string;
+  type: string;
+  referenceType?: string;
+  hideLabel?: boolean;
+  dataRelationshipContext?: string;
+}
+
+export default function SingleReferenceReadOnly(props: SingleReferenceReadOnlyProps) {
+  const {
+    getPConnect, displayAs = '', ruleClass = '', label = '',
+    type = '', displayMode = '', referenceType = '',
+    hideLabel = false, dataRelationshipContext = null, config,
+  } = props;
+
+  const editableComponents = ['AutoComplete', 'SimpleTableSelect', 'Dropdown'];
+
+  // 1. For editable field types: build SemanticLink config
+  if (editableComponents.includes(type)) {
+    config.caseClass = ruleClass;
+    config.text = config.primaryField;
+    config.caseID = config.value;
+    config.contextPage = `@P .${dataRelationshipContext}`;
+    config.resourceParams = { workID: displayAs === 'table' ? config.selectionKey : config.value };
+    config.resourcePayload = { caseClassName: ruleClass };
+  }
+
+  // 2. Create SemanticLink component
+  const component = getPConnect().createComponent(
+    { type: 'SemanticLink', config: { ...config, label, displayMode, referenceType, hideLabel, dataRelationshipContext } },
+    '', 0, {},
+  );
+
+  // 3. Render: label + semantic link in row layout
+  return (
+    <FormRow>
+      <Label>{label}</Label>
+      {component}
+    </FormRow>
+  );
+}
+```
+
+## Behavioral Contract
+
+### Editable Component Check
+
+```
+editableComponents = ['AutoComplete', 'SimpleTableSelect', 'Dropdown']
+```
+
+If `displayAs` is in `editableComponents`:
+
+1. Build config with: `caseClass`, `text`, `caseID`, `contextPage`, `resourceParams`, `resourcePayload`.
+2. Create: `createComponent({ type: 'SemanticLink', config: { ...builtConfig } })`.
+3. Render the created `SemanticLink` component.
+
+Else:
+
+- Render a plain read-only display using `<FormControl variant='standard'>` + `<FormLabel>` + value text.
+
+### Layout
+
+For both variants, wrap with:
+
+```tsx
+<FormControl variant="standard" sx={{ flexDirection: 'row' }}>
+  <FormLabel sx={{ marginRight: '2rem' }}>{label}</FormLabel>
+  {semanLinkOrValue}
+</FormControl>
+```
+
+## Visual Specifications
+
+| Variant         | Layout                                |
+| --------------- | ------------------------------------- |
+| SemanticLink    | Label (left) + clickable link (right) |
+| Plain read-only | Label (left) + plain text (right)     |
+
+**CSS-only implementation notes:**
+
+- Wrapper: `display: flex; flex-direction: row; align-items: baseline; gap: 1rem`.
+- Label: `font-size: 0.875rem; color: var(--secondary-text-color); min-width: 120px`.
+- Semantic link: `color: var(--link-color); text-decoration: underline; cursor: pointer`.
+- Plain value: `font-size: 0.875rem; color: var(--primary-text-color)`.
+
+## Edge Cases & Special Logic
+
+- `displayAs` check is case-sensitive — values are `'AutoComplete'`, `'SimpleTableSelect'`, `'Dropdown'` (exact match).
+- `createComponent` returns a PConnect config — render via `createElement(PConnectComponent, { ...createdConfig })`.
+- If `text` is empty/undefined, the semantic link shows the `caseID` as fallback text.
+- `SemanticLink` navigation requires `caseClass` and `caseID` — if either is missing, fall back to plain read-only display.
+
+## Dependencies
+
+- `PConnectComponent` from `@pega/sdk-react` — for rendering the `SemanticLink`
+- `getPConnect().createComponent()` — creates the SemanticLink component config
+- MUI: `<FormControl>`, `<FormLabel>`
+
+## Design System Mapping
+
+**UI control type:** Read-only reference field — semantic link for navigable references, plain label otherwise.
+
+Listed design systems are examples only.
+
+| Design System      | Semantic Link                                 | Plain Read-Only     |
+| ------------------ | --------------------------------------------- | ------------------- |
+| Default (CSS only) | `<a>` with case navigation                    | `<span>`            |
+| MUI                | `SemanticLink` rendered via `createComponent` | `<Typography>`      |
+| Ant Design         | `<Typography.Link>`                           | `<Typography.Text>` |
+| Chakra UI          | `<Link>`                                      | `<Text>`            |
+| Shadcn/ui          | Custom link                                   | `<span>`            |
+
+When implementing in a specific design system:
+
+- The `editableComponents` list (`'AutoComplete'`, `'SimpleTableSelect'`, `'Dropdown'`) controls semantic link vs plain display
+- `SemanticLink` must be rendered via `createComponent` — do not implement the link logic directly in this component
+- Horizontal label + value layout (row direction) is required

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

@@ -1,8 +1,3 @@
----
-description: Template component skill: SubTabs
-alwaysApply: false
----
-
 # Skill: SubTabs
 
 Sub-tabs navigation template. Renders a tab container for case view sections using shared tab utilities with deferred content loading.
@@ -23,10 +18,57 @@ Renders a horizontal tab bar for navigating between case view sections. Uses sha
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode[]` | Yes | `children[0]` is the deferred-loaded tabs container |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop          | Type          | Required | Description                                         |
+| ------------- | ------------- | -------- | --------------------------------------------------- |
+| `children`    | `ReactNode[]` | Yes      | `children[0]` is the deferred-loaded tabs container |
+| `getPConnect` | `function`    | Yes      | PConnect getter                                     |
+
+## Component Skeleton
+
+```typescript
+import { Children, type PropsWithChildren, useEffect, useState } from 'react';
+import { getTransientTabs, getVisibleTabs, tabClick } from './tabUtils';
+import type { PConnProps } from '@pega/sdk-react';
+
+export default function SubTabs(props: PropsWithChildren<PConnProps>) {
+  const { children = [] } = props;
+
+  // 1. Extract deferred tabs
+  const deferLoadedTabs = Children.toArray(children)[0];
+  const availableTabs = getVisibleTabs(deferLoadedTabs, 'tabsSubs');
+
+  // 2. State
+  const [currentTabId, setCurrentTabId] = useState('0');
+  const [tabItems, setTabitem] = useState<any[]>([]);
+
+  // 3. Update tab items when currentTabId changes
+  useEffect(() => {
+    setTabitem(getTransientTabs(availableTabs, currentTabId, tabItems));
+  }, [currentTabId]);
+
+  // 4. Tab click
+  const handleTabClick = (id, index: string) => {
+    setCurrentTabId(index);
+    tabClick(index, availableTabs, currentTabId, setCurrentTabId, tabItems);
+  };
+
+  // 5. Render: TabContext + Tabs (scrollable) + TabPanels (no heading)
+  return (
+    <TabContext value={currentTabId.toString()}>
+      <TabBar onChange={handleTabClick} value={currentTabId} variant="scrollable">
+        {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>
+  );
+}
+```
+
+> **Key difference from `DetailsSubTabs`:** No heading, uses `'tabsSubs'` identifier, `getVisibleTabs` called directly (not in useEffect).
 
 ## Behavioral Contract
 
@@ -48,6 +90,7 @@ Renders a horizontal tab bar for navigating between case view sections. Uses sha
 Identical to `DetailsSubTabs` except no heading above the tab bar.
 
 **CSS-only implementation notes:**
+
 - Tab bar: `display: flex; border-bottom: 2px solid var(--divider)`.
 - Each tab: `padding: 8px 16px; cursor: pointer; border-bottom: 2px solid transparent`.
 - Active tab: `border-bottom-color: var(--app-primary-color); font-weight: 600`.
@@ -56,6 +99,7 @@ Identical to `DetailsSubTabs` except no heading above the tab bar.
 ## Edge Cases & Special Logic
 
 See `DetailsSubTabs.md` for shared edge cases. Additional:
+
 - `tabUtils` identifier string `'tabsSubs'` must match exactly — it is used internally by `getVisibleTabs` for scoping.
 
 ## Dependencies
@@ -70,15 +114,16 @@ See `DetailsSubTabs.md` for shared edge cases. Additional:
 
 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:
+
 - Use `getVisibleTabs(tabs, 'tabsSubs')` — the identifier string must be `'tabsSubs'`
 - No heading above the tab bar (unlike `DetailsSubTabs`)
 - Deferred loading: content populates lazily via `getTransientTabs`