@redocly/theme 0.64.0-next.3 → 0.64.0-next.4

package/lib/markdoc/components/MarkdownLink/MarkdownLink.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MarkdownLink = MarkdownLink;
+const react_1 = __importStar(require("react"));
+const contexts_1 = require("../../../core/contexts");
+const Link_1 = require("../../../components/Link/Link");
+function MarkdownLink(_a) {
+    var { href } = _a, props = __rest(_a, ["href"]);
+    const markdownLinkContext = (0, react_1.useContext)(contexts_1.MarkdownLinkContext);
+    const onClick = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = markdownLinkContext === null || markdownLinkContext === void 0 ? void 0 : markdownLinkContext.onMarkdownLinkClick) === null || _a === void 0 ? void 0 : _a.call(markdownLinkContext);
+    }, [markdownLinkContext]);
+    const linkProps = Object.assign(Object.assign({}, props), { languageInsensitive: true, onClick });
+    return react_1.default.createElement(Link_1.Link, Object.assign({ to: href }, linkProps));
+}
+//# sourceMappingURL=MarkdownLink.js.map

package/lib/markdoc/components/default.d.ts

@@ -2,7 +2,7 @@ export * from '../../markdoc/components/Admonition/Admonition';
 export * from '../../markdoc/components/InlineSvg/InlineSvg';
 export * from '../../markdoc/components/MarkdocExample/MarkdocExample';
 export * from '../../markdoc/components/Heading/Heading';
-export * from '../../markdoc/components/Mermaid/Mermaid';
+export * from '../../markdoc/components/Diagram/Diagram';
 export * from '../../markdoc/components/HtmlBlock/HtmlBlock';
 export * from '../../markdoc/components/Tabs/Tab';
 export * from '../../markdoc/components/Tabs/TabList';
@@ -22,3 +22,4 @@ export * from '../../markdoc/components/CodeGroup/CodeGroup';
 export * from '../../markdoc/components/Icon/Icon';
 export * from '../../markdoc/components/ConnectMCP/ConnectMCP';
 export * from '../../markdoc/components/LoginButton/LoginButton';
+export * from '../../markdoc/components/MarkdownLink/MarkdownLink';

package/lib/markdoc/components/default.js

@@ -18,7 +18,7 @@ __exportStar(require("../../markdoc/components/Admonition/Admonition"), exports)
 __exportStar(require("../../markdoc/components/InlineSvg/InlineSvg"), exports);
 __exportStar(require("../../markdoc/components/MarkdocExample/MarkdocExample"), exports);
 __exportStar(require("../../markdoc/components/Heading/Heading"), exports);
-__exportStar(require("../../markdoc/components/Mermaid/Mermaid"), exports);
+__exportStar(require("../../markdoc/components/Diagram/Diagram"), exports);
 __exportStar(require("../../markdoc/components/HtmlBlock/HtmlBlock"), exports);
 __exportStar(require("../../markdoc/components/Tabs/Tab"), exports);
 __exportStar(require("../../markdoc/components/Tabs/TabList"), exports);
@@ -38,4 +38,5 @@ __exportStar(require("../../markdoc/components/CodeGroup/CodeGroup"), exports);
 __exportStar(require("../../markdoc/components/Icon/Icon"), exports);
 __exportStar(require("../../markdoc/components/ConnectMCP/ConnectMCP"), exports);
 __exportStar(require("../../markdoc/components/LoginButton/LoginButton"), exports);
+__exportStar(require("../../markdoc/components/MarkdownLink/MarkdownLink"), exports);
 //# sourceMappingURL=default.js.map

package/lib/markdoc/default.d.ts

@@ -1,4 +1,5 @@
 export * from '../markdoc/attributes/code-snippet-file';
+export * from '../markdoc/attributes/diagram-file';
 export * from '../markdoc/attributes/img-src';
 export * from '../markdoc/attributes/img-srcset';
 export * from '../markdoc/attributes/relative-path';
@@ -24,6 +25,7 @@ import { codeGroup } from '../markdoc/tags/code-group';
 import { icon } from '../markdoc/tags/icon';
 import { connectMcp } from '../markdoc/tags/connect-mcp';
 import { loginButton } from '../markdoc/tags/login-button';
+import { diagram } from '../markdoc/tags/diagram';
 export declare const tags: {
     [admonition.tagName]: import("@markdoc/markdoc").Schema & {
         attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
@@ -125,4 +127,9 @@ export declare const tags: {
             resolver?: string;
         }>;
     };
+    [diagram.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
 };

package/lib/markdoc/default.js

@@ -39,6 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.tags = exports.components = void 0;
 /* Attributes */
 __exportStar(require("../markdoc/attributes/code-snippet-file"), exports);
+__exportStar(require("../markdoc/attributes/diagram-file"), exports);
 __exportStar(require("../markdoc/attributes/img-src"), exports);
 __exportStar(require("../markdoc/attributes/img-srcset"), exports);
 __exportStar(require("../markdoc/attributes/relative-path"), exports);
@@ -66,6 +67,7 @@ const code_group_1 = require("../markdoc/tags/code-group");
 const icon_1 = require("../markdoc/tags/icon");
 const connect_mcp_1 = require("../markdoc/tags/connect-mcp");
 const login_button_1 = require("../markdoc/tags/login-button");
+const diagram_1 = require("../markdoc/tags/diagram");
 exports.tags = {
     [admonition_1.admonition.tagName]: admonition_1.admonition.schema,
     [debug_1.debug.tagName]: debug_1.debug.schema,
@@ -87,5 +89,6 @@ exports.tags = {
     [icon_1.icon.tagName]: icon_1.icon.schema,
     [connect_mcp_1.connectMcp.tagName]: connect_mcp_1.connectMcp.schema,
     [login_button_1.loginButton.tagName]: login_button_1.loginButton.schema,
+    [diagram_1.diagram.tagName]: diagram_1.diagram.schema,
 };
 //# sourceMappingURL=default.js.map

package/lib/markdoc/tags/diagram.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const diagram: MarkdocSchemaWrapper;

package/lib/markdoc/tags/diagram.js

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.diagram = void 0;
+const markdoc_1 = __importDefault(require("@markdoc/markdoc"));
+const diagram_file_1 = require("../../markdoc/attributes/diagram-file");
+const DIAGRAM_TYPES = ['mermaid', 'plantuml', 'excalidraw'];
+const DIAGRAM_ALIGNMENTS = ['left', 'center', 'right'];
+exports.diagram = {
+    schema: {
+        attributes: {
+            file: { type: diagram_file_1.DiagramFile, required: true },
+            type: {
+                type: String,
+                required: true,
+                matches: DIAGRAM_TYPES,
+            },
+            align: {
+                type: String,
+                matches: DIAGRAM_ALIGNMENTS,
+            },
+            width: {
+                type: String,
+            },
+            rawContent: { type: String, render: false }, // internal — populated by resolver
+        },
+        render: 'Diagram',
+        selfClosing: true,
+        transform: (node, config) => {
+            const attributes = node.transformAttributes(config);
+            const rawContent = node.attributes.rawContent;
+            const diagramType = node.attributes.type;
+            if (typeof rawContent === 'string') {
+                return new markdoc_1.default.Tag('Diagram', Object.assign(Object.assign({}, attributes), { diagramType, diagramSource: rawContent }), []);
+            }
+            return new markdoc_1.default.Tag(node.tag, attributes, []);
+        },
+        validate(node) {
+            const errors = [];
+            const type = node.attributes.type;
+            if (type && !DIAGRAM_TYPES.includes(type)) {
+                errors.push({
+                    id: 'invalid-diagram-type',
+                    level: 'error',
+                    message: `Invalid diagram type "${type}". Must be one of: ${DIAGRAM_TYPES.join(', ')}`,
+                });
+            }
+            const align = node.attributes.align;
+            if (align && !DIAGRAM_ALIGNMENTS.includes(align)) {
+                errors.push({
+                    id: 'invalid-diagram-align',
+                    level: 'error',
+                    message: `Invalid diagram align "${align}". Must be one of: ${DIAGRAM_ALIGNMENTS.join(', ')}`,
+                });
+            }
+            return errors;
+        },
+    },
+    tagName: 'diagram',
+};
+//# sourceMappingURL=diagram.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.64.0-next.3",
+  "version": "0.64.0-next.4",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -63,7 +63,7 @@
     "vitest": "4.0.10",
     "vitest-when": "0.6.2",
     "webpack": "5.105.2",
-    "@redocly/realm-asyncapi-sdk": "0.10.0-next.0"
+    "@redocly/realm-asyncapi-sdk": "0.10.0-next.1"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",
@@ -81,7 +81,7 @@
     "openapi-sampler": "^1.7.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.46.0"
+    "@redocly/config": "0.46.1"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Catalog/CatalogTags.tsx

@@ -48,6 +48,7 @@ export function CatalogTags({
   if (shouldUseVariantWithTooltip) {
     const displayedItems = items.slice(0, itemsToShow);
     const remainingCount = items.length - itemsToShow;
+    const moreLabel = translate('catalog.tags.more', 'more');
 
     return (
       <Tooltip tip={items.join(', ')} placement="bottom" className="catalog">
@@ -70,7 +71,11 @@ export function CatalogTags({
             </Tag>
           ))}
 
-          {remainingCount > 0 && <MoreTagsButton>+ {remainingCount}</MoreTagsButton>}
+          {remainingCount > 0 && (
+            <MoreTagsButton>
+              + {remainingCount} <span data-translation-key="catalog.tags.more">{moreLabel}</span>
+            </MoreTagsButton>
+          )}
         </CatalogTagsWrapper>
       </Tooltip>
     );

package/src/components/LanguagePicker/LanguagePicker.tsx

@@ -52,17 +52,17 @@ export function LanguagePicker(props: LanguagePickerProps): JSX.Element | null {
       placement={props.placement}
       alignment={props.alignment}
       trigger={languagePickerButton}
+      dataAttributes={{
+        'data-component-name': 'LanguagePicker/LanguagePicker',
+        'data-current-locale': currentLocale.code,
+      }}
     >
       <DropdownMenu items={languageItems} />
     </LanguageDropdown>
   );
 }
 
-const LanguageDropdown = styled(Dropdown).attrs(() => ({
-  dataAttributes: {
-    'data-component-name': 'LanguagePicker/LanguagePicker',
-  },
-}))`
+const LanguageDropdown = styled(Dropdown)`
   display: none;
   height: auto;
   @media screen and (min-width: ${breakpoints.medium}) {

package/src/components/Search/SearchAiMessage.tsx

@@ -26,6 +26,17 @@ function MarkdownSegment({ text }: { text: string }): JSX.Element {
   const markdown = useMarkdownText(text);
   return <ResponseText as="div" children={markdown} data-testid="response-text" />;
 }
+function getToolCallDisplayText(toolName: string): {
+  inProgressText: string;
+  completedText: string;
+} {
+  return (
+    TOOL_CALL_DISPLAY_TEXT[toolName] ?? {
+      inProgressText: `Executing ${toolName}...`,
+      completedText: `${toolName} executed`,
+    }
+  );
+}
 
 export type SearchAiMessageProps = {
   role: AiSearchConversationRole;
@@ -121,17 +132,11 @@ function SearchAiMessageComponent({
                 if (segment.type === 'tool') {
                   const toolCallCompleted = Boolean(segment.toolCall.result);
 
-                  const toolCallCompletedText =
-                    TOOL_CALL_DISPLAY_TEXT[segment.toolCall.name]?.completedText ??
-                    `${translate('search.ai.toolResult.found', 'Found')} ${segment.toolCall.result?.documentCount ?? 0} ${translate('search.ai.toolResult.found.documents', 'documents')}`;
-
-                  const toolCallInProgressText =
-                    TOOL_CALL_DISPLAY_TEXT[segment.toolCall.name]?.inProgressText ??
-                    translate('search.ai.toolCall.searching', 'Searching...');
+                  const { inProgressText, completedText } = getToolCallDisplayText(
+                    segment.toolCall.name,
+                  );
 
-                  const toolCallDisplayText = toolCallCompleted
-                    ? toolCallCompletedText
-                    : toolCallInProgressText;
+                  const toolCallDisplayText = toolCallCompleted ? completedText : inProgressText;
 
                   return (
                     <ToolCallsInfoWrapper key={`tool-${index}`} data-testid="tool-calls-info">

package/src/components/SvgViewer/SvgViewer.tsx

@@ -129,9 +129,6 @@ export function SvgViewer({
 
   const handleWheel = useCallback(
     (e: WheelEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-
       setIsWheelZooming(true);
       if (wheelTimeoutRef.current) clearTimeout(wheelTimeoutRef.current);
       wheelTimeoutRef.current = setTimeout(() => setIsWheelZooming(false), 150);
@@ -186,7 +183,6 @@ export function SvgViewer({
 
   const handleTouchMove = useCallback(
     (e: ReactTouchEvent) => {
-      e.preventDefault();
       if (e.touches.length === 2 && pinchState) {
         const distance = getTouchDistance(e.touches);
         setScale(clampScale(pinchState.scale * (distance / pinchState.distance)));

package/src/components/SvgViewer/variables.ts

@@ -6,7 +6,7 @@ export const svgViewer = css`
    */
 
   --svg-viewer-overlay-bg-color: var(--bg-color-modal-overlay); // @presenter Color
-  --svg-viewer-bg-color: var(--bg-color); // @presenter Color
+  --svg-viewer-bg-color: var(--bg-color-raised); // @presenter Color
   --svg-viewer-border-radius: var(--border-radius-xl); // @presenter BorderRadius
   --svg-viewer-box-shadow: var(--bg-raised-shadow); // @presenter BoxShadow
 

package/src/core/constants/search.ts

@@ -46,9 +46,8 @@ export const AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
 
 export const SEARCH_DEBOUNCE_TIME_MS = 300;
 
-export const TOOL_CALL_DISPLAY_TEXT: Record<
-  ToolCallName,
-  { inProgressText: string; completedText: string }
+export const TOOL_CALL_DISPLAY_TEXT: Partial<
+  Record<string, { inProgressText: string; completedText: string }>
 > = {
   [ToolCallName.SearchDocumentation]: {
     inProgressText: 'Searching documentation...',

package/src/core/contexts/MarkdownLinkContext.tsx

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+export type MarkdownLinkClickHandler = () => void;
+
+export type MarkdownLinkContextValue = {
+  onMarkdownLinkClick?: MarkdownLinkClickHandler;
+};
+
+export const MarkdownLinkContext = createContext<MarkdownLinkContextValue | null>(null);

package/src/core/contexts/index.ts

@@ -1,4 +1,5 @@
 export * from './ThemeDataContext';
+export * from './MarkdownLinkContext';
 export * from './CodeWalkthrough/CodeWalkthroughControlsContext';
 export * from './CodeWalkthrough/CodeWalkthroughStepsContext';
 export * from './CodeSnippetContext';

package/src/core/styles/dark.ts

@@ -1,7 +1,6 @@
 import { css } from 'styled-components';
 
 import { scorecardDarkMode } from '@redocly/theme/components/Scorecard/variables.dark';
-import { mermaidDarkMode } from '@redocly/theme/markdoc/components/Mermaid/variables.dark'
 import { menuDarkMode } from '@redocly/theme/components/Menu/variables.dark';
 import { buttonDarkMode } from '@redocly/theme/components/Button/variables.dark';
 import { aiAssistantButtonDarkMode } from '@redocly/theme/components/Buttons/variables.dark';
@@ -16,7 +15,6 @@ 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 { svgViewerDarkMode } from '@redocly/theme/components/SvgViewer/variables.dark';
 
 import { activeBrandPaletteDark } from './palette.dark';
 
@@ -343,7 +341,6 @@ export const darkMode = css`
   ${tagDarkMode}
   ${statusCodeDarkMode}
   ${menuDarkMode}
-  ${mermaidDarkMode}
   ${scorecardDarkMode}
   ${replayDarkMode}
   ${switcherDarkMode}
@@ -353,7 +350,6 @@ export const darkMode = css`
   ${tooltipDarkMode}
   ${bannerDarkMode}
   ${admonitionDarkMode}
-  ${svgViewerDarkMode}
   ${badgesDarkMode}
   ${activeBrandPaletteDark}
   /**

package/src/core/styles/global.ts

@@ -28,7 +28,7 @@ import { productPicker } from '@redocly/theme/components/Product/variables';
 import { markdown } from '@redocly/theme/components/Markdown/variables';
 import { banner } from '@redocly/theme/components/Banner/variables';
 import { markdownTabs } from '@redocly/theme/markdoc/components/Tabs/variables';
-import { mermaid } from '@redocly/theme/markdoc/components/Mermaid/variables';
+import { diagram } from '@redocly/theme/markdoc/components/Diagram/variables';
 import { lastUpdated } from '@redocly/theme/components/LastUpdated/variables';
 import { logo } from '@redocly/theme/components/Logo/variables';
 import { statusCode } from '@redocly/theme/components/StatusCode/variables';
@@ -1303,7 +1303,7 @@ export const styles = css<{ palette?: string }>`
     ${logo}
     ${markdown}
     ${markdownTabs}
-    ${mermaid}
+    ${diagram}
     ${menu}
     ${mobileMenu}
     ${modal}

package/src/core/types/hooks.ts

@@ -23,8 +23,8 @@ import type {
   SearchFilterItem,
   SearchFacetQuery,
   AiSearchConversationItem,
-  ToolCallName,
   ContentSegment,
+  ToolCall,
 } from './search';
 import type { SubmitFeedbackParams } from './feedback';
 import type { TFunction } from './l10n';
@@ -125,12 +125,7 @@ export type ThemeHooks = {
     error: null | AiSearchError;
     conversation: AiSearchConversationItem[];
     setConversation: React.Dispatch<React.SetStateAction<AiSearchConversationItem[]>>;
-    toolCalls: Array<{
-      name: ToolCallName;
-      args: unknown;
-      position: number;
-      result?: { documentCount: number };
-    }>;
+    toolCalls: Array<ToolCall>;
     contentSegments: ContentSegment[];
   };
   useMarkdownText: (text: string) => React.ReactNode;

package/src/core/types/l10n.ts

@@ -99,9 +99,9 @@ export type TranslationKey =
   | 'search.ai.feedback.title'
   | 'search.ai.feedback.detailsPlaceholder'
   | 'search.ai.feedback.thanks'
-  | 'search.ai.toolResult.found'
-  | 'search.ai.toolResult.found.documents'
-  | 'search.ai.toolCall.searching'
+  | 'search.ai.toolCall.executed'
+  | 'search.ai.toolCall.executing'
+  | 'search.ai.toolCall.withArgs'
   | 'search.ai.button'
   | 'search.ai.label'
   | 'search.ai.disclaimer'
@@ -426,12 +426,12 @@ export type TranslationKey =
   | 'loaders.loading'
   | 'filter.dateRange.from'
   | 'filter.dateRange.to'
-  | 'mermaid.openFullscreen'
-  | 'mermaid.zoomIn'
-  | 'mermaid.zoomOut'
-  | 'mermaid.reset'
-  | 'mermaid.close'
-  | 'mermaid.viewer';
+  | 'diagram.openFullscreen'
+  | 'diagram.zoomIn'
+  | 'diagram.zoomOut'
+  | 'diagram.reset'
+  | 'diagram.close'
+  | 'diagram.viewer';
 
 export type Locale = { code: string; name: string };
 

package/src/core/types/search.ts

@@ -106,7 +106,7 @@ export type SearchAiMessageResource = {
 };
 
 export type ToolCall = {
-  name: ToolCallName;
+  name: string;
   args: unknown;
   position: number;
   result?: { documentCount: number };

package/src/markdoc/attributes/diagram-file.ts

@@ -0,0 +1,9 @@
+import type { CustomAttributeTypeInterface, ValidationError } from '@markdoc/markdoc';
+
+export class DiagramFile implements CustomAttributeTypeInterface {
+  validate(_value: string): ValidationError[] {
+    return [];
+  }
+
+  static resolver = 'diagramFile';
+}