@redocly/theme 0.70.0-next.1 → 0.70.0-next.11

package/lib/markdoc/components/Prompt/PromptBody.js

@@ -0,0 +1,99 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PromptBody = PromptBody;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const Button_1 = require("../../../components/Button/Button");
+const ChevronDownIcon_1 = require("../../../icons/ChevronDownIcon/ChevronDownIcon");
+const ChevronUpIcon_1 = require("../../../icons/ChevronUpIcon/ChevronUpIcon");
+const hooks_1 = require("../../../core/hooks");
+function PromptBody({ prompt, textRef, textLimit, isExpanded, hasHiddenText, onToggleExpanded, controls, className, }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    return (react_1.default.createElement(PromptBodyWrapper, { "data-component-name": "Markdoc/Prompt/PromptBody", className: className },
+        react_1.default.createElement(ZoneWrapper, null,
+            react_1.default.createElement(TextWrapper, { ref: textRef, $textLimit: textLimit }, prompt),
+            controls),
+        hasHiddenText || isExpanded ? (react_1.default.createElement(Button_1.Button, { variant: "ghost", size: "small", icon: isExpanded ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null), iconPosition: "right", onClick: onToggleExpanded }, isExpanded
+            ? translate('promptTag.showLess', 'Show less')
+            : translate('promptTag.showFullPrompt', 'Show full prompt'))) : null));
+}
+const PromptBodyWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--prompt-body-toggle-gap);
+`;
+const ZoneWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  gap: var(--prompt-body-gap);
+  padding: var(--prompt-body-padding-vertical) var(--prompt-body-padding-horizontal);
+  background-color: var(--prompt-body-bg-color);
+  border-radius: var(--prompt-body-border-radius);
+`;
+/* width: 0 keeps the nowrap text from widening the block; flex-grow gives the text the real width. */
+const TextWrapper = styled_components_1.default.div `
+  flex: 1 1 0;
+  width: 0;
+  min-width: 0;
+  white-space: pre-wrap;
+  overflow: visible;
+  overflow-wrap: anywhere;
+  font-size: var(--prompt-body-font-size);
+  line-height: var(--prompt-body-line-height);
+  color: var(--prompt-body-text-color);
+
+  ${({ $textLimit }) => $textLimit === 'maxLines' &&
+    (0, styled_components_1.css) `
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: var(--prompt-body-max-lines);
+      overflow: hidden;
+    `}
+
+  ${({ $textLimit }) => $textLimit === 'oneLine' &&
+    (0, styled_components_1.css) `
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    `}
+`;
+//# sourceMappingURL=PromptBody.js.map

package/lib/markdoc/components/Prompt/PromptCopyButton.d.ts

@@ -0,0 +1,10 @@
+import type { JSX } from 'react';
+export type PromptCopyButtonPlacement = 'header' | 'body' | 'standalone';
+export type PromptCopyButtonProps = {
+    prompt: string;
+    /** `header` next to the split button, `body` inside the prompt zone, `standalone` for the button-only variant. */
+    placement: PromptCopyButtonPlacement;
+    onCopy: () => void;
+    className?: string;
+};
+export declare function PromptCopyButton({ prompt, placement, onCopy, className, }: PromptCopyButtonProps): JSX.Element;

package/lib/markdoc/components/Prompt/PromptCopyButton.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PromptCopyButton = PromptCopyButton;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CopyButton_1 = require("../../../components/Buttons/CopyButton");
+const hooks_1 = require("../../../core/hooks");
+function PromptCopyButton({ prompt, placement, onCopy, className, }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    if (placement === 'standalone') {
+        return (react_1.default.createElement(CopyButton_1.CopyButton, { data: prompt, type: "compound", variant: "secondary", size: "small", buttonText: translate('promptTag.copy.buttonText', 'Copy prompt'), onCopyClick: onCopy, dataTestId: "prompt-copy-button", className: className }));
+    }
+    if (placement === 'header') {
+        return (react_1.default.createElement(HeaderCopyButtonWrapper, { data: prompt, variant: "outlined", size: "small", onCopyClick: onCopy, dataTestId: "prompt-header-copy-button", className: className }));
+    }
+    return (react_1.default.createElement(CopyButton_1.CopyButton, { data: prompt, variant: "text", size: "small", onCopyClick: onCopy, dataTestId: "prompt-copy-button", className: className }));
+}
+/* The outlined border adds to the box; the smaller padding keeps the 24px height of the sibling buttons. */
+const HeaderCopyButtonWrapper = (0, styled_components_1.default)(CopyButton_1.CopyButton) `
+  && .button {
+    --button-icon-padding: var(--prompt-header-copy-button-padding);
+  }
+`;
+//# sourceMappingURL=PromptCopyButton.js.map

package/lib/markdoc/components/Prompt/PromptHeader.d.ts

@@ -0,0 +1,9 @@
+import type { JSX, ReactNode } from 'react';
+export type PromptHeaderProps = {
+    title?: string;
+    icon?: string;
+    iconRawContent?: string;
+    controls?: ReactNode;
+    className?: string;
+};
+export declare function PromptHeader({ title, icon, iconRawContent, controls, className, }: PromptHeaderProps): JSX.Element;

package/lib/markdoc/components/Prompt/PromptHeader.js

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PromptHeader = PromptHeader;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const AiStarsIcon_1 = require("../../../icons/AiStarsIcon/AiStarsIcon");
+const GenericIcon_1 = require("../../../icons/GenericIcon/GenericIcon");
+function PromptHeader({ title, icon, iconRawContent, controls, className, }) {
+    return (react_1.default.createElement(PromptHeaderWrapper, { "data-component-name": "Markdoc/Prompt/PromptHeader", className: className },
+        react_1.default.createElement(IconWrapper, null, icon ? (react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: icon, rawContent: iconRawContent })) : (react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { color: "--prompt-icon-color" }))),
+        title ? react_1.default.createElement(TitleWrapper, null, title) : null,
+        controls ? react_1.default.createElement(ControlsWrapper, null, controls) : null));
+}
+const PromptHeaderWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--prompt-header-gap);
+`;
+const IconWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--prompt-icon-size);
+  height: var(--prompt-icon-size);
+  color: var(--prompt-icon-color);
+  --icon-width: var(--prompt-icon-size);
+  --icon-height: var(--prompt-icon-size);
+  --icon-color: var(--prompt-icon-color);
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+const TitleWrapper = styled_components_1.default.div `
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--prompt-title-font-size);
+  font-weight: var(--prompt-title-font-weight);
+  line-height: var(--prompt-title-line-height);
+  color: var(--prompt-title-text-color);
+`;
+const ControlsWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-left: auto;
+  gap: var(--prompt-header-actions-gap);
+`;
+//# sourceMappingURL=PromptHeader.js.map

package/lib/markdoc/components/Prompt/PromptShowHideButton.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+export type PromptShowHideButtonProps = {
+    isPromptVisible: boolean;
+    onToggle: () => void;
+    className?: string;
+};
+export declare function PromptShowHideButton({ isPromptVisible, onToggle, className, }: PromptShowHideButtonProps): JSX.Element;

package/lib/markdoc/components/Prompt/PromptShowHideButton.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PromptShowHideButton = PromptShowHideButton;
+const react_1 = __importDefault(require("react"));
+const Button_1 = require("../../../components/Button/Button");
+const ChevronDownIcon_1 = require("../../../icons/ChevronDownIcon/ChevronDownIcon");
+const ChevronUpIcon_1 = require("../../../icons/ChevronUpIcon/ChevronUpIcon");
+const hooks_1 = require("../../../core/hooks");
+const PromptToggleLabel_1 = require("../../../markdoc/components/Prompt/PromptToggleLabel");
+function PromptShowHideButton({ isPromptVisible, onToggle, className, }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const showPromptLabel = translate('promptTag.showPrompt', 'Show prompt');
+    const hidePromptLabel = translate('promptTag.hidePrompt', 'Hide prompt');
+    return (react_1.default.createElement(Button_1.Button, { "data-component-name": "Markdoc/Prompt/PromptShowHideButton", className: className, variant: "text", size: "small", icon: isPromptVisible ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null), iconPosition: "right", onClick: onToggle },
+        react_1.default.createElement(PromptToggleLabel_1.PromptToggleLabel, { active: isPromptVisible ? hidePromptLabel : showPromptLabel, inactive: isPromptVisible ? showPromptLabel : hidePromptLabel })));
+}
+//# sourceMappingURL=PromptShowHideButton.js.map

package/lib/markdoc/components/Prompt/PromptToggleLabel.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+export type PromptToggleLabelProps = {
+    active: string;
+    inactive: string;
+    className?: string;
+};
+export declare function PromptToggleLabel({ active, inactive, className, }: PromptToggleLabelProps): JSX.Element;

package/lib/markdoc/components/Prompt/PromptToggleLabel.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PromptToggleLabel = PromptToggleLabel;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+/* Both labels share one grid cell, so the toggle keeps the width of the longer label
+   and the buttons next to it do not move when the label changes. */
+function PromptToggleLabel({ active, inactive, className, }) {
+    return (react_1.default.createElement(PromptToggleLabelWrapper, { "data-component-name": "Markdoc/Prompt/PromptToggleLabel", className: className },
+        react_1.default.createElement("span", null, active),
+        react_1.default.createElement("span", { "aria-hidden": "true" }, inactive)));
+}
+const PromptToggleLabelWrapper = styled_components_1.default.span `
+  display: grid;
+  text-align: center;
+
+  > span {
+    grid-area: 1 / 1;
+  }
+
+  > span[aria-hidden='true'] {
+    visibility: hidden;
+  }
+`;
+//# sourceMappingURL=PromptToggleLabel.js.map

package/lib/markdoc/components/Prompt/variables.d.ts

@@ -0,0 +1 @@
+export declare const promptTag: import("styled-components").RuleSet<object>;

package/lib/markdoc/components/Prompt/variables.dark.d.ts

@@ -0,0 +1 @@
+export declare const promptTagDarkMode: import("styled-components").RuleSet<object>;

package/lib/markdoc/components/Prompt/variables.dark.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.promptTagDarkMode = void 0;
+const styled_components_1 = require("styled-components");
+exports.promptTagDarkMode = (0, styled_components_1.css) `
+  --prompt-body-bg-color: var(--color-brand-subtle-bg, var(--color-warm-grey-3)); // @presenter Color
+`;
+//# sourceMappingURL=variables.dark.js.map

package/lib/markdoc/components/Prompt/variables.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.promptTag = void 0;
+const styled_components_1 = require("styled-components");
+exports.promptTag = (0, styled_components_1.css) `
+  /**
+    * @tokens Prompt
+    **/
+  --prompt-bg-color: var(--bg-color); // @presenter Color
+  --prompt-border-color: var(--border-color-secondary); // @presenter Color
+  --prompt-border-width: var(--border-width); // @presenter Border
+  --prompt-border-radius: var(--border-radius-xl); // @presenter BorderRadius
+  --prompt-margin: var(--spacing-base) 0; // @presenter Spacing
+  --prompt-padding-vertical: var(--spacing-sm); // @presenter Spacing
+  --prompt-padding-horizontal: var(--spacing-base); // @presenter Spacing
+  --prompt-gap: var(--spacing-sm); // @presenter Spacing
+  --prompt-border-highlight-color-start: var(--search-ai-gradient-start-color, var(--search-ai-gradient-start-color-legacy)); // @presenter Color
+  --prompt-border-highlight-color-end: var(--search-ai-gradient-end-color, var(--search-ai-gradient-end-color-legacy)); // @presenter Color
+  --prompt-border-highlight-size: 120px;
+  --prompt-border-highlight-transition: opacity 0.2s ease-out;
+
+  --prompt-header-gap: var(--spacing-xs); // @presenter Spacing
+  --prompt-header-actions-gap: var(--spacing-xxs); // @presenter Spacing
+  --prompt-header-copy-button-padding: var(--spacing-xxs); // @presenter Spacing
+  --prompt-icon-size: 18px;
+  --prompt-icon-color: var(--color-primary-base, var(--color-warm-grey-11)); // @presenter Color
+  --prompt-title-font-size: var(--font-size-base); // @presenter FontSize
+  --prompt-title-font-weight: var(--font-weight-semibold); // @presenter FontWeight
+  --prompt-title-line-height: var(--line-height-base); // @presenter LineHeight
+  --prompt-title-text-color: var(--text-color-primary); // @presenter Color
+
+  --prompt-body-bg-color: var(--color-primary-bg, var(--color-warm-grey-2)); // @presenter Color
+  --prompt-body-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --prompt-body-padding-vertical: var(--spacing-xs); // @presenter Spacing
+  --prompt-body-padding-horizontal: var(--spacing-sm); // @presenter Spacing
+  --prompt-body-gap: var(--spacing-xxs); // @presenter Spacing
+  --prompt-body-font-size: var(--font-size-base); // @presenter FontSize
+  --prompt-body-line-height: var(--line-height-base); // @presenter LineHeight
+  --prompt-body-text-color: var(--text-color-primary); // @presenter Color
+  --prompt-body-max-lines: 5;
+  --prompt-body-toggle-gap: var(--spacing-xxs); // @presenter Spacing
+  // @tokens End
+`;
+//# sourceMappingURL=variables.js.map

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

@@ -152,7 +152,7 @@ function TabList({ childrenArray, size, activeTab, onTabChange, containerRef, on
         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);
+    const { dropdownPosition, isDropdownOpen, 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)),
@@ -163,11 +163,9 @@ function TabList({ childrenArray, size, activeTab, onTabChange, containerRef, on
                 return null;
             return renderTab(child, index, size, setTabRef, handleKeyboard, onTabClick);
         }),
-        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: () => {
+        hasOverflow && (react_1.default.createElement(exports.TabItem, { size: size, active: isMoreActive || showAsSelector, tabIndex: 0, className: isDropdownOpen ? 'dropdown-tab dropdown-tab-open' : 'dropdown-tab' },
+            react_1.default.createElement(DropdownWrapper, { $top: dropdownPosition.top, $left: dropdownPosition.left },
+                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, onOpen: () => setIsDropdownOpen(true), onClose: () => {
                         setIsDropdownOpen(false);
                         setDropdownPosition({});
                     } },
@@ -259,6 +257,10 @@ exports.TabListContainer = styled_components_1.default.ul `
         min-width: 0;
         max-width: 100%;
       }
+
+      &.dropdown-tab-open {
+        z-index: var(--dropdown-menu-z-index);
+      }
     }
   }
 `;

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

@@ -28,3 +28,4 @@ export * from '../../markdoc/components/Icon/Icon';
 export * from '../../markdoc/components/ConnectMCP/ConnectMCP';
 export * from '../../markdoc/components/LoginButton/LoginButton';
 export * from '../../markdoc/components/MarkdownLink/MarkdownLink';
+export * from '../../markdoc/components/Prompt/Prompt';

package/lib/markdoc/components/default.js

@@ -44,4 +44,5 @@ __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);
+__exportStar(require("../../markdoc/components/Prompt/Prompt"), exports);
 //# sourceMappingURL=default.js.map

package/lib/markdoc/default.d.ts

@@ -30,6 +30,7 @@ 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';
+import { prompt } from '../markdoc/tags/prompt';
 export declare const tags: {
     [accordion.tagName]: import("./tags/types").MarkdocTagSchema;
     [accordionGroup.tagName]: import("./tags/types").MarkdocTagSchema;
@@ -56,4 +57,5 @@ export declare const tags: {
     [connectMcp.tagName]: import("./tags/types").MarkdocTagSchema;
     [loginButton.tagName]: import("./tags/types").MarkdocTagSchema;
     [diagram.tagName]: import("./tags/types").MarkdocTagSchema;
+    [prompt.tagName]: import("./tags/types").MarkdocTagSchema;
 };

package/lib/markdoc/default.js

@@ -72,6 +72,7 @@ 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");
+const prompt_1 = require("../markdoc/tags/prompt");
 exports.tags = {
     [accordion_1.accordion.tagName]: accordion_1.accordion.schema,
     [accordion_group_1.accordionGroup.tagName]: accordion_group_1.accordionGroup.schema,
@@ -98,5 +99,6 @@ exports.tags = {
     [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,
+    [prompt_1.prompt.tagName]: prompt_1.prompt.schema,
 };
 //# sourceMappingURL=default.js.map

package/lib/markdoc/tags/code-walkthrough.d.ts

@@ -1,6 +1,6 @@
 import type { Node, RenderableTreeNode } from '@markdoc/markdoc';
 import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
-import type { CodeWalkthroughConditions, CodeWalkthroughFilter, TogglesMarkdocAttr, InputsMarkdocAttr } from '@redocly/config';
+import type { CodeWalkthroughConditions, CodeWalkthroughFilter, TogglesMarkdocAttr, InputsMarkdocAttr } from '../../core/types';
 export declare const codeWalkthrough: MarkdocSchemaWrapper;
 export declare function collectStepsFromChildren(children: RenderableTreeNode[], idx?: number): RenderableTreeNode[];
 export declare function collectTogglesFromChildren(children: Node[], toggles?: TogglesMarkdocAttr): TogglesMarkdocAttr;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.connectMcp = void 0;
 const constants_1 = require("../../core/constants");
+const utils_1 = require("../../core/utils");
 exports.connectMcp = {
     schema: {
         render: 'ConnectMCP',
@@ -19,6 +20,20 @@ exports.connectMcp = {
             options: {
                 type: Array,
                 default: constants_1.DEFAULT_MCP_OPTIONS,
+                validate(value) {
+                    if (!Array.isArray(value))
+                        return [];
+                    const unknownOptions = value.filter((option) => !(0, utils_1.isMCPOption)(option));
+                    if (unknownOptions.length === 0)
+                        return [];
+                    return [
+                        {
+                            id: 'invalid-connect-mcp-options',
+                            level: 'error',
+                            message: `Invalid connect-mcp options: ${unknownOptions.join(', ')}. Must be one of: ${constants_1.MCP_OPTIONS.join(', ')}`,
+                        },
+                    ];
+                },
             },
         },
         selfClosing: true,

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

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

package/lib/markdoc/tags/prompt.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prompt = void 0;
+const markdoc_1 = __importDefault(require("@markdoc/markdoc"));
+const constants_1 = require("../../core/constants");
+const ALLOWED_ACTIONS = Object.values(constants_1.AI_PROMPT_TARGETS);
+exports.prompt = {
+    schema: {
+        render: 'Prompt',
+        attributes: {
+            title: { type: String },
+            icon: { type: String, resolver: 'relativeOrCdnIcon' },
+            iconRawContent: { type: String, render: true }, // internal
+            actions: { type: Array, default: [] },
+            hidePrompt: { type: Boolean, default: false },
+            singleLine: { type: Boolean, default: false },
+            buttonOnly: { type: Boolean, default: false },
+            rawContent: { type: String, render: false, resolver: 'tagRawContent' }, // internal
+        },
+        transform(node, config) {
+            const attributes = node.transformAttributes(config);
+            const actions = Array.isArray(attributes.actions)
+                ? [...new Set(attributes.actions.filter((action) => ALLOWED_ACTIONS.includes(action)))]
+                : [];
+            const prompt = getRawBody(node);
+            return new markdoc_1.default.Tag('Prompt', Object.assign(Object.assign({}, attributes), { actions, prompt }), []);
+        },
+        validate(node) {
+            const errors = [];
+            const { actions } = node.attributes;
+            if (Array.isArray(actions)) {
+                for (const action of actions) {
+                    if (!ALLOWED_ACTIONS.includes(action)) {
+                        errors.push({
+                            id: 'prompt-unknown-action',
+                            level: 'error',
+                            message: `attribute "actions" contains unknown value "${action}"; allowed values: ${ALLOWED_ACTIONS.join(', ')}`,
+                        });
+                    }
+                }
+            }
+            return errors;
+        },
+        // The prompt is for human readers: it stays out of the .md page, llms.txt, and AI search.
+        renderForLlms: () => '',
+    },
+    tagName: constants_1.PROMPT_TAG,
+};
+function getRawBody(node) {
+    const rawContent = node.attributes.rawContent;
+    return typeof rawContent === 'string' ? rawContent : '';
+}
+//# sourceMappingURL=prompt.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.70.0-next.1",
+  "version": "0.70.0-next.11",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -42,7 +42,8 @@
   "devDependencies": {
     "@babel/core": "7.29.7",
     "@markdoc/markdoc": "0.5.2",
-    "@redocly/realm-asyncapi-sdk": "0.16.0-next.0",
+    "@redocly/realm-asyncapi-sdk": "0.16.0-next.5",
+    "@redocly/tooling-test-utils": "0.0.0",
     "@shikijs/types": "3.21.0",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
@@ -51,7 +52,6 @@
     "@types/lodash.debounce": "4.0.9",
     "@types/lodash.throttle": "4.1.9",
     "@types/node": "24.1.0",
-    "@types/nprogress": "0.2.3",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitest/coverage-v8": "4.1.11",
@@ -61,17 +61,14 @@
     "resize-observer-polyfill": "1.5.1",
     "rimraf": "5.0.7",
     "styled-components": "^6.4.2",
-    "ts-node": "10.9.2",
     "tsc-alias": "1.8.16",
-    "tsconfig-paths": "4.2.0",
-    "tsconfig-paths-webpack-plugin": "3.5.2",
     "typescript": "6.0.3",
     "vitest": "4.1.11",
     "vitest-when": "0.6.2",
     "webpack": "5.105.2"
   },
   "dependencies": {
-    "@redocly/config": "0.57.0",
+    "@redocly/config": "0.65.0",
     "@tanstack/react-query": "5.62.3",
     "@tanstack/react-virtual": "3.13.0",
     "@xyflow/react": "12.8.3",
@@ -83,7 +80,6 @@
     "jszip": "3.10.1",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "4.1.1",
-    "nprogress": "0.2.0",
     "openapi-sampler": "^1.7.6",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0"