@redocly/theme 0.71.0-next.4 → 0.71.0-next.6

package/lib/components/Buttons/MobileMenuButton.d.ts

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+export type MobileMenuButtonProps = {
+    isOpen: boolean;
+    /** Called inside a transition; the button shows the requested state until it commits. */
+    onOpenChange: (isOpen: boolean) => void;
+    className?: string;
+};
+export declare function MobileMenuButton({ isOpen, onOpenChange, className, }: MobileMenuButtonProps): JSX.Element;

package/lib/components/Buttons/MobileMenuButton.js

@@ -0,0 +1,58 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileMenuButton = MobileMenuButton;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Button_1 = require("../../components/Button/Button");
+const MenuIcon_1 = require("../../icons/MenuIcon/MenuIcon");
+const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
+function MobileMenuButton({ isOpen, onOpenChange, className, }) {
+    const [isToggling, startToggle] = (0, react_1.useTransition)();
+    const showClose = isToggling ? !isOpen : isOpen;
+    return (react_1.default.createElement(MobileMenuButtonWrapper, { "data-component-name": "Buttons/MobileMenuButton", className: className, variant: "text", "data-testid": "mobile-menu-button", onClick: () => startToggle(() => onOpenChange(!showClose)), icon: showClose ? react_1.default.createElement(CloseIcon_1.CloseIcon, null) : react_1.default.createElement(MenuIcon_1.MenuIcon, null), "aria-label": showClose ? 'Close menu button' : 'Open menu button' }));
+}
+const MobileMenuButtonWrapper = (0, styled_components_1.default)(Button_1.Button) `
+  margin-left: 0px !important;
+
+  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
+    display: none;
+  }
+`;
+//# sourceMappingURL=MobileMenuButton.js.map

package/lib/components/Catalog/CatalogFilter/CatalogFilter.js

@@ -21,7 +21,7 @@ function CatalogFilter({ filter, filterValuesCasing, showCounter = true, classNa
     if (!filteredOptions || filteredOptions.length === 0) {
         return null;
     }
-    const FilterComponent = filterComponents[(filter.type || 'checkboxes')];
+    const FilterComponent = filterComponents[filter.type || 'checkboxes'];
     return (react_1.default.createElement(CatalogFilterGroup, { className: className, "data-component-name": "Catalog/CatalogFilter", key: filter.property + filter.title },
         react_1.default.createElement(FilterComponent, { filter: filter, filterValuesCasing: filterValuesCasing, showCounter: showCounter })));
 }

package/lib/components/Feedback/Mood.js

@@ -118,8 +118,8 @@ function Mood({ settings, onSubmit, className }) {
     const hasOptionalEmail = !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated);
     const displayReasons = checkIfShouldDisplayReasons(score);
     const displayComment = !!score && hasComment;
-    const displaySubmitBnt = !!(score && (displayReasons || displayComment));
     const displayFeedbackEmail = !!score && hasOptionalEmail;
+    const displaySubmitBnt = !!score && (displayReasons || displayComment || displayFeedbackEmail);
     const submitMood = (moodScore) => {
         const trimmedComment = (comment === null || comment === void 0 ? void 0 : comment.trim()) || undefined;
         const trimmedEmail = (email === null || email === void 0 ? void 0 : email.trim()) || undefined;

package/lib/components/Feedback/Rating.js

@@ -94,8 +94,8 @@ function Rating({ settings, onSubmit, className }) {
     };
     const displayReasons = !!score && hasReasons;
     const displayComment = !!score && hasComment;
-    const displaySubmitBnt = !!(score && (displayReasons || displayComment));
     const displayFeedbackEmail = !!score && hasOptionalEmail;
+    const displaySubmitBnt = !!score && (displayReasons || displayComment || displayFeedbackEmail);
     if (isSubmitted) {
         return (React.createElement(RatingWrapper, { "data-component-name": "Feedback/Rating" },
             React.createElement(StyledFormMandatoryFields, null,

package/lib/components/Feedback/Scale.js

@@ -98,8 +98,8 @@ function Scale({ settings, onSubmit, className }) {
     }
     const displayReasons = !!score && hasReasons;
     const displayComment = !!score && hasComment;
-    const displaySubmitBnt = !!score && (displayReasons || displayComment);
     const displayFeedbackEmail = !!score && hasOptionalEmail;
+    const displaySubmitBnt = !!score && (displayReasons || displayComment || displayFeedbackEmail);
     if (isSubmitted) {
         return (React.createElement(ScaleWrapper, { "data-component-name": "Feedback/Scale" },
             React.createElement(Label, { "data-translation-key": "feedback.settings.submitText" }, submitText ||

package/lib/components/Feedback/Sentiment.js

@@ -85,8 +85,8 @@ function Sentiment({ settings, onSubmit, className }) {
     const hasOptionalEmail = !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated);
     const displayReasons = checkIfShouldDisplayReasons(score);
     const displayComment = !!score && hasComment;
-    const displaySubmitBnt = !!(score && (displayReasons || displayComment));
     const displayFeedbackEmail = !!score && hasOptionalEmail;
+    const displaySubmitBnt = !!score && (displayReasons || displayComment || displayFeedbackEmail);
     const commentLabel = score === 1
         ? (commentSettings && commentSettings.likeLabel) ||
             translate('feedback.settings.comment.likeLabel', 'What was most helpful?')

package/lib/components/Filter/Filter.js

@@ -17,7 +17,7 @@ const filterComponents = {
 function Filter({ filter, filterValuesCasing, showCounter = true, }) {
     if (!filter.parentUsed)
         return null;
-    const FilterComponent = filterComponents[(filter.type || 'checkboxes')];
+    const FilterComponent = filterComponents[filter.type || 'checkboxes'];
     return (react_1.default.createElement(FilterGroup, { "data-component-name": "Filter/Filter", key: filter.property + filter.title },
         react_1.default.createElement(FilterComponent, { filter: filter, filterValuesCasing: filterValuesCasing, showCounter: showCounter })));
 }

package/lib/components/MCP/McpConnectionTabs.d.ts

@@ -1,5 +1,5 @@
 import type { JSX } from 'react';
-export type McpConnectionTab = 'claude' | 'chatgpt' | 'json';
+export type McpConnectionTab = 'claude' | 'chatgpt' | 'grok' | 'json';
 export type McpConnectionTabsProps = {
     options?: McpConnectionTab[];
     className?: string;

package/lib/components/MCP/McpConnectionTabs.js

@@ -45,11 +45,12 @@ const Button_1 = require("../../components/Button/Button");
 const CodeBlock_1 = require("../../components/CodeBlock/CodeBlock");
 const ClaudeIcon_1 = require("../../icons/ClaudeIcon/ClaudeIcon");
 const ChatGptIcon_1 = require("../../icons/ChatGptIcon/ChatGptIcon");
+const GrokIcon_1 = require("../../icons/GrokIcon/GrokIcon");
 const Tabs_1 = require("../../markdoc/components/Tabs/Tabs");
 const TabItemFragment_1 = require("../../markdoc/components/Tabs/TabItemFragment");
 const NumberedList_1 = require("../../markdoc/components/NumberedList/NumberedList");
 const NumberedItem_1 = require("../../markdoc/components/NumberedList/NumberedItem");
-const DEFAULT_TAB_OPTIONS = ['claude', 'chatgpt', 'json'];
+const DEFAULT_TAB_OPTIONS = ['claude', 'chatgpt', 'grok', 'json'];
 const TAB_LABELS = {
     claude: {
         translationKey: 'page.mcpNotAllowed.tabs.claude',
@@ -61,8 +62,14 @@ const TAB_LABELS = {
         defaultLabel: 'ChatGPT',
         icon: ChatGptIcon_1.ChatGptIcon,
     },
+    grok: {
+        translationKey: 'page.mcpNotAllowed.tabs.grok',
+        defaultLabel: 'Grok',
+        icon: GrokIcon_1.GrokIcon,
+    },
     json: { translationKey: 'page.mcpNotAllowed.tabs.json', defaultLabel: 'JSON' },
 };
+const GROK_CONNECTORS_URL = 'https://grok.com/connectors';
 function McpConnectionTabs({ options = DEFAULT_TAB_OPTIONS, className, }) {
     const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
@@ -136,6 +143,22 @@ function renderTabContent(option, connection, translate, snippetHeader) {
                 },
                 assistantPromptClient,
             ]);
+        case 'grok':
+            return renderClientList([
+                {
+                    headline: translate('page.mcpNotAllowed.snippets.grokBuild.headline', 'Grok Build'),
+                    content: (react_1.default.createElement(react_1.default.Fragment, null,
+                        terminalHint,
+                        react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "shell", source: (0, utils_1.generateGrokBuildCommand)(connection), header: snippetHeader(option, 'grok-build'), wrapContents: true }))),
+                },
+                {
+                    headline: translate('page.mcpNotAllowed.snippets.grokApp.headline', 'Grok app'),
+                    content: (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(ConnectButton, { variant: "secondary", icon: react_1.default.createElement(GrokIcon_1.GrokIcon, null), onClick: () => window.open(GROK_CONNECTORS_URL, '_blank') }, translate('page.mcpNotAllowed.snippets.grokApp.openConnectors', 'Open Grok connectors')),
+                        react_1.default.createElement(TabHint, null, translate('page.mcpNotAllowed.snippets.grokApp.instruction', 'On grok.com, open Connectors → New Connector → Custom and paste this server URL:')),
+                        react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "text", source: connection.url, header: snippetHeader(option, 'grok-app') }))),
+                },
+            ]);
         case 'json':
             return (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(TabHint, null, translate('page.mcpNotAllowed.snippets.json.hint', 'Add this server entry to your MCP client configuration file:')),

package/lib/components/MissingTranslationNotice/MissingTranslationNotice.d.ts

@@ -0,0 +1,11 @@
+import type { JSX } from 'react';
+export type MissingTranslationNoticeProps = {
+    className?: string;
+};
+/**
+ * Tells the reader that the page shows the original language,
+ * because the translation for the selected locale is missing.
+ * Renders only on fallback pages of a locale that sets `showMissingTranslationNotice`.
+ * The reader can close the notice for the current page.
+ */
+export declare function MissingTranslationNotice({ className, }: MissingTranslationNoticeProps): JSX.Element | null;

package/lib/components/MissingTranslationNotice/MissingTranslationNotice.js

@@ -0,0 +1,83 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MissingTranslationNotice = MissingTranslationNotice;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
+const TranslateIcon_1 = require("../../icons/TranslateIcon/TranslateIcon");
+const Markdown_1 = require("../../components/Markdown/Markdown");
+const hooks_1 = require("../../core/hooks");
+/**
+ * Tells the reader that the page shows the original language,
+ * because the translation for the selected locale is missing.
+ * Renders only on fallback pages of a locale that sets `showMissingTranslationNotice`.
+ * The reader can close the notice for the current page.
+ */
+function MissingTranslationNotice({ className, }) {
+    var _a;
+    const { useTranslate, useMarkdownText, usePageProps, useL10nConfig } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const { isTranslationFallback } = usePageProps();
+    const { currentLocale, defaultLocale, locales } = useL10nConfig();
+    const [isDismissed, setIsDismissed] = react_1.default.useState(false);
+    const isShown = isTranslationFallback === true &&
+        currentLocale !== defaultLocale &&
+        locales.some(({ code, showMissingTranslationNotice }) => code === currentLocale && showMissingTranslationNotice === true);
+    const language = ((_a = locales.find(({ code }) => code === defaultLocale)) === null || _a === void 0 ? void 0 : _a.name) || defaultLocale;
+    const content = useMarkdownText(isShown ? translate('missingTranslationNotice.content', { language }) : '');
+    if (!isShown || isDismissed) {
+        return null;
+    }
+    return (react_1.default.createElement(MissingTranslationNoticeWrapper, { className: className, "data-component-name": "MissingTranslationNotice/MissingTranslationNotice" },
+        react_1.default.createElement(Icon, { color: "--missing-translation-notice-icon-color" }),
+        react_1.default.createElement(Content, null,
+            react_1.default.createElement(Title, null, translate('missingTranslationNotice.title', {
+                defaultValue: 'This page has not yet been translated',
+            })),
+            react_1.default.createElement(Markdown_1.Markdown, { compact: true }, content)),
+        react_1.default.createElement(CloseButton, { type: "button", "aria-label": translate('missingTranslationNotice.close', { defaultValue: 'Close' }), onClick: () => setIsDismissed(true) },
+            react_1.default.createElement(CloseIcon_1.CloseIcon, { color: "--missing-translation-notice-text-color" }))));
+}
+const MissingTranslationNoticeWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--missing-translation-notice-gap);
+
+  padding: var(--missing-translation-notice-padding);
+  margin: var(--missing-translation-notice-margin-vertical) 0;
+  color: var(--missing-translation-notice-text-color);
+  background-color: var(--missing-translation-notice-bg-color);
+  border: 1px solid var(--missing-translation-notice-border-color);
+  border-left: var(--missing-translation-notice-accent-width) solid
+    var(--missing-translation-notice-accent-color);
+  border-radius: var(--missing-translation-notice-border-radius);
+`;
+const Icon = (0, styled_components_1.default)(TranslateIcon_1.TranslateIcon) `
+  flex-shrink: 0;
+`;
+const Content = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: var(--spacing-xxs);
+
+  font-size: var(--missing-translation-notice-font-size);
+  line-height: var(--missing-translation-notice-line-height);
+`;
+const Title = styled_components_1.default.span `
+  font-size: var(--missing-translation-notice-title-font-size);
+  font-weight: var(--missing-translation-notice-title-font-weight);
+`;
+const CloseButton = styled_components_1.default.button `
+  display: flex;
+  flex-shrink: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+`;
+//# sourceMappingURL=MissingTranslationNotice.js.map

package/lib/components/MissingTranslationNotice/variables.d.ts

@@ -0,0 +1 @@
+export declare const missingTranslationNotice: import("styled-components").RuleSet<object>;

package/lib/components/MissingTranslationNotice/variables.dark.d.ts

@@ -0,0 +1 @@
+export declare const missingTranslationNoticeDarkMode: import("styled-components").RuleSet<object>;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.missingTranslationNoticeDarkMode = void 0;
+const styled_components_1 = require("styled-components");
+exports.missingTranslationNoticeDarkMode = (0, styled_components_1.css) `
+  --missing-translation-notice-bg-color: var(--color-warm-grey-3); // @presenter Color
+  --missing-translation-notice-icon-color: var(--color-blue-4); // @presenter Color
+  --missing-translation-notice-accent-color: var(--color-blue-4); // @presenter Color
+`;
+//# sourceMappingURL=variables.dark.js.map

package/lib/components/MissingTranslationNotice/variables.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.missingTranslationNotice = void 0;
+const styled_components_1 = require("styled-components");
+exports.missingTranslationNotice = (0, styled_components_1.css) `
+  /**
+   * @tokens Missing translation notice
+   */
+
+  --missing-translation-notice-bg-color: var(--color-warm-grey-1); // @presenter Color
+  --missing-translation-notice-text-color: var(--text-color-primary); // @presenter Color
+  --missing-translation-notice-icon-color: var(--color-blue-6); // @presenter Color
+  --missing-translation-notice-border-color: var(--border-color-secondary); // @presenter Color
+  --missing-translation-notice-accent-color: var(--color-blue-6); // @presenter Color
+
+  --missing-translation-notice-accent-width: 3px; // @presenter Spacing
+  --missing-translation-notice-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --missing-translation-notice-padding: var(--spacing-sm) var(--spacing-base); // @presenter Spacing
+  --missing-translation-notice-margin-vertical: var(--spacing-base); // @presenter Spacing
+  --missing-translation-notice-gap: var(--spacing-sm); // @presenter Spacing
+
+  --missing-translation-notice-title-font-size: var(--font-size-base); // @presenter FontSize
+  --missing-translation-notice-title-font-weight: var(--font-weight-semibold); // @presenter FontWeight
+  --missing-translation-notice-font-size: var(--font-size-base); // @presenter FontSize
+  --missing-translation-notice-line-height: var(--line-height-base); // @presenter LineHeight
+
+  // @tokens End
+`;
+//# sourceMappingURL=variables.js.map

package/lib/components/Navbar/Navbar.js

@@ -50,9 +50,7 @@ const Search_1 = require("../../components/Search/Search");
 const UserMenu_1 = require("../../components/UserMenu/UserMenu");
 const LanguagePicker_1 = require("../../components/LanguagePicker/LanguagePicker");
 const ProductPicker_1 = require("../../components/Product/ProductPicker");
-const Button_1 = require("../../components/Button/Button");
-const MenuIcon_1 = require("../../icons/MenuIcon/MenuIcon");
-const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
+const MobileMenuButton_1 = require("../../components/Buttons/MobileMenuButton");
 const Banner_1 = require("../../components/Banner/Banner");
 function Navbar({ className }) {
     var _a;
@@ -81,19 +79,20 @@ function Navbar({ className }) {
             hideSearch ? null : react_1.default.createElement(Search_1.Search, null),
             react_1.default.createElement(LanguagePicker_1.LanguagePicker, { onChangeLanguage: changeLanguage, onlyIcon: true, alignment: "end" }),
             react_1.default.createElement(ColorModeSwitcher_1.ColorModeSwitcher, null),
-            react_1.default.createElement(MobileMenuButton, { variant: "text", "data-testid": "mobile-menu-button", onClick: isOpen
-                    ? () => {
+            react_1.default.createElement(MobileMenuButton_1.MobileMenuButton, { isOpen: isOpen, onOpenChange: (open) => {
+                    if (open) {
+                        openMobileMenu();
+                        telemetry.sendMobileMenuOpenedMessage([
+                            (0, utils_1.getBaseDataAttributes)('mobileMenuOpen', 'button'),
+                        ]);
+                    }
+                    else {
                         closeMobileMenu();
                         telemetry.sendMobileMenuClosedMessage([
                             (0, utils_1.getBaseDataAttributes)('mobileMenuClose', 'button'),
                         ]);
                     }
-                    : () => {
-                        openMobileMenu();
-                        telemetry.sendMobileMenuOpenedMessage([
-                            (0, utils_1.getBaseDataAttributes)('mobileMenuOpen', 'button'),
-                        ]);
-                    }, icon: isOpen ? react_1.default.createElement(CloseIcon_1.CloseIcon, null) : react_1.default.createElement(MenuIcon_1.MenuIcon, null), "aria-label": isOpen ? 'Close menu button' : 'Open menu button' }),
+                } }),
             hideUserMenu ? null : react_1.default.createElement(UserMenu_1.UserMenu, null)),
         navigationTabsConfig && react_1.default.createElement(NavigationTabs_1.NavigationTabs, { config: navigationTabsConfig })));
 }
@@ -147,11 +146,4 @@ const NavbarRow = styled_components_1.default.div `
     margin-right: auto;
   }
 `;
-const MobileMenuButton = (0, styled_components_1.default)(Button_1.Button) `
-  margin-left: 0px !important;
-
-  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
-    display: none;
-  }
-`;
 //# sourceMappingURL=Navbar.js.map

package/lib/components/PageActions/PageActions.js

@@ -102,6 +102,7 @@ function renderIcon(buttonAction, actionState) {
 const PageActionsWrapper = styled_components_1.default.div `
   margin-left: auto;
   padding-left: var(--page-actions-padding-left);
+  user-select: none;
   --button-color: var(--page-actions-button-text-color);
 
   .button-group-size-medium .button.button-size-medium {

package/lib/components/Select/Select.js

@@ -55,8 +55,7 @@ function Select(props) {
         return values
             .map((value) => {
             const selectedOption = options.find((option) => option.value === value);
-            return (selectedOption ||
-                (typeof value === 'string' ? { value } : value));
+            return (selectedOption || (typeof value === 'string' ? { value } : value));
         })
             .filter((option) => !!option);
     };

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

@@ -46,7 +46,14 @@ function useActiveSectionId(location, hasOverviewPage = false, withNavbar = true
         if (!dom_1.IS_BROWSER) {
             return;
         }
+        // A one-event scroll jump is read before the section it lands on stops being skipped.
+        const onContentVisibilityChange = (event) => {
+            if ('skipped' in event && event.skipped === false) {
+                scrollListener();
+            }
+        };
         window.addEventListener('scroll', scrollListener, { capture: false });
+        window.addEventListener('contentvisibilityautostatechange', onContentVisibilityChange, true);
         const initialRead = setTimeout(() => {
             scrollListener();
         }, 10);
@@ -54,6 +61,7 @@ function useActiveSectionId(location, hasOverviewPage = false, withNavbar = true
             clearTimeout(initialRead);
             scrollListener.cancel();
             window.removeEventListener('scroll', scrollListener);
+            window.removeEventListener('contentvisibilityautostatechange', onContentVisibilityChange, true);
         };
     }, [location, heightOffset, scrollListener]);
     return itemId;

package/lib/core/hooks/use-focus-trap.js

@@ -2,15 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFocusTrap = useFocusTrap;
 const react_1 = require("react");
+const FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 function useFocusTrap(containerRef) {
     (0, react_1.useEffect)(() => {
+        var _a;
         const trapElement = containerRef.current;
         if (!trapElement)
             return;
-        const focusableElements = trapElement.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-        const firstElement = focusableElements[0];
+        const getFocusableElements = () => trapElement.querySelectorAll(FOCUSABLE_SELECTOR);
         const handleKeyDown = (event) => {
             if (event.key === 'Tab') {
+                const focusableElements = getFocusableElements();
+                const firstElement = focusableElements[0];
                 const lastElement = focusableElements[focusableElements.length - 1];
                 if (event.shiftKey && document.activeElement === firstElement) {
                     lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
@@ -23,9 +26,7 @@ function useFocusTrap(containerRef) {
             }
         };
         trapElement.addEventListener('keydown', handleKeyDown);
-        if (firstElement) {
-            firstElement.focus();
-        }
+        (_a = getFocusableElements()[0]) === null || _a === void 0 ? void 0 : _a.focus();
         return () => {
             trapElement.removeEventListener('keydown', handleKeyDown);
         };

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' | 'docs-mcp-claude' | 'mcp-cursor' | 'mcp-vscode';
+export type PageActionType = 'copy' | 'view' | 'chatgpt' | 'claude' | 'grok' | 'docs-mcp-claude' | 'docs-mcp-vscode' | 'docs-mcp-cursor' | 'copy-mcp-url' | 'mcp-cursor' | 'mcp-vscode';
 export declare function usePageActions(pageSlug: string, mcpUrl?: string, actions?: PageActionType[]): PageAction[];

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

@@ -14,6 +14,8 @@ const react_1 = require("react");
 const CopyIcon_1 = require("../../icons/CopyIcon/CopyIcon");
 const ChatGptIcon_1 = require("../../icons/ChatGptIcon/ChatGptIcon");
 const ClaudeIcon_1 = require("../../icons/ClaudeIcon/ClaudeIcon");
+const GrokIcon_1 = require("../../icons/GrokIcon/GrokIcon");
+const McpIcon_1 = require("../../icons/McpIcon/McpIcon");
 const MarkdownFullIcon_1 = require("../../icons/MarkdownFullIcon/MarkdownFullIcon");
 const VSCodeIcon_1 = require("../../icons/VSCodeIcon/VSCodeIcon");
 const CursorIcon_1 = require("../../icons/CursorIcon/CursorIcon");
@@ -31,9 +33,11 @@ const DEFAULT_ENABLED_ACTIONS = [
     'view',
     'chatgpt',
     'claude',
-    'docs-mcp-cursor',
-    'docs-mcp-vscode',
+    'grok',
     'docs-mcp-claude',
+    'docs-mcp-vscode',
+    'docs-mcp-cursor',
+    'copy-mcp-url',
 ];
 function usePageActions(pageSlug, mcpUrl, actions) {
     var _a;
@@ -84,10 +88,32 @@ function usePageActions(pageSlug, mcpUrl, actions) {
             ? (0, urls_1.combineUrls)(origin, pathname, 'index.html.md')
             : (0, urls_1.combineUrls)(origin, (0, urls_1.removeTrailingSlash)(pathname) + '.md');
         const externalAiPrompt = `Read ${mdPageUrl} and answer questions based on the content.`;
+        const createAiPromptAction = (target, iconComponent, texts) => () => {
+            const link = (0, get_ai_prompt_link_1.getAiPromptLink)(target, externalAiPrompt);
+            return Object.assign(Object.assign({}, texts), { iconComponent,
+                link, onClick: () => {
+                    telemetry.sendPageActionsClickedMessage([
+                        Object.assign(Object.assign({}, (0, get_base_data_attributes_1.getBaseDataAttributes)('pageActions', 'button')), { actionType: target }),
+                    ]);
+                    window.location.href = link;
+                } });
+        };
         const actionHandlers = {
             'docs-mcp-cursor': createMCPHandler('cursor', false),
             'docs-mcp-vscode': createMCPHandler('vscode', false),
             'docs-mcp-claude': createMCPHandler('claude', false),
+            'copy-mcp-url': () => ({
+                buttonText: translate('page.actions.connectMcp.copyUrl', 'Copy MCP server URL'),
+                title: translate('page.actions.connectMcp.copyUrl', 'Copy MCP server URL'),
+                description: translate('page.actions.connectMcp.copyUrlDescription', 'Copy the MCP server URL to the clipboard'),
+                iconComponent: McpIcon_1.McpIcon,
+                onClick: () => {
+                    clipboard_service_1.ClipboardService.copyCustom(mcpConfig.serverUrl);
+                    telemetry.sendPageActionsClickedMessage([
+                        Object.assign(Object.assign({}, (0, get_base_data_attributes_1.getBaseDataAttributes)('pageActions', 'button')), { actionType: 'copy-mcp-url' }),
+                    ]);
+                },
+            }),
             'mcp-cursor': createMCPHandler('cursor', true),
             'mcp-vscode': createMCPHandler('vscode', true),
             copy: () => ({
@@ -124,38 +150,21 @@ function usePageActions(pageSlug, mcpUrl, actions) {
                     ]);
                 },
             }),
-            chatgpt: () => {
-                const link = (0, get_ai_prompt_link_1.getAiPromptLink)('chatgpt', externalAiPrompt);
-                return {
-                    buttonText: translate('page.actions.chatGptButtonText', 'Open in ChatGPT'),
-                    title: translate('page.actions.chatGptTitle', 'Open in ChatGPT'),
-                    description: translate('page.actions.chatGptDescription', 'Get insights from ChatGPT'),
-                    iconComponent: ChatGptIcon_1.ChatGptIcon,
-                    link,
-                    onClick: () => {
-                        telemetry.sendPageActionsClickedMessage([
-                            Object.assign(Object.assign({}, (0, get_base_data_attributes_1.getBaseDataAttributes)('pageActions', 'button')), { actionType: 'chatgpt' }),
-                        ]);
-                        window.location.href = link;
-                    },
-                };
-            },
-            claude: () => {
-                const link = (0, get_ai_prompt_link_1.getAiPromptLink)('claude', externalAiPrompt);
-                return {
-                    buttonText: translate('page.actions.claudeButtonText', 'Open in Claude'),
-                    title: translate('page.actions.claudeTitle', 'Open in Claude'),
-                    description: translate('page.actions.claudeDescription', 'Get insights from Claude'),
-                    iconComponent: ClaudeIcon_1.ClaudeIcon,
-                    link,
-                    onClick: () => {
-                        telemetry.sendPageActionsClickedMessage([
-                            Object.assign(Object.assign({}, (0, get_base_data_attributes_1.getBaseDataAttributes)('pageActions', 'button')), { actionType: 'claude' }),
-                        ]);
-                        window.location.href = link;
-                    },
-                };
-            },
+            chatgpt: createAiPromptAction('chatgpt', ChatGptIcon_1.ChatGptIcon, {
+                buttonText: translate('page.actions.chatGptButtonText', 'Open in ChatGPT'),
+                title: translate('page.actions.chatGptTitle', 'Open in ChatGPT'),
+                description: translate('page.actions.chatGptDescription', 'Get insights from ChatGPT'),
+            }),
+            claude: createAiPromptAction('claude', ClaudeIcon_1.ClaudeIcon, {
+                buttonText: translate('page.actions.claudeButtonText', 'Open in Claude'),
+                title: translate('page.actions.claudeTitle', 'Open in Claude'),
+                description: translate('page.actions.claudeDescription', 'Get insights from Claude'),
+            }),
+            grok: createAiPromptAction('grok', GrokIcon_1.GrokIcon, {
+                buttonText: translate('page.actions.grokButtonText', 'Open in Grok'),
+                title: translate('page.actions.grokTitle', 'Open in Grok'),
+                description: translate('page.actions.grokDescription', 'Get insights from Grok'),
+            }),
         };
         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)
             .filter((action) => !shouldHideAction(action, hideActionContext))
@@ -168,6 +177,7 @@ function usePageActions(pageSlug, mcpUrl, actions) {
         isPublic,
         mcpUrl,
         mcpConfig.isMcpDisabled,
+        mcpConfig.serverUrl,
         pageSlug,
         actions,
         translate,
@@ -198,7 +208,7 @@ function shouldHideAction(action, { pageProps, themeConfig, apiDocsExcludeFromSe
     if ((_b = (_a = themeConfig.navigation) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 : _b.hide) {
         return true;
     }
-    const actionDependsOnLlmsTxt = ['view', 'copy', 'chatgpt', 'claude'].includes(action);
+    const actionDependsOnLlmsTxt = ['view', 'copy', 'chatgpt', 'claude', 'grok'].includes(action);
     if (actionDependsOnLlmsTxt) {
         // Can't use any actions if search is globally disabled (markdown files are not generated)
         if ((_c = themeConfig.search) === null || _c === void 0 ? void 0 : _c.hide) {
@@ -219,10 +229,12 @@ function shouldHideActionByType(action, { isPublic, mcpUrl, isMcpDisabled, }) {
     switch (action) {
         case 'chatgpt':
         case 'claude':
+        case 'grok':
             return !isPublic;
         case 'docs-mcp-cursor':
         case 'docs-mcp-vscode':
         case 'docs-mcp-claude':
+        case 'copy-mcp-url':
             return Boolean(mcpUrl) || isMcpDisabled;
         case 'mcp-cursor':
         case 'mcp-vscode':