@redocly/theme 0.59.0-rc.3 → 0.60.0-custom.2

package/lib/markdoc/components/Tabs/Tabs.js

@@ -32,14 +32,12 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabContent = exports.TabsSize = void 0;
 exports.Tabs = Tabs;
 const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const react_router_dom_1 = require("react-router-dom");
+const styled_components_1 = __importStar(require("styled-components"));
 const hooks_1 = require("../../../core/hooks");
 const TabList_1 = require("../../../markdoc/components/Tabs/TabList");
 const utils_1 = require("../../../core/utils");
@@ -48,22 +46,62 @@ var TabsSize;
     TabsSize["SMALL"] = "small";
     TabsSize["MEDIUM"] = "medium";
 })(TabsSize || (exports.TabsSize = TabsSize = {}));
-function Tabs({ id, children, className, size, initialTab: propInitialTab, }) {
+function Tabs({ id, children, className, size, initialTab: propInitialTab, forceReady = false, }) {
     var _a, _b;
-    const [childrenArray, setChildrenArray] = (0, react_1.useState)(react_1.default.Children.toArray(children));
+    const childrenArray = react_1.default.Children.toArray(children);
+    const [isReady, setIsReady] = (0, react_1.useState)(false);
+    const containerRef = (0, react_1.useRef)(null);
     const initialTab = (_b = propInitialTab !== null && propInitialTab !== void 0 ? propInitialTab : (_a = childrenArray[0]) === null || _a === void 0 ? void 0 : _a.props.label) !== null && _b !== void 0 ? _b : '';
-    const { activeTab, setActiveTab } = (0, hooks_1.useActiveTab)({ tabsId: id, initialTab });
-    (0, react_1.useEffect)(() => {
-        setChildrenArray(react_1.default.Children.toArray(children));
-    }, [children]);
-    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdoc/Tabs/Tabs", className: className, key: id },
-        react_1.default.createElement(TabList_1.TabList, { size: size, childrenArray: childrenArray, activeTab: activeTab, onTabChange: setActiveTab }),
+    const labelsHash = childrenArray.map((c) => c.props.label).join('|');
+    const handleReadyChange = (0, react_1.useCallback)((ready) => {
+        setIsReady(ready);
+    }, []);
+    // Reset isReady when children change (new page/tabs)
+    // Use useLayoutEffect to run synchronously before paint
+    (0, react_1.useLayoutEffect)(() => {
+        setIsReady(false);
+    }, [labelsHash]);
+    const inRouter = (0, react_router_dom_1.useInRouterContext)();
+    return (react_1.default.createElement(TabsView, { id: id, className: className, size: size, childrenArray: childrenArray, initialTab: initialTab, useActiveTab: inRouter ? useActiveTabWithRouter : useActiveTabWithoutRouter, isReady: isReady || forceReady, labelsHash: labelsHash, containerRef: containerRef, onReadyChange: handleReadyChange }));
+}
+function TabsView({ id, className, size, childrenArray, useActiveTab, initialTab, isReady, labelsHash, containerRef, onReadyChange, }) {
+    const { activeTab, setActiveTab } = useActiveTab(initialTab, id, childrenArray);
+    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdoc/Tabs/Tabs", className: className, key: id, "$isReady": isReady },
+        react_1.default.createElement(TabList_1.TabList, { key: labelsHash, size: size, childrenArray: childrenArray, activeTab: activeTab, onTabChange: setActiveTab, containerRef: containerRef, onReadyChange: onReadyChange }),
         childrenArray.map((child, index) => {
             const { label } = child.props;
             const tabId = (0, utils_1.getTabId)(label, index);
             return label === activeTab ? (react_1.default.createElement(exports.TabContent, { key: `content-${tabId}`, id: `panel-${tabId}`, "aria-labelledby": `tab-${tabId}`, tabIndex: 0, role: "tabpanel" }, child.props.children)) : null;
         })));
 }
+/**
+ * Validates that the active tab exists in children and resets to initial tab if not found.
+ * Ensures tab state remains consistent when tab structure changes.
+ */
+function useValidateActiveTab(activeTab, setActiveTab, childrenArray, initialTab) {
+    (0, react_1.useEffect)(() => {
+        const availableLabels = childrenArray.map((child) => child.props.label);
+        if (activeTab && !availableLabels.includes(activeTab) && availableLabels.length > 0) {
+            setActiveTab(initialTab);
+        }
+    }, [childrenArray, activeTab, initialTab, setActiveTab]);
+}
+const useActiveTabWithRouter = (initialTab, tabsId, childrenArray) => {
+    const { activeTab, setActiveTab } = (0, hooks_1.useActiveTab)({ initialTab, tabsId });
+    useValidateActiveTab(activeTab, setActiveTab, childrenArray, initialTab);
+    return {
+        activeTab,
+        setActiveTab,
+    };
+};
+const useActiveTabWithoutRouter = (initialTab, _tabsId, childrenArray) => {
+    const [activeTab, setActiveTab] = (0, react_1.useState)(initialTab);
+    useValidateActiveTab(activeTab, setActiveTab, childrenArray, initialTab);
+    return {
+        activeTab,
+        setActiveTab,
+    };
+};
 const TabsContainer = styled_components_1.default.div `
   position: relative;
   color: var(--md-tabs-container-text-color);
@@ -80,6 +118,13 @@ const TabsContainer = styled_components_1.default.div `
     margin: 0;
     padding: 0;
   }
+
+  ${({ $isReady }) => !$isReady &&
+    (0, styled_components_1.css) `
+      opacity: 0;
+      pointer-events: none;
+      overflow: hidden;
+    `}
 `;
 exports.TabContent = styled_components_1.default.div `
   color: var(--md-tabs-content-text-color);

package/lib/markdoc/components/default.d.ts

@@ -20,3 +20,4 @@ export * from '../../markdoc/components/CodeWalkthrough/CodeToggle';
 export * from '../../markdoc/components/CodeWalkthrough/CodeContainer';
 export * from '../../markdoc/components/CodeGroup/CodeGroup';
 export * from '../../markdoc/components/Icon/Icon';
+export * from '../../markdoc/components/ConnectMCP/ConnectMCP';

package/lib/markdoc/components/default.js

@@ -36,4 +36,5 @@ __exportStar(require("../../markdoc/components/CodeWalkthrough/CodeToggle"), exp
 __exportStar(require("../../markdoc/components/CodeWalkthrough/CodeContainer"), exports);
 __exportStar(require("../../markdoc/components/CodeGroup/CodeGroup"), exports);
 __exportStar(require("../../markdoc/components/Icon/Icon"), exports);
+__exportStar(require("../../markdoc/components/ConnectMCP/ConnectMCP"), exports);
 //# sourceMappingURL=default.js.map

package/lib/markdoc/default.d.ts

@@ -22,6 +22,7 @@ import { input } from '../markdoc/tags/input';
 import { toggle } from '../markdoc/tags/code-toggle';
 import { codeGroup } from '../markdoc/tags/code-group';
 import { icon } from '../markdoc/tags/icon';
+import { connectMcp } from '../markdoc/tags/connect-mcp';
 export declare const tags: {
     [admonition.tagName]: import("@markdoc/markdoc").Schema & {
         attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
@@ -113,4 +114,9 @@ export declare const tags: {
             resolver?: string;
         }>;
     };
+    [connectMcp.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
 };

package/lib/markdoc/default.js

@@ -64,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,
@@ -83,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/code-walkthrough.js

@@ -63,6 +63,7 @@ exports.codeWalkthrough = {
         },
         validate(node) {
             const errors = [];
+            /* eslint-disable-next-line no-warning-comments */
             // code-walk-todo: validate when/unless for steps, toggles, inputs, and chunks
             const toggleIds = Object.keys(collectTogglesFromChildren(node.children));
             if ((0, utils_1.isObject)(node.attributes.filters)) {

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/lib/markdoc/tags/html.js

@@ -14,6 +14,7 @@ exports.html = {
             name: { type: String, required: true },
             attrs: { type: Object },
         },
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         transform(node, config) {
             const { name, attrs } = node.attributes;
             const children = node.transformChildren(config);

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@redocly/theme",
-  "version": "0.59.0-rc.3",
+  "version": "0.60.0-custom.2",
   "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",
@@ -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.36.0-rc.1",
-    "@redocly/realm-asyncapi-sdk": "0.5.0-next.0"
+    "@redocly/config": "0.38.0-custom.0",
+    "@redocly/realm-asyncapi-sdk": "0.6.0-next.0"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/AsyncApiDocs/hooks/AfterAsyncApiChannelDescription.tsx

@@ -6,4 +6,5 @@
 //   return null;
 // }
 
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const AfterAsyncApiChannelDescription: any = null;

package/src/components/Button/Button.tsx

@@ -32,6 +32,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   iconPosition?: 'left' | 'right';
   title?: string;
   tabIndex?: number;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   onClick?: (e?: any) => void;
   ref?: React.Ref<HTMLButtonElement>;
 }

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';
+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

@@ -1,5 +1,6 @@
 import { css } from 'styled-components';
 
+/* eslint-disable theme/no-raw-colors-in-styles */
 export const aiAssistantButton = css`
   /**
    * @tokens AI Assistant Button
@@ -21,7 +22,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 +47,45 @@ export const aiAssistantButton = css`
   /* Transition */
   --ai-assistant-button-transition: box-shadow 0.3s ease, transform 0.2s ease;
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */
+
+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/CatalogCardView/CatalogCard.tsx

@@ -18,7 +18,8 @@ export type CatalogCardProps = {
 };
 
 export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.Element {
-  const { useTelemetry } = useThemeHooks();
+  const { useTelemetry, useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
   const telemetry = useTelemetry();
   const pathPrefix = getPathPrefix();
 
@@ -49,7 +50,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
 
         <CardMetadataSection>
           <MetadataRow>
-            <MetadataLabel>Domains:</MetadataLabel>
+            <MetadataLabel>{translate('catalog.metadata.domains', 'Domains:')}</MetadataLabel>
             <CatalogTagsWithTooltip
               items={entity.domains?.map((domain) => domain.title) || []}
               tagProps={{
@@ -64,7 +65,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
           </MetadataRow>
 
           <MetadataRow>
-            <MetadataLabel>Owners:</MetadataLabel>
+            <MetadataLabel>{translate('catalog.metadata.owners', 'Owners:')}</MetadataLabel>
             <CatalogTagsWithTooltip
               items={entity.owners?.map((owner) => owner.key) || []}
               tagProps={{

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

@@ -22,7 +22,9 @@ import { CatalogEntityMethodAndPath } from '@redocly/theme/components/Catalog/Ca
 import { CatalogEntityRelationsGraph } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy';
 
 export type CatalogEntityProps = {
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   RedocSchema: React.ComponentType<any>;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   StoreProvider: React.ComponentType<any>;
   GraphqlTypeRenderer?: React.ComponentType<{ sdl: string; typeName: string }>;
 };
@@ -49,7 +51,9 @@ const renderFirstColumnEntitySection = (entity: BffCatalogEntity): React.ReactEl
 const renderDataSchemaSection = (
   entity: BffCatalogEntity,
   relatedEntity: BffCatalogRelatedEntity | null,
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   RedocSchema: React.ComponentType<any>,
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   StoreProvider: React.ComponentType<any>,
   GraphqlTypeRenderer?: React.ComponentType<{ sdl: string; typeName: string }>,
 ): React.ReactElement | null => {

package/src/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { useColorSwitcher, useThemeHooks } from '@redocly/theme/core/hooks';
-import { useGraph } from '@redocly/theme/core/hooks/catalog/useGraph';
+import { useGraph } from '@redocly/theme/core/hooks';
 import { CatalogEntityRelationsNode } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNode';
 import { CatalogEntityRelationsEdge } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsEdge';
 import { xyflow } from '@redocly/theme/core/styles';

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/CatalogEntityLinks.tsx

@@ -6,12 +6,16 @@ import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
 import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
 import { CatalogEntityInfoBar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityInfoBar';
 import { Link } from '@redocly/theme/components/Link/Link';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type CatalogEntityLinksProps = {
   entity: BffCatalogEntity;
 };
 
 export function CatalogEntityLinks({ entity }: CatalogEntityLinksProps) {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   const links = Object.entries(entity.links || []);
 
   if (!links.length) {
@@ -20,7 +24,7 @@ export function CatalogEntityLinks({ entity }: CatalogEntityLinksProps) {
 
   return (
     <LinksWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityLinks">
-      <Heading>Links</Heading>
+      <Heading>{translate('catalog.links.label', 'Links')}</Heading>
       {links.map(([key, value]) => (
         <Link key={key} color="var(--catalog-metadata-link-color)" to={value.url} target="_blank">
           <CatalogEntityInfoBar

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

@@ -14,6 +14,7 @@ export type CatalogEntityMetadataProps = {
   entity: BffCatalogEntity;
 };
 
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 function renderMetadataValue(value: any): React.JSX.Element {
   if (isPlainObject(value)) {
     return <JsonViewerWrapper data={value} expandLevel={3} controls={false} />;