@pega/sdk 0.0.4 → 0.0.6

package/templates/react-sdk-reference/.github/skills/field-skills/SemanticLink.md

@@ -1,155 +0,0 @@
-# Skill: SemanticLink
-
-Clickable hyperlink that navigates to a referenced Pega case or data object using semantic URL resolution.
-
-> **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 clickable link (`<a>` or button-style link) that navigates to a Pega case or data object. Resolves the correct semantic URL based on whether the reference is a Case or Data type. Handles Ctrl/Meta+click for opening in a new tab. Shows `'--'` when no text is provided.
-
-## Pega Metadata
-
-- **Pega Name:** `SemanticLink`
-- **Type / Subtype:** `Field` / `Link-SemanticLink`
-- **Registration key:** `SemanticLink` (in `component-map.ts`)
-
-## 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`                                                        |
-
-## 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
-payload = dataRefContext.dataContextParameters
-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)`
-
-### Click Handler (`openLinkClick`)
-
-```typescript
-function openLinkClick(e) {
-  if (!e.metaKey && !e.ctrlKey) {
-    e.preventDefault()
-    if (isData or shouldTreatAsDataReference) {
-      showDataAction()
-    } else if (previewKey) {
-      getPConnect().getActionsApi().openWorkByHandle(previewKey, resourcePayload.caseClassName)
-    }
-  }
-  // If metaKey/ctrlKey: allow default browser behavior (open in new tab)
-}
-```
-
-### `showDataAction()`
-
-- If `dataResourcePayLoad.resourceType === 'DATA'`: call `getPConnect().getActionsApi().showData('pyDetails', lookUpDataPage, payload)`
-- If `referenceType === DATA` or `shouldTreatAsDataReference`: call `showData('pyDetails', dataViewName, payload)`
-
-## Display Mode Rendering
-
-No explicit `displayMode` handling — `SemanticLink` is always rendered as a link. The parent (`ObjectReference`) controls whether to show it in display mode.
-
-## Visual Specifications
-
-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    |
-
-**CSS-only implementation:**
-
-```css
-.semantic-link {
-  display: inline-block;
-  padding: 8px;
-  margin: 8px;
-  color: #1976d2;
-  text-decoration: none;
-  cursor: pointer;
-  font-weight: 400;
-  background: none;
-  border: none;
-  font-size: inherit;
-}
-.semantic-link:hover {
-  text-decoration: underline;
-}
-```
-
-## Edge Cases & Special Logic
-
-- **BUG-678282 fix:** When `resourceParams.workID === ''` and `previewKey` is a string, set `resourceParams.objectID = previewKey.split(' ')[1]` to handle cases where workID was not populated.
-- If `previewKey` is set: also set `resourceParams.id = previewKey`.
-- `linkURL` is computed synchronously at render — if an error occurs in data reference resolution, it is silently caught (`try/catch`) and `linkURL` remains `''`.
-- `onClick` prop from parent is received but NOT used directly — the component has its own `openLinkClick`. Do not call the parent's `onClick` directly.
-- **Ctrl/Meta+click**: `e.metaKey || e.ctrlKey` → don't `preventDefault()`, let the browser open the href in a new tab.
-- `text || '--'` is always rendered — never renders empty.
-
-## Dependencies
-
-- `semanticUtils.getDataReferenceInfo(pConnect, dataRelationshipContext, contextPage)` from `./utils` (local).
-- `PCore.getSemanticUrlUtils().getResolvedSemanticURL()` — URL resolution.
-- `PCore.getSemanticUrlUtils().getActions()` — `ACTION_OPENWORKBYHANDLE`, `ACTION_SHOWDATA`.
-- `PCore.getDataTypeUtils().getLookUpDataPage()`, `getLookUpDataPageInfo()`, `getDataPageKeys()`.
-- `PCore.getAnnotationUtils().isProperty()`, `getPropertyName()`.
-- `PCore.getConstants()` — `RESOURCE_TYPES.DATA`, `WORKCLASS`, `CASE_INFO.CASE_INFO_CLASSID`.
-- A link/anchor component (e.g., MUI `<Link component='button'>`, or native `<a>`/`<button>`).
-
-## Design System Mapping
-
-**UI control type:** Clickable hyperlink (button or anchor with navigation behavior).
-
-Listed design systems are examples only.
-
-| 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">`                                 |

package/templates/react-sdk-reference/.github/skills/field-skills/TextArea.md

@@ -1,98 +0,0 @@
-# Skill: TextArea
-
-Multi-line text input field that binds to a Pega case property.
-
-> **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 an editable multi-line text area. Used for long-form text input such as descriptions, notes, or comments. Similar to `TextInput` but allows multiple lines with configurable min/max rows.
-
-## Pega Metadata
-
-- **Pega Name:** `TextArea`
-- **Type / Subtype:** `Field` / `Text` (multi-line)
-- **Registration key:** `TextArea` (in `component-map.ts`)
-
-## Props (component-specific)
-
-| Prop            | Type             | Description                                                |
-| --------------- | ---------------- | ---------------------------------------------------------- |
-| `fieldMetadata` | `any` (optional) | Metadata object; used to read `maxLength` for the textarea |
-
-All other props come from `PConnFieldProps`. Import type as:
-
-```typescript
-import type { PConnFieldProps } from '@pega/sdk-react';
-```
-
-## Behavioral Contract
-
-1. **Local state:** Maintain `inputValue` in local state (string). Initialize to `''`.
-2. **Sync from store:** `useEffect` watching `value` prop — call `setInputValue(value)` whenever `value` changes.
-3. **On change:** Update local `inputValue` state only (do NOT commit to store on every keystroke).
-4. **On blur:** Commit to store by calling `handleEvent(actions, 'changeNblur', propName, inputValue)`.
-5. **Read-only:** Set `readOnly` attribute on the textarea; use visually borderless ("standard") variant. Omit `onBlur` handler: `onBlur={!readOnly ? handleBlur : undefined}`.
-6. **maxLength:** Read from `fieldMetadata?.maxLength`; pass to the textarea's `maxLength` attribute.
-7. **Row sizing:** Fixed at `minRows={5}` and `maxRows={5}` — the textarea does not auto-expand; it shows a scrollbar if content exceeds 5 rows.
-
-## Display Mode Rendering
-
-- **`DISPLAY_ONLY`:** Render `<FieldValueList name={hideLabel ? '' : label} value={value} />`.
-- **`STACKED_LARGE_VAL`:** Render `<FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />`.
-- Both modes short-circuit before interactive rendering.
-
-## Read-Only Rendering
-
-Set `readOnly` on the textarea element (NOT a read-only version via `TextInput` — preserves the multiline appearance). Switch to a flat/borderless visual style. The `minRows`/`maxRows` constraint is still applied in read-only.
-
-## Visual Specifications
-
-Derived from the reference component's MUI props:
-
-| Property      | Standard (editable)                      | Read-only            |
-| ------------- | ---------------------------------------- | -------------------- |
-| Width         | 100%                                     | 100%                 |
-| Min rows      | 5                                        | 5                    |
-| Max rows      | 5 (scrollable beyond)                    | 5                    |
-| Border        | 1px solid (outlined)                     | None (standard/flat) |
-| Border radius | 4px                                      | —                    |
-| Label         | Floating label                           | Floating label       |
-| Helper text   | Below textarea                           | Below textarea       |
-| Error state   | Red border + red helper text             | —                    |
-| Resize        | Vertical resize handle (browser default) | Same                 |
-| Font size     | 0.875rem                                 | 0.875rem             |
-| Padding       | 8px 14px                                 | —                    |
-
-**CSS-only implementation notes:**
-
-- `textarea { min-height: calc(5 * 1.4375em + 16px); max-height: calc(5 * 1.4375em + 16px); overflow-y: auto; resize: vertical; }`
-- Error: `border-color: #d32f2f`
-- Read-only: `border: none; background: transparent;`
-
-## Edge Cases & Special Logic
-
-- Unlike `TextInput`, do NOT delegate to `TextInput` in read-only mode — render the textarea directly with `readOnly` set, so the multi-line appearance is preserved.
-- `maxLength` is optional; only apply the attribute if `fieldMetadata?.maxLength` is defined.
-
-## Dependencies
-
-- `handleEvent` from `../../helpers/event-utils`
-- `getComponentFromRegistry('FieldValueList')` for display modes
-- No third-party UI libraries required
-
-## Design System Mapping
-
-**UI control type:** Multi-line text input (`<textarea>`).
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                             |
-| ------------------ | ------------------------------------------------- |
-| Default (CSS only) | `<textarea rows="5">` with floating label         |
-| MUI                | `<TextField multiline minRows={5} maxRows={5} />` |
-| Ant Design         | `<Input.TextArea rows={5} />`                     |
-| Chakra UI          | `<Textarea />`                                    |
-| Shadcn/ui          | `<Textarea />`                                    |

package/templates/react-sdk-reference/.github/skills/field-skills/TextInput.md

@@ -1,107 +0,0 @@
-# Skill: TextInput
-
-Single-line text input field that binds to a Pega case property.
-
-> **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 single-line editable text field. It is the simplest and most foundational field component — used directly for free-text string properties and also delegated to by other components (e.g., `Email`, `URL`, `Date` in read-only mode).
-
-## Pega Metadata
-
-- **Pega Name:** `TextInput`
-- **Type / Subtype:** `Field` / `Text`
-- **Registration key:** `TextInput` (in `component-map.ts`)
-
-## Props (component-specific)
-
-| Prop            | Type             | Description                                             |
-| --------------- | ---------------- | ------------------------------------------------------- |
-| `fieldMetadata` | `any` (optional) | Metadata object; used to read `maxLength` for the input |
-
-All other props come from `PConnFieldProps`. Import type as:
-
-```typescript
-import type { PConnFieldProps } from '@pega/sdk-react';
-```
-
-## Behavioral Contract
-
-1. **Local state:** Maintain `inputValue` in local state (string). Initialize to `value` prop (`''` default).
-2. **Sync from store:** `useEffect` watching `value` prop — call `setInputValue(value)` whenever `value` changes.
-3. **On change:** Update local `inputValue` state only (do NOT commit to store on every keystroke).
-4. **On blur:** Commit to store by calling `handleEvent(actions, 'changeNblur', propName, inputValue)`.
-5. **Read-only:** Render input with `readOnly` attribute set; use a visually borderless ("standard") variant. Do NOT skip the blur handler when readOnly — simply omit it (`onBlur={!readOnly ? handleBlur : undefined}`).
-6. **maxLength:** Read from `fieldMetadata?.maxLength`; pass to the underlying input's `maxLength` attribute.
-7. **testId:** Pass as `data-test-id` attribute on the underlying `<input>` element.
-
-## Display Mode Rendering
-
-- **`DISPLAY_ONLY`:** Render `<FieldValueList name={hideLabel ? '' : label} value={value} />` — display raw string value, no formatting.
-- **`STACKED_LARGE_VAL`:** Render `<FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />`.
-- Both modes use `value` prop directly (not local state).
-- Both modes short-circuit before any interactive rendering.
-
-## Read-Only Rendering
-
-Set the `readOnly` attribute on the underlying input element. Use a visually flat/borderless style (no border box). The editable `outlined` variant switches to a `standard` (no outline) variant when read-only.
-
-## Visual Specifications
-
-Derived from the reference component's MUI props and styles:
-
-| Property        | Standard (editable)                              | Read-only               |
-| --------------- | ------------------------------------------------ | ----------------------- |
-| Width           | 100% of container                                | 100% of container       |
-| Height / size   | Small (`height ~40px`)                           | Small                   |
-| Border          | 1px solid (outlined)                             | None (standard variant) |
-| Border radius   | 4px                                              | —                       |
-| Label           | Floating label (above input when focused/filled) | Floating label          |
-| Helper text     | Shown below input                                | Shown below input       |
-| Error state     | Red border + red helper text                     | —                       |
-| Disabled        | Reduced opacity (~0.38), not-allowed cursor      | —                       |
-| Padding (input) | 8px 14px                                         | —                       |
-| Font size       | 0.875rem (14px)                                  | 0.875rem                |
-
-**CSS-only implementation notes:**
-
-- Floating label: use `<label>` positioned absolutely, translate upward on `:focus-within` or when input has value.
-- Error state: add `.error` class → border-color: `#d32f2f`; helper text color: `#d32f2f`.
-- Outlined box shadow on focus: `0 0 0 2px rgba(25, 118, 210, 0.2)`.
-
-## Edge Cases & Special Logic
-
-- If `value` prop is `undefined`, default to `''` to keep the input controlled.
-- If `readOnly` is true, the `onBlur` handler must be omitted — do not commit on blur for read-only.
-- `maxLength` is optional; only apply the attribute if `fieldMetadata?.maxLength` is defined.
-
-## Dependencies
-
-- `handleEvent` from `../../helpers/event-utils` — for committing value to store.
-- `getComponentFromRegistry('FieldValueList')` — for display modes.
-- No third-party UI libraries required beyond a basic text input element.
-
-## Design System Mapping
-
-**UI control type:** Single-line text input (`<input type="text">`).
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                     |
-| ------------------ | --------------------------------------------------------- |
-| Default (CSS only) | `<input type="text">` with floating label pattern         |
-| MUI                | `<TextField variant='outlined' size='small' fullWidth />` |
-| Ant Design         | `<Input />`                                               |
-| Chakra UI          | `<Input />`                                               |
-| Shadcn/ui          | `<Input />`                                               |
-
-When implementing in a specific design system, map the following behaviors:
-
-- `error={status === 'error'}` → error/danger variant
-- `helperText` → helper/description slot below the input
-- `label` → field label (floating or static depending on design system)
-- `disabled` → disabled prop
-- `required` → required/asterisk indicator

package/templates/react-sdk-reference/.github/skills/field-skills/Time.md

@@ -1,89 +0,0 @@
-# Skill: Time
-
-Time picker field with 5-minute step increments, binds to a Pega case property.
-
-> **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 time-only picker. Stores time as `HH:mm:ss` string. Displays time in 12-hour (`hh:mm a`) format. Uses `minutesStep={5}` for the picker. Delegates read-only rendering to `TextInput`.
-
-## Pega Metadata
-
-- **Pega Name:** `Time`
-- **Type / Subtype:** `Field` / `Time`
-- **Registration key:** `Time` (in `component-map.ts`)
-
-## Props (component-specific)
-
-No props beyond `PConnFieldProps`. Import type as:
-
-```typescript
-import type { PConnFieldProps } from '@pega/sdk-react';
-```
-
-## Behavioral Contract
-
-1. **Value format stored/committed:** `HH:mm:ss` (24-hour, e.g., `'14:30:00'`).
-2. **Value parsed for display:** Split the `HH:mm:ss` string into `[hours, minutes, seconds]` and construct a time object. Use the date library: `dayjs().hour(hours).minute(minutes)`.
-3. **Local state:** No explicit local state for the time value — the picker's controlled `value` is derived from `props.value` directly on each render.
-4. **On change:**
-   - If date is valid: `theValue = date.format('HH:mm:ss')`, else `theValue = null`.
-   - Commit immediately via `handleEvent(actions, 'changeNblur', propName, theValue)`.
-5. **Display format:** `'hh:mm a'` (12-hour with am/pm) in the picker UI.
-6. **Placeholder:** `'hh:mm am'`.
-7. **Minutes step:** 5 minutes.
-8. **Read-only:** Delegate to `TextInput`: `return <TextInput {...props} />`.
-
-## Display Mode Rendering
-
-- **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : label} value={value} />` — raw time string, no extra formatting.
-- **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />`.
-
-## Read-Only Rendering
-
-Delegate to `TextInput`: `return <TextInput {...props} />`.
-
-## Visual Specifications
-
-| Property     | Value                            |
-| ------------ | -------------------------------- |
-| Width        | Auto (time picker natural width) |
-| Size         | Small                            |
-| Variant      | Outlined                         |
-| Format       | `hh:mm a` (12-hour)              |
-| Placeholder  | `hh:mm am`                       |
-| Minutes step | 5                                |
-| Error state  | Red border + red helper text     |
-
-**Note on known issue:** Keyboard input in the minute field may jump to the am/pm field after one digit — same as DateTime, this is a known date picker library quirk.
-
-## Edge Cases & Special Logic
-
-- **Null/empty value:** When `value` is empty or `Object.keys(value).length === 0`, set `timeValue = null` — do NOT try to parse an empty object.
-- **Value parsing:** Split by `:` and convert each part to a number before constructing the time object.
-- **Commits on change** (picker selection), not on blur.
-- If `date.isValid()` is false (user clears the time), commit `null`.
-
-## Dependencies
-
-- Date manipulation library (e.g., `dayjs`) — for time parsing and `format('HH:mm:ss')`.
-- Time picker UI component (e.g., `@mui/x-date-pickers/TimePicker`).
-- `handleEvent` from `../../helpers/event-utils`.
-- `getComponentFromRegistry('TextInput')` for read-only.
-- `getComponentFromRegistry('FieldValueList')` for display modes.
-
-## Design System Mapping
-
-**UI control type:** Time picker (clock popup or input with am/pm selector).
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                             |
-| ------------------ | ------------------------------------------------- |
-| Default (CSS only) | `<input type="time">` (24h, no am/pm)             |
-| MUI                | `<TimePicker minutesStep={5} format='hh:mm a' />` |
-| Ant Design         | `<TimePicker format="hh:mm a" minuteStep={5} />`  |
-| Chakra UI          | Third-party time picker                           |

package/templates/react-sdk-reference/.github/skills/field-skills/URL.md

@@ -1,86 +0,0 @@
-# Skill: URL
-
-URL input field with browser-native URL validation, binds to a Pega case property.
-
-> **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 single-line text input of type `url`. Provides browser-native URL format validation. Delegates read-only rendering to the `TextInput` component.
-
-## Pega Metadata
-
-- **Pega Name:** `URL`
-- **Type / Subtype:** `Field` / `Text-URL`
-- **Registration key:** `URL` (mapped to `URLComponent` in `component-map.ts` — the component export is named `URLComponent` to avoid conflicts with the global `URL` API)
-
-## Props (component-specific)
-
-No props beyond `PConnFieldProps`. Import type as:
-
-```typescript
-import type { PConnFieldProps } from '@pega/sdk-react';
-```
-
-> **Important naming note:** Export the component as `URLComponent` (not `URL`) to avoid conflicts with the browser's built-in `URL` global. Register it in `component-map.ts` as `URL: URLComponent`.
-
-## Behavioral Contract
-
-1. **Local state:** Maintain `inputValue` (string). Initialize from `value` prop (`''` default).
-2. **Sync from store:** `useEffect` watching `value` → `setInputValue(value)`.
-3. **On change:** Update local state only.
-4. **On blur:** Commit via `handleEvent(actions, 'changeNblur', propName, inputValue)`.
-5. **Input type:** Use `type='url'` for browser-native URL format hint/validation.
-6. **Read-only:** Delegate entirely to `TextInput`: `return <TextInput {...props} />`.
-
-## Display Mode Rendering
-
-- **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : label} value={value} />` — raw URL string.
-- **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />`.
-
-## Read-Only Rendering
-
-Delegate to `TextInput`: `return <TextInput {...props} />`.
-
-## Visual Specifications
-
-Identical to `TextInput` visually — no additional adornments.
-
-| Property      | Value                        |
-| ------------- | ---------------------------- |
-| Width         | 100%                         |
-| Size          | Small (~40px height)         |
-| Variant       | Outlined                     |
-| Border        | 1px solid outlined           |
-| Border radius | 4px                          |
-| Error state   | Red border + red helper text |
-| Helper text   | Below input                  |
-
-No special icon or adornment — the only difference from `TextInput` is `type='url'`.
-
-## Edge Cases & Special Logic
-
-- The component is named `URLComponent` internally to avoid shadowing the global `URL` constructor. Register under the key `URL` in the component map.
-- `type='url'` triggers browser tooltip/validation but Pega validation is the authoritative source.
-- `onBlur` is only wired when `!readOnly`.
-
-## Dependencies
-
-- `handleEvent` from `../../helpers/event-utils`
-- `getComponentFromRegistry('TextInput')` — for read-only delegation
-- `getComponentFromRegistry('FieldValueList')` — for display modes
-
-## Design System Mapping
-
-**UI control type:** Single-line URL text input.
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component      |
-| ------------------ | -------------------------- |
-| Default (CSS only) | `<input type="url">`       |
-| MUI                | `<TextField type='url' />` |
-| Ant Design         | `<Input type="url" />`     |
-| Chakra UI          | `<Input type="url" />`     |