@pega/sdk 0.0.3 → 0.0.5

package/templates/react-sdk-reference/.ai-common/skills/field-skills/ScalarList.md

@@ -0,0 +1,188 @@
+# Skill: ScalarList
+
+Read-only display component that renders a list of scalar values by creating a child component for each item.
+
+> **Prerequisite skill:** [`field-components.md`](../field-components.md) — covers architecture, props interface, display modes, event handling, and registration patterns common to ALL field components.
+
+---
+
+## Component Purpose
+
+Renders a list of scalar (primitive) values by dynamically creating a child component of a specified type for each item. Used for read-only display of list-type properties. Not an editable input.
+
+## Pega Metadata
+
+- **Pega Name:** `ScalarList`
+- **Type / Subtype:** `Field` / `ScalarList`
+- **Registration key:** `ScalarList` (in `component-map.ts`)
+
+## Props (component-specific)
+
+> ScalarList uses `PConnProps` (NOT `PConnFieldProps`) because its `value` is an array, not a string:
+
+```typescript
+import type { PConnProps } from '@pega/sdk-react';
+```
+
+| Prop             | Type      | Description                                                                  |
+| ---------------- | --------- | ---------------------------------------------------------------------------- |
+| `value`          | `any[]`   | Array of scalar values to display                                            |
+| `componentType`  | `string`  | The Pega component type to use for each item (e.g., `'TextInput'`, `'Date'`) |
+| `label`          | `string`  | Field label                                                                  |
+| `displayMode`    | `string`  | Display mode                                                                 |
+| `hideLabel`      | `boolean` | Whether to hide the label                                                    |
+| `displayInModal` | `boolean` | Whether this is displayed in a modal context                                 |
+
+All remaining props (`...restProps`) are forwarded to each child component.
+
+## Component Skeleton
+
+Read-only display component — no state, no event handling.
+
+```typescript
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface ScalarListProps extends PConnProps {
+  displayInModal: boolean;
+  hideLabel: boolean;
+  value: any[];
+  componentType: string;
+  label: string;
+  displayMode: string;
+}
+
+// Local sub-component: renders items as spans in an unstyled list
+function CommaSeparatedList({ items }) {
+  return (
+    <ul style={{ padding: '0', margin: '0' }}>
+      {items.map((value, index) => <span key={index}>{value}</span>)}
+    </ul>
+  );
+}
+
+export default function ScalarList(props: ScalarListProps) {
+  // 1. Registry lookup
+  const FieldValueList = getComponentFromRegistry('FieldValueList');
+
+  // 2. Destructure — note ...restProps forwarded to each child
+  const { label, getPConnect, componentType, value: scalarValues, displayMode, hideLabel, ...restProps } = props;
+
+  // 3. Create child components for each scalar value
+  const items = scalarValues?.map((scalarValue) =>
+    getPConnect().createComponent(
+      {
+        type: componentType,
+        config: { value: scalarValue, displayMode: 'DISPLAY_ONLY', label, ...restProps, readOnly: 'true' },
+      },
+      '', '', {},  // 2nd/3rd/4th args per typedef
+    ),
+  );
+
+  // 4. Display mode: STACKED_LARGE_VAL or DISPLAY_ONLY → bare list
+  if (['STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode)) {
+    return <div><CommaSeparatedList items={items} /></div>;
+  }
+
+  // 5. Default: wrap in FieldValueList
+  return <FieldValueList name={hideLabel ? '' : label} value={<CommaSeparatedList items={items} />} variant="stacked" />;
+}
+```
+
+## Behavioral Contract
+
+1. **No state, no event handling** — purely display/read-only.
+2. **Item rendering:** Map each value in `scalarValues` to a component via `getPConnect().createComponent(...)`:
+   ```typescript
+   const items = scalarValues?.map((scalarValue) =>
+     getPConnect().createComponent(
+       {
+         type: componentType,
+         config: {
+           value: scalarValue,
+           displayMode: 'DISPLAY_ONLY',
+           label,
+           ...restProps,
+           readOnly: 'true',
+         },
+       },
+       '', // 2nd arg: empty string
+       '', // 3rd arg: empty string
+       {}, // 4th arg: empty object
+     ),
+   );
+   ```
+3. **`CommaSeparatedList` sub-component:** A local component that renders items as `<span>` elements inside a `<ul>` with no list styling:
+   ```html
+   <ul style="padding: 0; margin: 0;">
+     <span>item1</span>
+     <span>item2</span>
+     ...
+   </ul>
+   ```
+
+## Display Mode Rendering
+
+**`STACKED_LARGE_VAL` or `DISPLAY_ONLY`:**
+
+```html
+<div>
+  <CommaSeparatedList items="{items}" />
+</div>
+```
+
+No `FieldValueList` wrapper in these modes — the items are rendered directly.
+
+**Default (no display mode):**
+
+```
+<FieldValueList name={hideLabel ? '' : label} value={<CommaSeparatedList items={items} />} variant='stacked' />
+```
+
+## Visual Specifications
+
+| Property     | Value                                                             |
+| ------------ | ----------------------------------------------------------------- |
+| List style   | No bullets, no padding, no margin on `<ul>`                       |
+| Item display | Each item rendered as `<span>` (inline)                           |
+| Separator    | Items are adjacent spans (no comma separator despite the name)    |
+| Layout       | Vertical stack when wrapped in `FieldValueList variant='stacked'` |
+
+**CSS-only notes:**
+
+```css
+.scalar-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.scalar-list-item {
+  display: inline;
+}
+```
+
+## Edge Cases & Special Logic
+
+- `scalarValues` may be `undefined` — the `?.map()` safely returns `undefined`; ensure null-check before rendering.
+- Each child component is created with `displayMode: 'DISPLAY_ONLY'` and `readOnly: 'true'` (as string) — the read-only is passed as a string, not boolean.
+- `restProps` includes all remaining props from the parent beyond the destructured ones — these are forwarded to each child component config.
+- `createComponent` takes 4 args — 2nd, 3rd, 4th are empty string/object as the typedef marks them optional.
+
+## Dependencies
+
+- `getComponentFromRegistry('FieldValueList')` for default display.
+- `getPConnect().createComponent()` — for creating each child component.
+- No `handleEvent` — read-only component.
+
+## Design System Mapping
+
+**UI control type:** Read-only list of scalar values.
+
+Listed design systems are examples only.
+
+| Design System      | Recommended Component                                      |
+| ------------------ | ---------------------------------------------------------- |
+| Default (CSS only) | `<ul>` with `<span>` items                                 |
+| MUI                | `<List>` with `<ListItem>` or just `<Typography>` per item |
+| Ant Design         | `<List>` items or `<Space>` with `<Tag>`                   |
+| Chakra UI          | `<List>` or `<HStack>` with `<Tag>`                        |

package/templates/react-sdk-reference/.ai-common/skills/field-skills/SelectableCard.md

@@ -0,0 +1,286 @@
+# Skill: SelectableCard
+
+Card-style radio or checkbox selection grid with optional image support.
+
+> **Prerequisite skill:** [`field-components.md`](../field-components.md) — covers architecture, props interface, display modes, event handling, and registration patterns common to ALL field components.
+
+---
+
+## Component Purpose
+
+Renders a grid of selectable cards. Each card contains a radio button or checkbox (depending on `type`), a label, optional image, and optional additional fields. Cards are clickable — clicking anywhere on the card triggers the input. Used by `RadioButtons` (variant='card') and `Checkbox` (variant='card').
+
+## Pega Metadata
+
+- **Pega Name:** `SelectableCard`
+- **Type / Subtype:** Internal design system extension
+- **Registration key:** `SelectableCard` (in `component-map.ts`)
+
+> This component does NOT have a `config-ext.json` and does NOT extend `PConnFieldProps` — it's a design system component used internally by `RadioButtons` and `Checkbox`.
+
+## Props
+
+| Prop                     | Type                    | Default | Description                                                                        |
+| ------------------------ | ----------------------- | ------- | ---------------------------------------------------------------------------------- |
+| `getPConnect`            | `function`              | —       | PConnect accessor                                                                  |
+| `type`                   | `'radio' \| 'checkbox'` | —       | Selection type                                                                     |
+| `image`                  | `object`                | —       | `{ imagePosition, imageSize, showImageDescription, imageField, imageDescription }` |
+| `dataSource`             | `any`                   | —       | Source of card data (in editable mode)                                             |
+| `recordKey`              | `string`                | `''`    | The key field name in each record (e.g., `'pyID'`)                                 |
+| `className`              | `string`                | —       | CSS class for the card                                                             |
+| `cardLabel`              | `string`                | —       | The field name to use as card title                                                |
+| `hideFieldLabels`        | `boolean`               | `false` | Hide field labels inside cards                                                     |
+| `readOnly`               | `boolean`               | —       | Read-only mode                                                                     |
+| `disabled`               | `boolean`               | —       | Disabled state                                                                     |
+| `readOnlyList`           | `any[]`                 | `[]`    | Selected items for read-only display                                               |
+| `displayMode`            | `string`                | —       | Display mode string                                                                |
+| `radioBtnValue`          | `any`                   | —       | Currently selected value (radio mode)                                              |
+| `onChange`               | `function`              | —       | Change handler                                                                     |
+| `onBlur`                 | `function`              | —       | Blur handler                                                                       |
+| `onClick`                | `function`              | —       | Click handler                                                                      |
+| `onKeyDown`              | `function`              | —       | KeyDown handler                                                                    |
+| `additionalProps`        | `any`                   | —       | Spread onto the radio/checkbox input                                               |
+| `testId`                 | `string`                | —       | Test identifier                                                                    |
+| `setIsRadioCardSelected` | `function`              | —       | Callback to inform parent whether radio selection matched                          |
+| `showNoValue`            | `boolean`               | `false` | When true (read-only + no selected items), render "No Value" text                  |
+
+## Component Skeleton
+
+This component does NOT extend `PConnFieldProps` — it uses raw `props`. No typed interface in the reference implementation.
+
+```typescript
+import { resolveReferenceFields } from './utils';
+
+export default function SelectableCard(props) {
+  // 1. Destructure all props (image is a nested object)
+  const {
+    getPConnect, type,
+    image: { imagePosition, imageSize, showImageDescription, imageField = '', imageDescription = '' },
+    dataSource, recordKey = '', className, cardLabel,
+    hideFieldLabels = false, readOnly, disabled,
+    readOnlyList = [], displayMode, radioBtnValue,
+    onChange, onBlur, onClick, onKeyDown,
+    additionalProps, testId, setIsRadioCardSelected, showNoValue = false,
+  } = props;
+  const pConn = getPConnect();
+
+  // 2. "No Value" guard
+  if (showNoValue) return <Typography>No Value</Typography>;
+
+  // 3. Data source selection
+  const cardDataSource = (readOnly || displayMode === 'DISPLAY_ONLY')
+    ? readOnlyList || [] : dataSource?.source;
+  const imageDescriptionKey = showImageDescription ? imageDescription : undefined;
+
+  // 4. Card click handler — makes entire card clickable
+  const handleCardClick = (event) => {
+    if (disabled || readOnly) return;
+    if (event.target.closest?.('label, input')) return;
+    const input = event.currentTarget.querySelector('input[type="radio"], input[type="checkbox"]');
+    if (input) input.click();
+  };
+
+  // 5. Track radio selection state
+  let radioItemSelected = false;
+
+  // 6. Map cards
+  return (
+    <>
+      {(cardDataSource || []).map((item) => {
+        const resolvedFields = resolveReferenceFields(item, hideFieldLabels, recordKey, pConn);
+        // Build image object if item[imageField] exists
+        // Display mode: render simple read-only card (no input)
+        // Editable mode: render card with Radio or Checkbox inside
+        // Track: if type==='radio' && radioBtnValue === item[recordKey], radioItemSelected=true
+      })}
+      {type === 'radio' && setIsRadioCardSelected && setIsRadioCardSelected(radioItemSelected)}
+    </>
+  );
+}
+```
+
+## Behavioral Contract
+
+### Data source selection
+
+```
+cardDataSource = (readOnly || displayMode === 'DISPLAY_ONLY')
+  ? readOnlyList || []
+  : dataSource?.source
+```
+
+### "No Value" guard
+
+If `showNoValue`: render a plain text element showing `'No Value'` and return early.
+
+### Card click handler
+
+Cards should be clickable anywhere (not just on the checkbox/radio):
+
+```typescript
+const handleCardClick = (event) => {
+  if (disabled || readOnly) return;
+  if (event.target.closest('label, input')) return; // native click already handled
+  const input = event.currentTarget.querySelector('input[type="radio"], input[type="checkbox"]');
+  if (input) input.click();
+};
+```
+
+### Subsection: Display mode (`displayMode === 'DISPLAY_ONLY'`)
+
+Render a **simple read-only card** (no radio/checkbox) with:
+
+- Optional image (`<img>`)
+- Card title: `item[cardLabel]`
+- Additional resolved fields (from `resolveReferenceFields`)
+- `style: { display: 'flex' }`
+
+```html
+<Card style="display: flex">
+  {image && <img src="..." alt="..." style="width: 100px" />}
+  <CardContent>
+    <body1>{item[cardLabel]}</body1>
+    {fields.map(field => <body2>{field.value}</body2>)}
+  </CardContent>
+</Card>
+```
+
+### Subsection: Editable mode (radio or checkbox)
+
+Render a **selectable card** with click handler, containing the appropriate input:
+
+```html
+<div style="paddingTop: 15px">
+  <Card style="cursor: pointer, height: 100%, flexDirection: column"
+        onClick={handleCardClick}>
+    <CardContent style={imageLayoutStyle}>
+      <!-- Image section (40% width for inline positions) -->
+      {image && <img full-width, aspect-ratio 16/9, contain>}
+      <!-- Content section (60% width for inline positions) -->
+      {type === 'radio'
+        ? <FormControlLabel control={<Radio value={item[recordKey]} checked={radioBtnValue === item[recordKey]} onChange={onChange} ... />} label={item[cardLabel]}>
+        : <FormControlLabel control={<Checkbox id={item[recordKey]} checked={readOnlyList.some(d => d[recordKey] === item[recordKey])} onChange={onChange} ... />} label={item[cardLabel]}>
+      }
+      {fields.map(field => <div style={fieldLayoutStyle}>{field.name && <div>{field.name}</div>}<div>{field.value}</div></div>)}
+    </CardContent>
+  </Card>
+</div>
+```
+
+### Image layout (inline positions)
+
+| `imagePosition`  | CardContent style                           | Image section width | Content section width |
+| ---------------- | ------------------------------------------- | ------------------- | --------------------- |
+| `'inline-start'` | `display: flex`                             | 40%                 | 60%                   |
+| `'inline-end'`   | `display: flex, flexDirection: row-reverse` | 40%                 | 60%                   |
+| block (default)  | default                                     | full width          | full width            |
+
+### Image element
+
+```css
+img {
+  width: 100%;
+  background-color: transparent;
+  aspect-ratio: 16 / 9;
+  max-height: 100%;
+  height: 100%;
+  object-fit: contain;
+  max-width: 100%;
+}
+```
+
+### Field display layout
+
+Each additional field in editable mode:
+
+```css
+.card-field {
+  font-size: 0.875rem;
+  display: grid; /* only if type !== 'TextArea' */
+  grid-template-columns: 1fr 1fr;
+  margin: 5px;
+}
+```
+
+### Radio tracking
+
+After iterating cards, if `type === 'radio'` and `setIsRadioCardSelected`:
+
+```
+if (radioBtnValue === item[recordKey]) radioItemSelected = true
+// After loop:
+setIsRadioCardSelected(radioItemSelected)
+```
+
+## Display Mode Rendering
+
+`displayMode === 'DISPLAY_ONLY'`: renders simple read-only cards (no radio/checkbox inputs). Uses `readOnlyList` as the data source.
+
+## Visual Specifications
+
+| Property             | Editable card                                    | Display-only card |
+| -------------------- | ------------------------------------------------ | ----------------- |
+| Cursor               | `pointer` (unless disabled/readOnly → `default`) | Default           |
+| Height               | `100%` (fills grid row)                          | Auto              |
+| Layout               | Column flex                                      | Row flex          |
+| Padding top          | 15px wrapper                                     | —                 |
+| Image (display-only) | 100px fixed width                                | 100px fixed width |
+| Card border          | Default (design-system card elevation)           | Default           |
+| Disabled             | `cursor: default`                                | —                 |
+
+**CSS-only card implementation:**
+
+```css
+.selectable-card {
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 4px;
+  padding: 16px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  margin-top: 15px;
+  transition: border-color 0.2s;
+}
+.selectable-card:hover {
+  border-color: #1976d2;
+}
+.selectable-card.disabled {
+  cursor: default;
+  opacity: 0.7;
+}
+.selectable-card.readonly {
+  cursor: default;
+}
+.selectable-card-label {
+  font-size: 1rem;
+  font-weight: 400;
+}
+```
+
+## Edge Cases & Special Logic
+
+- **`resolveReferenceFields(item, hideFieldLabels, recordKey, pConn)`** — local utility that resolves additional display fields from an item record.
+- Checkbox `id={item[recordKey]}` — required for the card click handler to find and click the input by ID.
+- `getPConnect` prop on Checkbox (MUI): passed through to support `@pega/sdk-react` checkbox augmentation (non-standard MUI prop).
+- `imageDescriptionKey = showImageDescription ? imageDescription : undefined` — only show alt text when `showImageDescription` is true.
+
+## Dependencies
+
+- `resolveReferenceFields` from `./utils` (local utility).
+- Radio/Checkbox + FormControlLabel components.
+- Card/CardContent components.
+- Typography/text component.
+
+## Design System Mapping
+
+**UI control type:** Selectable card grid (radio or multi-select).
+
+Listed design systems are examples only.
+
+| Design System      | Recommended Component                                                      |
+| ------------------ | -------------------------------------------------------------------------- |
+| Default (CSS only) | Custom `<div>` cards with `<input type="radio/checkbox">` inside           |
+| MUI                | `<Card>` + `<CardContent>` + `<FormControlLabel>` + `<Radio>`/`<Checkbox>` |
+| Ant Design         | Custom cards with `<Radio>`/`<Checkbox>`                                   |
+| Chakra UI          | `<Box>` as card + `<Radio>`/`<Checkbox>`                                   |

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

@@ -1,8 +1,3 @@
----
-description: Field component skill: SemanticLink
-alwaysApply: false
----
-
 # Skill: SemanticLink
 
 Clickable hyperlink that navigates to a referenced Pega case or data object using semantic URL resolution.
@@ -23,29 +18,95 @@ Renders a clickable link (`<a>` or button-style link) that navigates to a Pega c
 
 ## Props (component-specific)
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `text` | `string` | — | The visible link text; renders `'--'` if empty |
-| `resourcePayload` | `any` | `{}` | Resource payload containing `caseClassName`, `resourceType`, etc. |
-| `resourceParams` | `any` | `{}` | Resource parameters containing `workID` for case navigation |
-| `previewKey` | `string \| null` | — | Case preview key for opening work item by handle |
-| `onClick` | `(event) => void` | — | External click handler (received but not directly used — link has its own handler) |
-| `testId` | `string` | `''` | Test identifier |
-| `referenceType` | `string \| null` | — | `'DATA'` or case reference type |
-| `dataRelationshipContext` | `string \| null` | `null` | Context for data relationship resolution |
-| `contextPage` | `any` | — | Context page with `classID` |
+| Prop                      | Type              | Default | Description                                                                        |
+| ------------------------- | ----------------- | ------- | ---------------------------------------------------------------------------------- |
+| `text`                    | `string`          | —       | The visible link text; renders `'--'` if empty                                     |
+| `resourcePayload`         | `any`             | `{}`    | Resource payload containing `caseClassName`, `resourceType`, etc.                  |
+| `resourceParams`          | `any`             | `{}`    | Resource parameters containing `workID` for case navigation                        |
+| `previewKey`              | `string \| null`  | —       | Case preview key for opening work item by handle                                   |
+| `onClick`                 | `(event) => void` | —       | External click handler (received but not directly used — link has its own handler) |
+| `testId`                  | `string`          | `''`    | Test identifier                                                                    |
+| `referenceType`           | `string \| null`  | —       | `'DATA'` or case reference type                                                    |
+| `dataRelationshipContext` | `string \| null`  | `null`  | Context for data relationship resolution                                           |
+| `contextPage`             | `any`             | —       | Context page with `classID`                                                        |
+
+## Component Skeleton
+
+This component computes a URL and renders a clickable link. Most logic is URL resolution — no form state.
+
+```typescript
+import type { PConnFieldProps } from '@pega/sdk-react';
+import semanticUtils from './utils';
+
+interface SemanticLinkProps extends PConnFieldProps {
+  text: string;
+  resourcePayload: any;
+  resourceParams: any;
+  previewKey: string | null;
+  onClick: (event: any) => void;
+  testId: string;
+  referenceType: string | null;
+  dataRelationshipContext: string | null;
+  contextPage: any;
+}
+
+export default function SemanticLink(props: SemanticLinkProps) {
+  // 1. Destructure (note: onClick is received but NOT used directly)
+  const {
+    text, resourcePayload = {}, resourceParams = {},
+    getPConnect, previewKey, onClick, testId = '',
+    referenceType, dataRelationshipContext = null, contextPage,
+    ...restProps
+  } = props;
+
+  // 2. Constants
+  const { ACTION_OPENWORKBYHANDLE, ACTION_SHOWDATA } = PCore.getSemanticUrlUtils().getActions();
+  const pConnect = getPConnect();
+  const { RESOURCE_TYPES: { DATA }, WORKCLASS, CASE_INFO: { CASE_INFO_CLASSID } } = PCore.getConstants();
+
+  // 3. URL resolution variables
+  let linkURL = '';
+  let payload = {};
+  let dataViewName;
+  let isData = false;
+
+  // 4. Determine reference type and resolve URL
+  //    → see Behavioral Contract "URL Resolution"
+
+  // 5. showDataAction() — calls getPConnect().getActionsApi().showData(...)
+  //    → see Behavioral Contract
+
+  // 6. openLinkClick(e) — click handler
+  //    If !metaKey && !ctrlKey: preventDefault, then showDataAction or openWorkByHandle
+  //    If metaKey/ctrlKey: let browser open href in new tab
+
+  // 7. Render link
+  return (
+    <LinkComponent
+      href={linkURL}
+      onClick={openLinkClick}
+      data-testid={testId}
+      {...restProps}
+    >
+      {text || '--'}
+    </LinkComponent>
+  );
+}
+```
 
 ## Behavioral Contract
 
 ### URL Resolution
 
 **Step 1: Determine if this is a data reference:**
+
 - `isData = false`
 - `shouldTreatAsDataReference = !previewKey && resourcePayload.caseClassName` (non-preview, has class)
 - If `contextPage?.classID`: override `resourcePayload.caseClassName = contextPage.classID`
 - If `resourcePayload.caseClassName === WORKCLASS`: override with actual case class from `pConnect.getValue(CASE_INFO_CLASSID)`
 
 **Step 2a: Data reference (`referenceType === 'DATA'` or `shouldTreatAsDataReference`):**
+
 ```
 const dataRefContext = semanticUtils.getDataReferenceInfo(pConnect, dataRelationshipContext, contextPage)
 dataViewName = dataRefContext.dataContext
@@ -54,12 +115,14 @@ isData = true
 ```
 
 **Step 2b: Resource type DATA (`resourcePayload.resourceType === 'DATA'`):**
+
 - Look up data page: `dataViewName = PCore.getDataTypeUtils().getLookUpDataPage(resourcePayload.className)`
 - Look up page info and parameters
 - Build `payload` from parameters by resolving property annotations
 - `isData = true`
 
 **Step 3: Build `linkURL`:**
+
 - If `isData && dataViewName && payload`: `linkURL = PCore.getSemanticUrlUtils().getResolvedSemanticURL(ACTION_SHOWDATA, { pageName: 'pyDetails', dataViewName }, payload)`
 - Else (case): fix `resourceParams.objectID` for empty workID edge case, then `linkURL = PCore.getSemanticUrlUtils().getResolvedSemanticURL(ACTION_OPENWORKBYHANDLE, resourcePayload, resourceParams)`
 
@@ -92,18 +155,19 @@ No explicit `displayMode` handling — `SemanticLink` is always rendered as a li
 
 Derived from `makeStyles` and MUI `Link` props:
 
-| Property | Value |
-|----------|-------|
-| Display | Inline link (button role) |
-| Padding | `8px` all sides |
-| Margin | `8px` all sides |
-| Color | Primary link color (blue, default theme) |
-| Font weight | 400 |
-| Underline | Default link underline on hover |
-| Cursor | Pointer |
-| Text | `text` prop value, or `'--'` if empty |
+| Property    | Value                                    |
+| ----------- | ---------------------------------------- |
+| Display     | Inline link (button role)                |
+| Padding     | `8px` all sides                          |
+| Margin      | `8px` all sides                          |
+| Color       | Primary link color (blue, default theme) |
+| Font weight | 400                                      |
+| Underline   | Default link underline on hover          |
+| Cursor      | Pointer                                  |
+| Text        | `text` prop value, or `'--'` if empty    |
 
 **CSS-only implementation:**
+
 ```css
 .semantic-link {
   display: inline-block;
@@ -117,7 +181,9 @@ Derived from `makeStyles` and MUI `Link` props:
   border: none;
   font-size: inherit;
 }
-.semantic-link:hover { text-decoration: underline; }
+.semantic-link:hover {
+  text-decoration: underline;
+}
 ```
 
 ## Edge Cases & Special Logic
@@ -145,9 +211,9 @@ Derived from `makeStyles` and MUI `Link` props:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
+| Design System      | Recommended Component                                |
+| ------------------ | ---------------------------------------------------- |
 | Default (CSS only) | `<button class="semantic-link">` with anchor styling |
-| MUI | `<Link component='button'>` |
-| Ant Design | `<Typography.Link>` or `<Button type="link">` |
-| Chakra UI | `<Link as="button">` |
+| MUI                | `<Link component='button'>`                          |
+| Ant Design         | `<Typography.Link>` or `<Button type="link">`        |
+| Chakra UI          | `<Link as="button">`                                 |