@pega/sdk 0.0.4 → 0.0.6

package/templates/react-sdk-reference/.claude/skills/field-skills/Dropdown.md

@@ -1,134 +0,0 @@
-# Skill: Dropdown
-
-Select/dropdown field with options loaded from a data page, associated list, or deferred datasource. Includes localization of option labels.
-
-> **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-select dropdown (select box). Options are loaded from a Pega datasource — either an `associated` list (static key/value pairs) or a `datapage` (async data page fetch). Supports deferred datasource loading and localized option labels. Commits value immediately on selection change.
-
-## Pega Metadata
-
-- **Pega Name:** `Dropdown`
-- **Type / Subtype:** `Field` / `Picklist`
-- **Registration key:** `Dropdown` (in `component-map.ts`)
-
-## Props (component-specific)
-
-| Prop                 | Type                 | Description                                                         |
-| -------------------- | -------------------- | ------------------------------------------------------------------- |
-| `listType`           | `string`             | `'associated'` or `'datapage'` — determines how options are loaded  |
-| `datasource`         | `any[]` (optional)   | The raw datasource (array for associated, string name for datapage) |
-| `columns`            | `any[]`              | Column config for extracting key/value from datasource records      |
-| `parameters`         | `any` (optional)     | Query parameters for data page calls                                |
-| `deferDatasource`    | `boolean` (optional) | If true, transform `datasourceMetadata` into datapage config        |
-| `datasourceMetadata` | `any` (optional)     | Metadata from deferred datasource resolution                        |
-| `fieldMetadata`      | `any` (optional)     | Field metadata for localization context                             |
-| `onRecordChange`     | `any` (optional)     | Callback fired after a selection change                             |
-
-## Behavioral Contract
-
-1. **Options state:** Maintain `options` as `Array<{key: string, value: string}>`. Initially empty — render nothing (`return null`) until options are populated (avoids design system warnings about undefined options).
-2. **Datasource detection:** Use `isDeepEqual` (deep equality) to compare incoming `datasource` prop with cached `theDatasource` state. If different, update `theDatasource` to trigger a `useEffect`.
-3. **Deferred datasource transformation:** If `deferDatasource && datasourceMetadata?.datasource?.name`:
-   - Override `listType = 'datapage'`
-   - Set `datasource = datasourceMetadata.datasource.name` (string page name)
-   - Flatten `parameters` from `{key: {name, value}}` format to `{name: value}` pairs
-   - Build `columns` from `propertyForDisplayText` and `propertyForValue`
-4. **Column preprocessing:** Strip leading `.` from column `value` fields.
-5. **Loading options for `associated` listType:** In `useEffect` watching `theDatasource`, call `Utils.getOptionList(props, pConn.getDataObject(''))`. Prepend a placeholder option `{key: placeholder, value: localizedPlaceholder}`.
-6. **Loading options for `datapage` listType:** In mount-time `useEffect`, call `getDataPage(datasource, parameters, context)`. Map results using `getDisplayFieldsMetaData(columns)` to extract `key` and `value` per row.
-7. **Placeholder:** Default `'Select...'` if not provided. Prepended as the first option for associated lists.
-8. **On change:**
-   - If selected value equals `placeholder`, treat as empty string: `selectedValue = evt.target.value === placeholder ? '' : evt.target.value`.
-   - Commit via `handleEvent(actionsApi, 'changeNblur', propName, selectedValue)`.
-   - Fire `onRecordChange(evt)` if provided.
-9. **Read-only:** Set `readOnly: true` on the select input. Flat/borderless style. Change handler omitted.
-10. **Localization:** Option labels and display values are localized via `pConn.getLocalizedValue(label, localePath, localeRuleName)`.
-
-## Display Mode Rendering
-
-Display modes use the **resolved display value** (the `value` string matching the selected `key`), NOT the raw stored key:
-
-```
-options.find(option => option.key === value)?.value || value
-```
-
-Both modes pass this resolved value through `pConn.getLocalizedValue()` for localization:
-
-- **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : label} value={localizedDisplayValue} />`
-- **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : label} value={localizedDisplayValue} variant='stacked' />`
-
-## Read-Only Rendering
-
-Set `readOnly: true` on the select element. Flat/borderless variant. Change handler removed.
-
-## Visual Specifications
-
-| Property           | Standard (editable)                  | Read-only       |
-| ------------------ | ------------------------------------ | --------------- |
-| Width              | 100%                                 | 100%            |
-| Size               | Small                                | Small           |
-| Variant            | Outlined                             | Standard (flat) |
-| Placeholder option | First option in list (`'Select...'`) | Not shown       |
-| Options            | Rendered as select menu items        | —               |
-| Error state        | Red border + red helper text         | —               |
-| Label              | Floating label                       | —               |
-
-**CSS-only notes:**
-
-```css
-select {
-  width: 100%;
-  height: 40px;
-  border: 1px solid rgba(0, 0, 0, 0.23);
-  border-radius: 4px;
-  padding: 8px 12px;
-  font-size: 0.875rem;
-}
-select:focus {
-  border-color: #1976d2;
-  outline: none;
-}
-select.error {
-  border-color: #d32f2f;
-}
-select[readonly] {
-  border: none;
-  background: transparent;
-  pointer-events: none;
-}
-```
-
-## Edge Cases & Special Logic
-
-- Do NOT render the component until `options.length > 0` — return `null` until options load.
-- **Localization keys:** Build from `fieldMetadata`:
-  - `localeContext`: `'datapage'` if `tableType === 'DataPage'`, else `'associated'`
-  - `localeClass`: `'@baseclass'` for datapage, else the case className
-  - `localeName`, `localePath` derived from datasource name and display text property
-- `displayMode` check must resolve the key→value mapping — it calls `displayFn(displayMode, resolvedValue)`.
-
-## Dependencies
-
-- `isDeepEqual` from `fast-deep-equal/react` — for datasource change detection.
-- `Utils.getOptionList()` from `../../helpers/utils` — for associated list options.
-- `getDataPage()` from `../../helpers/data_page` — for datapage async fetch.
-- `handleEvent` from `../../helpers/event-utils`.
-- `getComponentFromRegistry('FieldValueList')` for display modes.
-
-## Design System Mapping
-
-**UI control type:** Single-select dropdown / select box.
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                           |
-| ------------------ | ----------------------------------------------- |
-| Default (CSS only) | `<select>` with `<option>` elements             |
-| MUI                | `<TextField select>` with `<MenuItem>` children |
-| Ant Design         | `<Select>` with `<Select.Option>`               |
-| Chakra UI          | `<Select>`                                      |

package/templates/react-sdk-reference/.claude/skills/field-skills/Email.md

@@ -1,109 +0,0 @@
-# Skill: Email
-
-Email input field with a leading mail icon, 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 `email` with a leading mail icon adornment. Provides browser-native email validation via `type='email'`. Delegates read-only rendering to the `TextInput` component.
-
-## Pega Metadata
-
-- **Pega Name:** `Email`
-- **Type / Subtype:** `Field` / `Text-Email`
-- **Registration key:** `Email` (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. **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 (`setInputValue(event.target.value)`).
-4. **On blur:** Commit via `handleEvent(actions, 'changeNblur', propName, inputValue)`.
-5. **Input type:** Use `type='email'` for browser-native email format validation.
-6. **Read-only:** Delegate entirely to `TextInput` component: `return <TextInput {...props} />`. Do NOT render the email-specific UI.
-
-## Display Mode Rendering
-
-- **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : label} value={value} />` — raw email string, no formatting.
-- **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />`.
-
-## Read-Only Rendering
-
-Delegate to `TextInput`: `return <TextInput {...props} />`. This means the mail icon adornment is NOT shown in read-only mode.
-
-## Visual Specifications
-
-Derived from the reference component's MUI props and styles:
-
-| Property      | Value                                             |
-| ------------- | ------------------------------------------------- |
-| Width         | 100%                                              |
-| Size          | Small (~40px height)                              |
-| Variant       | Outlined                                          |
-| Leading icon  | Mail/envelope icon (`position='start'` adornment) |
-| Icon color    | Inherits text color                               |
-| Border        | 1px solid outlined                                |
-| Border radius | 4px                                               |
-| Error state   | Red border + red helper text                      |
-| Helper text   | Below input                                       |
-| Placeholder   | From `placeholder` prop (`''` default)            |
-
-**CSS-only implementation notes:**
-
-```css
-.email-input-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  border: 1px solid rgba(0, 0, 0, 0.23);
-  border-radius: 4px;
-  padding: 8px 14px 8px 36px; /* left padding for icon */
-}
-.email-input-icon {
-  position: absolute;
-  left: 10px;
-  color: rgba(0, 0, 0, 0.54);
-  pointer-events: none;
-}
-.email-input-wrapper.error {
-  border-color: #d32f2f;
-}
-```
-
-## Edge Cases & Special Logic
-
-- The `type='email'` attribute triggers browser-native validation — this is intentional and supplements Pega's server-side validation.
-- In read-only mode, the full delegation to `TextInput` means the component renders without the mail icon adornment.
-- `onBlur` is only attached when `!readOnly`.
-
-## Dependencies
-
-- `handleEvent` from `../../helpers/event-utils`
-- `getComponentFromRegistry('TextInput')` — for read-only delegation
-- `getComponentFromRegistry('FieldValueList')` — for display modes
-- A mail/envelope icon (e.g., from an icon library or inline SVG)
-
-## Design System Mapping
-
-**UI control type:** Email text input with leading icon adornment.
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                                                               |
-| ------------------ | --------------------------------------------------------------------------------------------------- |
-| Default (CSS only) | `<input type="email">` with absolutely-positioned icon                                              |
-| MUI                | `<TextField type='email' InputProps={{ startAdornment: <MailIcon /> }} />`                          |
-| Ant Design         | `<Input type="email" prefix={<MailOutlined />} />`                                                  |
-| Chakra UI          | `<InputGroup><InputLeftElement><EmailIcon /></InputLeftElement><Input type="email" /></InputGroup>` |

package/templates/react-sdk-reference/.claude/skills/field-skills/Group.md

@@ -1,96 +0,0 @@
-# Skill: Group
-
-Field group container that wraps child fields in a collapsible section with an optional heading and instructions.
-
-> **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
-
-A layout/structural component (not a form input). Wraps a set of child field components in a `FieldGroup` container with an optional heading, collapsibility, and instructions text. Arranges children in a responsive grid. Does not bind to a Pega property directly.
-
-## Pega Metadata
-
-- **Pega Name:** `Group`
-- **Type / Subtype:** `Field` / `Group`
-- **Registration key:** `Group` (in `component-map.ts`)
-
-## Props (component-specific)
-
-| Prop           | Type                | Description                                       |
-| -------------- | ------------------- | ------------------------------------------------- |
-| `children`     | `ReactElement[]`    | Child field components to render inside the group |
-| `heading`      | `string`            | The group heading/title                           |
-| `showHeading`  | `boolean`           | Whether to display the heading                    |
-| `instructions` | `string` (optional) | Instructional text shown below the heading        |
-| `collapsible`  | `boolean`           | Whether the group can be collapsed                |
-| `type`         | `string`            | Group type (used for layout context)              |
-
-`displayMode` is also consumed from `PConnFieldProps`.
-
-## Behavioral Contract
-
-1. **No state, no event handling** — purely structural/layout.
-2. **`isReadOnly` flag:** `isReadOnly = displayMode === 'DISPLAY_ONLY'` — passed through to grid for layout context.
-3. **Content grid:** Build a responsive grid of children using `useMemo` (memoized based on `children`, `type`, `isReadOnly`):
-   - Each child gets a full-width grid item (`xs: 12` in a 12-column grid, or equivalent `100%` column).
-   - Children are mapped with their `key` prop preserved.
-4. **Null guard:** If `!children`, return `null`.
-5. **Heading:** Pass `showHeading ? heading : undefined` to `FieldGroup` — if `showHeading` is false, heading is `undefined` (not shown).
-6. **FieldGroup:** Resolved via `getComponentFromRegistry('FieldGroup')`. Receives `name`, `collapsible`, and `instructions` props.
-
-## Display Mode Rendering
-
-`displayMode` is not explicitly handled — it's passed through as a prop for context. `FieldGroup` and children handle their own display mode behavior.
-
-## Visual Specifications
-
-The visual appearance is determined by the `FieldGroup` design system extension component. `Group` itself only applies grid layout to children:
-
-```
-Grid container (spacing=2):
-  per child → Grid item (xs: 12, full width)
-```
-
-**CSS-only grid layout:**
-
-```css
-.field-group-children {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 16px;
-}
-```
-
-The `FieldGroup` component itself provides:
-
-- Optional heading/title above the children
-- Optional collapse/expand control
-- Optional instructions text
-- Container border/background (design-system-dependent)
-
-## Edge Cases & Special Logic
-
-- **`useMemo` dependencies:** `[children, type, isReadOnly]` — the grid re-renders only when these change, not on every parent render.
-- Children must have stable `key` props for React reconciliation.
-- `instructions` may be undefined — `FieldGroup` should handle this gracefully.
-
-## Dependencies
-
-- `getComponentFromRegistry('FieldGroup')` — design system extension providing the collapsible container.
-- `useMemo` from React.
-- Grid layout component (e.g., MUI `Grid`).
-
-## Design System Mapping
-
-**UI control type:** Collapsible field group container with heading.
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                                    |
-| ------------------ | ------------------------------------------------------------------------ |
-| Default (CSS only) | `<fieldset>` or `<details>/<summary>` for collapsible                    |
-| MUI                | `<Grid container spacing={2}>` with `<Grid size={{ xs: 12 }}>` per child |
-| Ant Design         | `<Collapse>` panel or `<Card>`                                           |
-| Chakra UI          | `<Box>` or `<Accordion>`                                                 |

package/templates/react-sdk-reference/.claude/skills/field-skills/Integer.md

@@ -1,88 +0,0 @@
-# Skill: Integer
-
-Integer-only text input that filters out decimal separators, 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 restricted to integer values. Actively filters out decimal (`.`) and thousands separator (`,`) characters as the user types, mimicking Pega's native integer field behavior. Delegates read-only rendering to `TextInput`.
-
-## Pega Metadata
-
-- **Pega Name:** `Integer`
-- **Type / Subtype:** `Field` / `Integer`
-- **Registration key:** `Integer` (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. **Local state:** Maintain `inputValue` (string). Initialize from `value` prop (`''` default).
-2. **Sync from store:** `useEffect` watching `value` → `setInputValue(value)`.
-3. **On change (character filtering):** Before updating local state, inspect the last character typed:
-   - If the last character is `.` or `,`, strip it from the value: `event.target.value = theAttemptedValue.slice(0, -1)`.
-   - Then update local state with the sanitized value.
-   - This "eating" of separator characters replicates Pega's native integer field behavior.
-4. **Input mode:** Set `inputMode='numeric'` and `pattern='[0-9]*'` on the input element for mobile keyboards.
-5. **Input type:** Use `type='text'` (NOT `type='number'`) — this avoids browser-specific number input quirks.
-6. **On blur:** Commit via `handleEvent(actions, 'changeNblur', propName, inputValue)`.
-7. **Read-only:** Delegate to `TextInput`: `return <TextInput {...props} />`.
-
-## Display Mode Rendering
-
-- **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : label} value={value} />`.
-- **`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:
-
-| Property      | Value                                        |
-| ------------- | -------------------------------------------- |
-| Width         | 100%                                         |
-| Size          | Small (~40px height)                         |
-| Variant       | Outlined                                     |
-| Border        | 1px solid                                    |
-| Border radius | 4px                                          |
-| Error state   | Red border + red helper text                 |
-| Input mode    | `numeric` (shows numeric keyboard on mobile) |
-| Pattern       | `[0-9]*`                                     |
-
-## Edge Cases & Special Logic
-
-- **Character filtering is inline** — do NOT use `type='number'` as it introduces inconsistent behavior across browsers (e.g., accepts `e`, `+`, `-` by default).
-- The disallowed characters array is `['.', ',']` — both decimal point and thousands separator are rejected.
-- Strip only the LAST character if it is disallowed — do not strip from anywhere else in the string (user may paste a valid integer that is then validated by blur).
-- `onBlur` is omitted 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:** Numeric text input (integer-only) — use `<input type="text" inputmode="numeric" pattern="[0-9]*">`.
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                                                              |
-| ------------------ | -------------------------------------------------------------------------------------------------- |
-| Default (CSS only) | `<input type="text" inputMode="numeric" pattern="[0-9]*">`                                         |
-| MUI                | `<TextField type='text' slotProps={{ htmlInput: { inputMode: 'numeric', pattern: '[0-9]*' } }} />` |
-| Ant Design         | `<InputNumber precision={0} />` or `<Input />` with custom `onChange` filter                       |
-| Chakra UI          | `<NumberInput allowMouseWheel={false} />` or plain `<Input>` with filter                           |

package/templates/react-sdk-reference/.claude/skills/field-skills/Location.md

@@ -1,145 +0,0 @@
-# Skill: Location
-
-Location input with Google Maps Places autocomplete, interactive map display, and optional geolocation (current location).
-
-> **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 text input that integrates with Google Maps Places API for address/location autocomplete. Optionally shows an interactive map with a marker. Supports an `onlyCoordinates` mode that stores `"lat, lng"` instead of address text. Includes a "get current location" button using the browser geolocation API.
-
-## Pega Metadata
-
-- **Pega Name:** `Location`
-- **Type / Subtype:** `Field` / `Text-Location`
-- **Registration key:** `Location` (in `component-map.ts`)
-
-## Props (component-specific)
-
-| Prop              | Type                 | Default | Description                                                              |
-| ----------------- | -------------------- | ------- | ------------------------------------------------------------------------ |
-| `coordinates`     | `string` (optional)  | `''`    | Comma-separated lat/lng string (e.g., `'18.5204, 73.8567'`)              |
-| `onlyCoordinates` | `boolean` (optional) | `false` | If `true`, store and display lat/lng coordinates instead of address text |
-| `showMap`         | `boolean` (optional) | —       | Show the interactive map in editable mode                                |
-| `showMapReadOnly` | `boolean` (optional) | —       | Show the map in read-only mode                                           |
-
-## Behavioral Contract
-
-1. **APIs required:**
-   - Google Maps JavaScript API with `places` and `geocoding` libraries
-   - API key obtained from `pConn.getGoogleMapsAPIKey?.() || ''`
-2. **Local state:**
-   - `inputValue` (string): shown in the text input
-   - `mapCenter` (`{lat, lng}`): default `{ lat: 18.5204, lng: 73.8567 }` (Pune, India)
-   - `markerPosition` (`{lat, lng} | null`)
-3. **Value sync:** `useEffect` watching `value`, `coordinates`, `onlyCoordinates`:
-   - If `onlyCoordinates && coordinates`: `setInputValue(coordinates)`
-   - Else: `setInputValue(value ?? '')`
-   - If `coordinates` exists: parse `lat, lng`, update `mapCenter` and `markerPosition`
-4. **Places Autocomplete (init):** `useEffect` watching `isLoaded` — once Maps API loads and `inputRef.current` is set, attach `new google.maps.places.Autocomplete(inputRef.current)` and add `place_changed` listener.
-5. **On place changed:**
-   - Get `place.geometry.location` → extract `lat`, `lng`
-   - If `onlyCoordinates`: `inputValue = "${lat}, ${lng}"`, commit this as the value AND update `coordinates` property
-   - Else: `inputValue = place.formatted_address`, commit address as value, update `coordinates` property separately: `actions.updateFieldValue(coordPropName, coordinateString)`
-   - Update `mapCenter` and `markerPosition`
-6. **On text change (manual):**
-   - Update `inputValue` and commit immediately via `handleEvent(actions, 'changeNblur', propName, newValue)`
-   - If input cleared and `coordPropName` exists: `actions.updateFieldValue(coordPropName, '')`; `setMarkerPosition(null)`
-7. **Get current location button:**
-   - Use `navigator.geolocation.getCurrentPosition()`
-   - If `onlyCoordinates`: store `"lat, lng"` as value and coordinates
-   - Else: reverse-geocode using `google.maps.Geocoder`, store address as value, `"lat, lng"` as coordinates
-8. **Coordinate property name:** `coordPropName = (pConn.getStateProps() as any).coordinates` — separate from the main `propName`
-9. **Error display:** If `status === 'error' && !!validatemessage && !disabled`, show an error alert ABOVE the input.
-10. **Read-only:** Delegate text to `TextInput`, optionally show map if `showMapReadOnly`.
-
-### Map configuration (disabled state)
-
-When `disabled`, map options disable all interactions:
-
-- `gestureHandling: 'none'`, `keyboardShortcuts: false`, `disableDefaultUI: true`, `clickableIcons: false`
-- Map opacity: `0.7` when disabled
-
-### CSS for Google Maps autocomplete dropdown z-index:
-
-```css
-/* Location.css */
-.pac-container {
-  z-index: 2147483647;
-}
-```
-
-## Display Mode Rendering
-
-- **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : label} value={value} />` — raw address/coordinates string.
-- **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />`.
-
-## Read-Only Rendering
-
-```
-<div>
-  <TextInput {...props} />
-  {isLoaded && showMapReadOnly && <GoogleMap ... />}
-</div>
-```
-
-## Visual Specifications
-
-| Property             | Value                                              |
-| -------------------- | -------------------------------------------------- |
-| Width                | 100%                                               |
-| Input variant        | Default (outlined, from `TextField`)               |
-| Trailing icon        | Location pin icon button (for current location)    |
-| Error alert          | Alert banner ABOVE the input field when `hasError` |
-| Map container        | `width: 100%`, `height: 300px`, `marginTop: 0px`   |
-| Map render           | Only shown when `isLoaded && (showMap              |     | showMapReadOnly)` |
-| Disabled map opacity | `0.7`                                              |
-
-**CSS companion file required:** `Location.css` with:
-
-```css
-.pac-container {
-  z-index: 2147483647;
-}
-```
-
-This ensures the Google Maps autocomplete dropdown appears above modal/dialog overlays.
-
-**CSS-only implementation notes:**
-
-- Location pin button: `<button>` with `position: absolute; right: 8px; top: 50%; transform: translateY(-50%);`
-
-## Edge Cases & Special Logic
-
-- **`isLoaded` guard:** Only render the `TextField` and map after Google Maps API is fully loaded.
-- **`onlyCoordinates` mode:** The stored `value` is `"lat, lng"` format; coordinates and address are the same.
-- **Dual property:** The component writes to TWO properties — `propName` (address or coordinates) and `coordPropName` (coordinates). `coordPropName` may be undefined if the Pega config doesn't include a coordinates property.
-- **Autocomplete ref lifecycle:** `autocompleteRef` is only initialized once (when `!autocompleteRef.current`). The `handlePlaceChanged` callback must be stable (`useCallback` with deps).
-- **Map default center:** Pune, India — `{ lat: 18.5204, lng: 73.8567 }`.
-- Google Maps Geocoder is only called in non-`onlyCoordinates` geolocation mode for reverse geocoding.
-
-## Dependencies
-
-- Google Maps JavaScript API (loaded dynamically via `@react-google-maps/api` or equivalent loader).
-- `@react-google-maps/api` — `GoogleMap`, `Marker`, `useLoadScript`.
-- `handleEvent` from `../../helpers/event-utils`.
-- `getComponentFromRegistry('TextInput')` for read-only.
-- `getComponentFromRegistry('FieldValueList')` for display modes.
-- A location pin icon.
-
-**CSS companion:** `Location.css` — must be imported to fix autocomplete z-index.
-
-## Design System Mapping
-
-**UI control type:** Text input with location autocomplete dropdown + optional map.
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                                   |
-| ------------------ | ----------------------------------------------------------------------- |
-| Default (CSS only) | `<input type="text">` + Google Maps Autocomplete API + Google Map embed |
-| MUI                | `<TextField>` + `InputAdornment` for icon + `@react-google-maps/api`    |
-| Ant Design         | `<Input suffix={<LocationIcon />}>` + Google Maps                       |
-| Chakra UI          | `<InputGroup>` + `<InputRightElement>` + Google Maps                    |

package/templates/react-sdk-reference/.claude/skills/field-skills/Percentage.md

@@ -1,93 +0,0 @@
-# Skill: Percentage
-
-Percentage numeric input with a `%` suffix and locale-aware decimal/thousands separators.
-
-> **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 numeric input for percentage values. Always appends a `%` suffix in the input. Supports configurable decimal precision and optional thousands separator. Shows a formatted percentage string in display modes.
-
-## Pega Metadata
-
-- **Pega Name:** `Percentage`
-- **Type / Subtype:** `Field` / `Decimal-Percentage`
-- **Registration key:** `Percentage` (in `component-map.ts`)
-
-## Props (component-specific)
-
-| Prop                  | Type                | Default | Description                                                                                      |
-| --------------------- | ------------------- | ------- | ------------------------------------------------------------------------------------------------ |
-| `currencyISOCode`     | `string` (optional) | `'USD'` | ISO code used for locale-aware decimal/thousands separator lookup only (not for currency symbol) |
-| `showGroupSeparators` | `string` (optional) | —       | Whether to show thousands separators (passed as string, truthy check applies)                    |
-| `decimalPrecision`    | `number` (optional) | —       | Number of decimal places                                                                         |
-
-## Behavioral Contract
-
-1. **Local state:** Maintain `values` (string). Initialize from `value.toString()`.
-2. **Sync from store:** `useEffect` watching `value` → `setValues(value.toString())`.
-3. **Separators:** Derive `decimalSeparator` and `thousandSeparator` from locale lookup using `currencyISOCode` (same as Currency/Decimal). Apply `thousandSeparator` only when `showGroupSeparators` is truthy.
-4. **Suffix:** Always append `%` suffix to the numeric input.
-5. **Decimal scale:** Use `decimalPrecision` prop.
-6. **No prefix:** Unlike Currency, no prefix symbol.
-7. **On value change:** Update local `values` state with the raw numeric string.
-8. **On blur:** Commit via `handleEvent(actions, 'changeNblur', propName, values)`.
-9. **Read-only:** Set `readOnly: true` on the input. Flat/borderless style. `onBlur` omitted.
-
-## Display Mode Rendering
-
-Format the value using the percentage formatter before display:
-
-- `formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), currencyOptions)`
-- **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : label} value={formattedValue} />`.
-- **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />`.
-
-## Read-Only Rendering
-
-Keep numeric format input with `readOnly: true` and `%` suffix still visible. Flat/borderless style.
-
-## Visual Specifications
-
-| Property            | Value                                     |
-| ------------------- | ----------------------------------------- |
-| Width               | 100%                                      |
-| Size                | Small                                     |
-| Variant editable    | Outlined                                  |
-| Variant read-only   | Standard (flat)                           |
-| Suffix              | `%` (always shown after the value)        |
-| Thousands separator | Only when `showGroupSeparators` is truthy |
-| Decimal scale       | `decimalPrecision`                        |
-| Placeholder         | From `placeholder` prop                   |
-| Error state         | Red border + red helper text              |
-
-**CSS-only notes:** Achieve the `%` suffix by wrapping the input in a relative container and absolutely positioning a `%` label at the right side, or using an input with a `::after` pseudo-element technique.
-
-## Edge Cases & Special Logic
-
-- `showGroupSeparators` is typed as `string` (not `boolean`) in the reference implementation — apply truthy check.
-- `currencyISOCode` is only used for separator lookup (decimal/thousands), NOT for a currency symbol.
-- The stored value is always a raw numeric string (e.g., `'45.5'`), not `'45.5%'`.
-
-## Dependencies
-
-- Numeric formatting library (e.g., `react-number-format`'s `NumericFormat`).
-- `getCurrencyCharacters(currencyISOCode)` — for `theDecimalIndicator`, `theDigitGroupSeparator`.
-- `getCurrencyOptions(currencyISOCode)` — for `format()` call.
-- `format()` from `../../helpers/formatters`.
-- `handleEvent` from `../../helpers/event-utils`.
-- `getComponentFromRegistry('FieldValueList')` for display modes.
-
-## Design System Mapping
-
-**UI control type:** Percentage numeric input with `%` suffix.
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                           |
-| ------------------ | --------------------------------------------------------------- |
-| Default (CSS only) | `<input type="text">` + custom masking + `%` suffix span        |
-| MUI                | `NumericFormat` with `suffix='%'` and `customInput={TextField}` |
-| Ant Design         | `<InputNumber suffix="%" precision={decimalPrecision} />`       |
-| Chakra UI          | `<NumberInput>` + `<InputRightAddon>%</InputRightAddon>`        |