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

package/src/markdoc/components/Prompt/variables.ts

@@ -0,0 +1,41 @@
+import { css } from 'styled-components';
+
+export const promptTag = 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
+`;

package/src/markdoc/components/Tabs/TabList.tsx

@@ -193,10 +193,8 @@ export function TabList({
   // 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 (
     <TabListContainer role="tablist" ref={containerRef}>
@@ -216,15 +214,9 @@ export function TabList({
           size={size}
           active={isMoreActive || showAsSelector}
           tabIndex={0}
-          className="dropdown-tab"
+          className={isDropdownOpen ? 'dropdown-tab dropdown-tab-open' : 'dropdown-tab'}
         >
-          <DropdownWrapper
-            $top={dropdownPosition.top}
-            $left={dropdownPosition.left}
-            onClickCapture={() => {
-              setIsDropdownOpen(true);
-            }}
-          >
+          <DropdownWrapper $top={dropdownPosition.top} $left={dropdownPosition.left}>
             <FixedPositionDropdown
               ref={dropdownRef}
               trigger={
@@ -237,6 +229,7 @@ export function TabList({
               }
               alignment="start"
               withArrow
+              onOpen={() => setIsDropdownOpen(true)}
               onClose={() => {
                 setIsDropdownOpen(false);
                 setDropdownPosition({});
@@ -360,6 +353,10 @@ export const TabListContainer = styled.ul`
         min-width: 0;
         max-width: 100%;
       }
+
+      &.dropdown-tab-open {
+        z-index: var(--dropdown-menu-z-index);
+      }
     }
   }
 `;

package/src/markdoc/components/default.ts

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

package/src/markdoc/default.ts

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

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

@@ -10,7 +10,7 @@ import type {
   CodeWalkthroughFilterItem,
   TogglesMarkdocAttr,
   InputsMarkdocAttr,
-} from '@redocly/config';
+} from '@redocly/theme/core/types';
 
 import { CodeWalkthroughFilesets } from '@redocly/theme/markdoc/attributes/code-walkthrough-filesets';
 import { CodeWalkthroughFilters } from '@redocly/theme/markdoc/attributes/code-walkthrough-filters';

package/src/markdoc/tags/connect-mcp.ts

@@ -1,6 +1,7 @@
 import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
 
-import { DEFAULT_MCP_OPTIONS } from '@redocly/theme/core/constants';
+import { DEFAULT_MCP_OPTIONS, MCP_OPTIONS } from '@redocly/theme/core/constants';
+import { isMCPOption } from '@redocly/theme/core/utils';
 
 export const connectMcp: MarkdocSchemaWrapper = {
   schema: {
@@ -19,6 +20,20 @@ export const connectMcp: MarkdocSchemaWrapper = {
       options: {
         type: Array,
         default: DEFAULT_MCP_OPTIONS,
+        validate(value) {
+          if (!Array.isArray(value)) return [];
+
+          const unknownOptions = value.filter((option) => !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: ${MCP_OPTIONS.join(', ')}`,
+            },
+          ];
+        },
       },
     },
     selfClosing: true,

package/src/markdoc/tags/prompt.ts

@@ -0,0 +1,58 @@
+import markdoc from '@markdoc/markdoc';
+
+import type { Node, ValidationError } from '@markdoc/markdoc';
+import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
+
+import { AI_PROMPT_TARGETS, PROMPT_TAG } from '@redocly/theme/core/constants';
+
+const ALLOWED_ACTIONS: string[] = Object.values(AI_PROMPT_TARGETS);
+
+export const prompt: MarkdocSchemaWrapper = {
+  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.Tag('Prompt', { ...attributes, actions, prompt }, []);
+    },
+    validate(node) {
+      const errors: ValidationError[] = [];
+      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: PROMPT_TAG,
+};
+
+function getRawBody(node: Node): string {
+  const rawContent = node.attributes.rawContent;
+  return typeof rawContent === 'string' ? rawContent : '';
+}