@massdriver/backstage-plugin 1.0.0

package/dist/features/resource/ResourceDetailsPage.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceDetailsPage.esm.js","sources":["../../../src/features/resource/ResourceDetailsPage.tsx"],"sourcesContent":["import { useApi } from '@backstage/frontend-plugin-api';\nimport { resourceUrl } from '@massdriver/backstage-plugin-common';\nimport Box from '@massdriver/ui/Box';\nimport IconButton from '@massdriver/ui/IconButton';\nimport IconTile from '@massdriver/ui/IconTile';\nimport PageTabs from '@massdriver/ui/PageTabs';\nimport Tooltip from '@massdriver/ui/Tooltip';\nimport DeleteIcon from '@massdriver/ui/icons/DeleteIcon';\nimport ExtensionIcon from '@massdriver/ui/icons/ExtensionIcon';\nimport stylin from '@massdriver/ui/stylin';\nimport useAsync from 'react-use/esm/useAsync';\nimport { useParams } from 'react-router-dom';\nimport { massdriverApiRef } from '../../api';\nimport { DisabledAction } from '../../components/DisabledAction';\nimport { NotFound } from '../../components/NotFound';\nimport { OpenInMassdriverButton } from '../../components/OpenInMassdriverButton';\nimport { PageLayout } from '../../components/PageLayout';\nimport { RouterLinkAdapter } from '../../components/RouterLinkAdapter';\nimport { internalRoutes } from '../../internalRoutes';\nimport {\n  PROVISIONED_DELETE_TOOLTIP,\n  PROVISIONED_EDIT_TOOLTIP,\n} from '../resources/resourceConstants';\nimport { RESOURCE_HEADER_QUERY } from './queries';\nimport { GeneralTab } from './tabs/GeneralTab';\nimport { PermissionsTab } from './tabs/PermissionsTab';\nimport { UsageTab } from './tabs/UsageTab';\n\n// Ported from apps/web/features/resources/pages/ResourceDetailsPage.js and\n// utils/resourceTabs.js. The web app's Edit/Delete mutate: for imported\n// resources they deep-link out to the resource in Massdriver; for provisioned\n// resources they stay disabled with the web app's own tooltips (it disables\n// them too).\n\nconst DELETE_TOOLTIP = 'Delete in Massdriver';\n\nconst TABS = [\n  { id: 'general', label: 'General' },\n  { id: 'usage', label: 'Usage' },\n  { id: 'permissions', label: 'Permissions' },\n];\n\nconst PANELS: Record<\n  string,\n  (props: {\n    resourceId: string;\n    resourceOrigin?: string | null;\n  }) => JSX.Element | null\n> = {\n  general: GeneralTab,\n  usage: UsageTab,\n  permissions: PermissionsTab,\n};\n\ninterface ResourceHeader {\n  id: string;\n  name: string;\n  origin?: string | null;\n  resourceType?: {\n    id: string;\n    name?: string | null;\n    icon?: string | null;\n  } | null;\n}\n\n/** Read-only resource details: vertical side-tabs mirroring the web app. */\nexport const ResourceDetailsPage = () => {\n  const api = useApi(massdriverApiRef);\n  const { resourceId: rawResourceId = '', tab } = useParams();\n  const resourceId = decodeURIComponent(rawResourceId);\n  const activeTab = TABS.some(entry => entry.id === tab) ? tab! : 'general';\n\n  const {\n    value: resource,\n    loading,\n    error,\n  } = useAsync(async () => {\n    const data = (await api.query(RESOURCE_HEADER_QUERY, {\n      id: resourceId,\n    })) as { resource: ResourceHeader | null };\n    return data.resource;\n  }, [api, resourceId]);\n\n  if (!loading && !error && !resource) {\n    return (\n      <NotFound\n        title=\"Resource not found\"\n        message=\"This resource doesn't exist or you don't have access to it.\"\n      />\n    );\n  }\n\n  const isProvisioned = resource?.origin === 'PROVISIONED';\n\n  const tabs = TABS.map(entry => ({\n    ...entry,\n    href: internalRoutes.resourceTab(resourceId, entry.id),\n  }));\n\n  const titleNode = resource ? (\n    <TitleRow>\n      <IconTile\n        src={resource.resourceType?.icon}\n        alt={resource.resourceType?.name}\n        size=\"medium\"\n        fallback={<ExtensionIcon />}\n      />\n      <TitleText>{resource.name}</TitleText>\n    </TitleRow>\n  ) : (\n    ''\n  );\n\n  return (\n    <PageLayout\n      title={titleNode}\n      description={resource?.resourceType?.name}\n      headerActions={\n        resource ? (\n          <HeaderActions>\n            <OpenInMassdriverButton\n              url={resourceUrl(api.appUrl, api.organizationId, resourceId)}\n              variant=\"outlined\"\n            >\n              Open in Massdriver\n            </OpenInMassdriverButton>\n            {isProvisioned ? (\n              <DisabledAction label=\"Edit\" tooltip={PROVISIONED_EDIT_TOOLTIP} />\n            ) : (\n              <OpenInMassdriverButton\n                url={resourceUrl(api.appUrl, api.organizationId, resourceId)}\n                variant=\"outlined\"\n              >\n                Edit\n              </OpenInMassdriverButton>\n            )}\n            {/* Web renders Delete as a danger icon button; imported resources\n                deep-link out, provisioned stay disabled like the web app. */}\n            <Tooltip\n              title={\n                isProvisioned ? PROVISIONED_DELETE_TOOLTIP : DELETE_TOOLTIP\n              }\n              arrow\n              placement=\"top\"\n            >\n              <ButtonWrap>\n                <DangerIconButton\n                  aria-label=\"Delete resource\"\n                  disabled={isProvisioned}\n                  {...(isProvisioned\n                    ? {}\n                    : {\n                        href: resourceUrl(\n                          api.appUrl,\n                          api.organizationId,\n                          resourceId,\n                        ),\n                        target: '_blank',\n                        rel: 'noopener noreferrer',\n                      })}\n                >\n                  <DeleteIcon />\n                </DangerIconButton>\n              </ButtonWrap>\n            </Tooltip>\n          </HeaderActions>\n        ) : null\n      }\n      flush\n    >\n      <PageTabs\n        orientation=\"vertical\"\n        tabs={tabs}\n        panels={PANELS}\n        activeTab={activeTab}\n        panelProps={{ resourceId, resourceOrigin: resource?.origin }}\n        LinkComponent={RouterLinkAdapter}\n      />\n    </PageLayout>\n  );\n};\n\nconst TitleRow = stylin('span')(({ theme }: { theme: any }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: theme.spacing(1.5),\n  minWidth: 0,\n}));\n\nconst TitleText = stylin('span')({\n  minWidth: 0,\n  wordBreak: 'break-word',\n});\n\nconst HeaderActions = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n}));\n\nconst ButtonWrap = stylin('span')({\n  display: 'inline-flex',\n});\n\nconst DangerIconButton = stylin(IconButton)(({ theme }: { theme: any }) => ({\n  '&:hover:not(:disabled)': {\n    color: theme.palette.error.main,\n  },\n}));\n"],"names":[],"mappings":"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"}

package/dist/features/resource/queries.esm.js

@@ -0,0 +1,141 @@
+const RESOURCE_HEADER_QUERY = `
+  query MassdriverResourceHeader($organizationId: ID!, $id: ID!) {
+    resource(organizationId: $organizationId, id: $id) {
+      id
+      name
+      origin
+      formats
+      payload
+      createdAt
+      updatedAt
+      resourceType {
+        id
+        name
+        icon
+      }
+      instance {
+        id
+        name
+      }
+    }
+  }
+`;
+const RESOURCE_GRANTS_QUERY = `
+  query MassdriverResourceGrants($organizationId: ID!, $id: ID!) {
+    resource(organizationId: $organizationId, id: $id) {
+      id
+      name
+      grants {
+        items {
+          id
+          action
+          recipientConditions
+          createdAt
+        }
+      }
+    }
+  }
+`;
+const RESOURCE_CONNECTIONS_QUERY = `
+  query MassdriverResourceUsageConnections(
+    $organizationId: ID!
+    $id: ID!
+    $cursor: Cursor
+  ) {
+    resource(organizationId: $organizationId, id: $id) {
+      id
+      connections(cursor: $cursor) {
+        cursor {
+          next
+        }
+        items {
+          id
+          toField
+          createdAt
+          toInstance {
+            id
+            status
+            bundle {
+              id
+              name
+            }
+            environment {
+              id
+              project {
+                id
+                name
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+const RESOURCE_REMOTE_REFERENCES_QUERY = `
+  query MassdriverResourceUsageRemoteReferences(
+    $organizationId: ID!
+    $id: ID!
+    $cursor: Cursor
+  ) {
+    resource(organizationId: $organizationId, id: $id) {
+      id
+      remoteReferences(cursor: $cursor) {
+        cursor {
+          next
+        }
+        items {
+          id
+          field
+          createdAt
+          instance {
+            id
+            status
+            bundle {
+              id
+              name
+            }
+            environment {
+              id
+              project {
+                id
+                name
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+const RESOURCE_ENVIRONMENT_DEFAULTS_QUERY = `
+  query MassdriverResourceUsageEnvironmentDefaults(
+    $organizationId: ID!
+    $id: ID!
+    $cursor: Cursor
+  ) {
+    resource(organizationId: $organizationId, id: $id) {
+      id
+      environmentDefaults(cursor: $cursor) {
+        cursor {
+          next
+        }
+        items {
+          id
+          createdAt
+          environment {
+            id
+            name
+            project {
+              id
+              name
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+export { RESOURCE_CONNECTIONS_QUERY, RESOURCE_ENVIRONMENT_DEFAULTS_QUERY, RESOURCE_GRANTS_QUERY, RESOURCE_HEADER_QUERY, RESOURCE_REMOTE_REFERENCES_QUERY };
+//# sourceMappingURL=queries.esm.js.map

package/dist/features/resource/queries.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"queries.esm.js","sources":["../../../src/features/resource/queries.ts"],"sourcesContent":["// Ported from apps/web/features/resources/hooks/{useResourceQuery,useResourceGrantsQuery}.js\n// and sections/UsageTab/UsageTab.helpers.js. `$organizationId` is injected by\n// the relay; documents declare it but never pass it.\n\n/** Resource header — also feeds the General tab. */\nexport const RESOURCE_HEADER_QUERY = `\n  query MassdriverResourceHeader($organizationId: ID!, $id: ID!) {\n    resource(organizationId: $organizationId, id: $id) {\n      id\n      name\n      origin\n      formats\n      payload\n      createdAt\n      updatedAt\n      resourceType {\n        id\n        name\n        icon\n      }\n      instance {\n        id\n        name\n      }\n    }\n  }\n`;\n\n/** Resource permission grants (no cursor — the API returns a bare item list). */\nexport const RESOURCE_GRANTS_QUERY = `\n  query MassdriverResourceGrants($organizationId: ID!, $id: ID!) {\n    resource(organizationId: $organizationId, id: $id) {\n      id\n      name\n      grants {\n        items {\n          id\n          action\n          recipientConditions\n          createdAt\n        }\n      }\n    }\n  }\n`;\n\nexport const RESOURCE_CONNECTIONS_QUERY = `\n  query MassdriverResourceUsageConnections(\n    $organizationId: ID!\n    $id: ID!\n    $cursor: Cursor\n  ) {\n    resource(organizationId: $organizationId, id: $id) {\n      id\n      connections(cursor: $cursor) {\n        cursor {\n          next\n        }\n        items {\n          id\n          toField\n          createdAt\n          toInstance {\n            id\n            status\n            bundle {\n              id\n              name\n            }\n            environment {\n              id\n              project {\n                id\n                name\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n\nexport const RESOURCE_REMOTE_REFERENCES_QUERY = `\n  query MassdriverResourceUsageRemoteReferences(\n    $organizationId: ID!\n    $id: ID!\n    $cursor: Cursor\n  ) {\n    resource(organizationId: $organizationId, id: $id) {\n      id\n      remoteReferences(cursor: $cursor) {\n        cursor {\n          next\n        }\n        items {\n          id\n          field\n          createdAt\n          instance {\n            id\n            status\n            bundle {\n              id\n              name\n            }\n            environment {\n              id\n              project {\n                id\n                name\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n\nexport const RESOURCE_ENVIRONMENT_DEFAULTS_QUERY = `\n  query MassdriverResourceUsageEnvironmentDefaults(\n    $organizationId: ID!\n    $id: ID!\n    $cursor: Cursor\n  ) {\n    resource(organizationId: $organizationId, id: $id) {\n      id\n      environmentDefaults(cursor: $cursor) {\n        cursor {\n          next\n        }\n        items {\n          id\n          createdAt\n          environment {\n            id\n            name\n            project {\n              id\n              name\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n"],"names":[],"mappings":"AAKO,MAAM,qBAAA,GAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwB9B,MAAM,qBAAA,GAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiB9B,MAAM,0BAAA,GAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCnC,MAAM,gCAAA,GAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCzC,MAAM,mCAAA,GAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}

package/dist/features/resource/tabs/GeneralTab.esm.js

@@ -0,0 +1,247 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useApi } from '@backstage/frontend-plugin-api';
+import { resourceUrl, parseInstanceId } from '@massdriver/backstage-plugin-common';
+import Alert from '@massdriver/ui/Alert';
+import Box from '@massdriver/ui/Box';
+import CodeBlock from '@massdriver/ui/CodeBlock';
+import CopyButton from '@massdriver/ui/CopyButton';
+import IconButton from '@massdriver/ui/IconButton';
+import Tooltip from '@massdriver/ui/Tooltip';
+import Typography from '@massdriver/ui/Typography';
+import DownloadIcon from '@massdriver/ui/icons/DownloadIcon';
+import stylin from '@massdriver/ui/stylin';
+import useAsync from 'react-use/esm/useAsync';
+import { massdriverApiRef } from '../../../api.esm.js';
+import { formatRelativeTime } from '../../../utils/formatRelativeTime.esm.js';
+import { OriginChip } from '../OriginChip.esm.js';
+import { RESOURCE_HEADER_QUERY } from '../queries.esm.js';
+import { GeneralTabLoading } from './GeneralTab.loading.esm.js';
+
+const PAYLOAD_EXPORT_TOOLTIP = "Download in Massdriver";
+const parseMap = (value) => {
+  if (value == null) return null;
+  if (typeof value === "object") return value;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return null;
+  }
+};
+const buildLocation = (instance) => {
+  if (!instance?.id) return null;
+  const { projectId, scopedEnvironmentId } = parseInstanceId(instance.id);
+  if (!projectId || !scopedEnvironmentId) return null;
+  return `${projectId} : ${scopedEnvironmentId}`;
+};
+const GeneralTab = ({ resourceId }) => {
+  const api = useApi(massdriverApiRef);
+  const {
+    value: resource,
+    loading,
+    error
+  } = useAsync(async () => {
+    const data = await api.query(RESOURCE_HEADER_QUERY, {
+      id: resourceId
+    });
+    return data.resource;
+  }, [api, resourceId]);
+  if (loading) {
+    return /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsx(GeneralTabLoading, {}) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsx(Alert, { severity: "error", children: String(error.message ?? error) }) });
+  }
+  if (!resource) return null;
+  const location = buildLocation(resource.instance);
+  const parsedPayload = parseMap(resource.payload);
+  return /* @__PURE__ */ jsxs(Body, { children: [
+    /* @__PURE__ */ jsxs(MetaGrid, { children: [
+      /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx(CardTitle, { children: "Identifiers" }),
+        /* @__PURE__ */ jsxs(KeyValueList, { children: [
+          /* @__PURE__ */ jsx(
+            KeyValueRow,
+            {
+              label: "ID",
+              value: resource.id,
+              mono: true,
+              copyTooltip: "Copy ID"
+            }
+          ),
+          /* @__PURE__ */ jsx(KeyValueRow, { label: "Type", value: resource.resourceType?.id, mono: true })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx(CardTitle, { children: "Origin" }),
+        /* @__PURE__ */ jsxs(KeyValueList, { children: [
+          /* @__PURE__ */ jsx(
+            KeyValueRow,
+            {
+              label: "Status",
+              value: /* @__PURE__ */ jsx(OriginChip, { origin: resource.origin })
+            }
+          ),
+          resource.instance?.id ? /* @__PURE__ */ jsx(KeyValueRow, { label: "Instance", value: resource.instance.id, mono: true }) : null,
+          location ? /* @__PURE__ */ jsx(KeyValueRow, { label: "Location", value: location }) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx(CardTitle, { children: "Timeline" }),
+        /* @__PURE__ */ jsxs(KeyValueList, { children: [
+          /* @__PURE__ */ jsx(
+            KeyValueRow,
+            {
+              label: "Created",
+              value: formatRelativeTime(resource.createdAt)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            KeyValueRow,
+            {
+              label: "Updated",
+              value: formatRelativeTime(resource.updatedAt)
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    parsedPayload ? /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsxs(PayloadHeader, { children: [
+        /* @__PURE__ */ jsx(CardTitle, { children: "Payload" }),
+        /* @__PURE__ */ jsx(Tooltip, { title: PAYLOAD_EXPORT_TOOLTIP, placement: "top", children: /* @__PURE__ */ jsx(ButtonWrap, { children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            "aria-label": "Download payload in Massdriver",
+            href: resourceUrl(api.appUrl, api.organizationId, resourceId),
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: /* @__PURE__ */ jsx(DownloadIcon, { fontSize: "small" })
+          }
+        ) }) })
+      ] }),
+      /* @__PURE__ */ jsx(CodeBlock, { children: JSON.stringify(parsedPayload, null, 2) })
+    ] }) : null
+  ] });
+};
+const KeyValueRow = ({
+  label,
+  value,
+  mono,
+  copyTooltip
+}) => {
+  if (value == null || value === "") return null;
+  const isTextValue = typeof value === "string" || typeof value === "number";
+  return /* @__PURE__ */ jsxs(KeyValueRowBox, { children: [
+    /* @__PURE__ */ jsx(KeyLabel, { children: label }),
+    /* @__PURE__ */ jsxs(ValueWrap, { children: [
+      /* @__PURE__ */ jsx(
+        ValueText,
+        {
+          mono,
+          truncate: isTextValue,
+          title: isTextValue ? String(value) : void 0,
+          children: value
+        }
+      ),
+      isTextValue && copyTooltip ? /* @__PURE__ */ jsx(
+        CopyButton,
+        {
+          text: String(value),
+          tooltip: copyTooltip,
+          size: "small",
+          ariaLabel: copyTooltip
+        }
+      ) : null
+    ] })
+  ] });
+};
+const Body = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  padding: theme.spacing(4),
+  gap: theme.spacing(3),
+  maxWidth: theme.spacing(160),
+  marginLeft: "auto",
+  marginRight: "auto",
+  width: "100%"
+}));
+const MetaGrid = stylin(Box)(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
+  gap: theme.spacing(2),
+  alignItems: "stretch"
+}));
+const Card = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(1.5),
+  padding: theme.spacing(2.5),
+  backgroundColor: theme.palette.background.paper,
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: 1
+}));
+const CardTitle = stylin(Typography)(({ theme }) => ({
+  fontSize: "0.6875rem",
+  fontWeight: 600,
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  color: theme.palette.text.secondary
+}));
+const PayloadHeader = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: theme.spacing(1)
+}));
+const ButtonWrap = stylin("span")({
+  display: "inline-flex"
+});
+const KeyValueList = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(0.75)
+}));
+const KeyValueRowBox = stylin(Box)(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: `${theme.spacing(10)} 1fr`,
+  gap: theme.spacing(1.5),
+  alignItems: "center"
+}));
+const KeyLabel = stylin(Typography)(({ theme }) => ({
+  fontSize: "0.75rem",
+  color: theme.palette.text.secondary,
+  textTransform: "uppercase",
+  letterSpacing: "0.03em"
+}));
+const ValueWrap = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5),
+  minWidth: 0
+}));
+const ValueText = stylin(Box, ["mono", "truncate"])(
+  ({
+    theme,
+    mono,
+    truncate
+  }) => ({
+    fontSize: "0.875rem",
+    color: theme.palette.text.primary,
+    flex: 1,
+    minWidth: 0,
+    ...truncate && {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
+    ...mono && {
+      fontFamily: theme.typography.fontFamilyMono,
+      fontSize: "0.8125rem"
+    }
+  })
+);
+
+export { GeneralTab };
+//# sourceMappingURL=GeneralTab.esm.js.map

package/dist/features/resource/tabs/GeneralTab.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeneralTab.esm.js","sources":["../../../../src/features/resource/tabs/GeneralTab.tsx"],"sourcesContent":["import { useApi } from '@backstage/frontend-plugin-api';\nimport {\n  parseInstanceId,\n  resourceUrl,\n} from '@massdriver/backstage-plugin-common';\nimport Alert from '@massdriver/ui/Alert';\nimport Box from '@massdriver/ui/Box';\nimport CodeBlock from '@massdriver/ui/CodeBlock';\nimport CopyButton from '@massdriver/ui/CopyButton';\nimport IconButton from '@massdriver/ui/IconButton';\nimport Tooltip from '@massdriver/ui/Tooltip';\nimport Typography from '@massdriver/ui/Typography';\nimport DownloadIcon from '@massdriver/ui/icons/DownloadIcon';\nimport stylin from '@massdriver/ui/stylin';\nimport { ReactNode } from 'react';\nimport useAsync from 'react-use/esm/useAsync';\nimport { massdriverApiRef } from '../../../api';\nimport { formatRelativeTime } from '../../../utils/formatRelativeTime';\nimport { OriginChip } from '../OriginChip';\nimport { RESOURCE_HEADER_QUERY } from '../queries';\nimport { GeneralTabLoading } from './GeneralTab.loading';\n\n// Ported from apps/web/features/resources/sections/GeneralTab/GeneralTab.view.js.\n// The web app's payload download runs an `exportResource` mutation, which is\n// off-limits in this read-only mirror — the download button deep-links out to\n// the resource in Massdriver instead.\nconst PAYLOAD_EXPORT_TOOLTIP = 'Download in Massdriver';\n\ninterface GeneralResource {\n  id: string;\n  name: string;\n  origin?: string | null;\n  payload?: unknown;\n  createdAt?: string | null;\n  updatedAt?: string | null;\n  resourceType?: { id: string; name?: string | null } | null;\n  instance?: { id: string } | null;\n}\n\n// payload comes back as a JSON-encoded string (or a pre-parsed object); mirror\n// the web app's parseMap — return null on missing or unparseable input.\nconst parseMap = (value: unknown): any => {\n  if (value == null) return null;\n  if (typeof value === 'object') return value;\n  try {\n    return JSON.parse(value as string);\n  } catch {\n    return null;\n  }\n};\n\nconst buildLocation = (\n  instance: GeneralResource['instance'],\n): string | null => {\n  if (!instance?.id) return null;\n  const { projectId, scopedEnvironmentId } = parseInstanceId(instance.id);\n  if (!projectId || !scopedEnvironmentId) return null;\n  return `${projectId} : ${scopedEnvironmentId}`;\n};\n\n/** Read-only General tab: identifiers, origin, timeline, and payload cards. */\nexport const GeneralTab = ({ resourceId }: { resourceId: string }) => {\n  const api = useApi(massdriverApiRef);\n  const {\n    value: resource,\n    loading,\n    error,\n  } = useAsync(async () => {\n    const data = (await api.query(RESOURCE_HEADER_QUERY, {\n      id: resourceId,\n    })) as { resource: GeneralResource | null };\n    return data.resource;\n  }, [api, resourceId]);\n\n  if (loading) {\n    return (\n      <Body>\n        <GeneralTabLoading />\n      </Body>\n    );\n  }\n  if (error) {\n    return (\n      <Body>\n        <Alert severity=\"error\">{String(error.message ?? error)}</Alert>\n      </Body>\n    );\n  }\n  if (!resource) return null;\n\n  const location = buildLocation(resource.instance);\n  const parsedPayload = parseMap(resource.payload);\n\n  return (\n    <Body>\n      <MetaGrid>\n        <Card>\n          <CardTitle>Identifiers</CardTitle>\n          <KeyValueList>\n            <KeyValueRow\n              label=\"ID\"\n              value={resource.id}\n              mono\n              copyTooltip=\"Copy ID\"\n            />\n            <KeyValueRow label=\"Type\" value={resource.resourceType?.id} mono />\n          </KeyValueList>\n        </Card>\n\n        <Card>\n          <CardTitle>Origin</CardTitle>\n          <KeyValueList>\n            <KeyValueRow\n              label=\"Status\"\n              value={<OriginChip origin={resource.origin} />}\n            />\n            {resource.instance?.id ? (\n              <KeyValueRow label=\"Instance\" value={resource.instance.id} mono />\n            ) : null}\n            {location ? (\n              <KeyValueRow label=\"Location\" value={location} />\n            ) : null}\n          </KeyValueList>\n        </Card>\n\n        <Card>\n          <CardTitle>Timeline</CardTitle>\n          <KeyValueList>\n            <KeyValueRow\n              label=\"Created\"\n              value={formatRelativeTime(resource.createdAt)}\n            />\n            <KeyValueRow\n              label=\"Updated\"\n              value={formatRelativeTime(resource.updatedAt)}\n            />\n          </KeyValueList>\n        </Card>\n      </MetaGrid>\n\n      {parsedPayload ? (\n        <Card>\n          <PayloadHeader>\n            <CardTitle>Payload</CardTitle>\n            <Tooltip title={PAYLOAD_EXPORT_TOOLTIP} placement=\"top\">\n              <ButtonWrap>\n                <IconButton\n                  size=\"small\"\n                  aria-label=\"Download payload in Massdriver\"\n                  href={resourceUrl(api.appUrl, api.organizationId, resourceId)}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                >\n                  <DownloadIcon fontSize=\"small\" />\n                </IconButton>\n              </ButtonWrap>\n            </Tooltip>\n          </PayloadHeader>\n          <CodeBlock>{JSON.stringify(parsedPayload, null, 2)}</CodeBlock>\n        </Card>\n      ) : null}\n    </Body>\n  );\n};\n\nconst KeyValueRow = ({\n  label,\n  value,\n  mono,\n  copyTooltip,\n}: {\n  label: string;\n  value?: ReactNode;\n  mono?: boolean;\n  copyTooltip?: string;\n}) => {\n  if (value == null || value === '') return null;\n  const isTextValue = typeof value === 'string' || typeof value === 'number';\n  return (\n    <KeyValueRowBox>\n      <KeyLabel>{label}</KeyLabel>\n      <ValueWrap>\n        <ValueText\n          mono={mono}\n          truncate={isTextValue}\n          title={isTextValue ? String(value) : undefined}\n        >\n          {value}\n        </ValueText>\n        {isTextValue && copyTooltip ? (\n          <CopyButton\n            text={String(value)}\n            tooltip={copyTooltip}\n            size=\"small\"\n            ariaLabel={copyTooltip}\n          />\n        ) : null}\n      </ValueWrap>\n    </KeyValueRowBox>\n  );\n};\n\nconst Body = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  flex: 1,\n  padding: theme.spacing(4),\n  gap: theme.spacing(3),\n  maxWidth: theme.spacing(160),\n  marginLeft: 'auto',\n  marginRight: 'auto',\n  width: '100%',\n}));\n\nconst MetaGrid = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'grid',\n  gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',\n  gap: theme.spacing(2),\n  alignItems: 'stretch',\n}));\n\nconst Card = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(1.5),\n  padding: theme.spacing(2.5),\n  backgroundColor: theme.palette.background.paper,\n  border: `1px solid ${theme.palette.divider}`,\n  borderRadius: 1,\n}));\n\nconst CardTitle = stylin(Typography)(({ theme }: { theme: any }) => ({\n  fontSize: '0.6875rem',\n  fontWeight: 600,\n  textTransform: 'uppercase',\n  letterSpacing: '0.05em',\n  color: theme.palette.text.secondary,\n}));\n\nconst PayloadHeader = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: theme.spacing(1),\n}));\n\nconst ButtonWrap = stylin('span')({\n  display: 'inline-flex',\n});\n\nconst KeyValueList = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.75),\n}));\n\nconst KeyValueRowBox = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'grid',\n  gridTemplateColumns: `${theme.spacing(10)} 1fr`,\n  gap: theme.spacing(1.5),\n  alignItems: 'center',\n}));\n\nconst KeyLabel = stylin(Typography)(({ theme }: { theme: any }) => ({\n  fontSize: '0.75rem',\n  color: theme.palette.text.secondary,\n  textTransform: 'uppercase',\n  letterSpacing: '0.03em',\n}));\n\nconst ValueWrap = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(0.5),\n  minWidth: 0,\n}));\n\nconst ValueText = stylin(Box, ['mono', 'truncate'])(\n  ({\n    theme,\n    mono,\n    truncate,\n  }: {\n    theme: any;\n    mono?: boolean;\n    truncate?: boolean;\n  }) => ({\n    fontSize: '0.875rem',\n    color: theme.palette.text.primary,\n    flex: 1,\n    minWidth: 0,\n    ...(truncate && {\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n    }),\n    ...(mono && {\n      fontFamily: theme.typography.fontFamilyMono,\n      fontSize: '0.8125rem',\n    }),\n  }),\n);\n"],"names":[],"mappings":"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"}

package/dist/features/resource/tabs/GeneralTab.loading.esm.js

@@ -0,0 +1,76 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import Box from '@massdriver/ui/Box';
+import Skeleton from '@massdriver/ui/Skeleton';
+import Typography from '@massdriver/ui/Typography';
+import stylin from '@massdriver/ui/stylin';
+
+const SkeletonRow = ({ valueWidth = "60%" }) => /* @__PURE__ */ jsxs(KeyValueRowBox, { children: [
+  /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "55%" }),
+  /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: valueWidth })
+] });
+const GeneralTabLoading = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsxs(MetaGrid, { children: [
+    /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: "Identifiers" }),
+      /* @__PURE__ */ jsxs(KeyValueList, { children: [
+        /* @__PURE__ */ jsx(SkeletonRow, { valueWidth: "95%" }),
+        /* @__PURE__ */ jsx(SkeletonRow, { valueWidth: "55%" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: "Origin" }),
+      /* @__PURE__ */ jsxs(KeyValueList, { children: [
+        /* @__PURE__ */ jsx(SkeletonRow, { valueWidth: "30%" }),
+        /* @__PURE__ */ jsx(SkeletonRow, { valueWidth: "50%" }),
+        /* @__PURE__ */ jsx(SkeletonRow, { valueWidth: "65%" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: "Timeline" }),
+      /* @__PURE__ */ jsxs(KeyValueList, { children: [
+        /* @__PURE__ */ jsx(SkeletonRow, { valueWidth: "35%" }),
+        /* @__PURE__ */ jsx(SkeletonRow, { valueWidth: "30%" })
+      ] })
+    ] })
+  ] }),
+  /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsx(CardTitle, { children: "Payload" }),
+    /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", width: "100%", height: 140 })
+  ] })
+] });
+const MetaGrid = stylin(Box)(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
+  gap: theme.spacing(2),
+  alignItems: "stretch"
+}));
+const Card = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(1.5),
+  padding: theme.spacing(2.5),
+  backgroundColor: theme.palette.background.paper,
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: 1
+}));
+const CardTitle = stylin(Typography)(({ theme }) => ({
+  fontSize: "0.6875rem",
+  fontWeight: 600,
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  color: theme.palette.text.secondary
+}));
+const KeyValueList = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(0.75)
+}));
+const KeyValueRowBox = stylin(Box)(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: `${theme.spacing(10)} 1fr`,
+  gap: theme.spacing(1.5),
+  alignItems: "center"
+}));
+
+export { GeneralTabLoading };
+//# sourceMappingURL=GeneralTab.loading.esm.js.map

package/dist/features/resource/tabs/GeneralTab.loading.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeneralTab.loading.esm.js","sources":["../../../../src/features/resource/tabs/GeneralTab.loading.tsx"],"sourcesContent":["import Box from '@massdriver/ui/Box';\nimport Skeleton from '@massdriver/ui/Skeleton';\nimport Typography from '@massdriver/ui/Typography';\nimport stylin from '@massdriver/ui/stylin';\n\n// Ported from apps/web/features/resources/sections/GeneralTab/GeneralTab.loading.js.\n// Mirrors the view's card grid + payload block so the loading-to-content\n// transition stays seamless.\n\nconst SkeletonRow = ({ valueWidth = '60%' }: { valueWidth?: string }) => (\n  <KeyValueRowBox>\n    <Skeleton variant=\"text\" width=\"55%\" />\n    <Skeleton variant=\"text\" width={valueWidth} />\n  </KeyValueRowBox>\n);\n\nexport const GeneralTabLoading = () => (\n  <>\n    <MetaGrid>\n      <Card>\n        <CardTitle>Identifiers</CardTitle>\n        <KeyValueList>\n          <SkeletonRow valueWidth=\"95%\" />\n          <SkeletonRow valueWidth=\"55%\" />\n        </KeyValueList>\n      </Card>\n      <Card>\n        <CardTitle>Origin</CardTitle>\n        <KeyValueList>\n          <SkeletonRow valueWidth=\"30%\" />\n          <SkeletonRow valueWidth=\"50%\" />\n          <SkeletonRow valueWidth=\"65%\" />\n        </KeyValueList>\n      </Card>\n      <Card>\n        <CardTitle>Timeline</CardTitle>\n        <KeyValueList>\n          <SkeletonRow valueWidth=\"35%\" />\n          <SkeletonRow valueWidth=\"30%\" />\n        </KeyValueList>\n      </Card>\n    </MetaGrid>\n\n    <Card>\n      <CardTitle>Payload</CardTitle>\n      <Skeleton variant=\"rounded\" width=\"100%\" height={140} />\n    </Card>\n  </>\n);\n\nexport default GeneralTabLoading;\n\nconst MetaGrid = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'grid',\n  gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',\n  gap: theme.spacing(2),\n  alignItems: 'stretch',\n}));\n\nconst Card = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(1.5),\n  padding: theme.spacing(2.5),\n  backgroundColor: theme.palette.background.paper,\n  border: `1px solid ${theme.palette.divider}`,\n  borderRadius: 1,\n}));\n\nconst CardTitle = stylin(Typography)(({ theme }: { theme: any }) => ({\n  fontSize: '0.6875rem',\n  fontWeight: 600,\n  textTransform: 'uppercase',\n  letterSpacing: '0.05em',\n  color: theme.palette.text.secondary,\n}));\n\nconst KeyValueList = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.75),\n}));\n\nconst KeyValueRowBox = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'grid',\n  gridTemplateColumns: `${theme.spacing(10)} 1fr`,\n  gap: theme.spacing(1.5),\n  alignItems: 'center',\n}));\n"],"names":[],"mappings":"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"}

package/dist/features/resource/tabs/PermissionsTab.esm.js

@@ -0,0 +1,57 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useApi } from '@backstage/frontend-plugin-api';
+import { resourceTabUrl } from '@massdriver/backstage-plugin-common';
+import Alert from '@massdriver/ui/Alert';
+import DataList from '@massdriver/ui/DataList';
+import useAsync from 'react-use/esm/useAsync';
+import { massdriverApiRef } from '../../../api.esm.js';
+import { OpenInMassdriverButton } from '../../../components/OpenInMassdriverButton.esm.js';
+import { mapGrantToRow, buildGrantColumns } from '../../../components/grantColumns.esm.js';
+import { RESOURCE_GRANTS_QUERY } from '../queries.esm.js';
+import { SettingsTabLayout } from './SettingsTabLayout.esm.js';
+import { TabHeader } from './TabHeader.esm.js';
+
+const PermissionsTab = ({ resourceId }) => {
+  const api = useApi(massdriverApiRef);
+  const {
+    value: resource,
+    loading,
+    error
+  } = useAsync(async () => {
+    const data = await api.query(RESOURCE_GRANTS_QUERY, {
+      id: resourceId
+    });
+    return data.resource;
+  }, [api, resourceId]);
+  const manageUrl = resourceTabUrl(
+    api.appUrl,
+    api.organizationId,
+    resourceId,
+    "permissions"
+  );
+  const rows = (resource?.grants?.items ?? []).filter(Boolean).map((grant) => mapGrantToRow(grant));
+  const columns = buildGrantColumns({ manageUrl });
+  return /* @__PURE__ */ jsxs(SettingsTabLayout, { children: [
+    /* @__PURE__ */ jsx(
+      TabHeader,
+      {
+        title: "Permissions",
+        description: "Share this resource with other environments. Each permission grants resource:export to recipient environments whose attributes match the conditions.",
+        actions: /* @__PURE__ */ jsx(OpenInMassdriverButton, { url: manageUrl, children: "Add permission" })
+      }
+    ),
+    error ? /* @__PURE__ */ jsx(Alert, { severity: "error", children: String(error.message ?? error) }) : /* @__PURE__ */ jsx(
+      DataList,
+      {
+        rows,
+        columns,
+        loading,
+        emptyMessage: "No permissions yet. Add one to share this resource with other environments.",
+        variant: "outlined"
+      }
+    )
+  ] });
+};
+
+export { PermissionsTab };
+//# sourceMappingURL=PermissionsTab.esm.js.map

package/dist/features/resource/tabs/PermissionsTab.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PermissionsTab.esm.js","sources":["../../../../src/features/resource/tabs/PermissionsTab.tsx"],"sourcesContent":["import { useApi } from '@backstage/frontend-plugin-api';\nimport { resourceTabUrl } from '@massdriver/backstage-plugin-common';\nimport Alert from '@massdriver/ui/Alert';\nimport DataList from '@massdriver/ui/DataList';\nimport useAsync from 'react-use/esm/useAsync';\nimport { massdriverApiRef } from '../../../api';\nimport { OpenInMassdriverButton } from '../../../components/OpenInMassdriverButton';\nimport {\n  buildGrantColumns,\n  Grant,\n  mapGrantToRow,\n} from '../../../components/grantColumns';\nimport { RESOURCE_GRANTS_QUERY } from '../queries';\nimport { SettingsTabLayout } from './SettingsTabLayout';\nimport { TabHeader } from './TabHeader';\n\n// Ported from apps/web/features/resources/sections/PermissionsTab/. The web\n// app's Add/Remove grant actions mutate; here they deep-link out to this\n// resource's Permissions tab in the Massdriver web app (read-only parity).\n\ninterface GrantsResource {\n  id: string;\n  name?: string | null;\n  grants?: { items?: (Grant | null)[] | null } | null;\n}\n\n/** Read-only Permissions tab: resource grants shared with other environments. */\nexport const PermissionsTab = ({ resourceId }: { resourceId: string }) => {\n  const api = useApi(massdriverApiRef);\n  const {\n    value: resource,\n    loading,\n    error,\n  } = useAsync(async () => {\n    const data = (await api.query(RESOURCE_GRANTS_QUERY, {\n      id: resourceId,\n    })) as { resource: GrantsResource | null };\n    return data.resource;\n  }, [api, resourceId]);\n\n  const manageUrl = resourceTabUrl(\n    api.appUrl,\n    api.organizationId,\n    resourceId,\n    'permissions',\n  );\n  const rows = (resource?.grants?.items ?? [])\n    .filter(Boolean)\n    .map(grant => mapGrantToRow(grant as Grant));\n  const columns = buildGrantColumns({ manageUrl });\n\n  return (\n    <SettingsTabLayout>\n      <TabHeader\n        title=\"Permissions\"\n        description=\"Share this resource with other environments. Each permission grants resource:export to recipient environments whose attributes match the conditions.\"\n        actions={\n          <OpenInMassdriverButton url={manageUrl}>\n            Add permission\n          </OpenInMassdriverButton>\n        }\n      />\n      {error ? (\n        <Alert severity=\"error\">{String(error.message ?? error)}</Alert>\n      ) : (\n        <DataList\n          rows={rows}\n          columns={columns}\n          loading={loading}\n          emptyMessage=\"No permissions yet. Add one to share this resource with other environments.\"\n          variant=\"outlined\"\n        />\n      )}\n    </SettingsTabLayout>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AA2BO,MAAM,cAAA,GAAiB,CAAC,EAAE,UAAA,EAAW,KAA8B;AACxE,EAAA,MAAM,GAAA,GAAM,OAAO,gBAAgB,CAAA;AACnC,EAAA,MAAM;AAAA,IACJ,KAAA,EAAO,QAAA;AAAA,IACP,OAAA;AAAA,IACA;AAAA,GACF,GAAI,SAAS,YAAY;AACvB,IAAA,MAAM,IAAA,GAAQ,MAAM,GAAA,CAAI,KAAA,CAAM,qBAAA,EAAuB;AAAA,MACnD,EAAA,EAAI;AAAA,KACL,CAAA;AACD,IAAA,OAAO,IAAA,CAAK,QAAA;AAAA,EACd,CAAA,EAAG,CAAC,GAAA,EAAK,UAAU,CAAC,CAAA;AAEpB,EAAA,MAAM,SAAA,GAAY,cAAA;AAAA,IAChB,GAAA,CAAI,MAAA;AAAA,IACJ,GAAA,CAAI,cAAA;AAAA,IACJ,UAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,IAAA,GAAA,CAAQ,QAAA,EAAU,MAAA,EAAQ,KAAA,IAAS,EAAC,EACvC,MAAA,CAAO,OAAO,CAAA,CACd,GAAA,CAAI,CAAA,KAAA,KAAS,aAAA,CAAc,KAAc,CAAC,CAAA;AAC7C,EAAA,MAAM,OAAA,GAAU,iBAAA,CAAkB,EAAE,SAAA,EAAW,CAAA;AAE/C,EAAA,4BACG,iBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAM,aAAA;AAAA,QACN,WAAA,EAAY,sJAAA;AAAA,QACZ,OAAA,kBACE,GAAA,CAAC,sBAAA,EAAA,EAAuB,GAAA,EAAK,WAAW,QAAA,EAAA,gBAAA,EAExC;AAAA;AAAA,KAEJ;AAAA,IACC,KAAA,mBACC,GAAA,CAAC,KAAA,EAAA,EAAM,QAAA,EAAS,OAAA,EAAS,iBAAO,KAAA,CAAM,OAAA,IAAW,KAAK,CAAA,EAAE,CAAA,mBAExD,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,OAAA;AAAA,QACA,OAAA;AAAA,QACA,YAAA,EAAa,6EAAA;AAAA,QACb,OAAA,EAAQ;AAAA;AAAA;AACV,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/features/resource/tabs/SettingsTabLayout.esm.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import Box from '@massdriver/ui/Box';
+import stylin from '@massdriver/ui/stylin';
+
+const SettingsTabLayout = ({ children }) => /* @__PURE__ */ jsx(Wrapper, { children });
+const Wrapper = stylin(Box)(({ theme }) => ({
+  padding: theme.spacing(4),
+  maxWidth: theme.spacing(160),
+  marginLeft: "auto",
+  marginRight: "auto",
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(3)
+}));
+
+export { SettingsTabLayout };
+//# sourceMappingURL=SettingsTabLayout.esm.js.map

package/dist/features/resource/tabs/SettingsTabLayout.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsTabLayout.esm.js","sources":["../../../../src/features/resource/tabs/SettingsTabLayout.tsx"],"sourcesContent":["import Box from '@massdriver/ui/Box';\nimport stylin from '@massdriver/ui/stylin';\nimport { ReactNode } from 'react';\n\n// Ported from apps/web/shared/components/SettingsTabLayout.js. The plugin can't\n// import the web app's shared components, so this is a local, faithful copy used\n// by the resource detail tabs (Usage, Permissions).\nexport const SettingsTabLayout = ({ children }: { children: ReactNode }) => (\n  <Wrapper>{children}</Wrapper>\n);\n\nexport default SettingsTabLayout;\n\nconst Wrapper = stylin(Box)(({ theme }: { theme: any }) => ({\n  padding: theme.spacing(4),\n  maxWidth: theme.spacing(160),\n  marginLeft: 'auto',\n  marginRight: 'auto',\n  width: '100%',\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(3),\n}));\n"],"names":[],"mappings":";;;;AAOO,MAAM,oBAAoB,CAAC,EAAE,UAAS,qBAC3C,GAAA,CAAC,WAAS,QAAA,EAAS;AAKrB,MAAM,UAAU,MAAA,CAAO,GAAG,EAAE,CAAC,EAAE,OAAM,MAAuB;AAAA,EAC1D,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,EACxB,QAAA,EAAU,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA;AAAA,EAC3B,UAAA,EAAY,MAAA;AAAA,EACZ,WAAA,EAAa,MAAA;AAAA,EACb,KAAA,EAAO,MAAA;AAAA,EACP,OAAA,EAAS,MAAA;AAAA,EACT,aAAA,EAAe,QAAA;AAAA,EACf,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC;AACtB,CAAA,CAAE,CAAA;;;;"}