@redocly/theme 0.69.0-next.9 → 0.70.0-next.0

package/src/components/Catalog/CatalogTableView/CatalogEntityCell.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
 import { CatalogEntityTypeIcon } from '@redocly/theme/components/Catalog/CatalogEntityTypeIcon';
-import { BffCatalogEntity } from '@redocly/theme/core/types';
+import type { BffCatalogEntity } from '@redocly/theme/core/types';
 
 type Entity = Pick<BffCatalogEntity, 'type' | 'title' | 'summary'>;
 export type CatalogEntityCellProps<T extends Entity> = {

package/src/components/Catalog/CatalogTableView/CatalogTableHeaderCell.tsx

@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components';
 import { CaretDownIcon } from '@redocly/theme/icons/CaretDownIcon/CaretDownIcon';
 import { CaretUpIcon } from '@redocly/theme/icons/CaretUpIcon/CaretUpIcon';
 import { useCatalogTableHeaderCellActions } from '@redocly/theme/core/hooks';
-import {
+import type {
   BaseEntity,
   CatalogColumn,
 } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';

package/src/components/Catalog/CatalogTableView/CatalogTableView.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';

package/src/components/Catalog/CatalogTableView/CatalogTableViewRow.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';

package/src/components/Catalog/CatalogTableView/CatalogTagsCell.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { BffCatalogEntity } from '@redocly/theme/core/types';
+import type { BffCatalogEntity } from '@redocly/theme/core/types';
 import { CatalogTags } from '@redocly/theme/components/Catalog/CatalogTags';
 
 export type CatalogTagsCellProps = {

package/src/components/Catalog/CatalogTags.tsx

@@ -1,8 +1,10 @@
-import React, { JSX } from 'react';
+import type { JSX } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import { CATALOG_TAG_MAX_LENGTH } from '@redocly/theme/core/constants';
-import { Tag, TagProps } from '@redocly/theme/components/Tag/Tag';
+import type { TagProps } from '@redocly/theme/components/Tag/Tag';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
 import { useThemeHooks } from '@redocly/theme/core/hooks';

package/src/components/Catalog/CatalogViewModeToggle.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { TableIcon } from '@redocly/theme/icons/TableIcon/TableIcon';
 import { CardsIcon } from '@redocly/theme/icons/CardsIcon/CardsIcon';
-import { CatalogViewMode } from '@redocly/theme/core/types';
+import type { CatalogViewMode } from '@redocly/theme/core/types';
 
 export type CatalogViewModeToggleProps = {
   viewMode: CatalogViewMode;

package/src/components/Catalog/variables.ts

@@ -471,33 +471,31 @@ export const catalog = css`
     * @tokens Catalog history button
     */
   --catalog-history-button-width: 252px;
-  --catalog-history-button-item-width: 244px;
   --catalog-history-separator-border-color: var(--border-color-secondary);
-  --catalog-history-separator-margin-bottom: var(--spacing-sm);
+  --catalog-history-separator-margin: var(--spacing-sm) 0;
   --catalog-history-item-padding: var(--spacing-xxs);
-  --catalog-history-item-margin-bottom: calc(var(--spacing-xxs) * -1);
-  --catalog-history-item-gap: var(--spacing-xs);
-  --catalog-history-item-border-radius: var(--menu-item-label-border-radius);
+  --catalog-history-item-gap: var(--spacing-xxs);
+  --catalog-history-item-border-radius: var(--border-radius-lg);
   --catalog-history-item-bg-color-hover: var(--menu-item-bg-color-hover);
   --catalog-history-icon-size: 16px;
-  --catalog-history-content-max-width: 212px;
+  --catalog-history-icon-gap: 2px;
   --catalog-history-text-font-family: var(--font-family-base);
   --catalog-history-text-font-size: var(--font-size-base);
   --catalog-history-text-font-weight: var(--font-weight-regular);
   --catalog-history-text-line-height: var(--line-height-base);
-  --catalog-history-text-color: var(--text-color-primary);
+  --catalog-history-text-color: var(--menu-content-color);
   --catalog-history-pill-gap: var(--spacing-xxs);
+  --catalog-history-pill-height: 22px;
   --catalog-history-pill-padding-vertical: 1px;
   --catalog-history-pill-padding-horizontal: var(--spacing-xs);
   --catalog-history-pill-border-color: var(--border-color-primary);
-  --catalog-history-pill-border-radius: 12px;
-  --catalog-history-pill-icon-size: 16px;
+  --catalog-history-pill-border-radius: var(--border-radius-xl);
+  --catalog-history-pill-icon-size: 14px;
   --catalog-history-pill-icon-color: var(--color-green-8);
   --catalog-history-pill-font-family: var(--font-family-base);
   --catalog-history-pill-font-size: var(--font-size-base);
   --catalog-history-pill-line-height: var(--line-height-base);
   --catalog-history-pill-text-color: var(--text-color-primary);
-  --catalog-history-pill-min-width: calc(100% - 118px - var(--catalog-history-item-gap));
   // @tokens End
 
   /**
@@ -506,50 +504,44 @@ export const catalog = css`
   --catalog-history-sidebar-width: 320px;
   --catalog-history-sidebar-bg-color: var(--sidebar-bg-color);
   --catalog-history-sidebar-border-color: var(--border-color-secondary);
+  --catalog-history-sidebar-padding: var(--spacing-base) var(--spacing-base) 0;
+  --catalog-history-sidebar-divider-margin: var(--spacing-sm) 0 0;
 
-  --catalog-history-sidebar-header-padding: var(--spacing-base) var(--spacing-sm) var(--spacing-base);
+  --catalog-history-sidebar-header-padding: var(--spacing-xxs);
   --catalog-history-sidebar-header-font-family: var(--font-family-base);
   --catalog-history-sidebar-header-font-size: var(--font-size-base);
   --catalog-history-sidebar-header-font-weight: var(--font-weight-regular);
   --catalog-history-sidebar-header-line-height: var(--line-height-base);
   --catalog-history-sidebar-header-letter-spacing: 0;
-  --catalog-history-sidebar-header-color: var(--text-color-primary);
+  --catalog-history-sidebar-header-color: var(--menu-content-color);
 
-  --catalog-history-sidebar-close-button-size: 32px;
-  --catalog-history-sidebar-close-button-border-radius: var(--border-radius-md);
+  --catalog-history-sidebar-close-button-size: 22px;
+  --catalog-history-sidebar-close-button-border-radius: var(--border-radius-xl);
   --catalog-history-sidebar-close-button-bg-color-hover: var(--color-hover-base);
   --catalog-history-sidebar-close-icon-color: var(--text-color-primary);
 
-  --catalog-history-sidebar-content-padding: 0 var(--spacing-sm);
-  --catalog-history-sidebar-content-margin-top: calc(var(--spacing-xxs) * -1);
-
-  --catalog-history-sidebar-version-header-padding: var(--spacing-xs) var(--spacing-xxs);
+  --catalog-history-sidebar-version-header-padding: var(--spacing-xxs);
   --catalog-history-sidebar-version-header-border-radius: var(--border-radius-md);
   --catalog-history-sidebar-version-header-bg-color-hover: var(--color-hover-base);
+  --catalog-history-sidebar-version-header-bg-color-current: var(--menu-item-bg-color-active);
 
-  --catalog-history-sidebar-version-icon-size: 32px;
-  --catalog-history-sidebar-version-icon-color: var(--text-color-secondary);
+  --catalog-history-sidebar-version-icon-size: 20px;
+  --catalog-history-sidebar-version-icon-color: var(--text-color-primary);
   --catalog-history-sidebar-version-icon-color-current: var(--color-static-white);
-  --catalog-history-sidebar-version-icon-margin-right: var(--spacing-xs);
+  --catalog-history-sidebar-version-icon-margin-right: var(--spacing-xxs);
   --catalog-history-sidebar-chevron-icon-color: var(--text-color-secondary);
-  --catalog-history-sidebar-version-info-gap: 2px;
 
   --catalog-history-sidebar-version-title-font-family: var(--font-family-base);
   --catalog-history-sidebar-version-title-font-size: var(--font-size-base);
-  --catalog-history-sidebar-version-title-font-weight: var(--font-weight-medium);
+  --catalog-history-sidebar-version-title-font-weight: var(--font-weight-regular);
   --catalog-history-sidebar-version-title-line-height: var(--line-height-base);
-  --catalog-history-sidebar-version-title-color: var(--color-warm-grey-7);
-
-  --catalog-history-sidebar-version-date-font-family: var(--font-family-base);
-  --catalog-history-sidebar-version-date-font-size: var(--font-size-sm);
-  --catalog-history-sidebar-version-date-font-weight: var(--font-weight-regular);
-  --catalog-history-sidebar-version-date-line-height: var(--line-height-sm);
-  --catalog-history-sidebar-version-date-color: var(--color-warm-grey-7);
+  --catalog-history-sidebar-version-title-color: var(--menu-content-color);
 
-  --catalog-history-sidebar-revisions-padding-left: 40px;
+  --catalog-history-sidebar-revisions-padding-left: 28px;
   --catalog-history-sidebar-revisions-padding-bottom: var(--spacing-base);
+  --catalog-history-sidebar-revision-line-left: 14px;
 
-  --catalog-history-sidebar-revision-item-padding: var(--spacing-xs) var(--spacing-sm);
+  --catalog-history-sidebar-revision-item-padding: var(--spacing-xxs) var(--spacing-sm);
   --catalog-history-sidebar-revision-item-border-radius: var(--border-radius-md);
   --catalog-history-sidebar-revision-item-bg-color-hover: var(--bg-color-hover);
 
@@ -573,7 +565,6 @@ export const catalog = css`
   /**
    * @tokens Catalog history tag border radius
    */
-  --catalog-history-sidebar-version-tag-border-radius: var(--border-radius-xl);
   --catalog-history-sidebar-revision-tag-border-radius: var(--border-radius-xl);
   // @tokens End
 

package/src/components/CatalogClassic/CatalogClassicInfoBlock.tsx

@@ -1,13 +1,10 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import styled from 'styled-components';
 
-import type { JSX } from 'react';
-
 import { useThemeHooks } from '@redocly/theme/core/hooks';
-import { getScorecardColorVariable } from '@redocly/theme/core/utils';
+import { getScorecardColorVariable, getBaseDataAttributes } from '@redocly/theme/core/utils';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { Link } from '@redocly/theme/components/Link/Link';
-import { getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 export type CatalogClassicInfoBlockProps = {
   metadata?: {

package/src/components/CatalogClassic/CatalogClassicVirtualizedGroups.tsx

@@ -2,7 +2,7 @@ import React, { useMemo, useEffect, useState } from 'react';
 import { useWindowVirtualizer } from '@tanstack/react-virtual';
 import styled from 'styled-components';
 
-import { CatalogItem, ResolvedFilter } from '@redocly/theme/core/types';
+import type { CatalogItem, ResolvedFilter } from '@redocly/theme/core/types';
 import { useElementSize } from '@redocly/theme/core/hooks';
 import { CatalogClassicCard } from '@redocly/theme/components/CatalogClassic/CatalogClassicCard';
 import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -7,7 +7,8 @@ import type { CodeBlockItems } from '@redocly/theme/components/CodeBlock/CodeBlo
 import { CodeBlockTabs } from '@redocly/theme/components/CodeBlock/CodeBlockTabs';
 import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
 import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
-import { useThemeHooks, useThemeConfig, ReportButtonProps } from '@redocly/theme/core/hooks';
+import type { ReportButtonProps } from '@redocly/theme/core/hooks';
+import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
 import { DeselectIcon } from '@redocly/theme/icons/DeselectIcon/DeselectIcon';
 import { MaximizeIcon } from '@redocly/theme/icons/MaximizeIcon/MaximizeIcon';
 import { MinimizeIcon } from '@redocly/theme/icons/MinimizeIcon/MinimizeIcon';

package/src/components/Dropdown/Dropdown.tsx

@@ -116,8 +116,12 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
       const wrapper = wrapperRef.current;
       if (!wrapper) return;
       const rect = wrapper.getBoundingClientRect();
+      const menuHeight = menuRef.current?.offsetHeight ?? 0;
+      const fitsBelow = rect.bottom + menuHeight <= window.innerHeight;
+      const fitsAbove = rect.top - menuHeight >= 0;
+      const openUpward = placement === 'top' ? fitsAbove || !fitsBelow : !fitsBelow && fitsAbove;
       const style: CSSProperties = { minWidth: rect.width };
-      if (placement === 'top') {
+      if (openUpward) {
         style.bottom = window.innerHeight - rect.top;
       } else {
         style.top = rect.bottom;

package/src/components/Filter/FilterOptionLabel.tsx

@@ -1,4 +1,4 @@
-import React, { type PropsWithChildren, JSX } from 'react';
+import React, { type JSX, type PropsWithChildren } from 'react';
 import styled from 'styled-components';
 
 export type FilterOptionLabelProps = PropsWithChildren<{

package/src/components/LoadMore/LoadMore.tsx

@@ -1,4 +1,5 @@
-import React, { JSX } from 'react';
+import type { JSX } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import { Button } from '@redocly/theme/components/Button/Button';

package/src/components/MCP/McpConnectionTabs.tsx

@@ -3,13 +3,15 @@ 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 {
   generateClaudeCodeCommand,
-  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 +49,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 +74,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 +104,7 @@ export function McpConnectionTabs({
               label={translate(translationKey, defaultLabel)}
               icon={TabIcon ? <TabIcon /> : undefined}
             >
-              {renderTabContent(option, connection, translate)}
+              {renderTabContent(option, connection, translate, snippetHeader)}
             </TabItemFragment>
           );
         })}
@@ -99,6 +117,7 @@ function renderTabContent(
   option: McpConnectionTab,
   connection: { serverName: string; url: string },
   translate: TFunction,
+  snippetHeader: SnippetHeader,
 ): ReactNode {
   const terminalHint = (
     <TabHint>
@@ -106,7 +125,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 +142,7 @@ function renderTabContent(
         <CodeBlock
           lang="text"
           source={generateMcpInstallPrompt(connection)}
-          header={CODE_BLOCK_HEADER}
+          header={snippetHeader(option, 'prompt')}
           wrapContents
         />
       </>
@@ -139,7 +160,7 @@ function renderTabContent(
               <CodeBlock
                 lang="shell"
                 source={generateClaudeCodeCommand(connection)}
-                header={CODE_BLOCK_HEADER}
+                header={snippetHeader(option, 'claude-code')}
                 wrapContents
               />
             </>
@@ -155,13 +176,13 @@ function renderTabContent(
               <TabHint>
                 {translate(
                   'page.mcpNotAllowed.snippets.claudeDesktop.instruction',
-                  'In Claude Desktop, open Settings → Developer → Edit Config, add this to the configuration file, and restart Claude Desktop:',
+                  'Open Customize → Connectors → Add custom connector and paste this server URL:',
                 )}
               </TabHint>
               <CodeBlock
-                lang="json"
-                source={generateClaudeDesktopConfig(connection)}
-                header={CODE_BLOCK_HEADER}
+                lang="text"
+                source={connection.url}
+                header={snippetHeader(option, 'claude-desktop')}
               />
             </>
           ),
@@ -177,7 +198,7 @@ function renderTabContent(
               <CodeBlock
                 lang="shell"
                 source={generateCodexCommand(connection)}
-                header={CODE_BLOCK_HEADER}
+                header={snippetHeader(option, 'codex')}
                 wrapContents
               />
             </>
@@ -218,7 +239,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/PageActions/PageActions.tsx

@@ -12,7 +12,8 @@ import { SplitButton } from '@redocly/theme/components/SplitButton/SplitButton';
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
 import { Spinner } from '@redocly/theme/icons/Spinner/Spinner';
 import { CheckmarkFilledIcon } from '@redocly/theme/icons/CheckmarkFilledIcon/CheckmarkFilledIcon';
-import { PageActionType, usePageActions, useThemeHooks } from '@redocly/theme/core/hooks';
+import type { PageActionType } from '@redocly/theme/core/hooks';
+import { usePageActions, useThemeHooks } from '@redocly/theme/core/hooks';
 
 type ActionState = 'idle' | 'processing' | 'done';
 

package/src/components/Search/SearchAiDialog.tsx

@@ -13,8 +13,8 @@ import type {
 import { useThemeConfig, useThemeHooks } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { SearchAiConversationInput } from '@redocly/theme/components/Search/SearchAiConversationInput';
+import type { AiSearchError } from '@redocly/theme/core/constants';
 import {
-  AiSearchError,
   AI_SEARCH_ERROR_CONFIG as ERROR_CONFIG,
   AiSearchConversationRole,
 } from '@redocly/theme/core/constants';
@@ -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/SearchAiMessage.tsx

@@ -1,19 +1,16 @@
-import React, { memo, useState } from 'react';
+import React, { memo, useState, type JSX } from 'react';
 import styled from 'styled-components';
 
-import type { JSX } from 'react';
-
 import {
   FeedbackType,
   type SearchAiMessageResource,
   type ToolCall,
   type ContentSegment,
+  ToolCallName,
 } from '@redocly/theme/core/types';
-import { TOOL_CALL_DISPLAY_TEXT } from '@redocly/theme/core/constants';
-import { ToolCallName } from '@redocly/theme/core/types';
+import { TOOL_CALL_DISPLAY_TEXT, AiSearchConversationRole } from '@redocly/theme/core/constants';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
-import { AiSearchConversationRole } from '@redocly/theme/core/constants';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Markdown } from '@redocly/theme/components/Markdown/Markdown';
 import { DocumentIcon } from '@redocly/theme/icons/DocumentIcon/DocumentIcon';

package/src/components/Search/SearchAiResponse.tsx

@@ -13,10 +13,8 @@ import { Markdown } from '@redocly/theme/components/Markdown/Markdown';
 import { Typography } from '@redocly/theme/components/Typography/Typography';
 import { Admonition } from '@redocly/theme/components/Admonition/Admonition';
 import { ErrorFilledIcon } from '@redocly/theme/icons/ErrorFilledIcon/ErrorFilledIcon';
-import {
-  AiSearchError,
-  AI_SEARCH_ERROR_CONFIG as ERROR_CONFIG,
-} from '@redocly/theme/core/constants';
+import type { AiSearchError } from '@redocly/theme/core/constants';
+import { AI_SEARCH_ERROR_CONFIG as ERROR_CONFIG } from '@redocly/theme/core/constants';
 import { ChatIcon } from '@redocly/theme/icons/ChatIcon/ChatIcon';
 
 export type SearchAiResponseProps = {

package/src/components/Search/SearchGroups.tsx

@@ -3,11 +3,7 @@ import styled from 'styled-components';
 
 import type { JSX } from 'react';
 
-import {
-  type SearchFacet,
-  type SearchFacetCount,
-  type SearchFilterItem,
-} from '@redocly/theme/core/types';
+import type { SearchFacet, SearchFacetCount, SearchFilterItem } from '@redocly/theme/core/types';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 

package/src/core/constants/markdown.ts

@@ -1 +1,5 @@
 export const MARKDOWN_CLASS_NAME = 'md';
+
+export const MARKDOC_EXAMPLE_TAG = 'markdoc-example';
+
+export const EXAMPLE_CONTENT_ATTRIBUTE = 'exampleContent';

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/catalog/use-catalog-entity-schema.ts

@@ -1,4 +1,4 @@
-import { BffCatalogEntity, BffCatalogRelatedEntity } from '../../types';
+import type { BffCatalogEntity, BffCatalogRelatedEntity } from '../../types';
 
 type CatalogEntitySchemaProps = {
   entity: BffCatalogEntity;

package/src/core/hooks/catalog/use-catalog-table-header-cell-actions.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   BaseEntity,
   CatalogColumn,
 } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';

package/src/core/hooks/catalog/use-graph.ts

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import {
+  type OnNodesChange,
+  type OnEdgesChange,
   addEdge,
   type Node,
   type Edge,
@@ -7,13 +9,11 @@ import {
   useNodesState,
   useEdgesState,
   Position,
-  OnNodesChange,
-  OnEdgesChange,
 } from '@xyflow/react';
 
-import { type CatalogEntityNodeData } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNode';
+import type { CatalogEntityNodeData } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNode';
 
-import { BffCatalogEntity, BffCatalogRelatedEntity } from '../../types';
+import type { BffCatalogEntity, BffCatalogRelatedEntity } from '../../types';
 import {
   GraphCustomEdgeType,
   GraphCustomNodeType,

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) => {

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

@@ -2,7 +2,7 @@ import { vi, type MockedFunction } from 'vitest';
 
 import type { ResolvedNavItem } from '@redocly/config';
 
-import { MobileMenuType } from '../../../constants/common';
+import type { MobileMenuType } from '../../../constants/common';
 
 export const useMobileMenuItems: MockedFunction<
   (menuType: MobileMenuType) => {