@redocly/theme 0.71.0-next.4 → 0.71.0-next.6

package/src/core/hooks/use-focus-trap.ts

@@ -2,19 +2,22 @@ import { useEffect } from 'react';
 
 import type { RefObject } from 'react';
 
+const FOCUSABLE_SELECTOR =
+  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
 export function useFocusTrap(containerRef: RefObject<HTMLElement | null>): void {
   useEffect(() => {
     const trapElement = containerRef.current;
 
     if (!trapElement) return;
 
-    const focusableElements = trapElement.querySelectorAll<HTMLElement>(
-      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
-    );
-    const firstElement = focusableElements[0];
+    const getFocusableElements = () =>
+      trapElement.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR);
 
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === 'Tab') {
+        const focusableElements = getFocusableElements();
+        const firstElement = focusableElements[0];
         const lastElement = focusableElements[focusableElements.length - 1];
         if (event.shiftKey && document.activeElement === firstElement) {
           lastElement?.focus();
@@ -28,9 +31,7 @@ export function useFocusTrap(containerRef: RefObject<HTMLElement | null>): void
 
     trapElement.addEventListener('keydown', handleKeyDown);
 
-    if (firstElement) {
-      firstElement.focus();
-    }
+    getFocusableElements()[0]?.focus();
 
     return () => {
       trapElement.removeEventListener('keydown', handleKeyDown);

package/src/core/hooks/use-page-actions.ts

@@ -1,4 +1,5 @@
 import { useMemo, useCallback } from 'react';
+import type { ComponentType } from 'react';
 
 import type { PageProps, UiAccessibleConfig } from '@redocly/config';
 import type { PageAction, MCPClientType, McpConnectionParams } from '../types';
@@ -6,6 +7,8 @@ import type { PageAction, MCPClientType, McpConnectionParams } from '../types';
 import { CopyIcon } from '@redocly/theme/icons/CopyIcon/CopyIcon';
 import { ChatGptIcon } from '@redocly/theme/icons/ChatGptIcon/ChatGptIcon';
 import { ClaudeIcon } from '@redocly/theme/icons/ClaudeIcon/ClaudeIcon';
+import { GrokIcon } from '@redocly/theme/icons/GrokIcon/GrokIcon';
+import { McpIcon } from '@redocly/theme/icons/McpIcon/McpIcon';
 import { MarkdownFullIcon } from '@redocly/theme/icons/MarkdownFullIcon/MarkdownFullIcon';
 import { VSCodeIcon } from '@redocly/theme/icons/VSCodeIcon/VSCodeIcon';
 import { CursorIcon } from '@redocly/theme/icons/CursorIcon/CursorIcon';
@@ -30,9 +33,11 @@ const DEFAULT_ENABLED_ACTIONS = [
   'view',
   'chatgpt',
   'claude',
-  'docs-mcp-cursor',
-  'docs-mcp-vscode',
+  'grok',
   'docs-mcp-claude',
+  'docs-mcp-vscode',
+  'docs-mcp-cursor',
+  'copy-mcp-url',
 ] as const;
 
 export type PageActionType =
@@ -40,9 +45,11 @@ export type PageActionType =
   | 'view'
   | 'chatgpt'
   | 'claude'
-  | 'docs-mcp-cursor'
-  | 'docs-mcp-vscode'
+  | 'grok'
   | 'docs-mcp-claude'
+  | 'docs-mcp-vscode'
+  | 'docs-mcp-cursor'
+  | 'copy-mcp-url'
   // Used in OpenAPI docs x-mcp
   | 'mcp-cursor'
   | 'mcp-vscode';
@@ -115,10 +122,52 @@ export function usePageActions(
       : combineUrls(origin, removeTrailingSlash(pathname) + '.md');
     const externalAiPrompt = `Read ${mdPageUrl} and answer questions based on the content.`;
 
+    const createAiPromptAction =
+      (
+        target: 'chatgpt' | 'claude' | 'grok',
+        iconComponent: ComponentType,
+        texts: Pick<PageAction, 'buttonText' | 'title' | 'description'>,
+      ) =>
+      (): PageAction => {
+        const link = getAiPromptLink(target, externalAiPrompt);
+        return {
+          ...texts,
+          iconComponent,
+          link,
+          onClick: () => {
+            telemetry.sendPageActionsClickedMessage([
+              {
+                ...getBaseDataAttributes('pageActions', 'button'),
+                actionType: target,
+              },
+            ]);
+            window.location.href = link;
+          },
+        };
+      };
+
     const actionHandlers: Record<PageActionType, () => PageAction> = {
       'docs-mcp-cursor': createMCPHandler('cursor', false),
       'docs-mcp-vscode': createMCPHandler('vscode', false),
       'docs-mcp-claude': createMCPHandler('claude', false),
+      'copy-mcp-url': () => ({
+        buttonText: translate('page.actions.connectMcp.copyUrl', 'Copy MCP server URL'),
+        title: translate('page.actions.connectMcp.copyUrl', 'Copy MCP server URL'),
+        description: translate(
+          'page.actions.connectMcp.copyUrlDescription',
+          'Copy the MCP server URL to the clipboard',
+        ),
+        iconComponent: McpIcon,
+        onClick: () => {
+          ClipboardService.copyCustom(mcpConfig.serverUrl);
+          telemetry.sendPageActionsClickedMessage([
+            {
+              ...getBaseDataAttributes('pageActions', 'button'),
+              actionType: 'copy-mcp-url',
+            },
+          ]);
+        },
+      }),
       'mcp-cursor': createMCPHandler('cursor', true),
       'mcp-vscode': createMCPHandler('vscode', true),
 
@@ -163,45 +212,23 @@ export function usePageActions(
         },
       }),
 
-      chatgpt: () => {
-        const link = getAiPromptLink('chatgpt', externalAiPrompt);
-        return {
-          buttonText: translate('page.actions.chatGptButtonText', 'Open in ChatGPT'),
-          title: translate('page.actions.chatGptTitle', 'Open in ChatGPT'),
-          description: translate('page.actions.chatGptDescription', 'Get insights from ChatGPT'),
-          iconComponent: ChatGptIcon,
-          link,
-          onClick: () => {
-            telemetry.sendPageActionsClickedMessage([
-              {
-                ...getBaseDataAttributes('pageActions', 'button'),
-                actionType: 'chatgpt',
-              },
-            ]);
-            window.location.href = link;
-          },
-        };
-      },
+      chatgpt: createAiPromptAction('chatgpt', ChatGptIcon, {
+        buttonText: translate('page.actions.chatGptButtonText', 'Open in ChatGPT'),
+        title: translate('page.actions.chatGptTitle', 'Open in ChatGPT'),
+        description: translate('page.actions.chatGptDescription', 'Get insights from ChatGPT'),
+      }),
 
-      claude: () => {
-        const link = getAiPromptLink('claude', externalAiPrompt);
-        return {
-          buttonText: translate('page.actions.claudeButtonText', 'Open in Claude'),
-          title: translate('page.actions.claudeTitle', 'Open in Claude'),
-          description: translate('page.actions.claudeDescription', 'Get insights from Claude'),
-          iconComponent: ClaudeIcon,
-          link,
-          onClick: () => {
-            telemetry.sendPageActionsClickedMessage([
-              {
-                ...getBaseDataAttributes('pageActions', 'button'),
-                actionType: 'claude',
-              },
-            ]);
-            window.location.href = link;
-          },
-        };
-      },
+      claude: createAiPromptAction('claude', ClaudeIcon, {
+        buttonText: translate('page.actions.claudeButtonText', 'Open in Claude'),
+        title: translate('page.actions.claudeTitle', 'Open in Claude'),
+        description: translate('page.actions.claudeDescription', 'Get insights from Claude'),
+      }),
+
+      grok: createAiPromptAction('grok', GrokIcon, {
+        buttonText: translate('page.actions.grokButtonText', 'Open in Grok'),
+        title: translate('page.actions.grokTitle', 'Open in Grok'),
+        description: translate('page.actions.grokDescription', 'Get insights from Grok'),
+      }),
     };
 
     return (themeConfig.navigation?.actions?.items || actions || DEFAULT_ENABLED_ACTIONS)
@@ -215,6 +242,7 @@ export function usePageActions(
     isPublic,
     mcpUrl,
     mcpConfig.isMcpDisabled,
+    mcpConfig.serverUrl,
     pageSlug,
     actions,
     translate,
@@ -311,7 +339,7 @@ function shouldHideAction(
     return true;
   }
 
-  const actionDependsOnLlmsTxt = ['view', 'copy', 'chatgpt', 'claude'].includes(action);
+  const actionDependsOnLlmsTxt = ['view', 'copy', 'chatgpt', 'claude', 'grok'].includes(action);
 
   if (actionDependsOnLlmsTxt) {
     // Can't use any actions if search is globally disabled (markdown files are not generated)
@@ -345,10 +373,12 @@ function shouldHideActionByType(
   switch (action) {
     case 'chatgpt':
     case 'claude':
+    case 'grok':
       return !isPublic;
     case 'docs-mcp-cursor':
     case 'docs-mcp-vscode':
     case 'docs-mcp-claude':
+    case 'copy-mcp-url':
       return Boolean(mcpUrl) || isMcpDisabled;
     case 'mcp-cursor':
     case 'mcp-vscode':

package/src/core/styles/dark.ts

@@ -16,6 +16,7 @@ import { pageActionsDarkMode } from '@redocly/theme/components/PageActions/varia
 import { tooltipDarkMode } from '@redocly/theme/components/Tooltip/variables.dark';
 import { bannerDarkMode } from '@redocly/theme/components/Banner/variables.dark';
 import { admonitionDarkMode } from '@redocly/theme/components/Admonition/variables.dark';
+import { missingTranslationNoticeDarkMode } from '@redocly/theme/components/MissingTranslationNotice/variables.dark';
 import { codeBlockDarkMode } from '@redocly/theme/components/CodeBlock/variables.dark';
 
 import { activeBrandPaletteDark } from './palette.dark';
@@ -363,6 +364,7 @@ export const darkMode = css`
   ${tooltipDarkMode}
   ${bannerDarkMode}
   ${admonitionDarkMode}
+  ${missingTranslationNoticeDarkMode}
   ${badgesDarkMode}
   ${numberedListDarkMode}
   ${activeBrandPaletteDark}

package/src/core/styles/global.ts

@@ -18,6 +18,7 @@ import { dropdown } from '@redocly/theme/components/Dropdown/variables';
 import { tooltip } from '@redocly/theme/components/Tooltip/variables';
 import { checkbox } from '@redocly/theme/icons/CheckboxIcon/variables';
 import { admonition } from '@redocly/theme/components/Admonition/variables';
+import { missingTranslationNotice } from '@redocly/theme/components/MissingTranslationNotice/variables';
 import { footer } from '@redocly/theme/components/Footer/variables';
 import { button } from '@redocly/theme/components/Button/variables';
 import { aiAssistantButton, connectMcpButton } from '@redocly/theme/components/Buttons/variables';
@@ -1295,6 +1296,7 @@ const replay = css`
 export const tokens = css`
   ${accordion}
   ${admonition}
+  ${missingTranslationNotice}
   ${apiReferenceDocs}
   ${apiReferencePanels}
   ${badges}

package/src/core/types/hooks.ts

@@ -39,7 +39,7 @@ import type {
   ToolCall,
 } from './search';
 import type { SubmitFeedbackParams } from './feedback';
-import type { TFunction } from './l10n';
+import type { Locale, TFunction } from './l10n';
 import type { BreadcrumbItem } from './breadcrumb';
 import type { UseConsentResult } from './consent';
 
@@ -234,5 +234,5 @@ export type ThemeHooks = {
 export type L10nConfig = {
   currentLocale: string;
   defaultLocale: string;
-  locales: { code: string; name: string }[];
+  locales: Locale[];
 };

package/src/core/types/l10n.ts

@@ -157,11 +157,16 @@ export type TranslationKey =
   | 'page.mcpNotAllowed.snippets.chatgptApp.headline'
   | 'page.mcpNotAllowed.snippets.chatgptApp.instruction'
   | 'page.mcpNotAllowed.snippets.codexCli.headline'
+  | 'page.mcpNotAllowed.snippets.grokBuild.headline'
+  | 'page.mcpNotAllowed.snippets.grokApp.headline'
+  | 'page.mcpNotAllowed.snippets.grokApp.instruction'
+  | 'page.mcpNotAllowed.snippets.grokApp.openConnectors'
   | 'page.mcpNotAllowed.snippets.prompt.headline'
   | 'page.mcpNotAllowed.snippets.prompt.hint'
   | 'page.mcpNotAllowed.snippets.json.hint'
   | 'page.mcpNotAllowed.tabs.claude'
   | 'page.mcpNotAllowed.tabs.chatgpt'
+  | 'page.mcpNotAllowed.tabs.grok'
   | 'page.mcpNotAllowed.tabs.json'
   | 'page.lastUpdated.timeago'
   | 'page.lastUpdated.on'
@@ -292,6 +297,9 @@ export type TranslationKey =
   | 'page.actions.claudeTitle'
   | 'page.actions.claudeButtonText'
   | 'page.actions.claudeDescription'
+  | 'page.actions.grokTitle'
+  | 'page.actions.grokButtonText'
+  | 'page.actions.grokDescription'
   | 'page.actions.cursorMcpButtonText'
   | 'page.actions.cursorMcpTitle'
   | 'page.actions.cursorMcpDescription'
@@ -308,6 +316,8 @@ export type TranslationKey =
   | 'page.actions.connectMcp.codexDescription'
   | 'page.actions.connectMcp.copyConfig'
   | 'page.actions.connectMcp.copyConfigDescription'
+  | 'page.actions.connectMcp.copyUrl'
+  | 'page.actions.connectMcp.copyUrlDescription'
   | 'page.actions.connectMcp.moreOptions'
   | 'page.actions.moreActions'
   | 'promptTag.copy.buttonText'
@@ -556,9 +566,12 @@ export type TranslationKey =
   | 'consent.category.analytics.description'
   | 'consent.category.marketing.title'
   | 'consent.category.marketing.description'
-  | 'consent.settingsLink';
+  | 'consent.settingsLink'
+  | 'missingTranslationNotice.title'
+  | 'missingTranslationNotice.content'
+  | 'missingTranslationNotice.close';
 
-export type Locale = { code: string; name: string };
+export type Locale = { code: string; name: string; showMissingTranslationNotice?: boolean };
 
 export type TFunction = (
   // A workaround for literals + strings Typescript autosuggestion: 'https://github.com/microsoft/TypeScript/issues/29729'

package/src/core/utils/get-ai-prompt-link.ts

@@ -2,9 +2,12 @@ import type { AiPromptTarget } from '../types/prompt';
 
 type AiPromptEndpoint = { baseUrl: string; queryParam: string };
 
-const AI_PROMPT_ENDPOINTS: Record<AiPromptTarget, AiPromptEndpoint> = {
+type AiPromptLinkTarget = AiPromptTarget | 'grok';
+
+const AI_PROMPT_ENDPOINTS: Record<AiPromptLinkTarget, AiPromptEndpoint> = {
   chatgpt: { baseUrl: 'https://chat.openai.com', queryParam: 'q' },
   claude: { baseUrl: 'https://claude.ai/new', queryParam: 'q' },
+  grok: { baseUrl: 'https://grok.com/', queryParam: 'q' },
   // Encoding: https://cursor.com/docs/integrations/deeplinks
   cursor: { baseUrl: 'https://cursor.com/link/prompt', queryParam: 'text' },
 };
@@ -22,7 +25,7 @@ const AI_PROMPT_ENDPOINTS: Record<AiPromptTarget, AiPromptEndpoint> = {
  * // 'https://claude.ai/new?q=Summarize+this+page'
  * ```
  */
-export function getAiPromptLink(target: AiPromptTarget, prompt: string): string {
+export function getAiPromptLink(target: AiPromptLinkTarget, prompt: string): string {
   const { baseUrl, queryParam } = AI_PROMPT_ENDPOINTS[target];
   const url = new URL(baseUrl);
   url.searchParams.set(queryParam, prompt);

package/src/core/utils/mcp.ts

@@ -58,6 +58,10 @@ export function generateClaudeCodeCommand(config: McpConnectionParams): string {
   return `claude mcp add --transport http ${slugifyMcpServerName(config.serverName)} ${config.url}`;
 }
 
+export function generateGrokBuildCommand(config: McpConnectionParams): string {
+  return `grok mcp add --transport http ${slugifyMcpServerName(config.serverName)} ${config.url}`;
+}
+
 export function generateCodexCommand(config: McpConnectionParams): string {
   return `codex mcp add ${slugifyMcpServerName(config.serverName)} --url ${config.url}`;
 }

package/src/icons/GrokIcon/GrokIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M6.6345 9.6347L10.6239 6.6862C10.8195 6.5417 11.0991 6.598 11.1923 6.8226C11.6827 8.0067 11.4636 9.4297 10.4877 10.4067C9.5119 11.3837 8.1541 11.5979 6.9131 11.1099L5.5573 11.7384C7.5019 13.0691 9.8631 12.74 11.3387 11.2617C12.5091 10.0899 12.8716 8.4926 12.5327 7.0522L12.5357 7.0553C12.0442 4.9393 12.6566 4.0935 13.9109 2.364C13.9406 2.3229 13.9703 2.2819 14 2.2399L12.3493 3.8925V3.8874L6.6335 9.6357" />
+    <path d="M5.8113 10.3513C4.4156 9.0165 4.6562 6.9507 5.8471 5.7594C6.7277 4.8777 8.1705 4.5179 9.43 5.0469L10.7827 4.4215C10.539 4.2452 10.2266 4.0555 9.8682 3.9223C8.2483 3.2549 6.3089 3.587 4.9921 4.9044C3.7254 6.1726 3.3271 8.1225 4.0111 9.7864C4.5221 11.03 3.6844 11.9096 2.8407 12.7974C2.5417 13.1122 2.2417 13.4269 2 13.7601L5.8102 10.3523" />
+  </svg>
+);
+
+export const GrokIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/GrokIcon/GrokIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/McpIcon/McpIcon.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="14 13 150 154" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M23.5996 85.2532L86.2021 22.6507C94.8457 14.0071 108.86 14.0071 117.503 22.6507C126.147 31.2942 126.147 45.3083 117.503 53.9519L70.2254 101.23"
+      strokeWidth="11"
+      strokeLinecap="round"
+    />
+    <path
+      d="M70.8789 100.578L117.504 53.952C126.148 45.3083 140.163 45.3083 148.806 53.952L149.132 54.278C157.776 62.9216 157.776 76.9357 149.132 85.5792L92.5139 142.198C89.6327 145.079 89.6327 149.75 92.5139 152.631L104.14 164.257"
+      strokeWidth="11"
+      strokeLinecap="round"
+    />
+    <path
+      d="M101.853 38.3013L55.553 84.6011C46.9094 93.2447 46.9094 107.258 55.553 115.902C64.1966 124.546 78.2106 124.546 86.8543 115.902L133.154 69.6025"
+      strokeWidth="11"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
+export const McpIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/McpIcon/McpIcon',
+})`
+  path {
+    stroke: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/TranslateIcon/TranslateIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 24 24" fill="inherit" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M12.87 15.07L10.33 12.56L10.36 12.53C12.1 10.59 13.34 8.36 14.07 6H17V4H10V2H8V4H1V6H12.17C11.5 7.92 10.44 9.75 9 11.35C8.07 10.32 7.3 9.19 6.69 8H4.69C5.42 9.63 6.42 11.17 7.67 12.56L2.58 17.58L4 19L9 14L12.11 17.11L12.87 15.07ZM18.5 10H16.5L12 22H14L15.12 19H19.87L21 22H23L18.5 10ZM15.88 17L17.5 12.67L19.12 17H15.88Z" />
+  </svg>
+);
+
+export const TranslateIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/TranslateIcon/TranslateIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+  height: ${({ size }) => size || '20px'};
+  width: ${({ size }) => size || '20px'};
+`;

package/src/index.ts

@@ -46,6 +46,8 @@ export * from '@redocly/theme/components/Markdown/styles/heading-anchor';
 export * from '@redocly/theme/components/Markdown/styles/links';
 /* Admonition */
 export * from '@redocly/theme/components/Admonition/Admonition';
+/* MissingTranslationNotice */
+export * from '@redocly/theme/components/MissingTranslationNotice/MissingTranslationNotice';
 /* ApiOnboarding */
 export * from '@redocly/theme/components/ApiOnboarding/AppCustomAttributes';
 /* Navbar */
@@ -193,6 +195,8 @@ export * from '@redocly/theme/icons/SpinnerIcon/SpinnerIcon';
 export * from '@redocly/theme/icons/ChatGptIcon/ChatGptIcon';
 export * from '@redocly/theme/icons/CopyIcon/CopyIcon';
 export * from '@redocly/theme/icons/ClaudeIcon/ClaudeIcon';
+export * from '@redocly/theme/icons/GrokIcon/GrokIcon';
+export * from '@redocly/theme/icons/McpIcon/McpIcon';
 export * from '@redocly/theme/icons/CleanIcon/CleanIcon';
 export * from '@redocly/theme/icons/GraphqlIcon/GraphqlIcon';
 export * from '@redocly/theme/icons/DeselectIcon/DeselectIcon';

package/src/layouts/CodeWalkthroughLayout.tsx

@@ -5,6 +5,7 @@ import type { JSX } from 'react';
 
 import { H1_CLASS } from '@redocly/theme/core/constants';
 import { breakpoints } from '@redocly/theme/core/utils';
+import { MissingTranslationNotice } from '@redocly/theme/components/MissingTranslationNotice/MissingTranslationNotice';
 
 export type CodeWalkthroughLayoutProps = React.PropsWithChildren<{
   className?: string;
@@ -16,7 +17,10 @@ export function CodeWalkthroughLayout({
 }: CodeWalkthroughLayoutProps): JSX.Element {
   return (
     <LayoutWrapper data-component-name="Layout/CodeWalkthroughLayout" className={className}>
-      <ContentWrapper>{children}</ContentWrapper>
+      <ContentWrapper>
+        <Notice />
+        {children}
+      </ContentWrapper>
     </LayoutWrapper>
   );
 }
@@ -29,6 +33,12 @@ const LayoutWrapper = styled.div.attrs(({ className }) => ({
   width: 100%;
 `;
 
+const Notice = styled(MissingTranslationNotice)`
+  max-width: var(--md-content-max-width);
+  margin-left: auto;
+  margin-right: auto;
+`;
+
 const ContentWrapper = styled.section`
   width: 100%;
   --md-content-font-size: var(--font-size-lg);

package/src/layouts/DocumentationLayout.tsx

@@ -10,6 +10,7 @@ import { H1_CLASS } from '@redocly/theme/core/constants';
 import { CodeSnippetProvider } from '@redocly/theme/core/contexts/CodeSnippetContext';
 import { DocumentationLayoutTop } from '@redocly/theme/layouts/DocumentationLayoutTop';
 import { DocumentationLayoutBottom } from '@redocly/theme/layouts/DocumentationLayoutBottom';
+import { MissingTranslationNotice } from '@redocly/theme/components/MissingTranslationNotice/MissingTranslationNotice';
 
 type DocumentationLayoutProps = {
   tableOfContent: React.ReactNode;
@@ -48,6 +49,7 @@ export function DocumentationLayout({
       >
         <ContentWrapper>
           <DocumentationLayoutTop config={config} editPage={editPage} lastModified={lastModified} />
+          <MissingTranslationNotice />
           {children}
           <DocumentationLayoutBottom feedback={feedback} nextPage={nextPage} prevPage={prevPage} />
         </ContentWrapper>

package/src/markdoc/default.ts

@@ -33,6 +33,7 @@ import { icon } from '@redocly/theme/markdoc/tags/icon';
 import { connectMcp } from '@redocly/theme/markdoc/tags/connect-mcp';
 import { loginButton } from '@redocly/theme/markdoc/tags/login-button';
 import { diagram } from '@redocly/theme/markdoc/tags/diagram';
+import { visibility } from '@redocly/theme/markdoc/tags/visibility';
 import { prompt } from '@redocly/theme/markdoc/tags/prompt';
 
 export const tags = {
@@ -61,5 +62,6 @@ export const tags = {
   [connectMcp.tagName]: connectMcp.schema,
   [loginButton.tagName]: loginButton.schema,
   [diagram.tagName]: diagram.schema,
+  [visibility.tagName]: visibility.schema,
   [prompt.tagName]: prompt.schema,
 };

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

@@ -201,7 +201,7 @@ export function collectTogglesFromChildren(
         toggles[id] = {
           when: child.attributes.when,
           unless: child.attributes.unless,
-        } as TogglesMarkdocAttr;
+        };
       }
     }