@redocly/theme 0.62.0 → 0.63.0-next.0

package/lib/components/Badge/Badge.d.ts

@@ -4,5 +4,6 @@ export type BadgeProps = PropsWithChildren<{
     color?: string;
     key?: string;
     className?: string;
+    icon?: string;
 }>;
-export declare function Badge(props: BadgeProps): JSX.Element;
+export declare function Badge({ icon, children, ...props }: BadgeProps): JSX.Element;

package/lib/components/Badge/Badge.js

@@ -32,6 +32,17 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -39,8 +50,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Badge = Badge;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
-function Badge(props) {
-    return react_1.default.createElement(BadgeComponent, Object.assign({}, props, { "data-component-name": "Badge/Badge" }));
+const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
+function Badge(_a) {
+    var { icon, children } = _a, props = __rest(_a, ["icon", "children"]);
+    return (react_1.default.createElement(BadgeComponent, Object.assign({}, props, { "data-component-name": "Badge/Badge" }),
+        icon ? react_1.default.createElement(BadgeIcon, { icon: icon }) : null,
+        children));
 }
 const BadgeComponent = styled_components_1.default.span `
   display: inline-block;
@@ -61,4 +76,11 @@ const BadgeComponent = styled_components_1.default.span `
       border-radius: var(--badge-deprecated-border-radius);
     `}
 `;
+const BadgeIcon = (0, styled_components_1.default)(GenericIcon_1.GenericIcon) `
+  --icon-width: var(--font-size-sm);
+  --icon-height: var(--font-size-sm);
+  margin-right: var(--spacing-xxs);
+  flex-shrink: 0;
+  vertical-align: middle;
+`;
 //# sourceMappingURL=Badge.js.map

package/lib/components/Buttons/AIAssistantButton.js

@@ -105,7 +105,7 @@ function AIAssistantButton() {
 const StyledAIAssistantButton = (0, styled_components_1.default)(Button_1.Button) `
   position: fixed;
   bottom: var(--ai-assistant-button-bottom);
-  right: var(--ai-assistant-button-right);
+  right: calc(var(--ai-assistant-button-right) + var(--modal-scrollbar-width, 0px));
   ${({ $inputType }) => $inputType === 'icon'
     ? `
     border-radius: var(--ai-assistant-button-border-radius-icon);

package/lib/components/Menu/MenuItem.js

@@ -45,10 +45,10 @@ const HttpTag_1 = require("../../components/Tags/HttpTag");
 const constants_1 = require("../../core/constants");
 const utils_1 = require("../../core/utils");
 const ArrowRightIcon_1 = require("../../icons/ArrowRightIcon/ArrowRightIcon");
-const Badge_1 = require("../../components/Badge/Badge");
 const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
+const Tag_1 = require("../../components/Tag/Tag");
 function MenuItem(props) {
-    var _a;
+    var _a, _b;
     const { item, depth, className, onClick } = props;
     const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
@@ -92,9 +92,10 @@ function MenuItem(props) {
         hasChevron ? react_1.default.createElement(ChevronWrapper, null, chevron) : null,
         react_1.default.createElement(MenuItemIcon, { icon: item.icon, srcSet: item.srcSet }),
         react_1.default.createElement(MenuItemLabelTextWrapper, null,
-            react_1.default.createElement(MenuItemLabel, null,
-                react_1.default.createElement("span", null, translate(item.labelTranslationKey, item.label)), (_a = item.badges) === null || _a === void 0 ? void 0 :
-                _a.map(({ name, color }) => (react_1.default.createElement(MenuItemBadge, { color: color, key: name }, name))),
+            react_1.default.createElement(MenuItemLabel, null, (_a = item.badges) === null || _a === void 0 ? void 0 :
+                _a.filter(({ position }) => position === 'before').map(({ name, color, icon }) => (react_1.default.createElement(SidebarTag, { color: isDirectColorValue(color) ? undefined : color, "$bgColor": isDirectColorValue(color) ? color : undefined, key: name, icon: icon && react_1.default.createElement(BadgeIcon, { icon: icon }) }, name))),
+                react_1.default.createElement("span", null, translate(item.labelTranslationKey, item.label)), (_b = item.badges) === null || _b === void 0 ? void 0 :
+                _b.filter(({ position }) => position !== 'before').map(({ name, color, icon }) => (react_1.default.createElement(SidebarTag, { color: isDirectColorValue(color) ? undefined : color, "$bgColor": isDirectColorValue(color) ? color : undefined, key: name, icon: icon && react_1.default.createElement(BadgeIcon, { icon: icon }) }, name))),
                 item.external ? react_1.default.createElement(LaunchIcon_1.LaunchIcon, { size: "var(--menu-item-external-icon-size)" }) : null),
             item.sublabel ? (react_1.default.createElement(MenuItemSubLabel, null, translate(item.subLabelTranslationKey, item.sublabel))) : null),
         isDrilldown ? react_1.default.createElement(ArrowRightIcon_1.ArrowRightIcon, { size: "12px" }) : null,
@@ -104,6 +105,12 @@ function MenuItem(props) {
         isNested ? (react_1.default.createElement(MenuItemNestedWrapper, { depth: depth, ref: nestedMenuRef, style: style }, isExpanded || !canUnmount ? props.children : null)) : null,
         item.separatorLine ? (react_1.default.createElement(MenuItemSeparatorLine, { depth: depth, linePosition: item.linePosition })) : null));
 }
+/* for backward compatibility */
+function isDirectColorValue(color) {
+    if (!color)
+        return false;
+    return color.startsWith('#') || color.startsWith('rgb') || color.startsWith('hsl');
+}
 function generateClassName({ type, item, className, }) {
     const classNames = [className, `menu-item-type-${type}`];
     if (type === constants_1.MenuItemType.Separator) {
@@ -282,15 +289,31 @@ const MenuItemLabel = styled_components_1.default.span `
     margin-right: var(--spacing-xxs);
   }
 `;
-const MenuItemBadge = (0, styled_components_1.default)(Badge_1.Badge) `
+const SidebarTag = (0, styled_components_1.default)(Tag_1.Tag) `
+  ${({ $bgColor }) => $bgColor && `background-color: ${$bgColor};`} /* for backward compatibility */
   margin-left: 0;
-  background-color: ${({ color }) => color || 'var(--color-info-base)'};
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
   padding: 0 var(--spacing-xxs);
-  max-width: 80px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
+  max-width: 90px;
+
+  --tag-padding: 0 var(--spacing-xxs);
+  --tag-content-padding: 0;
+  --tag-font-size: var(--font-size-sm);
+  --tag-line-height: var(--line-height-sm);
+  vertical-align: middle;
+
+  ${Tag_1.ContentWrapper} {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    display: block;
+  }
+`;
+const BadgeIcon = (0, styled_components_1.default)(GenericIcon_1.GenericIcon) `
+  --icon-width: var(--font-size-sm);
+  --icon-height: var(--font-size-sm);
+  margin-right: var(--spacing-xxs);
+  flex-shrink: 0;
 `;
 //# sourceMappingURL=MenuItem.js.map

package/lib/components/Menu/variables.js

@@ -131,12 +131,12 @@ exports.mobileMenu = (0, styled_components_1.css) `
     * @tokens Mobile Menu
     * */
   /* Fallback for older browsers. dvh accounts for dynamic UI elements like mobile address bars */
-  --menu-mobile-height: calc(100vh - var(--navbar-height) - var(--banner-height));
-  --menu-mobile-height: calc(100dvh - var(--navbar-height) - var(--banner-height));
+  --menu-mobile-height: calc(100vh - var(--navbar-height));
+  --menu-mobile-height: calc(100dvh - var(--navbar-height));
   --menu-mobile-width: 100%;
   --menu-mobile-z-index: var(--z-index-raised);
   --menu-mobile-left: 0;
-  --menu-mobile-top: calc(var(--navbar-height) + var(--banner-height));
+  --menu-mobile-top: var(--navbar-height);
   --menu-mobile-transition: 0.5s;
   --menu-mobile-bg: var(--bg-color); // @presenter Color
   --menu-mobile-margin: var(--menu-mobile-items-margin-top) var(--menu-mobile-margin-horizontal) 0 var(--menu-mobile-margin-horizontal);

package/lib/components/PageActions/PageActions.js

@@ -49,6 +49,7 @@ exports.PageActions = PageActions;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const PageActionsMenuItem_1 = require("../../components/PageActions/PageActionsMenuItem");
+const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
 const Link_1 = require("../../components/Link/Link");
 const ButtonGroup_1 = require("../../components/Button/ButtonGroup");
 const Button_1 = require("../../components/Button/Button");
@@ -77,16 +78,18 @@ function PageActions(props) {
             setActionState('idle');
         }, ACTION_DONE_DISPLAY_DURATION);
     });
-    const menuItems = actions.map((action) => ({
-        content: 'link' in action ? (react_1.default.createElement(LinkMenuItem, { to: action.link, external: true },
-            react_1.default.createElement(PageActionsMenuItem_1.PageActionsMenuItem, { pageAction: action }))) : (react_1.default.createElement(PageActionsMenuItem_1.PageActionsMenuItem, { pageAction: action })),
-        onAction: 'onClick' in action ? () => handleActionClick(action) : undefined,
-    }));
-    return (react_1.default.createElement(PageActionsWrapper, null,
+    const menuItems = actions.map((action, index) => {
+        const key = `${action.title}-${index}`;
+        const hasLink = 'link' in action;
+        const content = hasLink ? (react_1.default.createElement(LinkMenuItem, { key: `${key}-link`, to: action.link, tabIndex: -1, external: true },
+            react_1.default.createElement(PageActionsMenuItem_1.PageActionsMenuItem, { pageAction: action }))) : (react_1.default.createElement(PageActionsMenuItem_1.PageActionsMenuItem, { pageAction: action }));
+        return (react_1.default.createElement(StyledDropdownMenuItem, { key: key, onAction: () => handleActionClick(action) }, content));
+    });
+    return (react_1.default.createElement(PageActionsWrapper, { "data-component-name": "PageActions/PageActions" },
         react_1.default.createElement(ButtonGroup_1.ButtonGroup, { variant: "outlined", size: "medium" },
             react_1.default.createElement(Button_1.Button, { icon: renderIcon(buttonAction, actionState), to: 'link' in buttonAction ? buttonAction.link : undefined, external: true, onClick: () => handleActionClick(buttonAction) }, buttonAction.buttonText),
-            actions.length > 1 ? (react_1.default.createElement(Dropdown_1.Dropdown, { withArrow: true, trigger: react_1.default.createElement(Button_1.Button, null), placement: "bottom", alignment: "end" },
-                react_1.default.createElement(StyledDropdownMenu, { items: menuItems }))) : null)));
+            actions.length > 1 ? (react_1.default.createElement(StyledDropdown, { withArrow: true, trigger: react_1.default.createElement(Button_1.Button, null), placement: "bottom", alignment: "end" },
+                react_1.default.createElement(StyledDropdownMenu, null, menuItems))) : null)));
 }
 function renderIcon(buttonAction, actionState) {
     switch (actionState) {
@@ -111,7 +114,21 @@ const LinkMenuItem = (0, styled_components_1.default)(Link_1.Link) `
   text-decoration: none;
   --link-decoration-hover: none;
 `;
+const StyledDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
+  z-index: calc(var(--z-index-raised) - 1);
+`;
 const StyledDropdownMenu = (0, styled_components_1.default)(DropdownMenu_1.DropdownMenu) `
   --dropdown-menu-max-height: var(--page-actions-dropdown-max-height);
 `;
+const StyledDropdownMenuItem = (0, styled_components_1.default)(DropdownMenuItem_1.DropdownMenuItem) `
+  &:has(a) {
+    padding: 0;
+    & > a {
+      display: inline-block;
+      width: 100%;
+      padding: var(--dropdown-menu-item-padding-vertical)
+        var(--dropdown-menu-item-padding-horizontal);
+    }
+  }
+`;
 //# sourceMappingURL=PageActions.js.map

package/lib/components/Search/SearchDialog.js

@@ -74,6 +74,7 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
     const { isFilterOpen, onFilterToggle, onFilterChange, onFilterReset, onFacetReset, onQuickFilterReset, } = (0, hooks_1.useSearchFilter)(filter, setFilter);
     const { addSearchHistoryItem } = (0, hooks_1.useRecentSearches)();
     const aiSearch = useAiSearch({ filter });
+    (0, hooks_1.useModalScrollLock)(true);
     const searchInputRef = (0, react_1.useRef)(null);
     const modalRef = (0, react_1.useRef)(null);
     const [isMobile, setIsMobile] = (0, react_1.useState)(false);

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-page-actions.js

@@ -119,22 +119,25 @@ function usePageActions(pageSlug, mcpUrl, actions) {
                     telemetry.sendPageActionsButtonClickedMessage([
                         Object.assign(Object.assign({}, createPageActionResource(pageSlug, pageUrl)), { action_type: 'view' }),
                     ]);
+                    window.location.href = mdPageUrl;
                 },
             }),
             chatgpt: () => {
                 if (!isPublic) {
                     return null;
                 }
+                const link = getExternalAiPromptLink('https://chat.openai.com', mdPageUrl);
                 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: getExternalAiPromptLink('https://chat.openai.com', mdPageUrl),
+                    link,
                     onClick: () => {
                         telemetry.sendPageActionsButtonClickedMessage([
                             Object.assign(Object.assign({}, createPageActionResource(pageSlug, pageUrl)), { action_type: 'chatgpt' }),
                         ]);
+                        window.location.href = link;
                     },
                 };
             },
@@ -142,16 +145,18 @@ function usePageActions(pageSlug, mcpUrl, actions) {
                 if (!isPublic) {
                     return null;
                 }
+                const link = getExternalAiPromptLink('https://claude.ai/new', mdPageUrl);
                 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: getExternalAiPromptLink('https://claude.ai/new', mdPageUrl),
+                    link,
                     onClick: () => {
                         telemetry.sendPageActionsButtonClickedMessage([
                             Object.assign(Object.assign({}, createPageActionResource(pageSlug, pageUrl)), { action_type: 'claude' }),
                         ]);
+                        window.location.href = link;
                     },
                 };
             },

package/lib/core/styles/global.js

@@ -1090,10 +1090,6 @@ const error = (0, styled_components_1.css) `
   --compilation-error-file-header-margin: 0 0 var(--spacing-xs) 0;
 `;
 const modal = (0, styled_components_1.css) `
-  body:has(.scroll-lock) {
-    overflow: hidden;
-  }
-
   --modal-box-shadow: var(--bg-raised-shadow);
   --modal-bg-color: var(--bg-color);
 `;

package/lib/markdoc/components/CodeWalkthrough/CodeFilters.js

@@ -46,7 +46,7 @@ const FilterWrapper = styled_components_1.default.div `
   padding-bottom: var(--spacing-xs);
   top: var(--navbar-height);
   background-color: var(--bg-color);
-  z-index: 1;
+  z-index: var(--z-index-raised);
   max-width: var(--md-content-max-width);
 `;
 const ButtonsWrapper = styled_components_1.default.div `

package/lib/markdoc/components/Heading/Heading.js

@@ -97,6 +97,12 @@ const HeadingContentWrapper = styled_components_1.default.div `
     align-items: flex-start;
     gap: var(--spacing-sm);
   }
+
+  &:has([data-component-name='PageActions/PageActions']:hover) {
+    && .anchor svg {
+      visibility: hidden;
+    }
+  }
 `;
 const StyledHeadingText = styled_components_1.default.span `
   margin: auto 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.62.0",
+  "version": "0.63.0-next.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -63,7 +63,7 @@
     "vitest": "4.0.10",
     "vitest-when": "0.6.2",
     "webpack": "5.94.0",
-    "@redocly/realm-asyncapi-sdk": "0.8.0"
+    "@redocly/realm-asyncapi-sdk": "0.9.0-next.0"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",
@@ -81,7 +81,7 @@
     "openapi-sampler": "1.6.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.42.0"
+    "@redocly/config": "0.43.0"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Badge/Badge.tsx

@@ -3,15 +3,23 @@ import styled, { css } from 'styled-components';
 
 import type { PropsWithChildren, JSX } from 'react';
 
+import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
+
 export type BadgeProps = PropsWithChildren<{
   deprecated?: boolean;
   color?: string;
   key?: string;
   className?: string;
+  icon?: string;
 }>;
 
-export function Badge(props: BadgeProps): JSX.Element {
-  return <BadgeComponent {...props} data-component-name="Badge/Badge" />;
+export function Badge({ icon, children, ...props }: BadgeProps): JSX.Element {
+  return (
+    <BadgeComponent {...props} data-component-name="Badge/Badge">
+      {icon ? <BadgeIcon icon={icon} /> : null}
+      {children}
+    </BadgeComponent>
+  );
 }
 
 const BadgeComponent = styled.span<BadgeProps>`
@@ -34,3 +42,11 @@ const BadgeComponent = styled.span<BadgeProps>`
       border-radius: var(--badge-deprecated-border-radius);
     `}
 `;
+
+const BadgeIcon = styled(GenericIcon)`
+  --icon-width: var(--font-size-sm);
+  --icon-height: var(--font-size-sm);
+  margin-right: var(--spacing-xxs);
+  flex-shrink: 0;
+  vertical-align: middle;
+`;

package/src/components/Buttons/AIAssistantButton.tsx

@@ -111,7 +111,7 @@ export function AIAssistantButton() {
 const StyledAIAssistantButton = styled(Button)<{ $inputType?: AIAssistantButtonType }>`
   position: fixed;
   bottom: var(--ai-assistant-button-bottom);
-  right: var(--ai-assistant-button-right);
+  right: calc(var(--ai-assistant-button-right) + var(--modal-scrollbar-width, 0px));
   ${({ $inputType }) =>
     $inputType === 'icon'
       ? `

package/src/components/Menu/MenuItem.tsx

@@ -13,8 +13,8 @@ import { HttpTag } from '@redocly/theme/components/Tags/HttpTag';
 import { MenuItemType } from '@redocly/theme/core/constants';
 import { getMenuItemType, getOperationColor } from '@redocly/theme/core/utils';
 import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
-import { Badge } from '@redocly/theme/components/Badge/Badge';
 import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
+import { Tag, ContentWrapper } from '@redocly/theme/components/Tag/Tag';
 
 export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Element {
   const { item, depth, className, onClick } = props;
@@ -95,12 +95,31 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
       <MenuItemIcon icon={item.icon} srcSet={item.srcSet} />
       <MenuItemLabelTextWrapper>
         <MenuItemLabel>
+          {item.badges
+            ?.filter(({ position }) => position === 'before')
+            .map(({ name, color, icon }) => (
+              <SidebarTag
+                color={isDirectColorValue(color) ? undefined : color}
+                $bgColor={isDirectColorValue(color) ? color : undefined}
+                key={name}
+                icon={icon && <BadgeIcon icon={icon} />}
+              >
+                {name}
+              </SidebarTag>
+            ))}
           <span>{translate(item.labelTranslationKey, item.label)}</span>
-          {item.badges?.map(({ name, color }) => (
-            <MenuItemBadge color={color} key={name}>
-              {name}
-            </MenuItemBadge>
-          ))}
+          {item.badges
+            ?.filter(({ position }) => position !== 'before')
+            .map(({ name, color, icon }) => (
+              <SidebarTag
+                color={isDirectColorValue(color) ? undefined : color}
+                $bgColor={isDirectColorValue(color) ? color : undefined}
+                key={name}
+                icon={icon && <BadgeIcon icon={icon} />}
+              >
+                {name}
+              </SidebarTag>
+            ))}
           {item.external ? <LaunchIcon size="var(--menu-item-external-icon-size)" /> : null}
         </MenuItemLabel>
         {item.sublabel ? (
@@ -149,6 +168,12 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
   );
 }
 
+/* for backward compatibility */
+function isDirectColorValue(color?: string) {
+  if (!color) return false;
+  return color.startsWith('#') || color.startsWith('rgb') || color.startsWith('hsl');
+}
+
 function generateClassName({
   type,
   item,
@@ -362,14 +387,31 @@ const MenuItemLabel = styled.span`
   }
 `;
 
-const MenuItemBadge = styled(Badge)<{ color?: string }>`
+const SidebarTag = styled(Tag)<{ $bgColor?: string; icon?: React.ReactNode }>`
+  ${({ $bgColor }) => $bgColor && `background-color: ${$bgColor};`} /* for backward compatibility */
   margin-left: 0;
-  background-color: ${({ color }) => color || 'var(--color-info-base)'};
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
   padding: 0 var(--spacing-xxs);
-  max-width: 80px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
+  max-width: 90px;
+
+  --tag-padding: 0 var(--spacing-xxs);
+  --tag-content-padding: 0;
+  --tag-font-size: var(--font-size-sm);
+  --tag-line-height: var(--line-height-sm);
+  vertical-align: middle;
+
+  ${ContentWrapper} {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    display: block;
+  }
+`;
+
+const BadgeIcon = styled(GenericIcon)`
+  --icon-width: var(--font-size-sm);
+  --icon-height: var(--font-size-sm);
+  margin-right: var(--spacing-xxs);
+  flex-shrink: 0;
 `;

package/src/components/Menu/variables.ts

@@ -130,12 +130,12 @@ export const mobileMenu = css`
     * @tokens Mobile Menu
     * */
   /* Fallback for older browsers. dvh accounts for dynamic UI elements like mobile address bars */
-  --menu-mobile-height: calc(100vh - var(--navbar-height) - var(--banner-height));
-  --menu-mobile-height: calc(100dvh - var(--navbar-height) - var(--banner-height));
+  --menu-mobile-height: calc(100vh - var(--navbar-height));
+  --menu-mobile-height: calc(100dvh - var(--navbar-height));
   --menu-mobile-width: 100%;
   --menu-mobile-z-index: var(--z-index-raised);
   --menu-mobile-left: 0;
-  --menu-mobile-top: calc(var(--navbar-height) + var(--banner-height));
+  --menu-mobile-top: var(--navbar-height);
   --menu-mobile-transition: 0.5s;
   --menu-mobile-bg: var(--bg-color); // @presenter Color
   --menu-mobile-margin: var(--menu-mobile-items-margin-top) var(--menu-mobile-margin-horizontal) 0 var(--menu-mobile-margin-horizontal);

package/src/components/PageActions/PageActions.tsx

@@ -3,9 +3,9 @@ import styled from 'styled-components';
 
 import type { JSX } from 'react';
 import type { PageAction } from '@redocly/theme/core/types';
-import type { DropdownMenuItemProps } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
 
 import { PageActionsMenuItem } from '@redocly/theme/components/PageActions/PageActionsMenuItem';
+import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { ButtonGroup } from '@redocly/theme/components/Button/ButtonGroup';
 import { Button } from '@redocly/theme/components/Button/Button';
@@ -52,20 +52,27 @@ export function PageActions(props: PageActionProps): JSX.Element | null {
     }, ACTION_DONE_DISPLAY_DURATION);
   };
 
-  const menuItems: DropdownMenuItemProps[] = actions.map((action) => ({
-    content:
-      'link' in action ? (
-        <LinkMenuItem to={action.link} external>
-          <PageActionsMenuItem pageAction={action} />
-        </LinkMenuItem>
-      ) : (
+  const menuItems = actions.map((action, index) => {
+    const key = `${action.title}-${index}`;
+    const hasLink = 'link' in action;
+
+    const content = hasLink ? (
+      <LinkMenuItem key={`${key}-link`} to={action.link} tabIndex={-1} external>
         <PageActionsMenuItem pageAction={action} />
-      ),
-    onAction: 'onClick' in action ? () => handleActionClick(action) : undefined,
-  }));
+      </LinkMenuItem>
+    ) : (
+      <PageActionsMenuItem pageAction={action} />
+    );
+
+    return (
+      <StyledDropdownMenuItem key={key} onAction={() => handleActionClick(action)}>
+        {content}
+      </StyledDropdownMenuItem>
+    );
+  });
 
   return (
-    <PageActionsWrapper>
+    <PageActionsWrapper data-component-name="PageActions/PageActions">
       <ButtonGroup variant="outlined" size="medium">
         <Button
           icon={renderIcon(buttonAction, actionState)}
@@ -76,9 +83,9 @@ export function PageActions(props: PageActionProps): JSX.Element | null {
           {buttonAction.buttonText}
         </Button>
         {actions.length > 1 ? (
-          <Dropdown withArrow trigger={<Button />} placement="bottom" alignment="end">
-            <StyledDropdownMenu items={menuItems} />
-          </Dropdown>
+          <StyledDropdown withArrow trigger={<Button />} placement="bottom" alignment="end">
+            <StyledDropdownMenu>{menuItems}</StyledDropdownMenu>
+          </StyledDropdown>
         ) : null}
       </ButtonGroup>
     </PageActionsWrapper>
@@ -111,6 +118,22 @@ const LinkMenuItem = styled(Link)`
   --link-decoration-hover: none;
 `;
 
+const StyledDropdown = styled(Dropdown)`
+  z-index: calc(var(--z-index-raised) - 1);
+`;
+
 const StyledDropdownMenu = styled(DropdownMenu)`
   --dropdown-menu-max-height: var(--page-actions-dropdown-max-height);
 `;
+
+const StyledDropdownMenuItem = styled(DropdownMenuItem)`
+  &:has(a) {
+    padding: 0;
+    & > a {
+      display: inline-block;
+      width: 100%;
+      padding: var(--dropdown-menu-item-padding-vertical)
+        var(--dropdown-menu-item-padding-horizontal);
+    }
+  }
+`;

package/src/components/Search/SearchDialog.tsx

@@ -16,6 +16,7 @@ import {
   useDialogHotKeys,
   useSearchFilter,
   useRecentSearches,
+  useModalScrollLock,
 } from '@redocly/theme/core/hooks';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
@@ -75,7 +76,7 @@ export function SearchDialog({
   } = useSearchFilter(filter, setFilter);
   const { addSearchHistoryItem } = useRecentSearches();
   const aiSearch = useAiSearch({ filter });
-
+  useModalScrollLock(true);
   const searchInputRef = useRef<HTMLInputElement>(null);
   const modalRef = useRef<HTMLDivElement>(null);
 

package/src/core/hooks/use-mcp-config.ts

@@ -4,6 +4,7 @@ import { useThemeHooks } from './use-theme-hooks';
 import { IS_BROWSER } from '../utils/dom';
 import { DEFAULT_MCP_SERVER_NAME } from '../constants';
 import { generateMCPDeepLink } from '../utils/mcp';
+import { withPathPrefix } from '../utils/urls';
 
 export type McpConfig = {
   serverName: string;
@@ -25,7 +26,7 @@ export function useMCPConfig(): McpConfig {
     ? window.location.origin
     : ((globalThis as { SSR_HOSTNAME?: string })['SSR_HOSTNAME'] ?? '');
   const serverName = name || DEFAULT_MCP_SERVER_NAME;
-  const serverUrl = `${origin}/mcp`;
+  const serverUrl = `${origin}${withPathPrefix('/mcp')}`;
   const isMcpDisabled = !enabled || false;
 
   const cursorUrl = useMemo(

package/src/core/hooks/use-modal-scroll-lock.ts

@@ -1,21 +1,40 @@
 import { useEffect } from 'react';
 
-export function useModalScrollLock(isOpen: boolean) {
+export function useModalScrollLock(isOpen: boolean): void {
   useEffect(() => {
-    const originalOverflow = document.body.style.overflow;
-    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+      return;
+    }
+
+    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) {
-      document.body.style.overflow = 'hidden';
-      document.body.style.marginRight = `${scrollbarWidth}px`;
-    } else {
-      document.body.style.overflow = originalOverflow;
-      document.body.style.marginRight = '';
+      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/src/core/hooks/use-page-actions.ts

@@ -158,6 +158,7 @@ export function usePageActions(
               action_type: 'view',
             },
           ]);
+          window.location.href = mdPageUrl;
         },
       }),
 
@@ -165,12 +166,13 @@ export function usePageActions(
         if (!isPublic) {
           return null;
         }
+        const link = getExternalAiPromptLink('https://chat.openai.com', mdPageUrl);
         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,
-          link: getExternalAiPromptLink('https://chat.openai.com', mdPageUrl),
+          link,
           onClick: () => {
             telemetry.sendPageActionsButtonClickedMessage([
               {
@@ -178,6 +180,7 @@ export function usePageActions(
                 action_type: 'chatgpt',
               },
             ]);
+            window.location.href = link;
           },
         };
       },
@@ -186,12 +189,13 @@ export function usePageActions(
         if (!isPublic) {
           return null;
         }
+        const link = getExternalAiPromptLink('https://claude.ai/new', mdPageUrl);
         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,
-          link: getExternalAiPromptLink('https://claude.ai/new', mdPageUrl),
+          link,
           onClick: () => {
             telemetry.sendPageActionsButtonClickedMessage([
               {
@@ -199,6 +203,7 @@ export function usePageActions(
                 action_type: 'claude',
               },
             ]);
+            window.location.href = link;
           },
         };
       },

package/src/core/styles/global.ts

@@ -1104,10 +1104,6 @@ const error = css`
 `;
 
 const modal = css`
-  body:has(.scroll-lock) {
-    overflow: hidden;
-  }
-
   --modal-box-shadow: var(--bg-raised-shadow);
   --modal-bg-color: var(--bg-color);
 `;

package/src/markdoc/components/CodeWalkthrough/CodeFilters.tsx

@@ -78,7 +78,7 @@ const FilterWrapper = styled.div`
   padding-bottom: var(--spacing-xs);
   top: var(--navbar-height);
   background-color: var(--bg-color);
-  z-index: 1;
+  z-index: var(--z-index-raised);
   max-width: var(--md-content-max-width);
 `;
 

package/src/markdoc/components/Heading/Heading.tsx

@@ -102,6 +102,12 @@ const HeadingContentWrapper = styled.div`
     align-items: flex-start;
     gap: var(--spacing-sm);
   }
+
+  &:has([data-component-name='PageActions/PageActions']:hover) {
+    && .anchor svg {
+      visibility: hidden;
+    }
+  }
 `;
 
 const StyledHeadingText = styled.span`