@redocly/theme 0.70.0-next.6 → 0.70.0-next.8

package/lib/components/Buttons/ConnectMCPButton.js

@@ -34,6 +34,13 @@ const MENU_OPTIONS = {
         descriptionTranslationKey: 'page.actions.connectMcp.vscodeDescription',
         descriptionDefault: 'Install MCP server on VS Code',
     },
+    claude: {
+        icon: ClaudeIcon_1.ClaudeIcon,
+        titleTranslationKey: 'page.actions.connectMcp.claude',
+        titleDefault: 'Connect to Claude',
+        descriptionTranslationKey: 'page.actions.connectMcp.claudeDescription',
+        descriptionDefault: 'Add MCP server to your Claude account',
+    },
     'claude-code': {
         icon: ClaudeIcon_1.ClaudeIcon,
         titleTranslationKey: 'page.actions.connectMcp.claudeCode',
@@ -70,7 +77,7 @@ function ConnectMCPButton({ placement = 'bottom', alignment = 'end', options = c
     const PrimaryIcon = primaryOption.icon;
     const showPrimaryCopied = copiedOption === primaryOption.key;
     return (react_1.default.createElement(ConnectMCPButtonWrapper, { "data-component-name": "Buttons/ConnectMCPButton" }, react_1.default.createElement(SplitButton_1.SplitButton, { variant: "secondary", placement: placement, alignment: alignment, closeOnSelect: false, toggleAriaLabel: translate('page.actions.connectMcp.moreOptions', 'More options'), button: react_1.default.createElement(Button_1.Button, { variant: "secondary", icon: showPrimaryCopied ? (react_1.default.createElement(CheckmarkFilledIcon_1.CheckmarkFilledIcon, { color: "var(--color-success-base)" })) : (react_1.default.createElement(PrimaryIcon, null)), onClick: () => handleAction(primaryOption.key) }, translate(primaryOption.titleTranslationKey, primaryOption.titleDefault)) }, dropdownOptions.length > 0
-        ? ({ close }) => (react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, dropdownOptions.map((option) => {
+        ? ({ close }) => (react_1.default.createElement(StyledDropdownMenu, null, dropdownOptions.map((option) => {
             const Icon = option.icon;
             const showCheckmark = copiedOption === option.key;
             return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: option.key, onAction: () => {
@@ -82,6 +89,9 @@ function ConnectMCPButton({ placement = 'bottom', alignment = 'end', options = c
         })))
         : null)));
 }
+const StyledDropdownMenu = (0, styled_components_1.default)(DropdownMenu_1.DropdownMenu) `
+  --dropdown-menu-max-height: var(--connect-mcp-button-dropdown-max-height);
+`;
 const ConnectMCPButtonWrapper = styled_components_1.default.div `
   display: inline-block;
   position: relative;

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

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

package/lib/components/Buttons/variables.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.aiAssistantButton = void 0;
+exports.connectMcpButton = exports.aiAssistantButton = void 0;
 const styled_components_1 = require("styled-components");
 /* eslint-disable theme/no-raw-colors-in-styles */
 exports.aiAssistantButton = (0, styled_components_1.css) `
@@ -52,4 +52,7 @@ exports.aiAssistantButton = (0, styled_components_1.css) `
   // @tokens End
 `;
 /* eslint-enable theme/no-raw-colors-in-styles */
+exports.connectMcpButton = (0, styled_components_1.css) `
+  --connect-mcp-button-dropdown-max-height: fit-content;
+`;
 //# sourceMappingURL=variables.js.map

package/lib/components/Catalog/Catalog.js

@@ -94,9 +94,9 @@ function Catalog(props) {
                     react_1.default.createElement(CatalogPageContentWrapper, null,
                         react_1.default.createElement(CatalogTitleWrapper, null,
                             react_1.default.createElement(CatalogTitle, { "data-translation-key": catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.titleTranslationKey },
-                                (catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.titleTranslationKey)
+                                react_1.default.createElement("span", null, (catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.titleTranslationKey)
                                     ? translate(catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.titleTranslationKey)
-                                    : catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.slug,
+                                    : catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.slug),
                                 ' '),
                             react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, entitiesCounter)),
                         react_1.default.createElement(CatalogDescription, { "data-translation-key": catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.descriptionTranslationKey }, translate(catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.descriptionTranslationKey)),

package/lib/components/JsonViewer/Helpers.js

@@ -43,10 +43,10 @@ function JsonValue(props) {
     const valueElement = Array.isArray(value)
         ? value.map((item, index) => (react_1.default.createElement(react_1.default.Fragment, { key: index },
             react_1.default.createElement(JsonValue, { value: item, level: level + 1, path: `${path}/${index}`, standalone: true, fold: fold, maxStringLength: maxStringLength }),
-            index < value.length - 1 ? ',\n' : null)))
+            index < value.length - 1 ? react_1.default.createElement("span", null, ',\n') : null)))
         : keys.map((key, index) => (react_1.default.createElement(react_1.default.Fragment, { key: key },
             react_1.default.createElement(JsonKeyValue, { name: key, value: value[key], level: level + 1, path: `${path}/${key}`, fold: fold, maxStringLength: maxStringLength }),
-            index < keys.length - 1 ? ',\n' : null)));
+            index < keys.length - 1 ? react_1.default.createElement("span", null, ',\n') : null)));
     const openingPunctuationElement = standalone ? (react_1.default.createElement(react_1.default.Fragment, null,
         indent,
         level > 0 ? (react_1.default.createElement(ExpandIcon, { onClick: () => fold.setExpanded(path, !isExpanded), isExpanded: isExpanded })) : null,
@@ -79,7 +79,7 @@ function JsonKeyValue(props) {
         indent,
         isFoldable(value) ? (react_1.default.createElement(ExpandIcon, { onClick: () => fold.setExpanded(path, !isExpanded), isExpanded: isExpanded })) : null,
         react_1.default.createElement("span", { className: "property token string" }, `"${name}"`),
-        ": ",
+        react_1.default.createElement("span", null, ': '),
         valueElement));
 }
 function TruncatedStringValue({ value, maxStringLength, }) {

package/lib/components/MCP/McpConnectionTabs.js

@@ -41,6 +41,7 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const utils_1 = require("../../core/utils");
+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");
@@ -111,9 +112,11 @@ function renderTabContent(option, connection, translate, snippetHeader) {
                         react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "shell", source: (0, utils_1.generateClaudeCodeCommand)(connection), header: snippetHeader(option, 'claude-code'), wrapContents: true }))),
                 },
                 {
-                    headline: translate('page.mcpNotAllowed.snippets.claudeDesktop.headline', 'Claude Desktop'),
+                    headline: translate('page.mcpNotAllowed.snippets.claudeDesktop.headline', 'Claude app'),
                     content: (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(TabHint, null, translate('page.mcpNotAllowed.snippets.claudeDesktop.instruction', 'Open Customize → Connectors → Add custom connector and paste this server URL:')),
+                        react_1.default.createElement(TabHint, null, translate('page.mcpNotAllowed.snippets.claudeDesktop.accountHint', 'Claude adds the connector to your account and syncs it between Claude on the web and Claude Desktop.')),
+                        react_1.default.createElement(ConnectButton, { variant: "secondary", icon: react_1.default.createElement(ClaudeIcon_1.ClaudeIcon, null), onClick: () => window.open((0, utils_1.generateMCPDeepLink)('claude', connection), '_blank') }, translate('page.actions.connectMcp.claude', 'Connect to Claude')),
+                        react_1.default.createElement(TabHint, null, translate('page.mcpNotAllowed.snippets.claudeDesktop.instruction', 'Or open Customize → Connectors → Add custom connector and paste this server URL:')),
                         react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "text", source: connection.url, header: snippetHeader(option, 'claude-desktop') }))),
                 },
             ]);
@@ -154,6 +157,10 @@ const McpConnectionTabsWrapper = styled_components_1.default.div `
     padding-right: var(--page-mcp-405-snippets-code-padding-right);
   }
 `;
+const ConnectButton = (0, styled_components_1.default)(Button_1.Button) `
+  align-self: flex-start;
+  margin-bottom: var(--spacing-sm);
+`;
 const TabHint = styled_components_1.default.p `
   margin: 0 0 var(--spacing-xs);
   color: var(--page-mcp-405-snippets-hint-text-color);

package/lib/components/Portal/Portal.js

@@ -1,14 +1,46 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Portal = Portal;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const react_dom_1 = require("react-dom");
 const utils_1 = require("../../core/utils");
+const PortalContainerContext_1 = require("../../core/contexts/PortalContainerContext");
 function Portal({ children, mountId = 'root', }) {
-    const mount = utils_1.IS_BROWSER ? document.getElementById(mountId) || document.body : null;
+    const container = (0, react_1.useContext)(PortalContainerContext_1.PortalContainerContext);
+    const mount = utils_1.IS_BROWSER ? container || document.getElementById(mountId) || document.body : null;
     if (!mount) {
         return react_1.default.createElement(react_1.default.Fragment, null, children);
     }

package/lib/components/Search/SearchAiActionButtons.js

@@ -13,11 +13,16 @@ const ThumbUpFilledIcon_1 = require("../../icons/ThumbUpFilledIcon/ThumbUpFilled
 const ThumbDownIcon_1 = require("../../icons/ThumbDownIcon/ThumbDownIcon");
 const ThumbDownFilledIcon_1 = require("../../icons/ThumbDownFilledIcon/ThumbDownFilledIcon");
 const CopyButton_1 = require("../../components/Buttons/CopyButton");
+const Tooltip_1 = require("../../components/Tooltip/Tooltip");
+const hooks_1 = require("../../core/hooks");
 function SearchAiActionButtons({ content, className, feedback, onFeedback, disabled, }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     return (react_1.default.createElement(ActionButtonsWrapper, { className: className, "data-component-name": "Search/SearchAiActionButtons" },
-        react_1.default.createElement(CopyButton_1.CopyButton, { data: content }),
-        react_1.default.createElement(FeedbackButton, { variant: "text", size: "small", icon: feedback === types_1.FeedbackType.Like ? react_1.default.createElement(ThumbUpFilledIcon_1.ThumbUpFilledIcon, null) : react_1.default.createElement(ThumbUpIcon_1.ThumbUpIcon, null), onClick: () => !disabled && onFeedback(types_1.FeedbackType.Like), extraClass: feedback === types_1.FeedbackType.Like ? 'active' : '', "aria-label": "Like this response", disabled: disabled }),
-        react_1.default.createElement(FeedbackButton, { variant: "text", size: "small", icon: feedback === types_1.FeedbackType.Dislike ? react_1.default.createElement(ThumbDownFilledIcon_1.ThumbDownFilledIcon, null) : react_1.default.createElement(ThumbDownIcon_1.ThumbDownIcon, null), onClick: () => !disabled && onFeedback(types_1.FeedbackType.Dislike), extraClass: feedback === types_1.FeedbackType.Dislike ? 'active' : '', "aria-label": "Dislike this response", disabled: disabled })));
+        react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('search.ai.actions.copy', 'Copy the response'), placement: "top" },
+            react_1.default.createElement(CopyButton_1.CopyButton, { data: content })),
+        react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('search.ai.actions.like', 'Like the response'), placement: "top" }, react_1.default.createElement(FeedbackButton, { variant: "text", size: "small", icon: feedback === types_1.FeedbackType.Like ? react_1.default.createElement(ThumbUpFilledIcon_1.ThumbUpFilledIcon, null) : react_1.default.createElement(ThumbUpIcon_1.ThumbUpIcon, null), onClick: () => !disabled && onFeedback(types_1.FeedbackType.Like), extraClass: feedback === types_1.FeedbackType.Like ? 'active' : '', "aria-label": "Like this response", disabled: disabled })),
+        react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('search.ai.actions.dislike', 'Dislike the response'), placement: "top" }, react_1.default.createElement(FeedbackButton, { variant: "text", size: "small", icon: feedback === types_1.FeedbackType.Dislike ? react_1.default.createElement(ThumbDownFilledIcon_1.ThumbDownFilledIcon, null) : react_1.default.createElement(ThumbDownIcon_1.ThumbDownIcon, null), onClick: () => !disabled && onFeedback(types_1.FeedbackType.Dislike), extraClass: feedback === types_1.FeedbackType.Dislike ? 'active' : '', "aria-label": "Dislike this response", disabled: disabled }))));
 }
 const ActionButtonsWrapper = styled_components_1.default.div `
   display: flex;

package/lib/components/Search/SearchDialog.js

@@ -76,6 +76,16 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
     const autoSearchDisabled = mode !== 'search';
     const { query, setQuery, filter, setFilter, items, isSearchLoading, facets, groupCounts, setLoadMore, advancedSearch, askAi, groupField, searchError, retrySearch, } = useSearch(product === null || product === void 0 ? void 0 : product.name, autoSearchDisabled);
     const { isFilterOpen, onFilterToggle, onFilterChange, onFilterReset, onFacetReset, onQuickFilterReset, } = (0, hooks_1.useSearchFilter)(filter, setFilter);
+    (0, hooks_1.usePersistedQuickFilter)({
+        filter,
+        setFilter,
+        facets,
+        groupField,
+        query,
+        isSearchLoading,
+        searchError,
+        enabled: initialMode === 'search',
+    });
     const { addSearchHistoryItem } = (0, hooks_1.useRecentSearches)();
     const aiSearch = useAiSearch({ filter: filter, product: product === null || product === void 0 ? void 0 : product.name });
     (0, hooks_1.useModalScrollLock)(true);

package/lib/components/Search/SearchItem.js

@@ -76,7 +76,7 @@ function SearchItem({ onClick, item, className, product, innerRef, }) {
                     product.name)),
                 document.httpMethod ? (react_1.default.createElement(SearchItemOperation, null,
                     react_1.default.createElement(SearchItemOperationTag, { color: httpColor }, document.httpMethod.toUpperCase()),
-                    highlight.httpPath ? (0, SearchHighlight_1.searchHighlight)(highlight.httpPath) : document.httpPath)) : null,
+                    react_1.default.createElement("span", null, highlight.httpPath ? (0, SearchHighlight_1.searchHighlight)(highlight.httpPath) : document.httpPath))) : null,
                 react_1.default.createElement(SearchItemTitleWrapper, null,
                     react_1.default.createElement(SearchItemTitle, null, highlight.title ? (0, SearchHighlight_1.searchHighlight)(highlight.title) : document.title),
                     document.deprecated ? (react_1.default.createElement(SearchItemBadge, { deprecated: true }, translate('search.searchItem.deprecated', 'Deprecated'))) : null,

package/lib/components/Search/SearchTrigger.js

@@ -32,18 +32,17 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchTrigger = SearchTrigger;
 const React = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_components_1 = __importStar(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const Button_1 = require("../../components/Button/Button");
 const SearchIcon_1 = require("../../icons/SearchIcon/SearchIcon");
 const utils_1 = require("../../core/utils");
 const constants_1 = require("../../core/constants");
+const MAC_SHORTCUT_LABEL = '⌘K';
+const SHORTCUT_LABEL = 'Ctrl+K';
 function SearchTrigger({ onClick, className }) {
     var _a;
     var _b;
@@ -61,8 +60,8 @@ function SearchTrigger({ onClick, className }) {
         }
     }
     mainShortcutKey = mainShortcutKey === null || mainShortcutKey === void 0 ? void 0 : mainShortcutKey.toUpperCase();
-    // A page can be cached and served to every platform, so the server renders a hidden
-    // placeholder and the browser picks the label after hydration.
+    // A page can be cached and served to every platform, so the server renders an empty
+    // slot and the browser picks the label after hydration.
     const [isMac, setIsMac] = React.useState(undefined);
     React.useEffect(() => setIsMac((0, utils_1.getUserAgent)().includes('Mac')), []);
     return (React.createElement(SearchTriggerWrapper, { onClick: onClick, className: className, "data-component-name": "Search/SearchTrigger" },
@@ -70,7 +69,7 @@ function SearchTrigger({ onClick, className }) {
         React.createElement(SearchTriggerInput, { "data-testid": "search-trigger-input", "data-translation-key": "search.navbar.label" },
             React.createElement(SearchIcon_1.SearchIcon, null),
             translate('search.navbar.label', 'Search'),
-            mainShortcutKey === constants_1.DEFAULT_KEYBOARD_SHORTCUTS ? (React.createElement(SearchTriggerShortcut, { $isPending: isMac === undefined }, isMac ? '⌘K' : 'Ctrl+K')) : (React.createElement("span", null, mainShortcutKey)))));
+            mainShortcutKey === constants_1.DEFAULT_KEYBOARD_SHORTCUTS ? (React.createElement(SearchTriggerShortcut, null, isMac === undefined ? null : (React.createElement(SearchTriggerShortcutLabel, null, isMac ? MAC_SHORTCUT_LABEL : SHORTCUT_LABEL)))) : (React.createElement("span", null, mainShortcutKey)))));
 }
 const SearchTriggerWrapper = styled_components_1.default.div `
   color: var(--search-trigger-color);
@@ -88,8 +87,34 @@ const SearchTriggerButton = (0, styled_components_1.default)(Button_1.Button) `
     display: none;
   }
 `;
+// The hidden copy of the wider label keeps the slot the same width before and after
+// hydration on every platform, so the trigger does not shift when the label appears.
 const SearchTriggerShortcut = styled_components_1.default.span `
-  visibility: ${({ $isPending }) => ($isPending ? 'hidden' : 'visible')};
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-end;
+
+  &::after {
+    content: '${SHORTCUT_LABEL}';
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+  }
+`;
+const shortcutAppear = (0, styled_components_1.keyframes) `
+  from {
+    opacity: 0;
+    filter: blur(2px);
+    transform: translateY(3px);
+  }
+`;
+const SearchTriggerShortcutLabel = styled_components_1.default.span `
+  animation: ${shortcutAppear} var(--search-trigger-shortcut-appear-duration)
+    var(--search-trigger-shortcut-appear-easing);
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
 `;
 const SearchTriggerInput = styled_components_1.default.div `
   display: none;

package/lib/components/Search/variables.js

@@ -146,6 +146,8 @@ exports.search = (0, styled_components_1.css) `
   --search-trigger-bg-color: var(--navbar-bg-color);
   --search-trigger-icon-size: 16px;
   --search-trigger-line-height: var(--line-height-base);
+  --search-trigger-shortcut-appear-duration: 300ms;
+  --search-trigger-shortcut-appear-easing: ease-out;
 
   /**
   * @tokens AI Search

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

@@ -1,5 +1,5 @@
 export declare const DEFAULT_MCP_SERVER_NAME = "mcp-server";
 export declare const MCP_ROUTE = "/mcp";
 export declare const PUBLIC_MCP_ROUTE = "/mcp-public";
-export declare const MCP_OPTIONS: readonly ['cursor', 'vscode', 'claude-code', 'codex', 'copy'];
-export declare const DEFAULT_MCP_OPTIONS: ("claude-code" | "codex" | "copy" | "cursor" | "vscode")[];
+export declare const MCP_OPTIONS: readonly ['cursor', 'vscode', 'claude', 'claude-code', 'codex', 'copy'];
+export declare const DEFAULT_MCP_OPTIONS: ("claude" | "claude-code" | "codex" | "copy" | "cursor" | "vscode")[];

package/lib/core/constants/mcp.js

@@ -4,6 +4,6 @@ exports.DEFAULT_MCP_OPTIONS = exports.MCP_OPTIONS = exports.PUBLIC_MCP_ROUTE = e
 exports.DEFAULT_MCP_SERVER_NAME = 'mcp-server';
 exports.MCP_ROUTE = '/mcp';
 exports.PUBLIC_MCP_ROUTE = '/mcp-public';
-exports.MCP_OPTIONS = ['cursor', 'vscode', 'claude-code', 'codex', 'copy'];
+exports.MCP_OPTIONS = ['cursor', 'vscode', 'claude', 'claude-code', 'codex', 'copy'];
 exports.DEFAULT_MCP_OPTIONS = [...exports.MCP_OPTIONS];
 //# sourceMappingURL=mcp.js.map

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

@@ -0,0 +1,2 @@
+/** Where theme portals mount; set it inside a shadow root (the AI assistant web component), else `document.body`. */
+export declare const PortalContainerContext: import("react").Context<HTMLElement | null>;

package/lib/core/contexts/PortalContainerContext.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PortalContainerContext = void 0;
+const react_1 = require("react");
+/** Where theme portals mount; set it inside a shadow root (the AI assistant web component), else `document.body`. */
+exports.PortalContainerContext = (0, react_1.createContext)(null);
+//# sourceMappingURL=PortalContainerContext.js.map

package/lib/core/hooks/code-walkthrough/use-code-panel.d.ts

@@ -1,4 +1,4 @@
-import type { CodeWalkthroughFile } from '@redocly/config';
+import type { CodeWalkthroughFile } from '../../../core/types';
 export declare function useCodePanel(files: CodeWalkthroughFile[]): {
     readonly activeFile: CodeWalkthroughFile;
     readonly handleTabSwitch: (name: string) => void;

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-controls.d.ts

@@ -1,4 +1,4 @@
-import type { CodeWalkthroughFile, CodeWalkthroughFilter, InputsMarkdocAttr, TogglesMarkdocAttr, CodeWalkthroughFilterItem, CodeWalkthroughConditionsObject } from '@redocly/config';
+import type { CodeWalkthroughFile, CodeWalkthroughFilter, InputsMarkdocAttr, TogglesMarkdocAttr, CodeWalkthroughFilterItem, CodeWalkthroughConditionsObject } from '../../../core/types';
 export type ActiveFilter = {
     id: string;
     label?: string;

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-controls.js

@@ -42,7 +42,7 @@ function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
         Object.entries(newState).forEach(([id, control]) => {
             const existingControl = controlsState[id];
             if (existingControl && existingControl.type === control.type) {
-                // @ts-expect-error
+                // @ts-expect-error: TS2322 - the spread loses the link between `type` and `value` in the control union
                 newState[id] = Object.assign(Object.assign({}, control), { value: existingControl.value });
             }
         });

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-steps.d.ts

@@ -1,4 +1,4 @@
-import type { CodeWalkthroughStepAttr } from '@redocly/config';
+import type { CodeWalkthroughStepAttr } from '../../../core/types';
 import type { WalkthroughStepsState } from '../../types/code-walkthrough';
 type CodeWalkthroughStep = CodeWalkthroughStepAttr & {
     compRef?: HTMLElement;

package/lib/core/hooks/code-walkthrough/use-code-walkthrough.d.ts

@@ -1,5 +1,4 @@
-import type { CodeWalkthroughFile, CodeWalkthroughStepAttr, CodeWalkthroughAttr } from '@redocly/config';
-import type { WalkthroughStepsState } from '../../types/code-walkthrough';
+import type { CodeWalkthroughAttr, CodeWalkthroughFile, CodeWalkthroughStepAttr, WalkthroughStepsState } from '../../types/code-walkthrough';
 import { type WalkthroughControlsState } from './use-code-walkthrough-controls';
 export type WalkthroughState = {
     stepsState: WalkthroughStepsState;

package/lib/core/hooks/code-walkthrough/use-renderable-files.d.ts

@@ -1,4 +1,4 @@
-import type { CodeWalkthroughFile } from '@redocly/config';
+import type { CodeWalkthroughFile } from '../../../core/types';
 export type RenderableFile = CodeWalkthroughFile & {
     fileIcon: React.JSX.Element;
     parentFolder: string;

package/lib/core/hooks/index.d.ts

@@ -31,6 +31,7 @@ export * from './search/use-search-dialog';
 export * from './search/use-search-filter';
 export * from './search/use-feedback-tooltip';
 export * from './search/use-search-ai-activity';
+export * from './search/use-persisted-quick-filter';
 export * from './use-controlled-state';
 export * from './use-codeblock-tabs-controls';
 export * from './code-walkthrough/use-code-walkthrough';

package/lib/core/hooks/index.js

@@ -47,6 +47,7 @@ __exportStar(require("./search/use-search-dialog"), exports);
 __exportStar(require("./search/use-search-filter"), exports);
 __exportStar(require("./search/use-feedback-tooltip"), exports);
 __exportStar(require("./search/use-search-ai-activity"), exports);
+__exportStar(require("./search/use-persisted-quick-filter"), exports);
 __exportStar(require("./use-controlled-state"), exports);
 __exportStar(require("./use-codeblock-tabs-controls"), exports);
 __exportStar(require("./code-walkthrough/use-code-walkthrough"), exports);

package/lib/core/hooks/search/use-persisted-quick-filter.d.ts

@@ -0,0 +1,21 @@
+import type { Dispatch, SetStateAction } from 'react';
+import type { SearchFacet, SearchFilterItem } from '../../types/search';
+type UsePersistedQuickFilterOptions = {
+    filter: SearchFilterItem[];
+    setFilter: Dispatch<SetStateAction<SearchFilterItem[]>>;
+    facets: SearchFacet[];
+    groupField: string;
+    query: string;
+    isSearchLoading: boolean;
+    searchError: string | null;
+    enabled?: boolean;
+};
+/**
+ * Remembers the quick filter on `groupField` for the browser tab and restores it on mount unless
+ * one is already selected. Restored values are dropped once known not to exist: absent from the
+ * full value list, or from the `groupField` facet left by the first search that finishes without
+ * error on an empty query (the restored value is that search's filter, so a value without
+ * documents is not counted). Does nothing while `enabled` is false.
+ */
+export declare function usePersistedQuickFilter({ filter, setFilter, facets, groupField, query, isSearchLoading, searchError, enabled, }: UsePersistedQuickFilterOptions): void;
+export {};

package/lib/core/hooks/search/use-persisted-quick-filter.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePersistedQuickFilter = usePersistedQuickFilter;
+const react_1 = require("react");
+const use_store_1 = require("../use-store");
+const quickFilterStore = (0, use_store_1.createStore)({
+    storageKey: 'searchQuickFilter',
+    storageType: 'sessionStorage',
+});
+const findQuickFilter = (filter) => filter.find((item) => item.isQuickFilter);
+const withQuickFilter = (filter, quickFilter) => [
+    ...filter.filter((item) => !item.isQuickFilter),
+    ...(quickFilter.values.length ? [Object.assign(Object.assign({}, quickFilter), { isQuickFilter: true })] : []),
+];
+const groupFacetValues = (facets, field) => {
+    var _a;
+    const facet = facets.find((item) => item.field === field);
+    const values = (_a = facet === null || facet === void 0 ? void 0 : facet.values) !== null && _a !== void 0 ? _a : [];
+    return {
+        present: facet !== undefined,
+        values: values.map((item) => (typeof item === 'string' ? item : item.value)),
+        counted: values.some((item) => typeof item !== 'string' && item.isCounterVisible),
+    };
+};
+const isRestorable = (stored, groupField) => !!stored &&
+    stored.field === groupField &&
+    Array.isArray(stored.values) &&
+    stored.values.length > 0 &&
+    stored.values.every((value) => typeof value === 'string');
+/**
+ * Remembers the quick filter on `groupField` for the browser tab and restores it on mount unless
+ * one is already selected. Restored values are dropped once known not to exist: absent from the
+ * full value list, or from the `groupField` facet left by the first search that finishes without
+ * error on an empty query (the restored value is that search's filter, so a value without
+ * documents is not counted). Does nothing while `enabled` is false.
+ */
+function usePersistedQuickFilter({ filter, setFilter, facets, groupField, query, isSearchLoading, searchError, enabled = true, }) {
+    const [stored, setStored] = (0, use_store_1.useStore)(quickFilterStore, null);
+    const [initial] = (0, react_1.useState)(() => enabled && isRestorable(stored, groupField) && !findQuickFilter(filter) ? stored.values : null);
+    const phaseRef = (0, react_1.useRef)(initial ? 'restoring' : 'done');
+    const searchedRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (!initial)
+            return;
+        // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent -- the filter state belongs to the product's `useSearch` and starts empty on every mount
+        setFilter((current) => withQuickFilter(current, { field: groupField, values: initial }));
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- applies only to the initial state
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!enabled)
+            return;
+        const quickFilter = findQuickFilter(filter);
+        // The commit that starts the restore still sees the empty initial filter.
+        if (phaseRef.current === 'restoring') {
+            if (!quickFilter)
+                return;
+            phaseRef.current = 'validating';
+        }
+        if (phaseRef.current === 'validating' && initial) {
+            if (isSearchLoading)
+                searchedRef.current = true;
+            const settled = searchedRef.current && !isSearchLoading && !searchError && !query.trim();
+            const { present, values: known, counted } = groupFacetValues(facets, groupField);
+            if ((known.length && !counted) || (settled && present)) {
+                phaseRef.current = 'done';
+                const values = quickFilter === null || quickFilter === void 0 ? void 0 : quickFilter.values.filter((value) => known.includes(value) || !initial.includes(value));
+                if (quickFilter && values && values.length !== quickFilter.values.length) {
+                    // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent -- the facets arrive after the restore
+                    setFilter((current) => withQuickFilter(current, { field: groupField, values }));
+                    return;
+                }
+            }
+        }
+        const next = quickFilter ? { field: quickFilter.field, values: quickFilter.values } : null;
+        if (JSON.stringify(next) !== JSON.stringify(stored)) {
+            setStored(next);
+        }
+    }, [
+        enabled,
+        filter,
+        facets,
+        groupField,
+        query,
+        isSearchLoading,
+        searchError,
+        initial,
+        stored,
+        setFilter,
+        setStored,
+    ]);
+}
+//# sourceMappingURL=use-persisted-quick-filter.js.map

package/lib/core/hooks/use-connect-mcp-button.js

@@ -41,6 +41,7 @@ function useConnectMCPButton({ options = mcp_1.DEFAULT_MCP_OPTIONS, } = {}) {
         const urlMap = {
             cursor: cursorUrl,
             vscode: vscodeUrl,
+            claude: (0, mcp_2.generateMCPDeepLink)('claude', connection),
         };
         window.open(urlMap[action], '_blank');
     }, [cursorUrl, vscodeUrl, serverUrl, serverName, resetCopied, telemetry]);

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-claude' | 'mcp-cursor' | 'mcp-vscode';
 export declare function usePageActions(pageSlug: string, mcpUrl?: string, actions?: PageActionType[]): PageAction[];

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

@@ -32,6 +32,7 @@ const DEFAULT_ENABLED_ACTIONS = [
     'claude',
     'docs-mcp-cursor',
     'docs-mcp-vscode',
+    'docs-mcp-claude',
 ];
 function usePageActions(pageSlug, mcpUrl, actions) {
     var _a;
@@ -84,6 +85,7 @@ function usePageActions(pageSlug, mcpUrl, actions) {
         const actionHandlers = {
             'docs-mcp-cursor': createMCPHandler('cursor', false),
             'docs-mcp-vscode': createMCPHandler('vscode', false),
+            'docs-mcp-claude': createMCPHandler('claude', false),
             'mcp-cursor': createMCPHandler('cursor', true),
             'mcp-vscode': createMCPHandler('vscode', true),
             copy: () => ({
@@ -189,6 +191,9 @@ function createMCPAction({ clientType, mcpConfig, translate, onClickCallback, })
     if (clientType === 'cursor') {
         return Object.assign(Object.assign({}, sharedProps), { buttonText: translate('page.actions.connectMcp.cursor', 'Connect to Cursor'), title: translate('page.actions.connectMcp.cursor', 'Connect to Cursor'), description: translate('page.actions.connectMcp.cursorDescription', 'Install MCP server on Cursor'), iconComponent: CursorIcon_1.CursorIcon });
     }
+    if (clientType === 'claude') {
+        return Object.assign(Object.assign({}, sharedProps), { buttonText: translate('page.actions.connectMcp.claude', 'Connect to Claude'), title: translate('page.actions.connectMcp.claude', 'Connect to Claude'), description: translate('page.actions.connectMcp.claudeDescription', 'Add MCP server to your Claude account'), iconComponent: ClaudeIcon_1.ClaudeIcon });
+    }
     return Object.assign(Object.assign({}, sharedProps), { buttonText: translate('page.actions.connectMcp.vscode', 'Connect to VS Code'), title: translate('page.actions.connectMcp.vscode', 'Connect to VS Code'), description: translate('page.actions.connectMcp.vscodeDescription', 'Install MCP server on VS Code'), iconComponent: VSCodeIcon_1.VSCodeIcon });
 }
 function shouldHideAction(action, { pageProps, themeConfig, apiDocsExcludeFromSearch, isApiDocsPage, isPublic, mcpUrl, isMcpDisabled, }) {
@@ -221,6 +226,7 @@ function shouldHideActionByType(action, { isPublic, mcpUrl, isMcpDisabled, }) {
             return !isPublic;
         case 'docs-mcp-cursor':
         case 'docs-mcp-vscode':
+        case 'docs-mcp-claude':
             return Boolean(mcpUrl) || isMcpDisabled;
         case 'mcp-cursor':
         case 'mcp-vscode':

package/lib/core/styles/global.js

@@ -1320,6 +1320,7 @@ exports.tokens = (0, styled_components_1.css) `
   ${variables_5.breadcrumbs}
   ${variables_20.button}
   ${variables_21.aiAssistantButton}
+  ${variables_21.connectMcpButton}
   ${variables_43.cards}
   ${variables_8.catalog}
   ${variables_11.catalogClassic}