@redocly/theme 0.58.0-next.9 → 0.59.0-next.0

package/lib/components/Tag/variables.js

@@ -11,12 +11,13 @@ exports.tag = (0, styled_components_1.css) `
   --tag-border-style: solid; //@presenter Border
   --tag-border-radius: var(--border-radius); // @presenter BorderRadius
   --tag-box-shadow: none; // @presenter Shadow
+  --tag-border-radius-focused: var(--border-radius); // @presenter BorderRadius
 
   --tag-status-dot-color-default: var(--color-persian-green-7);
   --tag-badge-size: var(--spacing-xs);
-  --tag-badge-border-width: 1.5px;
-  --tag-badge-border-color: #ffffff;
-
+  --tag-badge-border-width: 2px;
+  --tag-badge-border-color: var(--border-color-secondary); // @presenter Color
+  --tag-border-color-focused: var(--color-blue-4); // @presenter Color
 
   /**
     * @tokens Tag spacing
@@ -34,7 +35,7 @@ exports.tag = (0, styled_components_1.css) `
   --tag-large-content-padding: var(--tag-large-padding-vertical); //@presenter Spacing
   
   --tag-margin: 0 5px 0 0; //@presenter Spacing
-  --tag-gap: 5px; //@presenter Spacing
+  --tag-gap: 4px; //@presenter Spacing
 
   /**
     * @tokens Tag size
@@ -60,8 +61,8 @@ exports.tag = (0, styled_components_1.css) `
     * @tokens Tag icon
     */
 
-  --tag-icon-width: 1em; // @presenter Spacing
-  --tag-icon-height: 1em; // @presenter Spacing
+  --tag-icon-width: 14px; // @presenter Spacing
+  --tag-icon-height: 14px; // @presenter Spacing
 
   /**
     * @tokens Tag colors
@@ -74,85 +75,127 @@ exports.tag = (0, styled_components_1.css) `
   .tag-draft,
   .tag-schema,
   .tag-default {
-    --tag-color: var(--text-color-primary); // @presenter Color
+    --tag-color: var(--text-color-secondary); // @presenter Color
     --tag-bg-color: var(--color-warm-grey-2); // @presenter Color
     --tag-border-color: var(--border-color-primary); // @presenter Color
+    --tag-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
     --tag-close-button-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
+    --tag-border-color-hover: var(--color-warm-grey-5); // @presenter Color
+  }
+
+  .tag-green {
+    --tag-color: var(--color-green-8); // @presenter Color
+    --tag-bg-color: var(--color-green-1); // @presenter Color
+    --tag-border-color: var(--color-green-5); // @presenter Color
+    --tag-bg-color-hover: var(--color-green-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-green-2); // @presenter Color
+    --tag-border-color-hover: var(--color-green-6); // @presenter Color
   }
 
-  .tag-green,
   .tag-success,
   .tag-approved {
     --tag-color: var(--color-success-active); // @presenter Color
     --tag-bg-color: var(--color-success-bg); // @presenter Color
-    --tag-border-color: var(--color-success-active); // @presenter Color
+    --tag-border-color: var(--color-success-border); // @presenter Color
     --tag-close-button-bg-color-hover: var(--color-success-bg-hover); // @presenter Color
+    --tag-bg-color-hover: var(--color-success-bg-hover); // @presenter Color
+    --tag-border-color-hover: var(--color-success-border-hover); // @presenter Color
+  }
+
+  .tag-red {
+    --tag-color: var(--color-red-7); // @presenter Color
+    --tag-bg-color: var(--color-red-1); // @presenter Color
+    --tag-border-color: var(--color-red-3); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-red-2); // @presenter Color
+    --tag-bg-color-hover: var(--color-red-2); // @presenter Color
+    --tag-border-color-hover: var(--color-red-5); // @presenter Color
   }
 
-  .tag-red,
   .tag-error,
   .tag-declined {
     --tag-color: var(--color-error-active); // @presenter Color
     --tag-bg-color: var(--color-error-bg); // @presenter Color
-    --tag-border-color: var(--color-error-active); // @presenter Color
+    --tag-border-color: var(--color-error-border); // @presenter Color
     --tag-close-button-bg-color-hover: var(--color-error-hover); // @presenter Color
+    --tag-bg-color-hover: var(--color-error-bg-hover); // @presenter Color
+    --tag-border-color-hover: var(--color-error-border-hover); // @presenter Color
   }
 
-  .tag-gold,
   .tag-warning,
   .tag-deprecated {
     --tag-color: var(--color-warning-active); // @presenter Color
     --tag-bg-color: var(--color-warning-bg); // @presenter Color
-    --tag-border-color: var(--color-warning-active); // @presenter Color
+    --tag-border-color: var(--color-warning-border); // @presenter Color
     --tag-close-button-bg-color-hover: var(--color-warning-hover); // @presenter Color
+    --tag-bg-color-hover: var(--color-warning-bg-hover); // @presenter Color
+    --tag-border-color-hover: var(--color-warning-border-hover); // @presenter Color
   }
 
-  .tag-blue,
-  .tag-processing {
+  .tag-blue {
+    --tag-color: var(--color-blue-7); // @presenter Color
+    --tag-bg-color: var(--color-blue-1); // @presenter Color
+    --tag-border-color: var(--color-blue-4); // @presenter Color
+    --tag-bg-color-hover: var(--color-blue-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-blue-2); // @presenter Color
+    --tag-border-color-hover: var(--color-blue-6); // @presenter Color
+  }
+
+  .tag-processing,
+  .tag-info {
     --tag-color: var(--color-info-active); // @presenter Color
     --tag-bg-color: var(--color-info-bg); // @presenter Color
-    --tag-border-color: var(--color-info-active); // @presenter Color
+    --tag-border-color: var(--color-info-border); // @presenter Color
     --tag-close-button-bg-color-hover: var(--color-info-hover); // @presenter Color
+    --tag-bg-color-hover: var(--color-info-bg-hover); // @presenter Color
+    --tag-border-color-hover: var(--color-info-border-hover); // @presenter Color
+  }
+
+  .tag-link {
+    --tag-color: var(--color-info-active); // @presenter Color
+    --tag-bg-color: var(--color-info-bg); // @presenter Color
+    --tag-border-color: var(--color-info-border); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-info-hover); // @presenter Color
+    --tag-bg-color-hover: var(--color-info-bg-hover); // @presenter Color
+    --tag-border-color-hover: var(--color-info-border-hover); // @presenter Color
   }
 
   .tag-purple,
   .tag-head {
     --tag-color: var(--color-purple-7); // @presenter Color
     --tag-bg-color: var(--color-purple-1); // @presenter Color
-    --tag-border-color: var(--color-purple-7); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-purple-3); // @presenter Color
+    --tag-border-color: var(--color-purple-4); // @presenter Color
+    --tag-bg-color-hover: var(--color-purple-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-purple-2); // @presenter Color
+    --tag-border-color-hover: var(--color-purple-6); // @presenter Color
   }
 
-  .tag-cyan,
-  .tag-option,
-  .tag-geekblue,
-  .tag-link {
-    --tag-color: var(--color-turquoise-7); // @presenter Color
+  .tag-turquoise,
+  .tag-option {
+    --tag-color: var(--color-turquoise-8); // @presenter Color
     --tag-bg-color: var(--color-turquoise-1); // @presenter Color
-    --tag-border-color: var(--color-turquoise-7); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-turquoise-3); // @presenter Color
+    --tag-border-color: var(--color-turquoise-5); // @presenter Color
+    --tag-bg-color-hover: var(--color-turquoise-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-turquoise-2); // @presenter Color
+    --tag-border-color-hover: var(--color-turquoise-7); // @presenter Color
   }
 
-  .tag-yellow {
-    --tag-color: var(--color-carrot-7); // @presenter Color
+  .tag-carrot {
+    --tag-color: var(--color-carrot-8); // @presenter Color
     --tag-bg-color: var(--color-carrot-1); // @presenter Color
-    --tag-border-color: var(--color-carrot-7); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-carrot-3); // @presenter Color
+    --tag-border-color: var(--color-carrot-6); // @presenter Color
+    --tag-bg-color-hover: var(--color-carrot-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-carrot-2); // @presenter Color
+    --tag-border-color-hover: var(--color-carrot-7); // @presenter Color
   }
 
   .tag-magenta,
   .tag-hook {
     --tag-color: var(--color-magenta-7); // @presenter Color
     --tag-bg-color: var(--color-magenta-1); // @presenter Color
-    --tag-border-color: var(--color-magenta-7); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-magenta-3); // @presenter Color
-  }
-
-  .tag-lime {
-    --tag-color: var(--color-green-7); // @presenter Color
-    --tag-bg-color: none; // @presenter Color
-    --tag-border-color: var(--color-green-7); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-green-3); // @presenter Color
+    --tag-border-color: var(--color-magenta-3); // @presenter Color
+    --tag-bg-color-hover: var(--color-magenta-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-magenta-2); // @presenter Color
+    --tag-border-color-hover: var(--color-magenta-5); // @presenter Color
   }
 
   .tag-product {
@@ -164,37 +207,56 @@ exports.tag = (0, styled_components_1.css) `
 
   .tag-grass {
     --tag-color: var(--color-grass-8); // @presenter Color
-    --tag-bg-color: transparent; // @presenter Color
+    --tag-bg-color: var(--color-grass-1); // @presenter Color
     --tag-border-color: var(--color-grass-4); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-grass-1); // @presenter Color
-  }
-  
-  .tag-purple {
-    --tag-color: var(--color-purple-7); // @presenter Color
-    --tag-bg-color: transparent; // @presenter Color
-    --tag-border-color: var(--color-purple-4); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-purple-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-grass-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-grass-2); // @presenter Color
+    --tag-border-color-hover: var(--color-grass-6); // @presenter Color
   }
 
   .tag-sky {
-    --tag-color: var(--color-sky-9); // @presenter Color
-    --tag-bg-color: transparent; // @presenter Color
+    --tag-color: var(--color-sky-8); // @presenter Color
+    --tag-bg-color: var(--color-sky-1); // @presenter Color
     --tag-border-color: var(--color-sky-5); // @presenter Color
+    --tag-bg-color-hover: var(--color-sky-2); // @presenter Color
     --tag-close-button-bg-color-hover: var(--color-sky-2); // @presenter Color
+    --tag-border-color-hover: var(--color-sky-7); // @presenter Color
   }
 
   .tag-raspberry {
     --tag-color: var(--color-raspberry-7); // @presenter Color
-    --tag-bg-color: transparent; // @presenter Color
+    --tag-bg-color: var(--color-raspberry-1); // @presenter Color
     --tag-border-color: var(--color-raspberry-3); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-raspberry-1); // @presenter Color
-  }
-
-  .tag-carrot {
-    --tag-color: var(--color-carrot-8); // @presenter Color
-    --tag-bg-color: transparent; // @presenter Color
-    --tag-border-color: var(--color-carrot-6); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-carrot-3); // @presenter Color
+    --tag-bg-color-hover: var(--color-raspberry-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-raspberry-2); // @presenter Color
+    --tag-border-color-hover: var(--color-raspberry-5); // @presenter Color
+  }
+
+  .tag-orange {
+    --tag-color: var(--color-orange-7); // @presenter Color
+    --tag-bg-color: var(--color-orange-1); // @presenter Color
+    --tag-border-color: var(--color-orange-4); // @presenter Color
+    --tag-bg-color-hover: var(--color-orange-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-orange-2); // @presenter Color
+    --tag-border-color-hover: var(--color-orange-5); // @presenter Color
+  }
+
+  .tag-persian-green {
+    --tag-color: var(--color-persian-green-8); // @presenter Color
+    --tag-bg-color: var(--color-persian-green-1); // @presenter Color
+    --tag-border-color: var(--color-persian-green-5); // @presenter Color
+    --tag-bg-color-hover: var(--color-persian-green-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-persian-green-2); // @presenter Color
+    --tag-border-color-hover: var(--color-persian-green-6); // @presenter Color
+  }
+
+  .tag-blueberry {
+    --tag-color: var(--color-blueberry-7); // @presenter Color
+    --tag-bg-color: var(--color-blueberry-1); // @presenter Color
+    --tag-border-color: var(--color-blueberry-4); // @presenter Color
+    --tag-bg-color-hover: var(--color-blueberry-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-blueberry-2); // @presenter Color
+    --tag-border-color-hover: var(--color-blueberry-6); // @presenter Color
   }
 
   /**

package/lib/core/constants/catalog.js

@@ -37,6 +37,8 @@ exports.reverseRelationMap = {
     memberOf: 'hasMember',
     triggers: 'triggeredBy',
     triggeredBy: 'triggers',
+    returns: 'returnedBy',
+    returnedBy: 'returns',
 };
 exports.relationTypeMap = {
     partOf: 'Part of',
@@ -64,6 +66,8 @@ exports.relationTypeMap = {
     memberOf: 'Member of',
     triggers: 'Triggers',
     triggeredBy: 'Triggered by',
+    returns: 'Returns',
+    returnedBy: 'Returned by',
 };
 var GraphHandleType;
 (function (GraphHandleType) {

package/lib/core/contexts/CodeSnippetContext.d.ts

@@ -1,7 +1,15 @@
-export type CodeSnippetContextType = {
-    activeSnippetName: string;
-    setActiveSnippetName: (name: string) => void;
-};
+import React from 'react';
 export declare const CODE_GROUP_SNIPPET_NAME_KEY = "redocly:codeGroupSnippetName";
-export declare const CodeSnippetContext: import("react").Context<CodeSnippetContextType | null>;
-export declare function useActiveCodeSnippetName(mode: 'tabs' | 'dropdown'): [string, (name: string) => void];
+type CodeSnippetContextType = {
+    activeSnippets: Record<string, string>;
+    setActiveSnippet: (groupId: string, snippetId: string) => void;
+};
+export declare const CodeSnippetContext: React.Context<CodeSnippetContextType | null>;
+export declare function CodeSnippetProvider({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare const useCodeSnippetContext: () => CodeSnippetContextType;
+export declare const useActiveCodeSnippetId: (groupId?: string, availableSnippets?: {
+    id: string;
+}[]) => [string, (id: string) => void];
+export {};

package/lib/core/contexts/CodeSnippetContext.js

@@ -1,23 +1,66 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CodeSnippetContext = exports.CODE_GROUP_SNIPPET_NAME_KEY = void 0;
-exports.useActiveCodeSnippetName = useActiveCodeSnippetName;
-const react_1 = require("react");
+exports.useActiveCodeSnippetId = exports.useCodeSnippetContext = exports.CodeSnippetContext = exports.CODE_GROUP_SNIPPET_NAME_KEY = void 0;
+exports.CodeSnippetProvider = CodeSnippetProvider;
+const react_1 = __importStar(require("react"));
+const use_local_state_1 = require("../hooks/use-local-state");
 exports.CODE_GROUP_SNIPPET_NAME_KEY = 'redocly:codeGroupSnippetName';
 exports.CodeSnippetContext = (0, react_1.createContext)(null);
-function useActiveCodeSnippetName(mode) {
+function CodeSnippetProvider({ children }) {
+    const [activeSnippets, setActiveSnippets] = (0, use_local_state_1.useLocalState)(exports.CODE_GROUP_SNIPPET_NAME_KEY, {});
+    const setActiveSnippet = (0, react_1.useCallback)((groupId, snippetId) => {
+        setActiveSnippets(Object.assign(Object.assign({}, activeSnippets), { [groupId]: snippetId }));
+    }, [activeSnippets, setActiveSnippets]);
+    const contextValue = { activeSnippets, setActiveSnippet };
+    return react_1.default.createElement(exports.CodeSnippetContext.Provider, { value: contextValue }, children);
+}
+const useCodeSnippetContext = () => {
     const context = (0, react_1.useContext)(exports.CodeSnippetContext);
     if (!context) {
         throw new Error('useCodeSnippetContext must be used within a CodeSnippetContext');
     }
-    const [activeSnippetName, setActiveSnippetName] = (0, react_1.useState)(mode === 'tabs' ? '' : context.activeSnippetName);
-    if (mode === 'tabs') {
-        // use non-synced state for tabs mode
-        return [activeSnippetName, setActiveSnippetName];
-    }
-    else {
-        // use global synced state for dropdown mode
-        return [context.activeSnippetName, context.setActiveSnippetName];
-    }
-}
+    return context;
+};
+exports.useCodeSnippetContext = useCodeSnippetContext;
+const useActiveCodeSnippetId = (groupId, availableSnippets) => {
+    const { activeSnippets, setActiveSnippet } = (0, exports.useCodeSnippetContext)();
+    const storedSnippetId = groupId ? activeSnippets[groupId] || '' : '';
+    const activeId = (0, react_1.useMemo)(() => {
+        var _a;
+        if (!(availableSnippets === null || availableSnippets === void 0 ? void 0 : availableSnippets.length))
+            return storedSnippetId;
+        const found = storedSnippetId && availableSnippets.find((s) => s.id === storedSnippetId);
+        return found ? storedSnippetId : ((_a = availableSnippets[0]) === null || _a === void 0 ? void 0 : _a.id) || '';
+    }, [storedSnippetId, availableSnippets]);
+    const setActiveSnippetId = (0, react_1.useCallback)((id) => {
+        if (groupId) {
+            setActiveSnippet(groupId, id);
+        }
+    }, [groupId, setActiveSnippet]);
+    return [activeId, setActiveSnippetId];
+};
+exports.useActiveCodeSnippetId = useActiveCodeSnippetId;
 //# sourceMappingURL=CodeSnippetContext.js.map

package/lib/core/hooks/use-codeblock-tabs-controls.d.ts

@@ -1,6 +1,6 @@
-import type { CodeBlockTabItems } from '../../components/CodeBlock/CodeBlock';
+import type { CodeBlockItems } from '../../components/CodeBlock/CodeBlock';
 type CodeBlockTabsProps = {
-    tabs: CodeBlockTabItems;
+    tabs: CodeBlockItems;
     containerRef: React.RefObject<HTMLDivElement | null>;
     tabRefs: React.RefObject<HTMLButtonElement[]>;
 };

package/lib/core/hooks/use-local-state.js

@@ -2,31 +2,35 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLocalState = useLocalState;
 const react_1 = require("react");
-function getInitialValue(key, initialValue) {
-    if (typeof window === 'undefined') {
-        return initialValue;
-    }
+const js_utils_1 = require("../utils/js-utils");
+function getStoredValue(key, fallback) {
+    if (!(0, js_utils_1.isBrowser)())
+        return fallback;
     try {
         const savedValue = localStorage.getItem(key);
-        if (savedValue) {
-            return JSON.parse(savedValue);
-        }
+        return savedValue ? JSON.parse(savedValue) : fallback;
     }
-    catch (error) {
-        console.error(`Error reading from localStorage for key "${key}":`, error);
+    catch (_a) {
+        return fallback;
     }
-    return initialValue;
 }
 function useLocalState(key, initialValue) {
-    const [value, setValue] = (0, react_1.useState)(() => getInitialValue(key, initialValue));
+    const [value, setValue] = (0, react_1.useState)(initialValue);
+    // Load stored value from localStorage after component mounts
+    // This ensures SSR compatibility: server and client both start with initialValue,
+    // then client loads the actual stored value without hydration mismatch
     (0, react_1.useEffect)(() => {
-        try {
-            localStorage.setItem(key, JSON.stringify(value));
-        }
-        catch (error) {
-            console.error(`Error writing to localStorage for key "${key}":`, error);
+        if (!(0, js_utils_1.isBrowser)())
+            return;
+        setValue(getStoredValue(key, initialValue));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [key]);
+    const handleSetValue = (0, react_1.useCallback)((newValue) => {
+        setValue(newValue);
+        if ((0, js_utils_1.isBrowser)()) {
+            localStorage.setItem(key, JSON.stringify(newValue));
         }
-    }, [key, value]);
-    return [value, setValue];
+    }, [key]);
+    return [value, handleSetValue];
 }
 //# sourceMappingURL=use-local-state.js.map

package/lib/core/hooks/use-page-actions.d.ts

@@ -1,2 +1,3 @@
 import type { PageAction } from '../types';
-export declare function usePageActions(pageSlug: string): PageAction[];
+export type PageActionType = 'copy' | 'view' | 'chatgpt' | 'claude' | 'mcp-cursor';
+export declare function usePageActions(pageSlug: string, mcpUrl?: string, actions?: PageActionType[]): PageAction[];

package/lib/core/hooks/use-page-actions.js

@@ -19,9 +19,11 @@ const use_theme_hooks_1 = require("./use-theme-hooks");
 const use_theme_config_1 = require("./use-theme-config");
 const clipboard_service_1 = require("../utils/clipboard-service");
 const dom_1 = require("../utils/dom");
+const CursorIcon_1 = require("../../icons/CursorIcon/CursorIcon");
 const DEFAULT_ENABLED_ACTIONS = ['copy', 'view', 'chatgpt', 'claude'];
-function usePageActions(pageSlug) {
-    var _a;
+const CURSOR_URL = 'cursor://anysphere.cursor-deeplink/mcp/install?name=$NAME&config=$BASE64_ENCODED_CONFIG';
+function usePageActions(pageSlug, mcpUrl, actions) {
+    var _a, _b, _c;
     const { useTranslate, usePageData, usePageProps, usePageSharedData } = (0, use_theme_hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const themeConfig = (0, use_theme_config_1.useThemeConfig)();
@@ -29,7 +31,7 @@ function usePageActions(pageSlug) {
     const openApiSharedData = usePageSharedData('openAPIDocsStore');
     const shouldHideAllActions = shouldHidePageActions(pageProps, themeConfig, (_a = openApiSharedData === null || openApiSharedData === void 0 ? void 0 : openApiSharedData.options) === null || _a === void 0 ? void 0 : _a.excludeFromSearch);
     const { isPublic } = usePageData() || {};
-    const actions = (0, react_1.useMemo)(() => {
+    const result = (0, react_1.useMemo)(() => {
         var _a, _b;
         if (shouldHideAllActions) {
             return [];
@@ -43,9 +45,41 @@ function usePageActions(pageSlug) {
             url.searchParams.set('q', externalAiPrompt);
             return url.toString();
         }
-        return (((_b = (_a = themeConfig.navigation) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 : _b.items) || DEFAULT_ENABLED_ACTIONS)
+        return (((_b = (_a = themeConfig.navigation) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 : _b.items) || actions || DEFAULT_ENABLED_ACTIONS)
             .map((action) => {
+            function generateMCPConfig(isCursor) {
+                const jsonConfig = {
+                    'mcp-server': {
+                        url: mcpUrl,
+                        description: 'MCP Server',
+                    },
+                };
+                if (isCursor) {
+                    const url = CURSOR_URL.replace('$NAME', 'mcp-server').replace('$BASE64_ENCODED_CONFIG', btoa(JSON.stringify(jsonConfig['mcp-server'])));
+                    return url;
+                }
+                return JSON.stringify(jsonConfig, null, 2);
+            }
             switch (action) {
+                case 'mcp-cursor':
+                    if (!mcpUrl) {
+                        return null;
+                    }
+                    return {
+                        buttonText: translate('page.actions.cursorMcpButtonText', 'Connect to Cursor'),
+                        title: translate('page.actions.cursorMcpTitle', 'Connect to Cursor'),
+                        description: translate('page.actions.cursorMcpDescription', 'Install MCP server on Cursor'),
+                        iconComponent: CursorIcon_1.CursorIcon,
+                        onClick: () => {
+                            try {
+                                const url = generateMCPConfig(true);
+                                window.open(url, '_blank');
+                            }
+                            catch (error) {
+                                console.error(error);
+                            }
+                        },
+                    };
                 case 'copy':
                     return {
                         buttonText: translate('page.actions.copyButtonText', 'Copy'),
@@ -99,8 +133,16 @@ function usePageActions(pageSlug) {
             }
         })
             .filter((action) => action !== null);
-    }, [themeConfig, translate, pageSlug, isPublic, shouldHideAllActions]);
-    return actions;
+    }, [
+        shouldHideAllActions,
+        pageSlug,
+        (_c = (_b = themeConfig.navigation) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.items,
+        actions,
+        mcpUrl,
+        translate,
+        isPublic,
+    ]);
+    return result;
 }
 function shouldHidePageActions(pageProps, themeConfig, openapiExcludeFromSearch) {
     var _a, _b, _c, _d, _e, _f;

package/lib/core/hooks/use-tabs.d.ts

@@ -1,18 +1,23 @@
 type UseTabsProps = {
-    initialTab: string;
+    activeTab: string;
+    onTabChange: (tab: string) => void;
     totalTabs: number;
     containerRef?: React.RefObject<HTMLElement | null>;
 };
-export declare function useTabs({ initialTab, totalTabs, containerRef }: UseTabsProps): {
-    activeTab: string;
-    setActiveTab: import("react").Dispatch<import("react").SetStateAction<string>>;
+export declare function useTabs({ activeTab, onTabChange, totalTabs, containerRef }: UseTabsProps): {
     setTabRef: (element: HTMLButtonElement | null, index: number) => void;
     onTabClick: (labelOrIndex: string | number) => void;
     handleKeyboard: (event: React.KeyboardEvent, index: number) => void;
-    getTabId: (label: string, index: number) => string;
     visibleTabs: number[];
     overflowTabs: number[];
-    ready: boolean;
     allTabsHidden: boolean;
 };
+type UseActiveTabProps = {
+    initialTab: string;
+    tabsId?: string;
+};
+export declare const useActiveTab: ({ initialTab, tabsId }: UseActiveTabProps) => {
+    activeTab: string;
+    setActiveTab: import("react").Dispatch<import("react").SetStateAction<string>>;
+};
 export {};