@redocly/theme 0.64.0-next.1 → 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/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

@@ -20,6 +20,7 @@ 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
@@ -242,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);
@@ -348,7 +355,7 @@ exports.darkMode = (0, styled_components_1.css) `
   ${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>;

package/lib/core/styles/global.js

@@ -46,6 +46,7 @@ const variables_41 = require("../../markdoc/components/CodeWalkthrough/variables
 const variables_42 = require("../../components/SkipContent/variables");
 const variables_43 = require("../../components/PageActions/variables");
 const variables_44 = require("../../components/SvgViewer/variables");
+const palette_1 = require("./palette");
 const dark_1 = require("./dark");
 const themeColors = (0, styled_components_1.css) `
   /* === Palette === */
@@ -226,16 +227,22 @@ const themeColors = (0, styled_components_1.css) `
   --color-white: #ffffff;
   --color-static-white: #ffffff;
 
-  --color-primary-bg: var(--color-blueberry-1);
-  --color-primary-bg-hover: var(--color-blueberry-2);
-  --color-primary-border: var(--color-blueberry-3);
-  --color-primary-border-hover: var(--color-blueberry-4);
-  --color-primary-hover: var(--color-blueberry-5);
-  --color-primary-base: var(--color-blueberry-6);
-  --color-primary-active: var(--color-blueberry-7);
-  --color-primary-text-hover: var(--color-blueberry-8);
-  --color-primary-text: var(--color-blueberry-9);
-  --color-primary-text-active: var(--color-blueberry-10);
+  --color-primary-bg: var(--color-brand-1);
+  --color-primary-bg-hover: var(--color-brand-2);
+  --color-primary-border: var(--color-brand-3);
+  --color-primary-border-hover: var(--color-brand-4);
+  --color-primary-hover: var(--color-brand-8);
+  --color-primary-base: var(--color-brand-6);
+  --color-primary-active: var(--color-brand-7);
+  --color-primary-text-hover: var(--color-brand-9);
+  --color-primary-text: var(--color-brand-8);
+  --color-primary-text-active: var(--color-brand-7);
+  --color-primary-text-on-color: var(--text-color-on-color);
+
+  --color-brand-pink-subtle-bg: var(--color-brand-1);
+  --color-brand-pink-subtle-bg-hover: var(--color-brand-2);
+  --color-brand-pink-subtle-border: var(--color-brand-3);
+  --color-brand-pink-subtle-border-hover: var(--color-brand-4);
 
   --color-success-bg: var(--color-green-1);
   --color-success-bg-hover: var(--color-green-2);
@@ -1286,6 +1293,7 @@ exports.styles = (0, styled_components_1.css) `
     ${sizeAndSpace}
     ${variables_6.tag}
     ${themeColors}
+    ${palette_1.activeBrandPaletteLight}
     ${tile}
     ${variables_7.toc}
     ${variables_15.tooltip}

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

@@ -0,0 +1,6 @@
+/**
+ * @tokens Palette
+ */
+export declare const activeBrandPaletteLight: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
+    palette?: string;
+}, any>>;

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

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