@massdriver/backstage-plugin 1.0.0

package/dist/features/environment/InstanceDrawer/tabs/MonitorTab.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonitorTab.esm.js","sources":["../../../../../src/features/environment/InstanceDrawer/tabs/MonitorTab.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport Box from '@massdriver/ui/Box';\nimport Typography from '@massdriver/ui/Typography';\nimport { HelpIconButton } from '@massdriver/ui/IconButton';\nimport NotificationsIcon from '@massdriver/ui/icons/NotificationsIcon';\nimport stylin from '@massdriver/ui/stylin';\nimport { TabState } from '../TabState';\nimport AlarmCard from '../AlarmCard';\nimport { ALARMS_QUERY } from '../queries';\nimport { useInstanceApiQuery } from '../useInstanceApiQuery';\nimport { ALARMS_DOCS_URL, bucketAlarms } from '../helpers';\nimport type { Alarm } from '../types';\n\n/** Read-only Monitor tab: firing + configured alarms. */\nexport const MonitorTab = ({ instanceId }: { instanceId: string | null }) => {\n  const { value, loading, error } = useInstanceApiQuery<{\n    instance: {\n      id: string;\n      alarms?: { items?: (Alarm | null)[] | null };\n    } | null;\n  }>(ALARMS_QUERY, instanceId);\n\n  const buckets = useMemo(\n    () => bucketAlarms(value?.instance?.alarms?.items),\n    [value?.instance?.alarms],\n  );\n  const alarms = [...buckets.firing, ...buckets.configured];\n\n  return (\n    <TabState loading={loading} error={error}>\n      <Root>\n        <HeaderRow>\n          <TitleRow>\n            <Title>Alarms</Title>\n            <AlarmsHelp\n              href={ALARMS_DOCS_URL}\n              tooltip=\"Learn about alarms\"\n              size=\"small\"\n            />\n          </TitleRow>\n          {buckets.total > 0 ? (\n            <CountChip>\n              {buckets.firing.length > 0 ? (\n                <>\n                  <FiringCount>{buckets.firing.length} firing</FiringCount>\n                  <Separator>•</Separator>\n                </>\n              ) : null}\n              <TotalCount>{buckets.total} total</TotalCount>\n            </CountChip>\n          ) : null}\n        </HeaderRow>\n        {buckets.total === 0 ? (\n          <Empty>\n            <IconCircle>\n              <NotificationsIcon />\n            </IconCircle>\n            <EmptyTitle variant=\"body2\">No alarms configured</EmptyTitle>\n            <EmptyDescription variant=\"caption\">\n              Alarms appear here once your bundle provisions monitoring\n              resources.\n            </EmptyDescription>\n            <DocsLink\n              href={ALARMS_DOCS_URL}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              Learn about alarms\n            </DocsLink>\n          </Empty>\n        ) : (\n          <List>\n            {alarms.map(alarm => (\n              <AlarmCard key={alarm.id} alarm={alarm} />\n            ))}\n          </List>\n        )}\n      </Root>\n    </TabState>\n  );\n};\n\nexport default MonitorTab;\n\nconst Root = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  padding: theme.spacing(1),\n}));\n\nconst HeaderRow = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: theme.spacing(1),\n  marginBottom: theme.spacing(3),\n}));\n\nconst TitleRow = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(0.5),\n}));\n\nconst Title = stylin(Typography)(({ theme }: { theme: any }) => ({\n  fontSize: theme.typography.pxToRem(15),\n  fontWeight: theme.typography.fontWeightBold,\n  color: theme.palette.text.primary,\n}));\n\nconst AlarmsHelp = stylin(HelpIconButton)({\n  padding: '2px',\n  '& svg': { fontSize: 16 },\n});\n\nconst CountChip = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: theme.spacing(0.5),\n  fontSize: theme.typography.pxToRem(11),\n  padding: theme.spacing(0.25, 1),\n  borderRadius: '999px',\n  border: `1px solid ${theme.palette.divider}`,\n  backgroundColor: theme.palette.background.paper,\n}));\n\nconst FiringCount = stylin(Box)(({ theme }: { theme: any }) => ({\n  color: theme.palette.error.dark,\n  fontWeight: 600,\n}));\n\nconst TotalCount = stylin(Box)(({ theme }: { theme: any }) => ({\n  color: theme.palette.text.secondary,\n}));\n\nconst Separator = stylin(Box)(({ theme }: { theme: any }) => ({\n  color: theme.palette.text.disabled,\n}));\n\nconst List = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n}));\n\nconst Empty = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  padding: theme.spacing(6, 2),\n  textAlign: 'center',\n}));\n\nconst IconCircle = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: theme.spacing(6),\n  height: theme.spacing(6),\n  borderRadius: '50%',\n  backgroundColor: theme.palette.action.hover,\n  color: theme.palette.text.disabled,\n  '& svg': { width: theme.spacing(3), height: theme.spacing(3) },\n}));\n\nconst EmptyTitle = stylin(Typography)({ fontWeight: 600 });\n\nconst EmptyDescription = stylin(Typography)(({ theme }: { theme: any }) => ({\n  color: theme.palette.text.secondary,\n}));\n\nconst DocsLink = stylin('a')(({ theme }: { theme: any }) => ({\n  fontSize: theme.typography.pxToRem(12),\n  color: theme.palette.primary.main,\n  textDecoration: 'none',\n  '&:hover': { textDecoration: 'underline' },\n}));\n"],"names":[],"mappings":"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"}

package/dist/features/environment/InstanceDrawer/tabs/OverviewTab.esm.js

@@ -0,0 +1,572 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import Box from '@massdriver/ui/Box';
+import Typography from '@massdriver/ui/Typography';
+import CopyButton from '@massdriver/ui/CopyButton';
+import CodeBlock from '@massdriver/ui/CodeBlock';
+import TextField from '@massdriver/ui/TextField';
+import InputAdornment from '@massdriver/ui/InputAdornment';
+import IconButton from '@massdriver/ui/IconButton';
+import Tooltip from '@massdriver/ui/Tooltip';
+import SearchIcon from '@massdriver/ui/icons/SearchIcon';
+import ChevronLeftIcon from '@massdriver/ui/icons/ChevronLeftIcon';
+import ChevronRightIcon from '@massdriver/ui/icons/ChevronRightIcon';
+import ExpandCircleDownOutlinedIcon from '@massdriver/ui/icons/ExpandCircleDownOutlinedIcon';
+import OpenInNewIcon from '@massdriver/ui/icons/OpenInNewIcon';
+import AlertBanner from '@massdriver/ui/AlertBanner';
+import stylin from '@massdriver/ui/stylin';
+import { useApi } from '@backstage/frontend-plugin-api';
+import { instanceTabUrl, repoVersionOverviewUrl } from '@massdriver/backstage-plugin-common';
+import { massdriverApiRef } from '../../../../api.esm.js';
+import { TabState } from '../TabState.esm.js';
+import { AlarmCard } from '../AlarmCard.esm.js';
+import { OVERVIEW_QUERY } from '../queries.esm.js';
+import { useInstanceApiQuery } from '../useInstanceApiQuery.esm.js';
+import { getFiringAlerts, getReleaseChannel, filterAndPaginateProperties, parseMap, formatAttributeValue, formatPropertyValue } from '../helpers.esm.js';
+import '@mui/material/Chip';
+import '@mui/material/Drawer';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+import '@mui/material/Select';
+import '@mui/material/ToggleButton';
+
+const OverviewTab = ({ instanceId }) => {
+  const api = useApi(massdriverApiRef);
+  const { value, loading, error } = useInstanceApiQuery(OVERVIEW_QUERY, instanceId);
+  const instance = value?.instance;
+  const changeVersionUrl = instanceId && api.appUrl ? instanceTabUrl(api.appUrl, api.organizationId, instanceId, "overview") : "";
+  const repoUrl = instance?.bundle?.name && instance?.resolvedVersion && api.appUrl ? repoVersionOverviewUrl(
+    api.appUrl,
+    api.organizationId,
+    instance.bundle.name,
+    instance.resolvedVersion
+  ) : "";
+  const [search, setSearch] = useState("");
+  const [page, setPage] = useState(1);
+  const firingAlerts = useMemo(
+    () => getFiringAlerts(instance?.alarms?.items),
+    [instance?.alarms]
+  );
+  const releaseChannel = getReleaseChannel(
+    instance?.version,
+    instance?.resolvedVersion
+  );
+  const properties = (instance?.properties ?? []).filter(
+    Boolean
+  );
+  const propertiesView = useMemo(
+    () => filterAndPaginateProperties(properties, { search, page }),
+    [properties, search, page]
+  );
+  return /* @__PURE__ */ jsx(TabState, { loading, error, children: instance ? /* @__PURE__ */ jsxs(Root, { children: [
+    firingAlerts.length ? /* @__PURE__ */ jsxs(Section, { children: [
+      /* @__PURE__ */ jsx(Header, { children: "Firing Alerts" }),
+      /* @__PURE__ */ jsx(AlertList, { children: firingAlerts.map((alarm) => /* @__PURE__ */ jsx(AlarmCard, { alarm }, alarm.id)) })
+    ] }) : null,
+    /* @__PURE__ */ jsxs(Section, { children: [
+      /* @__PURE__ */ jsx(Header, { children: "Identifiers" }),
+      /* @__PURE__ */ jsxs(IdGrid, { children: [
+        /* @__PURE__ */ jsxs(Field, { children: [
+          /* @__PURE__ */ jsx(Label, { children: "Instance ID" }),
+          /* @__PURE__ */ jsxs(ValueRow, { children: [
+            /* @__PURE__ */ jsx(Value, { title: instance.id, children: instance.id }),
+            /* @__PURE__ */ jsx(CopyButton, { text: instance.id, tooltip: "Copy instance ID" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Field, { children: [
+          /* @__PURE__ */ jsx(Label, { children: "Name" }),
+          /* @__PURE__ */ jsxs(ValueRow, { children: [
+            /* @__PURE__ */ jsx(Value, { title: instance.name ?? "\u2014", children: instance.name ?? "\u2014" }),
+            instance.name ? /* @__PURE__ */ jsx(CopyButton, { text: instance.name, tooltip: "Copy name" }) : null
+          ] })
+        ] })
+      ] }),
+      instance.bundle?.description ? /* @__PURE__ */ jsxs(Field, { children: [
+        /* @__PURE__ */ jsx(Label, { children: "Description" }),
+        /* @__PURE__ */ jsx(Description, { children: instance.bundle.description })
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(Section, { children: [
+      /* @__PURE__ */ jsxs(SectionHeaderRow, { children: [
+        /* @__PURE__ */ jsx(Header, { children: "Version" }),
+        changeVersionUrl && instance.status !== "EXTERNAL" ? /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            arrow: true,
+            title: "Change version in Massdriver",
+            placement: "top",
+            children: /* @__PURE__ */ jsx(
+              HeaderLink,
+              {
+                href: changeVersionUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "aria-label": "Change version in Massdriver",
+                children: /* @__PURE__ */ jsx(LinkIcon, {})
+              }
+            )
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsx(Card, { children: instance.status === "EXTERNAL" ? /* @__PURE__ */ jsx(ExternalNote, { children: "You cannot edit the version of a remote reference instance." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        instance.bundle?.name ? /* @__PURE__ */ jsxs(RowLine, { children: [
+          /* @__PURE__ */ jsx(RowLabel, { children: "Bundle" }),
+          /* @__PURE__ */ jsxs(RowValueGroup, { children: [
+            /* @__PURE__ */ jsx(RowValue, { children: instance.bundle.name }),
+            repoUrl ? /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                arrow: true,
+                title: "View bundle in repository",
+                placement: "top",
+                children: /* @__PURE__ */ jsx(
+                  RepoLink,
+                  {
+                    href: repoUrl,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    "aria-label": "View bundle in repository",
+                    children: /* @__PURE__ */ jsx(LinkIcon, {})
+                  }
+                )
+              }
+            ) : null
+          ] })
+        ] }) : null,
+        /* @__PURE__ */ jsxs(RowLine, { children: [
+          /* @__PURE__ */ jsx(RowLabel, { children: "Version" }),
+          /* @__PURE__ */ jsxs(RowValueGroup, { children: [
+            /* @__PURE__ */ jsx(RowValue, { children: instance.resolvedVersion ? `v${instance.resolvedVersion}` : "\u2014" }),
+            instance.availableUpgrade ? /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                arrow: true,
+                title: `Upgrade available: v${instance.availableUpgrade}`,
+                children: /* @__PURE__ */ jsx(UpgradeBadge, { children: /* @__PURE__ */ jsx(UpArrow, {}) })
+              }
+            ) : null
+          ] })
+        ] }),
+        releaseChannel ? /* @__PURE__ */ jsxs(RowLine, { children: [
+          /* @__PURE__ */ jsx(RowLabel, { children: "Release channel" }),
+          /* @__PURE__ */ jsx(RowValue, { children: releaseChannel.channel })
+        ] }) : null
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(AttributesSection, { attributes: instance.effectiveAttributes }),
+    /* @__PURE__ */ jsx(
+      PropertiesSection,
+      {
+        status: instance.status,
+        hasAnyProperties: properties.length > 0,
+        view: propertiesView,
+        search,
+        onSearchChange: (value2) => {
+          setSearch(value2);
+          setPage(1);
+        },
+        onPrevPage: () => setPage((current) => Math.max(1, current - 1)),
+        onNextPage: () => setPage(
+          (current) => Math.min(propertiesView.totalPages, current + 1)
+        )
+      }
+    )
+  ] }) : null });
+};
+const AttributesSection = ({ attributes }) => {
+  const parsed = parseMap(attributes);
+  const entries = parsed ? Object.entries(parsed) : [];
+  return /* @__PURE__ */ jsxs(Section, { children: [
+    /* @__PURE__ */ jsx(Header, { children: "Instance attributes" }),
+    /* @__PURE__ */ jsx(Card, { children: entries.length === 0 ? /* @__PURE__ */ jsx(EmptyNote, { children: "No effective attributes." }) : entries.map(([key, value]) => /* @__PURE__ */ jsxs(RowLine, { children: [
+      /* @__PURE__ */ jsx(MonoLabel, { title: key, children: key }),
+      /* @__PURE__ */ jsx(MonoValue, { title: formatAttributeValue(value), children: formatAttributeValue(value) })
+    ] }, key)) })
+  ] });
+};
+const PropertiesSection = ({
+  status,
+  hasAnyProperties,
+  view,
+  search,
+  onSearchChange,
+  onPrevPage,
+  onNextPage
+}) => {
+  const isInitialized = status === "INITIALIZED";
+  const isEmpty = view.items.length === 0;
+  return /* @__PURE__ */ jsxs(Section, { children: [
+    /* @__PURE__ */ jsx(Header, { children: "Resource properties" }),
+    status === "EXTERNAL" ? /* @__PURE__ */ jsx(
+      AlertBanner,
+      {
+        severity: "info",
+        description: "These are properties of the remote reference resources."
+      }
+    ) : null,
+    isInitialized ? /* @__PURE__ */ jsx(EmptyNote, { children: "You must provision this instance to see its created properties." }) : !hasAnyProperties ? /* @__PURE__ */ jsx(EmptyNote, { children: "This instance has no properties because it does not produce any resources." }) : /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(
+        SearchField,
+        {
+          fullWidth: true,
+          size: "small",
+          placeholder: "Search properties\u2026",
+          value: search,
+          onChange: (event) => onSearchChange(event.target.value),
+          InputProps: {
+            startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchAdornmentIcon, {}) })
+          }
+        }
+      ),
+      isEmpty ? /* @__PURE__ */ jsx(EmptyNote, { children: "No properties match your search." }) : /* @__PURE__ */ jsx(PropList, { children: view.items.map((property, index) => /* @__PURE__ */ jsx(
+        PropertyItem,
+        {
+          name: property.name,
+          path: property.path,
+          value: property.value,
+          isLast: index === view.items.length - 1
+        },
+        `${property.name}-${property.path ?? index}`
+      )) }),
+      view.totalPages > 1 ? /* @__PURE__ */ jsxs(Pagination, { children: [
+        /* @__PURE__ */ jsxs(PageInfo, { children: [
+          "Page ",
+          view.page,
+          " of ",
+          view.totalPages
+        ] }),
+        /* @__PURE__ */ jsxs(PaginationButtons, { children: [
+          /* @__PURE__ */ jsx(
+            PageButton,
+            {
+              size: "small",
+              onClick: onPrevPage,
+              disabled: view.page === 1,
+              "aria-label": "Previous page",
+              children: /* @__PURE__ */ jsx(ChevronLeftIcon, { fontSize: "small" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PageButton,
+            {
+              size: "small",
+              onClick: onNextPage,
+              disabled: view.page === view.totalPages,
+              "aria-label": "Next page",
+              children: /* @__PURE__ */ jsx(ChevronRightIcon, { fontSize: "small" })
+            }
+          )
+        ] })
+      ] }) : null
+    ] })
+  ] });
+};
+const PropertyItem = ({
+  name,
+  path,
+  value,
+  isLast
+}) => {
+  const [expanded, setExpanded] = useState(false);
+  const formatted = formatPropertyValue(value);
+  const isMultiline = formatted.includes("\n") || formatted.length > 160;
+  return /* @__PURE__ */ jsxs(PropContainer, { isLast, children: [
+    /* @__PURE__ */ jsxs(PropHeader, { children: [
+      /* @__PURE__ */ jsxs(PropContent, { children: [
+        /* @__PURE__ */ jsx(PropName, { title: name, children: name }),
+        !expanded ? /* @__PURE__ */ jsx(PropValueText, { title: formatted, children: formatted }) : null,
+        path ? /* @__PURE__ */ jsx(PropPath, { title: path, children: path }) : null
+      ] }),
+      /* @__PURE__ */ jsxs(PropActions, { children: [
+        value != null ? /* @__PURE__ */ jsx(CopyButton, { text: formatted, tooltip: "Copy value" }) : null,
+        isMultiline ? /* @__PURE__ */ jsx(
+          ExpandToggle,
+          {
+            expanded,
+            onClick: () => setExpanded((prev) => !prev),
+            size: "small",
+            "aria-label": expanded ? "Collapse value" : "Expand value",
+            children: /* @__PURE__ */ jsx(ExpandIcon, { fontSize: "inherit" })
+          }
+        ) : null
+      ] })
+    ] }),
+    expanded && isMultiline ? /* @__PURE__ */ jsx(PropExpanded, { children: /* @__PURE__ */ jsx(CodeBlock, { children: formatted }) }) : null
+  ] });
+};
+const Root = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  padding: theme.spacing(1)
+}));
+const Section = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(2),
+  marginBottom: theme.spacing(4)
+}));
+const Header = stylin(Typography)(({ theme }) => ({
+  fontSize: theme.typography.pxToRem(14),
+  fontWeight: theme.typography.fontWeightBold,
+  color: theme.palette.text.primary
+}));
+const SectionHeaderRow = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1)
+}));
+const HeaderLink = stylin("a")(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  color: theme.palette.text.secondary,
+  "&:hover": { color: theme.palette.primary.main }
+}));
+const RepoLink = stylin("a")(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  color: theme.palette.text.secondary,
+  "&:hover": { color: theme.palette.primary.main }
+}));
+const LinkIcon = stylin(OpenInNewIcon)({
+  fontSize: 15
+});
+const AlertList = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(2)
+}));
+const IdGrid = stylin(Box)(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "1fr",
+  [theme.breakpoints.up("sm")]: {
+    gridTemplateColumns: "repeat(2, minmax(0, 1fr))"
+  },
+  gap: theme.spacing(2)
+}));
+const Field = stylin(Box)(({ theme }) => ({
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: 1,
+  padding: theme.spacing(1),
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(0.5),
+  minWidth: 0
+}));
+const Label = stylin(Typography)(({ theme }) => ({
+  fontSize: theme.typography.pxToRem(11),
+  fontWeight: 600,
+  textTransform: "uppercase",
+  letterSpacing: "0.5px",
+  color: theme.palette.text.secondary
+}));
+const ValueRow = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5),
+  minWidth: 0
+}));
+const Value = stylin(Typography)(({ theme }) => ({
+  fontSize: theme.typography.pxToRem(12),
+  color: theme.palette.text.primary,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  flex: 1,
+  minWidth: 0
+}));
+const Description = stylin(Typography)(({ theme }) => ({
+  fontSize: theme.typography.pxToRem(12),
+  color: theme.palette.text.primary,
+  whiteSpace: "pre-wrap"
+}));
+const Card = stylin(Box)(({ theme }) => ({
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: 1,
+  padding: theme.spacing(1),
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(0.5),
+  overflow: "hidden"
+}));
+const RowLine = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  flexWrap: "wrap",
+  minWidth: 0
+}));
+const RowValueGroup = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5)
+}));
+const RowLabel = stylin(Typography)(({ theme }) => ({
+  fontSize: theme.typography.pxToRem(11),
+  color: theme.palette.text.secondary,
+  minWidth: 110
+}));
+const RowValue = stylin(Typography)(({ theme }) => ({
+  fontSize: theme.typography.pxToRem(12),
+  color: theme.palette.text.primary,
+  fontFamily: theme.typography.fontFamilyMono
+}));
+const MonoLabel = stylin(Typography)(({ theme }) => ({
+  fontSize: theme.typography.pxToRem(11),
+  color: theme.palette.text.secondary,
+  minWidth: 110,
+  fontFamily: theme.typography.fontFamilyMono,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}));
+const MonoValue = stylin(Typography)(({ theme }) => ({
+  fontSize: theme.typography.pxToRem(12),
+  color: theme.palette.text.primary,
+  fontFamily: theme.typography.fontFamilyMono,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  flex: 1,
+  minWidth: 0
+}));
+const ExternalNote = stylin(Typography)(({ theme }) => ({
+  fontSize: theme.typography.pxToRem(12),
+  color: theme.palette.text.secondary,
+  fontStyle: "italic"
+}));
+const UpgradeBadge = stylin(Box)(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 16,
+  height: 16,
+  color: theme.palette.success.main
+}));
+const UpArrow = stylin(ExpandCircleDownOutlinedIcon)({
+  width: 16,
+  height: 16,
+  transform: "rotate(180deg)"
+});
+const EmptyNote = stylin(Typography)(({ theme }) => ({
+  fontSize: theme.typography.pxToRem(12),
+  color: theme.palette.text.secondary,
+  fontStyle: "italic"
+}));
+const SearchField = stylin(TextField)(({ theme }) => ({
+  [`.${outlinedInputClasses.root}`]: {
+    fontSize: theme.typography.pxToRem(12),
+    borderRadius: 0,
+    "& fieldset": {
+      border: "none",
+      borderBottom: `1px solid ${theme.palette.divider}`
+    },
+    "&:hover fieldset": { borderBottom: `1px solid ${theme.palette.divider}` },
+    "&.Mui-focused fieldset": {
+      borderBottom: `1px solid ${theme.palette.divider}`
+    }
+  },
+  [`.${outlinedInputClasses.input}`]: {
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    paddingRight: theme.spacing(1.5),
+    paddingLeft: 0
+  }
+}));
+const SearchAdornmentIcon = stylin(SearchIcon)(({ theme }) => ({
+  fontSize: 18,
+  color: theme.palette.text.disabled
+}));
+const PropList = stylin(Box)({
+  display: "flex",
+  flexDirection: "column"
+});
+const Pagination = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: theme.spacing(1, 1.5),
+  borderTop: `1px solid ${theme.palette.divider}`,
+  backgroundColor: theme.palette.action.hover
+}));
+const PageInfo = stylin(Typography)(({ theme }) => ({
+  fontSize: theme.typography.pxToRem(11),
+  color: theme.palette.text.secondary
+}));
+const PaginationButtons = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5)
+}));
+const PageButton = stylin(IconButton)(({ theme }) => ({
+  padding: theme.spacing(0.25),
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: 0.5,
+  color: theme.palette.text.secondary
+}));
+const PropContainer = stylin(Box, ["isLast"])(
+  ({ theme, isLast }) => ({
+    borderBottom: isLast ? "none" : `1px solid ${theme.palette.divider}`
+  })
+);
+const PropHeader = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  padding: theme.spacing(1, 1, 1, 1.5),
+  minHeight: 48
+}));
+const PropContent = stylin(Box)({
+  flex: 1,
+  minWidth: 0,
+  overflow: "hidden"
+});
+const PropName = stylin(Typography)(({ theme }) => ({
+  fontSize: theme.typography.pxToRem(12),
+  fontWeight: 500,
+  lineHeight: 1.4,
+  color: theme.palette.text.primary,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}));
+const PropValueText = stylin(Typography)(({ theme }) => ({
+  fontSize: theme.typography.pxToRem(11),
+  lineHeight: 1.4,
+  marginTop: theme.spacing(0.25),
+  color: theme.palette.text.secondary,
+  fontFamily: theme.typography.fontFamilyMono,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}));
+const PropPath = stylin(Typography)(({ theme }) => ({
+  fontSize: theme.typography.pxToRem(10),
+  lineHeight: 1.4,
+  color: theme.palette.text.disabled,
+  fontFamily: theme.typography.fontFamilyMono,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}));
+const PropActions = stylin(Box)({
+  display: "flex",
+  alignItems: "center",
+  flexShrink: 0
+});
+const ExpandToggle = stylin(IconButton, ["expanded"])(
+  ({ theme, expanded }) => ({
+    padding: theme.spacing(0.75),
+    color: theme.palette.text.disabled,
+    transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
+    transition: "transform 150ms ease"
+  })
+);
+const ExpandIcon = stylin(ExpandCircleDownOutlinedIcon)({
+  width: 18,
+  height: 18
+});
+const PropExpanded = stylin(Box)(({ theme }) => ({
+  padding: theme.spacing(0, 1, 1, 1.5)
+}));
+
+export { OverviewTab, OverviewTab as default };
+//# sourceMappingURL=OverviewTab.esm.js.map