@redocly/theme 0.59.0-rc.2 → 0.60.0-next.0

package/lib/markdoc/components/Tabs/TabList.js

@@ -44,47 +44,144 @@ const DropdownMenuItem_1 = require("../../../components/Dropdown/DropdownMenuIte
 const Button_1 = require("../../../components/Button/Button");
 const hooks_1 = require("../../../core/hooks");
 const utils_1 = require("../../../core/utils");
-function TabList({ childrenArray, size, activeTab, onTabChange, }) {
-    const tabsContainerRef = (0, react_1.useRef)(null);
-    const { allTabsHidden, overflowTabs, visibleTabs, handleKeyboard, onTabClick, setTabRef } = (0, hooks_1.useTabs)({
+/**
+ * Calculates optimal dropdown position relative to viewport to ensure visibility.
+ * Positions below the button by default, but moves above if insufficient space.
+ * Adjusts horizontal position to prevent overflow off screen edges.
+ */
+const calculateDropdownPosition = (buttonRect, dropdownRect) => {
+    const gap = 4;
+    const margin = 16;
+    const spaceBelow = window.innerHeight - buttonRect.bottom;
+    const spaceAbove = buttonRect.top;
+    // Position below button, or above if dropdown doesn't fit below
+    const top = spaceBelow < dropdownRect.height + gap && spaceAbove > spaceBelow
+        ? buttonRect.top - gap
+        : buttonRect.bottom + gap;
+    // Align with button left edge, adjust if overflows screen
+    const idealLeft = buttonRect.left;
+    const rightEdge = idealLeft + dropdownRect.width;
+    const overflowsRight = rightEdge > window.innerWidth - margin;
+    const left = overflowsRight
+        ? window.innerWidth - dropdownRect.width - margin
+        : Math.max(margin, idealLeft);
+    return { top, left };
+};
+/**
+ * Manages dropdown positioning and updates on scroll/resize events for TabList.
+ */
+const useDropdownPosition = (hasOverflow, dropdownRef) => {
+    const [dropdownPosition, setDropdownPosition] = (0, react_1.useState)({});
+    const [isDropdownOpen, setIsDropdownOpen] = (0, react_1.useState)(false);
+    const updateDropdownPosition = (0, react_1.useCallback)(() => {
+        if (!dropdownRef.current)
+            return;
+        const button = dropdownRef.current.querySelector('button');
+        const dropdownMenu = dropdownRef.current.querySelector('div:last-child');
+        if (!button || !dropdownMenu)
+            return;
+        const buttonRect = button.getBoundingClientRect();
+        const dropdownRect = dropdownMenu.getBoundingClientRect();
+        const position = calculateDropdownPosition(buttonRect, dropdownRect);
+        setDropdownPosition(position);
+    }, [dropdownRef]);
+    // Track when dropdown menu appears and recalculate position
+    (0, react_1.useEffect)(() => {
+        if (!hasOverflow || !isDropdownOpen || !dropdownRef.current)
+            return;
+        const dropdownMenu = dropdownRef.current.querySelector('div:last-child');
+        if (!dropdownMenu)
+            return;
+        // ResizeObserver tracks both initial render and size changes
+        const resizeObserver = new ResizeObserver(() => {
+            updateDropdownPosition();
+        });
+        resizeObserver.observe(dropdownMenu);
+        return () => resizeObserver.disconnect();
+    }, [hasOverflow, isDropdownOpen, dropdownRef, updateDropdownPosition]);
+    // Update position on scroll/resize
+    (0, react_1.useEffect)(() => {
+        if (!hasOverflow || !isDropdownOpen)
+            return;
+        window.addEventListener('scroll', updateDropdownPosition, true);
+        window.addEventListener('resize', updateDropdownPosition);
+        return () => {
+            window.removeEventListener('scroll', updateDropdownPosition, true);
+            window.removeEventListener('resize', updateDropdownPosition);
+        };
+    }, [hasOverflow, isDropdownOpen, updateDropdownPosition]);
+    return {
+        dropdownPosition,
+        isDropdownOpen,
+        setIsDropdownOpen,
+        setDropdownPosition,
+        updateDropdownPosition,
+    };
+};
+const renderTab = (child, index, size, setTabRef, handleKeyboard, onTabClick) => {
+    const { label, icon } = child.props;
+    const tabId = (0, utils_1.getTabId)(label, index);
+    return (react_1.default.createElement(Tab_1.Tab, { key: `key-${tabId}`, tabId: tabId, label: label, icon: icon, size: size, disabled: child.props.disable, setRef: (el) => setTabRef(el, index), onKeyDown: (event) => handleKeyboard(event, index), onClick: () => {
+            var _a, _b;
+            (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+            onTabClick(label);
+        } }));
+};
+function TabList({ childrenArray, size, activeTab, onTabChange, containerRef, onReadyChange, }) {
+    const dropdownRef = (0, react_1.useRef)(null);
+    const totalTabs = childrenArray.length;
+    const { overflowTabs, visibleTabs, handleKeyboard, onTabClick, setTabRef, isReady } = (0, hooks_1.useTabs)({
         activeTab,
         onTabChange,
-        containerRef: tabsContainerRef,
-        totalTabs: childrenArray.length,
+        containerRef,
+        totalTabs,
     });
+    (0, react_1.useEffect)(() => {
+        onReadyChange === null || onReadyChange === void 0 ? void 0 : onReadyChange(isReady);
+    }, [isReady, onReadyChange]);
     const { highlightStyle } = useHighlightBarAnimation({
         activeTab,
         childrenArray,
         overflowTabs,
-        tabsContainerRef,
+        tabsContainerRef: containerRef,
         visibleTabs,
     });
-    return (react_1.default.createElement(exports.TabListContainer, { role: "tablist", ref: tabsContainerRef },
+    const hasOverflow = overflowTabs.length > 0;
+    const isMoreActive = hasOverflow &&
+        overflowTabs.some((i) => childrenArray[i] && activeTab === childrenArray[i].props.label);
+    // Show as selector when no visible tabs (all tabs in dropdown)
+    const showAsSelector = visibleTabs.length === 0 && hasOverflow;
+    const { dropdownPosition, setIsDropdownOpen, setDropdownPosition } = useDropdownPosition(hasOverflow, dropdownRef);
+    return (react_1.default.createElement(exports.TabListContainer, { role: "tablist", ref: containerRef },
         react_1.default.createElement(HighlightBar, { size: size, style: highlightStyle },
             react_1.default.createElement("div", null)),
         childrenArray.map((child, index) => {
-            if (!visibleTabs.includes(index))
+            // Show all tabs before ready (for measurement), then only visible ones
+            const shouldRender = !isReady || visibleTabs.includes(index);
+            if (!shouldRender)
                 return null;
-            const { label, icon } = child.props;
-            const tabId = (0, utils_1.getTabId)(label, index);
-            return (react_1.default.createElement(Tab_1.Tab, { key: `key-${tabId}`, tabId: tabId, label: label, icon: icon, size: size, disabled: child.props.disable, setRef: (el) => setTabRef(el, index), onKeyDown: (event) => handleKeyboard(event, index), onClick: () => {
-                    var _a, _b;
-                    (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
-                    onTabClick(label);
-                } }));
+            return renderTab(child, index, size, setTabRef, handleKeyboard, onTabClick);
         }),
-        react_1.default.createElement(exports.TabItem, { size: size, active: overflowTabs.some((index) => activeTab === childrenArray[index].props.label), tabIndex: 0 }, overflowTabs.length > 0 && (react_1.default.createElement(Dropdown_1.Dropdown, { trigger: react_1.default.createElement(exports.TabButtonLink, { size: size, className: overflowTabs.some((index) => activeTab === childrenArray[index].props.label)
-                    ? 'active'
-                    : undefined }, allTabsHidden ? activeTab : 'More'), alignment: "start", withArrow: true },
-            react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, overflowTabs.map((index) => {
-                const { label } = childrenArray[index].props;
-                const tabId = (0, utils_1.getTabId)(label, index);
-                return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `more-${tabId}`, active: activeTab === label, onAction: () => {
-                        var _a, _b;
-                        (_b = (_a = childrenArray[index].props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
-                        onTabClick(index);
-                    }, disabled: childrenArray[index].props.disable }, label));
-            })))))));
+        hasOverflow && (react_1.default.createElement(exports.TabItem, { size: size, active: isMoreActive || showAsSelector, tabIndex: 0, className: "dropdown-tab" },
+            react_1.default.createElement(DropdownWrapper, { "$top": dropdownPosition.top, "$left": dropdownPosition.left, onClickCapture: () => {
+                    setIsDropdownOpen(true);
+                } },
+                react_1.default.createElement(FixedPositionDropdown, { ref: dropdownRef, trigger: react_1.default.createElement(exports.TabButtonLink, { size: size, className: isMoreActive || showAsSelector ? 'active' : undefined }, showAsSelector ? react_1.default.createElement(TabButtonText, null, activeTab) : 'More'), alignment: "start", withArrow: true, onClose: () => {
+                        setIsDropdownOpen(false);
+                        setDropdownPosition({});
+                    } },
+                    react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, overflowTabs.map((index) => {
+                        const child = childrenArray[index];
+                        if (!child)
+                            return null;
+                        const { label } = child.props;
+                        const tabId = (0, utils_1.getTabId)(label, index);
+                        return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `more-${tabId}`, active: activeTab === label, onAction: () => {
+                                var _a, _b;
+                                (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+                                onTabClick(index);
+                            }, disabled: child.props.disable }, label));
+                    }))))))));
 }
 const useHighlightBarAnimation = (props) => {
     const { childrenArray, activeTab, tabsContainerRef, visibleTabs, overflowTabs } = props;
@@ -99,18 +196,11 @@ const useHighlightBarAnimation = (props) => {
             setHighlightStyle({ left: 0, width: 0 });
             return;
         }
-        const activeTabElement = container.querySelector(`[data-label="${activeTab}"]`);
-        if (!activeTabElement)
-            return;
+        // Remove active class from all tabs first
         container.querySelectorAll('[data-label]').forEach((el) => {
             el.classList.remove('active');
         });
-        const { offsetLeft, offsetWidth } = activeTabElement;
-        if (visibleTabs.includes(activeIndex)) {
-            activeTabElement.classList.add('active');
-            setHighlightStyle({ left: offsetLeft, width: offsetWidth });
-            return;
-        }
+        // Check if active tab is in overflow first
         if (overflowTabs.includes(activeIndex)) {
             const moreButton = container.querySelector('button');
             if (!moreButton)
@@ -123,6 +213,16 @@ const useHighlightBarAnimation = (props) => {
             });
             return;
         }
+        // Active tab is visible, find its element
+        const activeTabElement = container.querySelector(`[data-label="${activeTab}"]`);
+        if (!activeTabElement)
+            return;
+        const { offsetLeft, offsetWidth } = activeTabElement;
+        if (visibleTabs.includes(activeIndex)) {
+            activeTabElement.classList.add('active');
+            setHighlightStyle({ left: offsetLeft, width: offsetWidth });
+            return;
+        }
     }, [activeTab, childrenArray, visibleTabs, overflowTabs, tabsContainerRef]);
     return { highlightStyle };
 };
@@ -132,15 +232,11 @@ exports.TabListContainer = styled_components_1.default.ul `
   gap: var(--md-tabs-gap);
   width: 100%;
   min-width: 0;
-  position: relative;
 
   &::before {
     content: '';
     position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
+    inset: 0;
     border: var(--md-tabs-border);
     border-width: var(--md-tabs-border-width);
     pointer-events: none;
@@ -148,11 +244,17 @@ exports.TabListContainer = styled_components_1.default.ul `
 
   && {
     padding: var(--md-tabs-padding);
-    margin-block-end: 0;
     margin: 0;
 
     & > li {
-      margin-bottom: 0px;
+      margin-bottom: 0;
+      flex-shrink: 0;
+
+      &.dropdown-tab {
+        flex-shrink: 1;
+        min-width: 0;
+        max-width: 100%;
+      }
     }
   }
 `;
@@ -162,7 +264,7 @@ exports.TabItem = styled_components_1.default.li `
   cursor: pointer;
   align-items: center;
   padding: var(--md-tabs-tab-wrapper-padding);
-  z-index: 1;
+  z-index: var(--z-index-surface);
 
   ${({ active, size }) => active
     ? (0, styled_components_1.css) `
@@ -199,6 +301,46 @@ exports.TabItem = styled_components_1.default.li `
     }
   }
 `;
+const DropdownWrapper = styled_components_1.default.div.attrs((props) => ({
+    style: Object.assign(Object.assign({}, (props.$top !== undefined && { '--dropdown-top': `${props.$top}px` })), (props.$left !== undefined && { '--dropdown-left': `${props.$left}px` })),
+})) `
+  position: static;
+  z-index: var(--z-index-raised);
+  width: 100%;
+  min-width: 0;
+`;
+const FixedPositionDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
+  position: static;
+  width: 100%;
+  min-width: 0;
+
+  > div:first-child {
+    width: 100%;
+    min-width: 0;
+  }
+
+  > div:last-child {
+    position: fixed;
+    top: var(--dropdown-top, 0);
+    left: var(--dropdown-left, 0);
+    right: auto;
+    bottom: auto;
+    transform: none;
+    padding-top: 0;
+    max-width: min(400px, calc(100vw - 32px));
+    max-height: calc(100vh - var(--dropdown-top, 0) - 32px);
+    overflow-y: auto;
+    z-index: var(--z-index-raised);
+
+    ul {
+      li {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+`;
 const HighlightBar = styled_components_1.default.div `
   position: absolute;
   top: 0;
@@ -218,11 +360,19 @@ const HighlightBar = styled_components_1.default.div `
     border-radius: var(--md-tabs-${({ size }) => size}-active-tab-border-radius);
   }
 `;
+const TabButtonText = styled_components_1.default.span `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+`;
 exports.TabButtonLink = (0, styled_components_1.default)(Button_1.Button) `
   color: var(--md-tabs-tab-text-color);
   font-family: var(--md-tabs-tab-font-family);
   font-style: var(--md-tabs-tab-font-style);
   background-color: var(--md-tabs-tab-bg-color);
+  width: 100%;
 
   transition:
     background-color 300ms ease-in-out,
@@ -241,9 +391,9 @@ exports.TabButtonLink = (0, styled_components_1.default)(Button_1.Button) `
 
   &.active {
     color: var(--md-tabs-active-tab-text-color);
-    font-size: var(--md-tabs-${({ size }) => size}-active-tab-font-size);
     font-family: var(--md-tabs-active-tab-font-family);
     font-style: var(--md-tabs-active-tab-font-style);
+    font-size: var(--md-tabs-${({ size }) => size}-active-tab-font-size);
     font-weight: var(--md-tabs-${({ size }) => size}-active-tab-font-weight);
     line-height: var(--md-tabs-${({ size }) => size}-active-tab-line-height);
     background-color: var(--md-tabs-active-tab-bg-color);
@@ -253,12 +403,12 @@ exports.TabButtonLink = (0, styled_components_1.default)(Button_1.Button) `
 
   &:hover {
     color: var(--md-tabs-hover-tab-text-color);
-    font-size: var(--md-tabs-${({ size }) => size}-hover-tab-font-size);
     font-family: var(--md-tabs-hover-tab-font-family);
     font-style: var(--md-tabs-hover-tab-font-style);
+    font-size: var(--md-tabs-${({ size }) => size}-hover-tab-font-size);
     font-weight: var(--md-tabs-${({ size }) => size}-hover-tab-font-weight);
-    background-color: var(--md-tabs-hover-tab-bg-color);
     line-height: var(--md-tabs-${({ size }) => size}-hover-tab-line-height);
+    background-color: var(--md-tabs-hover-tab-bg-color);
     border-radius: var(--md-tabs-${({ size }) => size}-hover-tab-border-radius);
     padding: var(--md-tabs-${({ size }) => size}-hover-tab-padding);
   }

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

@@ -17,7 +17,8 @@ type TabsProps = {
     className?: string;
     size: TabsSize;
     initialTab?: string;
+    forceReady?: boolean;
 };
-export declare function Tabs({ id, children, className, size, initialTab: propInitialTab, }: TabsProps): JSX.Element;
+export declare function Tabs({ id, children, className, size, initialTab: propInitialTab, forceReady, }: TabsProps): JSX.Element;
 export declare const TabContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/lib/markdoc/components/Tabs/Tabs.js

@@ -32,14 +32,12 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabContent = exports.TabsSize = void 0;
 exports.Tabs = Tabs;
 const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const react_router_dom_1 = require("react-router-dom");
+const styled_components_1 = __importStar(require("styled-components"));
 const hooks_1 = require("../../../core/hooks");
 const TabList_1 = require("../../../markdoc/components/Tabs/TabList");
 const utils_1 = require("../../../core/utils");
@@ -48,22 +46,62 @@ var TabsSize;
     TabsSize["SMALL"] = "small";
     TabsSize["MEDIUM"] = "medium";
 })(TabsSize || (exports.TabsSize = TabsSize = {}));
-function Tabs({ id, children, className, size, initialTab: propInitialTab, }) {
+function Tabs({ id, children, className, size, initialTab: propInitialTab, forceReady = false, }) {
     var _a, _b;
-    const [childrenArray, setChildrenArray] = (0, react_1.useState)(react_1.default.Children.toArray(children));
+    const childrenArray = react_1.default.Children.toArray(children);
+    const [isReady, setIsReady] = (0, react_1.useState)(false);
+    const containerRef = (0, react_1.useRef)(null);
     const initialTab = (_b = propInitialTab !== null && propInitialTab !== void 0 ? propInitialTab : (_a = childrenArray[0]) === null || _a === void 0 ? void 0 : _a.props.label) !== null && _b !== void 0 ? _b : '';
-    const { activeTab, setActiveTab } = (0, hooks_1.useActiveTab)({ tabsId: id, initialTab });
-    (0, react_1.useEffect)(() => {
-        setChildrenArray(react_1.default.Children.toArray(children));
-    }, [children]);
-    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdoc/Tabs/Tabs", className: className, key: id },
-        react_1.default.createElement(TabList_1.TabList, { size: size, childrenArray: childrenArray, activeTab: activeTab, onTabChange: setActiveTab }),
+    const labelsHash = childrenArray.map((c) => c.props.label).join('|');
+    const handleReadyChange = (0, react_1.useCallback)((ready) => {
+        setIsReady(ready);
+    }, []);
+    // Reset isReady when children change (new page/tabs)
+    // Use useLayoutEffect to run synchronously before paint
+    (0, react_1.useLayoutEffect)(() => {
+        setIsReady(false);
+    }, [labelsHash]);
+    const inRouter = (0, react_router_dom_1.useInRouterContext)();
+    return (react_1.default.createElement(TabsView, { id: id, className: className, size: size, childrenArray: childrenArray, initialTab: initialTab, useActiveTab: inRouter ? useActiveTabWithRouter : useActiveTabWithoutRouter, isReady: isReady || forceReady, labelsHash: labelsHash, containerRef: containerRef, onReadyChange: handleReadyChange }));
+}
+function TabsView({ id, className, size, childrenArray, useActiveTab, initialTab, isReady, labelsHash, containerRef, onReadyChange, }) {
+    const { activeTab, setActiveTab } = useActiveTab(initialTab, id, childrenArray);
+    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdoc/Tabs/Tabs", className: className, key: id, "$isReady": isReady },
+        react_1.default.createElement(TabList_1.TabList, { key: labelsHash, size: size, childrenArray: childrenArray, activeTab: activeTab, onTabChange: setActiveTab, containerRef: containerRef, onReadyChange: onReadyChange }),
         childrenArray.map((child, index) => {
             const { label } = child.props;
             const tabId = (0, utils_1.getTabId)(label, index);
             return label === activeTab ? (react_1.default.createElement(exports.TabContent, { key: `content-${tabId}`, id: `panel-${tabId}`, "aria-labelledby": `tab-${tabId}`, tabIndex: 0, role: "tabpanel" }, child.props.children)) : null;
         })));
 }
+/**
+ * Validates that the active tab exists in children and resets to initial tab if not found.
+ * Ensures tab state remains consistent when tab structure changes.
+ */
+function useValidateActiveTab(activeTab, setActiveTab, childrenArray, initialTab) {
+    (0, react_1.useEffect)(() => {
+        const availableLabels = childrenArray.map((child) => child.props.label);
+        if (activeTab && !availableLabels.includes(activeTab) && availableLabels.length > 0) {
+            setActiveTab(initialTab);
+        }
+    }, [childrenArray, activeTab, initialTab, setActiveTab]);
+}
+const useActiveTabWithRouter = (initialTab, tabsId, childrenArray) => {
+    const { activeTab, setActiveTab } = (0, hooks_1.useActiveTab)({ initialTab, tabsId });
+    useValidateActiveTab(activeTab, setActiveTab, childrenArray, initialTab);
+    return {
+        activeTab,
+        setActiveTab,
+    };
+};
+const useActiveTabWithoutRouter = (initialTab, _tabsId, childrenArray) => {
+    const [activeTab, setActiveTab] = (0, react_1.useState)(initialTab);
+    useValidateActiveTab(activeTab, setActiveTab, childrenArray, initialTab);
+    return {
+        activeTab,
+        setActiveTab,
+    };
+};
 const TabsContainer = styled_components_1.default.div `
   position: relative;
   color: var(--md-tabs-container-text-color);
@@ -80,6 +118,13 @@ const TabsContainer = styled_components_1.default.div `
     margin: 0;
     padding: 0;
   }
+
+  ${({ $isReady }) => !$isReady &&
+    (0, styled_components_1.css) `
+      opacity: 0;
+      pointer-events: none;
+      overflow: hidden;
+    `}
 `;
 exports.TabContent = styled_components_1.default.div `
   color: var(--md-tabs-content-text-color);

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

@@ -20,3 +20,4 @@ export * from '../../markdoc/components/CodeWalkthrough/CodeToggle';
 export * from '../../markdoc/components/CodeWalkthrough/CodeContainer';
 export * from '../../markdoc/components/CodeGroup/CodeGroup';
 export * from '../../markdoc/components/Icon/Icon';
+export * from '../../markdoc/components/ConnectMCP/ConnectMCP';

package/lib/markdoc/components/default.js

@@ -36,4 +36,5 @@ __exportStar(require("../../markdoc/components/CodeWalkthrough/CodeToggle"), exp
 __exportStar(require("../../markdoc/components/CodeWalkthrough/CodeContainer"), exports);
 __exportStar(require("../../markdoc/components/CodeGroup/CodeGroup"), exports);
 __exportStar(require("../../markdoc/components/Icon/Icon"), exports);
+__exportStar(require("../../markdoc/components/ConnectMCP/ConnectMCP"), exports);
 //# sourceMappingURL=default.js.map

package/lib/markdoc/default.d.ts

@@ -22,6 +22,7 @@ import { input } from '../markdoc/tags/input';
 import { toggle } from '../markdoc/tags/code-toggle';
 import { codeGroup } from '../markdoc/tags/code-group';
 import { icon } from '../markdoc/tags/icon';
+import { connectMcp } from '../markdoc/tags/connect-mcp';
 export declare const tags: {
     [admonition.tagName]: import("@markdoc/markdoc").Schema & {
         attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
@@ -113,4 +114,9 @@ export declare const tags: {
             resolver?: string;
         }>;
     };
+    [connectMcp.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
 };

package/lib/markdoc/default.js

@@ -64,6 +64,7 @@ const input_1 = require("../markdoc/tags/input");
 const code_toggle_1 = require("../markdoc/tags/code-toggle");
 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");
 exports.tags = {
     [admonition_1.admonition.tagName]: admonition_1.admonition.schema,
     [debug_1.debug.tagName]: debug_1.debug.schema,
@@ -83,5 +84,6 @@ exports.tags = {
     [input_1.input.tagName]: input_1.input.schema,
     [code_group_1.codeGroup.tagName]: code_group_1.codeGroup.schema,
     [icon_1.icon.tagName]: icon_1.icon.schema,
+    [connect_mcp_1.connectMcp.tagName]: connect_mcp_1.connectMcp.schema,
 };
 //# sourceMappingURL=default.js.map

package/lib/markdoc/tags/card.js

@@ -54,7 +54,6 @@ exports.card = {
             },
             to: { type: String, resolver: 'link' },
         },
-        children: ['paragraph', 'tag', 'list'],
     },
     tagName: 'card',
 };

package/lib/markdoc/tags/connect-mcp.d.ts

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

package/lib/markdoc/tags/connect-mcp.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.connectMcp = void 0;
+exports.connectMcp = {
+    schema: {
+        render: 'ConnectMCP',
+        attributes: {
+            placement: {
+                type: String,
+                default: 'bottom',
+                matches: ['top', 'bottom'],
+            },
+            alignment: {
+                type: String,
+                default: 'start',
+                matches: ['start', 'end'],
+            },
+            options: {
+                type: Array,
+                default: ['cursor', 'vscode', 'copy'],
+            },
+        },
+        selfClosing: true,
+    },
+    tagName: 'connect-mcp',
+};
+//# sourceMappingURL=connect-mcp.js.map

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@redocly/theme",
-  "version": "0.59.0-rc.2",
+  "version": "0.60.0-next.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
     "redocly"
   ],
   "author": "team@redocly.com",
-  "license": "SEE LICENSE IN LICENSE",
+  "license": "MIT",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "exports": {
@@ -44,7 +44,7 @@
     "@types/highlight-words-core": "1.2.3",
     "@types/lodash.debounce": "4.0.9",
     "@types/lodash.throttle": "4.1.9",
-    "@types/node": "22.15.3",
+    "@types/node": "22.18.13",
     "@types/nprogress": "0.2.3",
     "@types/react": "^19.1.4",
     "@types/react-dom": "^19.1.4",
@@ -84,11 +84,11 @@
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "4.1.1",
     "nprogress": "0.2.0",
-    "openapi-sampler": "1.6.1",
+    "openapi-sampler": "1.6.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/realm-asyncapi-sdk": "0.5.0-next.0",
-    "@redocly/config": "0.36.0-rc.1"
+    "@redocly/config": "0.38.0",
+    "@redocly/realm-asyncapi-sdk": "0.6.0-next.0"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Buttons/AIAssistantButton.tsx

@@ -21,7 +21,7 @@ interface AIAssistantButtonConfig {
 const defaultConfig: Required<AIAssistantButtonConfig> = {
   hide: false,
   inputType: 'button',
-  inputIcon: 'redocly',
+  inputIcon: 'sparkles',
 };
 
 const getIcon = (
@@ -56,8 +56,9 @@ const getIcon = (
 export function AIAssistantButton() {
   const [isOpen, setIsOpen] = useState(false);
   const themeConfig = useThemeConfig();
-  const { useTranslate } = useThemeHooks();
+  const { useTranslate, useTelemetry } = useThemeHooks();
   const { translate } = useTranslate();
+  const telemetry = useTelemetry();
 
   const buttonConfig = {
     ...defaultConfig,
@@ -75,6 +76,9 @@ export function AIAssistantButton() {
 
   const handleOpen = () => {
     setIsOpen(true);
+    telemetry.sendSearchAiOpenedMessage({
+      method: 'ai_trigger_button',
+    });
   };
 
   const handleClose = () => {