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

package/README.md

@@ -1,19 +1,19 @@
-# @nospt/backstage-plugin-apigee
-
-Frontend package for the bootstrap stage of the Backstage Apigee plugin.
-
-## Included
-
-- New Frontend System plugin registration
-- Placeholder page under `/apigee/bootstrap`
-- Shared permission exports from the common package
-
-## Development
-
-```bash
-cd plugins/apigee
-yarn start
-yarn test
-yarn lint
-yarn build
-```
+# @nospt/backstage-plugin-apigee
+
+Frontend package for the bootstrap stage of the Backstage Apigee plugin.
+
+## Included
+
+- New Frontend System plugin registration
+- Placeholder page under `/apigee/bootstrap`
+- Shared permission exports from the common package
+
+## Development
+
+```bash
+cd plugins/apigee
+yarn start
+yarn test
+yarn lint
+yarn build
+```

package/config.d.ts

@@ -1,25 +1,25 @@
-// SPDX-License-Identifier: Apache-2.0
-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`);
-       * values are user-facing labels (for example `Private`).
-       * Unmapped org IDs fall back to the default humanised label.
-       * @visibility frontend
-       */
-      orgLabels?: { [orgId: string]: string };
-    };
-  };
-}
+// SPDX-License-Identifier: Apache-2.0
+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`);
+       * values are user-facing labels (for example `Private`).
+       * Unmapped org IDs fall back to the default humanised label.
+       * @visibility frontend
+       */
+      orgLabels?: { [orgId: string]: string };
+    };
+  };
+}

package/dist/components/ApiCard.esm.js

@@ -1,84 +1,11 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Link, StatusOK, StatusError, StatusWarning } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/frontend-plugin-api';
 import { entityRouteRef } from '@backstage/plugin-catalog-react';
-import { CardContent, Typography, Tooltip, Card, CardActionArea, makeStyles } from '@material-ui/core';
-import DescriptionOutlined from '@material-ui/icons/DescriptionOutlined';
-import GroupOutlined from '@material-ui/icons/GroupOutlined';
+import { Text } from '@backstage/ui';
+import { RiTeamLine, RiFileTextLine } from '@remixicon/react';
+import styles from './ApiCard.module.css.esm.js';
 
-const useStyles = makeStyles((theme) => ({
-  card: {
-    height: "100%"
-  },
-  action: {
-    height: "100%",
-    minHeight: 172,
-    alignItems: "stretch",
-    transition: theme.transitions.create(["box-shadow"]),
-    "&:focus-visible": {
-      outline: `2px solid ${theme.palette.primary.main}`,
-      outlineOffset: 2
-    },
-    "&:hover": {
-      boxShadow: theme.shadows[4]
-    },
-    "@media (prefers-reduced-motion: reduce)": {
-      transition: "none"
-    }
-  },
-  content: {
-    display: "flex",
-    flexDirection: "column",
-    gap: theme.spacing(1),
-    height: "100%"
-  },
-  header: {
-    display: "flex",
-    alignItems: "flex-start",
-    gap: theme.spacing(1)
-  },
-  categoryIcon: {
-    color: theme.palette.text.secondary,
-    marginTop: 2
-  },
-  name: {
-    flex: 1,
-    display: "-webkit-box",
-    WebkitLineClamp: 2,
-    WebkitBoxOrient: "vertical",
-    overflow: "hidden",
-    wordBreak: "break-word"
-  },
-  meta: {
-    display: "flex",
-    alignItems: "center",
-    gap: theme.spacing(0.5),
-    color: theme.palette.text.secondary
-  },
-  metaIcon: {
-    fontSize: 16
-  },
-  version: {
-    marginLeft: "auto"
-  },
-  description: {
-    display: "-webkit-box",
-    WebkitLineClamp: 2,
-    WebkitBoxOrient: "vertical",
-    overflow: "hidden",
-    color: theme.palette.text.secondary
-  },
-  footer: {
-    marginTop: "auto",
-    display: "flex",
-    alignItems: "center",
-    gap: theme.spacing(1)
-  },
-  specIcon: {
-    display: "inline-flex",
-    color: theme.palette.text.secondary
-  }
-}));
 function LifecycleBadge({
   kind,
   label
@@ -92,26 +19,35 @@ function LifecycleBadge({
   return /* @__PURE__ */ jsx(StatusWarning, { children: label });
 }
 function ApiCard({ vm, icon: Icon }) {
-  const classes = useStyles();
   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(CardContent, { className: classes.content, children: [
-    /* @__PURE__ */ jsxs("div", { className: classes.header, children: [
-      Icon ? /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: classes.categoryIcon, fontSize: "small" }) : null,
-      /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", component: "h3", className: classes.name, children: vm.name }),
+  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(
+        Text,
+        {
+          variant: "body-medium",
+          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: classes.meta, children: [
-      /* @__PURE__ */ jsx(GroupOutlined, { "aria-hidden": true, className: classes.metaIcon }),
-      /* @__PURE__ */ jsx(Typography, { variant: "body2", component: "span", children: vm.ownerLabel }),
+    /* @__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(
-        Typography,
+        Text,
         {
-          variant: "body2",
-          component: "span",
-          className: classes.version,
+          variant: "body-small",
+          color: "secondary",
+          as: "span",
+          className: styles.version,
           children: [
             "v",
             vm.version
@@ -119,27 +55,28 @@ function ApiCard({ vm, icon: Icon }) {
         }
       ) : null
     ] }),
-    vm.description ? /* @__PURE__ */ jsx(Typography, { variant: "body2", className: classes.description, children: vm.description }) : null,
-    vm.hasSpec ? /* @__PURE__ */ jsx("div", { className: classes.footer, children: /* @__PURE__ */ jsx(Tooltip, { title: "OpenAPI spec available", children: /* @__PURE__ */ jsx(
+    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",
       {
         role: "img",
         "aria-label": "OpenAPI spec available",
-        className: classes.specIcon,
-        children: /* @__PURE__ */ jsx(DescriptionOutlined, { "aria-hidden": true, fontSize: "small" })
+        title: "OpenAPI spec available",
+        className: styles.specIcon,
+        children: /* @__PURE__ */ jsx(RiFileTextLine, { "aria-hidden": true, size: 16 })
       }
-    ) }) }) : null
+    ) }) : null
   ] });
-  return /* @__PURE__ */ jsx(Card, { className: classes.card, variant: "outlined", children: href ? /* @__PURE__ */ jsx(
-    CardActionArea,
-    {
-      component: Link,
-      to: href,
-      className: classes.action,
-      "aria-label": ariaLabel,
-      children: content
-    }
-  ) : /* @__PURE__ */ jsx(CardActionArea, { className: classes.action, "aria-label": ariaLabel, children: content }) });
+  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 }) });
 }
 
 export { ApiCard };

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\r\nimport {\r\n  Link,\r\n  StatusError,\r\n  StatusOK,\r\n  StatusWarning,\r\n} from '@backstage/core-components';\r\nimport { useRouteRef } from '@backstage/frontend-plugin-api';\r\nimport { entityRouteRef } from '@backstage/plugin-catalog-react';\r\nimport {\r\n  Card,\r\n  CardActionArea,\r\n  CardContent,\r\n  Tooltip,\r\n  Typography,\r\n  makeStyles,\r\n} from '@material-ui/core';\r\nimport DescriptionOutlined from '@material-ui/icons/DescriptionOutlined';\r\nimport GroupOutlined from '@material-ui/icons/GroupOutlined';\r\nimport type { SvgIconComponent } from '@material-ui/icons';\r\nimport type { ApiCardViewModel, LifecycleBadgeKind } from './apiCardViewModel';\r\n\r\nexport interface ApiCardProps {\r\n  vm: ApiCardViewModel;\r\n  /** Category icon resolved by the parent grid (05-05); decorative. */\r\n  icon?: SvgIconComponent;\r\n}\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  card: {\r\n    height: '100%',\r\n  },\r\n  action: {\r\n    height: '100%',\r\n    minHeight: 172,\r\n    alignItems: 'stretch',\r\n    transition: theme.transitions.create(['box-shadow']),\r\n    '&:focus-visible': {\r\n      outline: `2px solid ${theme.palette.primary.main}`,\r\n      outlineOffset: 2,\r\n    },\r\n    '&:hover': {\r\n      boxShadow: theme.shadows[4],\r\n    },\r\n    '@media (prefers-reduced-motion: reduce)': {\r\n      transition: 'none',\r\n    },\r\n  },\r\n  content: {\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    gap: theme.spacing(1),\r\n    height: '100%',\r\n  },\r\n  header: {\r\n    display: 'flex',\r\n    alignItems: 'flex-start',\r\n    gap: theme.spacing(1),\r\n  },\r\n  categoryIcon: {\r\n    color: theme.palette.text.secondary,\r\n    marginTop: 2,\r\n  },\r\n  name: {\r\n    flex: 1,\r\n    display: '-webkit-box',\r\n    WebkitLineClamp: 2,\r\n    WebkitBoxOrient: 'vertical',\r\n    overflow: 'hidden',\r\n    wordBreak: 'break-word',\r\n  },\r\n  meta: {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    gap: theme.spacing(0.5),\r\n    color: theme.palette.text.secondary,\r\n  },\r\n  metaIcon: {\r\n    fontSize: 16,\r\n  },\r\n  version: {\r\n    marginLeft: 'auto',\r\n  },\r\n  description: {\r\n    display: '-webkit-box',\r\n    WebkitLineClamp: 2,\r\n    WebkitBoxOrient: 'vertical',\r\n    overflow: 'hidden',\r\n    color: theme.palette.text.secondary,\r\n  },\r\n  footer: {\r\n    marginTop: 'auto',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    gap: theme.spacing(1),\r\n  },\r\n  specIcon: {\r\n    display: 'inline-flex',\r\n    color: theme.palette.text.secondary,\r\n  },\r\n}));\r\n\r\nfunction LifecycleBadge({\r\n  kind,\r\n  label,\r\n}: {\r\n  kind: LifecycleBadgeKind;\r\n  label: string;\r\n}) {\r\n  if (kind === 'ok') {\r\n    return <StatusOK>{label}</StatusOK>;\r\n  }\r\n  if (kind === 'error') {\r\n    return <StatusError>{label}</StatusError>;\r\n  }\r\n  return <StatusWarning>{label}</StatusWarning>;\r\n}\r\n\r\n/**\r\n * A single Apigee API tile. The whole card is one anchor-based control whose href is\r\n * resolved via `entityRouteRef` (never hardcoded — TR04); it degrades to a non-link\r\n * button when the route ref is unbound (dev harness). Entity text renders as React\r\n * children only — never via raw HTML injection (T-05-03). (UI-02, UI-03)\r\n */\r\nexport function ApiCard({ vm, icon: Icon }: ApiCardProps) {\r\n  const classes = useStyles();\r\n  const entityRoute = useRouteRef(entityRouteRef);\r\n  const { kind, namespace, name } = vm.targetRef;\r\n  const href = entityRoute ? entityRoute({ kind: kind.toLowerCase(), namespace, name }) : undefined;\r\n  const ariaLabel = `Open ${vm.name} API details`;\r\n\r\n  const content = (\r\n    <CardContent className={classes.content}>\r\n      <div className={classes.header}>\r\n        {Icon ? (\r\n          <Icon aria-hidden className={classes.categoryIcon} fontSize=\"small\" />\r\n        ) : null}\r\n        <Typography variant=\"subtitle1\" component=\"h3\" className={classes.name}>\r\n          {vm.name}\r\n        </Typography>\r\n        <LifecycleBadge kind={vm.badge.kind} label={vm.badge.label} />\r\n      </div>\r\n\r\n      <div className={classes.meta}>\r\n        <GroupOutlined aria-hidden className={classes.metaIcon} />\r\n        <Typography variant=\"body2\" component=\"span\">\r\n          {vm.ownerLabel}\r\n        </Typography>\r\n        {vm.version ? (\r\n          <Typography\r\n            variant=\"body2\"\r\n            component=\"span\"\r\n            className={classes.version}\r\n          >\r\n            v{vm.version}\r\n          </Typography>\r\n        ) : null}\r\n      </div>\r\n\r\n      {vm.description ? (\r\n        <Typography variant=\"body2\" className={classes.description}>\r\n          {vm.description}\r\n        </Typography>\r\n      ) : null}\r\n\r\n      {vm.hasSpec ? (\r\n        <div className={classes.footer}>\r\n          <Tooltip title=\"OpenAPI spec available\">\r\n            <span\r\n              role=\"img\"\r\n              aria-label=\"OpenAPI spec available\"\r\n              className={classes.specIcon}\r\n            >\r\n              <DescriptionOutlined aria-hidden fontSize=\"small\" />\r\n            </span>\r\n          </Tooltip>\r\n        </div>\r\n      ) : null}\r\n    </CardContent>\r\n  );\r\n\r\n  return (\r\n    <Card className={classes.card} variant=\"outlined\">\r\n      {href ? (\r\n        <CardActionArea\r\n          component={Link}\r\n          to={href}\r\n          className={classes.action}\r\n          aria-label={ariaLabel}\r\n        >\r\n          {content}\r\n        </CardActionArea>\r\n      ) : (\r\n        <CardActionArea className={classes.action} aria-label={ariaLabel}>\r\n          {content}\r\n        </CardActionArea>\r\n      )}\r\n    </Card>\r\n  );\r\n}\r\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 {\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":";;;;;;;;AAwBA,SAAS,cAAA,CAAe;AAAA,EACtB,IAAA;AAAA,EACA;AACF,CAAA,EAGG;AACD,EAAA,IAAI,SAAS,IAAA,EAAM;AACjB,IAAA,uBAAO,GAAA,CAAC,YAAU,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,EAC1B;AACA,EAAA,IAAI,SAAS,OAAA,EAAS;AACpB,IAAA,uBAAO,GAAA,CAAC,eAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,EAC7B;AACA,EAAA,uBAAO,GAAA,CAAC,iBAAe,QAAA,EAAA,KAAA,EAAM,CAAA;AAC/B;AAQO,SAAS,OAAA,CAAQ,EAAE,EAAA,EAAI,IAAA,EAAM,MAAK,EAAiB;AACxD,EAAA,MAAM,WAAA,GAAc,YAAY,cAAc,CAAA;AAC9C,EAAA,MAAM,EAAE,IAAA,EAAM,SAAA,EAAW,IAAA,KAAS,EAAA,CAAG,SAAA;AACrC,EAAA,MAAM,IAAA,GAAO,WAAA,GACT,WAAA,CAAY,EAAE,IAAA,EAAM,IAAA,CAAK,WAAA,EAAY,EAAG,SAAA,EAAW,IAAA,EAAM,CAAA,GACzD,MAAA;AACJ,EAAA,MAAM,SAAA,GAAY,CAAA,KAAA,EAAQ,EAAA,CAAG,IAAI,CAAA,YAAA,CAAA;AAEjC,EAAA,MAAM,0BACJ,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,MAAA,EACpB,QAAA,EAAA;AAAA,MAAA,IAAA,mBACC,GAAA,CAAC,QAAK,aAAA,EAAW,IAAA,EAAC,WAAW,MAAA,CAAO,YAAA,EAAc,IAAA,EAAM,EAAA,EAAI,CAAA,GAC1D,IAAA;AAAA,sBACJ,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,aAAA;AAAA,UACR,MAAA,EAAO,MAAA;AAAA,UACP,EAAA,EAAG,IAAA;AAAA,UACH,WAAW,MAAA,CAAO,IAAA;AAAA,UAEjB,QAAA,EAAA,EAAA,CAAG;AAAA;AAAA,OACN;AAAA,sBACA,GAAA,CAAC,kBAAe,IAAA,EAAM,EAAA,CAAG,MAAM,IAAA,EAAM,KAAA,EAAO,EAAA,CAAG,KAAA,CAAM,KAAA,EAAO;AAAA,KAAA,EAC9D,CAAA;AAAA,oBAEA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,IAAA,EACrB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,aAAA,EAAW,IAAA,EAAC,IAAA,EAAM,EAAA,EAAI,CAAA;AAAA,sBAClC,GAAA,CAAC,QAAK,OAAA,EAAQ,YAAA,EAAa,OAAM,WAAA,EAAY,EAAA,EAAG,MAAA,EAC7C,QAAA,EAAA,EAAA,CAAG,UAAA,EACN,CAAA;AAAA,MACC,GAAG,OAAA,mBACF,IAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,YAAA;AAAA,UACR,KAAA,EAAM,WAAA;AAAA,UACN,EAAA,EAAG,MAAA;AAAA,UACH,WAAW,MAAA,CAAO,OAAA;AAAA,UACnB,QAAA,EAAA;AAAA,YAAA,GAAA;AAAA,YACG,EAAA,CAAG;AAAA;AAAA;AAAA,OACP,GACE;AAAA,KAAA,EACN,CAAA;AAAA,IAEC,GAAG,WAAA,mBACF,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,YAAA;AAAA,QACR,KAAA,EAAM,WAAA;AAAA,QACN,EAAA,EAAG,GAAA;AAAA,QACH,WAAW,MAAA,CAAO,WAAA;AAAA,QAEjB,QAAA,EAAA,EAAA,CAAG;AAAA;AAAA,KACN,GACE,IAAA;AAAA,IAEH,GAAG,OAAA,mBACF,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,MAAA,EACrB,QAAA,kBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,KAAA;AAAA,QACL,YAAA,EAAW,wBAAA;AAAA,QACX,KAAA,EAAM,wBAAA;AAAA,QACN,WAAW,MAAA,CAAO,QAAA;AAAA,QAElB,QAAA,kBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,aAAA,EAAW,IAAA,EAAC,MAAM,EAAA,EAAI;AAAA;AAAA,OAE1C,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAGF,EAAA,uBACE,GAAA,CAAC,SAAI,SAAA,EAAW,MAAA,CAAO,MACpB,QAAA,EAAA,IAAA,mBACC,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAI,IAAA,EAAM,SAAA,EAAW,OAAO,MAAA,EAAQ,YAAA,EAAY,SAAA,EACnD,QAAA,EAAA,OAAA,EACH,CAAA,mBAEA,GAAA,CAAC,SAAI,SAAA,EAAW,MAAA,CAAO,MAAA,EAAS,QAAA,EAAA,OAAA,EAAQ,CAAA,EAE5C,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,8 @@
+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"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=ApiCard.module.css.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApiCard.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/ApiCardGrid.esm.js

@@ -1,26 +1,12 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { ItemCardGrid } from '@backstage/core-components';
-import { Typography, Chip, makeStyles } from '@material-ui/core';
+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';
 
-const useStyles = makeStyles((theme) => ({
-  section: {
-    marginBottom: theme.spacing(4)
-  },
-  sectionHeader: {
-    display: "flex",
-    alignItems: "center",
-    gap: theme.spacing(1),
-    marginBottom: theme.spacing(2)
-  },
-  sectionIcon: {
-    color: theme.palette.text.secondary
-  }
-}));
 function ApiCardGrid({ vms, viewMode, overrides }) {
-  const classes = useStyles();
   if (viewMode === "flat") {
     return /* @__PURE__ */ jsx(ItemCardGrid, { children: vms.map((vm) => /* @__PURE__ */ jsx(
       ApiCard,
@@ -34,11 +20,11 @@ function ApiCardGrid({ vms, viewMode, overrides }) {
   const groups = groupByCategory(vms);
   return /* @__PURE__ */ jsx(Fragment, { children: groups.map((group) => {
     const SectionIcon = resolveCategoryIcon(group.key, overrides);
-    return /* @__PURE__ */ jsxs("section", { className: classes.section, children: [
-      /* @__PURE__ */ jsxs("div", { className: classes.sectionHeader, children: [
-        /* @__PURE__ */ jsx(SectionIcon, { "aria-hidden": true, className: classes.sectionIcon }),
-        /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "h2", children: group.label }),
-        /* @__PURE__ */ jsx(Chip, { size: "small", label: group.items.length })
+    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,

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\r\nimport { ItemCardGrid } from '@backstage/core-components';\r\nimport { Chip, Typography, makeStyles } from '@material-ui/core';\r\nimport { ApiCard } from './ApiCard';\r\nimport type { ApiCardViewModel } from './apiCardViewModel';\r\nimport { resolveCategoryIcon } from './categoryIcons';\r\nimport { groupByCategory } from './grouping';\r\n\r\nexport type ViewMode = 'flat' | 'grouped';\r\n\r\nexport interface ApiCardGridProps {\r\n  vms: ApiCardViewModel[];\r\n  viewMode: ViewMode;\r\n  /** Raw `apigee.catalog.categoryIcons` override map (slug -> IconKey string). */\r\n  overrides?: Record<string, string>;\r\n}\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  section: {\r\n    marginBottom: theme.spacing(4),\r\n  },\r\n  sectionHeader: {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    gap: theme.spacing(1),\r\n    marginBottom: theme.spacing(2),\r\n  },\r\n  sectionIcon: {\r\n    color: theme.palette.text.secondary,\r\n  },\r\n}));\r\n\r\n/**\r\n * Presentational grid of `ApiCard` tiles. In `flat` mode a single responsive grid; in\r\n * `grouped` mode one section per category (icon + label + count chip) with the \"Other\"\r\n * bucket last (ordering enforced by `groupByCategory`). No data fetching. (UI-01, UI-11)\r\n */\r\nexport function ApiCardGrid({ vms, viewMode, overrides }: ApiCardGridProps) {\r\n  const classes = useStyles();\r\n\r\n  if (viewMode === 'flat') {\r\n    return (\r\n      <ItemCardGrid>\r\n        {vms.map(vm => (\r\n          <ApiCard\r\n            key={vm.targetRef.name}\r\n            vm={vm}\r\n            icon={resolveCategoryIcon(vm.category, overrides)}\r\n          />\r\n        ))}\r\n      </ItemCardGrid>\r\n    );\r\n  }\r\n\r\n  const groups = groupByCategory(vms);\r\n  return (\r\n    <>\r\n      {groups.map(group => {\r\n        const SectionIcon = resolveCategoryIcon(group.key, overrides);\r\n        return (\r\n          <section key={group.key} className={classes.section}>\r\n            <div className={classes.sectionHeader}>\r\n              <SectionIcon aria-hidden className={classes.sectionIcon} />\r\n              <Typography variant=\"h5\" component=\"h2\">\r\n                {group.label}\r\n              </Typography>\r\n              <Chip size=\"small\" label={group.items.length} />\r\n            </div>\r\n            <ItemCardGrid>\r\n              {group.items.map(vm => (\r\n                <ApiCard\r\n                  key={vm.targetRef.name}\r\n                  vm={vm}\r\n                  icon={resolveCategoryIcon(vm.category, overrides)}\r\n                />\r\n              ))}\r\n            </ItemCardGrid>\r\n          </section>\r\n        );\r\n      })}\r\n    </>\r\n  );\r\n}\r\n"],"names":[],"mappings":";;;;;;;AAiBA,MAAM,SAAA,GAAY,WAAW,CAAA,KAAA,MAAU;AAAA,EACrC,OAAA,EAAS;AAAA,IACP,YAAA,EAAc,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA,GAC/B;AAAA,EACA,aAAA,EAAe;AAAA,IACb,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IACpB,YAAA,EAAc,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA,GAC/B;AAAA,EACA,WAAA,EAAa;AAAA,IACX,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK;AAAA;AAE9B,CAAA,CAAE,CAAA;AAOK,SAAS,WAAA,CAAY,EAAE,GAAA,EAAK,QAAA,EAAU,WAAU,EAAqB;AAC1E,EAAA,MAAM,UAAU,SAAA,EAAU;AAE1B,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,OAAA,CAAQ,OAAA,EAC1C,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,aAAA,EACtB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,aAAA,EAAW,IAAA,EAAC,SAAA,EAAW,QAAQ,WAAA,EAAa,CAAA;AAAA,4BACxD,UAAA,EAAA,EAAW,OAAA,EAAQ,MAAK,SAAA,EAAU,IAAA,EAChC,gBAAM,KAAA,EACT,CAAA;AAAA,4BACC,IAAA,EAAA,EAAK,IAAA,EAAK,SAAQ,KAAA,EAAO,KAAA,CAAM,MAAM,MAAA,EAAQ;AAAA,OAAA,EAChD,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 { 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;;;;"}

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

@@ -0,0 +1,8 @@
+import styleInject from '../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = ".ApiCardGrid_section__f119e0fd3b {\n  margin-bottom: var(--bui-space-8);\n}\n\n.ApiCardGrid_sectionHeader__f119e0fd3b {\n  display: flex;\n  align-items: center;\n  gap: var(--bui-space-2);\n  margin-bottom: var(--bui-space-4);\n}\n\n.ApiCardGrid_sectionIcon__f119e0fd3b {\n  color: var(--bui-fg-secondary);\n}\n\n.ApiCardGrid_count__f119e0fd3b {\n  display: inline-flex;\n  align-items: center;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 var(--bui-space-2);\n  border-radius: var(--bui-radius-full);\n  background-color: var(--bui-bg-neutral-2);\n  color: var(--bui-fg-secondary);\n  font-size: var(--bui-font-size-2);\n  font-variant-numeric: tabular-nums;\n}\n";
+var styles = {"section":"ApiCardGrid_section__f119e0fd3b","sectionHeader":"ApiCardGrid_sectionHeader__f119e0fd3b","sectionIcon":"ApiCardGrid_sectionIcon__f119e0fd3b","count":"ApiCardGrid_count__f119e0fd3b"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=ApiCardGrid.module.css.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApiCardGrid.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/ApigeeApiCatalogPage.esm.js

@@ -1,27 +1,22 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Page, Header, Content, ContentHeader } from '@backstage/core-components';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Page, Content, ContentHeader } from '@backstage/core-components';
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
 import { EntityListProvider, useEntityList } from '@backstage/plugin-catalog-react';
-import { ButtonGroup, Button, makeStyles } from '@material-ui/core';
-import ViewAgenda from '@material-ui/icons/ViewAgenda';
-import ViewModule from '@material-ui/icons/ViewModule';
+import { ToggleButton } from '@backstage/ui';
+import { RiLayoutGridLine, RiLayoutRowLine } from '@remixicon/react';
 import { useEffect, useMemo, useState } from 'react';
 import { toApiCardViewModel } from './apiCardViewModel.esm.js';
 import { ApiCardGrid } from './ApiCardGrid.esm.js';
 import { ApiKindFilter, isApigeeEntity } from './apigeeFacetFilters.esm.js';
 import { ApigeeOrgFilter } from './apigeeOrgFilter.esm.js';
 import { isActive } from './apigeeSearchParams.esm.js';
-import { deriveFacets } from './facetModel.esm.js';
+import { CountCards } from './CountCards.esm.js';
+import { deriveFacets, deriveCounts } from './facetModel.esm.js';
 import { FilterToolbar } from './FilterToolbar.esm.js';
 import { SearchBar } from './SearchBar.esm.js';
 import { ApiCatalogError, SkeletonGrid, NoMatchState, ApiCatalogEmptyState } from './states.esm.js';
 import { useApigeeFilters } from './useApigeeFilters.esm.js';
 
-const useStyles = makeStyles({
-  toggleGroup: {
-    marginLeft: "auto"
-  }
-});
 function ApplyApigeeFilters() {
   const { updateFilters } = useEntityList();
   useEffect(() => {
@@ -33,9 +28,16 @@ function ApplyApigeeFilters() {
   return null;
 }
 function ApigeeCatalogContent() {
-  const classes = useStyles();
   const { entities, backendEntities, loading, error } = useEntityList();
-  const { state, inputValue, setInputValue, toggleFacet, clearFacet, clearAll } = useApigeeFilters();
+  const {
+    state,
+    inputValue,
+    setInputValue,
+    toggleFacet,
+    selectOnlyFacet,
+    clearFacet,
+    clearAll
+  } = useApigeeFilters();
   const configApi = useApi(configApiRef);
   const overrides = useMemo(() => {
     const config = configApi.getOptionalConfig("apigee.catalog.categoryIcons");
@@ -65,10 +67,18 @@ function ApigeeCatalogContent() {
     }
     return Object.keys(out).length > 0 ? out : void 0;
   }, [configApi]);
+  const apigeeEntities = useMemo(
+    () => backendEntities.filter(isApigeeEntity),
+    [backendEntities]
+  );
   const vms = useMemo(() => entities.map(toApiCardViewModel), [entities]);
   const facets = useMemo(
-    () => deriveFacets(backendEntities.filter(isApigeeEntity), overrides, orgLabels),
-    [backendEntities, overrides, orgLabels]
+    () => deriveFacets(apigeeEntities, overrides, orgLabels),
+    [apigeeEntities, overrides, orgLabels]
+  );
+  const counts = useMemo(
+    () => deriveCounts(apigeeEntities, ["org", "lifecycle", "department"], orgLabels),
+    [apigeeEntities, orgLabels]
   );
   const active = isActive(state);
   const [viewMode, setViewMode] = useState("flat");
@@ -84,48 +94,52 @@ function ApigeeCatalogContent() {
     }
     return /* @__PURE__ */ jsx(ApiCardGrid, { vms, viewMode, overrides });
   };
-  return /* @__PURE__ */ jsxs(Page, { themeId: "apis", children: [
-    /* @__PURE__ */ jsx(
-      Header,
+  return /* @__PURE__ */ jsx(Page, { themeId: "apis", children: /* @__PURE__ */ jsxs(Content, { children: [
+    /* @__PURE__ */ jsx(ContentHeader, { title: "APIs", children: /* @__PURE__ */ jsxs(
+      "div",
       {
-        title: "API Catalog",
-        subtitle: "Browse APIs discovered from Apigee & API Hub"
+        role: "group",
+        "aria-label": "API view mode",
+        style: {
+          marginLeft: "auto",
+          display: "inline-flex",
+          gap: "var(--bui-space-1)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            ToggleButton,
+            {
+              "aria-label": "Flat grid view",
+              isSelected: viewMode === "flat",
+              onChange: () => setViewMode("flat"),
+              iconStart: /* @__PURE__ */ jsx(RiLayoutGridLine, {}),
+              children: "Flat"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToggleButton,
+            {
+              "aria-label": "Group by category",
+              isSelected: viewMode === "grouped",
+              onChange: () => setViewMode("grouped"),
+              iconStart: /* @__PURE__ */ jsx(RiLayoutRowLine, {}),
+              children: "Grouped"
+            }
+          )
+        ]
       }
-    ),
-    /* @__PURE__ */ jsxs(Content, { children: [
-      /* @__PURE__ */ jsx(ContentHeader, { title: `${vms.length} APIs`, children: /* @__PURE__ */ jsx(
-        "div",
+    ) }),
+    !loading && !error && apigeeEntities.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        CountCards,
         {
-          role: "group",
-          "aria-label": "API view mode",
-          className: classes.toggleGroup,
-          children: /* @__PURE__ */ jsxs(ButtonGroup, { size: "small", children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                startIcon: /* @__PURE__ */ jsx(ViewModule, {}),
-                "aria-label": "Flat grid view",
-                "aria-pressed": viewMode === "flat",
-                color: viewMode === "flat" ? "primary" : "default",
-                onClick: () => setViewMode("flat"),
-                children: "Flat"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                startIcon: /* @__PURE__ */ jsx(ViewAgenda, {}),
-                "aria-label": "Group by category",
-                "aria-pressed": viewMode === "grouped",
-                color: viewMode === "grouped" ? "primary" : "default",
-                onClick: () => setViewMode("grouped"),
-                children: "Grouped"
-              }
-            )
-          ] })
+          total: apigeeEntities.length,
+          counts,
+          selected: state.selected,
+          onSelectFacet: selectOnlyFacet
         }
-      ) }),
-      !loading && !error && backendEntities.filter(isApigeeEntity).length > 0 ? /* @__PURE__ */ jsx(
+      ),
+      /* @__PURE__ */ jsx(
         FilterToolbar,
         {
           facets,
@@ -137,10 +151,10 @@ function ApigeeCatalogContent() {
           resultCount: vms.length,
           searchBar: /* @__PURE__ */ jsx(SearchBar, { value: inputValue, onChange: setInputValue })
         }
-      ) : null,
-      renderBody()
-    ] })
-  ] });
+      )
+    ] }) : null,
+    renderBody()
+  ] }) });
 }
 function ApigeeApiCatalogPage() {
   return /* @__PURE__ */ jsxs(EntityListProvider, { children: [