@backstage/plugin-techdocs 0.14.0 → 0.15.1

package/dist/index.esm.js

@@ -1,23 +1,18 @@
-import { createApiRef, createRouteRef, useRouteRef, useApi, configApiRef, createPlugin, createApiFactory, discoveryApiRef, identityApiRef, fetchApiRef, createRoutableExtension, createComponentExtension, useApp } from '@backstage/core-plugin-api';
+import { createApiRef, useApi, configApiRef, createRouteRef, useRouteRef, useApp, createPlugin, createApiFactory, discoveryApiRef, identityApiRef, fetchApiRef, createRoutableExtension } from '@backstage/core-plugin-api';
 import { ResponseError, NotFoundError } from '@backstage/errors';
 import { EventSourcePolyfill } from 'event-source-polyfill';
-import React, { useEffect, useState, useReducer, useRef, useMemo, createContext, useContext, useCallback } from 'react';
-import { makeStyles, ListItemText, ListItem, Divider, Card, CardMedia, CardContent, CardActions, TextField, InputAdornment, IconButton, CircularProgress, createStyles, Button as Button$1, Drawer, Grid, Typography, useTheme, lighten, alpha } from '@material-ui/core';
-import { Link, SubvalueCell, Table, EmptyState, Button, WarningPanel, CodeSnippet, PageWithHeader, Content, ContentHeader, SupportButton, ItemCardGrid, ItemCardHeader, Progress, LogViewer, ErrorPage, SidebarPinStateContext, HeaderLabel, Header, Page, HeaderTabs, MissingAnnotationEmptyState } from '@backstage/core-components';
-import TextTruncate from 'react-text-truncate';
-import { FilteredEntityLayout, FilterContainer, EntityListContainer } from '@backstage/plugin-catalog';
-import { favoriteEntityIcon, favoriteEntityTooltip, EntityRefLinks, getEntityRelations, formatEntityRefTitle, useEntityList, useStarredEntities, CATALOG_FILTER_EXISTS, EntityListProvider, UserListPicker, EntityOwnerPicker, EntityTagPicker, EntityRefLink, catalogApiRef, isOwnerOf, useEntity } from '@backstage/plugin-catalog-react';
-import useCopyToClipboard from 'react-use/lib/useCopyToClipboard';
-import { capitalize } from 'lodash';
-import { RELATION_OWNED_BY, parseEntityRef, DEFAULT_NAMESPACE } from '@backstage/catalog-model';
-import ShareIcon from '@material-ui/icons/Share';
+import React, { useState, useCallback, useEffect, useReducer, useRef, useMemo, createContext, useContext } from 'react';
 import { useNavigate as useNavigate$1, useParams, Routes, Route } from 'react-router-dom';
+import { withStyles, Tooltip, ThemeProvider, SvgIcon, makeStyles, ListItemText, ListItem, Divider, TextField, InputAdornment, IconButton, CircularProgress, createStyles, Button, Drawer, Grid, Typography, useTheme, lighten, alpha, Card, CardMedia, CardContent, CardActions } from '@material-ui/core';
 import { scmIntegrationsApiRef } from '@backstage/integration-react';
+import { Link, LogViewer, ErrorPage, Progress, SidebarPinStateContext, HeaderLabel, Header, Page, Content, ItemCardGrid, ItemCardHeader, Button as Button$1, WarningPanel, CodeSnippet, SubvalueCell, Table, EmptyState, PageWithHeader, ContentHeader, SupportButton, MissingAnnotationEmptyState } from '@backstage/core-components';
 import { replaceGitHubUrlType } from '@backstage/integration';
 import FeedbackOutlinedIcon from '@material-ui/icons/FeedbackOutlined';
 import ReactDOM from 'react-dom';
 import parseGitUrl from 'git-url-parse';
+import MenuIcon from '@material-ui/icons/Menu';
 import DOMPurify from 'dompurify';
+import TextTruncate from 'react-text-truncate';
 import { SearchContextProvider, useSearch } from '@backstage/plugin-search';
 import SearchIcon from '@material-ui/icons/Search';
 import Autocomplete from '@material-ui/lab/Autocomplete';
@@ -28,6 +23,15 @@ import Close from '@material-ui/icons/Close';
 import useAsync from 'react-use/lib/useAsync';
 import useAsyncRetry from 'react-use/lib/useAsyncRetry';
 import CodeIcon from '@material-ui/icons/Code';
+import { RELATION_OWNED_BY } from '@backstage/catalog-model';
+import { getEntityRelations, EntityRefLink, EntityRefLinks, useEntityList, humanizeEntityRef, useStarredEntities, CATALOG_FILTER_EXISTS, EntityListProvider, UserListPicker, EntityOwnerPicker, EntityTagPicker, useEntity } from '@backstage/plugin-catalog-react';
+import useCopyToClipboard from 'react-use/lib/useCopyToClipboard';
+import { capitalize } from 'lodash';
+import ShareIcon from '@material-ui/icons/Share';
+import { withStyles as withStyles$1 } from '@material-ui/styles';
+import Star from '@material-ui/icons/Star';
+import StarBorder from '@material-ui/icons/StarBorder';
+import { FilteredEntityLayout, FilterContainer, EntityListContainer } from '@backstage/plugin-catalog';
 
 const techdocsStorageApiRef = createApiRef({
   id: "plugin.techdocs.storageservice"
@@ -148,577 +152,232 @@ class TechDocsStorageClient {
   }
 }
 
-const useStyles$3 = makeStyles({
-  flexContainer: {
-    flexWrap: "wrap"
-  },
-  itemText: {
-    width: "100%",
-    marginBottom: "1rem"
-  }
-});
-const DocsResultListItem = ({
-  result,
-  lineClamp = 5,
-  asListItem = true,
-  asLink = true,
-  title
+const isSvgNeedingInlining = (attrName, attrVal, apiOrigin) => {
+  const isSrcToSvg = attrName === "src" && attrVal.endsWith(".svg");
+  const isRelativeUrl = !attrVal.match(/^([a-z]*:)?\/\//i);
+  const pointsToOurBackend = attrVal.startsWith(apiOrigin);
+  return isSrcToSvg && (isRelativeUrl || pointsToOurBackend);
+};
+const addBaseUrl = ({
+  techdocsStorageApi,
+  entityId,
+  path
 }) => {
-  const classes = useStyles$3();
-  const TextItem = () => {
-    var _a;
-    return /* @__PURE__ */ React.createElement(ListItemText, {
-      className: classes.itemText,
-      primaryTypographyProps: { variant: "h6" },
-      primary: title ? title : `${result.title} | ${(_a = result.entityTitle) != null ? _a : result.name} docs`,
-      secondary: /* @__PURE__ */ React.createElement(TextTruncate, {
-        line: lineClamp,
-        truncateText: "\u2026",
-        text: result.text,
-        element: "span"
-      })
-    });
+  return async (dom) => {
+    const apiOrigin = await techdocsStorageApi.getApiOrigin();
+    const updateDom = async (list, attributeName) => {
+      for (const elem of list) {
+        if (elem.hasAttribute(attributeName)) {
+          const elemAttribute = elem.getAttribute(attributeName);
+          if (!elemAttribute)
+            return;
+          const newValue = await techdocsStorageApi.getBaseUrl(elemAttribute, entityId, path);
+          if (isSvgNeedingInlining(attributeName, elemAttribute, apiOrigin)) {
+            try {
+              const svg = await fetch(newValue, { credentials: "include" });
+              const svgContent = await svg.text();
+              elem.setAttribute(attributeName, `data:image/svg+xml;base64,${btoa(svgContent)}`);
+            } catch (e) {
+              elem.setAttribute("alt", `Error: ${elemAttribute}`);
+            }
+          } else {
+            elem.setAttribute(attributeName, newValue);
+          }
+        }
+      }
+    };
+    await Promise.all([
+      updateDom(dom.querySelectorAll("img"), "src"),
+      updateDom(dom.querySelectorAll("script"), "src"),
+      updateDom(dom.querySelectorAll("source"), "src"),
+      updateDom(dom.querySelectorAll("link"), "href"),
+      updateDom(dom.querySelectorAll("a[download]"), "href")
+    ]);
+    return dom;
   };
-  const LinkWrapper = ({ children }) => asLink ? /* @__PURE__ */ React.createElement(Link, {
-    to: result.location
-  }, children) : /* @__PURE__ */ React.createElement(React.Fragment, null, children);
-  const ListItemWrapper = ({ children }) => asListItem ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ListItem, {
-    alignItems: "flex-start",
-    className: classes.flexContainer
-  }, children), /* @__PURE__ */ React.createElement(Divider, {
-    component: "li"
-  })) : /* @__PURE__ */ React.createElement(React.Fragment, null, children);
-  return /* @__PURE__ */ React.createElement(LinkWrapper, null, /* @__PURE__ */ React.createElement(ListItemWrapper, null, /* @__PURE__ */ React.createElement(TextItem, null)));
 };
 
-const rootRouteRef = createRouteRef({
-  id: "techdocs:index-page"
-});
-const rootDocsRouteRef = createRouteRef({
-  id: "techdocs:reader-page",
-  params: ["namespace", "kind", "name"]
-});
-const rootCatalogDocsRouteRef = createRouteRef({
-  id: "techdocs:catalog-reader-view"
-});
+const addGitFeedbackLink = (scmIntegrationsApi) => {
+  return (dom) => {
+    const sourceAnchor = dom.querySelector('[title="Edit this page"]');
+    if (!sourceAnchor || !sourceAnchor.href) {
+      return dom;
+    }
+    const sourceURL = new URL(sourceAnchor.href);
+    const integration = scmIntegrationsApi.byUrl(sourceURL);
+    if ((integration == null ? void 0 : integration.type) !== "github" && (integration == null ? void 0 : integration.type) !== "gitlab") {
+      return dom;
+    }
+    const title = dom.querySelector("article>h1").childNodes[0].textContent;
+    const issueTitle = encodeURIComponent(`Documentation Feedback: ${title}`);
+    const issueDesc = encodeURIComponent(`Page source:
+${sourceAnchor.href}
 
-function createCopyDocsUrlAction(copyToClipboard) {
-  return (row) => {
-    return {
-      icon: () => /* @__PURE__ */ React.createElement(ShareIcon, {
-        fontSize: "small"
-      }),
-      tooltip: "Click to copy documentation link to clipboard",
-      onClick: () => copyToClipboard(`${window.location.origin}${row.resolved.docsUrl}`)
-    };
-  };
-}
-function createStarEntityAction(isStarredEntity, toggleStarredEntity) {
-  return ({ entity }) => {
-    const isStarred = isStarredEntity(entity);
-    return {
-      cellStyle: { paddingLeft: "1em" },
-      icon: () => favoriteEntityIcon(isStarred),
-      tooltip: favoriteEntityTooltip(isStarred),
-      onClick: () => toggleStarredEntity(entity)
-    };
+Feedback:`);
+    const gitUrl = (integration == null ? void 0 : integration.type) === "github" ? replaceGitHubUrlType(sourceURL.href, "blob") : sourceURL.href;
+    const gitInfo = parseGitUrl(gitUrl);
+    const repoPath = `/${gitInfo.organization}/${gitInfo.name}`;
+    const feedbackLink = sourceAnchor.cloneNode();
+    switch (integration == null ? void 0 : integration.type) {
+      case "gitlab":
+        feedbackLink.href = `${sourceURL.origin}${repoPath}/issues/new?issue[title]=${issueTitle}&issue[description]=${issueDesc}`;
+        break;
+      case "github":
+        feedbackLink.href = `${sourceURL.origin}${repoPath}/issues/new?title=${issueTitle}&body=${issueDesc}`;
+        break;
+      default:
+        return dom;
+    }
+    ReactDOM.render(React.createElement(FeedbackOutlinedIcon), feedbackLink);
+    feedbackLink.style.paddingLeft = "5px";
+    feedbackLink.title = "Leave feedback for this page";
+    feedbackLink.id = "git-feedback-link";
+    sourceAnchor == null ? void 0 : sourceAnchor.insertAdjacentElement("beforebegin", feedbackLink);
+    return dom;
   };
-}
+};
 
-var actionFactories = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  createCopyDocsUrlAction: createCopyDocsUrlAction,
-  createStarEntityAction: createStarEntityAction
-});
+const addSidebarToggle = () => {
+  return (dom) => {
+    const mkdocsToggleSidebar = dom.querySelector('.md-header label[for="__drawer"]');
+    const article = dom.querySelector("article");
+    if (!mkdocsToggleSidebar || !article) {
+      return dom;
+    }
+    const toggleSidebar = mkdocsToggleSidebar.cloneNode();
+    ReactDOM.render(React.createElement(MenuIcon), toggleSidebar);
+    toggleSidebar.style.paddingLeft = "5px";
+    toggleSidebar.classList.add("md-content__button");
+    toggleSidebar.title = "Toggle Sidebar";
+    toggleSidebar.id = "toggle-sidebar";
+    article == null ? void 0 : article.prepend(toggleSidebar);
+    return dom;
+  };
+};
 
-function customTitle(entity) {
-  return entity.metadata.title || entity.metadata.name;
-}
-function createNameColumn() {
-  return {
-    title: "Document",
-    field: "entity.metadata.name",
-    highlight: true,
-    render: (row) => /* @__PURE__ */ React.createElement(SubvalueCell, {
-      value: /* @__PURE__ */ React.createElement(Link, {
-        to: row.resolved.docsUrl
-      }, customTitle(row.entity)),
-      subvalue: row.entity.metadata.description
-    })
+const rewriteDocLinks = () => {
+  return (dom) => {
+    const updateDom = (list, attributeName) => {
+      Array.from(list).filter((elem) => elem.hasAttribute(attributeName)).forEach((elem) => {
+        const elemAttribute = elem.getAttribute(attributeName);
+        if (elemAttribute) {
+          if (elemAttribute.match(/^https?:\/\//i)) {
+            elem.setAttribute("target", "_blank");
+          }
+          try {
+            const normalizedWindowLocation = normalizeUrl(window.location.href);
+            elem.setAttribute(attributeName, new URL(elemAttribute, normalizedWindowLocation).toString());
+          } catch (_e) {
+            elem.replaceWith(elem.textContent || elemAttribute);
+          }
+        }
+      });
+    };
+    updateDom(Array.from(dom.getElementsByTagName("a")), "href");
+    return dom;
   };
+};
+function normalizeUrl(input) {
+  const url = new URL(input);
+  if (!url.pathname.endsWith("/") && !url.pathname.endsWith(".html")) {
+    url.pathname += "/";
+  }
+  return url.toString();
 }
-function createOwnerColumn() {
-  return {
-    title: "Owner",
-    field: "resolved.ownedByRelationsTitle",
-    render: ({ resolved }) => /* @__PURE__ */ React.createElement(EntityRefLinks, {
-      entityRefs: resolved.ownedByRelations,
-      defaultKind: "group"
-    })
+
+const addLinkClickListener = ({
+  baseUrl,
+  onClick
+}) => {
+  return (dom) => {
+    Array.from(dom.getElementsByTagName("a")).forEach((elem) => {
+      elem.addEventListener("click", (e) => {
+        const target = elem;
+        const href = target.getAttribute("href");
+        if (!href)
+          return;
+        if (href.startsWith(baseUrl) && !elem.hasAttribute("download")) {
+          e.preventDefault();
+          onClick(e, href);
+        }
+      });
+    });
+    return dom;
   };
-}
-function createTypeColumn() {
-  return {
-    title: "Type",
-    field: "entity.spec.type"
+};
+
+const CopyToClipboardTooltip = withStyles((theme) => ({
+  tooltip: {
+    fontSize: "inherit",
+    color: theme.palette.text.primary,
+    margin: 0,
+    padding: theme.spacing(0.5),
+    backgroundColor: "transparent",
+    boxShadow: "none"
+  }
+}))(Tooltip);
+const CopyToClipboardIcon = () => /* @__PURE__ */ React.createElement(SvgIcon, null, /* @__PURE__ */ React.createElement("path", {
+  d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
+}));
+const CopyToClipboardButton = ({ text }) => {
+  const [open, setOpen] = useState(false);
+  const handleClick = useCallback(() => {
+    navigator.clipboard.writeText(text);
+    setOpen(true);
+  }, [text]);
+  const handleClose = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+  return /* @__PURE__ */ React.createElement(CopyToClipboardTooltip, {
+    title: "Copied to clipboard",
+    placement: "left",
+    open,
+    onClose: handleClose,
+    leaveDelay: 1e3
+  }, /* @__PURE__ */ React.createElement("button", {
+    className: "md-clipboard md-icon",
+    onClick: handleClick
+  }, /* @__PURE__ */ React.createElement(CopyToClipboardIcon, null)));
+};
+const copyToClipboard = (theme) => {
+  return (dom) => {
+    var _a;
+    const codes = dom.querySelectorAll("pre > code");
+    for (const code of codes) {
+      const text = code.textContent || "";
+      const container = document.createElement("div");
+      (_a = code == null ? void 0 : code.parentElement) == null ? void 0 : _a.prepend(container);
+      ReactDOM.render(/* @__PURE__ */ React.createElement(ThemeProvider, {
+        theme
+      }, /* @__PURE__ */ React.createElement(CopyToClipboardButton, {
+        text
+      })), container);
+    }
+    return dom;
   };
-}
+};
 
-var columnFactories = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  createNameColumn: createNameColumn,
-  createOwnerColumn: createOwnerColumn,
-  createTypeColumn: createTypeColumn
-});
+const removeMkdocsHeader = () => {
+  return (dom) => {
+    var _a;
+    (_a = dom.querySelector(".md-header")) == null ? void 0 : _a.remove();
+    return dom;
+  };
+};
 
-function toLowerMaybe(str, config) {
-  return config.getOptionalBoolean("techdocs.legacyUseCaseSensitiveTripletPaths") ? str : str.toLocaleLowerCase("en-US");
-}
+const simplifyMkdocsFooter = () => {
+  return (dom) => {
+    var _a, _b;
+    (_a = dom.querySelector(".md-footer .md-copyright")) == null ? void 0 : _a.remove();
+    (_b = dom.querySelector(".md-footer-copyright")) == null ? void 0 : _b.remove();
+    return dom;
+  };
+};
 
-const DocsTable$1 = ({
-  entities,
-  title,
-  loading,
-  columns,
-  actions
-}) => {
-  const [, copyToClipboard] = useCopyToClipboard();
-  const getRouteToReaderPageFor = useRouteRef(rootDocsRouteRef);
-  const config = useApi(configApiRef);
-  if (!entities)
-    return null;
-  const documents = entities.map((entity) => {
-    var _a;
-    const ownedByRelations = getEntityRelations(entity, RELATION_OWNED_BY);
-    return {
-      entity,
-      resolved: {
-        docsUrl: getRouteToReaderPageFor({
-          namespace: toLowerMaybe((_a = entity.metadata.namespace) != null ? _a : "default", config),
-          kind: toLowerMaybe(entity.kind, config),
-          name: toLowerMaybe(entity.metadata.name, config)
-        }),
-        ownedByRelations,
-        ownedByRelationsTitle: ownedByRelations.map((r) => formatEntityRefTitle(r, { defaultKind: "group" })).join(", ")
-      }
-    };
-  });
-  const defaultColumns = [
-    createNameColumn(),
-    createOwnerColumn(),
-    createTypeColumn()
-  ];
-  const defaultActions = [
-    createCopyDocsUrlAction(copyToClipboard)
-  ];
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, loading || documents && documents.length > 0 ? /* @__PURE__ */ React.createElement(Table, {
-    isLoading: loading,
-    options: {
-      paging: true,
-      pageSize: 20,
-      search: true,
-      actionsColumnIndex: -1
-    },
-    data: documents,
-    columns: columns || defaultColumns,
-    actions: actions || defaultActions,
-    title: title ? `${title} (${documents.length})` : `All (${documents.length})`
-  }) : /* @__PURE__ */ React.createElement(EmptyState, {
-    missing: "data",
-    title: "No documents to show",
-    description: "Create your own document. Check out our Getting Started Information",
-    action: /* @__PURE__ */ React.createElement(Button, {
-      color: "primary",
-      to: "https://backstage.io/docs/features/techdocs/getting-started",
-      variant: "contained"
-    }, "DOCS")
-  }));
-};
-
-var DocsTable$2 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  DocsTable: DocsTable$1
-});
-
-const EntityListDocsTable = ({
-  columns,
-  actions
-}) => {
-  var _a, _b;
-  const { loading, error, entities, filters } = useEntityList();
-  const { isStarredEntity, toggleStarredEntity } = useStarredEntities();
-  const [, copyToClipboard] = useCopyToClipboard();
-  const title = capitalize((_b = (_a = filters.user) == null ? void 0 : _a.value) != null ? _b : "all");
-  const defaultActions = [
-    createCopyDocsUrlAction(copyToClipboard),
-    createStarEntityAction(isStarredEntity, toggleStarredEntity)
-  ];
-  if (error) {
-    return /* @__PURE__ */ React.createElement(WarningPanel, {
-      severity: "error",
-      title: "Could not load available documentation."
-    }, /* @__PURE__ */ React.createElement(CodeSnippet, {
-      language: "text",
-      text: error.toString()
-    }));
-  }
-  return /* @__PURE__ */ React.createElement(DocsTable$1, {
-    title,
-    entities,
-    loading,
-    actions: actions || defaultActions,
-    columns
-  });
-};
-EntityListDocsTable.columns = columnFactories;
-EntityListDocsTable.actions = actionFactories;
-
-const TechDocsPageWrapper = ({ children }) => {
-  var _a;
-  const configApi = useApi(configApiRef);
-  const generatedSubtitle = `Documentation available in ${(_a = configApi.getOptionalString("organization.name")) != null ? _a : "Backstage"}`;
-  return /* @__PURE__ */ React.createElement(PageWithHeader, {
-    title: "Documentation",
-    subtitle: generatedSubtitle,
-    themeId: "documentation"
-  }, children);
-};
-
-class TechDocsFilter {
-  getCatalogFilters() {
-    return {
-      "metadata.annotations.backstage.io/techdocs-ref": CATALOG_FILTER_EXISTS
-    };
-  }
-}
-const TechDocsPicker = () => {
-  const { updateFilters } = useEntityList();
-  useEffect(() => {
-    updateFilters({
-      techdocs: new TechDocsFilter()
-    });
-  }, [updateFilters]);
-  return null;
-};
-
-const DefaultTechDocsHome = ({
-  initialFilter = "all",
-  columns,
-  actions
-}) => {
-  return /* @__PURE__ */ React.createElement(TechDocsPageWrapper, null, /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, {
-    title: ""
-  }, /* @__PURE__ */ React.createElement(SupportButton, null, "Discover documentation in your ecosystem.")), /* @__PURE__ */ React.createElement(EntityListProvider, null, /* @__PURE__ */ React.createElement(FilteredEntityLayout, null, /* @__PURE__ */ React.createElement(FilterContainer, null, /* @__PURE__ */ React.createElement(TechDocsPicker, null), /* @__PURE__ */ React.createElement(UserListPicker, {
-    initialFilter
-  }), /* @__PURE__ */ React.createElement(EntityOwnerPicker, null), /* @__PURE__ */ React.createElement(EntityTagPicker, null)), /* @__PURE__ */ React.createElement(EntityListContainer, null, /* @__PURE__ */ React.createElement(EntityListDocsTable, {
-    actions,
-    columns
-  }))))));
-};
-
-const DocsCardGrid$1 = ({
-  entities
-}) => {
-  const getRouteToReaderPageFor = useRouteRef(rootDocsRouteRef);
-  const config = useApi(configApiRef);
-  if (!entities)
-    return null;
-  return /* @__PURE__ */ React.createElement(ItemCardGrid, {
-    "data-testid": "docs-explore"
-  }, !(entities == null ? void 0 : entities.length) ? null : entities.map((entity, index) => {
-    var _a, _b;
-    return /* @__PURE__ */ React.createElement(Card, {
-      key: index
-    }, /* @__PURE__ */ React.createElement(CardMedia, null, /* @__PURE__ */ React.createElement(ItemCardHeader, {
-      title: (_a = entity.metadata.title) != null ? _a : entity.metadata.name
-    })), /* @__PURE__ */ React.createElement(CardContent, null, entity.metadata.description), /* @__PURE__ */ React.createElement(CardActions, null, /* @__PURE__ */ React.createElement(Button, {
-      to: getRouteToReaderPageFor({
-        namespace: toLowerMaybe((_b = entity.metadata.namespace) != null ? _b : "default", config),
-        kind: toLowerMaybe(entity.kind, config),
-        name: toLowerMaybe(entity.metadata.name, config)
-      }),
-      color: "primary",
-      "data-testid": "read_docs"
-    }, "Read Docs")));
-  }));
-};
-
-var DocsCardGrid$2 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  DocsCardGrid: DocsCardGrid$1
-});
-
-const EntityListDocsGrid = () => {
-  const { loading, error, entities } = useEntityList();
-  if (error) {
-    return /* @__PURE__ */ React.createElement(WarningPanel, {
-      severity: "error",
-      title: "Could not load available documentation."
-    }, /* @__PURE__ */ React.createElement(CodeSnippet, {
-      language: "text",
-      text: error.toString()
-    }));
-  }
-  if (loading || !entities) {
-    return /* @__PURE__ */ React.createElement(Progress, null);
-  }
-  entities.sort((a, b) => {
-    var _a, _b;
-    return ((_a = a.metadata.title) != null ? _a : a.metadata.name).localeCompare((_b = b.metadata.title) != null ? _b : b.metadata.name);
-  });
-  return /* @__PURE__ */ React.createElement(DocsCardGrid$1, {
-    entities
-  });
-};
-
-const techdocsPlugin = createPlugin({
-  id: "techdocs",
-  apis: [
-    createApiFactory({
-      api: techdocsStorageApiRef,
-      deps: {
-        configApi: configApiRef,
-        discoveryApi: discoveryApiRef,
-        identityApi: identityApiRef,
-        fetchApi: fetchApiRef
-      },
-      factory: ({ configApi, discoveryApi, identityApi, fetchApi }) => new TechDocsStorageClient({
-        configApi,
-        discoveryApi,
-        identityApi,
-        fetchApi
-      })
-    }),
-    createApiFactory({
-      api: techdocsApiRef,
-      deps: {
-        configApi: configApiRef,
-        discoveryApi: discoveryApiRef,
-        fetchApi: fetchApiRef
-      },
-      factory: ({ configApi, discoveryApi, fetchApi }) => new TechDocsClient({
-        configApi,
-        discoveryApi,
-        fetchApi
-      })
-    })
-  ],
-  routes: {
-    root: rootRouteRef,
-    docRoot: rootDocsRouteRef,
-    entityContent: rootCatalogDocsRouteRef
-  }
-});
-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 = techdocsPlugin.provide(createComponentExtension({
-  name: "DocsCardGrid",
-  component: {
-    lazy: () => Promise.resolve().then(function () { return DocsCardGrid$2; }).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
-}));
-
-const isSvgNeedingInlining = (attrName, attrVal, apiOrigin) => {
-  const isSrcToSvg = attrName === "src" && attrVal.endsWith(".svg");
-  const isRelativeUrl = !attrVal.match(/^([a-z]*:)?\/\//i);
-  const pointsToOurBackend = attrVal.startsWith(apiOrigin);
-  return isSrcToSvg && (isRelativeUrl || pointsToOurBackend);
-};
-const addBaseUrl = ({
-  techdocsStorageApi,
-  entityId,
-  path
-}) => {
-  return async (dom) => {
-    const apiOrigin = await techdocsStorageApi.getApiOrigin();
-    const updateDom = async (list, attributeName) => {
-      for (const elem of list) {
-        if (elem.hasAttribute(attributeName)) {
-          const elemAttribute = elem.getAttribute(attributeName);
-          if (!elemAttribute)
-            return;
-          const newValue = await techdocsStorageApi.getBaseUrl(elemAttribute, entityId, path);
-          if (isSvgNeedingInlining(attributeName, elemAttribute, apiOrigin)) {
-            try {
-              const svg = await fetch(newValue, { credentials: "include" });
-              const svgContent = await svg.text();
-              elem.setAttribute(attributeName, `data:image/svg+xml;base64,${btoa(svgContent)}`);
-            } catch (e) {
-              elem.setAttribute("alt", `Error: ${elemAttribute}`);
-            }
-          } else {
-            elem.setAttribute(attributeName, newValue);
-          }
-        }
-      }
-    };
-    await Promise.all([
-      updateDom(dom.querySelectorAll("img"), "src"),
-      updateDom(dom.querySelectorAll("script"), "src"),
-      updateDom(dom.querySelectorAll("source"), "src"),
-      updateDom(dom.querySelectorAll("link"), "href"),
-      updateDom(dom.querySelectorAll("a[download]"), "href")
-    ]);
-    return dom;
-  };
-};
-
-const addGitFeedbackLink = (scmIntegrationsApi) => {
-  return (dom) => {
-    const sourceAnchor = dom.querySelector('[title="Edit this page"]');
-    if (!sourceAnchor || !sourceAnchor.href) {
-      return dom;
-    }
-    const sourceURL = new URL(sourceAnchor.href);
-    const integration = scmIntegrationsApi.byUrl(sourceURL);
-    if ((integration == null ? void 0 : integration.type) !== "github" && (integration == null ? void 0 : integration.type) !== "gitlab") {
-      return dom;
-    }
-    const title = dom.querySelector("article>h1").childNodes[0].textContent;
-    const issueTitle = encodeURIComponent(`Documentation Feedback: ${title}`);
-    const issueDesc = encodeURIComponent(`Page source:
-${sourceAnchor.href}
-
-Feedback:`);
-    const gitUrl = (integration == null ? void 0 : integration.type) === "github" ? replaceGitHubUrlType(sourceURL.href, "blob") : sourceURL.href;
-    const gitInfo = parseGitUrl(gitUrl);
-    const repoPath = `/${gitInfo.organization}/${gitInfo.name}`;
-    const feedbackLink = sourceAnchor.cloneNode();
-    switch (integration == null ? void 0 : integration.type) {
-      case "gitlab":
-        feedbackLink.href = `${sourceURL.origin}${repoPath}/issues/new?issue[title]=${issueTitle}&issue[description]=${issueDesc}`;
-        break;
-      case "github":
-        feedbackLink.href = `${sourceURL.origin}${repoPath}/issues/new?title=${issueTitle}&body=${issueDesc}`;
-        break;
-      default:
-        return dom;
-    }
-    ReactDOM.render(React.createElement(FeedbackOutlinedIcon), feedbackLink);
-    feedbackLink.style.paddingLeft = "5px";
-    feedbackLink.title = "Leave feedback for this page";
-    feedbackLink.id = "git-feedback-link";
-    sourceAnchor == null ? void 0 : sourceAnchor.insertAdjacentElement("beforebegin", feedbackLink);
-    return dom;
-  };
-};
-
-const rewriteDocLinks = () => {
-  return (dom) => {
-    const updateDom = (list, attributeName) => {
-      Array.from(list).filter((elem) => elem.hasAttribute(attributeName)).forEach((elem) => {
-        const elemAttribute = elem.getAttribute(attributeName);
-        if (elemAttribute) {
-          if (elemAttribute.match(/^https?:\/\//i)) {
-            elem.setAttribute("target", "_blank");
-          }
-          try {
-            const normalizedWindowLocation = normalizeUrl(window.location.href);
-            elem.setAttribute(attributeName, new URL(elemAttribute, normalizedWindowLocation).toString());
-          } catch (_e) {
-            elem.replaceWith(elem.textContent || elemAttribute);
-          }
-        }
-      });
-    };
-    updateDom(Array.from(dom.getElementsByTagName("a")), "href");
-    return dom;
-  };
-};
-function normalizeUrl(input) {
-  const url = new URL(input);
-  if (!url.pathname.endsWith("/") && !url.pathname.endsWith(".html")) {
-    url.pathname += "/";
-  }
-  return url.toString();
-}
-
-const addLinkClickListener = ({
-  baseUrl,
-  onClick
-}) => {
-  return (dom) => {
-    Array.from(dom.getElementsByTagName("a")).forEach((elem) => {
-      elem.addEventListener("click", (e) => {
-        const target = elem;
-        const href = target.getAttribute("href");
-        if (!href)
-          return;
-        if (href.startsWith(baseUrl) && !elem.hasAttribute("download")) {
-          e.preventDefault();
-          onClick(e, href);
-        }
-      });
-    });
-    return dom;
-  };
-};
-
-const copyToClipboard = () => {
-  return (dom) => {
-    Array.from(dom.querySelectorAll("pre > code")).forEach((codeElem) => {
-      var _a;
-      const button = document.createElement("button");
-      const toBeCopied = codeElem.textContent || "";
-      button.className = "md-clipboard md-icon";
-      button.title = "Copy to clipboard";
-      button.innerHTML = '<svg viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg>';
-      button.addEventListener("click", () => navigator.clipboard.writeText(toBeCopied));
-      (_a = codeElem == null ? void 0 : codeElem.parentElement) == null ? void 0 : _a.prepend(button);
-    });
-    return dom;
-  };
-};
-
-const removeMkdocsHeader = () => {
-  return (dom) => {
-    var _a;
-    (_a = dom.querySelector(".md-header")) == null ? void 0 : _a.remove();
-    return dom;
-  };
-};
-
-const simplifyMkdocsFooter = () => {
-  return (dom) => {
-    var _a;
-    (_a = dom.querySelector(".md-footer .md-copyright")) == null ? void 0 : _a.remove();
-    return dom;
-  };
-};
-
-const onCssReady = ({
-  docStorageUrl,
-  onLoading,
-  onLoaded
+const onCssReady = ({
+  docStorageUrl,
+  onLoading,
+  onLoaded
 }) => {
   return (dom) => {
     const cssPages = Array.from(dom.querySelectorAll('head > link[rel="stylesheet"]')).filter((elem) => {
@@ -830,20 +489,64 @@ const transform = async (html, transformers) => {
   return dom;
 };
 
+const useStyles$3 = makeStyles({
+  flexContainer: {
+    flexWrap: "wrap"
+  },
+  itemText: {
+    width: "100%",
+    marginBottom: "1rem"
+  }
+});
+const TechDocsSearchResultListItem = (props) => {
+  const {
+    result,
+    lineClamp = 5,
+    asListItem = true,
+    asLink = true,
+    title
+  } = props;
+  const classes = useStyles$3();
+  const TextItem = () => {
+    var _a;
+    return /* @__PURE__ */ React.createElement(ListItemText, {
+      className: classes.itemText,
+      primaryTypographyProps: { variant: "h6" },
+      primary: title ? title : `${result.title} | ${(_a = result.entityTitle) != null ? _a : result.name} docs`,
+      secondary: /* @__PURE__ */ React.createElement(TextTruncate, {
+        line: lineClamp,
+        truncateText: "\u2026",
+        text: result.text,
+        element: "span"
+      })
+    });
+  };
+  const LinkWrapper = ({ children }) => asLink ? /* @__PURE__ */ React.createElement(Link, {
+    to: result.location
+  }, children) : /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+  const ListItemWrapper = ({ children }) => asListItem ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ListItem, {
+    alignItems: "flex-start",
+    className: classes.flexContainer
+  }, children), /* @__PURE__ */ React.createElement(Divider, {
+    component: "li"
+  })) : /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+  return /* @__PURE__ */ React.createElement(LinkWrapper, null, /* @__PURE__ */ React.createElement(ListItemWrapper, null, /* @__PURE__ */ React.createElement(TextItem, null)));
+};
+const DocsResultListItem = TechDocsSearchResultListItem;
+
 const useStyles$2 = makeStyles({
   root: {
     width: "100%"
   }
 });
-const TechDocsSearchBar = ({
-  entityId,
-  debounceTime = 150
-}) => {
+const TechDocsSearchBar = (props) => {
+  const { entityId, debounceTime = 150 } = props;
   const [open, setOpen] = useState(false);
   const navigate = useNavigate();
   const {
     term,
     setTerm,
+    setFilters,
     result: { loading, value: searchVal }
   } = useSearch();
   const classes = useStyles$2();
@@ -860,6 +563,17 @@ const TechDocsSearchBar = ({
   }, [loading, searchVal]);
   const [value, setValue] = useState(term);
   useDebounce(() => setTerm(value), debounceTime, [value]);
+  const { kind, name, namespace } = entityId;
+  useEffect(() => {
+    setFilters((prevFilters) => {
+      return {
+        ...prevFilters,
+        kind,
+        namespace,
+        name
+      };
+    });
+  }, [kind, namespace, name, setFilters]);
   const handleQuery = (e) => {
     if (!open) {
       setOpen(true);
@@ -892,7 +606,7 @@ const TechDocsSearchBar = ({
     noOptionsText: "No results found",
     value: null,
     options,
-    renderOption: ({ document }) => /* @__PURE__ */ React.createElement(DocsResultListItem, {
+    renderOption: ({ document }) => /* @__PURE__ */ React.createElement(TechDocsSearchResultListItem, {
       result: document,
       lineClamp: 3,
       asListItem: false,
@@ -991,7 +705,7 @@ const TechDocsBuildLogsDrawerContent = ({
 const TechDocsBuildLogs = ({ buildLog }) => {
   const classes = useDrawerStyles();
   const [open, setOpen] = useState(false);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Button$1, {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Button, {
     color: "inherit",
     onClick: () => setOpen(true)
   }, "Show Build Logs"), /* @__PURE__ */ React.createElement(Drawer, {
@@ -1068,7 +782,7 @@ const TechDocsStateIndicator = () => {
     StateAlert = /* @__PURE__ */ React.createElement(Alert, {
       variant: "outlined",
       severity: "success",
-      action: /* @__PURE__ */ React.createElement(Button$1, {
+      action: /* @__PURE__ */ React.createElement(Button, {
         color: "inherit",
         onClick: () => contentReload()
       }, "Refresh"),
@@ -1253,8 +967,8 @@ const useStyles = makeStyles((theme) => ({
     marginBottom: theme.spacing(1),
     marginLeft: "calc(16rem + 1.2rem)",
     "@media screen and (max-width: 76.1875em)": {
-      marginLeft: "calc(10rem + 0.8rem)",
-      maxWidth: "calc(100% - 10rem - 1.6rem)"
+      marginLeft: "0",
+      maxWidth: "100%"
     }
   }
 }));
@@ -1293,9 +1007,16 @@ const useTechDocsReaderDom = (entityRef) => {
     if (!dom || !sidebars)
       return;
     const mdTabs = dom.querySelector(".md-container > .md-tabs");
+    const sidebarsCollapsed = window.matchMedia("screen and (max-width: 76.1875em)").matches;
+    const newTop = Math.max(dom.getBoundingClientRect().top, 0);
     sidebars.forEach((sidebar) => {
-      const newTop = Math.max(dom.getBoundingClientRect().top, 0);
-      sidebar.style.top = mdTabs ? `${newTop + mdTabs.getBoundingClientRect().height}px` : `${newTop}px`;
+      if (sidebarsCollapsed) {
+        sidebar.style.top = "0px";
+      } else if (mdTabs) {
+        sidebar.style.top = `${newTop + mdTabs.getBoundingClientRect().height}px`;
+      } else {
+        sidebar.style.top = `${newTop}px`;
+      }
     });
   }, [dom, sidebars]);
   useEffect(() => {
@@ -1334,6 +1055,7 @@ const useTechDocsReaderDom = (entityRef) => {
       path: contentPath
     }),
     rewriteDocLinks(),
+    addSidebarToggle(),
     removeMkdocsHeader(),
     simplifyMkdocsFooter(),
     addGitFeedbackLink(scmIntegrationsApi),
@@ -1402,7 +1124,7 @@ const useTechDocsReaderDom = (entityRef) => {
             --md-source-version-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5 7.775V2.75a.25.25 0 0 1 .25-.25h5.025a.25.25 0 0 1 .177.073l6.25 6.25a.25.25 0 0 1 0 .354l-5.025 5.025a.25.25 0 0 1-.354 0l-6.25-6.25a.25.25 0 0 1-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.75 1.75 0 0 1 1 7.775zM6 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/></svg>');
             --md-version-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="m310.6 246.6-127.1 128c-7.1 6.3-15.3 9.4-23.5 9.4s-16.38-3.125-22.63-9.375l-127.1-128C.224 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75s3.12 25.75-6.08 34.85z"/></svg>');
           }
-          
+
           :host > * {
             /* CODE */
             --md-code-fg-color: ${theme.palette.text.primary};
@@ -1467,9 +1189,20 @@ const useTechDocsReaderDom = (entityRef) => {
             .md-nav {
               font-size: calc(var(--md-typeset-font-size) * 0.9);
             }
+            .md-nav__link {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+            }
             .md-nav__icon {
-              width: auto !important;
-              height: auto !important;
+              height: 20px !important;
+              width: 20px !important;
+              margin-left:${theme.spacing(1)}px;
+            }
+            .md-nav__icon svg {
+              margin: 0;
+              width: 20px !important;
+              height: 20px !important;
             }
             .md-nav__icon:after {
               width: 20px !important;
@@ -1479,22 +1212,25 @@ const useTechDocsReaderDom = (entityRef) => {
             .md-main__inner {
               margin-top: 0;
             }
-            
+
             .md-sidebar {
+              height: calc(100% - 100px);
               position: fixed;
-              bottom: 100px;
               width: 16rem;
             }
+            .md-sidebar .md-sidebar__scrollwrap {
+              max-height: calc(100% - 100px);
+            }
             .md-sidebar--secondary {
               right: ${theme.spacing(3)}px;
             }
-            
+
             .md-content {
               max-width: calc(100% - 16rem * 2);
               margin-left: 16rem;
               margin-bottom: 50px;
             }
-            
+
             .md-footer {
               position: fixed;
               bottom: 0px;
@@ -1509,7 +1245,7 @@ const useTechDocsReaderDom = (entityRef) => {
             .md-dialog {
               background-color: unset;
             }
-            
+
             @media screen and (max-width: 76.1875em) {
               .md-nav {
                 transition: none !important;
@@ -1556,22 +1292,36 @@ const useTechDocsReaderDom = (entityRef) => {
                 display: none;
               }
 
+              .md-sidebar {
+                height: 100%;
+              }
               .md-sidebar--primary {
-                width: 10rem !important;
-                left: ${isPinned ? "242px" : "72px"} !important;
+                width: 12.1rem !important;
+                z-index: 200;
+                left: ${isPinned ? "calc(-12.1rem + 242px)" : "calc(-12.1rem + 72px)"} !important;
               }
               .md-sidebar--secondary:not([hidden]) {
                 display: none;
               }
 
               .md-content {
-                max-width: calc(100% - 10rem);
-                margin-left: 10rem;
+                max-width: 100%;
+                margin-left: 0;
+              }
+
+              .md-header__button {
+                margin: 0.4rem 0;
+                margin-left: 0.4rem;
+                padding: 0;
+              }
+
+              .md-overlay {
+                left: 0;
               }
 
               .md-footer {
                 position: static;
-                padding-left: 10rem;
+                padding-left: 0;
               }
               .md-footer-nav__link {
                 /* footer links begin to overlap at small sizes without setting width */
@@ -1581,13 +1331,14 @@ const useTechDocsReaderDom = (entityRef) => {
 
             @media screen and (max-width: 600px) {
               .md-sidebar--primary {
-                left: 1rem !important;
+                left: -12.1rem !important;
+                width: 12.1rem;
               }
             }
           `
     }),
     injectCss({
-      css: `        
+      css: `
             .md-typeset {
               font-size: var(--md-typeset-font-size);
             }
@@ -1619,11 +1370,11 @@ const useTechDocsReaderDom = (entityRef) => {
             .md-typeset .md-content__button {
               color: var(--md-default-fg-color);
             }
-            
+
             .md-typeset hr {
               border-bottom: 0.05rem dotted ${theme.palette.divider};
             }
-            
+
             .md-typeset details {
               font-size: var(--md-typeset-font-size) !important;
             }
@@ -1640,7 +1391,7 @@ const useTechDocsReaderDom = (entityRef) => {
             .md-typeset details[open] > summary:after {
               transform: rotate(90deg) translateX(-50%) !important;
             }
-            
+
             .md-typeset blockquote {
               color: var(--md-default-fg-color--light);
               border-left: 0.2rem solid var(--md-default-fg-color--light);
@@ -1684,13 +1435,13 @@ const useTechDocsReaderDom = (entityRef) => {
             .highlight .md-clipboard:after {
               content: unset;
             }
-            
+
             .highlight .nx {
               color: ${isDarkTheme ? "#ff53a3" : "#ec407a"};
             }
 
             /* CODE HILITE */
-            .codehilite .gd { 
+            .codehilite .gd {
               background-color: ${isDarkTheme ? "rgba(248,81,73,0.65)" : "#fdd"};
             }
 
@@ -1760,7 +1511,7 @@ const useTechDocsReaderDom = (entityRef) => {
   ]);
   const postRender = useCallback(async (transformedElement) => transform(transformedElement, [
     scrollIntoAnchor(),
-    copyToClipboard(),
+    copyToClipboard(theme),
     addLinkClickListener({
       baseUrl: window.location.origin,
       onClick: (event, url) => {
@@ -1796,7 +1547,7 @@ const useTechDocsReaderDom = (entityRef) => {
         setSidebars(Array.from(renderedElement.querySelectorAll(".md-sidebar")));
       }
     })
-  ]), [navigate, techdocsStorageApi]);
+  ]), [theme, navigate, techdocsStorageApi]);
   useEffect(() => {
     if (!rawPage)
       return () => {
@@ -1852,25 +1603,31 @@ const TheReader = ({
     ref: shadowDomRef
   }));
 };
-const Reader = ({
-  entityRef,
-  onReady = () => {
-  },
-  withSearch = true
-}) => /* @__PURE__ */ React.createElement(TechDocsReaderProvider, {
-  entityRef
-}, /* @__PURE__ */ React.createElement(TheReader, {
-  entityRef,
-  onReady,
-  withSearch
-}));
+const Reader = (props) => {
+  const { entityRef, onReady = () => {
+  }, withSearch = true } = props;
+  return /* @__PURE__ */ React.createElement(TechDocsReaderProvider, {
+    entityRef
+  }, /* @__PURE__ */ React.createElement(TheReader, {
+    entityRef,
+    onReady,
+    withSearch
+  }));
+};
 
-const TechDocsPageHeader = ({
-  entityRef,
-  entityMetadata,
-  techDocsMetadata,
-  children
-}) => {
+const rootRouteRef = createRouteRef({
+  id: "techdocs:index-page"
+});
+const rootDocsRouteRef = createRouteRef({
+  id: "techdocs:reader-page",
+  params: ["namespace", "kind", "name"]
+});
+const rootCatalogDocsRouteRef = createRouteRef({
+  id: "techdocs:catalog-reader-view"
+});
+
+const TechDocsReaderPageHeader = (props) => {
+  const { entityRef, entityMetadata, techDocsMetadata, children } = props;
   const { name } = entityRef;
   const { site_name: siteName, site_description: siteDescription } = techDocsMetadata || {};
   const { locationMetadata, spec } = entityMetadata || {};
@@ -1912,6 +1669,7 @@ const TechDocsPageHeader = ({
     typeLink: docsRootLink
   }, labels, children);
 };
+const TechDocsPageHeader = TechDocsReaderPageHeader;
 
 const LegacyTechDocsPage = () => {
   const [documentReady, setDocumentReady] = useState(false);
@@ -1936,7 +1694,7 @@ const LegacyTechDocsPage = () => {
   }
   return /* @__PURE__ */ React.createElement(Page, {
     themeId: "documentation"
-  }, /* @__PURE__ */ React.createElement(TechDocsPageHeader, {
+  }, /* @__PURE__ */ React.createElement(TechDocsReaderPageHeader, {
     techDocsMetadata: techdocsMetadataValue,
     entityMetadata: entityMetadataValue,
     entityRef: {
@@ -1956,187 +1714,360 @@ const LegacyTechDocsPage = () => {
   })));
 };
 
-const TechDocsPage = ({ children }) => {
-  const { NotFoundErrorPage } = useApp().getComponents();
-  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.createElement(NotFoundErrorPage, null);
-  if (!children)
-    return outlet || /* @__PURE__ */ React.createElement(LegacyTechDocsPage, null);
-  return /* @__PURE__ */ React.createElement(Page, {
-    themeId: "documentation"
-  }, children instanceof Function ? children({
-    techdocsMetadataValue,
-    entityMetadataValue,
-    entityRef: { kind, namespace, name },
-    onReady
-  }) : children);
+const TechDocsReaderPage$1 = (props) => {
+  const { children } = props;
+  const { NotFoundErrorPage } = useApp().getComponents();
+  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.createElement(NotFoundErrorPage, null);
+  if (!children)
+    return outlet || /* @__PURE__ */ React.createElement(LegacyTechDocsPage, null);
+  return /* @__PURE__ */ React.createElement(Page, {
+    themeId: "documentation"
+  }, children instanceof Function ? children({
+    techdocsMetadataValue,
+    entityMetadataValue,
+    entityRef: { kind, namespace, name },
+    onReady
+  }) : children);
+};
+const TechDocsPage = TechDocsReaderPage$1;
+
+var TechDocsReaderPage$2 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  TechDocsReaderPage: TechDocsReaderPage$1,
+  TechDocsPage: TechDocsPage
+});
+
+function toLowerMaybe(str, config) {
+  return config.getOptionalBoolean("techdocs.legacyUseCaseSensitiveTripletPaths") ? str : str.toLocaleLowerCase("en-US");
+}
+
+const DocsCardGrid = (props) => {
+  const { entities } = props;
+  const getRouteToReaderPageFor = useRouteRef(rootDocsRouteRef);
+  const config = useApi(configApiRef);
+  if (!entities)
+    return null;
+  return /* @__PURE__ */ React.createElement(ItemCardGrid, {
+    "data-testid": "docs-explore"
+  }, !(entities == null ? void 0 : entities.length) ? null : entities.map((entity, index) => {
+    var _a, _b;
+    return /* @__PURE__ */ React.createElement(Card, {
+      key: index
+    }, /* @__PURE__ */ React.createElement(CardMedia, null, /* @__PURE__ */ React.createElement(ItemCardHeader, {
+      title: (_a = entity.metadata.title) != null ? _a : entity.metadata.name
+    })), /* @__PURE__ */ React.createElement(CardContent, null, entity.metadata.description), /* @__PURE__ */ React.createElement(CardActions, null, /* @__PURE__ */ React.createElement(Button$1, {
+      to: getRouteToReaderPageFor({
+        namespace: toLowerMaybe((_b = entity.metadata.namespace) != null ? _b : "default", config),
+        kind: toLowerMaybe(entity.kind, config),
+        name: toLowerMaybe(entity.metadata.name, config)
+      }),
+      color: "primary",
+      "data-testid": "read_docs"
+    }, "Read Docs")));
+  }));
+};
+
+const EntityListDocsGrid = () => {
+  const { loading, error, entities } = useEntityList();
+  if (error) {
+    return /* @__PURE__ */ React.createElement(WarningPanel, {
+      severity: "error",
+      title: "Could not load available documentation."
+    }, /* @__PURE__ */ React.createElement(CodeSnippet, {
+      language: "text",
+      text: error.toString()
+    }));
+  }
+  if (loading || !entities) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  entities.sort((a, b) => {
+    var _a, _b;
+    return ((_a = a.metadata.title) != null ? _a : a.metadata.name).localeCompare((_b = b.metadata.title) != null ? _b : b.metadata.name);
+  });
+  return /* @__PURE__ */ React.createElement(DocsCardGrid, {
+    entities
+  });
+};
+
+const YellowStar = withStyles$1({
+  root: {
+    color: "#f3ba37"
+  }
+})(Star);
+const actionFactories = {
+  createCopyDocsUrlAction(copyToClipboard) {
+    return (row) => {
+      return {
+        icon: () => /* @__PURE__ */ React.createElement(ShareIcon, {
+          fontSize: "small"
+        }),
+        tooltip: "Click to copy documentation link to clipboard",
+        onClick: () => copyToClipboard(`${window.location.origin}${row.resolved.docsUrl}`)
+      };
+    };
+  },
+  createStarEntityAction(isStarredEntity, toggleStarredEntity) {
+    return ({ entity }) => {
+      const isStarred = isStarredEntity(entity);
+      return {
+        cellStyle: { paddingLeft: "1em" },
+        icon: () => isStarred ? /* @__PURE__ */ React.createElement(YellowStar, null) : /* @__PURE__ */ React.createElement(StarBorder, null),
+        tooltip: isStarred ? "Remove from favorites" : "Add to favorites",
+        onClick: () => toggleStarredEntity(entity)
+      };
+    };
+  }
 };
 
-var TechDocsPage$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  TechDocsPage: TechDocsPage
-});
-
-const panels = {
-  DocsTable: DocsTable$1,
-  DocsCardGrid: DocsCardGrid$1
+function customTitle(entity) {
+  return entity.metadata.title || entity.metadata.name;
+}
+const columnFactories = {
+  createNameColumn() {
+    return {
+      title: "Document",
+      field: "entity.metadata.name",
+      highlight: true,
+      render: (row) => /* @__PURE__ */ React.createElement(SubvalueCell, {
+        value: /* @__PURE__ */ React.createElement(Link, {
+          to: row.resolved.docsUrl
+        }, customTitle(row.entity)),
+        subvalue: row.entity.metadata.description
+      })
+    };
+  },
+  createOwnerColumn() {
+    return {
+      title: "Owner",
+      field: "resolved.ownedByRelationsTitle",
+      render: ({ resolved }) => /* @__PURE__ */ React.createElement(EntityRefLinks, {
+        entityRefs: resolved.ownedByRelations,
+        defaultKind: "group"
+      })
+    };
+  },
+  createTypeColumn() {
+    return {
+      title: "Type",
+      field: "entity.spec.type"
+    };
+  }
 };
-const CustomPanel = ({
-  config,
-  entities,
-  index
-}) => {
-  const useStyles = makeStyles({
-    panelContainer: {
-      marginBottom: "2rem",
-      ...config.panelCSS ? config.panelCSS : {}
-    }
-  });
-  const classes = useStyles();
-  const { value: user } = useOwnUser();
-  const Panel = panels[config.panelType];
-  const shownEntities = entities.filter((entity) => {
-    if (config.filterPredicate === "ownedByUser") {
-      if (!user) {
-        return false;
+
+const DocsTable = (props) => {
+  const { entities, title, loading, columns, actions } = props;
+  const [, copyToClipboard] = useCopyToClipboard();
+  const getRouteToReaderPageFor = useRouteRef(rootDocsRouteRef);
+  const config = useApi(configApiRef);
+  if (!entities)
+    return null;
+  const documents = entities.map((entity) => {
+    var _a;
+    const ownedByRelations = getEntityRelations(entity, RELATION_OWNED_BY);
+    return {
+      entity,
+      resolved: {
+        docsUrl: getRouteToReaderPageFor({
+          namespace: toLowerMaybe((_a = entity.metadata.namespace) != null ? _a : "default", config),
+          kind: toLowerMaybe(entity.kind, config),
+          name: toLowerMaybe(entity.metadata.name, config)
+        }),
+        ownedByRelations,
+        ownedByRelationsTitle: ownedByRelations.map((r) => humanizeEntityRef(r, { defaultKind: "group" })).join(", ")
       }
-      return isOwnerOf(user, entity);
-    }
-    return typeof config.filterPredicate === "function" && config.filterPredicate(entity);
+    };
   });
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ContentHeader, {
-    title: config.title,
-    description: config.description
-  }, index === 0 ? /* @__PURE__ */ React.createElement(SupportButton, null, "Discover documentation in your ecosystem.") : null), /* @__PURE__ */ React.createElement("div", {
-    className: classes.panelContainer
-  }, /* @__PURE__ */ React.createElement(Panel, {
-    "data-testid": "techdocs-custom-panel",
-    entities: shownEntities
-  })));
+  const defaultColumns = [
+    columnFactories.createNameColumn(),
+    columnFactories.createOwnerColumn(),
+    columnFactories.createTypeColumn()
+  ];
+  const defaultActions = [
+    actionFactories.createCopyDocsUrlAction(copyToClipboard)
+  ];
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, loading || documents && documents.length > 0 ? /* @__PURE__ */ React.createElement(Table, {
+    isLoading: loading,
+    options: {
+      paging: true,
+      pageSize: 20,
+      search: true,
+      actionsColumnIndex: -1
+    },
+    data: documents,
+    columns: columns || defaultColumns,
+    actions: actions || defaultActions,
+    title: title ? `${title} (${documents.length})` : `All (${documents.length})`
+  }) : /* @__PURE__ */ React.createElement(EmptyState, {
+    missing: "data",
+    title: "No documents to show",
+    description: "Create your own document. Check out our Getting Started Information",
+    action: /* @__PURE__ */ React.createElement(Button$1, {
+      color: "primary",
+      to: "https://backstage.io/docs/features/techdocs/getting-started",
+      variant: "contained"
+    }, "DOCS")
+  }));
 };
-const TechDocsCustomHome = ({
-  tabsConfig
-}) => {
-  const [selectedTab, setSelectedTab] = useState(0);
-  const catalogApi = useApi(catalogApiRef);
-  const {
-    value: entities,
-    loading,
-    error
-  } = useAsync(async () => {
-    const response = await catalogApi.getEntities({
-      filter: {
-        "metadata.annotations.backstage.io/techdocs-ref": CATALOG_FILTER_EXISTS
-      },
-      fields: [
-        "apiVersion",
-        "kind",
-        "metadata",
-        "relations",
-        "spec.owner",
-        "spec.type"
-      ]
-    });
-    return response.items.filter((entity) => {
-      var _a;
-      return !!((_a = entity.metadata.annotations) == null ? void 0 : _a["backstage.io/techdocs-ref"]);
-    });
-  });
-  const currentTabConfig = tabsConfig[selectedTab];
-  if (loading) {
-    return /* @__PURE__ */ React.createElement(TechDocsPageWrapper, null, /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Progress, null)));
-  }
+DocsTable.columns = columnFactories;
+DocsTable.actions = actionFactories;
+
+const EntityListDocsTable = (props) => {
+  var _a, _b;
+  const { columns, actions } = props;
+  const { loading, error, entities, filters } = useEntityList();
+  const { isStarredEntity, toggleStarredEntity } = useStarredEntities();
+  const [, copyToClipboard] = useCopyToClipboard();
+  const title = capitalize((_b = (_a = filters.user) == null ? void 0 : _a.value) != null ? _b : "all");
+  const defaultActions = [
+    actionFactories.createCopyDocsUrlAction(copyToClipboard),
+    actionFactories.createStarEntityAction(isStarredEntity, toggleStarredEntity)
+  ];
   if (error) {
-    return /* @__PURE__ */ React.createElement(TechDocsPageWrapper, null, /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(WarningPanel, {
+    return /* @__PURE__ */ React.createElement(WarningPanel, {
       severity: "error",
       title: "Could not load available documentation."
     }, /* @__PURE__ */ React.createElement(CodeSnippet, {
       language: "text",
       text: error.toString()
-    }))));
+    }));
   }
-  return /* @__PURE__ */ React.createElement(TechDocsPageWrapper, null, /* @__PURE__ */ React.createElement(HeaderTabs, {
-    selectedIndex: selectedTab,
-    onChange: (index) => setSelectedTab(index),
-    tabs: tabsConfig.map(({ label }, index) => ({
-      id: index.toString(),
-      label
-    }))
-  }), /* @__PURE__ */ React.createElement(Content, {
-    "data-testid": "techdocs-content"
-  }, currentTabConfig.panels.map((config, index) => /* @__PURE__ */ React.createElement(CustomPanel, {
-    key: index,
-    config,
-    entities: !!entities ? entities : [],
-    index
-  }))));
+  return /* @__PURE__ */ React.createElement(DocsTable, {
+    title,
+    entities,
+    loading,
+    actions: actions || defaultActions,
+    columns
+  });
 };
-function useOwnUser() {
-  const catalogApi = useApi(catalogApiRef);
-  const identityApi = useApi(identityApiRef);
-  return useAsync(async () => {
-    const identity = await identityApi.getBackstageIdentity();
-    return catalogApi.getEntityByName(parseEntityRef(identity.userEntityRef, {
-      defaultKind: "User",
-      defaultNamespace: DEFAULT_NAMESPACE
-    }));
-  }, [catalogApi, identityApi]);
-}
+EntityListDocsTable.columns = columnFactories;
+EntityListDocsTable.actions = actionFactories;
 
-var TechDocsCustomHome$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  TechDocsCustomHome: TechDocsCustomHome
-});
+const TechDocsPageWrapper = (props) => {
+  var _a;
+  const { children } = props;
+  const configApi = useApi(configApiRef);
+  const generatedSubtitle = `Documentation available in ${(_a = configApi.getOptionalString("organization.name")) != null ? _a : "Backstage"}`;
+  return /* @__PURE__ */ React.createElement(PageWithHeader, {
+    title: "Documentation",
+    subtitle: generatedSubtitle,
+    themeId: "documentation"
+  }, children);
+};
 
-const LegacyTechDocsHome = () => {
-  const tabsConfig = [
-    {
-      label: "Overview",
-      panels: [
-        {
-          title: "Overview",
-          description: "Explore your internal technical ecosystem through documentation.",
-          panelType: "DocsCardGrid",
-          filterPredicate: () => true
-        }
-      ]
-    },
-    {
-      label: "Owned Documents",
-      panels: [
-        {
-          title: "Owned documents",
-          description: "Access your documentation.",
-          panelType: "DocsTable",
-          filterPredicate: "ownedByUser"
-        }
-      ]
-    }
-  ];
-  return /* @__PURE__ */ React.createElement(TechDocsCustomHome, {
-    tabsConfig
-  });
+class TechDocsFilter {
+  getCatalogFilters() {
+    return {
+      "metadata.annotations.backstage.io/techdocs-ref": CATALOG_FILTER_EXISTS
+    };
+  }
+}
+const TechDocsPicker = () => {
+  const { updateFilters } = useEntityList();
+  useEffect(() => {
+    updateFilters({
+      techdocs: new TechDocsFilter()
+    });
+  }, [updateFilters]);
+  return null;
+};
+
+const DefaultTechDocsHome = (props) => {
+  const { initialFilter = "all", columns, actions } = props;
+  return /* @__PURE__ */ React.createElement(TechDocsPageWrapper, null, /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, {
+    title: ""
+  }, /* @__PURE__ */ React.createElement(SupportButton, null, "Discover documentation in your ecosystem.")), /* @__PURE__ */ React.createElement(EntityListProvider, null, /* @__PURE__ */ React.createElement(FilteredEntityLayout, null, /* @__PURE__ */ React.createElement(FilterContainer, null, /* @__PURE__ */ React.createElement(TechDocsPicker, null), /* @__PURE__ */ React.createElement(UserListPicker, {
+    initialFilter
+  }), /* @__PURE__ */ React.createElement(EntityOwnerPicker, null), /* @__PURE__ */ React.createElement(EntityTagPicker, null)), /* @__PURE__ */ React.createElement(EntityListContainer, null, /* @__PURE__ */ React.createElement(EntityListDocsTable, {
+    actions,
+    columns
+  }))))));
 };
 
+const techdocsPlugin = createPlugin({
+  id: "techdocs",
+  apis: [
+    createApiFactory({
+      api: techdocsStorageApiRef,
+      deps: {
+        configApi: configApiRef,
+        discoveryApi: discoveryApiRef,
+        identityApi: identityApiRef,
+        fetchApi: fetchApiRef
+      },
+      factory: ({ configApi, discoveryApi, identityApi, fetchApi }) => new TechDocsStorageClient({
+        configApi,
+        discoveryApi,
+        identityApi,
+        fetchApi
+      })
+    }),
+    createApiFactory({
+      api: techdocsApiRef,
+      deps: {
+        configApi: configApiRef,
+        discoveryApi: discoveryApiRef,
+        fetchApi: fetchApiRef
+      },
+      factory: ({ configApi, discoveryApi, fetchApi }) => new TechDocsClient({
+        configApi,
+        discoveryApi,
+        fetchApi
+      })
+    })
+  ],
+  routes: {
+    root: rootRouteRef,
+    docRoot: rootDocsRouteRef,
+    entityContent: rootCatalogDocsRouteRef
+  }
+});
+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 TechDocsCustomHome = techdocsPlugin.provide(createRoutableExtension({
+  name: "TechDocsCustomHome",
+  component: () => import('./esm/TechDocsCustomHome-a4f542cd.esm.js').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 TechDocsReaderPage$2; }).then((m) => m.TechDocsReaderPage),
+  mountPoint: rootDocsRouteRef
+}));
+
 const TechDocsIndexPage = () => {
   const outlet = useOutlet();
-  return outlet || /* @__PURE__ */ React.createElement(LegacyTechDocsHome, null);
+  return outlet || /* @__PURE__ */ React.createElement(DefaultTechDocsHome, null);
 };
 
 var TechDocsIndexPage$1 = /*#__PURE__*/Object.freeze({
@@ -2168,10 +2099,10 @@ const Router = () => {
     element: /* @__PURE__ */ React.createElement(TechDocsIndexPage, null)
   }), /* @__PURE__ */ React.createElement(Route, {
     path: "/:namespace/:kind/:name/*",
-    element: /* @__PURE__ */ React.createElement(TechDocsPage, null)
+    element: /* @__PURE__ */ React.createElement(TechDocsReaderPage$1, null)
   }));
 };
-const EmbeddedDocsRouter = (_props) => {
+const EmbeddedDocsRouter = () => {
   var _a;
   const { entity } = useEntity();
   const projectId = (_a = entity.metadata.annotations) == null ? void 0 : _a[TECHDOCS_ANNOTATION];
@@ -2195,5 +2126,5 @@ var Router$1 = /*#__PURE__*/Object.freeze({
   EmbeddedDocsRouter: EmbeddedDocsRouter
 });
 
-export { DefaultTechDocsHome, DocsCardGrid, DocsResultListItem, DocsTable, EmbeddedDocsRouter, EntityListDocsGrid, 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 };
+export { DefaultTechDocsHome, DocsCardGrid, DocsResultListItem, DocsTable, EmbeddedDocsRouter, EntityListDocsGrid, EntityListDocsTable, EntityTechdocsContent, Reader, Router, TechDocsClient, TechDocsCustomHome, TechDocsIndexPage$2 as TechDocsIndexPage, TechDocsPage, TechDocsPageHeader, TechDocsPageWrapper, TechDocsPicker, TechDocsReaderPage, TechDocsReaderPageHeader, TechDocsSearch, TechDocsSearchResultListItem, TechDocsStateIndicator, TechDocsStorageClient, TechdocsPage, isTechDocsAvailable, techdocsPlugin as plugin, techdocsApiRef, techdocsPlugin, techdocsStorageApiRef, useTechDocsReader, useTechDocsReaderDom, withTechDocsReaderProvider };
 //# sourceMappingURL=index.esm.js.map