@nospt/backstage-plugin-apigee 1.1.0-rc3 → 1.1.0-rc5

package/config.d.ts

@@ -2,16 +2,6 @@
 export interface Config {
   apigee?: {
     catalog?: {
-      /**
-       * Optional override of the default category -> icon map (UI-10 / D-08).
-       * Keys are category slugs (matching the apigee.com/category annotation);
-       * values are icon KEYS from the fixed allow-list resolved by
-       * src/components/categoryIcons.tsx. Unknown/disallowed values fall back to
-       * the `Category` icon (a value is NEVER a module path or component — see
-       * Registry Safety in 05-UI-SPEC.md).
-       * @visibility frontend
-       */
-      categoryIcons?: { [categorySlug: string]: string };
       /**
        * Optional org-id -> display-label map for the Org facet.
        * Keys are raw annotation values (for example `apigee-x-private-p-495866`);

package/dist/components/ApiCard.esm.js

@@ -1,83 +1,97 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Link, StatusOK, StatusError, StatusWarning } from '@backstage/core-components';
+import { Link } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/frontend-plugin-api';
 import { entityRouteRef } from '@backstage/plugin-catalog-react';
 import { Text } from '@backstage/ui';
-import { RiTeamLine, RiFileTextLine } from '@remixicon/react';
+import { RiGlobalLine, RiLockLine, RiTeamLine, RiBuildingLine, RiFileTextLine } from '@remixicon/react';
 import styles from './ApiCard.module.css.esm.js';
 
+const BADGE_KIND_CLASS = {
+  ok: styles.badgeOk,
+  warning: styles.badgeWarning,
+  error: styles.badgeError
+};
+const VISIBILITY_ICON = {
+  private: RiLockLine,
+  public: RiGlobalLine
+};
 function LifecycleBadge({
   kind,
   label
 }) {
-  if (kind === "ok") {
-    return /* @__PURE__ */ jsx(StatusOK, { children: label });
-  }
-  if (kind === "error") {
-    return /* @__PURE__ */ jsx(StatusError, { children: label });
-  }
-  return /* @__PURE__ */ jsx(StatusWarning, { children: label });
+  return /* @__PURE__ */ jsx("span", { className: `${styles.badge} ${BADGE_KIND_CLASS[kind]}`, children: label });
 }
-function ApiCard({ vm, icon: Icon }) {
+function ApiCard({ vm, onSelect }) {
   const entityRoute = useRouteRef(entityRouteRef);
   const { kind, namespace, name } = vm.targetRef;
   const href = entityRoute ? entityRoute({ kind: kind.toLowerCase(), namespace, name }) : void 0;
   const ariaLabel = `Open ${vm.name} API details`;
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
-      Icon ? /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: styles.categoryIcon, size: 20 }) : null,
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: styles.titleRow, children: /* @__PURE__ */ jsx(
         Text,
         {
-          variant: "body-medium",
+          variant: "body-large",
           weight: "bold",
           as: "h3",
           className: styles.name,
           children: vm.name
         }
-      ),
-      /* @__PURE__ */ jsx(LifecycleBadge, { kind: vm.badge.kind, label: vm.badge.label })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: styles.meta, children: [
-      /* @__PURE__ */ jsx(RiTeamLine, { "aria-hidden": true, size: 16 }),
-      /* @__PURE__ */ jsx(Text, { variant: "body-small", color: "secondary", as: "span", children: vm.ownerLabel }),
-      vm.version ? /* @__PURE__ */ jsxs(
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: styles.badges, children: [
+        /* @__PURE__ */ jsx(LifecycleBadge, { kind: vm.badge.kind, label: vm.badge.label }),
+        vm.version ? /* @__PURE__ */ jsx("span", { className: `${styles.badge} ${styles.badgeVersion}`, children: vm.version }) : null
+      ] }),
+      vm.description ? /* @__PURE__ */ jsx(
         Text,
         {
           variant: "body-small",
           color: "secondary",
-          as: "span",
-          className: styles.version,
-          children: [
-            "v",
-            vm.version
-          ]
+          as: "p",
+          className: styles.description,
+          children: vm.description
         }
       ) : null
     ] }),
-    vm.description ? /* @__PURE__ */ jsx(
-      Text,
-      {
-        variant: "body-small",
-        color: "secondary",
-        as: "p",
-        className: styles.description,
-        children: vm.description
-      }
-    ) : null,
-    vm.hasSpec ? /* @__PURE__ */ jsx("div", { className: styles.footer, children: /* @__PURE__ */ jsx(
-      "span",
+    /* @__PURE__ */ jsxs("div", { className: styles.body, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.leftCol, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.metaItem, children: [
+          /* @__PURE__ */ jsx(RiTeamLine, { "aria-hidden": true, size: 16 }),
+          /* @__PURE__ */ jsx(Text, { variant: "body-small", color: "secondary", as: "span", children: vm.ownerLabel })
+        ] }),
+        vm.department ? /* @__PURE__ */ jsxs("div", { className: styles.metaItem, children: [
+          /* @__PURE__ */ jsx(RiBuildingLine, { "aria-hidden": true, size: 16 }),
+          /* @__PURE__ */ jsx(Text, { variant: "body-small", color: "secondary", as: "span", children: vm.department })
+        ] }) : null,
+        vm.visibilities.map((visibility) => {
+          const VisibilityIcon = VISIBILITY_ICON[visibility];
+          return /* @__PURE__ */ jsxs("div", { className: styles.metaItem, children: [
+            /* @__PURE__ */ jsx(VisibilityIcon, { "aria-hidden": true, size: 16 }),
+            /* @__PURE__ */ jsx(Text, { variant: "body-small", color: "secondary", as: "span", children: visibility })
+          ] }, visibility);
+        }),
+        vm.hasSpec ? /* @__PURE__ */ jsxs("div", { className: styles.metaItem, children: [
+          /* @__PURE__ */ jsx(RiFileTextLine, { "aria-hidden": true, size: 16 }),
+          /* @__PURE__ */ jsx(Text, { variant: "body-small", color: "secondary", as: "span", children: "OpenAPI spec" })
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: styles.rightCol })
+    ] })
+  ] });
+  if (onSelect) {
+    return /* @__PURE__ */ jsx(
+      "button",
       {
-        role: "img",
-        "aria-label": "OpenAPI spec available",
-        title: "OpenAPI spec available",
-        className: styles.specIcon,
-        children: /* @__PURE__ */ jsx(RiFileTextLine, { "aria-hidden": true, size: 16 })
+        type: "button",
+        className: styles.card,
+        "aria-label": ariaLabel,
+        onClick: () => onSelect(vm),
+        children: content
       }
-    ) }) : null
-  ] });
-  return /* @__PURE__ */ jsx("div", { className: styles.card, children: href ? /* @__PURE__ */ jsx(Link, { to: href, className: styles.action, "aria-label": ariaLabel, children: content }) : /* @__PURE__ */ jsx("div", { className: styles.action, children: content }) });
+    );
+  }
+  return href ? /* @__PURE__ */ jsx(Link, { to: href, className: styles.card, "aria-label": ariaLabel, children: content }) : /* @__PURE__ */ jsx("div", { className: styles.card, children: content });
 }
 
-export { ApiCard };
+export { ApiCard, LifecycleBadge, VISIBILITY_ICON };
 //# sourceMappingURL=ApiCard.esm.js.map

package/dist/components/ApiCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApiCard.esm.js","sources":["../../src/components/ApiCard.tsx"],"sourcesContent":["// SPDX-License-Identifier: Apache-2.0\nimport {\n  Link,\n  StatusError,\n  StatusOK,\n  StatusWarning,\n} from '@backstage/core-components';\nimport { useRouteRef } from '@backstage/frontend-plugin-api';\nimport { entityRouteRef } from '@backstage/plugin-catalog-react';\nimport { Text } from '@backstage/ui';\nimport {\n  RiFileTextLine,\n  RiTeamLine,\n  type RemixiconComponentType,\n} from '@remixicon/react';\nimport type { ApiCardViewModel, LifecycleBadgeKind } from './apiCardViewModel';\nimport styles from './ApiCard.module.css';\n\nexport interface ApiCardProps {\n  vm: ApiCardViewModel;\n  /** Category icon resolved by the parent grid (05-05); decorative. */\n  icon?: RemixiconComponentType;\n}\n\nfunction LifecycleBadge({\n  kind,\n  label,\n}: {\n  kind: LifecycleBadgeKind;\n  label: string;\n}) {\n  if (kind === 'ok') {\n    return <StatusOK>{label}</StatusOK>;\n  }\n  if (kind === 'error') {\n    return <StatusError>{label}</StatusError>;\n  }\n  return <StatusWarning>{label}</StatusWarning>;\n}\n\n/**\n * A single Apigee API tile. The whole card is one anchor-based control whose href is\n * resolved via `entityRouteRef` (never hardcoded — TR04); it degrades to a non-link\n * button when the route ref is unbound (dev harness). Entity text renders as React\n * children only — never via raw HTML injection (T-05-03). (UI-02, UI-03)\n */\nexport function ApiCard({ vm, icon: Icon }: ApiCardProps) {\n  const entityRoute = useRouteRef(entityRouteRef);\n  const { kind, namespace, name } = vm.targetRef;\n  const href = entityRoute\n    ? entityRoute({ kind: kind.toLowerCase(), namespace, name })\n    : undefined;\n  const ariaLabel = `Open ${vm.name} API details`;\n\n  const content = (\n    <>\n      <div className={styles.header}>\n        {Icon ? (\n          <Icon aria-hidden className={styles.categoryIcon} size={20} />\n        ) : null}\n        <Text\n          variant=\"body-medium\"\n          weight=\"bold\"\n          as=\"h3\"\n          className={styles.name}\n        >\n          {vm.name}\n        </Text>\n        <LifecycleBadge kind={vm.badge.kind} label={vm.badge.label} />\n      </div>\n\n      <div className={styles.meta}>\n        <RiTeamLine aria-hidden size={16} />\n        <Text variant=\"body-small\" color=\"secondary\" as=\"span\">\n          {vm.ownerLabel}\n        </Text>\n        {vm.version ? (\n          <Text\n            variant=\"body-small\"\n            color=\"secondary\"\n            as=\"span\"\n            className={styles.version}\n          >\n            v{vm.version}\n          </Text>\n        ) : null}\n      </div>\n\n      {vm.description ? (\n        <Text\n          variant=\"body-small\"\n          color=\"secondary\"\n          as=\"p\"\n          className={styles.description}\n        >\n          {vm.description}\n        </Text>\n      ) : null}\n\n      {vm.hasSpec ? (\n        <div className={styles.footer}>\n          <span\n            role=\"img\"\n            aria-label=\"OpenAPI spec available\"\n            title=\"OpenAPI spec available\"\n            className={styles.specIcon}\n          >\n            <RiFileTextLine aria-hidden size={16} />\n          </span>\n        </div>\n      ) : null}\n    </>\n  );\n\n  return (\n    <div className={styles.card}>\n      {href ? (\n        <Link to={href} className={styles.action} aria-label={ariaLabel}>\n          {content}\n        </Link>\n      ) : (\n        <div className={styles.action}>{content}</div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ApiCard.esm.js","sources":["../../src/components/ApiCard.tsx"],"sourcesContent":["// SPDX-License-Identifier: Apache-2.0\nimport { Link } from '@backstage/core-components';\nimport { useRouteRef } from '@backstage/frontend-plugin-api';\nimport { entityRouteRef } from '@backstage/plugin-catalog-react';\nimport { Text } from '@backstage/ui';\nimport {\n  RiBuildingLine,\n  RiFileTextLine,\n  RiGlobalLine,\n  RiLockLine,\n  RiTeamLine,\n  type RemixiconComponentType,\n} from '@remixicon/react';\nimport type {\n  ApiCardViewModel,\n  ApiVisibility,\n  LifecycleBadgeKind,\n} from './apiCardViewModel';\nimport styles from './ApiCard.module.css';\n\nexport interface ApiCardProps {\n  vm: ApiCardViewModel;\n  /** When provided, clicking the card opens the details drawer (via this callback)\n   * instead of navigating to the catalog entity page. */\n  onSelect?: (vm: ApiCardViewModel) => void;\n}\n\nconst BADGE_KIND_CLASS: Record<LifecycleBadgeKind, string> = {\n  ok: styles.badgeOk,\n  warning: styles.badgeWarning,\n  error: styles.badgeError,\n};\n\nexport const VISIBILITY_ICON: Record<ApiVisibility, RemixiconComponentType> = {\n  private: RiLockLine,\n  public: RiGlobalLine,\n};\n\n/** Solid colored status pill (D-04). Color conveys state; the text label is the\n * accessible source of truth so it never relies on color alone. */\nexport function LifecycleBadge({\n  kind,\n  label,\n}: {\n  kind: LifecycleBadgeKind;\n  label: string;\n}) {\n  return (\n    <span className={`${styles.badge} ${BADGE_KIND_CLASS[kind]}`}>{label}</span>\n  );\n}\n\n/**\n * A single Apigee API tile. The whole card is one anchor-based control whose href is\n * resolved via `entityRouteRef` (never hardcoded — TR04); it degrades to a non-link\n * button when the route ref is unbound (dev harness). Entity text renders as React\n * children only — never via raw HTML injection (T-05-03). (UI-02, UI-03)\n */\nexport function ApiCard({ vm, onSelect }: ApiCardProps) {\n  const entityRoute = useRouteRef(entityRouteRef);\n  const { kind, namespace, name } = vm.targetRef;\n  const href = entityRoute\n    ? entityRoute({ kind: kind.toLowerCase(), namespace, name })\n    : undefined;\n  const ariaLabel = `Open ${vm.name} API details`;\n\n  const content = (\n    <>\n      <div className={styles.header}>\n        <div className={styles.titleRow}>\n          <Text\n            variant=\"body-large\"\n            weight=\"bold\"\n            as=\"h3\"\n            className={styles.name}\n          >\n            {vm.name}\n          </Text>\n        </div>\n        <div className={styles.badges}>\n          <LifecycleBadge kind={vm.badge.kind} label={vm.badge.label} />\n          {vm.version ? (\n            <span className={`${styles.badge} ${styles.badgeVersion}`}>\n              {vm.version}\n            </span>\n          ) : null}\n        </div>\n        {vm.description ? (\n          <Text\n            variant=\"body-small\"\n            color=\"secondary\"\n            as=\"p\"\n            className={styles.description}\n          >\n            {vm.description}\n          </Text>\n        ) : null}\n      </div>\n\n      <div className={styles.body}>\n        <div className={styles.leftCol}>\n          <div className={styles.metaItem}>\n            <RiTeamLine aria-hidden size={16} />\n            <Text variant=\"body-small\" color=\"secondary\" as=\"span\">\n              {vm.ownerLabel}\n            </Text>\n          </div>\n          {vm.department ? (\n            <div className={styles.metaItem}>\n              <RiBuildingLine aria-hidden size={16} />\n              <Text variant=\"body-small\" color=\"secondary\" as=\"span\">\n                {vm.department}\n              </Text>\n            </div>\n          ) : null}\n          {vm.visibilities.map(visibility => {\n            const VisibilityIcon = VISIBILITY_ICON[visibility];\n            return (\n              <div key={visibility} className={styles.metaItem}>\n                <VisibilityIcon aria-hidden size={16} />\n                <Text variant=\"body-small\" color=\"secondary\" as=\"span\">\n                  {visibility}\n                </Text>\n              </div>\n            );\n          })}\n          {vm.hasSpec ? (\n            <div className={styles.metaItem}>\n              <RiFileTextLine aria-hidden size={16} />\n              <Text variant=\"body-small\" color=\"secondary\" as=\"span\">\n                OpenAPI spec\n              </Text>\n            </div>\n          ) : null}\n        </div>\n\n        <div className={styles.rightCol}>\n          {/* Quality score + information coverage list — to be implemented later */}\n        </div>\n      </div>\n    </>\n  );\n\n  if (onSelect) {\n    return (\n      <button\n        type=\"button\"\n        className={styles.card}\n        aria-label={ariaLabel}\n        onClick={() => onSelect(vm)}\n      >\n        {content}\n      </button>\n    );\n  }\n\n  return href ? (\n    <Link to={href} className={styles.card} aria-label={ariaLabel}>\n      {content}\n    </Link>\n  ) : (\n    <div className={styles.card}>{content}</div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/ApiCard.module.css.esm.js

@@ -1,7 +1,7 @@
 import styleInject from '../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = ".ApiCard_card__611f3d2e93 {\n  height: 100%;\n  border: 1px solid var(--bui-border-1);\n  border-radius: var(--bui-radius-3);\n  background-color: var(--bui-bg-neutral-1);\n  transition: box-shadow 200ms ease;\n}\n\n.ApiCard_card__611f3d2e93:hover {\n  box-shadow: var(--bui-shadow);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ApiCard_card__611f3d2e93 {\n    transition: none;\n  }\n}\n\n.ApiCard_action__611f3d2e93 {\n  display: flex;\n  flex-direction: column;\n  gap: var(--bui-space-2);\n  height: 100%;\n  min-height: 172px;\n  padding: var(--bui-space-4);\n  color: inherit;\n  text-decoration: none;\n  border-radius: var(--bui-radius-3);\n}\n\n.ApiCard_action__611f3d2e93:focus-visible {\n  outline: 2px solid var(--bui-ring);\n  outline-offset: 2px;\n}\n\n.ApiCard_header__611f3d2e93 {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--bui-space-2);\n}\n\n.ApiCard_categoryIcon__611f3d2e93 {\n  margin-top: 2px;\n  color: var(--bui-fg-secondary);\n}\n\n.ApiCard_name__611f3d2e93 {\n  flex: 1;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  word-break: break-word;\n}\n\n.ApiCard_meta__611f3d2e93 {\n  display: flex;\n  align-items: center;\n  gap: var(--bui-space-1);\n  color: var(--bui-fg-secondary);\n}\n\n.ApiCard_version__611f3d2e93 {\n  margin-left: auto;\n}\n\n.ApiCard_description__611f3d2e93 {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.ApiCard_footer__611f3d2e93 {\n  margin-top: auto;\n  display: flex;\n  align-items: center;\n  gap: var(--bui-space-2);\n}\n\n.ApiCard_specIcon__611f3d2e93 {\n  display: inline-flex;\n  color: var(--bui-fg-secondary);\n}\n";
-var styles = {"card":"ApiCard_card__611f3d2e93","action":"ApiCard_action__611f3d2e93","header":"ApiCard_header__611f3d2e93","categoryIcon":"ApiCard_categoryIcon__611f3d2e93","name":"ApiCard_name__611f3d2e93","meta":"ApiCard_meta__611f3d2e93","version":"ApiCard_version__611f3d2e93","description":"ApiCard_description__611f3d2e93","footer":"ApiCard_footer__611f3d2e93","specIcon":"ApiCard_specIcon__611f3d2e93"};
+var css_248z = ".ApiCard_card__b286a50f58 {\n  display: flex;\n  flex-direction: column;\n  gap: var(--bui-space-2);\n  height: 100%;\n  min-height: 172px;\n  padding: var(--bui-space-4);\n  color: inherit;\n  text-decoration: none;\n  border: 1px solid var(--bui-border-1);\n  border-radius: var(--bui-radius-3);\n  background-color: var(--bui-bg-neutral-1);\n  transition: box-shadow 200ms ease;\n}\n\n/* The card IS a MUI Link; element+class beats MUI's class so its self-applied link colour/underline doesn't bleed onto the card content. */\na.ApiCard_card__b286a50f58,\na.ApiCard_card__b286a50f58:hover {\n  color: inherit;\n  text-decoration: none;\n}\n\n/* The card can also be a <button> (opens the details drawer). Reset UA button\n   styling so it renders identically to the anchor/div variants. */\nbutton.ApiCard_card__b286a50f58 {\n  width: 100%;\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n  appearance: none;\n}\n\n.ApiCard_card__b286a50f58:hover {\n  box-shadow: var(--bui-shadow);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ApiCard_card__b286a50f58 {\n    transition: none;\n  }\n}\n\n.ApiCard_card__b286a50f58:focus-visible {\n  outline: 2px solid var(--bui-ring);\n  outline-offset: 2px;\n}\n\n.ApiCard_header__b286a50f58 {\n  display: flex;\n  flex-direction: column;\n  gap: var(--bui-space-2);\n}\n\n.ApiCard_titleRow__b286a50f58 {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--bui-space-2);\n}\n\n.ApiCard_name__b286a50f58 {\n  flex: 1;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  word-break: break-word;\n}\n\n.ApiCard_badges__b286a50f58 {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--bui-space-1);\n}\n\n.ApiCard_badge__b286a50f58 {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  padding: 2px var(--bui-space-2);\n  border-radius: var(--bui-radius-full);\n  font-size: var(--bui-font-size-1);\n  font-weight: var(--bui-font-weight-bold);\n  line-height: 1.5;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  white-space: nowrap;\n}\n\n.ApiCard_badgeOk__b286a50f58 {\n  background-color: var(--bui-bg-success);\n  color: var(--bui-fg-success-on-bg);\n}\n\n.ApiCard_badgeWarning__b286a50f58 {\n  background-color: var(--bui-bg-warning);\n  color: var(--bui-fg-warning-on-bg);\n}\n\n.ApiCard_badgeError__b286a50f58 {\n  background-color: var(--bui-bg-danger);\n  color: var(--bui-fg-danger-on-bg);\n}\n\n.ApiCard_badgeVersion__b286a50f58 {\n  background-color: var(--bui-bg-info);\n  color: var(--bui-fg-info-on-bg);\n  text-transform: none;\n}\n\n.ApiCard_body__b286a50f58 {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--bui-space-4);\n}\n\n.ApiCard_leftCol__b286a50f58,\n.ApiCard_rightCol__b286a50f58 {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--bui-space-1);\n}\n\n.ApiCard_leftCol__b286a50f58 {\n  color: var(--bui-fg-secondary);\n}\n\n.ApiCard_metaItem__b286a50f58 {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--bui-space-1);\n}\n\n.ApiCard_description__b286a50f58 {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n";
+var styles = {"card":"ApiCard_card__b286a50f58","header":"ApiCard_header__b286a50f58","titleRow":"ApiCard_titleRow__b286a50f58","name":"ApiCard_name__b286a50f58","badges":"ApiCard_badges__b286a50f58","badge":"ApiCard_badge__b286a50f58","badgeOk":"ApiCard_badgeOk__b286a50f58","badgeWarning":"ApiCard_badgeWarning__b286a50f58","badgeError":"ApiCard_badgeError__b286a50f58","badgeVersion":"ApiCard_badgeVersion__b286a50f58","body":"ApiCard_body__b286a50f58","leftCol":"ApiCard_leftCol__b286a50f58","rightCol":"ApiCard_rightCol__b286a50f58","metaItem":"ApiCard_metaItem__b286a50f58","description":"ApiCard_description__b286a50f58"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/ApiCardGrid.esm.js

@@ -1,41 +1,13 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { ItemCardGrid } from '@backstage/core-components';
-import { Text } from '@backstage/ui';
 import { ApiCard } from './ApiCard.esm.js';
-import { resolveCategoryIcon } from './categoryIcons.esm.js';
-import { groupByCategory } from './grouping.esm.js';
-import styles from './ApiCardGrid.module.css.esm.js';
+import { ApiTable } from './ApiTable.esm.js';
 
-function ApiCardGrid({ vms, viewMode, overrides }) {
-  if (viewMode === "flat") {
-    return /* @__PURE__ */ jsx(ItemCardGrid, { children: vms.map((vm) => /* @__PURE__ */ jsx(
-      ApiCard,
-      {
-        vm,
-        icon: resolveCategoryIcon(vm.category, overrides)
-      },
-      vm.targetRef.name
-    )) });
+function ApiCardGrid({ vms, viewMode, onSelect }) {
+  if (viewMode === "list") {
+    return /* @__PURE__ */ jsx(ApiTable, { vms, onSelect });
   }
-  const groups = groupByCategory(vms);
-  return /* @__PURE__ */ jsx(Fragment, { children: groups.map((group) => {
-    const SectionIcon = resolveCategoryIcon(group.key, overrides);
-    return /* @__PURE__ */ jsxs("section", { className: styles.section, children: [
-      /* @__PURE__ */ jsxs("div", { className: styles.sectionHeader, children: [
-        /* @__PURE__ */ jsx(SectionIcon, { "aria-hidden": true, className: styles.sectionIcon }),
-        /* @__PURE__ */ jsx(Text, { variant: "title-small", as: "h2", children: group.label }),
-        /* @__PURE__ */ jsx("span", { className: styles.count, children: group.items.length })
-      ] }),
-      /* @__PURE__ */ jsx(ItemCardGrid, { children: group.items.map((vm) => /* @__PURE__ */ jsx(
-        ApiCard,
-        {
-          vm,
-          icon: resolveCategoryIcon(vm.category, overrides)
-        },
-        vm.targetRef.name
-      )) })
-    ] }, group.key);
-  }) });
+  return /* @__PURE__ */ jsx(ItemCardGrid, { children: vms.map((vm) => /* @__PURE__ */ jsx(ApiCard, { vm, onSelect }, vm.targetRef.name)) });
 }
 
 export { ApiCardGrid };

package/dist/components/ApiCardGrid.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApiCardGrid.esm.js","sources":["../../src/components/ApiCardGrid.tsx"],"sourcesContent":["// SPDX-License-Identifier: Apache-2.0\nimport { ItemCardGrid } from '@backstage/core-components';\nimport { Text } from '@backstage/ui';\nimport { ApiCard } from './ApiCard';\nimport type { ApiCardViewModel } from './apiCardViewModel';\nimport { resolveCategoryIcon } from './categoryIcons';\nimport { groupByCategory } from './grouping';\nimport styles from './ApiCardGrid.module.css';\n\nexport type ViewMode = 'flat' | 'grouped';\n\nexport interface ApiCardGridProps {\n  vms: ApiCardViewModel[];\n  viewMode: ViewMode;\n  /** Raw `apigee.catalog.categoryIcons` override map (slug -> IconKey string). */\n  overrides?: Record<string, string>;\n}\n\n/**\n * Presentational grid of `ApiCard` tiles. In `flat` mode a single responsive grid; in\n * `grouped` mode one section per category (icon + label + count chip) with the \"Other\"\n * bucket last (ordering enforced by `groupByCategory`). No data fetching. (UI-01, UI-11)\n */\nexport function ApiCardGrid({ vms, viewMode, overrides }: ApiCardGridProps) {\n  if (viewMode === 'flat') {\n    return (\n      <ItemCardGrid>\n        {vms.map(vm => (\n          <ApiCard\n            key={vm.targetRef.name}\n            vm={vm}\n            icon={resolveCategoryIcon(vm.category, overrides)}\n          />\n        ))}\n      </ItemCardGrid>\n    );\n  }\n\n  const groups = groupByCategory(vms);\n  return (\n    <>\n      {groups.map(group => {\n        const SectionIcon = resolveCategoryIcon(group.key, overrides);\n        return (\n          <section key={group.key} className={styles.section}>\n            <div className={styles.sectionHeader}>\n              <SectionIcon aria-hidden className={styles.sectionIcon} />\n              <Text variant=\"title-small\" as=\"h2\">\n                {group.label}\n              </Text>\n              <span className={styles.count}>{group.items.length}</span>\n            </div>\n            <ItemCardGrid>\n              {group.items.map(vm => (\n                <ApiCard\n                  key={vm.targetRef.name}\n                  vm={vm}\n                  icon={resolveCategoryIcon(vm.category, overrides)}\n                />\n              ))}\n            </ItemCardGrid>\n          </section>\n        );\n      })}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAuBO,SAAS,WAAA,CAAY,EAAE,GAAA,EAAK,QAAA,EAAU,WAAU,EAAqB;AAC1E,EAAA,IAAI,aAAa,MAAA,EAAQ;AACvB,IAAA,uBACE,GAAA,CAAC,YAAA,EAAA,EACE,QAAA,EAAA,GAAA,CAAI,GAAA,CAAI,CAAA,EAAA,qBACP,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QAEC,EAAA;AAAA,QACA,IAAA,EAAM,mBAAA,CAAoB,EAAA,CAAG,QAAA,EAAU,SAAS;AAAA,OAAA;AAAA,MAF3C,GAAG,SAAA,CAAU;AAAA,KAIrB,CAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,MAAM,MAAA,GAAS,gBAAgB,GAAG,CAAA;AAClC,EAAA,uBACE,GAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA,MAAA,CAAO,GAAA,CAAI,CAAA,KAAA,KAAS;AACnB,IAAA,MAAM,WAAA,GAAc,mBAAA,CAAoB,KAAA,CAAM,GAAA,EAAK,SAAS,CAAA;AAC5D,IAAA,uBACE,IAAA,CAAC,SAAA,EAAA,EAAwB,SAAA,EAAW,MAAA,CAAO,OAAA,EACzC,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,aAAA,EACrB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,aAAA,EAAW,IAAA,EAAC,SAAA,EAAW,OAAO,WAAA,EAAa,CAAA;AAAA,4BACvD,IAAA,EAAA,EAAK,OAAA,EAAQ,eAAc,EAAA,EAAG,IAAA,EAC5B,gBAAM,KAAA,EACT,CAAA;AAAA,4BACC,MAAA,EAAA,EAAK,SAAA,EAAW,OAAO,KAAA,EAAQ,QAAA,EAAA,KAAA,CAAM,MAAM,MAAA,EAAO;AAAA,OAAA,EACrD,CAAA;AAAA,sBACA,GAAA,CAAC,YAAA,EAAA,EACE,QAAA,EAAA,KAAA,CAAM,KAAA,CAAM,IAAI,CAAA,EAAA,qBACf,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UAEC,EAAA;AAAA,UACA,IAAA,EAAM,mBAAA,CAAoB,EAAA,CAAG,QAAA,EAAU,SAAS;AAAA,SAAA;AAAA,QAF3C,GAAG,SAAA,CAAU;AAAA,OAIrB,CAAA,EACH;AAAA,KAAA,EAAA,EAhBY,MAAM,GAiBpB,CAAA;AAAA,EAEJ,CAAC,CAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ApiCardGrid.esm.js","sources":["../../src/components/ApiCardGrid.tsx"],"sourcesContent":["// SPDX-License-Identifier: Apache-2.0\nimport { ItemCardGrid } from '@backstage/core-components';\nimport { ApiCard } from './ApiCard';\nimport { ApiTable } from './ApiTable';\nimport type { ApiCardViewModel } from './apiCardViewModel';\n\nexport type ViewMode = 'flat' | 'list';\n\nexport interface ApiCardGridProps {\n  vms: ApiCardViewModel[];\n  viewMode: ViewMode;\n  /** Opens the details drawer for a clicked card/row (both views). */\n  onSelect?: (vm: ApiCardViewModel) => void;\n}\n\n/**\n * Presentational grid of `ApiCard` tiles. In `flat` mode a single responsive grid; in\n * `list` mode a table. No data fetching. (UI-01, UI-11)\n */\nexport function ApiCardGrid({ vms, viewMode, onSelect }: ApiCardGridProps) {\n  if (viewMode === 'list') {\n    return <ApiTable vms={vms} onSelect={onSelect} />;\n  }\n\n  return (\n    <ItemCardGrid>\n      {vms.map(vm => (\n        <ApiCard key={vm.targetRef.name} vm={vm} onSelect={onSelect} />\n      ))}\n    </ItemCardGrid>\n  );\n}\n"],"names":[],"mappings":";;;;;AAmBO,SAAS,WAAA,CAAY,EAAE,GAAA,EAAK,QAAA,EAAU,UAAS,EAAqB;AACzE,EAAA,IAAI,aAAa,MAAA,EAAQ;AACvB,IAAA,uBAAO,GAAA,CAAC,QAAA,EAAA,EAAS,GAAA,EAAU,QAAA,EAAoB,CAAA;AAAA,EACjD;AAEA,EAAA,uBACE,GAAA,CAAC,YAAA,EAAA,EACE,QAAA,EAAA,GAAA,CAAI,GAAA,CAAI,CAAA,EAAA,qBACP,GAAA,CAAC,OAAA,EAAA,EAAgC,EAAA,EAAQ,QAAA,EAAA,EAA3B,EAAA,CAAG,SAAA,CAAU,IAAkC,CAC9D,CAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/components/ApiDetailsDrawer.esm.js

@@ -0,0 +1,335 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Link } from '@backstage/core-components';
+import { useApi } from '@backstage/core-plugin-api';
+import { useRouteRef } from '@backstage/frontend-plugin-api';
+import { parseEntityRef } from '@backstage/catalog-model';
+import { catalogApiRef, entityRouteRef, EntityRefLink } from '@backstage/plugin-catalog-react';
+import { Text, ButtonIcon, Button, Tabs, TabList, Tab, TabPanel } from '@backstage/ui';
+import { RiCloseLine, RiExternalLinkLine, RiDownloadLine, RiFileCopyLine } from '@remixicon/react';
+import { useState, useEffect, useMemo, Fragment as Fragment$1 } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { LifecycleBadge } from './ApiCard.esm.js';
+import { toApiDetailViewModel, specFileName } from './apiDetailViewModel.esm.js';
+import styles from './ApiDetailsDrawer.module.css.esm.js';
+
+function MetaRow({
+  label,
+  value,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: styles.metaRow, children: [
+    /* @__PURE__ */ jsx("dt", { className: styles.metaLabel, children: label }),
+    /* @__PURE__ */ jsx("dd", { className: styles.metaValue, children: children ?? value })
+  ] });
+}
+function OwnerValue({ vm }) {
+  if (vm.ownerRef) {
+    try {
+      parseEntityRef(vm.ownerRef, {
+        defaultKind: "group",
+        defaultNamespace: "default"
+      });
+      return /* @__PURE__ */ jsx(EntityRefLink, { entityRef: vm.ownerRef, defaultKind: "group" });
+    } catch {
+    }
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: vm.ownerLabel });
+}
+function SpecSection({
+  definition,
+  fileBaseName,
+  definitionHref
+}) {
+  const navigate = useNavigate();
+  const [copied, setCopied] = useState(false);
+  if (!definition.trim()) {
+    return /* @__PURE__ */ jsx(Text, { variant: "body-small", color: "secondary", as: "p", children: "No specification available for preview." });
+  }
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(definition);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  const handleDownload = () => {
+    const blob = new Blob([definition], { type: "text/plain;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    try {
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      anchor.download = specFileName(fileBaseName, definition);
+      anchor.click();
+    } finally {
+      URL.revokeObjectURL(url);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles.spec, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.specActions, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          variant: "secondary",
+          iconStart: /* @__PURE__ */ jsx(RiDownloadLine, {}),
+          onPress: handleDownload,
+          children: "Download"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          variant: "secondary",
+          iconStart: /* @__PURE__ */ jsx(RiFileCopyLine, {}),
+          onPress: handleCopy,
+          children: copied ? "Copied!" : "Copy"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Tabs,
+      {
+        selectedKey: "raw",
+        onSelectionChange: (key) => {
+          if (key === "openapi" && definitionHref) {
+            navigate(definitionHref);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxs(TabList, { "aria-label": "Specification format", className: styles.tabList, children: [
+            /* @__PURE__ */ jsx(Tab, { id: "openapi", isDisabled: !definitionHref, children: /* @__PURE__ */ jsxs("span", { className: styles.tabLabel, children: [
+              "OpenAPI ",
+              /* @__PURE__ */ jsx(RiExternalLinkLine, { "aria-hidden": true, size: 12 })
+            ] }) }),
+            /* @__PURE__ */ jsx(Tab, { id: "raw", children: "Raw" })
+          ] }),
+          /* @__PURE__ */ jsx(TabPanel, { id: "raw", children: /* @__PURE__ */ jsx("pre", { className: styles.code, children: /* @__PURE__ */ jsx("code", { children: definition }) }) })
+        ]
+      }
+    )
+  ] });
+}
+function ApiDetailsDrawerContent({
+  entity,
+  orgLabels,
+  onClose
+}) {
+  const catalogApi = useApi(catalogApiRef);
+  const entityRoute = useRouteRef(entityRouteRef);
+  const [component, setComponent] = useState();
+  const namespace = entity.metadata.namespace ?? "default";
+  const name = entity.metadata.name;
+  useEffect(() => {
+    let active = true;
+    catalogApi.getEntityByRef({ kind: "Component", namespace, name }).then((found) => {
+      if (active) {
+        setComponent(found ?? void 0);
+      }
+    }).catch(() => {
+      if (active) {
+        setComponent(void 0);
+      }
+    });
+    return () => {
+      active = false;
+    };
+  }, [catalogApi, namespace, name]);
+  const vm = useMemo(
+    () => toApiDetailViewModel(entity, component, orgLabels),
+    [entity, component, orgLabels]
+  );
+  const catalogHref = entityRoute ? entityRoute({
+    kind: vm.targetRef.kind.toLowerCase(),
+    namespace: vm.targetRef.namespace,
+    name: vm.targetRef.name
+  }) : void 0;
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    const id = requestAnimationFrame(() => setOpen(true));
+    return () => cancelAnimationFrame(id);
+  }, []);
+  useEffect(() => {
+    const onKey = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [onClose]);
+  const showDeployments = vm.runtimeOrgs.length > 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles.overlay,
+        "data-open": open,
+        onClick: onClose,
+        role: "presentation",
+        "aria-hidden": !open
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        className: styles.drawer,
+        "data-open": open,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": `${vm.name} API details`,
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: styles.header, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.headerText, children: [
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  variant: "title-small",
+                  weight: "bold",
+                  as: "h2",
+                  className: styles.title,
+                  children: vm.name
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: styles.badges, children: [
+                vm.version ? /* @__PURE__ */ jsx("span", { className: `${styles.badge} ${styles.badgeVersion}`, children: vm.version }) : null,
+                /* @__PURE__ */ jsx(LifecycleBadge, { kind: vm.badge.kind, label: vm.badge.label })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              ButtonIcon,
+              {
+                icon: /* @__PURE__ */ jsx(RiCloseLine, {}),
+                variant: "tertiary",
+                onPress: onClose,
+                "aria-label": "Close"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles.body, children: [
+            /* @__PURE__ */ jsxs("section", { className: styles.card, "aria-labelledby": "apigee-overview-title", children: [
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  id: "apigee-overview-title",
+                  variant: "title-x-small",
+                  weight: "bold",
+                  as: "h3",
+                  className: styles.cardTitle,
+                  children: "Overview"
+                }
+              ),
+              /* @__PURE__ */ jsxs("dl", { className: styles.metaList, children: [
+                /* @__PURE__ */ jsx(MetaRow, { label: "Title", value: vm.name }),
+                vm.description ? /* @__PURE__ */ jsx(MetaRow, { label: "Description", value: vm.description }) : null,
+                /* @__PURE__ */ jsx(MetaRow, { label: "Kind", value: vm.kind }),
+                vm.type ? /* @__PURE__ */ jsx(MetaRow, { label: "Type", value: vm.type }) : null,
+                vm.version ? /* @__PURE__ */ jsx(MetaRow, { label: "Version", value: vm.version }) : null,
+                /* @__PURE__ */ jsx(MetaRow, { label: "Lifecycle", value: vm.badge.label }),
+                /* @__PURE__ */ jsx(MetaRow, { label: "Owner", children: /* @__PURE__ */ jsx(OwnerValue, { vm }) }),
+                vm.department ? /* @__PURE__ */ jsx(MetaRow, { label: "Department", value: vm.department }) : null,
+                vm.tags.length > 0 ? /* @__PURE__ */ jsx(MetaRow, { label: "Tags", children: /* @__PURE__ */ jsx("div", { className: styles.tags, children: vm.tags.map((tag) => /* @__PURE__ */ jsx("span", { className: styles.tag, children: tag }, tag)) }) }) : null
+              ] }),
+              showDeployments ? /* @__PURE__ */ jsxs("div", { className: styles.deployments, children: [
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    variant: "body-small",
+                    weight: "bold",
+                    as: "h4",
+                    className: styles.deploymentsTitle,
+                    children: "Deployments"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("table", { className: styles.deploymentsTable, children: [
+                  /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                    /* @__PURE__ */ jsx("th", { scope: "col", children: "Org" }),
+                    /* @__PURE__ */ jsx("th", { scope: "col", children: "Environment" }),
+                    /* @__PURE__ */ jsx("th", { scope: "col", children: "Revision" })
+                  ] }) }),
+                  /* @__PURE__ */ jsx("tbody", { children: vm.runtimeOrgs.map((org) => /* @__PURE__ */ jsx(Fragment$1, { children: org.environments.length > 0 ? org.environments.map((env, index) => /* @__PURE__ */ jsxs("tr", { children: [
+                    index === 0 ? /* @__PURE__ */ jsx(
+                      "th",
+                      {
+                        scope: "rowgroup",
+                        rowSpan: org.environments.length,
+                        className: styles.orgCell,
+                        children: org.label
+                      }
+                    ) : null,
+                    /* @__PURE__ */ jsx("td", { children: env.name }),
+                    /* @__PURE__ */ jsx("td", { children: env.revision })
+                  ] }, env.name)) : /* @__PURE__ */ jsxs("tr", { children: [
+                    /* @__PURE__ */ jsx("th", { scope: "row", className: styles.orgCell, children: org.label }),
+                    /* @__PURE__ */ jsx("td", { colSpan: 2, className: styles.noDeployments, children: "No deployments" })
+                  ] }) }, org.value)) })
+                ] })
+              ] }) : null
+            ] }),
+            /* @__PURE__ */ jsxs("section", { className: styles.card, "aria-labelledby": "apigee-spec-title", children: [
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  id: "apigee-spec-title",
+                  variant: "title-x-small",
+                  weight: "bold",
+                  as: "h3",
+                  className: styles.cardTitle,
+                  children: "Specification"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SpecSection,
+                {
+                  definition: vm.definition,
+                  fileBaseName: vm.targetRef.name,
+                  definitionHref: catalogHref ? `${catalogHref}/definition` : void 0
+                }
+              )
+            ] }),
+            catalogHref || vm.sourceRepo ? /* @__PURE__ */ jsxs("section", { className: styles.card, "aria-labelledby": "apigee-links-title", children: [
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  id: "apigee-links-title",
+                  variant: "title-x-small",
+                  weight: "bold",
+                  as: "h3",
+                  className: styles.cardTitle,
+                  children: "Links"
+                }
+              ),
+              catalogHref ? /* @__PURE__ */ jsxs(Link, { to: catalogHref, className: styles.catalogLink, children: [
+                /* @__PURE__ */ jsx(RiExternalLinkLine, { "aria-hidden": true, size: 14 }),
+                " View in catalog"
+              ] }) : null,
+              vm.sourceRepo ? /* @__PURE__ */ jsxs(Link, { to: vm.sourceRepo.url, className: styles.sourceRepo, children: [
+                /* @__PURE__ */ jsx(RiExternalLinkLine, { "aria-hidden": true, size: 14 }),
+                " ",
+                vm.sourceRepo.title
+              ] }) : null
+            ] }) : null
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function ApiDetailsDrawer({
+  entity,
+  orgLabels,
+  onClose
+}) {
+  if (!entity) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    ApiDetailsDrawerContent,
+    {
+      entity,
+      orgLabels,
+      onClose
+    }
+  );
+}
+
+export { ApiDetailsDrawer };
+//# sourceMappingURL=ApiDetailsDrawer.esm.js.map