@redocly/theme 0.64.0-next.0 → 0.64.0-next.2

package/lib/components/Search/SearchDialog.js

@@ -43,6 +43,7 @@ const SearchInput_1 = require("../../components/Search/SearchInput");
 const SearchShortcut_1 = require("../../components/Search/SearchShortcut");
 const Button_1 = require("../../components/Button/Button");
 const utils_1 = require("../../core/utils");
+const Portal_1 = require("../../components/Portal/Portal");
 const SearchItem_1 = require("../../components/Search/SearchItem");
 const SearchRecent_1 = require("../../components/Search/SearchRecent");
 const SearchSuggestedPages_1 = require("../../components/Search/SearchSuggestedPages");
@@ -169,71 +170,60 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
     const showAiSearchButton = askAi && mode === 'search';
     const showAiSearchItem = showAiSearchButton && query;
     const showHeaderButtons = showSearchFilterButton || showAiSearchButton;
-    return (react_1.default.createElement(SearchOverlay, { "data-component-name": "Search/SearchDialog", ref: modalRef, onClick: handleOverlayClick, className: (0, utils_1.concatClassNames)('overlay', className) },
-        react_1.default.createElement(SearchDialogWrapper, { className: "scroll-lock", role: "dialog" },
-            react_1.default.createElement(SearchDialogHeader, null,
-                product && (react_1.default.createElement(SearchProductTag, { color: "product" },
-                    product.name,
-                    react_1.default.createElement(CloseIcon_1.CloseIcon, { onClick: () => setProduct(undefined), color: "--icon-color-additional" }))),
-                mode === 'search' ? (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(SearchInput_1.SearchInput, { value: query, onChange: setQuery, placeholder: translate('search.label', 'Search docs...'), isLoading: isSearchLoading, inputRef: searchInputRef, onSubmit: () => {
-                            var _a;
-                            if (isSearchLoading)
-                                return;
-                            if (showAiSearchButton && aiQueryRef.current) {
-                                aiQueryRef.current.focus();
-                            }
-                            else {
-                                (_a = firstSearchResultRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                            }
-                        }, "data-translation-key": "search.label" }),
-                    showHeaderButtons && (react_1.default.createElement(SearchHeaderButtons, null,
-                        showAiSearchButton ? (react_1.default.createElement(SearchAiButton, { icon: react_1.default.createElement(AiStarsGradientIcon_1.AiStarsGradientIcon, { color: "var(--search-ai-button-icon-color)" }), onClick: () => {
-                                setMode('ai-dialog');
-                                if (query.trim()) {
-                                    aiSearch.askQuestion(query);
+    return (react_1.default.createElement(Portal_1.Portal, null,
+        react_1.default.createElement(SearchOverlay, { "data-component-name": "Search/SearchDialog", ref: modalRef, onClick: handleOverlayClick, className: (0, utils_1.concatClassNames)('overlay', className) },
+            react_1.default.createElement(SearchDialogWrapper, { className: "scroll-lock", role: "dialog" },
+                react_1.default.createElement(SearchDialogHeader, null,
+                    product && (react_1.default.createElement(SearchProductTag, { color: "product" },
+                        product.name,
+                        react_1.default.createElement(CloseIcon_1.CloseIcon, { onClick: () => setProduct(undefined), color: "--icon-color-additional" }))),
+                    mode === 'search' ? (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(SearchInput_1.SearchInput, { value: query, onChange: setQuery, placeholder: translate('search.label', 'Search docs...'), isLoading: isSearchLoading, inputRef: searchInputRef, onSubmit: () => {
+                                var _a;
+                                if (isSearchLoading)
+                                    return;
+                                if (showAiSearchButton && aiQueryRef.current) {
+                                    aiQueryRef.current.focus();
                                 }
-                                telemetry.sendSearchAiOpenedMessage([
-                                    {
-                                        object: 'search',
-                                        method: 'ai_search_button',
-                                    },
-                                ]);
-                            } }, translate('search.ai.button', 'Search with AI'))) : null,
-                        showSearchFilterButton && (react_1.default.createElement(SearchFilterToggleButton, { icon: react_1.default.createElement(SettingsIcon_1.SettingsIcon, null), onClick: onFilterToggle })))))) : (react_1.default.createElement(AiDialogHeaderWrapper, null,
-                    initialMode === 'ai-dialog' ? (react_1.default.createElement(AiDialogHeaderTitle, null,
-                        react_1.default.createElement(AiStarsGradientIcon_1.AiStarsGradientIcon, { color: "var(--search-ai-button-icon-color)", size: "1.25rem" }),
-                        translate('search.ai.assistant', 'Assistant'))) : (react_1.default.createElement(Button_1.Button, { variant: "secondary", onClick: () => {
-                            setMode('search');
-                            aiSearch.clearConversation();
-                            focusSearchInput();
-                        }, tabIndex: 0, icon: react_1.default.createElement(ChevronLeftIcon_1.ChevronLeftIcon, null) }, isMobile
-                        ? translate('search.ai.back', 'Back')
-                        : translate('search.ai.backToSearch', 'Back to search'))),
-                    react_1.default.createElement(AiDialogHeaderActionsWrapper, null,
-                        react_1.default.createElement(Button_1.Button, { variant: "secondary", disabled: !aiSearch.conversation.length, onClick: () => {
-                                refreshSearchSessionId();
+                                else {
+                                    (_a = firstSearchResultRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                                }
+                            }, "data-translation-key": "search.label" }),
+                        showHeaderButtons && (react_1.default.createElement(SearchHeaderButtons, null,
+                            showAiSearchButton ? (react_1.default.createElement(SearchAiButton, { icon: react_1.default.createElement(AiStarsGradientIcon_1.AiStarsGradientIcon, { color: "var(--search-ai-button-icon-color)" }), onClick: () => {
+                                    setMode('ai-dialog');
+                                    if (query.trim()) {
+                                        aiSearch.askQuestion(query);
+                                    }
+                                    telemetry.sendSearchAiOpenedMessage([
+                                        {
+                                            object: 'search',
+                                            method: 'ai_search_button',
+                                        },
+                                    ]);
+                                } }, translate('search.ai.button', 'Search with AI'))) : null,
+                            showSearchFilterButton && (react_1.default.createElement(SearchFilterToggleButton, { icon: react_1.default.createElement(SettingsIcon_1.SettingsIcon, null), onClick: onFilterToggle })))))) : (react_1.default.createElement(AiDialogHeaderWrapper, null,
+                        initialMode === 'ai-dialog' ? (react_1.default.createElement(AiDialogHeaderTitle, null,
+                            react_1.default.createElement(AiStarsGradientIcon_1.AiStarsGradientIcon, { color: "var(--search-ai-button-icon-color)", size: "1.25rem" }),
+                            translate('search.ai.assistant', 'Assistant'))) : (react_1.default.createElement(Button_1.Button, { variant: "secondary", onClick: () => {
+                                setMode('search');
                                 aiSearch.clearConversation();
-                            }, tabIndex: 0, icon: react_1.default.createElement(EditIcon_1.EditIcon, null) }, translate('search.ai.newConversation', 'New conversation')),
-                        isMobile && react_1.default.createElement(Button_1.Button, { variant: "text", icon: react_1.default.createElement(CloseIcon_1.CloseIcon, null), onClick: handleClose }))))),
-            react_1.default.createElement(SearchDialogBody, null, mode === 'search' ? (react_1.default.createElement(react_1.default.Fragment, null,
-                advancedSearch && isFilterOpen && (react_1.default.createElement(SearchDialogBodyFilterView, null,
-                    react_1.default.createElement(SearchFilter_1.SearchFilter, { facets: facets, filter: filter, query: query, quickFilterFields: [groupField], onFilterChange: onFilterChange, onFilterReset: onFilterReset, onFacetReset: onFacetReset }))),
-                react_1.default.createElement(SearchDialogBodyMainView, null,
-                    react_1.default.createElement(SearchGroups_1.SearchGroups, { facets: facets, searchFilter: filter, onFilterChange: onFilterChange, onQuickFilterReset: onQuickFilterReset, groupField: groupField }),
-                    showAiSearchItem && (react_1.default.createElement(SearchWithAI, { onClick: () => {
-                            setMode('ai-dialog');
-                            if (query.trim()) {
-                                aiSearch.askQuestion(query);
-                            }
-                            telemetry.sendSearchAiOpenedMessage([
-                                {
-                                    object: 'search',
-                                    method: 'ai_search_input',
-                                },
-                            ]);
-                        }, onKeyDown: (e) => {
-                            if (e.key === 'Enter') {
+                                focusSearchInput();
+                            }, tabIndex: 0, icon: react_1.default.createElement(ChevronLeftIcon_1.ChevronLeftIcon, null) }, isMobile
+                            ? translate('search.ai.back', 'Back')
+                            : translate('search.ai.backToSearch', 'Back to search'))),
+                        react_1.default.createElement(AiDialogHeaderActionsWrapper, null,
+                            react_1.default.createElement(Button_1.Button, { variant: "secondary", disabled: !aiSearch.conversation.length, onClick: () => {
+                                    refreshSearchSessionId();
+                                    aiSearch.clearConversation();
+                                }, tabIndex: 0, icon: react_1.default.createElement(EditIcon_1.EditIcon, null) }, translate('search.ai.newConversation', 'New conversation')),
+                            isMobile && react_1.default.createElement(Button_1.Button, { variant: "text", icon: react_1.default.createElement(CloseIcon_1.CloseIcon, null), onClick: handleClose }))))),
+                react_1.default.createElement(SearchDialogBody, null, mode === 'search' ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    advancedSearch && isFilterOpen && (react_1.default.createElement(SearchDialogBodyFilterView, null,
+                        react_1.default.createElement(SearchFilter_1.SearchFilter, { facets: facets, filter: filter, query: query, quickFilterFields: [groupField], onFilterChange: onFilterChange, onFilterReset: onFilterReset, onFacetReset: onFacetReset }))),
+                    react_1.default.createElement(SearchDialogBodyMainView, null,
+                        react_1.default.createElement(SearchGroups_1.SearchGroups, { facets: facets, searchFilter: filter, onFilterChange: onFilterChange, onQuickFilterReset: onQuickFilterReset, groupField: groupField }),
+                        showAiSearchItem && (react_1.default.createElement(SearchWithAI, { onClick: () => {
                                 setMode('ai-dialog');
                                 if (query.trim()) {
                                     aiSearch.askQuestion(query);
@@ -244,60 +234,72 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
                                         method: 'ai_search_input',
                                     },
                                 ]);
+                            }, onKeyDown: (e) => {
+                                if (e.key === 'Enter') {
+                                    setMode('ai-dialog');
+                                    if (query.trim()) {
+                                        aiSearch.askQuestion(query);
+                                    }
+                                    telemetry.sendSearchAiOpenedMessage([
+                                        {
+                                            object: 'search',
+                                            method: 'ai_search_input',
+                                        },
+                                    ]);
+                                }
+                            }, ref: aiQueryRef, tabIndex: 0, role: "option", "aria-selected": "true" },
+                            react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { style: { flexShrink: 0 }, color: "var(--search-ai-icon-color)", size: "36px", background: "var(--search-ai-icon-bg-color)", margin: "0 var(--spacing-md) 0 0", borderRadius: "var(--border-radius-lg)" }),
+                            react_1.default.createElement(QueryWrapper, null,
+                                react_1.default.createElement(Typography_1.Typography, { fontWeight: "var(--font-weight-semibold)" }, query)),
+                            react_1.default.createElement(Typography_1.Typography, null,
+                                "- ",
+                                translate('search.ai.label', 'Ask AI assistant')),
+                            react_1.default.createElement(ReturnKeyIcon_1.ReturnKeyIcon, { color: "var(--search-item-text-color)" }))),
+                        showResults ? (searchKeysWithResults.length ? (searchKeysWithResults.map((key, searchGroupKeyIdx) => {
+                            const searchResultItems = items[key];
+                            if (searchResultItems === null || searchResultItems === void 0 ? void 0 : searchResultItems.length) {
+                                return (react_1.default.createElement(react_1.Fragment, { key: key },
+                                    react_1.default.createElement(SearchGroupTitle, { "data-testid": "search-group-title" }, key),
+                                    searchResultItems.map((item, idx, resultsArr) => mapItem(item, idx, resultsArr, searchGroupKeyIdx === 0 ? firstSearchResultRef : undefined)),
+                                    showLoadMore(key, searchResultItems.length || 0) && (react_1.default.createElement(SearchGroupFooter, { tabIndex: 0, "data-translation-key": "search.showMore", onKeyDown: (e) => {
+                                            if (e.key === 'Enter') {
+                                                setLoadMore({
+                                                    groupKey: key,
+                                                    offset: searchResultItems.length || 0,
+                                                });
+                                            }
+                                        }, onClick: () => setLoadMore({
+                                            groupKey: key,
+                                            offset: searchResultItems.length || 0,
+                                        }) }, translate('search.showMore', 'Show more')))));
                             }
-                        }, ref: aiQueryRef, tabIndex: 0, role: "option", "aria-selected": "true" },
-                        react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { style: { flexShrink: 0 }, color: "var(--search-ai-icon-color)", size: "36px", background: "var(--search-ai-icon-bg-color)", margin: "0 var(--spacing-md) 0 0", borderRadius: "var(--border-radius-lg)" }),
-                        react_1.default.createElement(QueryWrapper, null,
-                            react_1.default.createElement(Typography_1.Typography, { fontWeight: "var(--font-weight-semibold)" }, query)),
-                        react_1.default.createElement(Typography_1.Typography, null,
-                            "- ",
-                            translate('search.ai.label', 'Ask AI assistant')),
-                        react_1.default.createElement(ReturnKeyIcon_1.ReturnKeyIcon, { color: "var(--search-item-text-color)" }))),
-                    showResults ? (searchKeysWithResults.length ? (searchKeysWithResults.map((key, searchGroupKeyIdx) => {
-                        const searchResultItems = items[key];
-                        if (searchResultItems === null || searchResultItems === void 0 ? void 0 : searchResultItems.length) {
-                            return (react_1.default.createElement(react_1.Fragment, { key: key },
-                                react_1.default.createElement(SearchGroupTitle, { "data-testid": "search-group-title" }, key),
-                                searchResultItems.map((item, idx, resultsArr) => mapItem(item, idx, resultsArr, searchGroupKeyIdx === 0 ? firstSearchResultRef : undefined)),
-                                showLoadMore(key, searchResultItems.length || 0) && (react_1.default.createElement(SearchGroupFooter, { tabIndex: 0, "data-translation-key": "search.showMore", onKeyDown: (e) => {
-                                        if (e.key === 'Enter') {
-                                            setLoadMore({
-                                                groupKey: key,
-                                                offset: searchResultItems.length || 0,
-                                            });
-                                        }
-                                    }, onClick: () => setLoadMore({
-                                        groupKey: key,
-                                        offset: searchResultItems.length || 0,
-                                    }) }, translate('search.showMore', 'Show more')))));
-                        }
-                        return null;
-                    })) : isSearchLoading ? (react_1.default.createElement(SearchMessage, { "data-translation-key": "search.loading" },
-                        react_1.default.createElement(SpinnerLoader_1.SpinnerLoader, { size: "26px", color: "var(--search-input-icon-color)" }),
-                        translate('search.loading', 'Loading...'))) : (react_1.default.createElement(SearchMessage, { "data-translation-key": "search.noResults" },
-                        react_1.default.createElement("b", null, translate('search.noResults.title', 'No results'))))) : (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(SearchRecent_1.SearchRecent, { onSelect: (query, index) => {
-                                telemetry.sendSearchRecentClickedMessage([
-                                    {
-                                        object: 'search',
-                                        query,
-                                        index: index.toString(),
-                                        searchSessionId,
-                                    },
-                                ]);
-                                setQuery(query);
-                                focusSearchInput();
-                            } }),
-                        react_1.default.createElement(SearchSuggestedPages_1.SearchSuggestedPages, null)))))) : (react_1.default.createElement(SearchAiDialog_1.SearchAiDialog, { initialMessage: query, response: aiSearch.response, isGeneratingResponse: aiSearch.isGeneratingResponse, error: aiSearch.error, resources: aiSearch.resources, conversation: aiSearch.conversation, setConversation: aiSearch.setConversation, onMessageSent: aiSearch.askQuestion, toolCalls: aiSearch.toolCalls, contentSegments: aiSearch.contentSegments }))),
-            react_1.default.createElement(SearchDialogFooter, null, mode === 'ai-dialog' ? (react_1.default.createElement(AiDisclaimer, null, translate('search.ai.disclaimer', 'AI search might provide incomplete or incorrect results. Verify important information.'))) : (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(SearchShortcuts, null,
-                    react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.navigate", combination: "Tab", text: translate('search.keys.navigate', 'to navigate') }),
-                    react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.select", combination: "\u23CE", text: translate('search.keys.select', 'to select') }),
-                    react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.exit", combination: "Esc", text: translate('search.keys.exit', 'to exit') })),
-                isSearchLoading && (react_1.default.createElement(SearchLoading, null,
-                    react_1.default.createElement(SpinnerLoader_1.SpinnerLoader, { size: "16px", color: "var(--search-input-icon-color)" }),
-                    translate('search.loading', 'Loading...'))),
-                react_1.default.createElement(SearchCancelButton, { "data-translation-key": "search.cancel", variant: "secondary", size: "small", onClick: handleClose }, translate('search.cancel', 'Cancel'))))))));
+                            return null;
+                        })) : isSearchLoading ? (react_1.default.createElement(SearchMessage, { "data-translation-key": "search.loading" },
+                            react_1.default.createElement(SpinnerLoader_1.SpinnerLoader, { size: "26px", color: "var(--search-input-icon-color)" }),
+                            translate('search.loading', 'Loading...'))) : (react_1.default.createElement(SearchMessage, { "data-translation-key": "search.noResults" },
+                            react_1.default.createElement("b", null, translate('search.noResults.title', 'No results'))))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                            react_1.default.createElement(SearchRecent_1.SearchRecent, { onSelect: (query, index) => {
+                                    telemetry.sendSearchRecentClickedMessage([
+                                        {
+                                            object: 'search',
+                                            query,
+                                            index: index.toString(),
+                                            searchSessionId,
+                                        },
+                                    ]);
+                                    setQuery(query);
+                                    focusSearchInput();
+                                } }),
+                            react_1.default.createElement(SearchSuggestedPages_1.SearchSuggestedPages, null)))))) : (react_1.default.createElement(SearchAiDialog_1.SearchAiDialog, { initialMessage: query, response: aiSearch.response, isGeneratingResponse: aiSearch.isGeneratingResponse, error: aiSearch.error, resources: aiSearch.resources, conversation: aiSearch.conversation, setConversation: aiSearch.setConversation, onMessageSent: aiSearch.askQuestion, toolCalls: aiSearch.toolCalls, contentSegments: aiSearch.contentSegments }))),
+                react_1.default.createElement(SearchDialogFooter, null, mode === 'ai-dialog' ? (react_1.default.createElement(AiDisclaimer, null, translate('search.ai.disclaimer', 'AI search might provide incomplete or incorrect results. Verify important information.'))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(SearchShortcuts, null,
+                        react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.navigate", combination: "Tab", text: translate('search.keys.navigate', 'to navigate') }),
+                        react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.select", combination: "\u23CE", text: translate('search.keys.select', 'to select') }),
+                        react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.exit", combination: "Esc", text: translate('search.keys.exit', 'to exit') })),
+                    isSearchLoading && (react_1.default.createElement(SearchLoading, null,
+                        react_1.default.createElement(SpinnerLoader_1.SpinnerLoader, { size: "16px", color: "var(--search-input-icon-color)" }),
+                        translate('search.loading', 'Loading...'))),
+                    react_1.default.createElement(SearchCancelButton, { "data-translation-key": "search.cancel", variant: "secondary", size: "small", onClick: handleClose }, translate('search.cancel', 'Cancel')))))))));
 }
 const SearchOverlay = styled_components_1.default.div `
   position: fixed;

package/lib/components/SvgViewer/variables.dark.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.svgViewerDarkMode = void 0;
 const styled_components_1 = require("styled-components");
 exports.svgViewerDarkMode = (0, styled_components_1.css) `
-  --svg-viewer-bg-color: var(--color-warm-grey-9);
+  --svg-viewer-bg-color: var(--color-warm-grey-3);
 `;
 //# sourceMappingURL=variables.dark.js.map

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

@@ -1,5 +1,5 @@
 import type { EntityRelationType } from '../types/catalog';
-export declare const CATALOG_TAG_MAX_LENGTH = 15;
+export declare const CATALOG_TAG_MAX_LENGTH = 12;
 export declare const PREDEFINED_ENTITY_TYPES: string[];
 export declare const reverseRelationMap: Record<EntityRelationType, EntityRelationType>;
 export declare const relationTypeMap: Record<EntityRelationType, string>;

package/lib/core/constants/catalog.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION_NOT_SPECIFIED = exports.GraphCustomEdgeType = exports.GraphCustomNodeType = exports.GraphHandleType = exports.relationTypeMap = exports.reverseRelationMap = exports.PREDEFINED_ENTITY_TYPES = exports.CATALOG_TAG_MAX_LENGTH = void 0;
-exports.CATALOG_TAG_MAX_LENGTH = 15;
+exports.CATALOG_TAG_MAX_LENGTH = 12;
 exports.PREDEFINED_ENTITY_TYPES = [
     'service',
     'domain',

package/lib/core/hooks/catalog/use-catalog-entity-link.d.ts

@@ -0,0 +1,8 @@
+import type { EntitiesCatalogConfig } from '@redocly/config';
+export type EntityWithTypeAndKey = {
+    type?: string;
+    key?: string;
+};
+export declare function useCatalogEntityLink(entitiesCatalogConfig: EntitiesCatalogConfig | undefined): {
+    getEntityLink: (entity: EntityWithTypeAndKey) => string | undefined;
+};

package/lib/core/hooks/catalog/use-catalog-entity-link.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCatalogEntityLink = useCatalogEntityLink;
+const react_1 = require("react");
+function isEntityExcluded(excludes, entityKey) {
+    var _a;
+    return (_a = excludes === null || excludes === void 0 ? void 0 : excludes.some((ex) => ex.key === entityKey)) !== null && _a !== void 0 ? _a : false;
+}
+function doesCatalogIncludeEntityType(config, entityType) {
+    var _a, _b;
+    const hasNoIncludes = !config.includes || config.includes.length === 0;
+    if (hasNoIncludes)
+        return true;
+    return (_b = (_a = config.includes) === null || _a === void 0 ? void 0 : _a.some((inc) => inc.type === entityType)) !== null && _b !== void 0 ? _b : false;
+}
+function useCatalogEntityLink(entitiesCatalogConfig) {
+    const catalogEntries = (0, react_1.useMemo)(() => {
+        const catalogs = entitiesCatalogConfig === null || entitiesCatalogConfig === void 0 ? void 0 : entitiesCatalogConfig.catalogs;
+        if (!catalogs)
+            return [];
+        return Object.entries(catalogs)
+            .filter((entry) => entry[1] != null)
+            .sort(([keyA], [keyB]) => (keyA === 'all' ? 1 : 0) - (keyB === 'all' ? 1 : 0));
+    }, [entitiesCatalogConfig]);
+    const getEntityLink = (entity) => {
+        var _a, _b;
+        if (!(entity === null || entity === void 0 ? void 0 : entity.key))
+            return undefined;
+        const entityType = (_a = entity.type) !== null && _a !== void 0 ? _a : '';
+        for (const [catalogKey, config] of catalogEntries) {
+            if (isEntityExcluded(config.excludes, entity.key))
+                continue;
+            if (!doesCatalogIncludeEntityType(config, entityType))
+                continue;
+            const slug = (_b = config.slug) !== null && _b !== void 0 ? _b : catalogKey;
+            return `catalogs/${slug}/entities/${entity.key}`;
+        }
+        return undefined;
+    };
+    return { getEntityLink };
+}
+//# sourceMappingURL=use-catalog-entity-link.js.map

package/lib/core/hooks/catalog/use-catalog-table-header-cell-actions.d.ts

@@ -1,10 +1,11 @@
 import { BaseEntity, CatalogColumn } from '../../../components/Catalog/CatalogTableView/CatalogTableView';
 type CatalogTableHeaderCellActionsProps<T extends BaseEntity> = {
     column: CatalogColumn<T>;
+    currentSortOption?: string | null;
     handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
     isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
 };
-export declare function useCatalogTableHeaderCellActions<T extends BaseEntity>({ column, handleSortClick, isColumnSorted, }: CatalogTableHeaderCellActionsProps<T>): {
+export declare function useCatalogTableHeaderCellActions<T extends BaseEntity>({ column, currentSortOption, handleSortClick, isColumnSorted, }: CatalogTableHeaderCellActionsProps<T>): {
     handleCellClick: () => void;
     sortKey: string | undefined;
     isUpActive: boolean;

package/lib/core/hooks/catalog/use-catalog-table-header-cell-actions.js

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCatalogTableHeaderCellActions = useCatalogTableHeaderCellActions;
-function useCatalogTableHeaderCellActions({ column, handleSortClick, isColumnSorted, }) {
+function useCatalogTableHeaderCellActions({ column, currentSortOption, handleSortClick, isColumnSorted, }) {
     const sortKey = column.sortKey;
-    const isUpActive = sortKey ? isColumnSorted(sortKey, 'desc') : false;
-    const isDownActive = sortKey ? isColumnSorted(sortKey, 'asc') : false;
+    const isUpActive = Boolean(sortKey &&
+        (currentSortOption ? currentSortOption === sortKey : isColumnSorted(sortKey, 'desc')));
+    const isDownActive = Boolean(sortKey &&
+        (currentSortOption ? currentSortOption === `-${sortKey}` : isColumnSorted(sortKey, 'asc')));
     const handleCellClick = () => {
         if (!column.sortable || !sortKey)
             return;

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

@@ -46,6 +46,7 @@ export * from './use-page-actions';
 export * from './use-mcp-config';
 export * from './use-connect-mcp-button';
 export * from './catalog/use-catalog-entity-details';
+export * from './catalog/use-catalog-entity-link';
 export * from './catalog/use-catalog-entity-schema';
 export * from './catalog/use-catalog-table-header-cell-actions';
 export * from './use-store';

package/lib/core/hooks/index.js

@@ -62,6 +62,7 @@ __exportStar(require("./use-page-actions"), exports);
 __exportStar(require("./use-mcp-config"), exports);
 __exportStar(require("./use-connect-mcp-button"), exports);
 __exportStar(require("./catalog/use-catalog-entity-details"), exports);
+__exportStar(require("./catalog/use-catalog-entity-link"), exports);
 __exportStar(require("./catalog/use-catalog-entity-schema"), exports);
 __exportStar(require("./catalog/use-catalog-table-header-cell-actions"), exports);
 __exportStar(require("./use-store"), exports);

package/lib/core/styles/dark.d.ts

@@ -1 +1,3 @@
-export declare const darkMode: import("styled-components").FlattenSimpleInterpolation;
+export declare const darkMode: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
+    palette?: string;
+}, any>>;

package/lib/core/styles/dark.js

@@ -4,21 +4,23 @@ exports.darkMode = void 0;
 const styled_components_1 = require("styled-components");
 const variables_dark_1 = require("../../components/Scorecard/variables.dark");
 const variables_dark_2 = require("../../markdoc/components/Mermaid/variables.dark");
-const variables_dark_3 = require("../../components/Menu/variables.dark");
-const variables_dark_4 = require("../../components/Button/variables.dark");
-const variables_dark_5 = require("../../components/Buttons/variables.dark");
-const variables_dark_6 = require("../../components/Segmented/variables.dark");
-const variables_dark_7 = require("../../icons/CheckboxIcon/variables.dark");
-const variables_dark_8 = require("../../components/Tag/variables.dark");
-const variables_dark_9 = require("../../components/StatusCode/variables.dark");
-const variables_dark_10 = require("../../components/Switch/variables.dark");
-const variables_dark_11 = require("../../markdoc/components/Cards/variables.dark");
-const variables_dark_12 = require("../../components/Catalog/variables.dark");
-const variables_dark_13 = require("../../components/PageActions/variables.dark");
-const variables_dark_14 = require("../../components/Tooltip/variables.dark");
-const variables_dark_15 = require("../../components/Banner/variables.dark");
-const variables_dark_16 = require("../../components/Admonition/variables.dark");
-const variables_dark_17 = require("../../components/SvgViewer/variables.dark");
+const variables_dark_3 = require("../../markdoc/components/ExcalidrawDiagram/variables.dark");
+const variables_dark_4 = require("../../components/Menu/variables.dark");
+const variables_dark_5 = require("../../components/Button/variables.dark");
+const variables_dark_6 = require("../../components/Buttons/variables.dark");
+const variables_dark_7 = require("../../components/Segmented/variables.dark");
+const variables_dark_8 = require("../../icons/CheckboxIcon/variables.dark");
+const variables_dark_9 = require("../../components/Tag/variables.dark");
+const variables_dark_10 = require("../../components/StatusCode/variables.dark");
+const variables_dark_11 = require("../../components/Switch/variables.dark");
+const variables_dark_12 = require("../../markdoc/components/Cards/variables.dark");
+const variables_dark_13 = require("../../components/Catalog/variables.dark");
+const variables_dark_14 = require("../../components/PageActions/variables.dark");
+const variables_dark_15 = require("../../components/Tooltip/variables.dark");
+const variables_dark_16 = require("../../components/Banner/variables.dark");
+const variables_dark_17 = require("../../components/Admonition/variables.dark");
+const variables_dark_18 = require("../../components/SvgViewer/variables.dark");
+const palette_dark_1 = require("./palette.dark");
 const replayDarkMode = (0, styled_components_1.css) `
   /**
     * @tokens Replay Colors
@@ -44,6 +46,8 @@ const replayDarkMode = (0, styled_components_1.css) `
   --replay-runtime-expression-bg-color: rgba(147, 166, 249, 0.16); // @presenter Color
   --replay-operators-color: rgba(168, 143, 88, 1); // @presenter Color
 
+  --replay-ai-user-message-gradient: linear-gradient(73.52deg, rgba(113, 94, 254, 0.16) 10.13%, rgba(255, 92, 220, 0.16) 87.29%);
+
   // @tokens End
 `;
 const badgesDarkMode = (0, styled_components_1.css) `
@@ -239,6 +243,12 @@ exports.darkMode = (0, styled_components_1.css) `
   --color-black: #ffffff;
   --color-white: #000000;
 
+
+  --color-brand-pink-subtle-bg: var(--color-brand-subtle-1);
+  --color-brand-pink-subtle-bg-hover: var(--color-brand-subtle-2);
+  --color-brand-pink-subtle-border: var(--color-brand-subtle-3);
+  --color-brand-pink-subtle-border-hover: var(--color-brand-subtle-4);
+
   --color-hover-base: #32343E;
 
   --bg-color: var(--color-warm-grey-2);
@@ -325,26 +335,27 @@ exports.darkMode = (0, styled_components_1.css) `
   --plus-square-outlined-icon: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.20312 5.3125H4.6875V6.79687C4.6875 6.83984 4.72266 6.875 4.76562 6.875H5.23438C5.27734 6.875 5.3125 6.83984 5.3125 6.79687V5.3125H6.79688C6.83984 5.3125 6.875 5.27734 6.875 5.23437V4.76562C6.875 4.72266 6.83984 4.6875 6.79688 4.6875H5.3125V3.20312C5.3125 3.16016 5.27734 3.125 5.23438 3.125H4.76562C4.72266 3.125 4.6875 3.16016 4.6875 3.20312V4.6875H3.20312C3.16016 4.6875 3.125 4.72266 3.125 4.76562V5.23437C3.125 5.27734 3.16016 5.3125 3.20312 5.3125Z' fill='%239B9CA8'/%3E%3Cpath d='M8.59375 1.09375H1.40625C1.2334 1.09375 1.09375 1.2334 1.09375 1.40625V8.59375C1.09375 8.7666 1.2334 8.90625 1.40625 8.90625H8.59375C8.7666 8.90625 8.90625 8.7666 8.90625 8.59375V1.40625C8.90625 1.2334 8.7666 1.09375 8.59375 1.09375ZM8.20312 8.20312H1.79688V1.79687H8.20312V8.20312Z' fill='%239B9CA8'/%3E%3C/svg%3E%0A");
   --minus-square-outlined-icon: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.20312 5.3125H6.79688C6.83984 5.3125 6.875 5.27734 6.875 5.23437V4.76562C6.875 4.72266 6.83984 4.6875 6.79688 4.6875H3.20312C3.16016 4.6875 3.125 4.72266 3.125 4.76562V5.23437C3.125 5.27734 3.16016 5.3125 3.20312 5.3125Z' fill='%239B9CA8'/%3E%3Cpath d='M8.59375 1.09375H1.40625C1.2334 1.09375 1.09375 1.2334 1.09375 1.40625V8.59375C1.09375 8.7666 1.2334 8.90625 1.40625 8.90625H8.59375C8.7666 8.90625 8.90625 8.7666 8.90625 8.59375V1.40625C8.90625 1.2334 8.7666 1.09375 8.59375 1.09375ZM8.20312 8.20312H1.79688V1.79687H8.20312V8.20312Z' fill='%239B9CA8'/%3E%3C/svg%3E%0A");
 
-  ${variables_dark_6.segmentedButtonsDarkMode}
-  ${variables_dark_4.buttonDarkMode}
-  ${variables_dark_5.aiAssistantButtonDarkMode}
-  ${variables_dark_7.checkboxDarkMode}
-  ${variables_dark_8.tagDarkMode}
-  ${variables_dark_9.statusCodeDarkMode}
-  ${variables_dark_3.menuDarkMode}
+  ${variables_dark_7.segmentedButtonsDarkMode}
+  ${variables_dark_5.buttonDarkMode}
+  ${variables_dark_6.aiAssistantButtonDarkMode}
+  ${variables_dark_8.checkboxDarkMode}
+  ${variables_dark_9.tagDarkMode}
+  ${variables_dark_10.statusCodeDarkMode}
+  ${variables_dark_4.menuDarkMode}
   ${variables_dark_2.mermaidDarkMode}
+  ${variables_dark_3.excalidrawDarkMode}
   ${variables_dark_1.scorecardDarkMode}
   ${replayDarkMode}
-  ${variables_dark_10.switcherDarkMode}
-  ${variables_dark_11.cardsDarkMode}
-  ${variables_dark_12.catalogDarkMode}
-  ${variables_dark_13.pageActionsDarkMode}
-  ${variables_dark_14.tooltipDarkMode}
-  ${variables_dark_15.bannerDarkMode}
-  ${variables_dark_16.admonitionDarkMode}
-  ${variables_dark_17.svgViewerDarkMode}
+  ${variables_dark_11.switcherDarkMode}
+  ${variables_dark_12.cardsDarkMode}
+  ${variables_dark_13.catalogDarkMode}
+  ${variables_dark_14.pageActionsDarkMode}
+  ${variables_dark_15.tooltipDarkMode}
+  ${variables_dark_16.bannerDarkMode}
+  ${variables_dark_17.admonitionDarkMode}
+  ${variables_dark_18.svgViewerDarkMode}
   ${badgesDarkMode}
-
+  ${palette_dark_1.activeBrandPaletteDark}
   /**
     * @tokens Dark Theme Scrollbar Config
     * @presenter Color

package/lib/core/styles/global.d.ts

@@ -1,2 +1,6 @@
-export declare const styles: import("styled-components").FlattenSimpleInterpolation;
-export declare const GlobalStyle: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+export declare const styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
+    palette?: string;
+}, any>>;
+export declare const GlobalStyle: import("styled-components").GlobalStyleComponent<{
+    palette?: string;
+}, import("styled-components").DefaultTheme>;