@redocly/theme 0.62.0-next.0 → 0.62.0-next.1

package/lib/components/Catalog/CatalogEntity/CatalogEntity.js

@@ -18,7 +18,7 @@ const hooks_1 = require("../../../core/hooks");
 const CatalogEntitySchema_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntitySchema");
 const CatalogEntityMethodAndPath_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityMethodAndPath");
 const CatalogEntityRelationsGraph_lazy_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy");
-const theme_1 = require("../../../index.js");
+const CatalogEntityHistorySidebar_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar");
 const renderFirstColumnEntitySection = (entity) => {
     switch (entity.type) {
         case 'api-operation':
@@ -45,7 +45,7 @@ function CatalogEntity({ RedocSchema, StoreProvider, GraphqlTypeRenderer, }) {
     const linkToMainCatalogLabel = translate(catalogConfig.titleTranslationKey);
     const { searchQuery, setSearchQuery } = useCatalog();
     return (react_1.default.createElement(CatalogPageWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntity" },
-        react_1.default.createElement(theme_1.CatalogEntityHistorySidebar, { entityKey: entity.key, revision: revision, version: version }),
+        react_1.default.createElement(CatalogEntityHistorySidebar_1.CatalogEntityHistorySidebar, { entityKey: entity.key, revision: revision, version: version }),
         react_1.default.createElement(CatalogPageContent, null,
             react_1.default.createElement(Breadcrumbs_1.Breadcrumbs, { additionalBreadcrumbs: [
                     { label: linkToMainCatalogLabel, link: linkToMainCatalog },

package/lib/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar.js

@@ -45,7 +45,7 @@ const hooks_1 = require("../../../../core/hooks");
 const MenuContainer_1 = require("../../../../components/Menu/MenuContainer");
 const utils_1 = require("../../../../core/utils");
 const constants_1 = require("../../../../core/constants");
-const CatalogEntityVersionItem_1 = require("./CatalogEntityVersionItem");
+const CatalogEntityVersionItem_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityVersionItem");
 function CatalogEntityHistorySidebar({ entityKey, revision, version, className, }) {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const location = (0, react_router_dom_1.useLocation)();

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TagsProperty = TagsProperty;
 const react_1 = __importDefault(require("react"));
 const TagsIcon_1 = require("../../../../icons/TagsIcon/TagsIcon");
-const theme_1 = require("../../../../index.js");
+const CatalogTagsWithTooltip_1 = require("../../../../components/Catalog/CatalogTagsWithTooltip");
 const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
 const hooks_1 = require("../../../../core/hooks");
 function TagsProperty({ entity }) {
@@ -15,7 +15,7 @@ function TagsProperty({ entity }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty" },
         react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(TagsIcon_1.TagsIcon, null),
-                translate('catalog.tags.label', 'Tags')), content: react_1.default.createElement(theme_1.CatalogTagsWithTooltip, { itemsToShow: 8, items: entity.tags || [], tagProps: {
+                translate('catalog.tags.label', 'Tags')), content: react_1.default.createElement(CatalogTagsWithTooltip_1.CatalogTagsWithTooltip, { itemsToShow: 8, items: entity.tags || [], tagProps: {
                     style: {
                         fontSize: 'var(--font-size-base)',
                         borderRadius: 'var(--border-radius)',

package/lib/components/Catalog/CatalogTableView/CatalogTableViewRow.js

@@ -12,7 +12,7 @@ const CatalogEntityCell_1 = require("../../../components/Catalog/CatalogTableVie
 const CatalogTagsCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogTagsCell");
 const hooks_1 = require("../../../core/hooks");
 const CatalogEntityTypeTag_1 = require("../../../components/Catalog/CatalogEntityTypeTag");
-const Link_1 = require("../../Link/Link");
+const Link_1 = require("../../../components/Link/Link");
 const baseColumns = [
     {
         key: 'entity',

package/lib/components/JsonViewer/JsonViewer.js

@@ -40,7 +40,7 @@ exports.JsonViewerWrap = exports.JsonViewer = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CodeBlock_1 = require("../../components/CodeBlock/CodeBlock");
-const Helpers_1 = require("./Helpers");
+const Helpers_1 = require("../../components/JsonViewer/Helpers");
 function JsonComponent({ data, expandLevel = 1, className, onCopyClick, onPanelToggle, title, controls = {}, }) {
     const showFoldingButtons = data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
     const [expandAllSignal, setExpandAllSignal] = react_1.default.useState(undefined);

package/lib/components/Search/SearchAiMessage.js

@@ -48,8 +48,8 @@ const Markdown_1 = require("../../components/Markdown/Markdown");
 const DocumentIcon_1 = require("../../icons/DocumentIcon/DocumentIcon");
 const AiStarsIcon_1 = require("../../icons/AiStarsIcon/AiStarsIcon");
 const CheckmarkOutlineIcon_1 = require("../../icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon");
-const SearchAiActionButtons_1 = require("./SearchAiActionButtons");
-const SearchAiNegativeFeedbackForm_1 = require("./SearchAiNegativeFeedbackForm");
+const SearchAiActionButtons_1 = require("../../components/Search/SearchAiActionButtons");
+const SearchAiNegativeFeedbackForm_1 = require("../../components/Search/SearchAiNegativeFeedbackForm");
 function SearchAiMessageComponent({ role, content, isThinking, resources, className, messageId, feedback, onFeedbackChange, }) {
     var _a;
     const { useMarkdownText, useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();

package/lib/core/hooks/use-page-actions.js

@@ -181,7 +181,7 @@ function createMCPAction({ clientType, mcpConfig, translate, onClickCallback, })
     return Object.assign(Object.assign({}, sharedProps), { buttonText: translate('page.actions.connectMcp.vscode', 'Connect to VS Code'), title: translate('page.actions.connectMcp.vscode', 'Connect to VS Code'), description: translate('page.actions.connectMcp.vscodeDescription', 'Install MCP server on VS Code'), iconComponent: VSCodeIcon_1.VSCodeIcon });
 }
 function shouldHidePageActions(pageProps, themeConfig, openapiExcludeFromSearch) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     // Can't use any actions if no markdown files are generated for LLMs
     if ((_b = (_a = pageProps === null || pageProps === void 0 ? void 0 : pageProps.seo) === null || _a === void 0 ? void 0 : _a.llmstxt) === null || _b === void 0 ? void 0 : _b.hide) {
         return true;
@@ -191,8 +191,8 @@ function shouldHidePageActions(pageProps, themeConfig, openapiExcludeFromSearch)
         return true;
     }
     // Page is excluded from search
-    const isPageExcludedFromSearch = ((_e = pageProps === null || pageProps === void 0 ? void 0 : pageProps.frontmatter) === null || _e === void 0 ? void 0 : _e.excludeFromSearch) ||
-        (((_f = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _f === void 0 ? void 0 : _f.type) === 'openapi' && openapiExcludeFromSearch);
+    const isOpenApiPage = ((_e = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _e === void 0 ? void 0 : _e.type) === 'openapi' || ((_f = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _f === void 0 ? void 0 : _f.subType) === 'openapi-operation';
+    const isPageExcludedFromSearch = ((_g = pageProps === null || pageProps === void 0 ? void 0 : pageProps.frontmatter) === null || _g === void 0 ? void 0 : _g.excludeFromSearch) || (isOpenApiPage && openapiExcludeFromSearch);
     if (isPageExcludedFromSearch) {
         return true;
     }

package/lib/core/hooks/use-unique-svg-ids.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns a function that appends a per-component-instance suffix to SVG ids.
+ * This prevents collisions when multiple identical SVGs are rendered on the same page,
+ * which can break `url(#...)` references (gradients, clipPath, masks, filters) on reflow.
+ */
+export declare function useUniqueSvgIds(): (id: string) => string;

package/lib/core/hooks/use-unique-svg-ids.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUniqueSvgIds = useUniqueSvgIds;
+const react_1 = require("react");
+/**
+ * Returns a function that appends a per-component-instance suffix to SVG ids.
+ * This prevents collisions when multiple identical SVGs are rendered on the same page,
+ * which can break `url(#...)` references (gradients, clipPath, masks, filters) on reflow.
+ */
+function useUniqueSvgIds() {
+    const reactId = (0, react_1.useId)();
+    const safeSuffix = reactId.replace(/:/g, '_');
+    return (id) => `${id}-${safeSuffix}`;
+}
+//# sourceMappingURL=use-unique-svg-ids.js.map

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

@@ -25,3 +25,4 @@ export { SecurityVariablesEnvSuffix } from '../constants/environments';
 export { isUndefined, isString, isNotNull, isObject } from '../utils/type-guards';
 export { ThemeDataContext, type ThemeDataTransferObject } from '../contexts/ThemeDataContext';
 export { SearchSessionProvider, SearchSessionContext } from '../contexts/SearchContext';
+export { useUniqueSvgIds } from '../hooks/use-unique-svg-ids';

package/lib/core/openapi/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SearchSessionContext = exports.SearchSessionProvider = exports.ThemeDataContext = exports.isObject = exports.isNotNull = exports.isString = exports.isUndefined = exports.SecurityVariablesEnvSuffix = exports.useDialogHotKeys = exports.useSearchDialog = exports.useModalScrollLock = exports.useActiveSectionId = exports.useOutsideClick = exports.useThemeHooks = exports.useFocusTrap = exports.getUserAgent = exports.ClipboardService = exports.getOperationColor = exports.isPrimitive = exports.breakpoints = exports.GlobalStyle = exports.useMount = exports.typedMemo = exports.capitalize = exports.withPathPrefix = exports.addTrailingSlash = exports.combineUrls = exports.getPathPrefix = exports.removeLeadingSlash = exports.addLeadingSlash = exports.IS_BROWSER = void 0;
+exports.useUniqueSvgIds = exports.SearchSessionContext = exports.SearchSessionProvider = exports.ThemeDataContext = exports.isObject = exports.isNotNull = exports.isString = exports.isUndefined = exports.SecurityVariablesEnvSuffix = exports.useDialogHotKeys = exports.useSearchDialog = exports.useModalScrollLock = exports.useActiveSectionId = exports.useOutsideClick = exports.useThemeHooks = exports.useFocusTrap = exports.getUserAgent = exports.ClipboardService = exports.getOperationColor = exports.isPrimitive = exports.breakpoints = exports.GlobalStyle = exports.useMount = exports.typedMemo = exports.capitalize = exports.withPathPrefix = exports.addTrailingSlash = exports.combineUrls = exports.getPathPrefix = exports.removeLeadingSlash = exports.addLeadingSlash = exports.IS_BROWSER = void 0;
 var dom_1 = require("../utils/dom");
 Object.defineProperty(exports, "IS_BROWSER", { enumerable: true, get: function () { return dom_1.IS_BROWSER; } });
 var urls_1 = require("../utils/urls");
@@ -54,4 +54,6 @@ Object.defineProperty(exports, "ThemeDataContext", { enumerable: true, get: func
 var SearchContext_1 = require("../contexts/SearchContext");
 Object.defineProperty(exports, "SearchSessionProvider", { enumerable: true, get: function () { return SearchContext_1.SearchSessionProvider; } });
 Object.defineProperty(exports, "SearchSessionContext", { enumerable: true, get: function () { return SearchContext_1.SearchSessionContext; } });
+var use_unique_svg_ids_1 = require("../hooks/use-unique-svg-ids");
+Object.defineProperty(exports, "useUniqueSvgIds", { enumerable: true, get: function () { return use_unique_svg_ids_1.useUniqueSvgIds; } });
 //# sourceMappingURL=index.js.map

package/lib/index.d.ts

@@ -274,5 +274,8 @@ export * from './layouts/OIDCForbidden';
 export * from './layouts/ThreePanelLayout';
 export * from './layouts/CodeWalkthroughLayout';
 export * from './layouts/InternalServerErrorLayout';
+export * from './layouts/DocumentationLayout';
+export * from './layouts/DocumentationLayoutTop';
+export * from './layouts/DocumentationLayoutBottom';
 export * as markdoc from './markdoc/default';
 export * from './components/DatePicker/DatePicker';

package/lib/index.js

@@ -338,6 +338,9 @@ __exportStar(require("./layouts/OIDCForbidden"), exports);
 __exportStar(require("./layouts/ThreePanelLayout"), exports);
 __exportStar(require("./layouts/CodeWalkthroughLayout"), exports);
 __exportStar(require("./layouts/InternalServerErrorLayout"), exports);
+__exportStar(require("./layouts/DocumentationLayout"), exports);
+__exportStar(require("./layouts/DocumentationLayoutTop"), exports);
+__exportStar(require("./layouts/DocumentationLayoutBottom"), exports);
 /* Markdoc */
 exports.markdoc = __importStar(require("./markdoc/default"));
 /* DatePicker */

package/lib/layouts/DocumentationLayout.js

@@ -6,26 +6,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DocumentationLayout = DocumentationLayout;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const EditPageButton_1 = require("../components/Buttons/EditPageButton");
 const utils_1 = require("../core/utils");
-const PageNavigation_1 = require("../components/PageNavigation/PageNavigation");
-const LastUpdated_1 = require("../components/LastUpdated/LastUpdated");
-const Breadcrumbs_1 = require("../components/Breadcrumbs/Breadcrumbs");
 const CodeSnippetContext_1 = require("../core/contexts/CodeSnippetContext");
+const DocumentationLayoutTop_1 = require("../layouts/DocumentationLayoutTop");
+const DocumentationLayoutBottom_1 = require("../layouts/DocumentationLayoutBottom");
 function DocumentationLayout({ tableOfContent, feedback, config, editPage, lastModified, nextPage, prevPage, className, children, }) {
     var _a;
-    const { editPage: themeEditPage } = config || {};
-    const mergedConf = editPage ? Object.assign(Object.assign({}, themeEditPage), editPage) : undefined;
     return (react_1.default.createElement(CodeSnippetContext_1.CodeSnippetProvider, null,
         react_1.default.createElement(LayoutWrapper, { "data-component-name": "Layout/DocumentationLayout", className: className },
             react_1.default.createElement(ContentWrapper, { withToc: !((_a = config === null || config === void 0 ? void 0 : config.toc) === null || _a === void 0 ? void 0 : _a.hide) },
-                react_1.default.createElement(Breadcrumbs, null),
-                react_1.default.createElement(LayoutTop, null,
-                    lastModified && react_1.default.createElement(LastUpdated_1.LastUpdated, { lastModified: new Date(lastModified) }),
-                    mergedConf && react_1.default.createElement(EditPageButton_1.EditPageButton, { to: mergedConf.to })),
+                react_1.default.createElement(DocumentationLayoutTop_1.DocumentationLayoutTop, { config: config, editPage: editPage, lastModified: lastModified }),
                 children,
-                react_1.default.createElement(LayoutBottom, null, feedback),
-                react_1.default.createElement(PageNavigation_1.PageNavigation, { nextPage: nextPage, prevPage: prevPage })),
+                react_1.default.createElement(DocumentationLayoutBottom_1.DocumentationLayoutBottom, { feedback: feedback, nextPage: nextPage, prevPage: prevPage })),
             tableOfContent)));
 }
 const LayoutWrapper = styled_components_1.default.div.attrs(({ className }) => ({
@@ -58,17 +50,4 @@ const ContentWrapper = styled_components_1.default.section `
     width: ${({ withToc }) => (withToc ? `calc(90% - var(--toc-width))` : '90%')};
   }
 `;
-const LayoutTop = styled_components_1.default.div `
-  display: flex;
-  justify-content: space-between;
-  flex-flow: row nowrap;
-`;
-const Breadcrumbs = (0, styled_components_1.default)(Breadcrumbs_1.Breadcrumbs) `
-  margin-bottom: var(--breadcrumbs-margin-bottom);
-`;
-const LayoutBottom = (0, styled_components_1.default)(LayoutTop) `
-  > * {
-    margin: 25px 0;
-  }
-`;
 //# sourceMappingURL=DocumentationLayout.js.map

package/lib/layouts/DocumentationLayoutBottom.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { JSX } from 'react';
+import type { ResolvedNavItemWithLink } from '@redocly/config';
+type DocumentationLayoutBottomProps = {
+    feedback: React.ReactNode;
+    nextPage?: ResolvedNavItemWithLink | null;
+    prevPage?: ResolvedNavItemWithLink | null;
+    className?: string;
+};
+export declare function DocumentationLayoutBottom({ feedback, nextPage, prevPage, }: React.PropsWithChildren<DocumentationLayoutBottomProps>): JSX.Element;
+export {};

package/lib/layouts/DocumentationLayoutBottom.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DocumentationLayoutBottom = DocumentationLayoutBottom;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const PageNavigation_1 = require("../components/PageNavigation/PageNavigation");
+function DocumentationLayoutBottom({ feedback, nextPage, prevPage, }) {
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Layout/DocumentationLayoutBottom" },
+        react_1.default.createElement(LayoutBottom, null, feedback),
+        react_1.default.createElement(PageNavigation_1.PageNavigation, { nextPage: nextPage, prevPage: prevPage })));
+}
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+`;
+const LayoutBottom = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  flex-flow: row nowrap;
+
+  > * {
+    margin: 25px 0;
+  }
+`;
+//# sourceMappingURL=DocumentationLayoutBottom.js.map

package/lib/layouts/DocumentationLayoutTop.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { JSX } from 'react';
+import type { MarkdownConfig } from '@redocly/config';
+type DocumentationLayoutTopProps = {
+    config?: MarkdownConfig;
+    editPage?: {
+        to: string;
+    };
+    /** String in ISO format */
+    lastModified?: string | null;
+};
+export declare function DocumentationLayoutTop({ config, editPage, lastModified, }: React.PropsWithChildren<DocumentationLayoutTopProps>): JSX.Element;
+export {};

package/lib/layouts/DocumentationLayoutTop.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DocumentationLayoutTop = DocumentationLayoutTop;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const EditPageButton_1 = require("../components/Buttons/EditPageButton");
+const LastUpdated_1 = require("../components/LastUpdated/LastUpdated");
+const Breadcrumbs_1 = require("../components/Breadcrumbs/Breadcrumbs");
+function DocumentationLayoutTop({ config, editPage, lastModified, }) {
+    const { editPage: themeEditPage } = config || {};
+    const mergedConf = editPage ? Object.assign(Object.assign({}, themeEditPage), editPage) : undefined;
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Layout/DocumentationLayoutTop" },
+        react_1.default.createElement(Breadcrumbs, null),
+        react_1.default.createElement(LayoutTop, null,
+            lastModified && react_1.default.createElement(LastUpdated_1.LastUpdated, { lastModified: new Date(lastModified) }),
+            mergedConf && react_1.default.createElement(EditPageButton_1.EditPageButton, { to: mergedConf.to }))));
+}
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+`;
+const LayoutTop = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  flex-flow: row nowrap;
+`;
+const Breadcrumbs = (0, styled_components_1.default)(Breadcrumbs_1.Breadcrumbs) `
+  margin-bottom: var(--breadcrumbs-margin-bottom);
+`;
+//# sourceMappingURL=DocumentationLayoutTop.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.62.0-next.0",
+  "version": "0.62.0-next.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -63,7 +63,7 @@
     "vitest": "4.0.10",
     "vitest-when": "0.6.2",
     "webpack": "5.94.0",
-    "@redocly/realm-asyncapi-sdk": "0.8.0-next.0"
+    "@redocly/realm-asyncapi-sdk": "0.8.0-next.1"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",
@@ -88,7 +88,7 @@
     "ts:check": "tsc --noEmit --skipLibCheck",
     "clean": "rimraf lib",
     "compile": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
-    "build": "npm run clean && npm run compile",
+    "build": "pnpm run clean && pnpm run compile",
     "test": "vitest run",
     "test:update": "vitest run --update",
     "test:watch": "vitest",

package/src/components/Catalog/CatalogEntity/CatalogEntity.tsx

@@ -20,7 +20,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { CatalogEntitySchema } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntitySchema';
 import { CatalogEntityMethodAndPath } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityMethodAndPath';
 import { CatalogEntityRelationsGraph } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy';
-import { CatalogEntityHistorySidebar } from '@redocly/theme';
+import { CatalogEntityHistorySidebar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar';
 
 export type CatalogEntityProps = {
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */

package/src/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar.tsx

@@ -7,8 +7,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { MenuContainer } from '@redocly/theme/components/Menu/MenuContainer';
 import { transformRevisionsToVersionHistory } from '@redocly/theme/core/utils';
 import { DEFAULT_LOCALE_PLACEHOLDER } from '@redocly/theme/core/constants';
-
-import { CatalogEntityVersionItem } from './CatalogEntityVersionItem';
+import { CatalogEntityVersionItem } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityVersionItem';
 
 export type CatalogHistorySidebarProps = {
   entityKey: string;

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty.tsx

@@ -2,7 +2,7 @@ import React, { JSX } from 'react';
 
 import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { TagsIcon } from '@redocly/theme/icons/TagsIcon/TagsIcon';
-import { CatalogTagsWithTooltip } from '@redocly/theme';
+import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 

package/src/components/Catalog/CatalogTableView/CatalogTableViewRow.tsx

@@ -10,8 +10,7 @@ import { CatalogEntityCell } from '@redocly/theme/components/Catalog/CatalogTabl
 import { CatalogTagsCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTagsCell';
 import { useCatalogEntityDetails } from '@redocly/theme/core/hooks';
 import { CatalogEntityTypeTag } from '@redocly/theme/components/Catalog/CatalogEntityTypeTag';
-
-import { Link } from '../../Link/Link';
+import { Link } from '@redocly/theme/components/Link/Link';
 
 export type BaseEntity = {
   id: string;

package/src/components/JsonViewer/JsonViewer.tsx

@@ -5,8 +5,7 @@ import type { JSX } from 'react';
 import type { CodeBlockControlsProps } from '@redocly/theme/components/CodeBlock/CodeBlockControls';
 
 import { CodeBlock } from '@redocly/theme/components/CodeBlock/CodeBlock';
-
-import { JsonValue } from './Helpers';
+import { JsonValue } from '@redocly/theme/components/JsonViewer/Helpers';
 
 export type PanelType = 'request' | 'responses' | 'request-samples' | 'response-samples';
 

package/src/components/Search/SearchAiMessage.tsx

@@ -12,9 +12,8 @@ import { Markdown } from '@redocly/theme/components/Markdown/Markdown';
 import { DocumentIcon } from '@redocly/theme/icons/DocumentIcon/DocumentIcon';
 import { AiStarsIcon } from '@redocly/theme/icons/AiStarsIcon/AiStarsIcon';
 import { CheckmarkOutlineIcon } from '@redocly/theme/icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon';
-
-import { SearchAiActionButtons } from './SearchAiActionButtons';
-import { SearchAiNegativeFeedbackForm } from './SearchAiNegativeFeedbackForm';
+import { SearchAiActionButtons } from '@redocly/theme/components/Search/SearchAiActionButtons';
+import { SearchAiNegativeFeedbackForm } from '@redocly/theme/components/Search/SearchAiNegativeFeedbackForm';
 
 export type SearchAiMessageProps = {
   role: AiSearchConversationRole;

package/src/core/hooks/__mocks__/use-theme-hooks.ts

@@ -16,6 +16,7 @@ export const useThemeHooks = vi.fn(() => ({
     send: vi.fn(),
     sendCodeSnippetReportedMessage: vi.fn(),
     sendPageActionsButtonClickedMessage: vi.fn(),
+    sendColorModeSwitchedMessage: vi.fn(),
   })),
   useBreadcrumbs: vi.fn().mockReturnValue({ breadcrumbs: [], siblings: undefined }),
   useBanner: vi.fn(() => ({

package/src/core/hooks/use-page-actions.ts

@@ -280,9 +280,10 @@ function shouldHidePageActions(
   }
 
   // Page is excluded from search
+  const isOpenApiPage =
+    pageProps?.metadata?.type === 'openapi' || pageProps?.metadata?.subType === 'openapi-operation';
   const isPageExcludedFromSearch =
-    pageProps?.frontmatter?.excludeFromSearch ||
-    (pageProps?.metadata?.type === 'openapi' && openapiExcludeFromSearch);
+    pageProps?.frontmatter?.excludeFromSearch || (isOpenApiPage && openapiExcludeFromSearch);
 
   if (isPageExcludedFromSearch) {
     return true;

package/src/core/hooks/use-unique-svg-ids.ts

@@ -0,0 +1,12 @@
+import { useId } from 'react';
+
+/**
+ * Returns a function that appends a per-component-instance suffix to SVG ids.
+ * This prevents collisions when multiple identical SVGs are rendered on the same page,
+ * which can break `url(#...)` references (gradients, clipPath, masks, filters) on reflow.
+ */
+export function useUniqueSvgIds(): (id: string) => string {
+  const reactId = useId();
+  const safeSuffix = reactId.replace(/:/g, '_');
+  return (id: string): string => `${id}-${safeSuffix}`;
+}

package/src/core/openapi/index.ts

@@ -38,3 +38,4 @@ export { SecurityVariablesEnvSuffix } from '../constants/environments';
 export { isUndefined, isString, isNotNull, isObject } from '../utils/type-guards';
 export { ThemeDataContext, type ThemeDataTransferObject } from '../contexts/ThemeDataContext';
 export { SearchSessionProvider, SearchSessionContext } from '../contexts/SearchContext';
+export { useUniqueSvgIds } from '../hooks/use-unique-svg-ids';

package/src/index.ts

@@ -302,6 +302,9 @@ export * from '@redocly/theme/layouts/OIDCForbidden';
 export * from '@redocly/theme/layouts/ThreePanelLayout';
 export * from '@redocly/theme/layouts/CodeWalkthroughLayout';
 export * from '@redocly/theme/layouts/InternalServerErrorLayout';
+export * from '@redocly/theme/layouts/DocumentationLayout';
+export * from '@redocly/theme/layouts/DocumentationLayoutTop';
+export * from '@redocly/theme/layouts/DocumentationLayoutBottom';
 /* Markdoc */
 export * as markdoc from '@redocly/theme/markdoc/default';
 /* DatePicker */

package/src/layouts/DocumentationLayout.tsx

@@ -4,12 +4,10 @@ import styled from 'styled-components';
 import type { JSX } from 'react';
 import type { ResolvedNavItemWithLink, MarkdownConfig } from '@redocly/config';
 
-import { EditPageButton } from '@redocly/theme/components/Buttons/EditPageButton';
 import { breakpoints } from '@redocly/theme/core/utils';
-import { PageNavigation } from '@redocly/theme/components/PageNavigation/PageNavigation';
-import { LastUpdated } from '@redocly/theme/components/LastUpdated/LastUpdated';
-import { Breadcrumbs as ThemeBreadcrumbs } from '@redocly/theme/components/Breadcrumbs/Breadcrumbs';
 import { CodeSnippetProvider } from '@redocly/theme/core/contexts/CodeSnippetContext';
+import { DocumentationLayoutTop } from '@redocly/theme/layouts/DocumentationLayoutTop';
+import { DocumentationLayoutBottom } from '@redocly/theme/layouts/DocumentationLayoutBottom';
 
 type DocumentationLayoutProps = {
   tableOfContent: React.ReactNode;
@@ -36,21 +34,13 @@ export function DocumentationLayout({
   className,
   children,
 }: React.PropsWithChildren<DocumentationLayoutProps>): JSX.Element {
-  const { editPage: themeEditPage } = config || {};
-  const mergedConf = editPage ? { ...themeEditPage, ...editPage } : undefined;
-
   return (
     <CodeSnippetProvider>
       <LayoutWrapper data-component-name="Layout/DocumentationLayout" className={className}>
         <ContentWrapper withToc={!config?.toc?.hide}>
-          <Breadcrumbs />
-          <LayoutTop>
-            {lastModified && <LastUpdated lastModified={new Date(lastModified)} />}
-            {mergedConf && <EditPageButton to={mergedConf.to} />}
-          </LayoutTop>
+          <DocumentationLayoutTop config={config} editPage={editPage} lastModified={lastModified} />
           {children}
-          <LayoutBottom>{feedback}</LayoutBottom>
-          <PageNavigation nextPage={nextPage} prevPage={prevPage} />
+          <DocumentationLayoutBottom feedback={feedback} nextPage={nextPage} prevPage={prevPage} />
         </ContentWrapper>
         {tableOfContent}
       </LayoutWrapper>
@@ -89,19 +79,3 @@ const ContentWrapper = styled.section<{ withToc: boolean }>`
     width: ${({ withToc }) => (withToc ? `calc(90% - var(--toc-width))` : '90%')};
   }
 `;
-
-const LayoutTop = styled.div`
-  display: flex;
-  justify-content: space-between;
-  flex-flow: row nowrap;
-`;
-
-const Breadcrumbs = styled(ThemeBreadcrumbs)`
-  margin-bottom: var(--breadcrumbs-margin-bottom);
-`;
-
-const LayoutBottom = styled(LayoutTop)`
-  > * {
-    margin: 25px 0;
-  }
-`;

package/src/layouts/DocumentationLayoutBottom.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { ResolvedNavItemWithLink } from '@redocly/config';
+
+import { PageNavigation } from '@redocly/theme/components/PageNavigation/PageNavigation';
+
+type DocumentationLayoutBottomProps = {
+  feedback: React.ReactNode;
+  nextPage?: ResolvedNavItemWithLink | null;
+  prevPage?: ResolvedNavItemWithLink | null;
+  className?: string;
+};
+
+export function DocumentationLayoutBottom({
+  feedback,
+  nextPage,
+  prevPage,
+}: React.PropsWithChildren<DocumentationLayoutBottomProps>): JSX.Element {
+  return (
+    <Wrapper data-component-name="Layout/DocumentationLayoutBottom">
+      <LayoutBottom>{feedback}</LayoutBottom>
+      <PageNavigation nextPage={nextPage} prevPage={prevPage} />
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const LayoutBottom = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-flow: row nowrap;
+
+  > * {
+    margin: 25px 0;
+  }
+`;

package/src/layouts/DocumentationLayoutTop.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { MarkdownConfig } from '@redocly/config';
+
+import { EditPageButton } from '@redocly/theme/components/Buttons/EditPageButton';
+import { LastUpdated } from '@redocly/theme/components/LastUpdated/LastUpdated';
+import { Breadcrumbs as ThemeBreadcrumbs } from '@redocly/theme/components/Breadcrumbs/Breadcrumbs';
+
+type DocumentationLayoutTopProps = {
+  config?: MarkdownConfig;
+  editPage?: {
+    to: string;
+  };
+  /** String in ISO format */
+  lastModified?: string | null;
+};
+
+export function DocumentationLayoutTop({
+  config,
+  editPage,
+  lastModified,
+}: React.PropsWithChildren<DocumentationLayoutTopProps>): JSX.Element {
+  const { editPage: themeEditPage } = config || {};
+  const mergedConf = editPage ? { ...themeEditPage, ...editPage } : undefined;
+
+  return (
+    <Wrapper data-component-name="Layout/DocumentationLayoutTop">
+      <Breadcrumbs />
+      <LayoutTop>
+        {lastModified && <LastUpdated lastModified={new Date(lastModified)} />}
+        {mergedConf && <EditPageButton to={mergedConf.to} />}
+      </LayoutTop>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const LayoutTop = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-flow: row nowrap;
+`;
+
+const Breadcrumbs = styled(ThemeBreadcrumbs)`
+  margin-bottom: var(--breadcrumbs-margin-bottom);
+`;