@redocly/theme 0.69.0 → 0.70.0-next.0

package/src/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBar.tsx

@@ -1,10 +1,11 @@
-import React, { JSX } from 'react';
+import type { JSX } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import { CatalogMobileTopBarFiltersButton } from '@redocly/theme/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarFiltersButton';
 import { CatalogMobileTopBarControls } from '@redocly/theme/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarControls';
 import { breakpoints } from '@redocly/theme/core';
-import { CatalogViewMode } from '@redocly/theme/core';
+import type { CatalogViewMode } from '@redocly/theme/core';
 
 type CatalogMobileTopBarProps = {
   setMobileFiltersPanelOpen: (open: boolean) => void;

package/src/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarControls.tsx

@@ -1,9 +1,10 @@
-import React, { JSX } from 'react';
+import type { JSX } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import { CatalogSortButton } from '@redocly/theme/components/Catalog/CatalogSortButton';
 import { CatalogViewModeToggle } from '@redocly/theme/components/Catalog/CatalogViewModeToggle';
-import { CatalogViewMode } from '@redocly/theme/core';
+import type { CatalogViewMode } from '@redocly/theme/core';
 
 type CatalogMobileTopBarControlsProps = {
   setSortOption: (sortOption: string | null) => void;

package/src/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarFiltersButton.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 { FilterIcon } from '@redocly/theme/icons/FilterIcon/FilterIcon';

package/src/components/Catalog/CatalogSelector.tsx

@@ -1,10 +1,11 @@
-import React, { useState, JSX } from 'react';
+import type { JSX } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import { useNavigate } from 'react-router';
 
 import { Accordion } from '@redocly/theme/components/Accordion/Accordion';
 import { Select } from '@redocly/theme/components/Select/Select';
-import { CatalogSwitcherItem } from '@redocly/theme/core/types';
+import type { CatalogSwitcherItem } from '@redocly/theme/core/types';
 import { getPathPrefix } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';

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

@@ -9,7 +9,6 @@ import type { CodeBlockControlsProps } from '@redocly/theme/components/CodeBlock
 import { useMCPConfig, useThemeHooks } from '@redocly/theme/core/hooks';
 import {
   generateClaudeCodeCommand,
-  generateClaudeDesktopConfig,
   generateCodexCommand,
   generateMcpInstallPrompt,
   getBaseDataAttributes,
@@ -177,12 +176,12 @@ 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)}
+                lang="text"
+                source={connection.url}
                 header={snippetHeader(option, 'claude-desktop')}
               />
             </>

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';

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

package/src/core/hooks/use-active-section-id.ts

@@ -43,6 +43,7 @@ export function useActiveSectionId(
           const section = sections[i];
           const rect = section.getBoundingClientRect();
           if (rect.y < heightOffset && rect.bottom > heightOffset) {
+            if (isSkippedContent(section)) continue;
             setItemId(section.getAttribute('data-section-id') || '');
             return;
           }
@@ -73,3 +74,10 @@ export function useActiveSectionId(
 
   return itemId;
 }
+
+function isSkippedContent(element: Element): boolean {
+  return (
+    typeof element.checkVisibility === 'function' &&
+    !element.checkVisibility({ contentVisibilityAuto: true })
+  );
+}

package/src/core/hooks/use-element-size.ts

@@ -1,4 +1,5 @@
-import { useState, useCallback, RefObject, useLayoutEffect, useRef } from 'react';
+import type { RefObject } from 'react';
+import { useState, useCallback, useLayoutEffect, useRef } from 'react';
 
 type Size = {
   width: number;

package/src/core/types/catalog.ts

@@ -1,7 +1,11 @@
-import { InfiniteData, UseInfiniteQueryResult } from '@tanstack/react-query';
-import { ENTITY_RELATION_TYPES } from '@redocly/config';
+import type { InfiniteData, UseInfiniteQueryResult } from '@tanstack/react-query';
+import type {
+  ENTITY_RELATION_TYPES,
+  CatalogEntityConfig,
+  EntitiesCatalogConfig,
+  LayoutVariant,
+} from '@redocly/config';
 
-import type { CatalogEntityConfig, EntitiesCatalogConfig, LayoutVariant } from '@redocly/config';
 import type { CatalogFilterConfig } from '@redocly/theme/config';
 
 export type FilterResult = {

package/src/core/types/common.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { DEFAULT_COLOR_MODES } from '../constants';
+import type { DEFAULT_COLOR_MODES } from '../constants';
 
 export type Plural<T extends string> = `${T}s`;
 

package/src/core/types/hooks.ts

@@ -1,6 +1,11 @@
-import type { ResolvedBannerConfig } from '@redocly/config';
+import type {
+  ResolvedBannerConfig,
+  PageData,
+  PageProps,
+  ResolvedNavItemWithLink,
+  Version,
+} from '@redocly/config';
 import type { AsyncApiRealmUI } from '@redocly/realm-asyncapi-sdk';
-import type { PageData, PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
 import type { ShikiTransformer } from '@shikijs/types';
 import type { Callback, TFunction as TFunc } from 'i18next';
 import type { To, Location, NavigateFunction } from 'react-router';
@@ -14,9 +19,15 @@ import type {
   UseCatalogProps,
   CatalogApiParams,
   CatalogApiResults,
+  BffCatalogEntity,
+  BffCatalogEntityList,
+  BffCatalogRelatedEntity,
+  BffCatalogRelatedEntityList,
+  BffCatalogEntityRevision,
+  BffCatalogEntityRevisionList,
 } from './catalog';
 import type { UserMenuData } from './user-menu';
-import type { ItemState } from './sidebar';
+import type { ItemState, DrilldownMenuItemDetails } from './sidebar';
 import type {
   SearchItemData,
   SearchFacet,
@@ -29,17 +40,8 @@ import type {
 import type { SubmitFeedbackParams } from './feedback';
 import type { TFunction } from './l10n';
 import type { BreadcrumbItem } from './breadcrumb';
-import type { DrilldownMenuItemDetails } from './sidebar';
 
-import {
-  BffCatalogEntity,
-  BffCatalogEntityList,
-  BffCatalogRelatedEntity,
-  BffCatalogRelatedEntityList,
-  BffCatalogEntityRevision,
-  BffCatalogEntityRevisionList,
-} from './catalog';
-import { AiSearchError } from '../constants/search';
+import type { AiSearchError } from '../constants/search';
 
 export type ThemeHooks = {
   useAnchorPositioning: () => { isSupported: boolean };

package/src/core/utils/mcp.ts

@@ -42,23 +42,6 @@ export function slugifyMcpServerName(name: string): string {
     .replace(/^-+|-+$/g, '');
 }
 
-// Claude Desktop's config file only launches stdio commands, so remote servers
-// connect through the mcp-remote bridge.
-export function generateClaudeDesktopConfig(config: McpConnectionParams): string {
-  return JSON.stringify(
-    {
-      mcpServers: {
-        [slugifyMcpServerName(config.serverName)]: {
-          command: 'npx',
-          args: ['-y', 'mcp-remote', config.url],
-        },
-      },
-    },
-    null,
-    2,
-  );
-}
-
 export function generateClaudeCodeCommand(config: McpConnectionParams): string {
   return `claude mcp add --transport http ${slugifyMcpServerName(config.serverName)} ${config.url}`;
 }

package/src/core/utils/menu.ts

@@ -1,8 +1,8 @@
 import type { ResolvedNavItem, Version } from '@redocly/config';
 import type { Location } from 'react-router';
 
-import { type Locale, type TFunction } from '../types/l10n';
-import { type ItemState } from '../types/sidebar';
+import type { Locale, TFunction } from '../types/l10n';
+import type { ItemState } from '../types/sidebar';
 import { MenuItemType } from '../constants/common';
 import { getPathnameForLocale, withoutPathPrefix, withPathPrefix } from './urls';
 

package/src/core/utils/urls.ts

@@ -5,9 +5,7 @@ import { DEFAULT_LOCALE_PLACEHOLDER } from '../constants/common';
 export function combineUrls(baseURL: string, ...relativeURLs: (string | undefined)[]) {
   let res = baseURL;
   for (let relativeURL of relativeURLs) {
-    res = relativeURL
-      ? res.replace(/[\/\\]+$/, '') + '/' + relativeURL.replace(/^[\/\\]+/, '')
-      : res;
+    res = relativeURL ? res.replace(/[/\\]+$/, '') + '/' + relativeURL.replace(/^[/\\]+/, '') : res;
   }
 
   return res;

package/src/ext/use-configure-replay.ts

@@ -1,8 +1,8 @@
 import { useEffect, useState, useCallback, useRef } from 'react';
 
-import {
-  type ConfigureRequestValues,
-  type ConfigureServerRequestValues,
+import type {
+  ConfigureRequestValues,
+  ConfigureServerRequestValues,
 } from '@redocly/theme/ext/configure';
 import type { UserClaims, OpenAPIServer, OpenAPIInfo } from '@redocly/theme/core/types';