@redocly/theme 0.59.0-next.1 → 0.59.0-next.11

package/lib/markdoc/default.js

@@ -18,13 +18,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.tags = exports.components = void 0;
 /* Attributes */
@@ -54,6 +64,7 @@ const input_1 = require("../markdoc/tags/input");
 const code_toggle_1 = require("../markdoc/tags/code-toggle");
 const code_group_1 = require("../markdoc/tags/code-group");
 const icon_1 = require("../markdoc/tags/icon");
+const connect_mcp_1 = require("../markdoc/tags/connect-mcp");
 exports.tags = {
     [admonition_1.admonition.tagName]: admonition_1.admonition.schema,
     [debug_1.debug.tagName]: debug_1.debug.schema,
@@ -73,5 +84,6 @@ exports.tags = {
     [input_1.input.tagName]: input_1.input.schema,
     [code_group_1.codeGroup.tagName]: code_group_1.codeGroup.schema,
     [icon_1.icon.tagName]: icon_1.icon.schema,
+    [connect_mcp_1.connectMcp.tagName]: connect_mcp_1.connectMcp.schema,
 };
 //# sourceMappingURL=default.js.map

package/lib/markdoc/tags/card.js

@@ -54,7 +54,6 @@ exports.card = {
             },
             to: { type: String, resolver: 'link' },
         },
-        children: ['paragraph', 'tag', 'list'],
     },
     tagName: 'card',
 };

package/lib/markdoc/tags/connect-mcp.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const connectMcp: MarkdocSchemaWrapper;

package/lib/markdoc/tags/connect-mcp.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.connectMcp = void 0;
+exports.connectMcp = {
+    schema: {
+        render: 'ConnectMCP',
+        attributes: {
+            placement: {
+                type: String,
+                default: 'bottom',
+                matches: ['top', 'bottom'],
+            },
+            alignment: {
+                type: String,
+                default: 'start',
+                matches: ['start', 'end'],
+            },
+            options: {
+                type: Array,
+                default: ['cursor', 'vscode', 'copy'],
+            },
+        },
+        selfClosing: true,
+    },
+    tagName: 'connect-mcp',
+};
+//# sourceMappingURL=connect-mcp.js.map

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@redocly/theme",
-  "version": "0.59.0-next.1",
+  "version": "0.59.0-next.11",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
     "redocly"
   ],
   "author": "team@redocly.com",
-  "license": "SEE LICENSE IN LICENSE",
+  "license": "MIT",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "exports": {
@@ -44,7 +44,7 @@
     "@types/highlight-words-core": "1.2.3",
     "@types/lodash.debounce": "4.0.9",
     "@types/lodash.throttle": "4.1.9",
-    "@types/node": "22.15.3",
+    "@types/node": "22.18.13",
     "@types/nprogress": "0.2.3",
     "@types/react": "^19.1.4",
     "@types/react-dom": "^19.1.4",
@@ -63,10 +63,10 @@
     "styled-system": "5.1.5",
     "ts-node": "10.9.2",
     "ts-node-dev": "2.0.0",
-    "tsc-alias": "1.8.10",
+    "tsc-alias": "1.8.16",
     "tsconfig-paths": "4.2.0",
     "tsconfig-paths-webpack-plugin": "3.5.2",
-    "typescript": "5.6.2",
+    "typescript": "5.9.3",
     "vitest": "3.2.4",
     "vitest-when": "0.6.2",
     "webpack": "5.94.0"
@@ -84,11 +84,11 @@
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "4.1.1",
     "nprogress": "0.2.0",
-    "openapi-sampler": "1.6.1",
+    "openapi-sampler": "1.6.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.35.1",
-    "@redocly/realm-asyncapi-sdk": "0.5.0-next.0"
+    "@redocly/config": "0.37.0",
+    "@redocly/realm-asyncapi-sdk": "0.5.0-next.3"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Buttons/AIAssistantButton.tsx

@@ -21,7 +21,7 @@ interface AIAssistantButtonConfig {
 const defaultConfig: Required<AIAssistantButtonConfig> = {
   hide: false,
   inputType: 'button',
-  inputIcon: 'redocly',
+  inputIcon: 'sparkles',
 };
 
 const getIcon = (
@@ -56,8 +56,9 @@ const getIcon = (
 export function AIAssistantButton() {
   const [isOpen, setIsOpen] = useState(false);
   const themeConfig = useThemeConfig();
-  const { useTranslate } = useThemeHooks();
+  const { useTranslate, useTelemetry } = useThemeHooks();
   const { translate } = useTranslate();
+  const telemetry = useTelemetry();
 
   const buttonConfig = {
     ...defaultConfig,
@@ -75,6 +76,9 @@ export function AIAssistantButton() {
 
   const handleOpen = () => {
     setIsOpen(true);
+    telemetry.sendSearchAiOpenedMessage({
+      method: 'ai_trigger_button',
+    });
   };
 
   const handleClose = () => {

package/src/components/Buttons/ConnectMCPButton.tsx

@@ -0,0 +1,180 @@
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { MCPOption } from '@redocly/theme/core/types';
+
+import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
+import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
+import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { CursorIcon } from '@redocly/theme/icons/CursorIcon/CursorIcon';
+import { VSCodeIcon } from '@redocly/theme/icons/VSCodeIcon/VSCodeIcon';
+import { CopyIcon } from '@redocly/theme/icons/CopyIcon/CopyIcon';
+import { CheckmarkFilledIcon } from '@redocly/theme/icons/CheckmarkFilledIcon/CheckmarkFilledIcon';
+import { ConnectIcon } from '@redocly/theme/icons/ConnectIcon/ConnectIcon';
+import { useConnectMCPButton } from '@redocly/theme/core/hooks/use-connect-mcp-button';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+type TriggerButtonProps = {
+  text: string;
+};
+
+const TriggerButton = React.memo(({ text }: TriggerButtonProps): JSX.Element => {
+  return (
+    <StyledButton variant="secondary" icon={<ConnectIcon />}>
+      {text}
+    </StyledButton>
+  );
+});
+
+type MenuOption = {
+  key: MCPOption;
+  icon: React.ComponentType;
+  titleTranslationKey: string;
+  titleDefault: string;
+  descriptionTranslationKey: string;
+  descriptionDefault: string;
+};
+
+const MENU_OPTIONS: MenuOption[] = [
+  {
+    key: 'cursor',
+    icon: CursorIcon,
+    titleTranslationKey: 'page.actions.connectMcp.cursor',
+    titleDefault: 'Connect to Cursor',
+    descriptionTranslationKey: 'page.actions.connectMcp.cursorDescription',
+    descriptionDefault: 'Install MCP server on Cursor',
+  },
+  {
+    key: 'vscode',
+    icon: VSCodeIcon,
+    titleTranslationKey: 'page.actions.connectMcp.vscode',
+    titleDefault: 'Connect to VS Code',
+    descriptionTranslationKey: 'page.actions.connectMcp.vscodeDescription',
+    descriptionDefault: 'Install MCP server on VS Code',
+  },
+  {
+    key: 'copy',
+    icon: CopyIcon,
+    titleTranslationKey: 'page.actions.connectMcp.copyConfig',
+    titleDefault: 'Copy MCP Configuration',
+    descriptionTranslationKey: 'page.actions.connectMcp.copyConfigDescription',
+    descriptionDefault: 'Copy MCP JSON Configuration',
+  },
+];
+
+export type ConnectMCPButtonProps = {
+  placement?: 'top' | 'bottom';
+  alignment?: 'start' | 'end';
+  options?: MCPOption[];
+};
+
+export function ConnectMCPButton({
+  placement = 'bottom',
+  alignment = 'end',
+  options = ['cursor', 'vscode', 'copy'],
+}: ConnectMCPButtonProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  const { isCopied, triggerButtonText, visibleOptions, handleAction } = useConnectMCPButton({
+    options,
+  });
+
+  const menuOptions = useMemo(
+    () => MENU_OPTIONS.filter((option) => visibleOptions.includes(option.key)),
+    [visibleOptions],
+  );
+
+  return (
+    <ConnectMCPButtonWrapper data-component-name="Buttons/ConnectMCPButton">
+      <Dropdown
+        trigger={<TriggerButton text={triggerButtonText} />}
+        triggerEvent="hover"
+        placement={placement}
+        alignment={alignment}
+        closeOnClick={false}
+      >
+        <DropdownMenu>
+          {menuOptions.map((option) => {
+            const Icon = option.icon;
+            const showCheckmark = option.key === 'copy' && isCopied;
+
+            return (
+              <DropdownMenuItem key={option.key} onAction={() => handleAction(option.key)}>
+                <MenuItemContent>
+                  <MenuItemIcon>
+                    {showCheckmark ? (
+                      <CheckmarkFilledIcon color="var(--color-success-base)" />
+                    ) : (
+                      <Icon />
+                    )}
+                  </MenuItemIcon>
+                  <MenuItemText>
+                    <MenuItemTitle>
+                      {translate(option.titleTranslationKey, option.titleDefault)}
+                    </MenuItemTitle>
+                    <MenuItemDescription>
+                      {translate(option.descriptionTranslationKey, option.descriptionDefault)}
+                    </MenuItemDescription>
+                  </MenuItemText>
+                </MenuItemContent>
+              </DropdownMenuItem>
+            );
+          })}
+        </DropdownMenu>
+      </Dropdown>
+    </ConnectMCPButtonWrapper>
+  );
+}
+
+const ConnectMCPButtonWrapper = styled.div`
+  display: inline-block;
+  position: relative;
+`;
+
+const StyledButton = styled(Button)`
+  --button-gap: var(--connect-mcp-button-gap);
+`;
+
+const MenuItemContent = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--connect-mcp-button-menu-item-gap);
+  padding: var(--connect-mcp-button-menu-item-padding-block)
+    var(--connect-mcp-button-menu-item-padding-inline);
+`;
+
+const MenuItemIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--connect-mcp-button-menu-item-icon-size);
+  height: var(--connect-mcp-button-menu-item-icon-size);
+  flex-shrink: 0;
+  border: var(--connect-mcp-button-menu-item-icon-border);
+  border-radius: var(--connect-mcp-button-menu-item-icon-border-radius);
+  color: var(--connect-mcp-button-menu-item-icon-color);
+`;
+
+const MenuItemText = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--connect-mcp-button-menu-item-text-gap);
+  flex: 1;
+`;
+
+const MenuItemTitle = styled.div`
+  font-size: var(--connect-mcp-button-menu-item-title-font-size);
+  font-weight: var(--connect-mcp-button-menu-item-title-font-weight);
+  line-height: var(--connect-mcp-button-menu-item-title-line-height);
+  color: var(--connect-mcp-button-menu-item-title-color);
+`;
+
+const MenuItemDescription = styled.div`
+  font-size: var(--connect-mcp-button-menu-item-description-font-size);
+  font-weight: var(--connect-mcp-button-menu-item-description-font-weight);
+  line-height: var(--connect-mcp-button-menu-item-description-line-height);
+  color: var(--connect-mcp-button-menu-item-description-color);
+`;

package/src/components/Buttons/variables.ts

@@ -21,7 +21,7 @@ export const aiAssistantButton = css`
   /* Positioning */
   --ai-assistant-button-bottom: var(--spacing-xl);
   --ai-assistant-button-right: var(--spacing-xl);
-  --ai-assistant-button-z-index: 1000;
+  --ai-assistant-button-z-index: 50
 
   /* Typography */
   --ai-assistant-button-font-size: var(--font-size-base);
@@ -46,3 +46,44 @@ export const aiAssistantButton = css`
   /* Transition */
   --ai-assistant-button-transition: box-shadow 0.3s ease, transform 0.2s ease;
 `;
+
+export const connectMCPButton = css`
+  /**
+   * @tokens Connect MCP Button
+   * @presenter Color
+   */
+
+  /* Button gap */
+  --connect-mcp-button-gap: var(--spacing-xs);
+
+  /* Menu item layout */
+  --connect-mcp-button-menu-item-gap: var(--spacing-sm);
+  --connect-mcp-button-menu-item-padding-block: var(--spacing-xxs);
+  --connect-mcp-button-menu-item-padding-inline: 0;
+
+  /* Menu item icon */
+  --connect-mcp-button-menu-item-icon-size: 32px;
+  --connect-mcp-button-menu-item-icon-border-color: var(--border-color-secondary);
+  --connect-mcp-button-menu-item-icon-border-style: solid;
+  --connect-mcp-button-menu-item-icon-border-width: 1px;
+  --connect-mcp-button-menu-item-icon-border: var(--connect-mcp-button-menu-item-icon-border-width)
+    var(--connect-mcp-button-menu-item-icon-border-style)
+    var(--connect-mcp-button-menu-item-icon-border-color);
+  --connect-mcp-button-menu-item-icon-border-radius: var(--border-radius);
+  --connect-mcp-button-menu-item-icon-color: var(--icon-color-secondary);
+
+  /* Menu item text */
+  --connect-mcp-button-menu-item-text-gap: var(--spacing-xxs);
+
+  /* Menu item title */
+  --connect-mcp-button-menu-item-title-font-size: var(--font-size-base);
+  --connect-mcp-button-menu-item-title-font-weight: var(--font-weight-regular);
+  --connect-mcp-button-menu-item-title-line-height: var(--line-height-base);
+  --connect-mcp-button-menu-item-title-color: var(--text-color-secondary);
+
+  /* Menu item description */
+  --connect-mcp-button-menu-item-description-font-size: var(--font-size-sm);
+  --connect-mcp-button-menu-item-description-font-weight: var(--font-weight-regular);
+  --connect-mcp-button-menu-item-description-line-height: var(--line-height-sm);
+  --connect-mcp-button-menu-item-description-color: var(--text-color-description);
+`;

package/src/components/Catalog/Catalog.tsx

@@ -20,8 +20,11 @@ import { CatalogViewModeToggle } from '@redocly/theme/components/Catalog/Catalog
 import { CatalogSortButton } from '@redocly/theme/components/Catalog/CatalogSortButton';
 import { CatalogEntities } from '@redocly/theme/components/Catalog/CatalogEntities';
 
+type CatalogFiltersWithCounts = Record<string, { value: string; count: number }[]>;
+
 export type CatalogProps = {
   catalogConfig: CatalogEntityConfig;
+  filters?: CatalogFiltersWithCounts;
   entitiesTypes: string[];
   initialEntitiesList?: BffCatalogEntityList;
   catalogSwitcherItems: CatalogSwitcherItem[];
@@ -29,9 +32,11 @@ export type CatalogProps = {
 };
 
 const customCatalogOptionsCasing = (str: string): string => {
-  if (!str) return str;
+  const trimmedStr = str.trim();
+  if (!trimmedStr) return trimmedStr;
+
+  const words = trimmedStr.split(/[\s-_]+/);
 
-  const words = str.split(/[\s-_]+/);
   return words
     .map((word, index) => {
       if (index === 0 && word.toLowerCase() === 'api') {
@@ -45,6 +50,7 @@ const customCatalogOptionsCasing = (str: string): string => {
 export function Catalog(props: CatalogProps): JSX.Element {
   const {
     catalogConfig,
+    filters: serverFilters,
     entitiesTypes,
     initialEntitiesList,
     catalogSwitcherItems,
@@ -72,7 +78,12 @@ export function Catalog(props: CatalogProps): JSX.Element {
     onChangeCollapseSidebarClick,
     layout,
     collapsedSidebar,
-  } = useCatalog(catalogConfig, initialEntitiesList?.page.total || 0, initialViewMode);
+  } = useCatalog(
+    catalogConfig,
+    serverFilters,
+    initialEntitiesList?.page.total || 0,
+    initialViewMode,
+  );
 
   return (
     <>
@@ -94,7 +105,7 @@ export function Catalog(props: CatalogProps): JSX.Element {
               filters={filters}
               filterTerm={searchQuery}
               hideSearch={true}
-              showCounter={false}
+              showCounter={true}
               filterValuesCasing={customCatalogOptionsCasing}
             />
           }

package/src/components/Catalog/CatalogEntity/CatalogEntityInfoBar.tsx

@@ -41,6 +41,7 @@ const InfoBarWrapper = styled.div<{ hoverEffect: boolean }>`
   transition: all 0.2s ease-in-out;
   height: 100%;
   padding: var(--catalog-card-gap);
+  margin-bottom: var(--spacing-xs);
 
   ${({ hoverEffect }) =>
     hoverEffect &&

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations.tsx

@@ -46,7 +46,7 @@ export function CatalogEntityApiDescriptionRelations({
 }: CatalogEntityApiDescriptionRelationsProps): JSX.Element {
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations">
-      <Tabs key={entity.id} size={TabsSize.MEDIUM}>
+      <Tabs key={entity.id} forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
         <TabItem
           label="Operations"
           icon={<MoleculesIcon />}

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.tsx

@@ -74,7 +74,7 @@ export function CatalogEntityTeamRelations({
 }: CatalogEntityTeamRelationsProps): JSX.Element {
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations">
-      <Tabs size={TabsSize.MEDIUM}>
+      <Tabs forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
         <TabItem label="Members" icon={<PeopleIcon />} onClick={() => setFilter('type:user')}>
           <CatalogEntityRelationsTable
             key="members-table"

package/src/components/Catalog/CatalogEntityIcon.tsx

@@ -11,6 +11,7 @@ import { HierarchyIcon } from '@redocly/theme/icons/HierarchyIcon/HierarchyIcon'
 import { Image } from '@redocly/theme/components/Image/Image';
 import { PREDEFINED_ENTITY_TYPES, useThemeConfig } from '@redocly/theme/core';
 import { NoteIcon } from '@redocly/theme/icons/NoteIcon/NoteIcon';
+import { CubeIcon } from '@redocly/theme/icons/CubeIcon/CubeIcon';
 
 export type CatalogEntityIconProps = {
   entityType: string;
@@ -59,7 +60,7 @@ const getEntityIcon = ({
     );
   }
 
-  return <CodeIcon color="var(--catalog-entity-icon-color)" />; // @TODO: add default icon
+  return <CubeIcon color="var(--catalog-entity-icon-color)" />;
 };
 
 export function CatalogEntityIcon({

package/src/components/Catalog/CatalogFilter/CatalogFilter.tsx

@@ -26,6 +26,11 @@ export function CatalogFilter({
 }: CatalogFilterProps): JSX.Element | null {
   if (!filter.parentUsed) return null;
 
+  const filteredOptions = filter.filteredOptions || filter.options;
+  if (!filteredOptions || filteredOptions.length === 0) {
+    return null;
+  }
+
   const FilterComponent = filterComponents[(filter.type || 'checkboxes') as FilterTypes];
 
   return (

package/src/components/Catalog/variables.ts

@@ -97,7 +97,7 @@ export const catalog = css`
   /**
     * @tokens Catalog entity icon
     */
-  --catalog-entity-icon-color: var(--color-primary-base);
+  --catalog-entity-icon-color: var(--color-persian-green-8);
   --catalog-entity-border-color: var(--border-color-secondary);
   --catalog-entity-bg-color: var(--bg-color-tonal);