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

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,146 +1,88 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Link, StatusOK, StatusError, StatusWarning } from '@backstage/core-components';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Link } 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 { RiGlobalLine, RiLockLine, RiTeamLine, RiBuildingLine, 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
-  }
-}));
+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 }) {
-  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 }),
-      /* @__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 }),
-      vm.version ? /* @__PURE__ */ jsxs(
-        Typography,
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.titleRow, 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__ */ 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: "body2",
-          component: "span",
-          className: classes.version,
-          children: [
-            "v",
-            vm.version
-          ]
+          variant: "body-small",
+          color: "secondary",
+          as: "p",
+          className: styles.description,
+          children: vm.description
         }
       ) : 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(
-      "span",
-      {
-        role: "img",
-        "aria-label": "OpenAPI spec available",
-        className: classes.specIcon,
-        children: /* @__PURE__ */ jsx(DescriptionOutlined, { "aria-hidden": true, fontSize: "small" })
-      }
-    ) }) }) : null
+    /* @__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 })
+    ] })
   ] });
-  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 };
+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\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 { 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  /** Category icon resolved by the parent grid (05-05); decorative. */\n  icon?: RemixiconComponentType;\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, 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        <div className={styles.titleRow}>\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        </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  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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"}

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__3afe92d8c5 {\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__3afe92d8c5:hover {\n  box-shadow: var(--bui-shadow);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ApiCard_card__3afe92d8c5 {\n    transition: none;\n  }\n}\n\n.ApiCard_action__3afe92d8c5 {\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__3afe92d8c5:focus-visible {\n  outline: 2px solid var(--bui-ring);\n  outline-offset: 2px;\n}\n\n.ApiCard_header__3afe92d8c5 {\n  display: flex;\n  flex-direction: column;\n  gap: var(--bui-space-2);\n}\n\n.ApiCard_titleRow__3afe92d8c5 {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--bui-space-2);\n}\n\n.ApiCard_categoryIcon__3afe92d8c5 {\n  margin-top: 2px;\n  color: var(--bui-fg-secondary);\n}\n\n.ApiCard_name__3afe92d8c5 {\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__3afe92d8c5 {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--bui-space-1);\n}\n\n.ApiCard_badge__3afe92d8c5 {\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__3afe92d8c5 {\n  background-color: var(--bui-bg-success);\n  color: var(--bui-fg-success-on-bg);\n}\n\n.ApiCard_badgeWarning__3afe92d8c5 {\n  background-color: var(--bui-bg-warning);\n  color: var(--bui-fg-warning-on-bg);\n}\n\n.ApiCard_badgeError__3afe92d8c5 {\n  background-color: var(--bui-bg-danger);\n  color: var(--bui-fg-danger-on-bg);\n}\n\n.ApiCard_badgeVersion__3afe92d8c5 {\n  background-color: var(--bui-bg-info);\n  color: var(--bui-fg-info-on-bg);\n  text-transform: none;\n}\n\n.ApiCard_body__3afe92d8c5 {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--bui-space-4);\n}\n\n.ApiCard_leftCol__3afe92d8c5,\n.ApiCard_rightCol__3afe92d8c5 {\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__3afe92d8c5 {\n  color: var(--bui-fg-secondary);\n}\n\n.ApiCard_metaItem__3afe92d8c5 {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--bui-space-1);\n}\n\n.ApiCard_description__3afe92d8c5 {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n";
+var styles = {"card":"ApiCard_card__3afe92d8c5","action":"ApiCard_action__3afe92d8c5","header":"ApiCard_header__3afe92d8c5","titleRow":"ApiCard_titleRow__3afe92d8c5","categoryIcon":"ApiCard_categoryIcon__3afe92d8c5","name":"ApiCard_name__3afe92d8c5","badges":"ApiCard_badges__3afe92d8c5","badge":"ApiCard_badge__3afe92d8c5","badgeOk":"ApiCard_badgeOk__3afe92d8c5","badgeWarning":"ApiCard_badgeWarning__3afe92d8c5","badgeError":"ApiCard_badgeError__3afe92d8c5","badgeVersion":"ApiCard_badgeVersion__3afe92d8c5","body":"ApiCard_body__3afe92d8c5","leftCol":"ApiCard_leftCol__3afe92d8c5","rightCol":"ApiCard_rightCol__3afe92d8c5","metaItem":"ApiCard_metaItem__3afe92d8c5","description":"ApiCard_description__3afe92d8c5"};
+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,55 +1,21 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { ItemCardGrid } from '@backstage/core-components';
-import { Typography, Chip, makeStyles } from '@material-ui/core';
 import { ApiCard } from './ApiCard.esm.js';
+import { ApiTable } from './ApiTable.esm.js';
 import { resolveCategoryIcon } from './categoryIcons.esm.js';
-import { groupByCategory } from './grouping.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,
-      {
-        vm,
-        icon: resolveCategoryIcon(vm.category, overrides)
-      },
-      vm.targetRef.name
-    )) });
+  if (viewMode === "list") {
+    return /* @__PURE__ */ jsx(ApiTable, { vms });
   }
-  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 })
-      ] }),
-      /* @__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,
+      icon: resolveCategoryIcon(vm.category, overrides)
+    },
+    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\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 { ApiCard } from './ApiCard';\nimport { ApiTable } from './ApiTable';\nimport type { ApiCardViewModel } from './apiCardViewModel';\nimport { resolveCategoryIcon } from './categoryIcons';\n\nexport type ViewMode = 'flat' | 'list';\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 * `list` mode a table. No data fetching. (UI-01, UI-11)\n */\nexport function ApiCardGrid({ vms, viewMode, overrides }: ApiCardGridProps) {\n  if (viewMode === 'list') {\n    return <ApiTable vms={vms} />;\n  }\n\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"],"names":[],"mappings":";;;;;;AAoBO,SAAS,WAAA,CAAY,EAAE,GAAA,EAAK,QAAA,EAAU,WAAU,EAAqB;AAC1E,EAAA,IAAI,aAAa,MAAA,EAAQ;AACvB,IAAA,uBAAO,GAAA,CAAC,YAAS,GAAA,EAAU,CAAA;AAAA,EAC7B;AAEA,EAAA,uBACE,GAAA,CAAC,YAAA,EAAA,EACE,QAAA,EAAA,GAAA,CAAI,GAAA,CAAI,CAAA,EAAA,qBACP,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MAEC,EAAA;AAAA,MACA,IAAA,EAAM,mBAAA,CAAoB,EAAA,CAAG,QAAA,EAAU,SAAS;AAAA,KAAA;AAAA,IAF3C,GAAG,SAAA,CAAU;AAAA,GAIrB,CAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/components/ApiTable.esm.js

@@ -0,0 +1,162 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Link } from '@backstage/core-components';
+import { useRouteRef } from '@backstage/frontend-plugin-api';
+import { entityRouteRef } from '@backstage/plugin-catalog-react';
+import { RiFileTextLine, RiArrowUpSLine, RiArrowDownSLine, RiArrowUpDownLine } from '@remixicon/react';
+import { useState, useMemo } from 'react';
+import { LifecycleBadge, VISIBILITY_ICON } from './ApiCard.esm.js';
+import styles from './ApiTable.module.css.esm.js';
+
+function sortValue(vm, key) {
+  switch (key) {
+    case "name":
+      return vm.name;
+    case "lifecycle":
+      return vm.badge.label;
+    case "version":
+      return vm.version ?? "";
+    case "owner":
+      return vm.ownerLabel;
+    case "department":
+      return vm.department ?? "";
+    case "orgs":
+      return vm.visibilities.join(", ");
+    default:
+      return "";
+  }
+}
+function SortableHeader({
+  label,
+  sortKey,
+  sort,
+  onSort
+}) {
+  const activeSort = sort && sort.key === sortKey ? sort : null;
+  const ariaSort = activeSort ? activeSort.dir === "asc" ? "ascending" : "descending" : "none";
+  const Icon = activeSort ? activeSort.dir === "asc" ? RiArrowUpSLine : RiArrowDownSLine : RiArrowUpDownLine;
+  return /* @__PURE__ */ jsx("th", { scope: "col", "aria-sort": ariaSort, children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: styles.sortButton,
+      onClick: () => onSort(sortKey),
+      children: [
+        label,
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            "aria-hidden": true,
+            size: 14,
+            className: activeSort ? styles.sortIcon : styles.sortIconIdle
+          }
+        )
+      ]
+    }
+  ) });
+}
+function ApiTable({ vms }) {
+  const entityRoute = useRouteRef(entityRouteRef);
+  const [sort, setSort] = useState(null);
+  const handleSort = (key) => setSort(
+    (prev) => prev?.key === key ? { key, dir: prev.dir === "asc" ? "desc" : "asc" } : { key, dir: "asc" }
+  );
+  const sortedVms = useMemo(() => {
+    if (!sort) {
+      return vms;
+    }
+    const dir = sort.dir === "asc" ? 1 : -1;
+    return [...vms].sort(
+      (a, b) => dir * sortValue(a, sort.key).localeCompare(sortValue(b, sort.key))
+    );
+  }, [vms, sort]);
+  return /* @__PURE__ */ jsx("div", { className: styles.tableWrap, children: /* @__PURE__ */ jsxs("table", { className: styles.table, children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx(
+        SortableHeader,
+        {
+          label: "Name",
+          sortKey: "name",
+          sort,
+          onSort: handleSort
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SortableHeader,
+        {
+          label: "Lifecycle",
+          sortKey: "lifecycle",
+          sort,
+          onSort: handleSort
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SortableHeader,
+        {
+          label: "Version",
+          sortKey: "version",
+          sort,
+          onSort: handleSort
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SortableHeader,
+        {
+          label: "Owner",
+          sortKey: "owner",
+          sort,
+          onSort: handleSort
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SortableHeader,
+        {
+          label: "Department",
+          sortKey: "department",
+          sort,
+          onSort: handleSort
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SortableHeader,
+        {
+          label: "Orgs",
+          sortKey: "orgs",
+          sort,
+          onSort: handleSort
+        }
+      ),
+      /* @__PURE__ */ jsx("th", { scope: "col", children: "Spec" })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: sortedVms.map((vm) => {
+      const { kind, namespace, name } = vm.targetRef;
+      const href = entityRoute ? entityRoute({ kind: kind.toLowerCase(), namespace, name }) : void 0;
+      return /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("td", { className: styles.nameCell, children: href ? /* @__PURE__ */ jsx(Link, { to: href, className: styles.nameLink, children: vm.name }) : vm.name }),
+        /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(LifecycleBadge, { kind: vm.badge.kind, label: vm.badge.label }) }),
+        /* @__PURE__ */ jsx("td", { children: vm.version ?? "\u2014" }),
+        /* @__PURE__ */ jsx("td", { children: vm.ownerLabel }),
+        /* @__PURE__ */ jsx("td", { children: vm.department ?? "\u2014" }),
+        /* @__PURE__ */ jsx("td", { children: vm.visibilities.length > 0 ? /* @__PURE__ */ jsx("span", { className: styles.orgs, children: vm.visibilities.map((visibility) => {
+          const VisibilityIcon = VISIBILITY_ICON[visibility];
+          return /* @__PURE__ */ jsxs("span", { className: styles.org, children: [
+            /* @__PURE__ */ jsx(VisibilityIcon, { "aria-hidden": true, size: 14 }),
+            visibility
+          ] }, visibility);
+        }) }) : "\u2014" }),
+        /* @__PURE__ */ jsx("td", { children: vm.hasSpec ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            role: "img",
+            "aria-label": "OpenAPI spec available",
+            title: "OpenAPI spec available",
+            className: styles.specIcon,
+            children: /* @__PURE__ */ jsx(RiFileTextLine, { "aria-hidden": true, size: 16 })
+          }
+        ) : "\u2014" })
+      ] }, vm.targetRef.name);
+    }) })
+  ] }) });
+}
+
+export { ApiTable };
+//# sourceMappingURL=ApiTable.esm.js.map