@redocly/theme 0.69.0-next.8 → 0.69.0

package/src/components/MCP/McpConnectionTabs.tsx

@@ -3,6 +3,8 @@ import styled from 'styled-components';
 
 import type { JSX, ReactNode } from 'react';
 import type { TFunction } from '@redocly/theme/core/types';
+import type { AsyncApiRealmUI } from '@redocly/realm-asyncapi-sdk';
+import type { CodeBlockControlsProps } from '@redocly/theme/components/CodeBlock/CodeBlockControls';
 
 import { useMCPConfig, useThemeHooks } from '@redocly/theme/core/hooks';
 import {
@@ -10,6 +12,7 @@ import {
   generateClaudeDesktopConfig,
   generateCodexCommand,
   generateMcpInstallPrompt,
+  getBaseDataAttributes,
 } from '@redocly/theme/core/utils';
 import { CodeBlock } from '@redocly/theme/components/CodeBlock/CodeBlock';
 import { ClaudeIcon } from '@redocly/theme/icons/ClaudeIcon/ClaudeIcon';
@@ -47,15 +50,18 @@ const TAB_LABELS: Record<
 
 type TabClient = { headline: string; content: ReactNode };
 
-// The report control is docs feedback, not useful on the connection page.
-const CODE_BLOCK_HEADER = { controls: { copy: {}, report: { hidden: true } } };
+type SnippetId =
+  AsyncApiRealmUI.EventPayload<'com.redocly.mcpConnectionSnippet.copied'>[0]['snippet'];
+
+type SnippetHeader = (client: McpConnectionTab, snippet: SnippetId) => CodeBlockControlsProps;
 
 export function McpConnectionTabs({
   options = DEFAULT_TAB_OPTIONS,
   className,
 }: McpConnectionTabsProps): JSX.Element | null {
-  const { useTranslate } = useThemeHooks();
+  const { useTranslate, useTelemetry } = useThemeHooks();
   const { translate } = useTranslate();
+  const telemetry = useTelemetry();
   const { serverName, serverUrl, isMcpDisabled } = useMCPConfig();
   // The SSR markup of error pages is cached with the build-time origin, so the
   // tabs remount after hydration to pick up the real browser origin.
@@ -69,6 +75,19 @@ export function McpConnectionTabs({
 
   const connection = { serverName, url: serverUrl };
 
+  const snippetHeader: SnippetHeader = (client, snippet) => ({
+    controls: {
+      copy: {
+        onClick: () =>
+          telemetry.sendMcpConnectionSnippetCopiedMessage([
+            { ...getBaseDataAttributes('mcpConnectionSnippet', 'button'), client, snippet },
+          ]),
+      },
+      // The report control is docs feedback, not useful on the connection page.
+      report: { hidden: true },
+    },
+  });
+
   return (
     <McpConnectionTabsWrapper
       key={hydrated ? 'client' : 'ssr'}
@@ -86,7 +105,7 @@ export function McpConnectionTabs({
               label={translate(translationKey, defaultLabel)}
               icon={TabIcon ? <TabIcon /> : undefined}
             >
-              {renderTabContent(option, connection, translate)}
+              {renderTabContent(option, connection, translate, snippetHeader)}
             </TabItemFragment>
           );
         })}
@@ -99,6 +118,7 @@ function renderTabContent(
   option: McpConnectionTab,
   connection: { serverName: string; url: string },
   translate: TFunction,
+  snippetHeader: SnippetHeader,
 ): ReactNode {
   const terminalHint = (
     <TabHint>
@@ -106,7 +126,9 @@ function renderTabContent(
     </TabHint>
   );
 
-  const urlBlock = <CodeBlock lang="text" source={connection.url} header={CODE_BLOCK_HEADER} />;
+  const urlBlock = (
+    <CodeBlock lang="text" source={connection.url} header={snippetHeader(option, 'chatgpt-app')} />
+  );
 
   const assistantPromptClient: TabClient = {
     headline: translate('page.mcpNotAllowed.snippets.prompt.headline', 'Prompt'),
@@ -121,7 +143,7 @@ function renderTabContent(
         <CodeBlock
           lang="text"
           source={generateMcpInstallPrompt(connection)}
-          header={CODE_BLOCK_HEADER}
+          header={snippetHeader(option, 'prompt')}
           wrapContents
         />
       </>
@@ -139,7 +161,7 @@ function renderTabContent(
               <CodeBlock
                 lang="shell"
                 source={generateClaudeCodeCommand(connection)}
-                header={CODE_BLOCK_HEADER}
+                header={snippetHeader(option, 'claude-code')}
                 wrapContents
               />
             </>
@@ -161,7 +183,7 @@ function renderTabContent(
               <CodeBlock
                 lang="json"
                 source={generateClaudeDesktopConfig(connection)}
-                header={CODE_BLOCK_HEADER}
+                header={snippetHeader(option, 'claude-desktop')}
               />
             </>
           ),
@@ -177,7 +199,7 @@ function renderTabContent(
               <CodeBlock
                 lang="shell"
                 source={generateCodexCommand(connection)}
-                header={CODE_BLOCK_HEADER}
+                header={snippetHeader(option, 'codex')}
                 wrapContents
               />
             </>
@@ -218,7 +240,7 @@ function renderTabContent(
               null,
               2,
             )}
-            header={CODE_BLOCK_HEADER}
+            header={snippetHeader(option, 'json')}
           />
         </>
       );

package/src/components/Markdown/Markdown.tsx

@@ -167,10 +167,8 @@ export const Markdown = styled.main
   }
 
   hr {
-    border-top: 1px solid var(--md-hr-border-color);
-    background-color: var(--md-hr-bg-color);
-    height: var(--md-hr-height);
     margin: var(--md-hr-margin-vertical) 0;
+    border: var(--md-hr-border);
   }
 
   details:not(${ACCORDION_SELECTOR}) {

package/src/components/Markdown/styles/base-table.ts

@@ -45,6 +45,14 @@ export const markdownBaseTableCss = css`
       background-color: var(--md-table-header-bg-color);
     }
 
+    /* hide the header row when every cell is empty; one labelled cell keeps it visible */
+    thead:has(th:empty) {
+      display: none;
+    }
+    thead:has(th:not(:empty)) {
+      display: table-header-group;
+    }
+
     tr {
       background-color: var(--md-table-stripe-bg-color);
     }

package/src/components/Markdown/variables.ts

@@ -60,9 +60,8 @@ export const markdown = css`
   * @tokens Markdown Horizontal Rule
   */
 
-  --md-hr-bg-color: transparent; // @presenter Color
   --md-hr-border-color: var(--border-color-secondary); // @presenter Color
-  --md-hr-height: unset;
+  --md-hr-border: 0.5px solid var(--md-hr-border-color); // @presenter Border
   --md-hr-margin-vertical: 20px; // @presenter Spacing
 
   /**

package/src/components/Panel/Panel.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import type { BaseSyntheticEvent, PropsWithChildren, ReactNode, JSX } from 'react';
@@ -34,6 +34,12 @@ export function Panel({
 }: PropsWithChildren<PanelProps>): JSX.Element {
   const [isExpanded, setExpanded] = useState(expanded);
   const [animate, setAnimate] = useState(false);
+  const [prevExpanded, setPrevExpanded] = useState(expanded);
+
+  if (prevExpanded !== expanded) {
+    setPrevExpanded(expanded);
+    setExpanded(expanded);
+  }
 
   const toggle = ({ target }: BaseSyntheticEvent): void => {
     if (target instanceof HTMLAnchorElement || !isExpandable) return;
@@ -42,8 +48,6 @@ export function Panel({
     onToggle?.(!isExpanded);
   };
 
-  useEffect(() => setExpanded(expanded), [expanded]);
-
   return (
     <PanelWrapper
       className={className}

package/src/components/Search/FilterFields/SearchFilterFieldSelect.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
 import type { SearchFacet, SearchFacetCount, SearchFilterItem } from '@redocly/theme/core/types';
@@ -27,15 +27,8 @@ export function SearchFilterFieldSelect({
   const { useFacetQuery, useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const { searchFacet, setSearchFacet, setSearchFacetQuery } = useFacetQuery(facet.field);
-  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-  const [selectOptions, setSelectOptions] = useState<any[]>([]);
   const isMultiple = facet.type === 'multi-select';
 
-  useEffect(() => {
-    setSelectOptions(getSelectOptions());
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchFacet, facet]);
-
   const onSearch = (value: string | null) => {
     if (value === null) {
       setSearchFacet(null);
@@ -49,38 +42,10 @@ export function SearchFilterFieldSelect({
     }
   };
 
-  const getSelectOptions = () => {
-    return searchFacet
-      ? searchFacet.values.map(facetValueToSelectOption)
-      : facet.values.map(facetValueToSelectOption);
-  };
-
-  const facetValueToSelectOption = (facetValue?: SearchFacetCount | string) => {
-    if (!facetValue) {
-      return { element: null, value: '' };
-    }
-    if (typeof facetValue === 'string') {
-      return {
-        element: (
-          <FilterSelectOptionWrapper>
-            <FilterSelectOptionText>{facetValue}</FilterSelectOptionText>
-          </FilterSelectOptionWrapper>
-        ),
-        value: facetValue,
-      };
-    } else {
-      const { value, count, isCounterVisible } = facetValue as SearchFacetCount;
-      return {
-        element: (
-          <FilterSelectOptionWrapper>
-            <FilterSelectOptionText>{value}</FilterSelectOptionText>
-            {isCounterVisible && <CounterTag>{count}</CounterTag>}
-          </FilterSelectOptionWrapper>
-        ),
-        value: value,
-      };
-    }
-  };
+  const selectOptions = useMemo(
+    () => (searchFacet ? searchFacet.values : facet.values).map(facetValueToSelectOption),
+    [searchFacet, facet],
+  );
 
   return (
     <Select
@@ -113,6 +78,33 @@ export function SearchFilterFieldSelect({
   );
 }
 
+function facetValueToSelectOption(facetValue?: SearchFacetCount | string) {
+  if (!facetValue) {
+    return { element: null, value: '' };
+  }
+  if (typeof facetValue === 'string') {
+    return {
+      element: (
+        <FilterSelectOptionWrapper>
+          <FilterSelectOptionText>{facetValue}</FilterSelectOptionText>
+        </FilterSelectOptionWrapper>
+      ),
+      value: facetValue,
+    };
+  } else {
+    const { value, count, isCounterVisible } = facetValue as SearchFacetCount;
+    return {
+      element: (
+        <FilterSelectOptionWrapper>
+          <FilterSelectOptionText>{value}</FilterSelectOptionText>
+          {isCounterVisible && <CounterTag>{count}</CounterTag>}
+        </FilterSelectOptionWrapper>
+      ),
+      value: value,
+    };
+  }
+}
+
 const FilterSelectOptionWrapper = styled.div`
   width: 100%;
   display: flex;

package/src/components/Search/SearchAiDialog.tsx

@@ -94,6 +94,7 @@ export function SearchAiDialog({
     if (!initialMessage?.trim().length) {
       return;
     }
+    // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent -- appends the initial message into the conversation state lifted to the search root once the dialog mounts
     setConversation((prev) => [
       ...prev,
       { role: AiSearchConversationRole.USER, content: initialMessage },
@@ -105,6 +106,7 @@ export function SearchAiDialog({
       return;
     }
 
+    // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent -- merges the streamed assistant response into the lifted conversation state as chunks arrive
     setConversation((prev) => {
       const lastMessage = prev[prev.length - 1];
       const content: string = response || '';
@@ -146,6 +148,7 @@ export function SearchAiDialog({
 
   useEffect(() => {
     if (error) {
+      // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent -- drops the pending message from the lifted conversation state once the request errors
       setConversation((prev) => prev.slice(0, -1));
     }
   }, [error, setConversation]);

package/src/components/Search/SearchItem.tsx

@@ -114,7 +114,12 @@ export function SearchItem({
             <div>
               {searchHighlight(parameter.place)}
               {` → `}
-              {parameter.path?.length ? searchHighlight(parameter.path?.join(' → ')) + ' → ' : ''}
+              {parameter.path?.length ? (
+                <>
+                  {searchHighlight(parameter.path.join(' → '))}
+                  {` → `}
+                </>
+              ) : null}
               {searchHighlight(parameter.name)}
             </div>
             <div>{searchHighlight(parameter.description)}</div>

package/src/components/Search/variables.ts

@@ -97,6 +97,7 @@ export const search = css`
   --search-message-line-height: var(--line-height-lg); // @presenter LineHeight
   --search-message-text-color: var(--text-color-secondary); // @presenter Color
   --search-message-gap: var(--spacing-md);
+  --search-message-padding: var(--spacing-md);
 
   --search-header-buttons-gap: var(--spacing-sm);
   --search-header-buttons-padding-left: var(--spacing-sm);

package/src/components/Select/Select.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useId, useRef, useState } from 'react';
+import React, { Fragment, useId, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
@@ -68,14 +68,20 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
     setDropdownActive(false);
   });
 
-  useEffect(() => {
+  const [prevOptions, setPrevOptions] = useState(options);
+  const [prevValue, setPrevValue] = useState(value);
+  const [prevMultiple, setPrevMultiple] = useState(multiple);
+
+  if (prevOptions !== options) {
+    setPrevOptions(options);
     setFilteredOptions(options);
-  }, [options]);
+  }
 
-  useEffect(() => {
+  if (prevValue !== value || prevMultiple !== multiple) {
+    setPrevValue(value);
+    setPrevMultiple(multiple);
     setSelectedOptions(getSelectedOptionsFromPropsValue());
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [multiple, value]);
+  }
 
   const changeSearchValue = (newSearchValue: string | null) => {
     if (newSearchValue === searchValue) {

package/src/components/Sidebar/Sidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
@@ -36,11 +36,7 @@ export function Sidebar({
   menuItemsAnimation,
 }: SidebarProps): JSX.Element | null {
   const { isOpen } = useMobileMenu();
-  const [mappedCollapsed, setMappedCollapsed] = React.useState(collapsed);
-
-  useEffect(() => {
-    setMappedCollapsed(collapsed && !isOpen);
-  }, [isOpen, collapsed, setMappedCollapsed]);
+  const mappedCollapsed = collapsed && !isOpen;
 
   const { sidebar } = useThemeConfig();
 

package/src/core/contexts/AccordionGroupContext.tsx

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const AccordionGroupContext = createContext<string | null>(null);

package/src/core/contexts/PageActionsContext.tsx

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+/**
+ * Whether the first heading inside the enclosing `Markdown` mounts the page actions.
+ * Without a provider `Heading` falls back to the page type in the page metadata.
+ */
+export const PageActionsContext = createContext<boolean | null>(null);

package/src/core/contexts/index.ts

@@ -1,7 +1,9 @@
 export * from './ThemeDataContext';
 export * from './MarkdownLinkContext';
+export * from './PageActionsContext';
 export * from './CodeWalkthrough/CodeWalkthroughControlsContext';
 export * from './CodeWalkthrough/CodeWalkthroughStepsContext';
+export * from './AccordionGroupContext';
 export * from './CodeSnippetContext';
 export * from './SearchContext';
 export * from './Toast/ToastContext';

package/src/core/hooks/__mocks__/use-theme-hooks.ts

@@ -18,6 +18,8 @@ export const useThemeHooks = vi.fn(() => ({
   useTelemetry: vi.fn(() => ({
     send: vi.fn(),
     sendCodeSnippetReportedMessage: vi.fn(),
+    sendConnectMcpClickedMessage: vi.fn(),
+    sendMcpConnectionSnippetCopiedMessage: vi.fn(),
     sendPageActionsButtonClickedMessage: vi.fn(),
     sendColorModeSwitchedMessage: vi.fn(),
   })),

package/src/core/hooks/code-walkthrough/use-code-walkthrough-controls.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo, useRef } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router';
 
 import type {
@@ -50,10 +50,6 @@ export function useCodeWalkthroughControls(
   const navigate = useNavigate();
   const searchParams = useMemo(() => new URLSearchParams(location.search), [location.search]);
 
-  const filtersRef = useRef(filters);
-  const inputsRef = useRef(inputs);
-  const togglesRef = useRef(toggles);
-
   const getInitialState = () => {
     const state: CodeWalkthroughControlsState = {};
 
@@ -90,20 +86,11 @@ export function useCodeWalkthroughControls(
 
   const [controlsState, setControlsState] = useState(getInitialState);
 
-  useEffect(() => {
-    const sameProps = [
-      JSON.stringify(filters) === JSON.stringify(filtersRef.current),
-      JSON.stringify(inputs) === JSON.stringify(inputsRef.current),
-      JSON.stringify(toggles) === JSON.stringify(togglesRef.current),
-    ];
-
-    if (sameProps.every(Boolean)) {
-      return;
-    }
+  const controlsKey = JSON.stringify([filters, inputs, toggles]);
+  const [prevControlsKey, setPrevControlsKey] = useState(controlsKey);
 
-    filtersRef.current = filters;
-    inputsRef.current = inputs;
-    togglesRef.current = toggles;
+  if (prevControlsKey !== controlsKey) {
+    setPrevControlsKey(controlsKey);
 
     const newState = getInitialState();
 
@@ -120,8 +107,7 @@ export function useCodeWalkthroughControls(
     });
 
     setControlsState(newState);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filters, inputs, toggles, enableDeepLink]);
+  }
 
   const changeControlState = (id: string, value: string | boolean) => {
     setControlsState((prev) => {

package/src/core/hooks/code-walkthrough/use-code-walkthrough-steps.ts

@@ -95,6 +95,7 @@ export function useCodeWalkthroughSteps({
       });
     }
 
+    // oxlint-disable-next-line react-you-might-not-need-an-effect/no-chain-state-updates -- marker geometry is derived from post-layout measurements (offsetTop, clientHeight, window.innerHeight)
     setMarkers(
       markers.reduce(
         (acc, marker, index) => {
@@ -252,6 +253,7 @@ export function useCodeWalkthroughSteps({
 
     const rootTopOffset = root.current?.offsetTop ?? 0;
     if (!activeStep && rootTopOffset <= options.navbarHeight) {
+      // oxlint-disable-next-line react-you-might-not-need-an-effect/no-derived-state -- seeded from root.current.offsetTop, a post-layout measurement
       setActiveStep(visibleSteps[0]?.id || null);
     }
 

package/src/core/hooks/menu/use-menu-item-expanded.ts

@@ -16,6 +16,7 @@ export function useMenuItemExpanded(item: ItemState): [boolean, Dispatch<SetStat
   const [controlledValue, setControlledValue] = useState(isItemExpanded(item));
 
   useEffect(() => {
+    // oxlint-disable-next-line react-you-might-not-need-an-effect/no-derived-state -- deferred a commit on purpose so CSS transitions still run
     setIsExpanded(controlledValue);
   }, [controlledValue]);
 

package/src/core/hooks/use-active-heading.ts

@@ -286,18 +286,22 @@ export function useActiveHeading(
       return;
     }
     const headers = findHeaders(contentElement);
+    // oxlint-disable-next-line react-you-might-not-need-an-effect/no-chain-state-updates -- headings and the initial active heading come from DOM queries and scroll measurement, available only after layout
     setHeadingElements(headers);
 
     if (headers.length > 0 && !heading) {
       if (isTopOfPage()) {
+        // oxlint-disable-next-line react-you-might-not-need-an-effect/no-chain-state-updates -- see above
         setHeading(headers[0].id);
       } else {
         const totalHeight = scrollY + window.innerHeight;
         if (totalHeight >= document.body.scrollHeight - 10) {
+          // oxlint-disable-next-line react-you-might-not-need-an-effect/no-chain-state-updates -- see above
           setHeading(headers[headers.length - 1]?.id || undefined);
         } else {
           const triggerOffset = getTriggerOffset();
           const activeHeader = findActiveHeaderByVirtualPosition(headers, scrollY, triggerOffset);
+          // oxlint-disable-next-line react-you-might-not-need-an-effect/no-chain-state-updates -- see above
           setHeading(activeHeader.id);
         }
       }

package/src/core/hooks/use-connect-mcp-button.ts

@@ -8,6 +8,7 @@ import { useMCPConfig } from './use-mcp-config';
 import { ClipboardService } from '../utils/clipboard-service';
 import { DEFAULT_MCP_OPTIONS } from '../constants/mcp';
 import { generateClaudeCodeCommand, generateCodexCommand } from '../utils/mcp';
+import { getBaseDataAttributes } from '../utils/telemetry/get-base-data-attributes';
 
 export type McpButtonOptions = {
   options?: MCPOption[];
@@ -27,8 +28,9 @@ const COPIED_RESET_TIMEOUT = 1000;
 export function useConnectMCPButton({
   options = DEFAULT_MCP_OPTIONS,
 }: McpButtonOptions = {}): McpButtonSettings {
-  const { useTranslate } = useThemeHooks();
+  const { useTranslate, useTelemetry } = useThemeHooks();
   const { translate } = useTranslate();
+  const telemetry = useTelemetry();
   const { serverName, serverUrl, cursorUrl, vscodeUrl } = useMCPConfig();
   const [copiedOption, setCopiedOption] = useState<MCPOption | null>(null);
 
@@ -40,6 +42,10 @@ export function useConnectMCPButton({
 
   const handleAction = useCallback(
     (action: MCPOption) => {
+      telemetry.sendConnectMcpClickedMessage([
+        { ...getBaseDataAttributes('connectMcp', 'button'), option: action },
+      ]);
+
       const connection = { serverName, url: serverUrl };
       const copyTextMap: Partial<Record<MCPOption, string>> = {
         copy: JSON.stringify(
@@ -66,7 +72,7 @@ export function useConnectMCPButton({
 
       window.open(urlMap[action], '_blank');
     },
-    [cursorUrl, vscodeUrl, serverUrl, serverName, resetCopied],
+    [cursorUrl, vscodeUrl, serverUrl, serverName, resetCopied, telemetry],
   );
 
   const triggerButtonText = useMemo(

package/src/core/hooks/use-local-state.ts

@@ -21,6 +21,7 @@ export function useLocalState<T>(key: string, initialValue: T): [T, (value: T) =
   // then client loads the actual stored value without hydration mismatch
   useEffect(() => {
     if (!isBrowser()) return;
+    // oxlint-disable-next-line react-you-might-not-need-an-effect/no-derived-state -- localStorage is read after mount so SSR and client hydrate from the same value
     setValue(getStoredValue(key, initialValue));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [key]);

package/src/core/hooks/use-mobile-menu.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useLocation } from 'react-router';
 
 import { useModalScrollLock } from './use-modal-scroll-lock';
@@ -6,11 +6,19 @@ import { useModalScrollLock } from './use-modal-scroll-lock';
 export function useMobileMenu(initialState = false) {
   const location = useLocation();
   const [isOpen, setIsOpen] = useState(initialState);
+  const locationKey = `${location.pathname}${location.hash}`;
+  const [prevLocationKey, setPrevLocationKey] = useState(locationKey);
 
-  useEffect(() => setIsOpen(false), [location.pathname, location.hash]);
+  if (isOpen && prevLocationKey !== locationKey) {
+    setPrevLocationKey(locationKey);
+    setIsOpen(false);
+  }
   useModalScrollLock(isOpen);
 
-  const openMobileMenu = () => setIsOpen(true);
+  const openMobileMenu = () => {
+    setPrevLocationKey(locationKey);
+    setIsOpen(true);
+  };
   const closeMobileMenu = () => setIsOpen(false);
 
   return { isOpen, openMobileMenu, closeMobileMenu };

package/src/core/hooks/use-product-picker.ts

@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router';
 import { getProductClassName } from '@redocly/theme/components/Product/utils';
 
 import { useThemeHooks } from './use-theme-hooks';
-import { withPathPrefix, generateBeforeAfterContext } from '../utils';
+import { withPathPrefix, generateBeforeAfterContext, getSafeClassName } from '../utils';
 
 export function useProductPicker() {
   const { useCurrentProduct, useProducts, useTelemetry, useLoadAndNavigate } = useThemeHooks();
@@ -36,7 +36,7 @@ export function useProductPicker() {
       Array.from(root.classList)
         .filter((c) => c.startsWith('product-'))
         .forEach((c) => root.classList.remove(c));
-      root.classList.add(getProductClassName(freshProduct.name));
+      root.classList.add(getSafeClassName(getProductClassName(freshProduct.name)));
     }
 
     loadAndNavigate({ navigate, to: withPathPrefix(freshProduct.link) });

package/src/core/hooks/use-tabs.ts

@@ -289,14 +289,16 @@ export const useActiveTab = ({ initialTab, tabsId }: UseActiveTabProps) => {
   const [activeTab, setActiveTab] = useState<string | undefined>(undefined);
   const resolvedActiveTab = activeTab ?? initialTab;
   const prevActiveTabRef = useRef(resolvedActiveTab);
+  const isTabResolvedFromHashRef = useRef(false);
 
   useEffect(() => {
-    if (activeTab !== undefined) {
+    if (isTabResolvedFromHashRef.current) {
       return;
     }
+    isTabResolvedFromHashRef.current = true;
 
     setActiveTab(getInitialTab({ initialTab, hash: location.hash, tabsId }));
-  }, [activeTab, initialTab, location.hash, tabsId]);
+  }, [initialTab, location.hash, tabsId]);
 
   useEffect(() => {
     const hasActiveTabChanged = prevActiveTabRef.current !== resolvedActiveTab;

package/src/core/hooks/use-telemetry-fallback.ts

@@ -36,6 +36,8 @@ export const useTelemetryFallback = () => ({
   sendProductPickerChangedMessage: () => {},
   sendLogoClickedMessage: () => {},
   sendCodeSnippetReportedMessage: () => {},
+  sendConnectMcpClickedMessage: () => {},
+  sendMcpConnectionSnippetCopiedMessage: () => {},
   sendMobileMenuClosedMessage: () => {},
   sendMobileMenuOpenedMessage: () => {},
   sendPageViewedMessage: () => {},