@backstage/plugin-techdocs 0.11.2 → 0.12.2

package/dist/index.esm.js

@@ -2,30 +2,30 @@ import { createApiRef, createRouteRef, useRouteRef, useApi, configApiRef, create
 import { ResponseError, NotFoundError } from '@backstage/errors';
 import { EventSourcePolyfill } from 'event-source-polyfill';
 import * as React from 'react';
-import React__default, { useEffect, useState, useReducer, useRef, useMemo, useCallback } from 'react';
+import React__default, { useEffect, useState, useReducer, useRef, useMemo, useContext, createContext, useCallback } from 'react';
 import { useCopyToClipboard, useDebounce, useAsyncRetry, useAsync } from 'react-use';
 import { capitalize } from 'lodash';
-import { SubvalueCell, Link, Table, EmptyState, Button, WarningPanel, CodeSnippet, PageWithHeader, Content, ContentHeader, SupportButton, ErrorPage, Progress, ItemCardGrid, ItemCardHeader, HeaderTabs, HeaderLabel, Header, Page, MissingAnnotationEmptyState } from '@backstage/core-components';
-import { favoriteEntityIcon, favoriteEntityTooltip, EntityRefLinks, getEntityRelations, formatEntityRefTitle, useEntityListProvider, useStarredEntities, CATALOG_FILTER_EXISTS, EntityListProvider, UserListPicker, EntityOwnerPicker, EntityTagPicker, catalogApiRef, useOwnUser, isOwnerOf, EntityRefLink, useEntity } from '@backstage/plugin-catalog-react';
+import { SubvalueCell, Link, Table, EmptyState, Button, WarningPanel, CodeSnippet, PageWithHeader, Content, ContentHeader, SupportButton, ErrorPage, Progress, HeaderLabel, Header, Page, ItemCardGrid, ItemCardHeader, HeaderTabs, MissingAnnotationEmptyState } from '@backstage/core-components';
+import { favoriteEntityIcon, favoriteEntityTooltip, EntityRefLinks, getEntityRelations, formatEntityRefTitle, useEntityListProvider, useStarredEntities, CATALOG_FILTER_EXISTS, EntityListProvider, UserListPicker, EntityOwnerPicker, EntityTagPicker, EntityRefLink, catalogApiRef, useOwnUser, isOwnerOf, useEntity } from '@backstage/plugin-catalog-react';
 import { RELATION_OWNED_BY } from '@backstage/catalog-model';
 import ShareIcon from '@material-ui/icons/Share';
 import { FilteredEntityLayout, FilterContainer, EntityListContainer } from '@backstage/plugin-catalog';
-import { makeStyles, ListItemText, ListItem, Divider, createStyles, Button as Button$1, Drawer, Grid, Typography, IconButton, TextField, InputAdornment, CircularProgress, useTheme, Card, CardMedia, CardContent, CardActions } from '@material-ui/core';
+import { makeStyles, ListItemText, ListItem, Divider, Grid, TextField, InputAdornment, IconButton, CircularProgress, createStyles, Button as Button$1, Drawer, Typography, useTheme, Card, CardMedia, CardContent, CardActions } from '@material-ui/core';
 import TextTruncate from 'react-text-truncate';
+import { useNavigate as useNavigate$1, useParams, Routes, Route } from 'react-router-dom';
 import { scmIntegrationsApiRef } from '@backstage/integration-react';
-import { Alert } from '@material-ui/lab';
-import { useParams, useNavigate as useNavigate$1, Routes, Route } from 'react-router-dom';
 import { replaceGitHubUrlType } from '@backstage/integration';
 import FeedbackOutlinedIcon from '@material-ui/icons/FeedbackOutlined';
 import ReactDOM from 'react-dom';
 import parseGitUrl from 'git-url-parse';
 import DOMPurify from 'dompurify';
-import Close from '@material-ui/icons/Close';
-import { LazyLog } from 'react-lazylog';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import { SearchContextProvider, useSearch } from '@backstage/plugin-search';
 import SearchIcon from '@material-ui/icons/Search';
 import { useNavigate, useOutlet } from 'react-router';
+import { Alert } from '@material-ui/lab';
+import Close from '@material-ui/icons/Close';
+import { LazyLog } from 'react-lazylog';
 import CodeIcon from '@material-ui/icons/Code';
 
 const techdocsStorageApiRef = createApiRef({
@@ -185,7 +185,7 @@ function createCopyDocsUrlAction(copyToClipboard) {
         fontSize: "small"
       }),
       tooltip: "Click to copy documentation link to clipboard",
-      onClick: () => copyToClipboard(`${window.location.origin}${window.location.pathname.replace(/\/?$/, "/")}${row.resolved.docsUrl}`)
+      onClick: () => copyToClipboard(`${window.location.origin}${row.resolved.docsUrl}`)
     };
   };
 }
@@ -388,7 +388,7 @@ const DefaultTechDocsHome = ({
   }))))));
 };
 
-const useStyles$1 = makeStyles({
+const useStyles$2 = makeStyles({
   flexContainer: {
     flexWrap: "wrap"
   },
@@ -404,7 +404,7 @@ const DocsResultListItem = ({
   asLink = true,
   title
 }) => {
-  const classes = useStyles$1();
+  const classes = useStyles$2();
   const TextItem = () => /* @__PURE__ */ React__default.createElement(ListItemText, {
     className: classes.itemText,
     primaryTypographyProps: {variant: "h6"},
@@ -465,32 +465,39 @@ const techdocsPlugin = createPlugin({
   }
 });
 const TechdocsPage = techdocsPlugin.provide(createRoutableExtension({
+  name: "TechdocsPage",
   component: () => Promise.resolve().then(function () { return Router$1; }).then((m) => m.Router),
   mountPoint: rootRouteRef
 }));
 const EntityTechdocsContent = techdocsPlugin.provide(createRoutableExtension({
+  name: "EntityTechdocsContent",
   component: () => Promise.resolve().then(function () { return Router$1; }).then((m) => m.EmbeddedDocsRouter),
   mountPoint: rootCatalogDocsRouteRef
 }));
 const DocsCardGrid$2 = techdocsPlugin.provide(createComponentExtension({
+  name: "DocsCardGrid",
   component: {
     lazy: () => Promise.resolve().then(function () { return DocsCardGrid$1; }).then((m) => m.DocsCardGrid)
   }
 }));
 const DocsTable = techdocsPlugin.provide(createComponentExtension({
+  name: "DocsTable",
   component: {
     lazy: () => Promise.resolve().then(function () { return DocsTable$2; }).then((m) => m.DocsTable)
   }
 }));
 const TechDocsCustomHome$2 = techdocsPlugin.provide(createRoutableExtension({
+  name: "TechDocsCustomHome",
   component: () => Promise.resolve().then(function () { return TechDocsCustomHome$1; }).then((m) => m.TechDocsCustomHome),
   mountPoint: rootRouteRef
 }));
 const TechDocsIndexPage$2 = techdocsPlugin.provide(createRoutableExtension({
+  name: "TechDocsIndexPage",
   component: () => Promise.resolve().then(function () { return TechDocsIndexPage$1; }).then((m) => m.TechDocsIndexPage),
   mountPoint: rootRouteRef
 }));
 const TechDocsReaderPage = techdocsPlugin.provide(createRoutableExtension({
+  name: "TechDocsReaderPage",
   component: () => Promise.resolve().then(function () { return TechDocsPage$1; }).then((m) => m.TechDocsPage),
   mountPoint: rootDocsRouteRef
 }));
@@ -707,6 +714,19 @@ const injectCss = ({css}) => {
   };
 };
 
+const scrollIntoAnchor = () => {
+  return (dom) => {
+    setTimeout(() => {
+      var _a;
+      if (window.location.hash) {
+        const hash = window.location.hash.slice(1);
+        (_a = dom == null ? void 0 : dom.querySelector(`#${hash}`)) == null ? void 0 : _a.scrollIntoView();
+      }
+    }, 200);
+    return dom;
+  };
+};
+
 const transform = async (html, transformers) => {
   let dom;
   if (typeof html === "string") {
@@ -722,88 +742,9 @@ const transform = async (html, transformers) => {
   return dom;
 };
 
-const useDrawerStyles = makeStyles((theme) => createStyles({
-  paper: {
-    width: "100%",
-    [theme.breakpoints.up("sm")]: {
-      width: "75%"
-    },
-    [theme.breakpoints.up("md")]: {
-      width: "50%"
-    },
-    padding: theme.spacing(2.5)
-  },
-  root: {
-    height: "100%",
-    overflow: "hidden"
-  }
-}));
-const TechDocsBuildLogsDrawerContent = ({
-  buildLog,
-  onClose
-}) => {
-  const classes = useDrawerStyles();
-  return /* @__PURE__ */ React.createElement(Grid, {
-    container: true,
-    direction: "column",
-    className: classes.root,
-    spacing: 0,
-    wrap: "nowrap"
-  }, /* @__PURE__ */ React.createElement(Grid, {
-    item: true,
-    container: true,
-    justifyContent: "space-between",
-    alignItems: "center",
-    spacing: 0,
-    wrap: "nowrap"
-  }, /* @__PURE__ */ React.createElement(Typography, {
-    variant: "h5"
-  }, "Build Details"), /* @__PURE__ */ React.createElement(IconButton, {
-    key: "dismiss",
-    title: "Close the drawer",
-    onClick: onClose,
-    color: "inherit"
-  }, /* @__PURE__ */ React.createElement(Close, null))), /* @__PURE__ */ React.createElement(LazyLog, {
-    text: buildLog.length === 0 ? "Waiting for logs..." : buildLog.join("\n"),
-    extraLines: 1,
-    follow: true,
-    selectableLines: true,
-    enableSearch: true
-  }));
-};
-const TechDocsBuildLogs = ({buildLog}) => {
-  const classes = useDrawerStyles();
-  const [open, setOpen] = useState(false);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Button$1, {
-    color: "inherit",
-    onClick: () => setOpen(true)
-  }, "Show Build Logs"), /* @__PURE__ */ React.createElement(Drawer, {
-    classes: {paper: classes.paper},
-    anchor: "right",
-    open,
-    onClose: () => setOpen(false)
-  }, /* @__PURE__ */ React.createElement(TechDocsBuildLogsDrawerContent, {
-    buildLog,
-    onClose: () => setOpen(false)
-  })));
-};
-
-const TechDocsNotFound = ({errorMessage}) => {
-  const techdocsBuilder = useApi(configApiRef).getOptionalString("techdocs.builder");
-  let additionalInfo = "";
-  if (techdocsBuilder !== "local") {
-    additionalInfo = "Note that techdocs.builder is not set to 'local' in your config, which means this Backstage app will not generate docs if they are not found. Make sure the project's docs are generated and published by some external process (e.g. CI/CD pipeline). Or change techdocs.builder to 'local' to generate docs from this Backstage instance.";
-  }
-  return /* @__PURE__ */ React__default.createElement(ErrorPage, {
-    status: "404",
-    statusMessage: errorMessage || "Documentation not found",
-    additionalInfo
-  });
-};
-
 const buildInitialFilters = (legacyPaths, entityId) => {
   return legacyPaths ? entityId : Object.entries(entityId).reduce((acc, [key, value]) => {
-    return {...acc, [key]: value.toLocaleLowerCase("en-US")};
+    return {...acc, [key]: value == null ? void 0 : value.toLocaleLowerCase("en-US")};
   }, {});
 };
 const TechDocsSearchBar = ({
@@ -912,6 +853,161 @@ const TechDocsSearch = (props) => {
   }));
 };
 
+const useDrawerStyles = makeStyles((theme) => createStyles({
+  paper: {
+    width: "100%",
+    [theme.breakpoints.up("sm")]: {
+      width: "75%"
+    },
+    [theme.breakpoints.up("md")]: {
+      width: "50%"
+    },
+    padding: theme.spacing(2.5)
+  },
+  root: {
+    height: "100%",
+    overflow: "hidden"
+  }
+}));
+const TechDocsBuildLogsDrawerContent = ({
+  buildLog,
+  onClose
+}) => {
+  const classes = useDrawerStyles();
+  return /* @__PURE__ */ React.createElement(Grid, {
+    container: true,
+    direction: "column",
+    className: classes.root,
+    spacing: 0,
+    wrap: "nowrap"
+  }, /* @__PURE__ */ React.createElement(Grid, {
+    item: true,
+    container: true,
+    justifyContent: "space-between",
+    alignItems: "center",
+    spacing: 0,
+    wrap: "nowrap"
+  }, /* @__PURE__ */ React.createElement(Typography, {
+    variant: "h5"
+  }, "Build Details"), /* @__PURE__ */ React.createElement(IconButton, {
+    key: "dismiss",
+    title: "Close the drawer",
+    onClick: onClose,
+    color: "inherit"
+  }, /* @__PURE__ */ React.createElement(Close, null))), /* @__PURE__ */ React.createElement(LazyLog, {
+    text: buildLog.length === 0 ? "Waiting for logs..." : buildLog.join("\n"),
+    extraLines: 1,
+    follow: true,
+    selectableLines: true,
+    enableSearch: true
+  }));
+};
+const TechDocsBuildLogs = ({buildLog}) => {
+  const classes = useDrawerStyles();
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Button$1, {
+    color: "inherit",
+    onClick: () => setOpen(true)
+  }, "Show Build Logs"), /* @__PURE__ */ React.createElement(Drawer, {
+    classes: {paper: classes.paper},
+    anchor: "right",
+    open,
+    onClose: () => setOpen(false)
+  }, /* @__PURE__ */ React.createElement(TechDocsBuildLogsDrawerContent, {
+    buildLog,
+    onClose: () => setOpen(false)
+  })));
+};
+
+const TechDocsNotFound = ({errorMessage}) => {
+  const techdocsBuilder = useApi(configApiRef).getOptionalString("techdocs.builder");
+  let additionalInfo = "";
+  if (techdocsBuilder !== "local") {
+    additionalInfo = "Note that techdocs.builder is not set to 'local' in your config, which means this Backstage app will not generate docs if they are not found. Make sure the project's docs are generated and published by some external process (e.g. CI/CD pipeline). Or change techdocs.builder to 'local' to generate docs from this Backstage instance.";
+  }
+  return /* @__PURE__ */ React__default.createElement(ErrorPage, {
+    status: "404",
+    statusMessage: errorMessage || "Documentation not found",
+    additionalInfo
+  });
+};
+
+const useStyles$1 = makeStyles(() => ({
+  message: {
+    wordBreak: "break-word",
+    overflowWrap: "anywhere"
+  }
+}));
+const TechDocsStateIndicator = () => {
+  let StateAlert = null;
+  const classes = useStyles$1();
+  const {
+    state,
+    contentReload,
+    contentErrorMessage,
+    syncErrorMessage,
+    buildLog
+  } = useTechDocsReader();
+  const ReaderProgress = state === "CHECKING" ? /* @__PURE__ */ React__default.createElement(Progress, null) : null;
+  if (state === "INITIAL_BUILD") {
+    StateAlert = /* @__PURE__ */ React__default.createElement(Alert, {
+      variant: "outlined",
+      severity: "info",
+      icon: /* @__PURE__ */ React__default.createElement(CircularProgress, {
+        size: "24px"
+      }),
+      action: /* @__PURE__ */ React__default.createElement(TechDocsBuildLogs, {
+        buildLog
+      })
+    }, "Documentation is accessed for the first time and is being prepared. The subsequent loads are much faster.");
+  }
+  if (state === "CONTENT_STALE_REFRESHING") {
+    StateAlert = /* @__PURE__ */ React__default.createElement(Alert, {
+      variant: "outlined",
+      severity: "info",
+      icon: /* @__PURE__ */ React__default.createElement(CircularProgress, {
+        size: "24px"
+      }),
+      action: /* @__PURE__ */ React__default.createElement(TechDocsBuildLogs, {
+        buildLog
+      })
+    }, "A newer version of this documentation is being prepared and will be available shortly.");
+  }
+  if (state === "CONTENT_STALE_READY") {
+    StateAlert = /* @__PURE__ */ React__default.createElement(Alert, {
+      variant: "outlined",
+      severity: "success",
+      action: /* @__PURE__ */ React__default.createElement(Button$1, {
+        color: "inherit",
+        onClick: () => contentReload()
+      }, "Refresh")
+    }, "A newer version of this documentation is now available, please refresh to view.");
+  }
+  if (state === "CONTENT_STALE_ERROR") {
+    StateAlert = /* @__PURE__ */ React__default.createElement(Alert, {
+      variant: "outlined",
+      severity: "error",
+      action: /* @__PURE__ */ React__default.createElement(TechDocsBuildLogs, {
+        buildLog
+      }),
+      classes: {message: classes.message}
+    }, "Building a newer version of this documentation failed.", " ", syncErrorMessage);
+  }
+  if (state === "CONTENT_NOT_FOUND") {
+    StateAlert = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, syncErrorMessage && /* @__PURE__ */ React__default.createElement(Alert, {
+      variant: "outlined",
+      severity: "error",
+      action: /* @__PURE__ */ React__default.createElement(TechDocsBuildLogs, {
+        buildLog
+      }),
+      classes: {message: classes.message}
+    }, "Building a newer version of this documentation failed.", " ", syncErrorMessage), /* @__PURE__ */ React__default.createElement(TechDocsNotFound, {
+      errorMessage: contentErrorMessage
+    }));
+  }
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, ReaderProgress, StateAlert);
+};
+
 function calculateDisplayState({
   contentLoading,
   content,
@@ -1059,46 +1155,46 @@ function useReaderState(kind, namespace, name, path) {
 }
 
 const useStyles = makeStyles((theme) => ({
-  message: {
-    wordBreak: "break-word",
-    overflowWrap: "anywhere"
-  },
   searchBar: {
     marginLeft: "20rem",
     maxWidth: "calc(100% - 20rem * 2 - 3rem)",
-    marginTop: theme.spacing(1)
+    marginTop: theme.spacing(1),
+    "@media screen and (max-width: 76.1875em)": {
+      marginLeft: "10rem",
+      maxWidth: "calc(100% - 10rem)"
+    }
   }
 }));
-const Reader = ({entityId, onReady, withSearch = true}) => {
-  var _a, _b;
-  const {kind, namespace, name} = entityId;
+const TechDocsReaderContext = createContext({});
+const TechDocsReaderProvider = ({children}) => {
+  const {namespace = "", kind = "", name = "", "*": path} = useParams();
+  const value = useReaderState(kind, namespace, name, path);
+  return /* @__PURE__ */ React__default.createElement(TechDocsReaderContext.Provider, {
+    value
+  }, children);
+};
+const withTechDocsReaderProvider = (Component) => (props) => /* @__PURE__ */ React__default.createElement(TechDocsReaderProvider, null, /* @__PURE__ */ React__default.createElement(Component, {
+  ...props
+}));
+const useTechDocsReader = () => useContext(TechDocsReaderContext);
+const useTechDocsReaderDom = () => {
+  const navigate = useNavigate$1();
   const theme = useTheme();
-  const classes = useStyles();
-  const {
-    state,
-    path,
-    contentReload,
-    content: rawPage,
-    contentErrorMessage,
-    syncErrorMessage,
-    buildLog
-  } = useReaderState(kind, namespace, name, useParams()["*"]);
   const techdocsStorageApi = useApi(techdocsStorageApiRef);
-  const [sidebars, setSidebars] = useState();
-  const navigate = useNavigate$1();
-  const shadowDomRef = useRef(null);
   const scmIntegrationsApi = useApi(scmIntegrationsApiRef);
+  const {namespace = "", kind = "", name = ""} = useParams();
+  const {state, path, content: rawPage} = useTechDocsReader();
+  const [sidebars, setSidebars] = useState();
+  const [dom, setDom] = useState(null);
   const updateSidebarPosition = useCallback(() => {
-    if (!!shadowDomRef.current && !!sidebars) {
-      const shadowDiv = shadowDomRef.current;
-      const shadowRoot = shadowDiv.shadowRoot || shadowDiv.attachShadow({mode: "open"});
-      const mdTabs = shadowRoot.querySelector(".md-container > .md-tabs");
-      sidebars.forEach((sidebar) => {
-        const newTop = Math.max(shadowDomRef.current.getBoundingClientRect().top, 0);
-        sidebar.style.top = mdTabs ? `${newTop + mdTabs.getBoundingClientRect().height}px` : `${newTop}px`;
-      });
-    }
-  }, [shadowDomRef, sidebars]);
+    if (!dom || !sidebars)
+      return;
+    const mdTabs = dom.querySelector(".md-container > .md-tabs");
+    sidebars.forEach((sidebar) => {
+      const newTop = Math.max(dom.getBoundingClientRect().top, 0);
+      sidebar.style.top = mdTabs ? `${newTop + mdTabs.getBoundingClientRect().height}px` : `${newTop}px`;
+    });
+  }, [dom, sidebars]);
   useEffect(() => {
     updateSidebarPosition();
     window.addEventListener("scroll", updateSidebarPosition, true);
@@ -1125,106 +1221,106 @@ const Reader = ({entityId, onReady, withSearch = true}) => {
     addGitFeedbackLink(scmIntegrationsApi),
     injectCss({
       css: `
-        body {
-          font-family: ${theme.typography.fontFamily};
-          --md-text-color: ${theme.palette.text.primary};
-          --md-text-link-color: ${theme.palette.primary.main};
+          body {
+            font-family: ${theme.typography.fontFamily};
+            --md-text-color: ${theme.palette.text.primary};
+            --md-text-link-color: ${theme.palette.primary.main};
 
-          --md-code-fg-color: ${theme.palette.text.primary};
-          --md-code-bg-color: ${theme.palette.background.paper};
-        }
-        .md-main__inner { margin-top: 0; }
-        .md-sidebar {  position: fixed; bottom: 100px; width: 20rem; }
-        .md-sidebar--secondary { right: 2rem; }
-        .md-content { margin-bottom: 50px }
-        .md-footer { position: fixed; bottom: 0px; width: 100vw; }
-        .md-footer-nav__link { width: 20rem;}
-        .md-content { margin-left: 20rem; max-width: calc(100% - 20rem * 2 - 3rem); }
-        .md-typeset { font-size: 1rem; }
-        .md-nav { font-size: 1rem; }
-        .md-grid { max-width: 90vw; margin: 0 }
-        .md-typeset table:not([class]) {
-          font-size: 1rem;
-          border: 1px solid ${theme.palette.text.primary};
-          border-bottom: none;
-          border-collapse: collapse;
-        }
-        .md-typeset table:not([class]) td, .md-typeset table:not([class]) th {
-          border-bottom: 1px solid ${theme.palette.text.primary};
-        }
-        .md-typeset table:not([class]) th { font-weight: bold; }
-        .md-typeset .admonition, .md-typeset details {
-          font-size: 1rem;
-        }
-        @media screen and (max-width: 76.1875em) {
-          .md-nav {
-            background-color: ${theme.palette.background.default};
-            transition: none !important
+            --md-code-fg-color: ${theme.palette.text.primary};
+            --md-code-bg-color: ${theme.palette.background.paper};
           }
-          .md-sidebar--secondary { display: none; }
-          .md-sidebar--primary { left: 72px; width: 10rem }
-          .md-content { margin-left: 10rem; max-width: calc(100% - 10rem); }
-          .md-content__inner { font-size: 0.9rem }
-          .md-footer {
-            position: static;
-            margin-left: 10rem;
-            width: calc(100% - 10rem);
+          .md-main__inner { margin-top: 0; }
+          .md-sidebar {  position: fixed; bottom: 100px; width: 20rem; }
+          .md-sidebar--secondary { right: 2rem; }
+          .md-content { margin-bottom: 50px }
+          .md-footer { position: fixed; bottom: 0px; width: 100vw; }
+          .md-footer-nav__link { width: 20rem;}
+          .md-content { margin-left: 20rem; max-width: calc(100% - 20rem * 2 - 3rem); }
+          .md-typeset { font-size: 1rem; }
+          .md-nav { font-size: 1rem; }
+          .md-grid { max-width: 90vw; margin: 0 }
+          .md-typeset table:not([class]) {
+            font-size: 1rem;
+            border: 1px solid ${theme.palette.text.primary};
+            border-bottom: none;
+            border-collapse: collapse;
           }
-          .md-nav--primary .md-nav__title {
-            white-space: normal;
-            height: auto;
-            line-height: 1rem;
-            cursor: auto;
+          .md-typeset table:not([class]) td, .md-typeset table:not([class]) th {
+            border-bottom: 1px solid ${theme.palette.text.primary};
           }
-          .md-nav--primary > .md-nav__title [for="none"] {
-            padding-top: 0;
+          .md-typeset table:not([class]) th { font-weight: bold; }
+          .md-typeset .admonition, .md-typeset details {
+            font-size: 1rem;
           }
-        }
-      `
+          @media screen and (max-width: 76.1875em) {
+            .md-nav {
+              background-color: ${theme.palette.background.default};
+              transition: none !important
+            }
+            .md-sidebar--secondary { display: none; }
+            .md-sidebar--primary { left: 72px; width: 10rem }
+            .md-content { margin-left: 10rem; max-width: calc(100% - 10rem); }
+            .md-content__inner { font-size: 0.9rem }
+            .md-footer {
+              position: static;
+              margin-left: 10rem;
+              width: calc(100% - 10rem);
+            }
+            .md-nav--primary .md-nav__title {
+              white-space: normal;
+              height: auto;
+              line-height: 1rem;
+              cursor: auto;
+            }
+            .md-nav--primary > .md-nav__title [for="none"] {
+              padding-top: 0;
+            }
+          }
+        `
     }),
     injectCss({
       css: `
-        .md-nav__link, .md-typeset a, .md-typeset a::before, .md-typeset .headerlink {
-          transition: none;
-        }
-        `
+            .md-nav__link, .md-typeset a, .md-typeset a::before, .md-typeset .headerlink {
+              transition: none;
+            }
+          `
     }),
     injectCss({
       css: `
-        .md-typeset pre > code::-webkit-scrollbar-thumb {
-          background-color: hsla(0, 0%, 0%, 0.32);
-        }
-        .md-typeset pre > code::-webkit-scrollbar-thumb:hover {
-          background-color: hsla(0, 0%, 0%, 0.87);
-        }
+            .md-typeset pre > code::-webkit-scrollbar-thumb {
+              background-color: hsla(0, 0%, 0%, 0.32);
+            }
+            .md-typeset pre > code::-webkit-scrollbar-thumb:hover {
+              background-color: hsla(0, 0%, 0%, 0.87);
+            }
         `
     }),
     injectCss({
       css: `
-        :host {
-          --md-admonition-icon--note: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>');
-          --md-admonition-icon--abstract: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 5h16v2H4V5m0 4h16v2H4V9m0 4h16v2H4v-2m0 4h10v2H4v-2z"/></svg>');
-          --md-admonition-icon--info: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 002 12a10 10 0 0010 10 10 10 0 0010-10A10 10 0 0012 2z"/></svg>');
-          --md-admonition-icon--tip: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.55 11.2c-.23-.3-.5-.56-.76-.82-.65-.6-1.4-1.03-2.03-1.66C13.3 7.26 13 4.85 13.91 3c-.91.23-1.75.75-2.45 1.32-2.54 2.08-3.54 5.75-2.34 8.9.04.1.08.2.08.33 0 .22-.15.42-.35.5-.22.1-.46.04-.64-.12a.83.83 0 01-.15-.17c-1.1-1.43-1.28-3.48-.53-5.12C5.89 10 5 12.3 5.14 14.47c.04.5.1 1 .27 1.5.14.6.4 1.2.72 1.73 1.04 1.73 2.87 2.97 4.84 3.22 2.1.27 4.35-.12 5.96-1.6 1.8-1.66 2.45-4.32 1.5-6.6l-.13-.26c-.2-.46-.47-.87-.8-1.25l.05-.01m-3.1 6.3c-.28.24-.73.5-1.08.6-1.1.4-2.2-.16-2.87-.82 1.19-.28 1.89-1.16 2.09-2.05.17-.8-.14-1.46-.27-2.23-.12-.74-.1-1.37.18-2.06.17.38.37.76.6 1.06.76 1 1.95 1.44 2.2 2.8.04.14.06.28.06.43.03.82-.32 1.72-.92 2.27h.01z"/></svg>');
-          --md-admonition-icon--success: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2m-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
-          --md-admonition-icon--question: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.07 11.25l-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 00-2-2 2 2 0 00-2 2H8a4 4 0 014-4 4 4 0 014 4 3.2 3.2 0 01-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 002 12a10 10 0 0010 10 10 10 0 0010-10c0-5.53-4.5-10-10-10z"/></svg>');
-          --md-admonition-icon--warning: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 14h-2v-4h2m0 8h-2v-2h2M1 21h22L12 2 1 21z"/></svg>');
-          --md-admonition-icon--failure: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c5.53 0 10 4.47 10 10s-4.47 10-10 10S2 17.53 2 12 6.47 2 12 2m3.59 5L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41 15.59 7z"/></svg>');
-          --md-admonition-icon--danger: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.5 20l4.86-9.73H13V4l-5 9.73h3.5V20M12 2c2.75 0 5.1 1 7.05 2.95C21 6.9 22 9.25 22 12s-1 5.1-2.95 7.05C17.1 21 14.75 22 12 22s-5.1-1-7.05-2.95C3 17.1 2 14.75 2 12s1-5.1 2.95-7.05C6.9 3 9.25 2 12 2z"/></svg>');
-          --md-admonition-icon--bug: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 12h-4v-2h4m0 6h-4v-2h4m6-6h-2.81a5.985 5.985 0 00-1.82-1.96L17 4.41 15.59 3l-2.17 2.17a6.002 6.002 0 00-2.83 0L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8z"/></svg>');
-          --md-admonition-icon--example: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 13v-2h14v2H7m0 6v-2h14v2H7M7 7V5h14v2H7M3 8V5H2V4h2v4H3m-1 9v-1h3v4H2v-1h2v-.5H3v-1h1V17H2m2.25-7a.75.75 0 01.75.75c0 .2-.08.39-.21.52L3.12 13H5v1H2v-.92L4 11H2v-1h2.25z"/></svg>');
-          --md-admonition-icon--quote: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 17h3l2-4V7h-6v6h3M6 17h3l2-4V7H5v6h3l-2 4z"/></svg>');
-        }
-        :host {
-          --md-footnotes-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 7v4H5.83l3.58-3.59L8 6l-6 6 6 6 1.41-1.42L5.83 13H21V7h-2z"/></svg>');
-        }
-        :host {
-          --md-details-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.59 16.58L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.42z"/></svg>');
-        }
-        :host {
-          --md-tasklist-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2A10 10 0 002 12a10 10 0 0010 10 10 10 0 0010-10A10 10 0 0012 2z"/></svg>');
-          --md-tasklist-icon--checked: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2m-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
-        }
+            :host {
+              --md-admonition-icon--note: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>');
+              --md-admonition-icon--abstract: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 5h16v2H4V5m0 4h16v2H4V9m0 4h16v2H4v-2m0 4h10v2H4v-2z"/></svg>');
+              --md-admonition-icon--info: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 002 12a10 10 0 0010 10 10 10 0 0010-10A10 10 0 0012 2z"/></svg>');
+              --md-admonition-icon--tip: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.55 11.2c-.23-.3-.5-.56-.76-.82-.65-.6-1.4-1.03-2.03-1.66C13.3 7.26 13 4.85 13.91 3c-.91.23-1.75.75-2.45 1.32-2.54 2.08-3.54 5.75-2.34 8.9.04.1.08.2.08.33 0 .22-.15.42-.35.5-.22.1-.46.04-.64-.12a.83.83 0 01-.15-.17c-1.1-1.43-1.28-3.48-.53-5.12C5.89 10 5 12.3 5.14 14.47c.04.5.1 1 .27 1.5.14.6.4 1.2.72 1.73 1.04 1.73 2.87 2.97 4.84 3.22 2.1.27 4.35-.12 5.96-1.6 1.8-1.66 2.45-4.32 1.5-6.6l-.13-.26c-.2-.46-.47-.87-.8-1.25l.05-.01m-3.1 6.3c-.28.24-.73.5-1.08.6-1.1.4-2.2-.16-2.87-.82 1.19-.28 1.89-1.16 2.09-2.05.17-.8-.14-1.46-.27-2.23-.12-.74-.1-1.37.18-2.06.17.38.37.76.6 1.06.76 1 1.95 1.44 2.2 2.8.04.14.06.28.06.43.03.82-.32 1.72-.92 2.27h.01z"/></svg>');
+              --md-admonition-icon--success: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2m-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
+              --md-admonition-icon--question: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.07 11.25l-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 00-2-2 2 2 0 00-2 2H8a4 4 0 014-4 4 4 0 014 4 3.2 3.2 0 01-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 002 12a10 10 0 0010 10 10 10 0 0010-10c0-5.53-4.5-10-10-10z"/></svg>');
+              --md-admonition-icon--warning: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 14h-2v-4h2m0 8h-2v-2h2M1 21h22L12 2 1 21z"/></svg>');
+              --md-admonition-icon--failure: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c5.53 0 10 4.47 10 10s-4.47 10-10 10S2 17.53 2 12 6.47 2 12 2m3.59 5L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41 15.59 7z"/></svg>');
+              --md-admonition-icon--danger: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.5 20l4.86-9.73H13V4l-5 9.73h3.5V20M12 2c2.75 0 5.1 1 7.05 2.95C21 6.9 22 9.25 22 12s-1 5.1-2.95 7.05C17.1 21 14.75 22 12 22s-5.1-1-7.05-2.95C3 17.1 2 14.75 2 12s1-5.1 2.95-7.05C6.9 3 9.25 2 12 2z"/></svg>');
+              --md-admonition-icon--bug: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 12h-4v-2h4m0 6h-4v-2h4m6-6h-2.81a5.985 5.985 0 00-1.82-1.96L17 4.41 15.59 3l-2.17 2.17a6.002 6.002 0 00-2.83 0L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8z"/></svg>');
+              --md-admonition-icon--example: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 13v-2h14v2H7m0 6v-2h14v2H7M7 7V5h14v2H7M3 8V5H2V4h2v4H3m-1 9v-1h3v4H2v-1h2v-.5H3v-1h1V17H2m2.25-7a.75.75 0 01.75.75c0 .2-.08.39-.21.52L3.12 13H5v1H2v-.92L4 11H2v-1h2.25z"/></svg>');
+              --md-admonition-icon--quote: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 17h3l2-4V7h-6v6h3M6 17h3l2-4V7H5v6h3l-2 4z"/></svg>');
+            }
+            :host {
+              --md-footnotes-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 7v4H5.83l3.58-3.59L8 6l-6 6 6 6 1.41-1.42L5.83 13H21V7h-2z"/></svg>');
+            }
+            :host {
+              --md-details-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.59 16.58L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.42z"/></svg>');
+            }
+            :host {
+              --md-tasklist-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2A10 10 0 002 12a10 10 0 0010 10 10 10 0 0010-10A10 10 0 0012 2z"/></svg>');
+              --md-tasklist-icon--checked: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2m-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
+            }
         `
     })
   ]), [
@@ -1239,25 +1335,16 @@ const Reader = ({entityId, onReady, withSearch = true}) => {
     theme.palette.text.primary,
     theme.typography.fontFamily
   ]);
-  const postRender = useCallback(async (shadowRoot) => transform(shadowRoot.children[0], [
-    (dom) => {
-      setTimeout(() => {
-        var _a2;
-        if (window.location.hash) {
-          const hash = window.location.hash.slice(1);
-          (_a2 = shadowRoot == null ? void 0 : shadowRoot.getElementById(hash)) == null ? void 0 : _a2.scrollIntoView();
-        }
-      }, 200);
-      return dom;
-    },
+  const postRender = useCallback(async (transformedElement) => transform(transformedElement, [
+    scrollIntoAnchor(),
     addLinkClickListener({
       baseUrl: window.location.origin,
       onClick: (_, url) => {
-        var _a2;
+        var _a;
         const parsedUrl = new URL(url);
         if (parsedUrl.hash) {
           navigate(`${parsedUrl.pathname}${parsedUrl.hash}`);
-          (_a2 = shadowRoot == null ? void 0 : shadowRoot.getElementById(parsedUrl.hash.slice(1))) == null ? void 0 : _a2.scrollIntoView();
+          (_a = transformedElement == null ? void 0 : transformedElement.querySelector(`#${parsedUrl.hash.slice(1)}`)) == null ? void 0 : _a.scrollIntoView();
         } else {
           navigate(parsedUrl.pathname);
         }
@@ -1265,105 +1352,207 @@ const Reader = ({entityId, onReady, withSearch = true}) => {
     }),
     onCssReady({
       docStorageUrl: await techdocsStorageApi.getApiOrigin(),
-      onLoading: (dom) => {
-        dom.style.setProperty("opacity", "0");
+      onLoading: (renderedElement) => {
+        renderedElement.style.setProperty("opacity", "0");
       },
-      onLoaded: (dom) => {
-        var _a2;
-        dom.style.removeProperty("opacity");
-        (_a2 = dom.querySelector(".md-nav__title")) == null ? void 0 : _a2.removeAttribute("for");
-        const sideDivs = Array.from(shadowRoot.querySelectorAll(".md-sidebar"));
-        setSidebars(sideDivs);
-        const docTopPosition = dom.getBoundingClientRect().top;
-        const mdTabs = dom.querySelector(".md-container > .md-tabs");
-        sideDivs.forEach((sidebar) => {
-          sidebar.style.top = mdTabs ? `${docTopPosition + mdTabs.getBoundingClientRect().height}px` : `${docTopPosition}px`;
-        });
+      onLoaded: (renderedElement) => {
+        var _a;
+        renderedElement.style.removeProperty("opacity");
+        (_a = renderedElement.querySelector(".md-nav__title")) == null ? void 0 : _a.removeAttribute("for");
+        setSidebars(Array.from(renderedElement.querySelectorAll(".md-sidebar")));
       }
     })
   ]), [navigate, techdocsStorageApi]);
   useEffect(() => {
-    var _a2;
-    if (!rawPage || !shadowDomRef.current) {
-      if ((_a2 = shadowDomRef.current) == null ? void 0 : _a2.shadowRoot) {
-        shadowDomRef.current.shadowRoot.innerHTML = "";
-      }
+    if (!rawPage)
       return () => {
       };
-    }
-    if (onReady) {
-      onReady();
-    }
     let shouldReplaceContent = true;
-    preRender(rawPage, path).then(async (transformedElement) => {
-      if (!(transformedElement == null ? void 0 : transformedElement.innerHTML)) {
+    preRender(rawPage, path).then(async (preTransformedDomElement) => {
+      if (!(preTransformedDomElement == null ? void 0 : preTransformedDomElement.innerHTML)) {
         return;
       }
       if (!shouldReplaceContent) {
         return;
       }
-      const shadowDiv = shadowDomRef.current;
-      const shadowRoot = shadowDiv.shadowRoot || shadowDiv.attachShadow({mode: "open"});
-      Array.from(shadowRoot.children).forEach((child) => shadowRoot.removeChild(child));
-      shadowRoot.appendChild(transformedElement);
       window.scroll({top: 0});
-      await postRender(shadowRoot);
+      const postTransformedDomElement = await postRender(preTransformedDomElement);
+      setDom(postTransformedDomElement);
     });
     return () => {
       shouldReplaceContent = false;
     };
-  }, [onReady, path, postRender, preRender, rawPage]);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, state === "CHECKING" && /* @__PURE__ */ React__default.createElement(Progress, null), state === "INITIAL_BUILD" && /* @__PURE__ */ React__default.createElement(Alert, {
-    variant: "outlined",
-    severity: "info",
-    icon: /* @__PURE__ */ React__default.createElement(CircularProgress, {
-      size: "24px"
-    }),
-    action: /* @__PURE__ */ React__default.createElement(TechDocsBuildLogs, {
-      buildLog
-    })
-  }, "Documentation is accessed for the first time and is being prepared. The subsequent loads are much faster."), state === "CONTENT_STALE_REFRESHING" && /* @__PURE__ */ React__default.createElement(Alert, {
-    variant: "outlined",
-    severity: "info",
-    icon: /* @__PURE__ */ React__default.createElement(CircularProgress, {
-      size: "24px"
-    }),
-    action: /* @__PURE__ */ React__default.createElement(TechDocsBuildLogs, {
-      buildLog
-    })
-  }, "A newer version of this documentation is being prepared and will be available shortly."), state === "CONTENT_STALE_READY" && /* @__PURE__ */ React__default.createElement(Alert, {
-    variant: "outlined",
-    severity: "success",
-    action: /* @__PURE__ */ React__default.createElement(Button$1, {
-      color: "inherit",
-      onClick: () => contentReload()
-    }, "Refresh")
-  }, "A newer version of this documentation is now available, please refresh to view."), state === "CONTENT_STALE_ERROR" && /* @__PURE__ */ React__default.createElement(Alert, {
-    variant: "outlined",
-    severity: "error",
-    action: /* @__PURE__ */ React__default.createElement(TechDocsBuildLogs, {
-      buildLog
-    }),
-    classes: {message: classes.message}
-  }, "Building a newer version of this documentation failed.", " ", syncErrorMessage), state === "CONTENT_NOT_FOUND" && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, syncErrorMessage && /* @__PURE__ */ React__default.createElement(Alert, {
-    variant: "outlined",
-    severity: "error",
-    action: /* @__PURE__ */ React__default.createElement(TechDocsBuildLogs, {
-      buildLog
-    }),
-    classes: {message: classes.message}
-  }, "Building a newer version of this documentation failed.", " ", syncErrorMessage), /* @__PURE__ */ React__default.createElement(TechDocsNotFound, {
-    errorMessage: contentErrorMessage
-  })), withSearch && ((_b = (_a = shadowDomRef == null ? void 0 : shadowDomRef.current) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.innerHTML) && /* @__PURE__ */ React__default.createElement(Grid, {
+  }, [rawPage, path, preRender, postRender]);
+  return dom;
+};
+const TheReader = ({
+  entityRef,
+  onReady = () => {
+  },
+  withSearch = true
+}) => {
+  var _a, _b;
+  const classes = useStyles();
+  const dom = useTechDocsReaderDom();
+  const shadowDomRef = useRef(null);
+  useEffect(() => {
+    if (!dom || !shadowDomRef.current)
+      return;
+    const shadowDiv = shadowDomRef.current;
+    const shadowRoot = shadowDiv.shadowRoot || shadowDiv.attachShadow({mode: "open"});
+    Array.from(shadowRoot.children).forEach((child) => shadowRoot.removeChild(child));
+    shadowRoot.appendChild(dom);
+    onReady();
+  }, [dom, onReady]);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(TechDocsStateIndicator, null), withSearch && ((_b = (_a = shadowDomRef == null ? void 0 : shadowDomRef.current) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.innerHTML) && /* @__PURE__ */ React__default.createElement(Grid, {
     container: true,
     className: classes.searchBar
   }, /* @__PURE__ */ React__default.createElement(TechDocsSearch, {
-    entityId
+    entityId: entityRef
   })), /* @__PURE__ */ React__default.createElement("div", {
     "data-testid": "techdocs-content-shadowroot",
     ref: shadowDomRef
   }));
 };
+const Reader = ({
+  entityRef,
+  onReady = () => {
+  },
+  withSearch = true
+}) => /* @__PURE__ */ React__default.createElement(TechDocsReaderProvider, null, /* @__PURE__ */ React__default.createElement(TheReader, {
+  entityRef,
+  onReady,
+  withSearch
+}));
+
+const TechDocsPageHeader = ({
+  entityRef,
+  entityMetadata,
+  techDocsMetadata
+}) => {
+  const {name} = entityRef;
+  const {site_name: siteName, site_description: siteDescription} = techDocsMetadata || {};
+  const {locationMetadata, spec} = entityMetadata || {};
+  const lifecycle = spec == null ? void 0 : spec.lifecycle;
+  const ownedByRelations = entityMetadata ? getEntityRelations(entityMetadata, RELATION_OWNED_BY) : [];
+  const docsRootLink = useRouteRef(rootRouteRef)();
+  const labels = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(HeaderLabel, {
+    label: "Component",
+    value: /* @__PURE__ */ React__default.createElement(EntityRefLink, {
+      color: "inherit",
+      entityRef,
+      defaultKind: "Component"
+    })
+  }), ownedByRelations.length > 0 && /* @__PURE__ */ React__default.createElement(HeaderLabel, {
+    label: "Owner",
+    value: /* @__PURE__ */ React__default.createElement(EntityRefLinks, {
+      color: "inherit",
+      entityRefs: ownedByRelations,
+      defaultKind: "group"
+    })
+  }), lifecycle ? /* @__PURE__ */ React__default.createElement(HeaderLabel, {
+    label: "Lifecycle",
+    value: lifecycle
+  }) : null, locationMetadata && locationMetadata.type !== "dir" && locationMetadata.type !== "file" ? /* @__PURE__ */ React__default.createElement(HeaderLabel, {
+    label: "",
+    value: /* @__PURE__ */ React__default.createElement("a", {
+      href: locationMetadata.target,
+      target: "_blank",
+      rel: "noopener noreferrer"
+    }, /* @__PURE__ */ React__default.createElement(CodeIcon, {
+      style: {marginTop: "-25px", fill: "#fff"}
+    }))
+  }) : null);
+  return /* @__PURE__ */ React__default.createElement(Header, {
+    title: siteName ? siteName : ".",
+    pageTitleOverride: siteName || name,
+    subtitle: siteDescription && siteDescription !== "None" ? siteDescription : "",
+    type: "Docs",
+    typeLink: docsRootLink
+  }, labels);
+};
+
+const LegacyTechDocsPage = () => {
+  const [documentReady, setDocumentReady] = useState(false);
+  const {namespace, kind, name} = useParams();
+  const techdocsApi = useApi(techdocsApiRef);
+  const {value: techdocsMetadataValue} = useAsync(() => {
+    if (documentReady) {
+      return techdocsApi.getTechDocsMetadata({kind, namespace, name});
+    }
+    return Promise.resolve(void 0);
+  }, [kind, namespace, name, techdocsApi, documentReady]);
+  const {value: entityMetadataValue, error: entityMetadataError} = useAsync(() => {
+    return techdocsApi.getEntityMetadata({kind, namespace, name});
+  }, [kind, namespace, name, techdocsApi]);
+  const onReady = useCallback(() => {
+    setDocumentReady(true);
+  }, [setDocumentReady]);
+  if (entityMetadataError) {
+    return /* @__PURE__ */ React__default.createElement(TechDocsNotFound, {
+      errorMessage: entityMetadataError.message
+    });
+  }
+  return /* @__PURE__ */ React__default.createElement(Page, {
+    themeId: "documentation"
+  }, /* @__PURE__ */ React__default.createElement(TechDocsPageHeader, {
+    techDocsMetadata: techdocsMetadataValue,
+    entityMetadata: entityMetadataValue,
+    entityRef: {
+      kind,
+      namespace,
+      name
+    }
+  }), /* @__PURE__ */ React__default.createElement(Content, {
+    "data-testid": "techdocs-content"
+  }, /* @__PURE__ */ React__default.createElement(Reader, {
+    onReady,
+    entityRef: {
+      kind,
+      namespace,
+      name
+    }
+  })));
+};
+
+const TechDocsPage = ({children}) => {
+  const outlet = useOutlet();
+  const [documentReady, setDocumentReady] = useState(false);
+  const {namespace, kind, name} = useParams();
+  const techdocsApi = useApi(techdocsApiRef);
+  const {value: techdocsMetadataValue} = useAsync(() => {
+    if (documentReady) {
+      return techdocsApi.getTechDocsMetadata({kind, namespace, name});
+    }
+    return Promise.resolve(void 0);
+  }, [kind, namespace, name, techdocsApi, documentReady]);
+  const {value: entityMetadataValue, error: entityMetadataError} = useAsync(() => {
+    return techdocsApi.getEntityMetadata({kind, namespace, name});
+  }, [kind, namespace, name, techdocsApi]);
+  const onReady = useCallback(() => {
+    setDocumentReady(true);
+  }, [setDocumentReady]);
+  if (entityMetadataError) {
+    return /* @__PURE__ */ React__default.createElement(TechDocsNotFound, {
+      errorMessage: entityMetadataError.message
+    });
+  }
+  if (!children)
+    return outlet || /* @__PURE__ */ React__default.createElement(LegacyTechDocsPage, null);
+  return /* @__PURE__ */ React__default.createElement(Page, {
+    themeId: "documentation"
+  }, children instanceof Function ? children({
+    techdocsMetadataValue,
+    entityMetadataValue,
+    entityRef: {kind, namespace, name},
+    onReady
+  }) : children);
+};
+
+var TechDocsPage$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  TechDocsPage: TechDocsPage
+});
 
 const DocsCardGrid = ({
   entities
@@ -1386,7 +1575,8 @@ const DocsCardGrid = ({
         kind: toLowerMaybe(entity.kind),
         name: toLowerMaybe(entity.metadata.name)
       }),
-      color: "primary"
+      color: "primary",
+      "data-testid": "read_docs"
     }, "Read Docs")));
   }));
 };
@@ -1429,6 +1619,7 @@ const CustomPanel = ({
   }, index === 0 ? /* @__PURE__ */ React__default.createElement(SupportButton, null, "Discover documentation in your ecosystem.") : null), /* @__PURE__ */ React__default.createElement("div", {
     className: classes.panelContainer
   }, /* @__PURE__ */ React__default.createElement(Panel, {
+    "data-testid": "techdocs-custom-panel",
     entities: shownEntities
   })));
 };
@@ -1480,7 +1671,9 @@ const TechDocsCustomHome = ({
       id: index.toString(),
       label
     }))
-  }), /* @__PURE__ */ React__default.createElement(Content, null, currentTabConfig.panels.map((config, index) => /* @__PURE__ */ React__default.createElement(CustomPanel, {
+  }), /* @__PURE__ */ React__default.createElement(Content, {
+    "data-testid": "techdocs-content"
+  }, currentTabConfig.panels.map((config, index) => /* @__PURE__ */ React__default.createElement(CustomPanel, {
     key: index,
     config,
     entities: !!entities ? entities : [],
@@ -1533,101 +1726,11 @@ var TechDocsIndexPage$1 = /*#__PURE__*/Object.freeze({
   TechDocsIndexPage: TechDocsIndexPage
 });
 
-const TechDocsPageHeader = ({
-  entityId,
-  entityMetadata,
-  techDocsMetadata
-}) => {
-  const {name} = entityId;
-  const {site_name: siteName, site_description: siteDescription} = techDocsMetadata || {};
-  const {locationMetadata, spec} = entityMetadata || {};
-  const lifecycle = spec == null ? void 0 : spec.lifecycle;
-  const ownedByRelations = entityMetadata ? getEntityRelations(entityMetadata, RELATION_OWNED_BY) : [];
-  const docsRootLink = useRouteRef(rootRouteRef)();
-  const labels = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(HeaderLabel, {
-    label: "Component",
-    value: /* @__PURE__ */ React__default.createElement(EntityRefLink, {
-      color: "inherit",
-      entityRef: entityId,
-      defaultKind: "Component"
-    })
-  }), ownedByRelations.length > 0 && /* @__PURE__ */ React__default.createElement(HeaderLabel, {
-    label: "Owner",
-    value: /* @__PURE__ */ React__default.createElement(EntityRefLinks, {
-      color: "inherit",
-      entityRefs: ownedByRelations,
-      defaultKind: "group"
-    })
-  }), lifecycle ? /* @__PURE__ */ React__default.createElement(HeaderLabel, {
-    label: "Lifecycle",
-    value: lifecycle
-  }) : null, locationMetadata && locationMetadata.type !== "dir" && locationMetadata.type !== "file" ? /* @__PURE__ */ React__default.createElement(HeaderLabel, {
-    label: "",
-    value: /* @__PURE__ */ React__default.createElement("a", {
-      href: locationMetadata.target,
-      target: "_blank",
-      rel: "noopener noreferrer"
-    }, /* @__PURE__ */ React__default.createElement(CodeIcon, {
-      style: {marginTop: "-25px", fill: "#fff"}
-    }))
-  }) : null);
-  return /* @__PURE__ */ React__default.createElement(Header, {
-    title: siteName ? siteName : ".",
-    pageTitleOverride: siteName || name,
-    subtitle: siteDescription && siteDescription !== "None" ? siteDescription : "",
-    type: "Docs",
-    typeLink: docsRootLink
-  }, labels);
-};
-
-const TechDocsPage = () => {
-  const [documentReady, setDocumentReady] = useState(false);
-  const {namespace, kind, name} = useParams();
-  const techdocsApi = useApi(techdocsApiRef);
-  const {value: techdocsMetadataValue} = useAsync(() => {
-    if (documentReady) {
-      return techdocsApi.getTechDocsMetadata({kind, namespace, name});
-    }
-    return Promise.resolve(void 0);
-  }, [kind, namespace, name, techdocsApi, documentReady]);
-  const {value: entityMetadataValue} = useAsync(() => {
-    return techdocsApi.getEntityMetadata({kind, namespace, name});
-  }, [kind, namespace, name, techdocsApi]);
-  const onReady = useCallback(() => {
-    setDocumentReady(true);
-  }, [setDocumentReady]);
-  return /* @__PURE__ */ React__default.createElement(Page, {
-    themeId: "documentation"
-  }, /* @__PURE__ */ React__default.createElement(TechDocsPageHeader, {
-    techDocsMetadata: techdocsMetadataValue,
-    entityMetadata: entityMetadataValue,
-    entityId: {
-      kind,
-      namespace,
-      name
-    }
-  }), /* @__PURE__ */ React__default.createElement(Content, {
-    "data-testid": "techdocs-content"
-  }, /* @__PURE__ */ React__default.createElement(Reader, {
-    onReady,
-    entityId: {
-      kind,
-      namespace,
-      name
-    }
-  })));
-};
-
-var TechDocsPage$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  TechDocsPage: TechDocsPage
-});
-
 const EntityPageDocs = ({entity}) => {
   var _a;
   return /* @__PURE__ */ React__default.createElement(Reader, {
     withSearch: false,
-    entityId: {
+    entityRef: {
       kind: entity.kind,
       namespace: (_a = entity.metadata.namespace) != null ? _a : "default",
       name: entity.metadata.name
@@ -1636,6 +1739,10 @@ const EntityPageDocs = ({entity}) => {
 };
 
 const TECHDOCS_ANNOTATION = "backstage.io/techdocs-ref";
+const isTechDocsAvailable = (entity) => {
+  var _a, _b;
+  return Boolean((_b = (_a = entity == null ? void 0 : entity.metadata) == null ? void 0 : _a.annotations) == null ? void 0 : _b[TECHDOCS_ANNOTATION]);
+};
 const Router = () => {
   return /* @__PURE__ */ React__default.createElement(Routes, null, /* @__PURE__ */ React__default.createElement(Route, {
     path: "/",
@@ -1664,9 +1771,10 @@ const EmbeddedDocsRouter = (_props) => {
 
 var Router$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
+  isTechDocsAvailable: isTechDocsAvailable,
   Router: Router,
   EmbeddedDocsRouter: EmbeddedDocsRouter
 });
 
-export { DefaultTechDocsHome, DocsCardGrid$2 as DocsCardGrid, DocsResultListItem, DocsTable, EmbeddedDocsRouter, EntityListDocsTable, EntityTechdocsContent, Reader, Router, TechDocsClient, TechDocsCustomHome$2 as TechDocsCustomHome, TechDocsIndexPage$2 as TechDocsIndexPage, TechDocsPageWrapper, TechDocsPicker, TechDocsReaderPage, TechDocsStorageClient, TechdocsPage, techdocsPlugin as plugin, techdocsApiRef, techdocsPlugin, techdocsStorageApiRef };
+export { DefaultTechDocsHome, DocsCardGrid$2 as DocsCardGrid, DocsResultListItem, DocsTable, EmbeddedDocsRouter, EntityListDocsTable, EntityTechdocsContent, Reader, Router, TechDocsClient, TechDocsCustomHome$2 as TechDocsCustomHome, TechDocsIndexPage$2 as TechDocsIndexPage, TechDocsPage, TechDocsPageHeader, TechDocsPageWrapper, TechDocsPicker, TechDocsReaderPage, TechDocsSearch, TechDocsStateIndicator, TechDocsStorageClient, TechdocsPage, isTechDocsAvailable, techdocsPlugin as plugin, techdocsApiRef, techdocsPlugin, techdocsStorageApiRef, useTechDocsReader, useTechDocsReaderDom, withTechDocsReaderProvider };
 //# sourceMappingURL=index.esm.js.map