@pega/sdk 0.0.5 → 0.0.6

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

@@ -12,11 +12,11 @@ Entry-point template for embedded table data in a form or detail view. Routes to
 
 ## Pega Metadata
 
-- **Registration keys:** `SimpleTable`, `SimpleTableManual`, `SimpleTableSelect`, `SimpleTableSelectReadonly` (all in `component-map.ts`)
+- **Registration keys:** `SimpleTable`, `SimpleTableManual`, `SimpleTableSelect`, `SimpleTableSelectReadonly` (all in the project's component map)
 - **Category:** Data display / Form template — embedded table
-- **Extends:** `PConnProps`
+- **Extends:** The project's base component interface
 
-## Props
+## Inputs
 
 | Prop                   | Type       | Required | Description                                                                               |
 | ---------------------- | ---------- | -------- | ----------------------------------------------------------------------------------------- |
@@ -29,35 +29,18 @@ Entry-point template for embedded table data in a form or detail view. Routes to
 | `readOnly`             | `boolean`  | No       | Alternative read-only flag                                                                |
 | `getPConnect`          | `function` | Yes      | PConnect getter                                                                           |
 
-## Component Skeleton
+## Implementation Structure
 
 ### SimpleTable (router)
 
-```typescript
-import { getComponentFromRegistry } from '@pega/sdk-react';
-import { buildMetaForListView, getContext } from '../../../helpers/simpleTableHelpers';
+**Module Setup:** The component depends on the project's component registry (to resolve `ListView`, `FieldGroupTemplate`, and `SimpleTableManual`) and the project's simple-table helper utilities (`buildMetaForListView` and `getContext`).
 
-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;
+**Main Component Logic** — steps in order:
 
-  // 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} />;
-}
-```
+1. Resolve `ListView`, `FieldGroupTemplate`, and `SimpleTableManual` from the project's component registry; receive `getPConnect`, `multiRecordDisplayAs`, `allowTableEdit`, `fieldMetadata`, `displayMode`, and other relevant inputs.
+2. **Route to `fieldGroup`:** when `multiRecordDisplayAs === 'fieldGroup'`, render `FieldGroupTemplate` with all inputs plus `contextClass`.
+3. **Route to a read-only reference list:** when `fieldMetadata?.type === 'Page List'` and `fieldMetadata?.dataRetrievalType === 'refer'`, build `metaForListView` via `buildMetaForListView(...)` and render `ListView` with the list-view inputs plus `bInForm: true` and `displayMode`.
+4. **Route to the editable table:** otherwise, render `SimpleTableManual` with all inputs plus `contextClass`.
 
 ### SimpleTableManual (editable table — ~600+ lines)
 
@@ -72,38 +55,21 @@ Key structural outline:
 
 ### 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} />
-```
+Retrieve `ListView` and `PromotedFilters` from the component registry. Build an `additionalTableConfig` incorporating `selectionMode` and `compositeKeys`. When promoted filters are configured, render `<PromotedFilters ... />`; otherwise render `<ListView {...listViewProps} />` directly.
 
 ### 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>
-```
+Renders a `SemanticLink` per selected item (comma-separated). When the list has more than 5 items, show a "(N Total)" link that opens a modal. The modal renders a `<Dialog>` wrapping a read-only `<SimpleTableManual readOnly ... />`.
 
 ## 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)
-```
+When `multiRecordDisplayAs === 'fieldGroup'`, render `FieldGroupTemplate`. Otherwise, when `fieldMetadata.dataRetrievalType === 'refer'`, render `ListView` (read-only, `bInForm: true`). Otherwise, render `SimpleTableManual` (the editable table).
 
 ### SimpleTableManual — Full Editable Table
 
-Full MUI table with add/delete rows, inline editing, sort, filter, and column customization (~600+ lines).
+Full editable table with add/delete rows, inline editing, sort, filter, and column customization (~600+ lines).
 
 Key behaviors:
 
@@ -127,7 +93,7 @@ Wraps `ListView` with additional selection configuration:
 
 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).
+3. Inputs: same as `SimpleTableManual` but all fields locked (no add/delete/edit).
 
 ## Visual Specifications
 
@@ -168,23 +134,18 @@ Wraps `ListView` with additional selection configuration:
 
 - `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>`
+- `buildView` from the project's field-group utility helpers (for inline cell rendering in SimpleTableManual)
+- The design system's table, dialog, popover, icon button, button, and checkbox components.
 
 ## 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:
+When implementing in a specific design system, map the following:
 
+- **SimpleTableManual** → use the DS's table component with add/delete row controls and inline editing
+- **SimpleTableSelect** → use `ListView` with selection mode enabled, optionally with promoted filters
+- **SimpleTableSelectReadonly** → render selected values as chips/links that open a modal with full list view
 - 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

@@ -12,86 +12,45 @@ Renders a single data reference field in read-only mode. For fields that were di
 
 ## Pega Metadata
 
-- **Registration key:** `SingleReferenceReadOnly` (in `component-map.ts`)
+- **Registration key:** `SingleReferenceReadOnly` (in the project's component map)
 - **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>
-  );
-}
-```
+- **Extends:** the project's base component interface
+
+## Inputs
+
+| Input                     | 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                           |
+| `dataRelationshipContext` | `string`   | No       | Data relationship context identifier                      |
+| `getPConnect`             | `function` | Yes      | PConnect getter                                           |
+
+## Implementation Structure
+
+**Module Setup:** This component requires the project's base component interface. Define a component input contract extending the base interface with `config` (object), optional `displayAs`, optional `ruleClass`, optional `label`, optional `displayMode`, `type` (string), optional `referenceType`, optional `hideLabel`, and optional `dataRelationshipContext`.
+
+**Main Component Logic** — steps in order:
+
+1. Receive inputs: `getPConnect`, `displayAs` (default `''`), `ruleClass` (default `''`), `label` (default `''`), `type` (default `''`), `displayMode` (default `''`), `referenceType` (default `''`), `hideLabel` (default `false`), `dataRelationshipContext` (default `null`), and `config`.
+2. Define `editableComponents = ['AutoComplete', 'SimpleTableSelect', 'Dropdown']`.
+3. **For editable field types** (when `type` is in `editableComponents`), mutate `config` to add semantic link configuration: `caseClass = ruleClass`; `text = config.primaryField`; `caseID = config.value`; `contextPage = '@P .' + dataRelationshipContext`; `resourceParams = { workID: displayAs === 'table' ? config.selectionKey : config.value }`; `resourcePayload = { caseClassName: ruleClass }`.
+4. Create the `SemanticLink` component via `getPConnect().createComponent({ type: 'SemanticLink', config: { ...config, label, displayMode, referenceType, hideLabel, dataRelationshipContext } }, '', 0, {})`.
+5. Render a form row containing a label showing `label`, followed by the created component.
 
 ## Behavioral Contract
 
 ### Editable Component Check
 
-```
-editableComponents = ['AutoComplete', 'SimpleTableSelect', 'Dropdown']
-```
+`editableComponents = ['AutoComplete', 'SimpleTableSelect', 'Dropdown']`.
 
-If `displayAs` is in `editableComponents`:
+If `type` is in `editableComponents`:
 
 1. Build config with: `caseClass`, `text`, `caseID`, `contextPage`, `resourceParams`, `resourcePayload`.
 2. Create: `createComponent({ type: 'SemanticLink', config: { ...builtConfig } })`.
@@ -99,18 +58,11 @@ If `displayAs` is in `editableComponents`:
 
 Else:
 
-- Render a plain read-only display using `<FormControl variant='standard'>` + `<FormLabel>` + value text.
+- Render a plain read-only display with a label and value text.
 
 ### Layout
 
-For both variants, wrap with:
-
-```tsx
-<FormControl variant="standard" sx={{ flexDirection: 'row' }}>
-  <FormLabel sx={{ marginRight: '2rem' }}>{label}</FormLabel>
-  {semanLinkOrValue}
-</FormControl>
-```
+For both variants, wrap the label and the semantic link (or plain value) in a row-oriented form control: a container styled with row direction, containing a label element (with right margin) showing `label`, followed by the semantic link or value.
 
 ## Visual Specifications
 
@@ -128,33 +80,24 @@ For both variants, wrap with:
 
 ## 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 })`.
+- `type` check is case-sensitive — values are `'AutoComplete'`, `'SimpleTableSelect'`, `'Dropdown'` (exact match).
+- `createComponent` returns a renderable component — render it via the project's component registry conventions.
 - 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`
+- The project's component registry — 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:
+When implementing in a specific design system, map the following:
 
-- 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
+- For editable field types (`'AutoComplete'`, `'SimpleTableSelect'`, `'Dropdown'`), render a semantic link that navigates to the referenced case.
+- For other field types, render a plain read-only label with the value text.
+- `SemanticLink` must be rendered via `createComponent` — do not implement the link logic directly in this component.
+- Horizontal label + value layout (row direction) is required.
+- The wrapper should be a form-control-style container with flex row direction and appropriate spacing between label and value.

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

@@ -12,78 +12,47 @@ Renders a horizontal tab bar for navigating between case view sections. Uses sha
 
 ## Pega Metadata
 
-- **Registration key:** `SubTabs` (in `component-map.ts`)
+- **Registration key:** `SubTabs` (in the project's component map)
 - **Category:** Navigation template
-- **Extends:** `PConnProps`
-
-## Props
-
-| 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).
+- **Extends:** the project's base component interface
+
+## Inputs
+
+| Input         | Type             | Required | Description                                         |
+| ------------- | ---------------- | -------- | --------------------------------------------------- |
+| `children`    | child node array | Yes      | `children[0]` is the deferred-loaded tabs container |
+| `getPConnect` | function         | Yes      | PConnect getter                                     |
+
+## Implementation Structure
+
+**Module Setup:** The component requires access to a framework utility for converting children to an array, local state and lifecycle effect primitives, `getTransientTabs`, `getVisibleTabs`, and `tabClick` from the local tab utilities module, and the project's base component interface.
+
+**Main Component Logic** — steps in order:
+
+1. Receive inputs: extract `children` (defaulting to an empty array).
+2. Extract the deferred tabs container: convert children to an array and take the first element.
+3. Compute `availableTabs` via `getVisibleTabs(deferLoadedTabs, 'tabsSubs')`.
+4. Declare local state: `currentTabId` (string, initialized to `'0'`) and `tabItems` (array, initialized empty).
+5. In a lifecycle effect keyed on `currentTabId`, update `tabItems` via `getTransientTabs(availableTabs, currentTabId, tabItems)`.
+6. Define a tab-click handler that sets `currentTabId` to the clicked index and calls `tabClick(index, availableTabs, currentTabId, setCurrentTabId, tabItems)`.
+7. Render a tab context wrapping a scrollable tab bar (one tab per `tabItems` entry, labeled `tab.name`) and a set of tab panels (each showing `tab.content` or a "No content exists" fallback) — no section heading is rendered.
+
+> **Key difference from `DetailsSubTabs`:** No heading, uses `'tabsSubs'` identifier, `getVisibleTabs` called directly (not inside a lifecycle effect).
 
 ## Behavioral Contract
 
-1. **Extract deferred tabs:** `deferLoadedTabs = Children.toArray(children)[0]`.
+1. **Extract deferred tabs:** `deferLoadedTabs` = first element of the children array.
 2. **State:** `currentTabId` (string, default `'0'`), `tabItems` (array).
-3. **Compute visible tabs:** `getVisibleTabs(deferLoadedTabs, 'tabsSubs')` in `useEffect([deferLoadedTabs])` → `availableTabs`.
-4. **Transient tabs:** `useEffect([currentTabId])` → `setTabItems(getTransientTabs(availableTabs, currentTabId, tabItems))`.
+3. **Compute visible tabs:** `getVisibleTabs(deferLoadedTabs, 'tabsSubs')` → `availableTabs`.
+4. **Transient tabs:** lifecycle effect keyed on `currentTabId` → update `tabItems` via `getTransientTabs(availableTabs, currentTabId, tabItems)`.
 5. **Tab click:** `tabClick(index, availableTabs, currentTabId, setCurrentTabId, tabItems)` from `tabUtils`.
 6. **Render:**
-   - `<TabContext value={currentTabId}>`
-   - `<Tabs onChange={handleTabClick} value={currentTabId}>` — one `<Tab>` per `tabItems`
-   - One `<TabPanel>` per `tabItems` with `tab.content || ''`
+   - A tab context container bound to `currentTabId`
+   - A scrollable tab bar with change handler — one tab per `tabItems` entry
+   - One tab panel per `tabItems` entry with `tab.content` or empty fallback text "No content exists"
 7. No section heading (unlike `DetailsSubTabs`).
 
-> **Difference from `DetailsSubTabs`:** SubTabs has no `label`/`showLabel` props and no `<h3>` heading. Uses `'tabsSubs'` identifier for `getVisibleTabs` (vs `'detailsSubTabs'`).
+> **Difference from `DetailsSubTabs`:** SubTabs has no `label`/`showLabel` inputs and no heading. Uses `'tabsSubs'` identifier for `getVisibleTabs` (vs `'detailsSubTabs'`).
 
 ## Visual Specifications
 
@@ -104,25 +73,16 @@ See `DetailsSubTabs.md` for shared edge cases. Additional:
 
 ## Dependencies
 
-- `getTransientTabs`, `getVisibleTabs`, `tabClick` from `./tabUtils`
-- `TabContext`, `TabPanel` from `@mui/lab`
-- `Tab`, `Tabs` from `@mui/material`
+- `getTransientTabs`, `getVisibleTabs`, `tabClick` from the local tab utilities module (`tabUtils`)
+- A design-system tab container, tab bar, and tab panel component (see below)
 
 ## Design System Mapping
 
 **UI control type:** Tab navigation container — no heading, deferred content loading.
 
-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>`                |
+When implementing in a specific design system, map the following: a tab context container that holds the current tab value; a scrollable tab bar component that emits a change event with the selected index; individual tab items with label text; and tab panel containers that display content for the active tab. In a CSS-only approach, use a custom tab bar with an underline indicator. Other design systems provide equivalent compound tab components.
 
-When implementing in a specific design system:
+When implementing:
 
 - Use `getVisibleTabs(tabs, 'tabsSubs')` — the identifier string must be `'tabsSubs'`
 - No heading above the tab bar (unlike `DetailsSubTabs`)