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

package/lib/components/Search/SearchItem.js

@@ -67,14 +67,7 @@ function SearchItem({ onClick, item, className, product, innerRef, }) {
     });
     return (react_1.default.createElement(SearchItemWrapper, { className: className, to: document.url, onClick: onClick, tabIndex: 0, innerRef: (el) => {
             ref.current = el;
-            if (!innerRef)
-                return;
-            if (typeof innerRef === 'function') {
-                innerRef(el);
-            }
-            else {
-                innerRef.current = el;
-            }
+            (0, utils_1.assignRef)(innerRef, el);
         }, "data-component-name": "Search/SearchItem" },
         react_1.default.createElement(SearchItemContent, null,
             react_1.default.createElement(SearchItemHeader, null,
@@ -83,7 +76,7 @@ function SearchItem({ onClick, item, className, product, innerRef, }) {
                     product.name)),
                 document.httpMethod ? (react_1.default.createElement(SearchItemOperation, null,
                     react_1.default.createElement(SearchItemOperationTag, { color: httpColor }, document.httpMethod.toUpperCase()),
-                    highlight.httpPath ? (0, SearchHighlight_1.searchHighlight)(highlight.httpPath) : document.httpPath)) : null,
+                    react_1.default.createElement("span", null, highlight.httpPath ? (0, SearchHighlight_1.searchHighlight)(highlight.httpPath) : document.httpPath))) : null,
                 react_1.default.createElement(SearchItemTitleWrapper, null,
                     react_1.default.createElement(SearchItemTitle, null, highlight.title ? (0, SearchHighlight_1.searchHighlight)(highlight.title) : document.title),
                     document.deprecated ? (react_1.default.createElement(SearchItemBadge, { deprecated: true }, translate('search.searchItem.deprecated', 'Deprecated'))) : null,
@@ -99,7 +92,15 @@ function SearchItem({ onClick, item, className, product, innerRef, }) {
                         (0, SearchHighlight_1.searchHighlight)(parameter.path.join(' → ')),
                         ` → `)) : null,
                     (0, SearchHighlight_1.searchHighlight)(parameter.name)),
-                react_1.default.createElement("div", null, (0, SearchHighlight_1.searchHighlight)(parameter.description)))) : (shouldShowPath && (react_1.default.createElement(SearchItemPath, null, highlight.path && highlight.path.length
+                react_1.default.createElement("div", null, (0, SearchHighlight_1.searchHighlight)(parameter.description)),
+                parameter.enum ? (react_1.default.createElement("div", null,
+                    translate('search.searchItem.enum', 'Enum'),
+                    ': ',
+                    (0, SearchHighlight_1.searchHighlight)(parameter.enum))) : null,
+                parameter.example ? (react_1.default.createElement("div", null,
+                    translate('search.searchItem.example', 'Example'),
+                    ': ',
+                    (0, SearchHighlight_1.searchHighlight)(parameter.example))) : null)) : (shouldShowPath && (react_1.default.createElement(SearchItemPath, null, highlight.path && highlight.path.length
                 ? (0, SearchHighlight_1.searchHighlight)(highlight.path.join(' → '))
                 : (_c = document.path) === null || _c === void 0 ? void 0 : _c.join(' → '))))),
         react_1.default.createElement(ReturnKeyIcon_1.ReturnKeyIcon, { color: "var(--search-item-text-color)" })));

package/lib/components/Search/SearchTrigger.js

@@ -32,18 +32,17 @@ 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.SearchTrigger = SearchTrigger;
 const React = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_components_1 = __importStar(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const Button_1 = require("../../components/Button/Button");
 const SearchIcon_1 = require("../../icons/SearchIcon/SearchIcon");
 const utils_1 = require("../../core/utils");
 const constants_1 = require("../../core/constants");
+const MAC_SHORTCUT_LABEL = '⌘K';
+const SHORTCUT_LABEL = 'Ctrl+K';
 function SearchTrigger({ onClick, className }) {
     var _a;
     var _b;
@@ -61,13 +60,16 @@ function SearchTrigger({ onClick, className }) {
         }
     }
     mainShortcutKey = mainShortcutKey === null || mainShortcutKey === void 0 ? void 0 : mainShortcutKey.toUpperCase();
-    const isMac = (0, utils_1.getUserAgent)().includes('Mac');
+    // A page can be cached and served to every platform, so the server renders an empty
+    // slot and the browser picks the label after hydration.
+    const [isMac, setIsMac] = React.useState(undefined);
+    React.useEffect(() => setIsMac((0, utils_1.getUserAgent)().includes('Mac')), []);
     return (React.createElement(SearchTriggerWrapper, { onClick: onClick, className: className, "data-component-name": "Search/SearchTrigger" },
         React.createElement(SearchTriggerButton, { "data-testid": "search-trigger-button", variant: "text", size: "medium", icon: React.createElement(SearchIcon_1.SearchIcon, null), "aria-label": "Search trigger button" }),
         React.createElement(SearchTriggerInput, { "data-testid": "search-trigger-input", "data-translation-key": "search.navbar.label" },
             React.createElement(SearchIcon_1.SearchIcon, null),
             translate('search.navbar.label', 'Search'),
-            mainShortcutKey === constants_1.DEFAULT_KEYBOARD_SHORTCUTS ? (React.createElement("span", null, isMac ? '⌘K' : 'Ctrl+K')) : (React.createElement("span", null, mainShortcutKey)))));
+            mainShortcutKey === constants_1.DEFAULT_KEYBOARD_SHORTCUTS ? (React.createElement(SearchTriggerShortcut, null, isMac === undefined ? null : (React.createElement(SearchTriggerShortcutLabel, null, isMac ? MAC_SHORTCUT_LABEL : SHORTCUT_LABEL)))) : (React.createElement("span", null, mainShortcutKey)))));
 }
 const SearchTriggerWrapper = styled_components_1.default.div `
   color: var(--search-trigger-color);
@@ -85,6 +87,35 @@ const SearchTriggerButton = (0, styled_components_1.default)(Button_1.Button) `
     display: none;
   }
 `;
+// The hidden copy of the wider label keeps the slot the same width before and after
+// hydration on every platform, so the trigger does not shift when the label appears.
+const SearchTriggerShortcut = styled_components_1.default.span `
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-end;
+
+  &::after {
+    content: '${SHORTCUT_LABEL}';
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+  }
+`;
+const shortcutAppear = (0, styled_components_1.keyframes) `
+  from {
+    opacity: 0;
+    filter: blur(2px);
+    transform: translateY(3px);
+  }
+`;
+const SearchTriggerShortcutLabel = styled_components_1.default.span `
+  animation: ${shortcutAppear} var(--search-trigger-shortcut-appear-duration)
+    var(--search-trigger-shortcut-appear-easing);
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+`;
 const SearchTriggerInput = styled_components_1.default.div `
   display: none;
   align-items: center;

package/lib/components/Search/variables.js

@@ -146,6 +146,8 @@ exports.search = (0, styled_components_1.css) `
   --search-trigger-bg-color: var(--navbar-bg-color);
   --search-trigger-icon-size: 16px;
   --search-trigger-line-height: var(--line-height-base);
+  --search-trigger-shortcut-appear-duration: 300ms;
+  --search-trigger-shortcut-appear-easing: ease-out;
 
   /**
   * @tokens AI Search
@@ -200,8 +202,21 @@ exports.search = (0, styled_components_1.css) `
   --search-ai-suggestions-title-font-weight: var(--font-weight-light);
   --search-ai-suggestions-text-color: var(--text-color-description);
 
-  --search-ai-thinking-dots-gap: 4px;
-  --search-ai-thinking-dots-padding: 4px 0;
+  --search-ai-activity-font-size: var(--font-size-base);
+  --search-ai-activity-line-height: var(--line-height-sm);
+  --search-ai-activity-count-font-size: var(--font-size-sm);
+  --search-ai-activity-count-bg-color: var(--border-color-secondary);
+  --search-ai-activity-text-color: var(--text-color-description);
+  --search-ai-activity-text-color-hover: var(--text-color-primary);
+  --search-ai-activity-detail-color: var(--text-color-secondary);
+  --search-ai-activity-shimmer-color: var(--text-color-primary);
+  --search-ai-activity-rail-color: var(--border-color-primary);
+  --search-ai-activity-icon-size: 14px;
+  --search-ai-activity-fade-duration: 200ms;
+  --search-ai-activity-expand-duration: 250ms;
+  --search-ai-activity-shimmer-duration: 2s;
+  --search-ai-activity-easing: cubic-bezier(0.32, 0.72, 0, 1);
+
   --search-ai-thinking-dot-size: 6px;
   --search-ai-thinking-dot-color: var(--search-ai-gradient);
 

package/lib/components/Segmented/Segmented.js

@@ -32,15 +32,35 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Segmented = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const typed_memo_1 = require("../../core/hoc/typed-memo");
+const hooks_1 = require("../../core/hooks");
 function SegmentedComponent({ options, onChange, value, className = '', size = 'regular' }, ref) {
-    return (react_1.default.createElement(SegmentedGroup, { ref: ref, "data-component-name": "Segmented/Segmented", className: `tag-grey ${size} ${className}`, role: "tablist", $size: size }, options.map((opt, index) => (react_1.default.createElement(react_1.default.Fragment, { key: index },
-        opt.divider,
-        react_1.default.createElement(SegmentedItem, { key: opt.label, role: "tab", title: opt.label, onClick: () => onChange(opt), $isActive: value == opt.value, $size: size }, opt.element || opt.label))))));
+    const { tabListProps, getTabProps } = (0, hooks_1.useTabList)({
+        count: options.length,
+        activeIndex: options.findIndex((opt) => value == opt.value),
+        onChange: (index) => onChange(options[index]),
+    });
+    return (react_1.default.createElement(SegmentedGroup, Object.assign({ ref: ref, "data-component-name": "Segmented/Segmented", className: `tag-grey ${size} ${className}` }, tabListProps, { $size: size }), options.map((opt, index) => {
+        const _a = getTabProps(index), { 'aria-controls': _noPanel } = _a, tabProps = __rest(_a, ['aria-controls']);
+        return (react_1.default.createElement(react_1.default.Fragment, { key: index },
+            opt.divider,
+            react_1.default.createElement(SegmentedItem, Object.assign({ key: opt.label }, tabProps, { title: opt.label, $isActive: value == opt.value, $size: size }), opt.element || opt.label)));
+    })));
 }
 exports.Segmented = (0, typed_memo_1.typedMemo)((0, react_1.forwardRef)(SegmentedComponent));
 const SegmentedGroup = styled_components_1.default.div `

package/lib/components/Select/Select.js

@@ -68,6 +68,7 @@ function Select(props) {
     const [filteredOptions, setFilteredOptions] = (0, react_1.useState)(options);
     const [stickyInputValue, setStickyInputValue] = (0, react_1.useState)(placeholder || '');
     const inputId = (0, react_1.useId)();
+    const listboxId = `${inputId}-listbox`;
     (0, hooks_1.useOutsideClick)(selectRef, () => {
         setDropdownActive(false);
     });
@@ -169,14 +170,20 @@ function Select(props) {
         return !!selectedOptions.find((selectOption) => selectOption.value === option.value || selectOption.value === option.label);
     };
     const renderDefaultInput = (inputRef) => {
-        return (react_1.default.createElement(SelectInput_1.SelectInput, { id: inputId, listboxId: inputId, selectedOptions: selectedOptions, searchValue: searchValue, placeholder: placeholder, stickyValue: stickyInputValue, multiple: multiple, searchable: searchable, clearable: clearable, customIcon: icon, inputRef: inputRef, onlyIcon: onlyIcon, clearHandler: clearHandler, searchHandler: searchHandler, inputBlurHandler: inputBlurHandler, inputFocusHandler: inputFocusHandler, clickHandler: inputClickHandler }));
+        return (react_1.default.createElement(SelectInput_1.SelectInput, { id: inputId, listboxId: listboxId, expanded: dropdownActive, selectedOptions: selectedOptions, searchValue: searchValue, placeholder: placeholder, stickyValue: stickyInputValue, multiple: multiple, searchable: searchable, clearable: clearable, customIcon: icon, inputRef: inputRef, onlyIcon: onlyIcon, clearHandler: clearHandler, searchHandler: searchHandler, inputBlurHandler: inputBlurHandler, inputFocusHandler: inputFocusHandler, clickHandler: inputClickHandler }));
     };
     return (react_1.default.createElement(exports.SelectWrapper, Object.assign({ "data-component-name": "Select/Select", ref: selectRef }, dataAttributes, { disabled: disabled, "data-testid": dataTestId, className: className, onKeyDown: (e) => {
             if (e.key === 'Enter' && document.activeElement === selectRef.current) {
                 e.preventDefault();
                 setDropdownActive(!dropdownActive);
             }
-        }, tabIndex: 0, "aria-haspopup": "listbox", "aria-expanded": dropdownActive, "aria-label": "Select option", onFocus: (e) => {
+        }, tabIndex: searchable ? undefined : 0 }, (!searchable && {
+        role: 'combobox',
+        'aria-haspopup': 'listbox',
+        'aria-expanded': dropdownActive,
+        'aria-controls': listboxId,
+        'aria-label': 'Select option',
+    }), { onFocus: (e) => {
             var _a;
             if (e.target === selectRef.current) {
                 (_a = selectInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -185,7 +192,7 @@ function Select(props) {
             e.preventDefault();
         } }),
         react_1.default.createElement(SelectDropdown, { closeOnClick: !multiple, withArrow: withArrow, trigger: renderInput ? renderInput() : renderDefaultInput(selectInputRef), triggerEvent: triggerEvent, placement: placement, alignment: alignment, active: !renderInput ? dropdownActive : undefined },
-            react_1.default.createElement(SelectDropdownMenu, { role: "listbox", footer: footer }, filteredOptions.length === 0 ? (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { disabled: true }, translate('select.noResults', 'No results'))) : (filteredOptions.map((option, index) => {
+            react_1.default.createElement(SelectDropdownMenu, { id: listboxId, role: "listbox", footer: footer }, filteredOptions.length === 0 ? (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { disabled: true }, translate('select.noResults', 'No results'))) : (filteredOptions.map((option, index) => {
                 return (react_1.default.createElement(react_1.Fragment, { key: index },
                     react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { onAction: () => selectHandler(option), prefix: !hideCheckmarkIcon &&
                             (checkmarkIconPosition ? checkmarkIconPosition === 'start' : false) &&

package/lib/components/Select/SelectInput.d.ts

@@ -13,6 +13,7 @@ type SelectInputProps<T> = {
     placeholder?: string;
     multiple?: boolean;
     searchable?: boolean;
+    expanded?: boolean;
     clearable?: boolean;
     inputRef?: React.ForwardedRef<HTMLInputElement>;
     clearHandler?: (value?: any) => void;

package/lib/components/Select/SelectInput.js

@@ -43,8 +43,9 @@ const react_1 = __importStar(require("react"));
 const Tag_1 = require("../../components/Tag/Tag");
 const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
 const Button_1 = require("../../components/Button/Button");
+const utils_1 = require("../../core/utils");
 function SelectInput(props) {
-    const { id, listboxId, onlyIcon, icon, customIcon, selectedOptions, placeholder, stickyValue, multiple, searchable, clearable, clearHandler, searchHandler, clickHandler, searchValue, inputBlurHandler, inputFocusHandler, inputRef: forwardedInputRef, } = props;
+    const { id, listboxId, onlyIcon, icon, customIcon, selectedOptions, placeholder, stickyValue, multiple, searchable, expanded, clearable, clearHandler, searchHandler, clickHandler, searchValue, inputBlurHandler, inputFocusHandler, inputRef: forwardedInputRef, } = props;
     const inputRef = (0, react_1.useRef)(null);
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     const onChangeHandler = (e) => {
@@ -87,22 +88,15 @@ function SelectInput(props) {
             if (!input)
                 return;
             inputRef.current = input;
-            if (!forwardedInputRef)
-                return;
-            if (typeof forwardedInputRef === 'function') {
-                forwardedInputRef(input);
-            }
-            else {
-                forwardedInputRef.current = input;
-            }
-        }, $width: multiple ? (!searchValue && selectedOptions.length ? '10px' : 'auto') : '100%', tabIndex: 0, onFocus: (e) => {
+            (0, utils_1.assignRef)(forwardedInputRef, input);
+        }, $width: multiple ? (!searchValue && selectedOptions.length ? '10px' : 'auto') : '100%', tabIndex: 0, role: "combobox", "aria-expanded": !!expanded, "aria-controls": listboxId, "aria-autocomplete": "list", "aria-label": "Select option", onFocus: (e) => {
             e.stopPropagation();
         }, onMouseDown: (e) => {
             e.preventDefault();
         } }));
     const simpleValue = selectedOptions.length ? (selectedOptions[0].label || selectedOptions[0].element || selectedOptions[0].value) : (react_1.default.createElement(SelectInternalInputPlaceholder, null, placeholder));
     const multipleValues = selectedOptions.length ? (selectTags) : (react_1.default.createElement(SelectInternalInputPlaceholder, null, placeholder));
-    return (react_1.default.createElement(exports.SelectInputWrapper, { id: id, onFocus: onFocusHandler, onClick: onClickHandler, role: "button", "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-owns": listboxId, "aria-label": "Select option" },
+    return (react_1.default.createElement(exports.SelectInputWrapper, { id: id, onFocus: onFocusHandler, onClick: onClickHandler },
         !onlyIcon && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(SelectInputValue, null, multiple ? (searchable ? (react_1.default.createElement(react_1.default.Fragment, null,
                 selectTags,

package/lib/components/Sidebar/Sidebar.js

@@ -38,8 +38,8 @@ const SidebarContent = styled_components_1.default.aside `
   flex-direction: column;
   width: 100%;
   -webkit-font-smoothing: antialiased;
-  top: calc(var(--navbar-height) + var(--banner-height));
-  height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  top: var(--navbar-offset);
+  height: calc(100vh - var(--navbar-offset));
   overflow-x: hidden;
   ${({ $opened }) => `
     display: ${$opened ? 'flex' : 'none'}

package/lib/components/SplitButton/SplitButton.js

@@ -1,10 +1,43 @@
 "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.SplitButton = SplitButton;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../../components/Button/Button");
 const ButtonGroup_1 = require("../../components/Button/ButtonGroup");
@@ -12,10 +45,11 @@ const Dropdown_1 = require("../../components/Dropdown/Dropdown");
 function SplitButton(props) {
     const { button, children, variant, size, tone, placement = 'bottom', alignment = 'end', portalled, closeOnSelect = true, disabled, toggleAriaLabel, onOpen, onClose, className, } = props;
     const hasMenu = typeof children === 'function' || react_1.default.Children.toArray(children).length > 0;
-    return (react_1.default.createElement(SplitButtonWrapper, { "data-component-name": "SplitButton/SplitButton", className: className },
+    const wrapperRef = (0, react_1.useRef)(null);
+    return (react_1.default.createElement(SplitButtonWrapper, { "data-component-name": "SplitButton/SplitButton", className: className, ref: wrapperRef },
         react_1.default.createElement(ButtonGroup_1.ButtonGroup, { variant: variant, size: size },
             button,
-            hasMenu ? (react_1.default.createElement(ToggleDropdown, { closeOnClick: closeOnSelect, placement: placement, alignment: alignment, portalled: portalled, withArrow: true, onOpen: onOpen, onClose: onClose, trigger: react_1.default.createElement(Button_1.Button, { "aria-label": toggleAriaLabel, "aria-haspopup": "menu", variant: variant, size: size, tone: tone, disabled: disabled }) }, children)) : null)));
+            hasMenu ? (react_1.default.createElement(ToggleDropdown, { closeOnClick: closeOnSelect, placement: placement, alignment: alignment, portalled: portalled, alignmentAnchorRef: wrapperRef, withArrow: true, onOpen: onOpen, onClose: onClose, trigger: react_1.default.createElement(Button_1.Button, { "aria-label": toggleAriaLabel, "aria-haspopup": "menu", variant: variant, size: size, tone: tone, disabled: disabled }) }, children)) : null)));
 }
 const SplitButtonWrapper = styled_components_1.default.div `
   position: relative;

package/lib/components/TableOfContent/TableOfContent.js

@@ -91,8 +91,8 @@ const TableOfContentHeader = styled_components_1.default.div `
 `;
 const TableOfContentItems = styled_components_1.default.div `
   position: sticky;
-  top: calc(var(--navbar-height) + var(--toc-offset-top));
-  max-height: calc(100vh - var(--navbar-height) - var(--toc-offset-top));
+  top: calc(var(--navbar-stack-height) + var(--toc-offset-top));
+  max-height: calc(100vh - var(--navbar-stack-height) - var(--toc-offset-top));
   overflow-y: auto;
   width: var(--toc-width);
   border-left: solid 1px var(--toc-border-color);

package/lib/core/constants/common.d.ts

@@ -15,6 +15,7 @@ export declare enum FEEDBACK_TYPES {
 }
 export declare const DEFAULT_FEEDBACK_TYPE = FEEDBACK_TYPES.SENTIMENT;
 export declare enum MenuItemType {
+    Select = "select",
     Separator = "separator",
     DrillDown = "drilldown",
     Group = "group",

package/lib/core/constants/common.js

@@ -21,6 +21,7 @@ var FEEDBACK_TYPES;
 exports.DEFAULT_FEEDBACK_TYPE = FEEDBACK_TYPES.SENTIMENT;
 var MenuItemType;
 (function (MenuItemType) {
+    MenuItemType["Select"] = "select";
     MenuItemType["Separator"] = "separator";
     MenuItemType["DrillDown"] = "drilldown";
     MenuItemType["Group"] = "group";

package/lib/core/constants/consent.d.ts

@@ -0,0 +1,2 @@
+import type { ConsentCategory } from '../types/consent';
+export declare const CONSENT_CATEGORIES: readonly ConsentCategory[];

package/lib/core/constants/consent.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CONSENT_CATEGORIES = void 0;
+exports.CONSENT_CATEGORIES = [
+    {
+        id: 'necessary',
+        locked: true,
+        titleTranslationKey: 'consent.category.necessary.title',
+        descriptionTranslationKey: 'consent.category.necessary.description',
+        titleDefault: 'Necessary',
+        descriptionDefault: 'Needed for the site to work: your consent choice, your color mode, and anonymous usage data.',
+    },
+    {
+        id: 'analytics',
+        locked: false,
+        titleTranslationKey: 'consent.category.analytics.title',
+        descriptionTranslationKey: 'consent.category.analytics.description',
+        titleDefault: 'Analytics',
+        descriptionDefault: 'Helps us understand which pages are useful.',
+    },
+    {
+        id: 'marketing',
+        locked: false,
+        titleTranslationKey: 'consent.category.marketing.title',
+        descriptionTranslationKey: 'consent.category.marketing.description',
+        titleDefault: 'Marketing',
+        descriptionDefault: 'Lets us measure which campaigns bring visitors to this site.',
+    },
+];
+//# sourceMappingURL=consent.js.map

package/lib/core/constants/index.d.ts

@@ -10,3 +10,5 @@ export * from './mcp';
 export * from './feedback';
 export * from './heading';
 export * from './markdown';
+export * from './consent';
+export * from './prompt';

package/lib/core/constants/index.js

@@ -26,4 +26,6 @@ __exportStar(require("./mcp"), exports);
 __exportStar(require("./feedback"), exports);
 __exportStar(require("./heading"), exports);
 __exportStar(require("./markdown"), exports);
+__exportStar(require("./consent"), exports);
+__exportStar(require("./prompt"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/constants/mcp.d.ts

@@ -1,5 +1,5 @@
-import type { MCPOption } from '../types/mcp';
 export declare const DEFAULT_MCP_SERVER_NAME = "mcp-server";
 export declare const MCP_ROUTE = "/mcp";
 export declare const PUBLIC_MCP_ROUTE = "/mcp-public";
-export declare const DEFAULT_MCP_OPTIONS: MCPOption[];
+export declare const MCP_OPTIONS: readonly ['cursor', 'vscode', 'claude', 'claude-code', 'codex', 'copy'];
+export declare const DEFAULT_MCP_OPTIONS: ("claude" | "claude-code" | "codex" | "copy" | "cursor" | "vscode")[];

package/lib/core/constants/mcp.js

@@ -1,14 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_MCP_OPTIONS = exports.PUBLIC_MCP_ROUTE = exports.MCP_ROUTE = exports.DEFAULT_MCP_SERVER_NAME = void 0;
+exports.DEFAULT_MCP_OPTIONS = exports.MCP_OPTIONS = exports.PUBLIC_MCP_ROUTE = exports.MCP_ROUTE = exports.DEFAULT_MCP_SERVER_NAME = void 0;
 exports.DEFAULT_MCP_SERVER_NAME = 'mcp-server';
 exports.MCP_ROUTE = '/mcp';
 exports.PUBLIC_MCP_ROUTE = '/mcp-public';
-exports.DEFAULT_MCP_OPTIONS = [
-    'cursor',
-    'vscode',
-    'claude-code',
-    'codex',
-    'copy',
-];
+exports.MCP_OPTIONS = ['cursor', 'vscode', 'claude', 'claude-code', 'codex', 'copy'];
+exports.DEFAULT_MCP_OPTIONS = [...exports.MCP_OPTIONS];
 //# sourceMappingURL=mcp.js.map

package/lib/core/constants/prompt.d.ts

@@ -0,0 +1,9 @@
+import type { AiPromptActionOption, AiPromptTarget } from '../types/prompt';
+export declare const PROMPT_TAG = "prompt";
+export declare const AI_PROMPT_TARGETS: Readonly<{
+    readonly CURSOR: 'cursor';
+    readonly CLAUDE: 'claude';
+    readonly CHATGPT: 'chatgpt';
+}>;
+export declare const PROMPT_NARROW_BLOCK_MAX_WIDTH = "440px";
+export declare const AI_PROMPT_ACTION_OPTIONS: Record<AiPromptTarget, AiPromptActionOption>;

package/lib/core/constants/prompt.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AI_PROMPT_ACTION_OPTIONS = exports.PROMPT_NARROW_BLOCK_MAX_WIDTH = exports.AI_PROMPT_TARGETS = exports.PROMPT_TAG = void 0;
+exports.PROMPT_TAG = 'prompt';
+exports.AI_PROMPT_TARGETS = Object.freeze({
+    CURSOR: 'cursor',
+    CLAUDE: 'claude',
+    CHATGPT: 'chatgpt',
+});
+/* Block width, not viewport width: a prompt in a narrow desktop column stacks like one on a
+   phone. The viewport `breakpoints` in core/utils/media-css.ts do not apply here. */
+exports.PROMPT_NARROW_BLOCK_MAX_WIDTH = '440px';
+exports.AI_PROMPT_ACTION_OPTIONS = {
+    cursor: {
+        titleTranslationKey: 'promptTag.openIn.cursor',
+        titleDefault: 'Open in Cursor',
+        descriptionTranslationKey: 'promptTag.openIn.cursorDescription',
+        descriptionDefault: 'Send this prompt to Cursor',
+    },
+    claude: {
+        titleTranslationKey: 'promptTag.openIn.claude',
+        titleDefault: 'Open in Claude',
+        descriptionTranslationKey: 'promptTag.openIn.claudeDescription',
+        descriptionDefault: 'Send this prompt to Claude',
+    },
+    chatgpt: {
+        titleTranslationKey: 'promptTag.openIn.chatgpt',
+        titleDefault: 'Open in ChatGPT',
+        descriptionTranslationKey: 'promptTag.openIn.chatgptDescription',
+        descriptionDefault: 'Send this prompt to ChatGPT',
+    },
+};
+//# sourceMappingURL=prompt.js.map

package/lib/core/constants/search.d.ts

@@ -13,7 +13,7 @@ export declare const AiSearchConversationRole: {
 export type AiSearchConversationRole = (typeof AiSearchConversationRole)[keyof typeof AiSearchConversationRole];
 export declare const AI_SEARCH_ERROR_CONFIG: Record<AiSearchError, AiSearchErrorConfig>;
 export declare const AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
-export declare const SEARCH_DEBOUNCE_TIME_MS = 300;
+export declare const SEARCH_DEBOUNCE_TIME_MS = 500;
 export declare const DEFAULT_KEYBOARD_SHORTCUTS = "\u2318+K,CTRL+K";
 export declare const TOOL_CALL_DISPLAY_TEXT: Partial<Record<string, {
     inProgressText: string;

package/lib/core/constants/search.js

@@ -38,12 +38,12 @@ exports.AI_SEARCH_ERROR_CONFIG = {
     [AiSearchError.ErrorProcessingResponse]: defaultErrorConfig,
 };
 exports.AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
-exports.SEARCH_DEBOUNCE_TIME_MS = 300;
+exports.SEARCH_DEBOUNCE_TIME_MS = 500;
 exports.DEFAULT_KEYBOARD_SHORTCUTS = '⌘+K,CTRL+K';
 exports.TOOL_CALL_DISPLAY_TEXT = {
     [search_1.ToolCallName.SearchDocumentation]: {
         inProgressText: 'Searching documentation...',
-        completedText: 'Search completed',
+        completedText: 'Searched the documentation',
     },
     [search_1.ToolCallName.ListApis]: {
         inProgressText: 'Browsing APIs...',
@@ -65,6 +65,10 @@ exports.TOOL_CALL_DISPLAY_TEXT = {
         inProgressText: 'Reading API description...',
         completedText: 'Read API description',
     },
+    [search_1.ToolCallName.Execute]: {
+        inProgressText: 'Running code...',
+        completedText: 'Ran code',
+    },
     [search_1.ToolCallName.DescribeTools]: {
         inProgressText: 'Discovering available tools...',
         completedText: 'Discovered available tools',

package/lib/core/contexts/PortalContainerContext.d.ts

@@ -0,0 +1,2 @@
+/** Where theme portals mount; set it inside a shadow root (the AI assistant web component), else `document.body`. */
+export declare const PortalContainerContext: import("react").Context<HTMLElement | null>;

package/lib/core/contexts/PortalContainerContext.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PortalContainerContext = void 0;
+const react_1 = require("react");
+/** Where theme portals mount; set it inside a shadow root (the AI assistant web component), else `document.body`. */
+exports.PortalContainerContext = (0, react_1.createContext)(null);
+//# sourceMappingURL=PortalContainerContext.js.map

package/lib/core/hooks/code-walkthrough/use-code-panel.d.ts

@@ -1,4 +1,4 @@
-import type { CodeWalkthroughFile } from '@redocly/config';
+import type { CodeWalkthroughFile } from '../../../core/types';
 export declare function useCodePanel(files: CodeWalkthroughFile[]): {
     readonly activeFile: CodeWalkthroughFile;
     readonly handleTabSwitch: (name: string) => void;

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-controls.d.ts

@@ -1,4 +1,4 @@
-import type { CodeWalkthroughFile, CodeWalkthroughFilter, InputsMarkdocAttr, TogglesMarkdocAttr, CodeWalkthroughFilterItem, CodeWalkthroughConditionsObject } from '@redocly/config';
+import type { CodeWalkthroughFile, CodeWalkthroughFilter, InputsMarkdocAttr, TogglesMarkdocAttr, CodeWalkthroughFilterItem, CodeWalkthroughConditionsObject } from '../../../core/types';
 export type ActiveFilter = {
     id: string;
     label?: string;

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-controls.js

@@ -42,7 +42,7 @@ function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
         Object.entries(newState).forEach(([id, control]) => {
             const existingControl = controlsState[id];
             if (existingControl && existingControl.type === control.type) {
-                // @ts-expect-error
+                // @ts-expect-error: TS2322 - the spread loses the link between `type` and `value` in the control union
                 newState[id] = Object.assign(Object.assign({}, control), { value: existingControl.value });
             }
         });

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-steps.d.ts

@@ -1,4 +1,4 @@
-import type { CodeWalkthroughStepAttr } from '@redocly/config';
+import type { CodeWalkthroughStepAttr } from '../../../core/types';
 import type { WalkthroughStepsState } from '../../types/code-walkthrough';
 type CodeWalkthroughStep = CodeWalkthroughStepAttr & {
     compRef?: HTMLElement;

package/lib/core/hooks/code-walkthrough/use-code-walkthrough.d.ts

@@ -1,5 +1,4 @@
-import type { CodeWalkthroughFile, CodeWalkthroughStepAttr, CodeWalkthroughAttr } from '@redocly/config';
-import type { WalkthroughStepsState } from '../../types/code-walkthrough';
+import type { CodeWalkthroughAttr, CodeWalkthroughFile, CodeWalkthroughStepAttr, WalkthroughStepsState } from '../../types/code-walkthrough';
 import { type WalkthroughControlsState } from './use-code-walkthrough-controls';
 export type WalkthroughState = {
     stepsState: WalkthroughStepsState;

package/lib/core/hooks/code-walkthrough/use-renderable-files.d.ts

@@ -1,4 +1,4 @@
-import type { CodeWalkthroughFile } from '@redocly/config';
+import type { CodeWalkthroughFile } from '../../../core/types';
 export type RenderableFile = CodeWalkthroughFile & {
     fileIcon: React.JSX.Element;
     parentFolder: string;