solace-ui-components 18.0.17 → 18.0.22

package/src/resources/MRC_Autopilot/component-usage-guide.json

@@ -0,0 +1,1276 @@
+{
+	"_meta": {
+		"generatedAt": "2026-03-07T19:12:00.000Z",
+		"sourceCodebase": "maas-ui",
+		"totalComponents": 41,
+		"description": "Semantic keyword map for MRC component recommendation. Generated by scanning real usage patterns in maas-ui."
+	},
+	"SolaceAccordion": {
+		"keywords": [
+			"accordion",
+			"collapsible",
+			"expandable",
+			"collapse",
+			"expand",
+			"foldable section",
+			"toggle details",
+			"show more",
+			"collapsible header",
+			"expandable row",
+			"detail row",
+			"collapsible panel",
+			"expand collapse",
+			"entity detail",
+			"token row",
+			"promotion card"
+		],
+		"commonProps": {
+			"expanded": "Controlled expanded state (boolean, always controlled)",
+			"onChange": "Toggle handler — receives (event, expanded)",
+			"summary": "Accordion header content (JSX — always visible)",
+			"details": "Expandable body content (JSX or string — hidden when collapsed)",
+			"dataQa": "Test identifier",
+			"indicatorVariant": "Colored indicator dot: 'info' | 'warn' | 'error' | null",
+			"hover": "Enable hover effect (boolean)",
+			"border": "Show border (boolean, set false for borderless)",
+			"backgroundColor": "Custom background color (theme token string)"
+		},
+		"usageContext": [
+			"Entity detail lists with expandable rows showing version info, state chips, and action menus",
+			"Token/permission management with expandable token rows and actions",
+			"Promotion request cards in Event Portal designer workflows",
+			"SAP Event Mesh connection details in service management",
+			"Import preview panels and side panel sections in topology views"
+		],
+		"usageCount": 43
+	},
+	"SolaceAttributeBadge": {
+		"keywords": [
+			"badge",
+			"attribute badge",
+			"status badge",
+			"label badge",
+			"metadata badge",
+			"tag indicator",
+			"attribute indicator",
+			"info badge"
+		],
+		"commonProps": {
+			"label": "Badge text content",
+			"variant": "Visual style variant",
+			"dataQa": "Test identifier"
+		},
+		"usageContext": [
+			"Entity version metadata badges in Event Portal designer views",
+			"Attribute indicators on accordion summary rows alongside entity names",
+			"Status and metadata labels in referenced version detail panels"
+		],
+		"usageCount": 27
+	},
+	"SolaceAttributeValuePairForm": {
+		"keywords": [
+			"key value form",
+			"attribute value pair",
+			"key value editor",
+			"drag drop list",
+			"enumeration values",
+			"custom headers",
+			"key value pairs",
+			"draggable list"
+		],
+		"commonProps": {
+			"avpList": "Array of {key, value} pairs",
+			"labelForKeys": "Label for key column (e.g., 'Key')",
+			"labelForValues": "Label for value column (e.g., 'Value' or 'Description')",
+			"enableRequiredKeyFieldIndicator": "Show required asterisk on key fields",
+			"enableRequiredValueFieldIndicator": "Show required asterisk on value fields",
+			"readOnly": "Read-only display mode",
+			"emptyFieldDisplayValue": "Placeholder for empty fields (e.g., '-')",
+			"onChange": "Change handler for pair updates"
+		},
+		"usageContext": [
+			"Enumeration version value sets in Event Portal designer (key-value editing)",
+			"Distributed tracing custom headers configuration in SaaS settings",
+			"Draggable attribute-value pair lists with reordering support"
+		],
+		"usageCount": 5
+	},
+	"SolaceBackDrop": {
+		"keywords": [
+			"backdrop",
+			"loading overlay",
+			"full page loading",
+			"blocking overlay",
+			"suspense fallback",
+			"loading screen",
+			"page loader",
+			"spinner overlay",
+			"loading backdrop"
+		],
+		"commonProps": {
+			"open": "Controls visibility (boolean)"
+		},
+		"usageContext": [
+			"Full-page loading overlays during async operations (fetching, initial data load)",
+			"React Suspense fallback component for lazy-loaded routes",
+			"Blocking UI overlay preventing interaction during page transitions"
+		],
+		"usageCount": 11
+	},
+	"SolaceButton": {
+		"keywords": [
+			"button",
+			"submit",
+			"save",
+			"cancel",
+			"delete",
+			"confirm",
+			"action",
+			"CTA",
+			"call to action",
+			"primary action",
+			"secondary action",
+			"dismiss",
+			"close",
+			"icon button",
+			"kebab menu",
+			"more actions",
+			"navigation link",
+			"link button",
+			"copy button",
+			"download",
+			"create",
+			"deploy",
+			"get started",
+			"learn more"
+		],
+		"variants": {
+			"call-to-action": {
+				"keywords": ["primary", "submit", "save", "create", "sign up", "CTA", "deploy", "confirm action"],
+				"description": "Primary action — one per section. Used for save, create, submit, deploy."
+			},
+			"text": {
+				"keywords": ["cancel", "dismiss", "close", "back", "secondary", "reset"],
+				"description": "Cancel/dismiss actions. Least visual weight. Most common variant."
+			},
+			"outline": {
+				"keywords": ["confirm", "secondary confirm", "ok", "acknowledge", "get started", "download", "edit"],
+				"description": "Medium-emphasis actions. Secondary confirm or notable actions."
+			},
+			"icon": {
+				"keywords": [
+					"icon button",
+					"more actions",
+					"kebab",
+					"settings",
+					"toggle visibility",
+					"close X",
+					"refresh",
+					"zoom"
+				],
+				"description": "Icon-only button. MUST have title prop for accessibility."
+			},
+			"link": {
+				"keywords": ["navigation", "link", "go to", "external link", "href", "learn more", "documentation link"],
+				"description": "Navigation links styled as buttons. Always paired with href prop."
+			}
+		},
+		"commonProps": {
+			"variant": "Visual style: 'call-to-action' | 'outline' | 'text' | 'icon' | 'link'",
+			"onClick": "Click handler",
+			"isDisabled": "Disabled state (not 'disabled' — MRC renames this)",
+			"dataQa": "Test identifier",
+			"title": "Tooltip/accessibility label (MUST for icon variant)",
+			"startIcon": "Icon before button text",
+			"endIcon": "Icon after button text (common with external link icon)",
+			"dense": "Compact size (link variant only)",
+			"href": "URL for link variant navigation",
+			"type": "'button' | 'submit' for form submit contexts"
+		},
+		"usageContext": [
+			"Form submit buttons (call-to-action) in dialogs and page action bars",
+			"Cancel/dismiss buttons (text) paired with primary actions in SolaceStack rows",
+			"Icon-only buttons (icon) for close, refresh, zoom in toolbars and panel headers",
+			"External documentation links (link) with href in headers and help sections",
+			"Medium-emphasis actions (outline) like Get Started, Download, Edit in cards"
+		],
+		"usageCount": 340
+	},
+	"SolaceCheckBox": {
+		"keywords": [
+			"checkbox",
+			"check box",
+			"toggle option",
+			"boolean field",
+			"multi select option",
+			"selectable item",
+			"check mark",
+			"agreement checkbox",
+			"terms checkbox",
+			"filter checkbox"
+		],
+		"commonProps": {
+			"id": "DOM id",
+			"name": "Field name",
+			"dataQa": "Test identifier",
+			"label": "Checkbox label text",
+			"checked": "Controlled checked state (boolean)",
+			"onChange": "Change handler",
+			"hasErrors": "Error state display",
+			"helperText": "Helper/error text below checkbox"
+		},
+		"usageContext": [
+			"Form fields for boolean options in create/edit workflows",
+			"Agreement/terms checkboxes in configuration dialogs",
+			"Selectable items in entity lists with SolaceTruncatableLink",
+			"Wrapped in AtomCheckBox for Jotai atom-based state management (mc, sam micro-frontends)"
+		],
+		"usageCount": 32
+	},
+	"SolaceChip": {
+		"keywords": [
+			"chip",
+			"tag",
+			"filter chip",
+			"label chip",
+			"badge chip",
+			"removable tag",
+			"deletable chip",
+			"filter tag",
+			"category chip",
+			"email chip",
+			"domain chip",
+			"environment mode label"
+		],
+		"commonProps": {
+			"label": "Chip text content",
+			"onDelete": "Delete/remove handler (shows X button)",
+			"dataQa": "Test identifier",
+			"disabled": "Disabled state",
+			"clickable": "Whether chip is clickable",
+			"variant": "CHIP_VARIANT.FILLED for filled style, default is outlined"
+		},
+		"usageContext": [
+			"Filter chips for active search/filter criteria (clickable, deletable)",
+			"Email address chips in custom email list management",
+			"Topic filter chips in Event Portal event API management",
+			"Domain and environment mode label chips in designer views",
+			"Entity reference chips in referenced version listings"
+		],
+		"usageCount": 10
+	},
+	"SolaceCircularProgress": {
+		"keywords": [
+			"loading spinner",
+			"circular progress",
+			"loading indicator",
+			"spinner",
+			"loading",
+			"busy indicator",
+			"progress circle",
+			"indeterminate loading",
+			"fetching indicator"
+		],
+		"commonProps": {
+			"size": "Spinner size (number or string)",
+			"dataQa": "Test identifier"
+		},
+		"usageContext": [
+			"Inline loading indicators while fetching data in lists and detail views",
+			"Button loading states replacing button text during async operations",
+			"Section-level loading spinners in cards and panels while content loads"
+		],
+		"usageCount": 34
+	},
+	"SolaceCodeEditor": {
+		"keywords": [
+			"code editor",
+			"JSON editor",
+			"code viewer",
+			"syntax highlighting",
+			"JSON preview",
+			"code display",
+			"read only code",
+			"AsyncAPI preview",
+			"diff viewer",
+			"code block"
+		],
+		"commonProps": {
+			"id": "DOM id",
+			"value": "Code content string",
+			"mode": "Language mode: 'json' (primary observed mode)",
+			"readOnly": "Read-only display mode (boolean)",
+			"dataQa": "Test identifier"
+		},
+		"usageContext": [
+			"JSON preview displays for AsyncAPI documents in download dialogs",
+			"Promotion request preview diffs showing before/after comparisons",
+			"Collected scan data viewer in topology runtime agent management"
+		],
+		"usageCount": 17
+	},
+	"SolaceConfirmationDialog": {
+		"keywords": [
+			"confirmation dialog",
+			"confirm dialog",
+			"alert dialog",
+			"modal confirm",
+			"delete confirmation",
+			"error dialog",
+			"warning dialog",
+			"progress dialog",
+			"simple dialog",
+			"action dialog",
+			"are you sure"
+		],
+		"commonProps": {
+			"isOpen": "Controls dialog visibility (boolean)",
+			"title": "Dialog title text (string)",
+			"actions": "Footer button array: [{label, onClick, variant?}]",
+			"contentText": "Simple text content (prefer children for complex content)",
+			"children": "Dialog body content (JSX — most common approach)",
+			"linearProgressIndicator": "Show loading bar in dialog (boolean)"
+		},
+		"usageContext": [
+			"Delete confirmation dialogs before destructive actions",
+			"Error dialogs displaying API errors with SolaceMessageBox inside",
+			"Progress/loading dialogs with linearProgressIndicator and empty actions",
+			"Simple info dialogs for warnings and required-field prompts",
+			"Configuration dialogs with form content as children"
+		],
+		"usageCount": 138
+	},
+	"SolaceDetailMessage": {
+		"keywords": [
+			"empty state",
+			"no data",
+			"no results",
+			"empty list",
+			"empty view",
+			"zero state",
+			"blank state",
+			"nothing found",
+			"create first item",
+			"get started empty"
+		],
+		"commonProps": {
+			"msgImg": "Illustration element for empty state image",
+			"title": "Empty state heading text",
+			"details": "Description text or JSX below the heading",
+			"actions": "Action buttons (typically CTA to create first item)"
+		},
+		"usageContext": [
+			"Empty state displays when no entities exist in a list or graph view",
+			"Empty search results with prompt to refine search criteria",
+			"Dual-action empty states with 'OR' dividers for alternative create paths"
+		],
+		"usageCount": 14
+	},
+	"SolaceDrawer": {
+		"keywords": [
+			"drawer",
+			"side panel",
+			"sliding panel",
+			"detail panel",
+			"side sheet",
+			"resizable panel",
+			"right panel",
+			"entity detail drawer",
+			"slide out panel",
+			"collapsible sidebar"
+		],
+		"commonProps": {
+			"open": "Controls visibility (boolean)",
+			"width": "Panel width in pixels",
+			"minWidth": "Minimum width during resize",
+			"maxWidth": "Maximum width during resize",
+			"resizable": "Enable drag-to-resize (boolean)",
+			"onResizeDone": "Callback after resize completes",
+			"top": "Top offset (e.g., '60px' or DEFAULT_HEADER_HEIGHT)",
+			"height": "Panel height (e.g., 'calc(100vh - 60px)')"
+		},
+		"usageContext": [
+			"Entity detail side panels in Event Portal designer for schemas, events, applications",
+			"Search and filter panels sliding in from the side",
+			"Topic filter panels in event API management",
+			"Graph left side panels for node detail views",
+			"Runtime agent form panels in topology management"
+		],
+		"usageCount": 14
+	},
+	"SolaceEnvironmentChip": {
+		"keywords": [
+			"environment chip",
+			"environment indicator",
+			"environment badge",
+			"env chip",
+			"color coded chip",
+			"environment label",
+			"service environment",
+			"environment icon"
+		],
+		"commonProps": {
+			"label": "Environment name text (empty string for icon-only)",
+			"fgColor": "Foreground/text color",
+			"bgColor": "Background color",
+			"icon": "Icon element for the chip",
+			"dataQa": "Test identifier",
+			"maxWidth": "Maximum width constraint (e.g., '26px' for icon-only)",
+			"onDelete": "Delete handler (null to hide delete button)"
+		},
+		"usageContext": [
+			"Environment indicators on service cards and service detail headers",
+			"Event mesh environment details in mesh management views",
+			"Application version environment badges in Event Portal designer",
+			"Maintenance window environment labels in activity panels"
+		],
+		"usageCount": 15
+	},
+	"SolaceGrid": {
+		"keywords": [
+			"grid",
+			"responsive grid",
+			"grid layout",
+			"CSS grid",
+			"MUI grid",
+			"dashboard layout",
+			"card grid",
+			"two column layout",
+			"responsive layout",
+			"grid container"
+		],
+		"commonProps": {
+			"container": "Establishes a grid container (boolean)",
+			"item": "Marks a grid item/child (boolean)",
+			"spacing": "Grid spacing (number, e.g., 2)",
+			"sm": "Small breakpoint columns (number)",
+			"lg": "Large breakpoint columns (number)",
+			"xl": "Extra-large breakpoint columns (number)",
+			"display": "'grid' for CSS grid mode",
+			"gridTemplateColumns": "CSS grid template columns (e.g., '1fr 1fr')",
+			"gap": "CSS grid gap"
+		},
+		"usageContext": [
+			"Dashboard layouts for rate cards, pie charts, and reuse index panels",
+			"Monitoring pages with summary cards in responsive grid",
+			"Two-column page layouts with side panel and main content area",
+			"CSS grid mode for custom template column layouts"
+		],
+		"usageCount": 41
+	},
+	"SolaceGridList": {
+		"keywords": [
+			"grid list",
+			"data grid",
+			"row list",
+			"structured list",
+			"entity grid",
+			"grid view list",
+			"template grid"
+		],
+		"commonProps": {
+			"items": "Array of data items to render",
+			"rowMapping": "Callback (item, index) => JSX.Element[] for row rendering",
+			"gridTemplate": "Grid column template (e.g., 'auto 0fr', 'minmax(10ch,auto) 1fr')",
+			"dataQa": "Test identifier",
+			"onSelection": "Row selection callback"
+		},
+		"usageContext": [
+			"Linked applications lists in Event Portal entity detail views",
+			"Event broker listings in topology runtime management",
+			"Event API product association lists in designer workflows"
+		],
+		"usageCount": 20
+	},
+	"SolaceLabel": {
+		"keywords": [
+			"label",
+			"form label",
+			"field label",
+			"input label",
+			"section label",
+			"metadata label",
+			"required field label"
+		],
+		"commonProps": {
+			"id": "Unique label identifier (string)",
+			"htmlForId": "Associates label with form input via 'for' attribute",
+			"required": "Show asterisk indicator for required fields (boolean)",
+			"noWrap": "Prevent text wrapping (boolean)",
+			"children": "Label text content"
+		},
+		"usageContext": [
+			"Form field labels in create/edit workflows (service create, agent create, schema forms)",
+			"Section headers in detail views and side panels",
+			"Dialog field labels in configuration and upgrade dialogs",
+			"Table column headers in access management dialogs",
+			"Info/metadata labels paired with display values"
+		],
+		"usageCount": 106
+	},
+	"SolaceLearningBanner": {
+		"keywords": [
+			"learning banner",
+			"info banner",
+			"educational banner",
+			"onboarding banner",
+			"help banner",
+			"guidance banner",
+			"walkthrough banner",
+			"tip banner",
+			"getting started",
+			"how to",
+			"feature explanation",
+			"contextual help"
+		],
+		"commonProps": {
+			"showCloseButton": "Enable close/dismiss button (boolean)",
+			"onClose": "Close callback handler",
+			"backgroundColor": "Custom background color (theme token or hex)",
+			"title": "Optional title text rendered as heading",
+			"dataQa": "Test identifier"
+		},
+		"usageContext": [
+			"Informational/educational banners at the top of pages or sections",
+			"Step-by-step walkthrough guidance for EMA setup and onboarding",
+			"Feature explanations for reuse index, insights setup, environment quick start",
+			"Release notes display in upgrade dialogs",
+			"Contextual help within forms and configuration settings"
+		],
+		"usageCount": 36
+	},
+	"SolaceLinearProgress": {
+		"keywords": [
+			"progress bar",
+			"linear progress",
+			"loading bar",
+			"determinate progress",
+			"percentage bar",
+			"creation progress",
+			"operation progress",
+			"indeterminate bar",
+			"horizontal progress"
+		],
+		"variants": {
+			"determinate": {
+				"keywords": ["percentage", "progress percentage", "known progress", "upload progress"],
+				"description": "Shows specific completion percentage via value prop (0-100)."
+			},
+			"indeterminate": {
+				"keywords": ["unknown progress", "continuous loading", "pending operation"],
+				"description": "Continuous animation for operations with unknown duration."
+			}
+		},
+		"commonProps": {
+			"variant": "'determinate' | 'indeterminate'",
+			"height": "'sm' for small height",
+			"value": "Progress percentage 0-100 (determinate only)"
+		},
+		"usageContext": [
+			"Service creation progress bars during provisioning",
+			"Service card progress indicators for ongoing operations",
+			"Event mesh card progress during mesh operations",
+			"Application deployment progress in Event Portal designer"
+		],
+		"usageCount": 8
+	},
+	"SolaceList": {
+		"keywords": ["list", "navigation list", "resource list", "item list", "vertical list", "menu list", "link list"],
+		"commonProps": {
+			"disablePadding": "Remove default padding (boolean)"
+		},
+		"usageContext": [
+			"Navigation lists for application detail sections and getting started resources",
+			"Resource link lists in Event Portal resource pages",
+			"Email chip tooltip content lists in account settings",
+			"Entity lists in topology configuration templates"
+		],
+		"usageCount": 7
+	},
+	"SolaceListItem": {
+		"keywords": ["list item", "list row", "navigation item", "list entry"],
+		"commonProps": {
+			"disableGutters": "Remove side gutters (boolean)",
+			"disablePadding": "Remove padding (boolean)"
+		},
+		"usageContext": [
+			"Individual items inside SolaceList for navigation and resource links",
+			"Wraps SolaceListItemButton for clickable navigation items",
+			"Email items in tooltip-based email chip lists"
+		],
+		"usageCount": 6
+	},
+	"SolaceListItemButton": {
+		"keywords": [
+			"list item button",
+			"clickable list item",
+			"navigation list item",
+			"selectable list item",
+			"list action item"
+		],
+		"commonProps": {
+			"selected": "Selected/active state (boolean)",
+			"onClick": "Click handler"
+		},
+		"usageContext": [
+			"Clickable navigation items in application details group navigation panels",
+			"Getting started tab navigation with selected state highlighting"
+		],
+		"usageCount": 5
+	},
+	"SolaceMenu": {
+		"keywords": [
+			"menu",
+			"dropdown menu",
+			"action menu",
+			"context menu",
+			"kebab menu",
+			"more actions menu",
+			"three dot menu",
+			"ellipsis menu",
+			"options menu",
+			"row actions",
+			"settings menu",
+			"popup menu"
+		],
+		"commonProps": {
+			"buttonProps": "Trigger button config: {variant: 'icon', children: <Icon/>, title: string, dataQa: string}",
+			"items": "Menu items array: [{name, onMenuItemClick, dataQa, disabled?, divider?, secondaryAction?}]",
+			"id": "Menu container id",
+			"anchorOrigin": "Popup position: {horizontal, vertical}",
+			"transformOrigin": "Popup transform origin",
+			"closeOnSelect": "Close menu on item click (boolean)"
+		},
+		"usageContext": [
+			"Row-level action menus in entity lists, cards, accordions, and tables",
+			"Toolbar menus for graph settings, designer actions, and view options",
+			"Entity action menus (service, domain, agent actions with Open, Edit, Clone, Delete)",
+			"Token management menus (View Token, Regenerate, Delete)",
+			"Sort and group menus with radio group selections inside"
+		],
+		"usageCount": 43
+	},
+	"SolaceMessageBox": {
+		"keywords": [
+			"message box",
+			"alert",
+			"error message",
+			"warning message",
+			"info message",
+			"success message",
+			"notification banner",
+			"error banner",
+			"warning banner",
+			"status message",
+			"form error",
+			"API error",
+			"validation error"
+		],
+		"variants": {
+			"error": {
+				"keywords": ["error", "API error", "validation error", "failed", "unable to", "permission error"],
+				"description": "Error messages — API failures, validation errors, permission issues. Most common variant."
+			},
+			"warn": {
+				"keywords": ["warning", "caution", "notice", "attention", "before you proceed"],
+				"description": "Warnings before actions, state notices, non-blocking issues."
+			},
+			"info": {
+				"keywords": ["information", "info", "guidance", "tip", "note", "feature explanation"],
+				"description": "Informational messages, feature explanations, configuration tips."
+			},
+			"success": {
+				"keywords": ["success", "completed", "done", "saved"],
+				"description": "Positive outcome messages. Rare — used for confirmed successful operations."
+			}
+		},
+		"commonProps": {
+			"message": "Message text or JSX element (required)",
+			"variant": "'error' | 'warn' | 'info' | 'success'",
+			"dataQa": "Test identifier",
+			"showIcon": "Show variant-specific icon (boolean)",
+			"showCloseButton": "Show dismiss X button (boolean)",
+			"onClose": "Close handler",
+			"details": "Expandable details section (JSX or string)"
+		},
+		"usageContext": [
+			"Form validation error display inline above or below form fields",
+			"API error display after failed requests, often inside confirmation dialogs",
+			"Warning banners before destructive actions in delete/confirmation dialogs",
+			"Informational guidance for new features and configuration tips",
+			"State warnings like 'Objects must be in Draft state to edit'"
+		],
+		"usageCount": 122
+	},
+	"SolacePageHeader": {
+		"keywords": [
+			"page header",
+			"page title",
+			"page heading",
+			"top header",
+			"breadcrumb header",
+			"page banner",
+			"navigation header"
+		],
+		"commonProps": {
+			"title": "Page heading text",
+			"subTitle": "Subtitle or description text",
+			"breadcrumbs": "Breadcrumb navigation elements",
+			"actions": "Header action buttons (JSX)",
+			"dataQa": "Test identifier"
+		},
+		"usageContext": [
+			"Top-level page headers in Event Portal pages (Home, Resources, Designer)",
+			"Domain header with breadcrumb navigation and action buttons",
+			"Dashboard headers with subtitle counts and descriptions"
+		],
+		"usageCount": 22
+	},
+	"SolacePagination": {
+		"keywords": [
+			"pagination",
+			"page navigation",
+			"paging",
+			"page selector",
+			"next page",
+			"previous page",
+			"table pagination",
+			"list pagination"
+		],
+		"commonProps": {
+			"totalResults": "Total number of items (number)",
+			"pageSize": "Items per page (number)",
+			"activePage": "Current active page (number)",
+			"onPageSelection": "Page change handler",
+			"loading": "Show loading state (boolean)"
+		},
+		"usageContext": [
+			"Entity list pagination below tables in Event Portal designer views",
+			"Maintenance activities table pagination in Mission Control",
+			"Search result pagination in entity search dialogs and panels"
+		],
+		"usageCount": 11
+	},
+	"SolacePopover": {
+		"keywords": [
+			"popover",
+			"popup",
+			"floating panel",
+			"dropdown panel",
+			"hover card",
+			"info popup",
+			"popover menu",
+			"overlay panel",
+			"tooltip panel",
+			"floating content"
+		],
+		"commonProps": {
+			"open": "Controls visibility (boolean)",
+			"anchorElement": "Anchor element ref for positioning",
+			"anchorPosition": "Explicit position coordinates",
+			"anchorOrigin": "Anchor point: {vertical, horizontal}",
+			"transformOrigin": "Transform origin: {vertical, horizontal}",
+			"activateOnHover": "Open on hover instead of click (boolean)"
+		},
+		"usageContext": [
+			"Custom sort dropdown menus with radio group selections",
+			"Feature onboarding overlay modals for first-time users",
+			"Map marker hover popovers in event mesh geographic views",
+			"Metadata info wrapper popovers in designer shared assets",
+			"Connector chip content popovers in integration flows"
+		],
+		"usageCount": 5
+	},
+	"SolaceRadio": {
+		"keywords": [
+			"radio",
+			"radio button",
+			"radio option",
+			"single select option",
+			"choice option",
+			"exclusive option",
+			"radio input"
+		],
+		"commonProps": {
+			"id": "DOM id",
+			"name": "Radio group name",
+			"dataQa": "Test identifier",
+			"label": "Radio option label text",
+			"subText": "Description text below label",
+			"lightSubText": "Light styling for subText (boolean)",
+			"value": "Radio option value",
+			"checked": "Selected state (boolean)",
+			"onChange": "Change handler",
+			"readOnly": "Read-only state (boolean)"
+		},
+		"usageContext": [
+			"Service type selection cards in service create forms",
+			"Endpoint type selection in service configuration",
+			"Review decision options (Approve/Reject) in request review dialogs",
+			"Sort direction options (Ascending/Descending) in sort menus"
+		],
+		"usageCount": 14
+	},
+	"SolaceRadioGroup": {
+		"keywords": [
+			"radio group",
+			"radio button group",
+			"option group",
+			"exclusive selection group",
+			"single choice group"
+		],
+		"commonProps": {
+			"id": "DOM id",
+			"name": "Group name for all child radios",
+			"dataQa": "Test identifier",
+			"value": "Currently selected value",
+			"onChange": "Selection change handler",
+			"readOnly": "Read-only state (boolean)",
+			"inline": "Horizontal layout (boolean, default false)"
+		},
+		"usageContext": [
+			"Service type selection forms wrapping SolaceRadio children",
+			"Endpoint selection in service creation workflows",
+			"Event broker configuration form radio groups in monitoring setup",
+			"Sort dropdown radio selections inside SolacePopover"
+		],
+		"usageCount": 10
+	},
+	"SolaceSelect": {
+		"keywords": [
+			"select",
+			"dropdown",
+			"dropdown select",
+			"select field",
+			"picker",
+			"chooser",
+			"option selector",
+			"form dropdown",
+			"select input",
+			"select menu"
+		],
+		"commonProps": {
+			"name": "Field name",
+			"value": "Controlled selected value (string)",
+			"onChange": "Change handler — uses {value} destructured pattern, not e.target.value",
+			"dataQa": "Test identifier",
+			"id": "DOM id",
+			"label": "Inline label text",
+			"inlineLabel": "Render label inline with field (boolean)",
+			"hasErrors": "Error state display (boolean)",
+			"helperText": "Helper/error text below select",
+			"readOnly": "Read-only display mode",
+			"required": "Required field indicator",
+			"disabled": "Disabled state",
+			"getOptionDisplayValue": "Custom display value formatter"
+		},
+		"usageContext": [
+			"Cloud/region selection dropdowns in service create forms",
+			"Broker type and authentication type selectors in configuration dialogs",
+			"View-by filter dropdowns in monitoring and insights pages",
+			"Version state selectors in Event Portal designer workflows",
+			"Dynamic form widget selectors via rjsf integration"
+		],
+		"usageCount": 48
+	},
+	"SolaceSelectAutocomplete": {
+		"keywords": [
+			"autocomplete",
+			"searchable dropdown",
+			"typeahead",
+			"combobox",
+			"search select",
+			"autocomplete select",
+			"filterable dropdown",
+			"async select",
+			"search and select"
+		],
+		"commonProps": {
+			"id": "DOM id",
+			"name": "Field name",
+			"dataQa": "Test identifier",
+			"options": "Array of option items",
+			"value": "Selected value",
+			"onChange": "Selection change handler",
+			"disabled": "Disabled state",
+			"readOnly": "Read-only state",
+			"required": "Required field indicator",
+			"fetchOptionsCallback": "Async function to fetch options dynamically",
+			"itemMappingCallback": "Custom option rendering callback",
+			"groupByCallback": "Group options callback",
+			"optionsLabelCallback": "Custom label display callback",
+			"itemComponent": "Custom option component (default: SolaceSelectAutocompleteItem)",
+			"title": "Tooltip/accessibility text"
+		},
+		"usageContext": [
+			"Region selection with searchable filtered dropdown in service create forms",
+			"Broker family/version selection with async option fetching",
+			"Cluster name selection with create-new option in service configuration",
+			"Existing configuration selectors in Event Portal wizard workflows"
+		],
+		"usageCount": 8
+	},
+	"SolaceSidePanelLayout": {
+		"keywords": [
+			"side panel layout",
+			"master detail layout",
+			"split layout",
+			"panel layout",
+			"detail panel layout",
+			"list detail layout",
+			"resizable side panel",
+			"collapsible side panel"
+		],
+		"commonProps": {
+			"showSidePanel": "Controls panel visibility (boolean)",
+			"sidePanelWidth": "Panel width in pixels (e.g., 480)",
+			"sidePanelContent": "Side panel content (JSX)",
+			"sidePanelPosition": "Panel position: SolacePanelPosition.LEFT or default right"
+		},
+		"usageContext": [
+			"Entity list views with detail side panels in Event Portal designer",
+			"Event mesh details with side panel for service/node details",
+			"Maintenance activities with side panel for activity details",
+			"Environment grid with detail panel for environment info",
+			"Catalog views with entity detail side panels"
+		],
+		"usageCount": 6
+	},
+	"SolaceStack": {
+		"keywords": [
+			"stack",
+			"flex container",
+			"vertical stack",
+			"horizontal stack",
+			"layout container",
+			"flex layout",
+			"column layout",
+			"row layout",
+			"spacing container",
+			"flex group",
+			"button row",
+			"form layout"
+		],
+		"commonProps": {
+			"spacing": "Gap between children (number: 1, 2, 3, 5)",
+			"direction": "'row' for horizontal, default is 'column'",
+			"gap": "Alternative to spacing (number)",
+			"justifyContent": "Flex justify-content (e.g., 'end')",
+			"width": "'100%' for full width",
+			"margin": "Margin shorthand (number)",
+			"padding": "Padding shorthand (number)"
+		},
+		"usageContext": [
+			"Form layouts grouping form fields vertically with consistent spacing",
+			"Button rows (direction='row') for Cancel + CTA action pairs",
+			"Dialog and confirmation dialog content layout",
+			"Card content containers with stacked typography and actions",
+			"Page sections and footers with consistent spacing"
+		],
+		"usageCount": 78
+	},
+	"SolaceTable": {
+		"keywords": ["table", "data table", "sortable table", "grid table", "tabular data", "table view"],
+		"commonProps": {
+			"columns": "SolaceTableColumn[] — column definitions",
+			"rows": "SolaceTableRow[] — row data array",
+			"loading": "Show loading state (boolean)",
+			"selectionType": "SolaceTableSelectionType.NONE | SINGLE | MULTI",
+			"sortCallback": "Column sort handler",
+			"renderCustomRowCells": "Custom cell renderer callback",
+			"renderCustomRowActionItem": "Custom row action renderer"
+		},
+		"usageContext": [
+			"Maintenance activities data tables with sortable columns",
+			"Completed activities tables with pagination below",
+			"Activity checks tables with custom cell rendering for status colors"
+		],
+		"usageCount": 5
+	},
+	"SolaceTabs": {
+		"keywords": [
+			"tabs",
+			"tab bar",
+			"tab navigation",
+			"tabbed interface",
+			"tab panel",
+			"section tabs",
+			"navigation tabs",
+			"tab switcher"
+		],
+		"commonProps": {
+			"value": "Active tab index or value",
+			"onChange": "Tab change handler",
+			"children": "Tab elements as children",
+			"dataQa": "Test identifier"
+		},
+		"usageContext": [
+			"Section navigation tabs in service detail pages (Overview, Connect, Manage)",
+			"Entity detail tabs in Event Portal designer (Details, Events, Schemas)",
+			"Configuration section tabs in settings pages",
+			"Monitoring dashboard tabs for different metric views"
+		],
+		"usageCount": 33
+	},
+	"SolaceTextArea": {
+		"keywords": [
+			"textarea",
+			"text area",
+			"multiline input",
+			"long text field",
+			"description field",
+			"notes field",
+			"multiline text",
+			"large text input",
+			"comment field"
+		],
+		"commonProps": {
+			"id": "DOM id",
+			"name": "Field name",
+			"dataQa": "Test identifier",
+			"value": "Controlled text value",
+			"onChange": "Change handler",
+			"hasErrors": "Error state display (boolean)",
+			"helperText": "Helper/error text below textarea",
+			"readOnly": "Read-only display mode (boolean)",
+			"maxLength": "Maximum character limit (number)"
+		},
+		"usageContext": [
+			"Long-text form fields for descriptions, request targets, and header values",
+			"Read-only display of long strings (>255 characters) in detail views",
+			"Wrapped in AtomTextArea for Jotai atom-based state management (mc, sam micro-frontends)"
+		],
+		"usageCount": 17
+	},
+	"SolaceTextField": {
+		"keywords": [
+			"text field",
+			"text input",
+			"input field",
+			"form input",
+			"text box",
+			"input box",
+			"search field",
+			"filter input",
+			"name field",
+			"email field",
+			"password field",
+			"username field"
+		],
+		"commonProps": {
+			"name": "Field name identifier",
+			"value": "Controlled input value",
+			"onChange": "Change handler — uses {value} destructured pattern, not e.target.value",
+			"dataQa": "Test identifier",
+			"id": "DOM id",
+			"label": "Inline label text",
+			"readOnly": "Read-only display mode (boolean)",
+			"hasErrors": "Error state display (boolean)",
+			"helperText": "Helper/error text below input",
+			"required": "Required field indicator",
+			"type": "'text' | 'password' input type",
+			"autoFocus": "Auto-focus on mount (boolean)",
+			"disabled": "Disabled state",
+			"onBlur": "Blur validation handler",
+			"inlineLabel": "Render label inline with field",
+			"endAdornment": "End adornment elements (e.g., show/hide password button)",
+			"placeholder": "Placeholder text"
+		},
+		"usageContext": [
+			"Form fields in create/edit workflows (service name, agent name, configuration fields)",
+			"Read-only display fields showing service version, agent ID, connection details",
+			"Search/filter inputs with search icon end adornment",
+			"Dialog content form fields in upgrade, configuration, and setup dialogs",
+			"Dynamic form widgets via rjsf integration for connector configuration"
+		],
+		"usageCount": 75
+	},
+	"SolaceToggle": {
+		"keywords": [
+			"toggle",
+			"toggle switch",
+			"switch",
+			"on off switch",
+			"boolean toggle",
+			"flip switch",
+			"toggle button",
+			"enable disable"
+		],
+		"commonProps": {
+			"id": "DOM id",
+			"name": "Field name",
+			"dataQa": "Test identifier",
+			"isOn": "Controlled toggle state (boolean — not 'checked')",
+			"onChange": "Change handler",
+			"label": "Toggle label text",
+			"hasErrors": "Error state display (boolean)",
+			"helperText": "Helper/error text"
+		},
+		"usageContext": [
+			"Boolean toggle switches for filter options (e.g., 'Hide Matches')",
+			"Audit configuration toggles in topology management",
+			"Wrapped in AtomToggle for Jotai atom-based state management (mc, sam micro-frontends)"
+		],
+		"usageCount": 15
+	},
+	"SolaceToggleButtonGroup": {
+		"keywords": [
+			"toggle button group",
+			"segmented control",
+			"toggle group",
+			"button group",
+			"segmented toggle",
+			"view switcher",
+			"filter toggle",
+			"option toggle group"
+		],
+		"commonProps": {
+			"options": "Array of toggle button options with labels and values",
+			"activeValue": "Currently active option value (string)",
+			"onChange": "Selection change handler"
+		},
+		"usageContext": [
+			"Segmented toggles for filtering views (Publish/Subscribe/All flow directions)",
+			"Custom attribute type tabs (String/Number/Boolean) in Event Portal",
+			"List/grid view toggle in service and mesh list pages",
+			"Event reference list filter toggles in designer views"
+		],
+		"usageCount": 8
+	},
+	"SolaceTooltip": {
+		"keywords": [
+			"tooltip",
+			"hover tip",
+			"info tooltip",
+			"help tooltip",
+			"truncation tooltip",
+			"overflow tooltip",
+			"popover tooltip",
+			"title tooltip",
+			"accessibility tooltip",
+			"hover info"
+		],
+		"variants": {
+			"overflow": {
+				"keywords": ["truncated text", "text overflow", "ellipsis tooltip", "show full text"],
+				"description": "Shows full text when content is truncated. Most common variant."
+			},
+			"rich": {
+				"keywords": ["rich tooltip", "multiline tooltip", "detailed tooltip", "error details tooltip"],
+				"description": "Multi-line or complex content tooltips for error details and info blurbs."
+			},
+			"html": {
+				"keywords": ["HTML tooltip", "JSX tooltip", "component tooltip", "interactive tooltip"],
+				"description": "JSX/component tooltips for authentication tips and info panels."
+			},
+			"text": {
+				"keywords": ["simple tooltip", "plain tooltip", "text only tooltip"],
+				"description": "Simple text-only tooltips for labels and status indicators."
+			}
+		},
+		"commonProps": {
+			"title": "Tooltip content — string or JSX (required)",
+			"variant": "'overflow' | 'rich' | 'html' | 'text'",
+			"placement": "'top' | 'top-start' | 'bottom' | 'bottom-start' | 'right'",
+			"maxWidth": "'small' | 'medium' — constrains tooltip width",
+			"dataQa": "Test identifier",
+			"open": "Controlled open state (boolean, rare)",
+			"disableHoverListener": "Conditionally disable tooltip on hover",
+			"disableFocusListener": "Disable tooltip on focus"
+		},
+		"usageContext": [
+			"Truncated text tooltips (variant='overflow') in table cells, names, and error messages",
+			"Status indicator hover tooltips for ready/not ready/maintenance states",
+			"Help/info icon tooltips wrapping HelpIcon for form field explanations",
+			"Rich error detail tooltips with JSX content for mesh health and warnings",
+			"Disabled button explanations (wrapping disabled SolaceButton with reason)"
+		],
+		"usageCount": 138
+	},
+	"SolaceTruncatableLink": {
+		"keywords": [
+			"truncatable link",
+			"ellipsis link",
+			"overflow link",
+			"entity link",
+			"clickable name",
+			"table link",
+			"list link",
+			"name link",
+			"navigation link"
+		],
+		"commonProps": {
+			"id": "DOM id",
+			"text": "Link text content (displayed with truncation)",
+			"onClick": "Click handler (undefined for non-clickable display)"
+		},
+		"usageContext": [
+			"Entity name links in data tables — domains, applications, schemas, events",
+			"Audit side panel entity name links for navigation",
+			"Entity detail labels that navigate to the entity's page on click",
+			"Template and request table clickable name entries"
+		],
+		"usageCount": 14
+	},
+	"SolaceTypography": {
+		"keywords": [
+			"typography",
+			"text",
+			"heading",
+			"title",
+			"subtitle",
+			"paragraph",
+			"caption",
+			"body text",
+			"label text",
+			"page title",
+			"section header",
+			"description text"
+		],
+		"variants": {
+			"h1": {
+				"keywords": ["page title", "main heading", "top level heading"],
+				"description": "Page-level titles at the top of pages."
+			},
+			"h2": {
+				"keywords": ["panel heading", "section title", "secondary heading"],
+				"description": "Panel headings and major section titles."
+			},
+			"h3": {
+				"keywords": ["section header", "card title", "dialog section", "subsection heading"],
+				"description": "Section headers, card titles, side panel headers."
+			},
+			"h4": {
+				"keywords": ["group label", "small heading", "category label"],
+				"description": "Group labels in cards and lists."
+			},
+			"h5": {
+				"keywords": ["sub-section label", "column header", "minor heading"],
+				"description": "Sub-section labels and table column headers."
+			},
+			"body1": {
+				"keywords": ["body text", "paragraph", "content text", "description"],
+				"description": "Body text content, typically with component='div' for block layout."
+			},
+			"caption": {
+				"keywords": ["caption", "metadata", "secondary text", "small text"],
+				"description": "Metadata, secondary info, environment labels."
+			}
+		},
+		"commonProps": {
+			"variant": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'body1' | 'caption'",
+			"component": "Override rendered HTML element: 'div' | 'span'",
+			"sx": "MUI inline styles object",
+			"fontWeight": "Font weight override (number or theme ref)",
+			"children": "Text content"
+		},
+		"usageContext": [
+			"Page headings (variant='h1') at the top of all pages",
+			"Section titles (variant='h3') within cards, panels, and dialog sections",
+			"Body text content (variant='body1') with component='div' for block layout",
+			"Metadata and secondary info (variant='caption') in detail views",
+			"Inline text spans with component='span' for mixed content"
+		],
+		"usageCount": 279
+	}
+}