@redocly/theme 0.70.0-next.8 → 0.70.0

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/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

@@ -2,7 +2,7 @@ import type { Node, RenderableTreeNode } from '@markdoc/markdoc';
 import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
 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 collectStepsFromChildren(children: RenderableTreeNode[]): RenderableTreeNode[];
 export declare function collectTogglesFromChildren(children: Node[], toggles?: TogglesMarkdocAttr): TogglesMarkdocAttr;
 export declare function collectInputsFromChildren(children: RenderableTreeNode[], inputs?: InputsMarkdocAttr): InputsMarkdocAttr;
 export declare function validateCodeWalkthroughCondition(conditions: CodeWalkthroughConditions, filters: Record<string, CodeWalkthroughFilter>, allToggles: string[]): string[];

package/lib/markdoc/tags/code-walkthrough.js

@@ -56,9 +56,7 @@ exports.codeWalkthrough = {
             const steps = collectStepsFromChildren(children);
             const inputs = collectInputsFromChildren(children);
             const toggles = collectTogglesFromChildren(node.children);
-            return new markdoc_1.default.Tag('CodeWalkthrough', Object.assign(Object.assign({}, attributes), { filters: node.attributes.filters || {}, filesets: node.attributes.resolvedFilesets || [], steps: steps.map((step) => {
-                    return Object.assign({}, ((step === null || step === void 0 ? void 0 : step.attributes) || {}));
-                }), inputs,
+            return new markdoc_1.default.Tag('CodeWalkthrough', Object.assign(Object.assign({}, attributes), { filters: node.attributes.filters || {}, filesets: node.attributes.resolvedFilesets || [], steps: steps.map((step) => step.attributes), inputs,
                 toggles }), children);
         },
         validate(node) {
@@ -147,14 +145,14 @@ exports.codeWalkthrough = {
         render: 'CodeWalkthrough',
     },
 };
-function collectStepsFromChildren(children, idx = 0) {
+function collectStepsFromChildren(children) {
     return children.flatMap((child) => {
         const isTag = markdoc_1.default.Tag.isTag(child);
         if (!isTag)
             return [];
         if (child.name === 'CodeStep')
             return [child];
-        return collectStepsFromChildren(child.children, idx);
+        return collectStepsFromChildren(child.children);
     });
 }
 function collectTogglesFromChildren(children, toggles = {}) {

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.8",
+  "version": "0.70.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -42,7 +42,7 @@
   "devDependencies": {
     "@babel/core": "7.29.7",
     "@markdoc/markdoc": "0.5.2",
-    "@redocly/realm-asyncapi-sdk": "0.16.0-next.4",
+    "@redocly/realm-asyncapi-sdk": "0.16.0",
     "@redocly/tooling-test-utils": "0.0.0",
     "@shikijs/types": "3.21.0",
     "@testing-library/react": "16.3.0",
@@ -52,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",
@@ -62,10 +61,7 @@
     "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",
@@ -84,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"

package/src/components/LoadProgressBar/LoadProgressBar.tsx

@@ -0,0 +1,113 @@
+import React, { useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+
+import { isLoadInProgress, subscribeToLoadProgress } from '@redocly/theme/core/utils';
+
+export type LoadProgressBarProps = {
+  /** Also shows the bar while the host's own navigation is pending. */
+  pending?: boolean;
+  className?: string;
+};
+
+const START = 0.08;
+const MAX_PENDING = 0.994;
+const TRICKLE_MS = 100;
+const SETTLE_MS = 200;
+// [below, step]: large steps at first, smaller ones near the end.
+const TRICKLE_STEPS = [
+  [0.2, 0.1],
+  [0.5, 0.04],
+  [0.8, 0.02],
+  [0.99, 0.005],
+] as const;
+
+function trickle(progress: number): number {
+  const step = TRICKLE_STEPS.find(([below]) => progress < below)?.[1] ?? 0;
+  return Math.min(progress + step, MAX_PENDING);
+}
+
+/** A top-of-page bar while a page load is pending. */
+export function LoadProgressBar({
+  pending = false,
+  className,
+}: LoadProgressBarProps): JSX.Element | null {
+  const loading = useSyncExternalStore(subscribeToLoadProgress, isLoadInProgress, () => false);
+  const active = pending || loading;
+  const [progress, setProgress] = useState<number | null>(null);
+  const [fading, setFading] = useState(false);
+  const shown = useRef(false);
+
+  useEffect(() => {
+    if (active) {
+      shown.current = true;
+      setFading(false);
+      setProgress((current) => (current === null || current === 1 ? START : current));
+      const timer = setInterval(
+        () => setProgress((current) => trickle(current ?? START)),
+        TRICKLE_MS,
+      );
+      return () => clearInterval(timer);
+    }
+    if (!shown.current) return undefined;
+
+    setProgress(1);
+    const fade = setTimeout(() => setFading(true), SETTLE_MS);
+    const hide = setTimeout(() => {
+      shown.current = false;
+      setProgress(null);
+      setFading(false);
+    }, SETTLE_MS * 2);
+    return () => {
+      clearTimeout(fade);
+      clearTimeout(hide);
+    };
+  }, [active]);
+
+  if (progress === null) return null;
+
+  // The id and class names come from the replaced nprogress library: custom styles target them.
+  return (
+    <LoadProgressBarWrapper
+      id="nprogress"
+      data-component-name="LoadProgressBar/LoadProgressBar"
+      className={className}
+      aria-hidden="true"
+      $fading={fading}
+    >
+      <Bar className="bar" $progress={progress}>
+        <Peg className="peg" />
+      </Bar>
+    </LoadProgressBarWrapper>
+  );
+}
+
+const LoadProgressBarWrapper = styled.div<{ $fading: boolean }>`
+  pointer-events: none;
+  opacity: ${({ $fading }) => ($fading ? 0 : 1)};
+  transition: opacity ${SETTLE_MS}ms linear;
+`;
+
+// The offset changes on each tick: as a styled rule, each value would add a class.
+const Bar = styled.div.attrs<{ $progress: number }>(({ $progress }) => ({
+  style: { transform: `translate3d(${($progress - 1) * 100}%, 0, 0)` },
+}))`
+  position: fixed;
+  z-index: var(--z-index-popover);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: var(--load-progress-bar-height);
+  background: var(--load-progress-bar-color);
+  transition: transform ${SETTLE_MS}ms ease;
+`;
+
+const Peg = styled.div`
+  position: absolute;
+  right: 0;
+  width: 100px;
+  height: 100%;
+  box-shadow: var(--load-progress-bar-shadow);
+  transform: rotate(3deg) translate(0, -4px);
+`;

package/src/core/constants/index.ts

@@ -11,3 +11,4 @@ export * from './feedback';
 export * from './heading';
 export * from './markdown';
 export * from './consent';
+export * from './prompt';