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

package/src/core/types/l10n.ts

@@ -152,6 +152,7 @@ export type TranslationKey =
   | 'page.mcpNotAllowed.snippets.terminal.hint'
   | 'page.mcpNotAllowed.snippets.claudeCode.headline'
   | 'page.mcpNotAllowed.snippets.claudeDesktop.headline'
+  | 'page.mcpNotAllowed.snippets.claudeDesktop.accountHint'
   | 'page.mcpNotAllowed.snippets.claudeDesktop.instruction'
   | 'page.mcpNotAllowed.snippets.chatgptApp.headline'
   | 'page.mcpNotAllowed.snippets.chatgptApp.instruction'
@@ -299,6 +300,8 @@ export type TranslationKey =
   | 'page.actions.connectMcp.cursorDescription'
   | 'page.actions.connectMcp.vscode'
   | 'page.actions.connectMcp.vscodeDescription'
+  | 'page.actions.connectMcp.claude'
+  | 'page.actions.connectMcp.claudeDescription'
   | 'page.actions.connectMcp.claudeCode'
   | 'page.actions.connectMcp.claudeCodeDescription'
   | 'page.actions.connectMcp.codex'

package/src/core/types/mcp.ts

@@ -1,6 +1,6 @@
 import type { MCP_OPTIONS } from '../constants/mcp';
 
-export type MCPClientType = 'cursor' | 'vscode';
+export type MCPClientType = 'cursor' | 'vscode' | 'claude';
 
 export type MCPOption = (typeof MCP_OPTIONS)[number];
 

package/src/core/utils/download-code-walkthrough.ts

@@ -1,6 +1,6 @@
 import { saveAs } from 'file-saver';
 
-import type { CodeWalkthroughFile } from '@redocly/config';
+import type { CodeWalkthroughFile } from '@redocly/theme/core/types';
 
 import { removeLeadingSlash } from './urls';
 import { findClosestCommonDirectory } from './find-closest-common-directory';

package/src/core/utils/get-code-walkthrough-file-text.ts

@@ -1,4 +1,4 @@
-import type { CodeWalkthroughFile, CodeWalkthroughNode } from '@redocly/config';
+import type { CodeWalkthroughFile, CodeWalkthroughNode } from '@redocly/theme/core/types';
 
 import { matchCodeWalkthroughConditions } from './match-code-walkthrough-conditions';
 import { replaceInputsWithValue } from './replace-inputs-with-value';

package/src/core/utils/match-code-walkthrough-conditions.ts

@@ -1,4 +1,4 @@
-import type { CodeWalkthroughConditionsObject } from '@redocly/config';
+import type { CodeWalkthroughConditionsObject } from '@redocly/theme/core/types';
 
 import { isObject } from './type-guards';
 

package/src/core/utils/mcp.ts

@@ -25,6 +25,12 @@ function generateVSCodeMCPDeepLink(config: McpConnectionParams): string {
   return `vscode:mcp/install?${encodedConfig}`;
 }
 
+function generateClaudeConnectorLink(config: McpConnectionParams): string {
+  const connectorName = encodeURIComponent(config.serverName);
+  const connectorUrl = encodeURIComponent(config.url);
+  return `https://claude.ai/customize/connectors?modal=add-custom-connector&connectorName=${connectorName}&connectorUrl=${connectorUrl}`;
+}
+
 export function generateMCPDeepLink(
   clientType: MCPClientType,
   config: McpConnectionParams,
@@ -34,8 +40,8 @@ export function generateMCPDeepLink(
       return generateCursorMCPDeepLink(config);
     case 'vscode':
       return generateVSCodeMCPDeepLink(config);
-    default:
-      return generateCursorMCPDeepLink(config);
+    case 'claude':
+      return generateClaudeConnectorLink(config);
   }
 }
 

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { CodeWalkthroughFilter } from '@redocly/config';
+import type { CodeWalkthroughFilter } from '@redocly/theme/core/types';
 
 import { Tag, ContentWrapper as TagContentWrapper } from '@redocly/theme/components/Tag/Tag';
 

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

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
-import type { CodeWalkthroughFile } from '@redocly/config';
+import type { CodeWalkthroughFile } from '@redocly/theme/core/types';
 
 import { useCodePanel } from '@redocly/theme/core/hooks';
 import { CodeWalkthroughControlsStateContext } from '@redocly/theme/core/contexts';

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

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 
 import type { JSX } from 'react';
-import type { CodeWalkthroughFile } from '@redocly/config';
+import type { CodeWalkthroughFile } from '@redocly/theme/core/types';
 
 import { useThemeHooks, useRenderableFiles, type RenderableFile } from '@redocly/theme/core/hooks';
 import { OverflowMenuVerticalIcon } from '@redocly/theme/icons/OverflowMenuVerticalIcon/OverflowMenuVerticalIcon';

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

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
-import type { CodeWalkthroughFile } from '@redocly/config';
+import type { CodeWalkthroughFile } from '@redocly/theme/core/types';
 
 import { CodeWalkthroughControlsStateContext } from '@redocly/theme/core/contexts';
 import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';

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

@@ -10,7 +10,7 @@ import React, {
 import styled from 'styled-components';
 import { useLocation } from 'react-router';
 
-import type { WithConditions } from '@redocly/config';
+import type { WithConditions } from '@redocly/theme/core/types';
 
 import { Marker } from '@redocly/theme/components/Marker/Marker';
 import {

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

@@ -1,7 +1,7 @@
 import React, { useRef, type PropsWithChildren } from 'react';
 import styled from 'styled-components';
 
-import type { CodeWalkthroughAttr } from '@redocly/config';
+import type { CodeWalkthroughAttr } from '@redocly/theme/core/types';
 
 import {
   CodeWalkthroughStepsContext,

package/src/markdoc/components/Tabs/TabList.tsx

@@ -193,10 +193,8 @@ export function TabList({
   // Show as selector when no visible tabs (all tabs in dropdown)
   const showAsSelector = visibleTabs.length === 0 && hasOverflow;
 
-  const { dropdownPosition, setIsDropdownOpen, setDropdownPosition } = useDropdownPosition(
-    hasOverflow,
-    dropdownRef,
-  );
+  const { dropdownPosition, isDropdownOpen, setIsDropdownOpen, setDropdownPosition } =
+    useDropdownPosition(hasOverflow, dropdownRef);
 
   return (
     <TabListContainer role="tablist" ref={containerRef}>
@@ -216,15 +214,9 @@ export function TabList({
           size={size}
           active={isMoreActive || showAsSelector}
           tabIndex={0}
-          className="dropdown-tab"
+          className={isDropdownOpen ? 'dropdown-tab dropdown-tab-open' : 'dropdown-tab'}
         >
-          <DropdownWrapper
-            $top={dropdownPosition.top}
-            $left={dropdownPosition.left}
-            onClickCapture={() => {
-              setIsDropdownOpen(true);
-            }}
-          >
+          <DropdownWrapper $top={dropdownPosition.top} $left={dropdownPosition.left}>
             <FixedPositionDropdown
               ref={dropdownRef}
               trigger={
@@ -237,6 +229,7 @@ export function TabList({
               }
               alignment="start"
               withArrow
+              onOpen={() => setIsDropdownOpen(true)}
               onClose={() => {
                 setIsDropdownOpen(false);
                 setDropdownPosition({});
@@ -360,6 +353,10 @@ export const TabListContainer = styled.ul`
         min-width: 0;
         max-width: 100%;
       }
+
+      &.dropdown-tab-open {
+        z-index: var(--dropdown-menu-z-index);
+      }
     }
   }
 `;

package/src/markdoc/tags/code-walkthrough.ts

@@ -10,7 +10,7 @@ import type {
   CodeWalkthroughFilterItem,
   TogglesMarkdocAttr,
   InputsMarkdocAttr,
-} from '@redocly/config';
+} from '@redocly/theme/core/types';
 
 import { CodeWalkthroughFilesets } from '@redocly/theme/markdoc/attributes/code-walkthrough-filesets';
 import { CodeWalkthroughFilters } from '@redocly/theme/markdoc/attributes/code-walkthrough-filters';