@pega/sdk 0.0.4 → 0.0.6

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

@@ -1,130 +0,0 @@
-# Skill: PromotedFilters
-
-Promoted filters template. Renders a set of promoted filter fields above a `ListView`, allowing users to filter list data through a Clear/Search workflow using transient data.
-
-> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
-
----
-
-## Component Purpose
-
-Renders promoted filter controls above a list view. Filter fields are created dynamically via `PCore.createPConnect` and managed as transient data. On search, filter values are formatted and passed to the `ListView` as a query payload. The component also handles the `ListView` rendering below the filters.
-
-## Pega Metadata
-
-- **Registration key:** `PromotedFilters` (in `component-map.ts`)
-- **Category:** Search / Filter template
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop              | Type       | Required | Description                                                   |
-| ----------------- | ---------- | -------- | ------------------------------------------------------------- |
-| `viewName`        | `string`   | Yes      | Name of the promoted filters view — used as transient item ID |
-| `dataPageName`    | `string`   | Yes      | Data page name passed to `ListView`                           |
-| `promotedFilters` | `array`    | Yes      | Array of filter field definitions `{ name, classID, ... }`    |
-| `payload`         | `object`   | No       | Base query payload for the data page                          |
-| `isSearchable`    | `boolean`  | No       | Whether the ListView below shows a global search input        |
-| `getPConnect`     | `function` | Yes      | PConnect getter                                               |
-
-## Behavioral Contract
-
-### Transient Data Setup
-
-On mount:
-
-1. Build `filtersWithClassID`: add `classID` to each filter from `getPConnect().getContextName()` or metadata.
-2. Call `PCore.getDataPageUtils().addTransientItem({ id: viewName, data: filtersWithClassID })`.
-3. This creates a transient data context for the filter fields.
-
-### Filters Sub-Component
-
-The `<Filters>` inline sub-component:
-
-1. Creates each filter field via `PCore.createPConnect({ ... filterFieldConfig, contextName: viewName + '.' + filter.name })`.
-2. Renders each created pConnect as a field component via `createElement(PConnectComponent, { ...fieldConfig })`.
-
-### Search
-
-On Search button click:
-
-1. Call `getFilterData(viewName, promotedFilters)`:
-   - For each filter, read current value from transient store.
-   - Build filter objects: `{ lhs: { field: filter.name }, comparator: 'EQ', rhs: { value: currentValue } }`.
-   - Skip filters with empty/null values.
-2. Pass the resulting filter array to `ListView` as `payload.filters`.
-3. `ListView` re-fetches with the filter payload.
-
-### Clear
-
-On Clear button click:
-
-1. Call `clearFilterData(viewName, promotedFilters)`:
-   - For each filter, reset the transient value to `''` or `null`.
-2. Reset `payload.filters` to `[]`.
-3. `ListView` re-fetches without filters.
-
-### Render Structure
-
-```
-<div className="psdk-promoted-filters">
-  <div className="psdk-promoted-filters-fields">
-    <Filters />   {/* filter fields */}
-  </div>
-  <div className="psdk-promoted-filters-actions">
-    <Button onClick={handleClear}>Clear</Button>
-    <Button onClick={handleSearch}>Search</Button>
-  </div>
-  <ListView bInForm={true} isSearchable={isSearchable} dataPageName={dataPageName} payload={activePayload} />
-</div>
-```
-
-## Visual Specifications
-
-| Element           | Description                                |
-| ----------------- | ------------------------------------------ |
-| Filter fields row | Horizontal flex row of filter field inputs |
-| Action buttons    | Clear + Search buttons, right-aligned      |
-| ListView          | Below the filter row, full width           |
-
-**CSS-only implementation notes:**
-
-- Outer container: `display: flex; flex-direction: column; gap: 1rem`.
-- Filter fields row: `display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end`.
-- Action buttons row: `display: flex; gap: 0.5rem; justify-content: flex-end`.
-
-## Edge Cases & Special Logic
-
-- Transient item must be cleaned up on unmount: call `PCore.getDataPageUtils().removeTransientItem(viewName)`.
-- `getFilterData` skips empty values — a filter with no input is not sent to the query.
-- If all filters are empty, the Search returns unfiltered results.
-- `PCore.createPConnect` creates new pConnect instances for each filter — these must be properly keyed and managed.
-
-## Dependencies
-
-- `getFilterData`, `clearFilterData` from `./utils`
-- `PCore.getDataPageUtils().addTransientItem()` — transient context setup
-- `PCore.createPConnect()` — creates pConnect instances for filter fields
-- `ListView` — the list below the filters
-- `PConnectComponent` from `@pega/sdk-react`
-- MUI: `<Button>`
-
-## Design System Mapping
-
-**UI control type:** Filter bar above a list view — transient field inputs + Clear/Search actions.
-
-Listed design systems are examples only.
-
-| Design System      | Filter Row                                     | Action Buttons                       |
-| ------------------ | ---------------------------------------------- | ------------------------------------ |
-| Default (CSS only) | `display: flex; flex-wrap: wrap` inputs        | `<button>` for Clear/Search          |
-| MUI                | `<Box display='flex' flexWrap='wrap' gap={1}>` | `<Button>` variants                  |
-| Ant Design         | `<Space wrap>`                                 | `<Button type='primary'>` for Search |
-| Chakra UI          | `<HStack wrap='wrap'>`                         | `<Button colorScheme='blue'>`        |
-| Shadcn/ui          | Tailwind `flex flex-wrap gap-2`                | `<Button>` variants                  |
-
-When implementing in a specific design system:
-
-- Transient data pattern is critical — each filter field must read/write to `PCore`'s transient store
-- `getFilterData` builds the query filter payload — use it unchanged
-- Transient item cleanup on unmount is required to avoid stale data

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

@@ -1,142 +0,0 @@
-# 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                                                 |
-
-## 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/.github/skills/template-skills/SimpleTable.md

@@ -1,131 +0,0 @@
-# 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                                                                           |
-
-## 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/.github/skills/template-skills/SingleReferenceReadOnly.md

@@ -1,108 +0,0 @@
-# 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                                           |
-
-## 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/.github/skills/template-skills/SubTabs.md

@@ -1,82 +0,0 @@
-# Skill: SubTabs
-
-Sub-tabs navigation template. Renders a tab container for case view sections using shared tab utilities with deferred content loading.
-
-> **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 horizontal tab bar for navigating between case view sections. Uses shared `tabUtils` for tab state management (visible tabs, transient tabs, tab click). Tab content is deferred — only the active tab loads content. No section heading.
-
-## Pega Metadata
-
-- **Registration key:** `SubTabs` (in `component-map.ts`)
-- **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                                     |
-
-## Behavioral Contract
-
-1. **Extract deferred tabs:** `deferLoadedTabs = Children.toArray(children)[0]`.
-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))`.
-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 || ''`
-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'`).
-
-## Visual Specifications
-
-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`.
-- Tab panel: `padding: 16px 0`.
-
-## 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
-
-- `getTransientTabs`, `getVisibleTabs`, `tabClick` from `./tabUtils`
-- `TabContext`, `TabPanel` from `@mui/lab`
-- `Tab`, `Tabs` from `@mui/material`
-
-## 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:
-
-- 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`