@redocly/theme 0.61.0 → 0.62.0-custom.0

package/lib/components/Tooltip/Tooltip.js

@@ -34,113 +34,58 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
-exports.TooltipComponent = TooltipComponent;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const Portal_1 = require("../../components/Portal/Portal");
 function TooltipComponent({ children, isOpen, tip, withArrow = true, placement = 'top', className = 'default', width, dataTestId, disabled = false, arrowPosition = 'center', }) {
-    const ref = (0, react_1.useRef)(null);
+    const tooltipWrapperRef = (0, react_1.useRef)(null);
+    const tooltipBodyRef = (0, react_1.useRef)(null);
     const { isOpened, handleOpen, handleClose } = (0, hooks_1.useControl)(isOpen);
-    const [tooltipPosition, setTooltipPosition] = (0, react_1.useState)({ top: 0, left: 0 });
-    (0, hooks_1.useOutsideClick)(ref, handleClose);
+    const anchorName = `--tooltip${(0, react_1.useId)().replace(/:/g, '')}`;
+    (0, hooks_1.useOutsideClick)(isOpened ? [tooltipWrapperRef, tooltipBodyRef] : tooltipWrapperRef, handleClose);
     const isControlled = isOpen !== undefined;
-    const updateTooltipPosition = (0, react_1.useCallback)(() => {
-        if (isOpened && ref.current) {
-            const rect = ref.current.getBoundingClientRect();
-            let top = 0;
-            let left = 0;
-            switch (placement) {
-                case 'top':
-                    top = rect.top;
-                    if (arrowPosition === 'left') {
-                        left = rect.left - 24;
-                    }
-                    else if (arrowPosition === 'right') {
-                        left = rect.right + 24;
-                    }
-                    else {
-                        left = rect.left + rect.width / 2;
-                    }
-                    break;
-                case 'bottom':
-                    top = rect.bottom;
-                    if (arrowPosition === 'left') {
-                        left = rect.left - 24;
-                    }
-                    else if (arrowPosition === 'right') {
-                        left = rect.right + 24;
-                    }
-                    else {
-                        left = rect.left + rect.width / 2;
-                    }
-                    break;
-                case 'left':
-                    top = rect.top + rect.height / 2;
-                    left = rect.left;
-                    break;
-                case 'right':
-                    top = rect.top + rect.height / 2;
-                    left = rect.right;
-                    break;
-            }
-            setTooltipPosition({ top, left });
-        }
-    }, [isOpened, placement, arrowPosition]);
-    (0, react_1.useEffect)(() => {
-        if (isOpened && ref.current) {
-            updateTooltipPosition();
-            const handleScroll = () => updateTooltipPosition();
-            const handleResize = () => updateTooltipPosition();
-            window.addEventListener('scroll', handleScroll, true);
-            window.addEventListener('resize', handleResize);
-            return () => {
-                window.removeEventListener('scroll', handleScroll, true);
-                window.removeEventListener('resize', handleResize);
-            };
-        }
-    }, [isOpened, placement, updateTooltipPosition]);
     (0, react_1.useEffect)(() => {
+        if (!isControlled)
+            return;
         if (isOpen && !disabled) {
             handleOpen();
         }
         else {
             handleClose();
         }
-    }, [isOpen, handleOpen, handleClose, disabled]);
-    const controllers = !isControlled &&
-        !disabled && {
-        onMouseEnter: handleOpen,
-        onMouseLeave: handleClose,
-        onClick: handleClose,
-        onFocus: handleOpen,
-        onBlur: handleClose,
-    };
-    return (react_1.default.createElement(TooltipWrapper, Object.assign({ ref: ref }, controllers, { className: `tooltip-${className}`, "data-component-name": "Tooltip/Tooltip" }),
+    }, [isOpen, disabled, isControlled, handleOpen, handleClose]);
+    const controllers = !isControlled && !disabled
+        ? {
+            onMouseEnter: handleOpen,
+            onMouseLeave: handleClose,
+            onClick: handleClose,
+            onFocus: handleOpen,
+            onBlur: handleClose,
+        }
+        : {};
+    return (react_1.default.createElement(TooltipWrapper, Object.assign({ ref: tooltipWrapperRef }, controllers, { className: `tooltip-${className}`, "data-component-name": "Tooltip/Tooltip", anchorName: anchorName }),
         children,
         isOpened && !disabled && (react_1.default.createElement(Portal_1.Portal, null,
-            react_1.default.createElement(TooltipBody, { "data-testid": dataTestId || (typeof tip === 'string' ? tip : ''), placement: placement, width: width, withArrow: withArrow, arrowPosition: arrowPosition, style: {
-                    position: 'fixed',
-                    top: tooltipPosition.top,
-                    left: tooltipPosition.left,
-                } }, tip)))));
+            react_1.default.createElement(TooltipBody, { ref: tooltipBodyRef, "data-testid": dataTestId || (typeof tip === 'string' ? tip : ''), placement: placement, width: width, withArrow: withArrow, arrowPosition: arrowPosition, anchorName: anchorName }, tip)))));
 }
 exports.Tooltip = (0, react_1.memo)(TooltipComponent);
 const PLACEMENTS = {
     top: (0, styled_components_1.css) `
+    bottom: anchor(top);
     ${({ withArrow, arrowPosition }) => withArrow && arrowPosition === 'left'
         ? (0, styled_components_1.css) `
-            transform: translate(0, -100%);
-            margin-top: -10px;
+            transform: translate(-32px, -6px);
+            left: anchor(center);
           `
         : arrowPosition === 'right'
             ? (0, styled_components_1.css) `
-              transform: translate(-100%, -100%);
-              margin-top: -10px;
+              transform: translate(32px, -6px);
+              right: anchor(center);
             `
             : (0, styled_components_1.css) `
-              transform: translate(-50%, -100%);
-              margin-top: -10px;
+              transform: translate(-50%, -6px);
+              left: anchor(center);
             `}
 
     ${({ withArrow, arrowPosition }) => withArrow &&
@@ -152,26 +97,27 @@ const PLACEMENTS = {
           border-top-style: solid;
           border-radius: 2px;
           bottom: 0;
-          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(99%);'}
-          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 99%);'}
-          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(99%);'}
+          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(100%);'}
+          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 100%);'}
+          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(100%);'}
         }
       `}
   `,
     bottom: (0, styled_components_1.css) `
+    top: anchor(bottom);
     ${({ withArrow, arrowPosition }) => withArrow && arrowPosition === 'left'
         ? (0, styled_components_1.css) `
-            transform: translate(0, 10px);
-            margin-top: 0;
+            transform: translate(-32px, 6px);
+            left: anchor(center);
           `
         : arrowPosition === 'right'
             ? (0, styled_components_1.css) `
-              transform: translate(-100%, 10px);
-              margin-top: 0;
+              transform: translate(32px, 6px);
+              right: anchor(center);
             `
             : (0, styled_components_1.css) `
-              transform: translate(-50%, 10px);
-              margin-top: 0;
+              transform: translate(-50%, 6px);
+              left: anchor(center);
             `}
 
     ${({ withArrow, arrowPosition }) => withArrow &&
@@ -183,17 +129,19 @@ const PLACEMENTS = {
           border-bottom-style: solid;
           border-radius: 0 0 2px 2px;
           top: 0;
-          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(-99%);'}
-          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -99%);'}
-          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(-99%);'}
+          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(-100%);'}
+          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -100%);'}
+          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(-100%);'}
         }
       `}
   `,
     left: (0, styled_components_1.css) `
     transform: translate(-100%, -50%);
-    margin-left: -10px;
+    margin-left: -7px;
+    top: anchor(center);
+    left: anchor(left);
 
-    ${({ withArrow, arrowPosition }) => withArrow &&
+    ${({ withArrow }) => withArrow &&
         (0, styled_components_1.css) `
         &::after {
           border-top: 14px solid transparent;
@@ -201,19 +149,19 @@ const PLACEMENTS = {
           border-left-width: 8px;
           border-left-style: solid;
           border-radius: 2px 0 0 2px;
+          right: -9px;
           top: 50%;
-          right: 0;
-          ${arrowPosition === 'top' && 'top: 16px; transform: translateX(99%);'}
-          ${arrowPosition === 'center' && 'top: 50%; transform: translate(99%, -50%);'}
-          ${arrowPosition === 'bottom' && 'bottom: 16px; transform: translateX(99%);'}
+          transform: translateY(-50%);
         }
       `}
   `,
     right: (0, styled_components_1.css) `
     transform: translate(0, -50%);
-    margin-left: 10px;
+    margin-left: 7px;
+    top: anchor(center);
+    left: anchor(right);
 
-    ${({ withArrow, arrowPosition }) => withArrow &&
+    ${({ withArrow }) => withArrow &&
         (0, styled_components_1.css) `
         &::after {
           border-top: 14px solid transparent;
@@ -221,28 +169,33 @@ const PLACEMENTS = {
           border-right-width: 8px;
           border-right-style: solid;
           border-radius: 0 2px 2px 0;
+          left: -9px;
           top: 50%;
-          left: 0;
-          ${arrowPosition === 'top' && 'top: 16px; transform: translateX(-99%);'}
-          ${arrowPosition === 'center' && 'top: 50%; transform: translate(-99%, -50%);'}
-          ${arrowPosition === 'bottom' && 'bottom: 16px; transform: translateX(-99%);'}
+          transform: translateY(-50%);
         }
       `}
   `,
 };
-const TooltipWrapper = styled_components_1.default.div `
-  position: relative;
+const TooltipWrapper = styled_components_1.default.div.attrs(({ anchorName }) => ({
+    style: {
+        anchorName: anchorName,
+    },
+})) `
   display: flex;
 `;
-/* eslint-disable theme/no-raw-colors-in-styles */
-const TooltipBody = styled_components_1.default.span `
-  display: inline-block;
-
+const TooltipBody = styled_components_1.default.span.attrs(({ anchorName }) => ({
+    style: {
+        positionAnchor: anchorName,
+    },
+})) `
+  position: fixed;
+  min-width: 64px;
   padding: var(--tooltip-padding);
-  max-width: ${({ width }) => width || 'var(--tooltip-max-width)'};
+  max-width: var(--tooltip-max-width);
   white-space: normal;
   word-break: normal;
   overflow-wrap: break-word;
+  text-align: left;
 
   border-radius: var(--border-radius-md);
   transition: opacity 0.3s ease-out;
@@ -270,10 +223,10 @@ const TooltipBody = styled_components_1.default.span `
     0px 8px 24px 8px #0000000a,
     0px 4px 12px 0px #00000014;
 
-  width: ${({ width }) => width || 'auto'};
+  width: ${({ width }) => width || 'max-content'};
+
   ${({ placement }) => (0, styled_components_1.css) `
     ${PLACEMENTS[placement]};
   `}
 `;
-/* eslint-enable theme/no-raw-colors-in-styles */
 //# sourceMappingURL=Tooltip.js.map

package/lib/components/Tooltip/variables.dark.js

@@ -5,5 +5,9 @@ const styled_components_1 = require("styled-components");
 exports.tooltipDarkMode = (0, styled_components_1.css) `
   --tooltip-bg-color: var(--color-warm-grey-4);
   --tooltip-border-color: var(--color-warm-grey-5);
+
+  .tooltip-copy-button {
+    --tooltip-bg-color: var(--color-warm-grey-4);
+  }
 `;
 //# sourceMappingURL=variables.dark.js.map

package/lib/components/Tooltip/variables.js

@@ -20,9 +20,9 @@ exports.tooltip = (0, styled_components_1.css) `
   --tooltip-max-width: 400px;
 
   .tooltip-copy-button {
-    --tooltip-text-color: var(--text-color-secondary);
-    --tooltip-bg-color: var(--bg-color-raised);
-    --tooltip-arrow-color: var(--tooltip-bg-color);
+    --tooltip-text-color: var(--color-static-white);
+    --tooltip-bg-color: var(--color-warm-grey-10);
+    --tooltip-arrow-color: var(--tooltip-border-color);
   }
 
   .tooltip-catalog {

package/lib/components/UserMenu/LoginButton.d.ts

@@ -1,6 +1,12 @@
-import type { JSX } from 'react';
+import React from 'react';
+import type { ButtonVariant, ButtonSize } from '../../components/Button/Button';
 export type LoginButtonProps = {
     href: string;
     className?: string;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    label?: string;
+    labelTranslationKey?: string;
+    ['data-component-name']?: string;
 };
-export declare function LoginButton({ href, className }: LoginButtonProps): JSX.Element;
+export declare function LoginButton({ href, className, variant, size, label, labelTranslationKey, 'data-component-name': componentName, }: LoginButtonProps): React.JSX.Element;

package/lib/components/UserMenu/LoginButton.js

@@ -7,11 +7,12 @@ exports.LoginButton = LoginButton;
 const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../../core/hooks");
 const Button_1 = require("../../components/Button/Button");
-function LoginButton({ href, className }) {
+function LoginButton({ href, className, variant = 'primary', size = 'medium', label, labelTranslationKey = 'userMenu.login', 'data-component-name': componentName = 'UserMenu/LoginButton', }) {
     const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const telemetry = useTelemetry();
-    return (react_1.default.createElement("div", { "data-component-name": "UserMenu/LoginButton", className: className },
-        react_1.default.createElement(Button_1.Button, { "data-translation-key": "userMenu.login", to: href, onClick: () => telemetry.sendLoginButtonClickedMessage(), "data-testid": "login-btn", extraClass: className, variant: "primary", size: "medium" }, translate('userMenu.login', 'Login'))));
+    const buttonLabel = label || translate(labelTranslationKey, 'Login');
+    return (react_1.default.createElement("span", { "data-component-name": componentName, className: className },
+        react_1.default.createElement(Button_1.Button, { "data-translation-key": label ? undefined : labelTranslationKey, to: href, onClick: () => telemetry.sendLoginButtonClickedMessage(), "data-testid": "login-btn", extraClass: className, variant: variant, size: size }, buttonLabel)));
 }
 //# sourceMappingURL=LoginButton.js.map

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

@@ -1,4 +1,4 @@
-import type { AiSearchErrorConfig } from '../types/search';
+import { type AiSearchErrorConfig, ToolCallName } from '../types/search';
 export declare enum AiSearchError {
     Unauthorized = "ai_search_unauthorized",
     Forbidden = "ai_search_forbidden",
@@ -14,3 +14,7 @@ export type AiSearchConversationRole = (typeof AiSearchConversationRole)[keyof t
 export declare const AI_SEARCH_ERROR_CONFIG: Record<AiSearchError, AiSearchErrorConfig>;
 export declare const AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
 export declare const SEARCH_DEBOUNCE_TIME_MS = 300;
+export declare const TOOL_CALL_DISPLAY_TEXT: Record<ToolCallName, {
+    inProgressText: string;
+    completedText: string;
+}>;

package/lib/core/constants/search.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SEARCH_DEBOUNCE_TIME_MS = exports.AI_SEARCH_MAX_MESSAGE_LENGTH = exports.AI_SEARCH_ERROR_CONFIG = exports.AiSearchConversationRole = exports.AiSearchError = void 0;
+exports.TOOL_CALL_DISPLAY_TEXT = exports.SEARCH_DEBOUNCE_TIME_MS = exports.AI_SEARCH_MAX_MESSAGE_LENGTH = exports.AI_SEARCH_ERROR_CONFIG = exports.AiSearchConversationRole = exports.AiSearchError = void 0;
+const search_1 = require("../types/search");
 var AiSearchError;
 (function (AiSearchError) {
     AiSearchError["Unauthorized"] = "ai_search_unauthorized";
@@ -38,4 +39,26 @@ exports.AI_SEARCH_ERROR_CONFIG = {
 };
 exports.AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
 exports.SEARCH_DEBOUNCE_TIME_MS = 300;
+exports.TOOL_CALL_DISPLAY_TEXT = {
+    [search_1.ToolCallName.SearchDocumentation]: {
+        inProgressText: 'Searching documentation...',
+        completedText: 'Search completed',
+    },
+    [search_1.ToolCallName.ListApis]: {
+        inProgressText: 'Browsing APIs...',
+        completedText: 'Browsed APIs',
+    },
+    [search_1.ToolCallName.GetEndpoints]: {
+        inProgressText: 'Browsing endpoints for API...',
+        completedText: 'Browsed endpoints for API',
+    },
+    [search_1.ToolCallName.GetSecuritySchemes]: {
+        inProgressText: 'Browsing security schemes for API...',
+        completedText: 'Browsed security schemes for API',
+    },
+    [search_1.ToolCallName.GetFullApiDescription]: {
+        inProgressText: 'Reading API description...',
+        completedText: 'Read API description',
+    },
+};
 //# sourceMappingURL=search.js.map

package/lib/core/hooks/search/use-search-dialog.js

@@ -24,7 +24,7 @@ function useSearchDialog() {
         if (hotKeys) {
             (0, hotkeys_js_1.default)(hotKeys, (ev) => {
                 setIsOpen(true);
-                telemetry.sendSearchOpenedMessage({ method: 'shortcut' });
+                telemetry.sendSearchOpenedMessage([{ object: 'search', method: 'shortcut' }]);
                 ev.preventDefault();
             });
             return () => hotkeys_js_1.default.unbind(hotKeys);
@@ -32,7 +32,7 @@ function useSearchDialog() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hotKeys]);
     const onOpen = (0, react_1.useCallback)(function () {
-        telemetry.sendSearchOpenedMessage({ method: 'click' });
+        telemetry.sendSearchOpenedMessage([{ object: 'search', method: 'click' }]);
         setIsOpen(true);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);

package/lib/core/hooks/use-color-switcher.d.ts

@@ -1,4 +1,5 @@
 export declare const useColorSwitcher: () => {
+    initActiveColorMode: () => void;
     isSwitcherHidden: boolean | undefined;
     switchColorMode: (mode?: string) => void;
     activeColorMode: string;

package/lib/core/hooks/use-color-switcher.js

@@ -35,10 +35,17 @@ const useColorSwitcher = () => {
         window.requestAnimationFrame(() => {
             root.classList.remove('notransition');
         });
-        telemetry.sendColorModeSwitchedMessage({ from: activeColorMode, to: newMode });
+        telemetry.sendColorModeSwitchedMessage([
+            { object: 'color_mode', from: activeColorMode, to: newMode },
+        ]);
         setActiveColorMode(newMode);
     };
+    /**
+     * @deprecated color mode is automatically initialized when the hook is mounted
+     */
+    const initActiveColorMode = (0, react_1.useCallback)(() => { }, []);
     return {
+        initActiveColorMode,
         isSwitcherHidden: themeColorMode === null || themeColorMode === void 0 ? void 0 : themeColorMode.hide,
         switchColorMode,
         activeColorMode,

package/lib/core/hooks/use-mcp-config.js

@@ -6,6 +6,7 @@ const use_theme_hooks_1 = require("./use-theme-hooks");
 const dom_1 = require("../utils/dom");
 const constants_1 = require("../constants");
 const mcp_1 = require("../utils/mcp");
+const urls_1 = require("../utils/urls");
 function useMCPConfig() {
     var _a;
     const { useMcpData } = (0, use_theme_hooks_1.useThemeHooks)();
@@ -14,7 +15,7 @@ function useMCPConfig() {
         ? window.location.origin
         : ((_a = globalThis['SSR_HOSTNAME']) !== null && _a !== void 0 ? _a : '');
     const serverName = name || constants_1.DEFAULT_MCP_SERVER_NAME;
-    const serverUrl = `${origin}/mcp`;
+    const serverUrl = `${origin}${(0, urls_1.withPathPrefix)('/mcp')}`;
     const isMcpDisabled = !enabled || false;
     const cursorUrl = (0, react_1.useMemo)(() => (0, mcp_1.generateMCPDeepLink)('cursor', { serverName, url: serverUrl }), [serverName, serverUrl]);
     const vscodeUrl = (0, react_1.useMemo)(() => (0, mcp_1.generateMCPDeepLink)('vscode', { serverName, url: serverUrl }), [serverName, serverUrl]);

package/lib/core/hooks/use-modal-scroll-lock.js

@@ -4,19 +4,33 @@ exports.useModalScrollLock = useModalScrollLock;
 const react_1 = require("react");
 function useModalScrollLock(isOpen) {
     (0, react_1.useEffect)(() => {
-        const originalOverflow = document.body.style.overflow;
-        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-        if (isOpen) {
-            document.body.style.overflow = 'hidden';
-            document.body.style.marginRight = `${scrollbarWidth}px`;
+        if (typeof window === 'undefined' || typeof document === 'undefined') {
+            return;
         }
-        else {
-            document.body.style.overflow = originalOverflow;
-            document.body.style.marginRight = '';
+        const { body, documentElement } = document;
+        const originalOverflow = body.style.overflow;
+        const originalPaddingRight = body.style.paddingRight;
+        const originalScrollbarWidth = documentElement.style.getPropertyValue('--modal-scrollbar-width');
+        const restoreScrollState = () => {
+            body.style.overflow = originalOverflow;
+            body.style.paddingRight = originalPaddingRight;
+            if (originalScrollbarWidth) {
+                documentElement.style.setProperty('--modal-scrollbar-width', originalScrollbarWidth);
+            }
+            else {
+                documentElement.style.removeProperty('--modal-scrollbar-width');
+            }
+        };
+        if (isOpen) {
+            const scrollbarWidth = window.innerWidth - documentElement.clientWidth;
+            body.style.overflow = 'hidden';
+            if (scrollbarWidth > 0) {
+                body.style.paddingRight = `${scrollbarWidth}px`;
+                documentElement.style.setProperty('--modal-scrollbar-width', `${scrollbarWidth}px`);
+            }
         }
         return () => {
-            document.body.style.overflow = originalOverflow;
-            document.body.style.marginRight = '';
+            restoreScrollState();
         };
     }, [isOpen]);
 }

package/lib/core/hooks/use-outside-click.d.ts

@@ -1,2 +1,4 @@
 import type { RefObject } from 'react';
-export declare function useOutsideClick(ref: RefObject<HTMLElement | null>, handler?: (event: MouseEvent | TouchEvent) => void): void;
+type OutsideClickRef = RefObject<HTMLElement | null>;
+export declare function useOutsideClick(refs: OutsideClickRef | OutsideClickRef[], handler?: (event: MouseEvent | TouchEvent) => void): void;
+export {};

package/lib/core/hooks/use-outside-click.js

@@ -2,13 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useOutsideClick = useOutsideClick;
 const react_1 = require("react");
-function useOutsideClick(ref, handler) {
+function useOutsideClick(refs, handler) {
     (0, react_1.useEffect)(() => {
+        const refList = Array.isArray(refs) ? refs : [refs];
         const listener = (event) => {
-            if (!handler || !ref.current || ref.current.contains(event.target)) {
+            if (!handler)
                 return;
+            const target = event.target;
+            const isInside = refList.some((ref) => ref.current && ref.current.contains(target));
+            if (!isInside) {
+                handler(event);
             }
-            handler(event);
         };
         document.addEventListener('mousedown', listener);
         document.addEventListener('touchstart', listener);
@@ -16,6 +20,6 @@ function useOutsideClick(ref, handler) {
             document.removeEventListener('mousedown', listener);
             document.removeEventListener('touchstart', listener);
         };
-    }, [ref, handler]);
+    }, [refs, handler]);
 }
 //# sourceMappingURL=use-outside-click.js.map

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

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