@pega/sdk 0.0.5 → 0.0.6

package/templates/react-sdk-reference/.ai-common/instructions/template-component.md

@@ -1,5 +1,5 @@
 ---
-ai-globs: src/components/template/**/*.tsx
+ai-globs: **/template/**/*
 ---
 
 # Template Component Rules
@@ -8,75 +8,23 @@ When creating or modifying template/layout components, follow these rules:
 
 ## Required Structure
 
-1. **Import types from `@pega/sdk-react`**:
+1. **Extend the base template props interface** — the project's standard props type — when defining the component's prop interface.
 
-   ```typescript
-   import type { PConnProps } from '@pega/sdk-react';
-   ```
-
-2. **Export as default function component**:
-   ```typescript
-   export default function MyTemplate(props: MyTemplateProps) { ... }
-   ```
+2. **Export the component** using the project's standard export convention.
 
 ## Template Categories
 
 ### Layout Templates (TwoColumn, OneColumn, NarrowWide, WideNarrow)
 
-Receive React `children` directly:
-
-```typescript
-import type { PropsWithChildren, ReactElement } from 'react';
-
-interface TwoColumnProps extends PConnProps {
-  templateCol?: string; // e.g. "1fr 1fr", "2fr 1fr"
-}
-
-export default function TwoColumn(props: PropsWithChildren<TwoColumnProps>) {
-  const { children, templateCol = '1fr 1fr' } = props;
-  const childrenToRender = children as ReactElement[];
-  // Render childrenToRender[0], childrenToRender[1], etc. in grid columns
-}
-```
+Receive child components directly via the props. Parse the `templateCol` prop (e.g. `"1fr 1fr"`, `"2fr 1fr"`) to compute column ratios, then render each child in its corresponding column.
 
 ### Form/View Templates (DefaultForm, Details, CaseView)
 
-Render children via `getPConnect().getChildren()`:
-
-```typescript
-export default function DefaultForm(props: DefaultFormProps) {
-  const { getPConnect } = props;
-  const pConn = getPConnect();
-  const children = pConn.getChildren() as any[];
-
-  return (
-    <div>
-      {children.map((child, i) => (
-        <PConnectComponent key={i} getPConnect={() => child.getPConnect()} />
-      ))}
-    </div>
-  );
-}
-```
+Render children by retrieving them from the PConnect accessor (`getPConnect().getChildren()`) and rendering each child through the project's PConnect-bridge component.
 
 ### Page Templates (OneColumnPage, TwoColumnPage)
 
-Wrap a layout with page-level chrome (title, actions):
-
-```typescript
-export default function OneColumnPage(props: PageProps) {
-  const { getPConnect, children } = props;
-  const pConn = getPConnect();
-  const title = pConn.getDataObject('')?.caseInfo?.name;
-
-  return (
-    <div>
-      <h1>{title}</h1>
-      {children}
-    </div>
-  );
-}
-```
+Wrap a layout with page-level chrome (title, actions) — retrieve case/page metadata from the PConnect accessor and render it alongside the layout's children.
 
 ## Visual Preservation
 
@@ -84,12 +32,12 @@ The replacement must look the same as the original component:
 
 1. **Read any `.css` file in the directory first.** Note every class's visual intent (spacing, sizing, colors, layout).
 2. Replicate those styles via inline `style` props, the new design system's layout props, or by keeping the CSS import — whichever produces the closest match.
-3. Do NOT silently drop `makeStyles` classes — map each one to an equivalent style.
+3. Do NOT silently drop legacy layout utility classes — map each one to an equivalent style.
 
 ## Key Rules
 
-- Use `PConnectComponent` from `@pega/sdk-react` to render PConnect children
-- Grid proportions come from `templateCol` prop — parse it to calculate column ratios
-- Templates must not call `handleEvent` or interact with field state
+- Use the project's PConnect-bridge component to render PConnect children
+- Grid proportions come from the `templateCol` prop — parse it to calculate column ratios
+- Templates must not call the event handling helper or interact with field state
 - Templates are layout-only — they arrange, not edit
-- Do NOT drop column gap, padding, or alignment styles when removing MUI `Grid` — replicate them in the replacement layout
+- Do NOT drop column gap, padding, or alignment styles when removing legacy layout primitives — replicate them in the replacement layout

package/templates/react-sdk-reference/.ai-common/instructions/widget-component.md

@@ -1,5 +1,5 @@
 ---
-ai-globs: src/components/widget/**/*.tsx
+ai-globs: **/widget/**/*
 ---
 
 # Widget Component Rules
@@ -8,68 +8,23 @@ When creating or modifying widget components, follow these rules:
 
 ## Required Structure
 
-1. **Import types from `@pega/sdk-react`**:
+1. **Extend the base widget props interface** — the project's standard props type, or the field props type if the widget behaves like a field (e.g. Attachment) — when defining the component's prop interface.
 
-   ```typescript
-   import type { PConnProps } from '@pega/sdk-react';
-   // or PConnFieldProps if the widget behaves like a field (e.g., Attachment)
-   ```
-
-2. **Export as default function component**:
-   ```typescript
-   export default function MyWidget(props: MyWidgetProps) { ... }
-   ```
+2. **Export the component** using the project's standard export convention.
 
 ## Widget Patterns
 
 ### Data-Fetching Widget (ToDo, CaseHistory, Followers)
 
-Fetches data from Pega data pages on mount:
-
-```typescript
-export default function MyWidget(props: MyWidgetProps) {
-  const { getPConnect, datasource, headerText } = props;
-  const pConn = getPConnect();
-  const [data, setData] = useState<any[]>([]);
-
-  useEffect(() => {
-    const context = pConn.getContextName();
-    PCore.getDataPageUtils()
-      .getDataAsync(datasource?.source, context, {})
-      .then((response: any) => {
-        setData(response.data || []);
-      });
-  }, []);
-
-  return (
-    <Card>
-      <CardHeader title={headerText} />
-      <CardContent>{/* render data */}</CardContent>
-    </Card>
-  );
-}
-```
+Fetches data from the platform's data pages on mount. Obtain the current context from the PConnect accessor, request the datasource via the platform's data page utility, and store the result in local state. Render the fetched data inside the widget's card/list presentation.
 
 ### Action Widget (ToDo)
 
-Triggers case actions:
-
-```typescript
-// Get assignments and trigger actions
-import { getToDoAssignments } from '@pega/sdk-react';
-
-const assignments = getToDoAssignments(getPConnect);
-// Each assignment has: onClick callback, urgency, name, etc.
-```
+Triggers case actions. Retrieve the list of assignments using the platform's assignment helper (passing the PConnect accessor). Each assignment provides an `onClick` callback, urgency, name, and other display metadata.
 
 ### File Widget (Attachment, FileUtility)
 
-Handles file upload/download via PCore attachment APIs:
-
-```typescript
-PCore.getAttachmentUtils().uploadAttachment(file, onUploadProgress, errorHandler, context);
-PCore.getAttachmentUtils().downloadAttachment(attachmentId, context);
-```
+Handles file upload/download via the platform's attachment utility APIs — upload with progress/error callbacks and context, download by attachment id and context.
 
 ## Visual Preservation
 
@@ -77,14 +32,14 @@ The replacement must look the same as the original component:
 
 1. **Read any `.css` file in the directory first.** Note every class's visual intent (spacing, sizing, colors, layout).
 2. Replicate those styles via inline `style` props, the new design system's component props/variants, or by keeping the CSS import — whichever produces the closest match.
-3. Do NOT silently drop `makeStyles` classes — map each one to an equivalent style.
+3. Do NOT silently drop legacy styling utility classes — map each one to an equivalent style.
 
 ## Key Rules
 
 - Widgets are self-contained — they manage their own data fetching
-- Use `PCore.getDataPageUtils()` for data page access
-- Use `PCore.getAttachmentUtils()` for file operations
+- Use the platform's data page utility for data page access
+- Use the platform's attachment utility for file operations
 - Always handle loading and error states
-- Widgets may use `PCore.getPubSubUtils()` to subscribe to events
-- Clean up subscriptions in `useEffect` return function
-- Do NOT drop card padding, list item spacing, or avatar sizing when removing MUI components — replicate them in the replacement
+- Widgets may subscribe to platform events via the platform's pub/sub utility
+- Clean up subscriptions when the component unmounts
+- Do NOT drop card padding, list item spacing, or avatar sizing when removing legacy presentation components — replicate them in the replacement

package/templates/react-sdk-reference/.ai-common/prompts/add-component.md

@@ -7,7 +7,7 @@ ai-description: Add a new component type to the registry
 Read the user's message carefully. Extract:
 
 - **Component name** — the exact name (e.g. `AutoComplete`, `DatePicker`)
-- **Component type** — one of: `field` | `template` | `widget` | `designSystemExtension`
+- **Component type** — one of: `field` | `template` | `widget` | `designSystemExtension` | `infra`
 - **Design system** — the UI library to use (e.g. `Ant Design`, `Chakra UI`, `Carbon`, `Radix UI`)
 - **Output path** — the exact or relative path where the component should be generated (e.g. `src/components/field/AutoComplete`)
 
@@ -19,12 +19,12 @@ Example questions to ask (only ask the ones that are actually missing):
 
 1. Which design system should I use? (e.g. Ant Design, Chakra UI, Carbon, Radix UI)
 2. What is the exact component name?
-3. What type of component is this? (field / template / widget / designSystemExtension)
+3. What type of component is this? (field / template / widget / designSystemExtension / infra)
 4. What is the exact or relative path where the component should be generated? (e.g. `src/components/field/AutoComplete`)
 
 ### Case-insensitive component name matching
 
-The user may enter the component name in any casing (e.g. `autocomplete`, `Autocomplete`, `autoComplete`). It is your responsibility to match it to the correct canonical name by checking the skill files in `{{SKILL_DIR}}/field-skills/`, `{{SKILL_DIR}}/template-skills/`, `{{SKILL_DIR}}/widget-skills/`, and `{{SKILL_DIR}}/design-system-extension-skills/`. For example, if the user types `autocomplete`, match it to `AutoComplete`.
+The user may enter the component name in any casing (e.g. `autocomplete`, `Autocomplete`, `autoComplete`). It is your responsibility to match it to the correct canonical name by checking the skill files in `{{SKILL_DIR}}/field-skills/`, `{{SKILL_DIR}}/template-skills/`, `{{SKILL_DIR}}/widget-skills/`, `{{SKILL_DIR}}/design-system-extension-skills/`, and `{{SKILL_DIR}}/infra-skills/`. For example, if the user types `autocomplete`, match it to `AutoComplete`.
 
 Once all four are known, continue to Step 1.
 
@@ -34,7 +34,7 @@ Once all four are known, continue to Step 1.
 
 Before generating, check if a component already exists at the resolved output path:
 
-1. Check if `<outputPath>/<ComponentName>.tsx` (or the directory) already exists.
+1. Check if the component file or directory already exists at the resolved output path.
 2. If it **does exist**, ask the user: _"A component named `<ComponentName>` already exists at `<outputPath>`. Do you want to overwrite it with the new implementation?"_
    - If the user says **yes**, proceed to overwrite.
    - If the user says **no**, stop and skip generation.
@@ -52,6 +52,9 @@ Always read the **general type skill** for the component type:
 | `template`              | `{{SKILL_DIR}}/template-components.md`     |
 | `widget`                | `{{SKILL_DIR}}/widget-components.md`       |
 | `designSystemExtension` | `{{SKILL_DIR}}/design-system-extension.md` |
+| `infra`                 | `{{SKILL_DIR}}/infra-components.md`        |
+
+Only three `infra` components may be added — `ActionButtons`, `Stages`, and `MultiStep`. Every other infrastructure component is SDK-provided; if the user names one, stop and tell them it is not generated.
 
 Then look for a **component-specific skill** based on the component type:
 
@@ -61,6 +64,7 @@ Then look for a **component-specific skill** based on the component type:
 | `template`              | `{{SKILL_DIR}}/template-skills/<ComponentName>.md`                |
 | `widget`                | `{{SKILL_DIR}}/widget-skills/<ComponentName>.md`                  |
 | `designSystemExtension` | `{{SKILL_DIR}}/design-system-extension-skills/<ComponentName>.md` |
+| `infra`                 | `{{SKILL_DIR}}/infra-skills/<ComponentName>.md`                   |
 
 If the component-specific skill file exists, read it fully. Pay special attention to:
 
@@ -75,6 +79,7 @@ Examples:
 - `AdvancedSearch` (template) → read `template-components.md` + `template-skills/AdvancedSearch.md`
 - `AppAnnouncement` (widget) → read `widget-components.md` + `widget-skills/AppAnnouncement.md`
 - `AlertBanner` (designSystemExtension) → read `design-system-extension.md` + `design-system-extension-skills/AlertBanner.md`
+- `ActionButtons` (infra) → read `infra-components.md` + `infra-skills/ActionButtons.md`
 
 If no component-specific skill file exists, continue using the general pattern from the type skill.
 
@@ -82,27 +87,31 @@ If no component-specific skill file exists, continue using the general pattern f
 
 ## Step 3 — Check and install dependencies
 
-Run:
+Check the project's dependency manifest to determine whether the design system package is already installed. If it is **not** listed in the project's dependencies, install it using the project's package manager. Report what was installed.
 
-```
-cat package.json | grep "<design-system-package>"
-```
+**Immediately after installation**, read `node_modules/<designSystem>/README.md` in full. From it, note the correct import paths, usage patterns, version-specific guidance, global CSS/styles import path, provider wrapper component name, and any peer dependency requirements. Store this information in your memory and use it for all subsequent steps — do not re-read the README later. If the README lists peer dependencies that are not already installed in the project, install them now — the design system will not function correctly without them.
 
-If the design system package is **not** listed in `dependencies` or `devDependencies`, install it:
+You MUST also thoroughly inspect the installed design system package:
 
-```
-npm install <design-system-package>
-```
+1. **Discover all available components** — browse the installed package's directory tree under `node_modules/<designSystem>/` to find every component it exports. Do not assume a specific folder structure (e.g. `dist/`) — packages vary widely in how they organize source, types, and entry points. Navigate through the package's folders, read its entry-point files and type definitions, and build a complete list of every component the package actually provides. Store all discovered component names and their import paths in your memory for reference during code generation.
+2. **Map the requested component to the best available DS component** — the component name provided by the user (e.g. `AutoComplete`) may not have an exact name match in the installed design system. Using the complete component list you just discovered, identify which DS component best serves the same purpose. For example, `@carbon/react` does not export an `AutoComplete` component — but it does export `ComboBox`, which provides equivalent autocomplete/typeahead functionality. If no single DS component is a close match, compose the requested behavior from multiple available DS primitives. Never fabricate a component import that does not exist in the installed package.
+3. **Read the props interface of every component you plan to use** — for each component you intend to use, locate and read its TypeScript type definitions (`.d.ts` files or inline types) to understand the exact prop names, types, required vs. optional status, and any relevant enums or union types. Store this information in your memory alongside the component names.
+4. **Use ONLY confirmed component names and prop names** — when generating code, you must exclusively use the component names and prop names you discovered from the installed package. Do not rely on training knowledge of the design system's API, as it may be outdated, inaccurate, or refer to components/props that do not exist in the installed version.
 
-Also install any peer dependencies documented in the package's README. Report what was installed.
+Also check:
+
+- Whether the design system has a **form layout wrapper** (label + input + helper text) — use it instead of manual margins
+- Whether it has **size/density/variant conventions** — use built-in props rather than custom padding
+- Whether it has a **companion icons package** — read its exports before using any icon name; never guess icon names
+- Whether it has a **tokens or CSS directory** — use design system CSS custom properties for spacing; never hardcode `px` values
 
 ### 3.1 — Install the DS styles package and configure global CSS (MANDATORY)
 
 Design systems require their global stylesheet — without it, components render unstyled.
 
-#### Known DS style requirements (examples — verify from README for exact paths):
+#### Known DS style requirements (examples — verify against the README you already read):
 
-| Design System | Styles Package (example) | CSS Import in `src/main.tsx` (example)   | Provider Wrapper (example) |
+| Design System | Styles Package (example) | CSS Import (example)                     | Provider Wrapper (example) |
 | ------------- | ------------------------ | ---------------------------------------- | -------------------------- |
 | Carbon        | `@carbon/styles`         | `import '@carbon/react/css/styles.css';` | `<Theme>`                  |
 | Ant Design    | (included)               | `import 'antd/dist/reset.css';`          | `<ConfigProvider>`         |
@@ -111,29 +120,16 @@ Design systems require their global stylesheet — without it, components render
 | Shadcn/ui     | (Tailwind)               | `import './globals.css';`                | None                       |
 | MUI           | (included)               | (none — CSS-in-JS)                       | `<ThemeProvider>`          |
 
-These are **examples** based on common versions. Always verify the exact import path and provider name from the installed package's README (`node_modules/<ds>/README.md`).
-
-If in table and not already configured: install styles package (if separate), add CSS import as **first import** in `src/main.tsx`, add Provider in `src/AppProviders.tsx`.
-If not in table: check README and `find node_modules/<ds> -name "*.css" -path "*/dist/*" | head -5`.
-
-Verification: `grep -n "import.*css\|import.*styles" src/main.tsx` — if already present, report "already configured" and continue.
-
-Report what was installed/configured (or "already configured").
+Above mentioned are **examples** based on common versions. Use the import path and provider name you noted from the README — they take precedence over this table.
 
-Before writing any code, inspect the installed package:
+If in table and not already configured: install styles package (if separate), add the global CSS import as the **first import** in the application's entry file, and add the Provider wrapper in the application's providers file.
+If not in table: browse the installed design system's folder in `node_modules` for a `styles/` or `dist/` directory containing CSS files, and use what you find there.
 
-1. `cat node_modules/<designSystem>/README.md` — note the correct import path and usage patterns for the installed version.
-2. `grep "^export" node_modules/<designSystem>/dist/index.d.ts 2>/dev/null || grep -rl "^export" node_modules/<designSystem> --include="index.d.ts" | head -3 | xargs grep "^export"` — lists every component actually exported by the installed version.
-3. For every component you plan to use, read its TypeScript prop interface from the installed `.d.ts`:
-   `find node_modules/<designSystem> -name "ComponentName.d.ts" | head -3`, then `grep -A 40 "interface.*Props"` on the result.
-4. Only use component names and prop names confirmed in those files. Do not rely on training knowledge of the API.
+Since you have already read the design system's README, install the styles package it specifies (if any). If you have already installed it, skip this step. If the README did not provide enough detail about design-system-specific styles, browse the `styles/` folder within the installed design system package to locate the correct stylesheet and understand how it should be applied. Ensure these design system styles are applied globally so that all generated components render correctly.
 
-Also check:
+Before implementing any component, verify whether design-system-specific styles are already configured in the existing codebase — check the application's entry file for a matching CSS import. If the styles are already imported and configured, skip this step and report "already configured".
 
-- Whether the design system has a **form layout wrapper** (label + input + helper text) — use it instead of manual margins
-- Whether it has **size/density/variant conventions** — use built-in props rather than custom padding
-- Whether it has a **companion icons package** — read its exports before using any icon name; never guess icon names
-- Whether it has a **tokens or CSS directory** — use design system CSS custom properties for spacing; never hardcode `px` values
+Report what was installed/configured (or "already configured").
 
 ---
 
@@ -141,60 +137,42 @@ Also check:
 
 Create the component directory at the resolved output path (from Step 0).
 
-Create `<ComponentName>.tsx` using the pattern for the component type:
+Create the component's main implementation file using the file naming convention and extension appropriate to the project's framework (determine this by examining existing components in the project).
 
 ### field
 
-Use this structure from `field-components.md` (read in Step 2):
+Follow the implementation structure described in `field-components.md` (read in Step 2). That file specifies the exact imports, interface, props destructuring, display mode guards, event handling, and render approach for this project's framework. Use the DS component you identified in Step 3 as the primary input element.
 
-1. Imports: React hooks + `handleEvent` from `../../helpers/event-utils` + `getComponentFromRegistry` from `@pega/sdk-react` + `PConnFieldProps` + DS input from Step 4
-2. Interface extending `PConnFieldProps` with any extra props from the component skill file
-3. Destructure: `getPConnect`, `label`, `required`, `disabled`, `value`, `validatemessage`, `status`, `readOnly`, `testId`, `helperText`, `displayMode`, `hideLabel`, `placeholder`
-4. Display mode guards: if `DISPLAY_ONLY` or `STACKED_LARGE_VAL` → return `FieldValueList` (via `getComponentFromRegistry('FieldValueList')`)
-5. Return → DS form input from Step 4, with `onBlur` calling `handleEvent(actions, 'changeNblur', propName, inputValue)`. Show `validatemessage` when `status === 'error'`. Pass `data-test-id={testId}` on the interactive element.
+If a component-specific skill file exists, also incorporate its Behavioral Contract (validation rules, option loading, event sequences, edge cases).
 
 ### template
 
-Use this structure from `template-components.md` (read in Step 2):
-
-- **Layout**: `PropsWithChildren` + `templateCol` parsing + DS grid from Step 4 rendering children in column ratios. Mobile: stack to full width.
-- **Form**: `createElement(createPConnectComponent(), ...)` for each child from `getPConnect().getChildren()[0].getPConnect().getChildren()`. No DS primitives.
-- **Page**: `createElement(createPConnectComponent(), ...)` for each region from `getPConnect().getChildren()`. No DS primitives.
+Follow the implementation structure described in `template-components.md` (read in Step 2). That file specifies the layout, form, and page patterns — including how to render child components — for this project's framework.
 
 ### widget
 
-Use this structure from `widget-components.md` (read in Step 2):
+Follow the implementation structure described in `widget-components.md` (read in Step 2). That file specifies the imports, interface, data-fetching lifecycle, and render approach for this project's framework. Use the DS components you identified in Step 3 for presentation.
 
-1. Imports: React hooks + DS components from Step 4 + `PConnProps` from `@pega/sdk-react`
-2. Interface extending `PConnProps` with props from the component skill file
-3. Component function: destructure `getPConnect`, call `getPConnect()` to get `pConn`
-4. `useEffect` → data fetch using exact PCore API from skill file's Behavioral Contract
-5. Return → DS Card/List/Table from Step 4, rendering fetched data
+If a component-specific skill file exists, follow its Behavioral Contract for data-fetching logic, state management, and interaction handling.
 
 ### designSystemExtension
 
-Use this structure from `design-system-extension.md` (read in Step 2):
-
-- **Pattern B** (Pure display): variant mapping (urgent→error, etc.) + DS Alert/Card/Avatar from Step 4. No `getPConnect`.
-- **Pattern A** (PConnect display): CSS classes + optional DS typography. No DS primitives.
-- **Pattern C** (Complex display): `createElement(createPConnectComponent(), ...)` for PConnect children. No DS primitives.
+Follow the implementation structure described in `design-system-extension.md` (read in Step 2). That file specifies the pattern variants (pure display, PConnect display, complex display) for this project's framework.
 
 ---
 
-Create `index.tsx`:
-
-```typescript
-export { default } from './<ComponentName>';
-```
+If the project uses barrel/re-export files (check existing component directories for the convention), create one in the same directory following the same pattern.
 
 ---
 
 ## Step 6 — Register in component-map.ts
 
-Edit `src/components/component-map.ts`:
+Open the project's component map file (the file that maps component names to their implementations) and:
 
-1. Add the import at the top of the file, in the correct section (Fields / Templates / Widgets / Design System Extension)
-2. Add an entry in `getSampleComponentMap()` under the matching category comment
+1. Add the import at the top of the file, in the correct section (Fields / Templates / Widgets / Design System Extension / Infra)
+2. Add an entry in the component map object under the matching category comment
+
+An `infra` entry is an override of a component the SDK already contributes, so it must be listed **after** the SDK's built-in component spread. Listed before it, the spread replaces it and the override silently does nothing.
 
 ⚠️ **Key name exceptions** — verify after registration:
 
@@ -210,10 +188,6 @@ Do not restructure or reorder any existing entries.
 
 ## Step 7 — Verify the build
 
-Run:
-
-```
-npm run build
-```
+Run the project's build process to confirm everything compiles without errors.
 
-If build errors occur, fix them before reporting completion. Report what files were created and what was added to `component-map.ts`.
+If build errors occur, diagnose and fix them before reporting completion. Report what files were created and what was registered in the component map.

package/templates/react-sdk-reference/.ai-common/prompts/component-manifest.json

@@ -148,6 +148,7 @@
         "path": "src/components/infra/DashboardFilter"
       },
       { "name": "DeferLoad", "path": "src/components/infra/DeferLoad" },
+      { "name": "MultiStep", "path": "src/components/infra/MultiStep" },
       { "name": "NavBar", "path": "src/components/infra/NavBar" },
       { "name": "Stages", "path": "src/components/infra/Stages" },
       { "name": "VerticalTabs", "path": "src/components/infra/VerticalTabs" }
@@ -195,5 +196,102 @@
         "path": "src/components/designSystemExtension/WssQuickCreate"
       }
     ]
+  },
+  "aliases": {
+    "Combobox": "AutoComplete",
+    "ComboBox": "AutoComplete",
+    "Typeahead": "AutoComplete",
+    "Autosuggest": "AutoComplete",
+    "SearchSelect": "AutoComplete",
+    "Select": "Dropdown",
+    "Picklist": "Dropdown",
+    "SingleSelect": "Dropdown",
+    "Radio": "RadioButtons",
+    "RadioGroup": "RadioButtons",
+    "OptionGroup": "RadioButtons",
+    "Switch": "Checkbox",
+    "Toggle": "Checkbox",
+    "Boolean": "Checkbox",
+    "Textbox": "TextInput",
+    "StringInput": "TextInput",
+    "SingleLineText": "TextInput",
+    "Memo": "TextArea",
+    "MultilineText": "TextArea",
+    "Notes": "TextArea",
+    "WYSIWYG": "RichText",
+    "HtmlEditor": "RichText",
+    "FormattedText": "RichText",
+    "DatePicker": "Date",
+    "Calendar": "Date",
+    "TimePicker": "Time",
+    "DateTimePicker": "DateTime",
+    "Timestamp": "DateTime",
+    "Money": "Currency",
+    "Amount": "Currency",
+    "Percent": "Percentage",
+    "Ratio": "Percentage",
+    "Tags": "Multiselect",
+    "Chips": "Multiselect",
+    "TokenInput": "Multiselect",
+    "MultiSelectList": "Multiselect",
+    "Hyperlink": "SemanticLink",
+    "Anchor": "SemanticLink",
+    "FileUpload": "Attachment",
+    "Dropzone": "Attachment",
+    "Attachments": "Attachment",
+    "Grid": "SimpleTable",
+    "Table": "SimpleTable",
+    "DataTable": "SimpleTable",
+    "Repeater": "SimpleTable",
+    "Card": "SelectableCard",
+    "Tile": "SelectableCard",
+    "Address": "Location",
+    "Map": "Location",
+    "GeoPoint": "Location",
+    "Person": "UserReference",
+    "Assignee": "UserReference",
+    "Label": "TextContent",
+    "StaticText": "TextContent",
+    "Paragraph": "TextContent"
+  },
+  "behaviorClasses": {
+    "free text entry": ["TextInput"],
+    "long or multi-line text entry": ["TextArea"],
+    "text entry with suggestion list": ["AutoComplete"],
+    "single choice from a list": ["Dropdown"],
+    "single choice with all options visible": ["RadioButtons"],
+    "multiple choice from a list": ["Multiselect"],
+    "on/off value": ["Checkbox"],
+    "date value": ["Date"],
+    "time value": ["Time"],
+    "date and time value": ["DateTime"],
+    "whole number": ["Integer"],
+    "fractional number": ["Decimal"],
+    "monetary amount": ["Currency"],
+    "percentage": ["Percentage"],
+    "email address": ["Email"],
+    "phone number": ["Phone"],
+    "web address": ["URL"],
+    "formatted rich text entry": ["RichText", "RichTextEditor"],
+    "list of simple values": ["ScalarList"],
+    "reference to another record": ["ObjectReference"],
+    "reference to a person": ["UserReference", "Operator"],
+    "geographic location": ["Location"],
+    "file handling": ["Attachment", "FileUtility"],
+    "read-only text display": ["TextContent"],
+    "link display": ["SemanticLink"],
+    "grouped set of fields": ["Group", "FieldGroup", "FieldGroupList"],
+    "confirmation or alert message": ["CancelAlert", "AlertBanner", "Banner"],
+    "layout container": ["DefaultForm", "OneColumn", "TwoColumn", "NarrowWide", "WideNarrow"],
+    "tabular list": ["SimpleTable", "ListView"],
+    "selectable card": ["SelectableCard"],
+    "summary or display block": ["SummaryItem", "SummaryList", "Details", "DetailsFields", "CaseSummary"],
+    "label and value pair list": ["FieldValueList", "CaseSummaryFields"],
+    "task or work item list": ["ToDo"],
+    "activity or history feed": ["CaseHistory", "Pulse"],
+    "announcement or promotional block": ["AppAnnouncement"],
+    "record creation shortcut": ["QuickCreate", "WssQuickCreate"],
+    "people following a record": ["Followers"],
+    "search input form": ["SearchForm", "AdvancedSearch", "PromotedFilters"]
   }
 }