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

package/lib/components/CodeBlock/CodeBlockDropdown.js

@@ -5,31 +5,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeBlockDropdown = CodeBlockDropdown;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
 const Dropdown_1 = require("../../components/Dropdown/Dropdown");
 const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
 const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
 const Button_1 = require("../../components/Button/Button");
-const ChevronSortIcon_1 = require("../../icons/ChevronSortIcon/ChevronSortIcon");
 const NoneIcon_1 = require("../../icons/NoneIcon/NoneIcon");
 const utils_1 = require("../../core/utils");
 function CodeBlockDropdown({ items, onChange, value }) {
-    const activeItem = items.find((item) => item.name === value) || items[0];
+    const activeItem = items.find((item) => item.id === value) || items[0];
     const icon = (activeItem === null || activeItem === void 0 ? void 0 : activeItem.lang) ? (0, utils_1.getFileIconByLanguage)(activeItem === null || activeItem === void 0 ? void 0 : activeItem.lang) : null;
-    return (react_1.default.createElement(StyledDropdown, { alignment: "end", trigger: react_1.default.createElement(Button_1.Button, { icon: react_1.default.createElement(ChevronSortIcon_1.ChevronSortIcon, null), iconPosition: "right", variant: "text", size: "small" },
+    return (react_1.default.createElement(Dropdown_1.Dropdown, { withArrow: true, alignment: "end", trigger: react_1.default.createElement(Button_1.Button, { iconPosition: "right", variant: "ghost", size: "small" },
             icon,
             activeItem.name) },
         react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, items.map((item) => {
             const icon = (0, utils_1.getFileIconByLanguage)(item.lang || '');
-            return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: item.lang, onAction: () => onChange(item.name), active: item.name === activeItem.name, prefix: item.lang ? icon : react_1.default.createElement(NoneIcon_1.NoneIcon, { size: "var(--icon-size)" }) }, item.name));
+            const isActive = item.id === value;
+            return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: item.id, onAction: () => onChange(item.id), active: isActive, prefix: item.lang ? icon : react_1.default.createElement(NoneIcon_1.NoneIcon, { size: "var(--icon-size)" }) }, item.name));
         }))));
 }
-const StyledDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
-  margin-left: auto;
-  --icon-size: 18px;
-  --button-color: var(--text-color-secondary);
-  button.button-size-small {
-    --button-icon-size: 18px;
-  }
-`;
 //# sourceMappingURL=CodeBlockDropdown.js.map

package/lib/components/CodeBlock/CodeBlockTabs.d.ts

@@ -1,6 +1,6 @@
 import type { JSX } from 'react';
-import type { CodeBlockTabItems } from '../../components/CodeBlock/CodeBlock';
+import type { CodeBlockItems } from '../../components/CodeBlock/CodeBlock';
 export type CodeBlockTabsProps = {
-    tabs: CodeBlockTabItems;
+    tabs: CodeBlockItems;
 };
 export declare function CodeBlockTabs({ tabs }: CodeBlockTabsProps): JSX.Element;

package/lib/components/CodeBlock/CodeBlockTabs.js

@@ -40,15 +40,16 @@ function CodeBlockTabs({ tabs }) {
         tabRefs,
     });
     (0, react_1.useEffect)(() => {
-        const activeTab = tabRefs.current.find((tab) => (tab === null || tab === void 0 ? void 0 : tab.dataset.name) === tabs.value);
+        const activeTab = tabRefs.current.find((tab) => (tab === null || tab === void 0 ? void 0 : tab.dataset.id) === tabs.value);
         if (activeTab) {
             activeTab.scrollIntoView({ block: 'nearest', inline: 'center' });
         }
     }, [tabs.value]);
     return (react_1.default.createElement(CodeBlockTabsWrapper, { ref: containerRef, "data-component-name": "CodeBlock/CodeBlockTabs" },
         react_1.default.createElement(ShadowWrapper, null,
-            react_1.default.createElement(Tabs, null, tabs.items.map(({ name, lang }, i) => {
+            react_1.default.createElement(Tabs, null, tabs.items.map((item, i) => {
                 var _a;
+                const { name, lang, id } = item;
                 const ext = (_a = name.match(/\.([^.]+)$/)) === null || _a === void 0 ? void 0 : _a[1];
                 const fileIcon = lang
                     ? (0, get_file_icon_1.getFileIconByLanguage)(lang)
@@ -57,7 +58,7 @@ function CodeBlockTabs({ tabs }) {
                         : null;
                 return (react_1.default.createElement(Tab, { ref: (el) => {
                         tabRefs.current[i] = el;
-                    }, "data-name": name, active: name === tabs.value, key: name + i, onClick: () => tabs.onChange(name) },
+                    }, "data-name": name, active: id === tabs.value, key: id, onClick: () => tabs.onChange(id) },
                     fileIcon,
                     name));
             }))),

package/lib/components/JsonViewer/JsonViewer.d.ts

@@ -3,11 +3,11 @@ import type { CodeBlockControlsProps } from '../../components/CodeBlock/CodeBloc
 export type PanelType = 'request' | 'responses' | 'request-samples' | 'response-samples';
 export type JsonProps = {
     title?: CodeBlockControlsProps['title'];
+    controls?: CodeBlockControlsProps['controls'];
     data: any;
     className?: string;
     expandLevel: number;
     startLineNumber?: number;
-    hideHeader?: boolean;
     onCopyClick?: () => void;
     onPanelToggle?: (isExpanded: boolean, panelType?: PanelType) => void;
 };

package/lib/components/JsonViewer/JsonViewer.js

@@ -31,7 +31,7 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CodeBlock_1 = require("../../components/CodeBlock/CodeBlock");
 const helpers_1 = require("./helpers");
-function JsonComponent({ data, expandLevel = 1, className, onCopyClick, onPanelToggle, title, hideHeader, }) {
+function JsonComponent({ data, expandLevel = 1, className, onCopyClick, onPanelToggle, title, controls = {}, }) {
     const showFoldingButtons = data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
     const [expandAllSignal, setExpandAllSignal] = react_1.default.useState(undefined);
     const expandAll = () => {
@@ -49,18 +49,17 @@ function JsonComponent({ data, expandLevel = 1, className, onCopyClick, onPanelT
         });
     };
     const source = JSON.stringify(data, null, 2);
+    const hasHeader = title || controls;
     return (react_1.default.createElement(exports.JsonViewerWrap, { "data-testid": "json-viewer", "data-component-name": "JsonViewer/JsonViewer", className: className },
-        react_1.default.createElement(CodeBlock_1.CodeBlock, { header: hideHeader
-                ? undefined
-                : {
+        react_1.default.createElement(CodeBlock_1.CodeBlock, { header: hasHeader
+                ? {
                     title,
                     className: 'code-block-header',
-                    controls: {
-                        copy: { data, onClick: onCopyClick, handleOutside: true },
-                        expand: showFoldingButtons ? { onClick: expandAll } : undefined,
-                        collapse: showFoldingButtons ? { onClick: collapseAll } : undefined,
-                    },
-                }, source: source },
+                    controls: controls && Object.assign(Object.assign({}, controls), { copy: Object.assign(Object.assign({}, controls.copy), { data, onClick: onCopyClick, handleOutside: true }), expand: showFoldingButtons
+                            ? Object.assign(Object.assign({}, controls.expand), { onClick: expandAll }) : undefined, collapse: showFoldingButtons
+                            ? Object.assign(Object.assign({}, controls.collapse), { onClick: collapseAll }) : undefined }),
+                }
+                : undefined, source: source },
             react_1.default.createElement(FoldingWrap, null,
                 react_1.default.createElement(helpers_1.JsonValue, { value: data, level: 0, standalone: true, expandAllSignal: expandAllSignal, defaultExpandLevel: Math.max(1, expandLevel) })))));
 }

package/lib/components/PageActions/PageActions.d.ts

@@ -1,6 +1,9 @@
 import type { JSX } from 'react';
+import { PageActionType } from '../../core/hooks';
 type PageActionProps = {
-    pageSlug: string;
+    pageSlug?: string;
+    mcpUrl?: string;
+    actions?: PageActionType[];
 };
 export declare function PageActions(props: PageActionProps): JSX.Element | null;
 export {};

package/lib/components/PageActions/PageActions.js

@@ -49,8 +49,8 @@ const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/Checkmark
 const hooks_1 = require("../../core/hooks");
 const ACTION_DONE_DISPLAY_DURATION = 1000;
 function PageActions(props) {
-    const { pageSlug } = props;
-    const actions = (0, hooks_1.usePageActions)(pageSlug || '/');
+    const { pageSlug, mcpUrl } = props;
+    const actions = (0, hooks_1.usePageActions)(pageSlug || '/', mcpUrl, props.actions);
     const [actionState, setActionState] = (0, react_1.useState)('idle');
     if (!actions.length) {
         return null;

package/lib/components/Search/SearchDialog.js

@@ -190,8 +190,9 @@ function SearchDialog({ onClose, className }) {
                                 }
                             }
                         }, ref: aiQueryRef, tabIndex: 0, role: "option", "aria-selected": "true" },
-                        react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { color: "var(--search-ai-icon-color)", size: "36px", background: "var(--search-ai-icon-bg-color)", margin: "0 var(--spacing-md) 0 0", borderRadius: "var(--border-radius-lg)" }),
-                        react_1.default.createElement(Typography_1.Typography, { fontWeight: "var(--font-weight-semibold)" }, query),
+                        react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { style: { flexShrink: 0 }, color: "var(--search-ai-icon-color)", size: "36px", background: "var(--search-ai-icon-bg-color)", margin: "0 var(--spacing-md) 0 0", borderRadius: "var(--border-radius-lg)" }),
+                        react_1.default.createElement(QueryWrapper, null,
+                            react_1.default.createElement(Typography_1.Typography, { fontWeight: "var(--font-weight-semibold)" }, query)),
                         react_1.default.createElement(Typography_1.Typography, null,
                             "- ",
                             translate('search.ai.label', 'Ask AI assistant')),
@@ -268,10 +269,10 @@ const SearchDialogWrapper = styled_components_1.default.div `
   border-radius: 0;
 
   @media screen and (max-width: ${utils_1.breakpoints.small}) {
-    min-height: -webkit-fill-available !important;
-    min-height: 100dvh !important;
-    height: auto !important;
-    width: 100vw !important;
+    min-height: -webkit-fill-available;
+    min-height: 100dvh;
+    height: 100dvh;
+    width: 100vw;
   }
 
   @media screen and (min-width: ${utils_1.breakpoints.small}) {
@@ -318,6 +319,8 @@ const SearchDialogBodyMainView = styled_components_1.default.div `
 `;
 const SearchDialogBodyFilterView = styled_components_1.default.div `
   overflow: scroll;
+  max-width: var(--search-filter-width);
+  width: 100%;
 `;
 const SearchDialogFooter = styled_components_1.default.footer `
   display: flex;
@@ -439,4 +442,7 @@ const SearchWithAI = styled_components_1.default.div `
     margin-right: var(--spacing-xs);
   }
 `;
+const QueryWrapper = styled_components_1.default.div `
+  word-break: break-word;
+`;
 //# sourceMappingURL=SearchDialog.js.map

package/lib/components/Search/SearchFilter.js

@@ -43,7 +43,8 @@ function SearchFilter({ className, facets, filter, query, quickFilterFields, onF
         React.createElement(SearchFilterFields, null, facets.map((facet, index) => (React.createElement(SearchFilterField_1.SearchFilterField, { key: `${facet.field}-${index}`, facet: facet, filter: filter, query: query, quickFilterFields: quickFilterFields, onFilterChange: onFilterChange, onFacetReset: onFacetReset }))))));
 }
 const SearchFilterWrapper = styled_components_1.default.div `
-  width: var(--search-filter-width);
+  width: 100%;
+  max-width: var(--search-filter-width);
   display: flex;
   flex-direction: column;
   padding: var(--search-filter-padding);

package/lib/components/Tooltip/Tooltip.js

@@ -91,15 +91,13 @@ function TooltipComponent({ children, isOpen, tip, withArrow = true, placement =
         }
     }, [isOpened, placement, updateTooltipPosition]);
     (0, react_1.useEffect)(() => {
-        if (isControlled && !disabled) {
-            if (isOpen) {
-                handleOpen();
-            }
-            else {
-                handleClose();
-            }
+        if (isOpen && !disabled) {
+            handleOpen();
+        }
+        else {
+            handleClose();
         }
-    }, [isOpen, isControlled, handleOpen, handleClose, disabled]);
+    }, [isOpen, handleOpen, handleClose, disabled]);
     const controllers = !isControlled &&
         !disabled && {
         onMouseEnter: handleOpen,
@@ -228,7 +226,7 @@ const TooltipBody = styled_components_1.default.span `
   display: inline-block;
 
   padding: var(--tooltip-padding);
-  max-width: var(--tooltip-max-width);
+  max-width: ${({ width }) => width || 'var(--tooltip-max-width)'};
   white-space: normal;
   word-break: normal;
   overflow-wrap: break-word;

package/lib/components/Tooltip/TooltipWrapper.js

@@ -9,7 +9,7 @@ const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../../core/hooks");
 const Tooltip_1 = require("../../components/Tooltip/Tooltip");
 function TooltipWrapper({ children, tip, placement = 'top', width = 'max-content', className = '', showOnHover = true, disabled = false, }) {
-    const tooltip = (0, hooks_1.useControl)();
+    const tooltip = (0, hooks_1.useControl)(false);
     const handleMouseEnter = () => {
         if (showOnHover && !disabled) {
             tooltip.handleOpen();

package/lib/core/constants/catalog.d.ts

@@ -1,6 +1,6 @@
 import type { EntityRelationType } from '../types/catalog';
 export declare const CATALOG_TAG_MAX_LENGTH = 15;
-export declare const ENTITY_RELATION_TYPES: readonly ["partOf", "hasParts", "creates", "createdBy", "owns", "ownedBy", "implements", "implementedBy", "dependsOn", "dependencyOf", "uses", "usedBy", "produces", "consumes", "linksTo", "supersedes", "supersededBy", "compatibleWith", "extends", "extendedBy", "relatesTo", "hasMember", "memberOf", "triggers", "triggeredBy"];
+export declare const PREDEFINED_ENTITY_TYPES: string[];
 export declare const reverseRelationMap: Record<EntityRelationType, EntityRelationType>;
 export declare const relationTypeMap: Record<EntityRelationType, string>;
 export declare enum GraphHandleType {

package/lib/core/constants/catalog.js

@@ -1,33 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GraphCustomEdgeType = exports.GraphCustomNodeType = exports.GraphHandleType = exports.relationTypeMap = exports.reverseRelationMap = exports.ENTITY_RELATION_TYPES = exports.CATALOG_TAG_MAX_LENGTH = void 0;
+exports.GraphCustomEdgeType = exports.GraphCustomNodeType = exports.GraphHandleType = exports.relationTypeMap = exports.reverseRelationMap = exports.PREDEFINED_ENTITY_TYPES = exports.CATALOG_TAG_MAX_LENGTH = void 0;
 exports.CATALOG_TAG_MAX_LENGTH = 15;
-exports.ENTITY_RELATION_TYPES = [
-    'partOf',
-    'hasParts',
-    'creates',
-    'createdBy',
-    'owns',
-    'ownedBy',
-    'implements',
-    'implementedBy',
-    'dependsOn',
-    'dependencyOf',
-    'uses',
-    'usedBy',
-    'produces',
-    'consumes',
-    'linksTo',
-    'supersedes',
-    'supersededBy',
-    'compatibleWith',
-    'extends',
-    'extendedBy',
-    'relatesTo',
-    'hasMember',
-    'memberOf',
-    'triggers',
-    'triggeredBy',
+exports.PREDEFINED_ENTITY_TYPES = [
+    'service',
+    'domain',
+    'team',
+    'user',
+    'api-description',
+    'data-schema',
+    'api-operation',
 ];
 exports.reverseRelationMap = {
     partOf: 'hasParts',
@@ -55,6 +37,8 @@ exports.reverseRelationMap = {
     memberOf: 'hasMember',
     triggers: 'triggeredBy',
     triggeredBy: 'triggers',
+    returns: 'returnedBy',
+    returnedBy: 'returns',
 };
 exports.relationTypeMap = {
     partOf: 'Part of',
@@ -82,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/catalog/useCatalogTableViewRow.js

@@ -10,7 +10,7 @@ function useCatalogTableViewRow({ entityKey, entityType, catalogConfig, entities
         }
         return Object.values((_a = entitiesCatalogConfig.catalogs) !== null && _a !== void 0 ? _a : {}).find((catalog) => {
             var _a;
-            return (_a = catalog.includes) === null || _a === void 0 ? void 0 : _a.some((include) => include.type === entityType);
+            return (_a = catalog === null || catalog === void 0 ? void 0 : catalog.includes) === null || _a === void 0 ? void 0 : _a.some((include) => include.type === entityType);
         });
     };
     const getEntityDetailsLink = () => {

package/lib/core/hooks/use-active-section-id.js

@@ -17,6 +17,10 @@ function useActiveSectionId(location, hasOverviewPage = false, withNavbar = true
             setItemId('');
             return;
         }
+        if (window.scrollY <= 0) {
+            setItemId(sections[0].getAttribute('data-section-id') || '');
+            return;
+        }
         for (let i = 0; i < sections.length; i++) {
             const section = sections[i];
             const rect = section.getBoundingClientRect();

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-control.js

@@ -2,10 +2,25 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useControl = void 0;
 const react_1 = require("react");
+const DEFAULT_CONTROL_OPEN_DELAY = 300;
 const useControl = (initialVal = false) => {
     const [isOpened, setIsOpened] = (0, react_1.useState)(initialVal);
-    const handleOpen = (0, react_1.useCallback)(() => setIsOpened(true), []);
-    const handleClose = (0, react_1.useCallback)(() => setIsOpened(false), []);
+    const timeoutRef = (0, react_1.useRef)(null);
+    const clearOpenTimer = (0, react_1.useCallback)(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+    }, []);
+    const handleOpen = (0, react_1.useCallback)(() => {
+        clearOpenTimer();
+        timeoutRef.current = setTimeout(() => {
+            setIsOpened(true);
+        }, DEFAULT_CONTROL_OPEN_DELAY);
+    }, [clearOpenTimer]);
+    const handleClose = (0, react_1.useCallback)(() => {
+        clearOpenTimer();
+        setIsOpened(false);
+    }, [clearOpenTimer]);
     return {
         isOpened,
         handleOpen,

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;