@igstack/app-catalog-frontend-core 0.3.1-alpha-20260403020019 → 0.3.1-alpha-20260405015231

package/dist/esm/__tests__/integration/mock-backend/MockBackendConfigurer.d.ts

@@ -1,4 +1,4 @@
-import { AppApprovalMethod, AppForCatalog, GroupingTagDefinition } from '@igstack/app-catalog-backend-core';
+import { AppApprovalMethod, AppForCatalog, GroupingTagDefinition, SubResource } from '@igstack/app-catalog-backend-core';
 import { MockDb } from './MockDb.js';
 import { MockUserContext, UserConfig } from './MockUserContext.js';
 export declare class MockBackendConfigurer {
@@ -8,6 +8,9 @@ export declare class MockBackendConfigurer {
     withApp(overrides?: Partial<AppForCatalog>): AppForCatalog;
     withTag(overrides?: Partial<GroupingTagDefinition>): GroupingTagDefinition;
     withApprovalMethod(overrides?: Partial<AppApprovalMethod>): AppApprovalMethod;
+    withSubResource(overrides: Partial<SubResource> & {
+        appSlug: string;
+    }): SubResource;
     withUser(overrides: Partial<UserConfig>): void;
 }
 /** Reset the counter between tests */

package/dist/esm/__tests__/integration/mock-backend/MockDb.d.ts

@@ -1,12 +1,14 @@
-import { AppApprovalMethod, AppCatalogData, AppForCatalog, GroupingTagDefinition } from '@igstack/app-catalog-backend-core';
+import { AppApprovalMethod, AppCatalogData, AppForCatalog, GroupingTagDefinition, SubResource } from '@igstack/app-catalog-backend-core';
 export declare class MockDb {
     apps: AppForCatalog[];
     tagsDefinitions: GroupingTagDefinition[];
     approvalMethods: AppApprovalMethod[];
+    subResources: SubResource[];
     upsertApp(app: AppForCatalog): void;
     getApps(): AppForCatalog[];
     getApp(slug: string): AppForCatalog;
     setTagDefinitions(defs: GroupingTagDefinition[]): void;
     setApprovalMethods(methods: AppApprovalMethod[]): void;
+    addSubResource(sr: SubResource): void;
     getAppCatalogData(): AppCatalogData;
 }

package/dist/esm/__tests__/integration/tools/AppDetailTools.d.ts

@@ -17,6 +17,15 @@ export declare class AppDetailTools {
      * Scrape all visible data from the app detail panel into a structured object.
      */
     getVisibleData(): AppVisibleData;
+    /**
+     * Get the sub-resources section data from the detail panel.
+     * Returns null if no sub-resources section is visible.
+     */
+    getSubResources(): {
+        total: number;
+        visible: number;
+        names: string[];
+    } | null;
     screenshots: {
         /**
          * Click the screenshot preview to open the gallery modal.

package/dist/esm/__tests__/integration/tools/CatalogTools.d.ts

@@ -26,4 +26,8 @@ export declare class CatalogTools {
      * Whether the onboarding/welcome card is visible.
      */
     isOnboardingVisible(): boolean;
+    /**
+     * Get the main catalog table (first table on page, skipping sub-resource tables in detail panel).
+     */
+    private getCatalogTable;
 }

package/dist/esm/__tests__/modules/appCatalog/utils/searchApps.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/modules/appCatalog/context/AppCatalogContext.d.ts

@@ -1,10 +1,13 @@
-import { AppApprovalMethod, AppForCatalog, AppVersionInfo, GroupingTagDefinition } from '@igstack/app-catalog-backend-core';
+import { AppApprovalMethod, AppForCatalog, AppVersionInfo, Group, GroupingTagDefinition, Person, SubResource } from '@igstack/app-catalog-backend-core';
 import { ReactNode } from 'react';
 export interface AppCatalogContextIface {
     apps: AppForCatalog[];
     isLoadingApps: boolean;
     tagsDefinitions: GroupingTagDefinition[];
     approvalMethods: AppApprovalMethod[];
+    persons: Person[];
+    groups: Group[];
+    subResources?: SubResource[];
     versions?: AppVersionInfo;
 }
 export declare const AppCatalogContext: import('react').Context<AppCatalogContextIface | undefined>;

package/dist/esm/modules/appCatalog/context/AppCatalogContext.js

@@ -27,6 +27,9 @@ function AppCatalogProvider({ children }) {
       isLoadingApps,
       tagsDefinitions: (data == null ? void 0 : data.tagsDefinitions) ?? [],
       approvalMethods: (data == null ? void 0 : data.approvalMethods) ?? [],
+      persons: (data == null ? void 0 : data.persons) ?? [],
+      groups: (data == null ? void 0 : data.groups) ?? [],
+      subResources: (data == null ? void 0 : data.subResources) ?? [],
       versions: {
         ...data == null ? void 0 : data.versions,
         ...uiSettings.frontendBuildId && {
@@ -40,6 +43,9 @@ function AppCatalogProvider({ children }) {
       data == null ? void 0 : data.approvalMethods,
       data == null ? void 0 : data.apps,
       data == null ? void 0 : data.tagsDefinitions,
+      data == null ? void 0 : data.persons,
+      data == null ? void 0 : data.groups,
+      data == null ? void 0 : data.subResources,
       data == null ? void 0 : data.versions,
       uiSettings.frontendBuildId,
       isLoadingApps

package/dist/esm/modules/appCatalog/context/AppCatalogContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppCatalogContext.js","sources":["../../../../../src/modules/appCatalog/context/AppCatalogContext.tsx"],"sourcesContent":["import type {\n  AppApprovalMethod,\n  AppForCatalog,\n  AppVersionInfo,\n  GroupingTagDefinition,\n} from '@igstack/app-catalog-backend-core'\nimport { useQuery } from '@tanstack/react-query'\nimport type { ReactNode } from 'react'\nimport { createContext, use, useEffect, useMemo } from 'react'\nimport { ApiQueryMagazineAppCatalog } from '~/modules/appCatalog'\nimport { useUiSettings } from '~/context/UiSettingsContext'\n\nexport interface AppCatalogContextIface {\n  apps: AppForCatalog[]\n  isLoadingApps: boolean\n  tagsDefinitions: GroupingTagDefinition[]\n  approvalMethods: AppApprovalMethod[]\n  versions?: AppVersionInfo\n}\n\nexport const AppCatalogContext = createContext<\n  AppCatalogContextIface | undefined\n>(undefined)\n\ninterface AppCatalogProviderProps {\n  children: ReactNode\n}\n\nexport function AppCatalogProvider({ children }: AppCatalogProviderProps) {\n  const { data, isLoading: isLoadingApps } = useQuery(\n    ApiQueryMagazineAppCatalog.getAppCatalog(),\n  )\n  const uiSettings = useUiSettings()\n\n  const contextValue = useMemo<AppCatalogContextIface>(\n    () => ({\n      apps: data?.apps ?? [],\n      isLoadingApps,\n      tagsDefinitions: data?.tagsDefinitions ?? [],\n      approvalMethods: data?.approvalMethods ?? [],\n      versions: {\n        ...data?.versions,\n        ...(uiSettings.frontendBuildId && {\n          frontend: {\n            displayName:\n              uiSettings.frontendBuildId === 'local'\n                ? 'local'\n                : `#${uiSettings.frontendBuildId}`,\n          },\n        }),\n      },\n    }),\n    [\n      data?.approvalMethods,\n      data?.apps,\n      data?.tagsDefinitions,\n      data?.versions,\n      uiSettings.frontendBuildId,\n      isLoadingApps,\n    ],\n  )\n\n  // Update document title based on backend version\n  useEffect(() => {\n    if (data?.versions?.backend?.displayName === 'local') {\n      document.title = 'Local'\n    } else {\n      document.title = 'App Catalog'\n    }\n  }, [data?.versions?.backend?.displayName])\n\n  return <AppCatalogContext value={contextValue}>{children}</AppCatalogContext>\n}\n\nexport function useAppCatalogContext(): AppCatalogContextIface {\n  const context = use(AppCatalogContext)\n  if (!context) {\n    throw new Error(\n      'useAppCatalogContext must be used within AppCatalogProvider',\n    )\n  }\n  return context\n}\n"],"names":["_b","_a"],"mappings":";;;;;;;;;;;;;;;;AAoBO,MAAM,oBAAoB,cAE/B,MAAS;AAMJ,SAAS,mBAAmB,EAAE,YAAqC;;AACxE,QAAM,EAAE,MAAM,WAAW,cAAA,IAAkB;AAAA,IACzC,2BAA2B,cAAA;AAAA,EAAc;AAE3C,QAAM,aAAa,cAAA;AAEnB,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,MACL,OAAM,6BAAM,SAAQ,CAAA;AAAA,MACpB;AAAA,MACA,kBAAiB,6BAAM,oBAAmB,CAAA;AAAA,MAC1C,kBAAiB,6BAAM,oBAAmB,CAAA;AAAA,MAC1C,UAAU;AAAA,QACR,GAAG,6BAAM;AAAA,QACT,GAAI,WAAW,mBAAmB;AAAA,UAChC,UAAU;AAAA,YACR,aACE,WAAW,oBAAoB,UAC3B,UACA,IAAI,WAAW,eAAe;AAAA,UAAA;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAAA,IAEF;AAAA,MACE,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,WAAW;AAAA,MACX;AAAA,IAAA;AAAA,EACF;AAIF,YAAU,MAAM;;AACd,UAAIA,OAAAC,MAAA,6BAAM,aAAN,gBAAAA,IAAgB,YAAhB,gBAAAD,IAAyB,iBAAgB,SAAS;AACpD,eAAS,QAAQ;AAAA,IACnB,OAAO;AACL,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,EAAC,wCAAM,aAAN,mBAAgB,YAAhB,mBAAyB,WAAW,CAAC;AAEzC,SAAO,oBAAC,mBAAA,EAAkB,OAAO,cAAe,SAAA,CAAS;AAC3D;AAEO,SAAS,uBAA+C;AAC7D,QAAM,UAAU,IAAI,iBAAiB;AACrC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACA,SAAO;AACT;"}
+{"version":3,"file":"AppCatalogContext.js","sources":["../../../../../src/modules/appCatalog/context/AppCatalogContext.tsx"],"sourcesContent":["import type {\n  AppApprovalMethod,\n  AppForCatalog,\n  AppVersionInfo,\n  Group,\n  GroupingTagDefinition,\n  Person,\n  SubResource,\n} from '@igstack/app-catalog-backend-core'\nimport { useQuery } from '@tanstack/react-query'\nimport type { ReactNode } from 'react'\nimport { createContext, use, useEffect, useMemo } from 'react'\nimport { ApiQueryMagazineAppCatalog } from '~/modules/appCatalog'\nimport { useUiSettings } from '~/context/UiSettingsContext'\n\nexport interface AppCatalogContextIface {\n  apps: AppForCatalog[]\n  isLoadingApps: boolean\n  tagsDefinitions: GroupingTagDefinition[]\n  approvalMethods: AppApprovalMethod[]\n  persons: Person[]\n  groups: Group[]\n  subResources?: SubResource[]\n  versions?: AppVersionInfo\n}\n\nexport const AppCatalogContext = createContext<\n  AppCatalogContextIface | undefined\n>(undefined)\n\ninterface AppCatalogProviderProps {\n  children: ReactNode\n}\n\nexport function AppCatalogProvider({ children }: AppCatalogProviderProps) {\n  const { data, isLoading: isLoadingApps } = useQuery(\n    ApiQueryMagazineAppCatalog.getAppCatalog(),\n  )\n  const uiSettings = useUiSettings()\n\n  const contextValue = useMemo<AppCatalogContextIface>(\n    () => ({\n      apps: data?.apps ?? [],\n      isLoadingApps,\n      tagsDefinitions: data?.tagsDefinitions ?? [],\n      approvalMethods: data?.approvalMethods ?? [],\n      persons: data?.persons ?? [],\n      groups: data?.groups ?? [],\n      subResources: data?.subResources ?? [],\n      versions: {\n        ...data?.versions,\n        ...(uiSettings.frontendBuildId && {\n          frontend: {\n            displayName:\n              uiSettings.frontendBuildId === 'local'\n                ? 'local'\n                : `#${uiSettings.frontendBuildId}`,\n          },\n        }),\n      },\n    }),\n    [\n      data?.approvalMethods,\n      data?.apps,\n      data?.tagsDefinitions,\n      data?.persons,\n      data?.groups,\n      data?.subResources,\n      data?.versions,\n      uiSettings.frontendBuildId,\n      isLoadingApps,\n    ],\n  )\n\n  // Update document title based on backend version\n  useEffect(() => {\n    if (data?.versions?.backend?.displayName === 'local') {\n      document.title = 'Local'\n    } else {\n      document.title = 'App Catalog'\n    }\n  }, [data?.versions?.backend?.displayName])\n\n  return <AppCatalogContext value={contextValue}>{children}</AppCatalogContext>\n}\n\nexport function useAppCatalogContext(): AppCatalogContextIface {\n  const context = use(AppCatalogContext)\n  if (!context) {\n    throw new Error(\n      'useAppCatalogContext must be used within AppCatalogProvider',\n    )\n  }\n  return context\n}\n"],"names":["_b","_a"],"mappings":";;;;;;;;;;;;;;;;AA0BO,MAAM,oBAAoB,cAE/B,MAAS;AAMJ,SAAS,mBAAmB,EAAE,YAAqC;;AACxE,QAAM,EAAE,MAAM,WAAW,cAAA,IAAkB;AAAA,IACzC,2BAA2B,cAAA;AAAA,EAAc;AAE3C,QAAM,aAAa,cAAA;AAEnB,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,MACL,OAAM,6BAAM,SAAQ,CAAA;AAAA,MACpB;AAAA,MACA,kBAAiB,6BAAM,oBAAmB,CAAA;AAAA,MAC1C,kBAAiB,6BAAM,oBAAmB,CAAA;AAAA,MAC1C,UAAS,6BAAM,YAAW,CAAA;AAAA,MAC1B,SAAQ,6BAAM,WAAU,CAAA;AAAA,MACxB,eAAc,6BAAM,iBAAgB,CAAA;AAAA,MACpC,UAAU;AAAA,QACR,GAAG,6BAAM;AAAA,QACT,GAAI,WAAW,mBAAmB;AAAA,UAChC,UAAU;AAAA,YACR,aACE,WAAW,oBAAoB,UAC3B,UACA,IAAI,WAAW,eAAe;AAAA,UAAA;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAAA,IAEF;AAAA,MACE,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,WAAW;AAAA,MACX;AAAA,IAAA;AAAA,EACF;AAIF,YAAU,MAAM;;AACd,UAAIA,OAAAC,MAAA,6BAAM,aAAN,gBAAAA,IAAgB,YAAhB,gBAAAD,IAAyB,iBAAgB,SAAS;AACpD,eAAS,QAAQ;AAAA,IACnB,OAAO;AACL,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,EAAC,wCAAM,aAAN,mBAAgB,YAAhB,mBAAyB,WAAW,CAAC;AAEzC,SAAO,oBAAC,mBAAA,EAAkB,OAAO,cAAe,SAAA,CAAS;AAC3D;AAEO,SAAS,uBAA+C;AAC7D,QAAM,UAAU,IAAI,iBAAiB;AACrC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACA,SAAO;AACT;"}

package/dist/esm/modules/appCatalog/hooks/useUpdateApp.d.ts

@@ -23,7 +23,7 @@ export declare function useUpdateApp(): import('@tanstack/react-query').UseMutat
     description?: string | undefined;
     teams?: string[] | undefined;
     accessRequest?: {
-        approvalMethodId: string;
+        approvalMethodSlug: string;
         comments?: string | undefined;
         urls?: {
             url: string;
@@ -36,11 +36,7 @@ export declare function useUpdateApp(): import('@tanstack/react-query').UseMutat
             description?: string | undefined;
             adminNotes?: string | undefined;
         }[] | undefined;
-        approvers?: {
-            displayName: string;
-            contact?: string | undefined;
-        }[] | undefined;
-        whoToReachOut?: string | undefined;
+        approverPersonSlugs?: string[] | undefined;
     } | undefined;
     notes?: string | undefined;
     tags?: string[] | undefined;
@@ -53,6 +49,28 @@ export declare function useUpdateApp(): import('@tanstack/react-query').UseMutat
     screenshotIds?: string[] | undefined;
     aiPrompt?: string | undefined;
     urlIssues?: string[] | undefined;
+    tiers?: {
+        tierSlug: string;
+        displayName?: string | undefined;
+        description?: string | undefined;
+        accessRequest?: {
+            approvalMethodSlug: string;
+            comments?: string | undefined;
+            urls?: {
+                url: string;
+                label?: string | undefined;
+            }[] | undefined;
+            requestPrompt?: string | undefined;
+            postApprovalInstructions?: string | undefined;
+            roles?: {
+                displayName: string;
+                description?: string | undefined;
+                adminNotes?: string | undefined;
+            }[] | undefined;
+            approverPersonSlugs?: string[] | undefined;
+        } | undefined;
+        appUrl?: string | undefined;
+    }[] | undefined;
     sources?: string[] | {
         sourceSlug: string;
         url: string;

package/dist/esm/modules/appCatalog/ui/components/AccessRequestSection.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { ExternalLink, Check, Copy, Settings, Users, Bot } from "lucide-react";
+import { ExternalLink, Settings, Users, Bot, Check, Copy } from "lucide-react";
 import { useCallback, useState, useRef, useEffect } from "react";
 import ReactMarkdown from "react-markdown";
-import { Badge } from "../../../../ui/badge.js";
 import { Button } from "../../../../ui/button.js";
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "../../../../ui/accordion.js";
 import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "../../../../ui/table.js";
+import { PersonBadge } from "./PersonBadge.js";
 const COPY_FEEDBACK_DURATION = 2e3;
 const MarkdownLink = ({
   href,
@@ -27,6 +27,8 @@ function getApprovalMethodIcon(type) {
     case "personTeam":
       return /* @__PURE__ */ jsx(Users, { className: "size-5 text-primary" });
     case "custom":
+    case "noAccessRequired":
+    case "unknown":
       return /* @__PURE__ */ jsx(Settings, { className: "size-5 text-primary" });
   }
 }
@@ -92,19 +94,13 @@ function AccessRequestSection({
   const { copiedId, copyToClipboard } = useCopyToClipboard();
   const accessRequest = app.accessRequest;
   const approvalMethod = approvalMethods.find(
-    (m) => m.slug === (accessRequest == null ? void 0 : accessRequest.approvalMethodId)
+    (m) => m.slug === (accessRequest == null ? void 0 : accessRequest.approvalMethodSlug)
   );
   const handleCopyPrompt = useCallback(() => {
     if (accessRequest == null ? void 0 : accessRequest.requestPrompt) {
       copyToClipboard(accessRequest.requestPrompt, "prompt");
     }
   }, [accessRequest == null ? void 0 : accessRequest.requestPrompt, copyToClipboard]);
-  const handleCopyApproverEmail = useCallback(
-    (email, index) => {
-      copyToClipboard(email, `approver-${index}`);
-    },
-    [copyToClipboard]
-  );
   if (!accessRequest) return null;
   return /* @__PURE__ */ jsxs("div", { className: "mt-6 space-y-4", children: [
     /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: "Access Request" }),
@@ -171,55 +167,9 @@ function AccessRequestSection({
         ] }, `${role.displayName}-${idx}`)) })
       ] }) })
     ] }),
-    accessRequest.approvers && accessRequest.approvers.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+    accessRequest.approverPersonSlugs && accessRequest.approverPersonSlugs.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h4", { className: "mb-2 text-sm font-medium", children: "Approvers" }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: accessRequest.approvers.map((approver, idx) => {
-        const approverId = `approver-${idx}`;
-        const isCopied = copiedId === approverId;
-        return /* @__PURE__ */ jsxs(
-          Badge,
-          {
-            variant: "outline",
-            className: "font-normal inline-flex items-center gap-1",
-            children: [
-              approver.displayName,
-              approver.contact && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsxs("span", { className: "text-xs opacity-70", children: [
-                  "(",
-                  approver.contact,
-                  ")"
-                ] }),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      handleCopyApproverEmail(approver.contact, idx);
-                    },
-                    className: "inline-flex items-center justify-center hover:bg-accent rounded p-0.5 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1",
-                    "aria-label": `Copy ${approver.displayName}'s email`,
-                    title: isCopied ? "Copied!" : "Copy email",
-                    children: isCopied ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-green-600" }),
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: "sr-only",
-                          role: "status",
-                          "aria-live": "polite",
-                          children: "Email copied to clipboard"
-                        }
-                      )
-                    ] }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3 opacity-50 hover:opacity-100" })
-                  }
-                )
-              ] })
-            ]
-          },
-          `${approver.displayName}-${idx}`
-        );
-      }) })
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: accessRequest.approverPersonSlugs.map((slug) => /* @__PURE__ */ jsx(PersonBadge, { slug }, slug)) })
     ] }),
     accessRequest.urls && accessRequest.urls.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h4", { className: "mb-2 text-sm font-medium", children: "Documentation" }),

package/dist/esm/modules/appCatalog/ui/components/AccessRequestSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccessRequestSection.js","sources":["../../../../../../src/modules/appCatalog/ui/components/AccessRequestSection.tsx"],"sourcesContent":["import type {\n  AppApprovalMethod,\n  AppForCatalog,\n} from '@igstack/app-catalog-backend-core'\nimport { Bot, Check, Copy, ExternalLink, Settings, Users } from 'lucide-react'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport ReactMarkdown from 'react-markdown'\nimport { Badge } from '~/ui/badge'\nimport { Button } from '~/ui/button'\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from '~/ui/accordion'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '~/ui/table'\n\n// Constants\nconst COPY_FEEDBACK_DURATION = 2000\n\ninterface AccessRequestSectionProps {\n  app: AppForCatalog\n  approvalMethods: AppApprovalMethod[]\n}\n\n// Component for rendering markdown links with security attributes\nconst MarkdownLink = ({\n  href,\n  children,\n}: {\n  href?: string\n  children?: React.ReactNode\n}) => (\n  <a\n    href={href}\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    className=\"text-primary hover:underline\"\n  >\n    {children}\n  </a>\n)\n\n// Helper function for approval method icons\nfunction getApprovalMethodIcon(type: 'service' | 'personTeam' | 'custom') {\n  switch (type) {\n    case 'service':\n      return <Bot className=\"size-5 text-primary\" />\n    case 'personTeam':\n      return <Users className=\"size-5 text-primary\" />\n    case 'custom':\n      return <Settings className=\"size-5 text-primary\" />\n  }\n}\n\n/**\n * Custom hook for handling copy-to-clipboard functionality with feedback\n * Includes proper cleanup to prevent memory leaks\n */\nfunction useCopyToClipboard() {\n  const [copiedId, setCopiedId] = useState<string | null>(null)\n  const [error, setError] = useState<string | null>(null)\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null)\n\n  // Cleanup timeout on unmount\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current)\n      }\n    }\n  }, [])\n\n  const copyToClipboard = useCallback(async (text: string, id: string) => {\n    // Clear existing timeout\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current)\n    }\n\n    try {\n      await navigator.clipboard.writeText(text)\n      setCopiedId(id)\n      setError(null)\n\n      // Set new timeout with cleanup\n      timeoutRef.current = setTimeout(() => {\n        setCopiedId(null)\n      }, COPY_FEEDBACK_DURATION)\n    } catch (err) {\n      console.error('Failed to copy to clipboard:', err)\n      setError('Failed to copy')\n\n      // Clear error after duration\n      timeoutRef.current = setTimeout(() => {\n        setError(null)\n      }, COPY_FEEDBACK_DURATION)\n    }\n  }, [])\n\n  return { copiedId, error, copyToClipboard }\n}\n\n/**\n * Reusable copy button component with accessibility\n */\ninterface CopyButtonProps {\n  onCopy: () => void\n  isCopied: boolean\n  ariaLabel: string\n  className?: string\n}\n\nfunction CopyButton({\n  onCopy,\n  isCopied,\n  ariaLabel,\n  className,\n}: CopyButtonProps) {\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"sm\"\n      onClick={onCopy}\n      className={className}\n      aria-label={ariaLabel}\n      title={isCopied ? 'Copied!' : 'Copy to clipboard'}\n    >\n      {isCopied ? (\n        <>\n          <Check className=\"h-3.5 w-3.5 text-green-600\" />\n          <span className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n            Copied to clipboard\n          </span>\n        </>\n      ) : (\n        <Copy className=\"h-3.5 w-3.5\" />\n      )}\n    </Button>\n  )\n}\n\nexport function AccessRequestSection({\n  app,\n  approvalMethods,\n}: AccessRequestSectionProps) {\n  const { copiedId, copyToClipboard } = useCopyToClipboard()\n  const accessRequest = app.accessRequest\n  const approvalMethod = approvalMethods.find(\n    (m) => m.slug === accessRequest?.approvalMethodId,\n  )\n\n  const handleCopyPrompt = useCallback(() => {\n    if (accessRequest?.requestPrompt) {\n      copyToClipboard(accessRequest.requestPrompt, 'prompt')\n    }\n  }, [accessRequest?.requestPrompt, copyToClipboard])\n\n  const handleCopyApproverEmail = useCallback(\n    (email: string, index: number) => {\n      copyToClipboard(email, `approver-${index}`)\n    },\n    [copyToClipboard],\n  )\n\n  // Early return if no access request\n  if (!accessRequest) return null\n\n  return (\n    <div className=\"mt-6 space-y-4\">\n      <h3 className=\"text-sm font-medium\">Access Request</h3>\n\n      {/* Approval Method */}\n      {approvalMethod && approvalMethod.type !== 'custom' && (\n        <div className=\"flex items-center gap-2\">\n          {approvalMethod.type === 'service' && approvalMethod.config.url ? (\n            <>\n              <a\n                href={approvalMethod.config.url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"flex items-center gap-2 hover:text-primary transition-colors\"\n                title={approvalMethod.config.url}\n              >\n                <div>{getApprovalMethodIcon(approvalMethod.type)}</div>\n                <div className=\"font-medium\">{approvalMethod.displayName}</div>\n              </a>\n              <a\n                href={approvalMethod.config.url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"text-muted-foreground hover:text-primary\"\n                title={approvalMethod.config.url}\n              >\n                <ExternalLink className=\"size-4\" />\n              </a>\n            </>\n          ) : (\n            <>\n              <div>{getApprovalMethodIcon(approvalMethod.type)}</div>\n              <div className=\"font-medium\">{approvalMethod.displayName}</div>\n            </>\n          )}\n        </div>\n      )}\n\n      {/* Request Prompt - Inline */}\n      {accessRequest.requestPrompt && (\n        <div className=\"text-sm inline-flex items-center gap-2\">\n          <span className=\"whitespace-nowrap shrink-0\">Request Prompt:</span>\n          <span className=\"prose prose-sm inline [&>*]:inline [&>*]:m-0\">\n            <ReactMarkdown components={{ a: MarkdownLink }}>\n              {accessRequest.requestPrompt}\n            </ReactMarkdown>\n          </span>\n          <CopyButton\n            onCopy={handleCopyPrompt}\n            isCopied={copiedId === 'prompt'}\n            ariaLabel=\"Copy request prompt\"\n            className=\"h-6 w-6 p-0 shrink-0\"\n          />\n        </div>\n      )}\n\n      {/* Comments */}\n      {accessRequest.comments && (\n        <div className=\"text-sm text-muted-foreground prose prose-sm max-w-none\">\n          <ReactMarkdown components={{ a: MarkdownLink }}>\n            {accessRequest.comments}\n          </ReactMarkdown>\n        </div>\n      )}\n\n      {/* Roles Table */}\n      {accessRequest.roles && accessRequest.roles.length > 0 && (\n        <div>\n          <h4 className=\"mb-2 text-sm font-medium\">Available Roles</h4>\n          <div className=\"rounded-lg border\">\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead className=\"whitespace-nowrap\">Role</TableHead>\n                  <TableHead>Description</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                {accessRequest.roles.map((role, idx) => (\n                  <TableRow key={`${role.displayName}-${idx}`}>\n                    <TableCell className=\"font-medium whitespace-nowrap\">\n                      {role.displayName}\n                    </TableCell>\n                    <TableCell className=\"text-sm text-muted-foreground\">\n                      {role.description || '—'}\n                      {role.adminNotes && (\n                        <div className=\"mt-1 text-xs italic text-muted-foreground/80\">\n                          Note: {role.adminNotes}\n                        </div>\n                      )}\n                    </TableCell>\n                  </TableRow>\n                ))}\n              </TableBody>\n            </Table>\n          </div>\n        </div>\n      )}\n\n      {/* Approvers */}\n      {accessRequest.approvers && accessRequest.approvers.length > 0 && (\n        <div>\n          <h4 className=\"mb-2 text-sm font-medium\">Approvers</h4>\n          <div className=\"flex flex-wrap gap-2\">\n            {accessRequest.approvers.map((approver, idx) => {\n              const approverId = `approver-${idx}`\n              const isCopied = copiedId === approverId\n\n              return (\n                <Badge\n                  key={`${approver.displayName}-${idx}`}\n                  variant=\"outline\"\n                  className=\"font-normal inline-flex items-center gap-1\"\n                >\n                  {approver.displayName}\n                  {approver.contact && (\n                    <>\n                      <span className=\"text-xs opacity-70\">\n                        ({approver.contact})\n                      </span>\n                      <button\n                        type=\"button\"\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          handleCopyApproverEmail(approver.contact!, idx)\n                        }}\n                        className=\"inline-flex items-center justify-center hover:bg-accent rounded p-0.5 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1\"\n                        aria-label={`Copy ${approver.displayName}'s email`}\n                        title={isCopied ? 'Copied!' : 'Copy email'}\n                      >\n                        {isCopied ? (\n                          <>\n                            <Check className=\"h-3 w-3 text-green-600\" />\n                            <span\n                              className=\"sr-only\"\n                              role=\"status\"\n                              aria-live=\"polite\"\n                            >\n                              Email copied to clipboard\n                            </span>\n                          </>\n                        ) : (\n                          <Copy className=\"h-3 w-3 opacity-50 hover:opacity-100\" />\n                        )}\n                      </button>\n                    </>\n                  )}\n                </Badge>\n              )\n            })}\n          </div>\n        </div>\n      )}\n\n      {/* Documentation URLs */}\n      {accessRequest.urls && accessRequest.urls.length > 0 && (\n        <div>\n          <h4 className=\"mb-2 text-sm font-medium\">Documentation</h4>\n          <div className=\"flex flex-col gap-1.5\">\n            {accessRequest.urls.map((urlObj, idx) => (\n              <a\n                key={`${urlObj.url}-${idx}`}\n                href={urlObj.url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"text-sm text-muted-foreground hover:text-primary inline-flex items-center gap-1.5\"\n              >\n                {urlObj.label || urlObj.url}\n                <ExternalLink className=\"size-3\" />\n              </a>\n            ))}\n          </div>\n        </div>\n      )}\n\n      {/* Post-Approval Instructions - Collapsible (secondary info) */}\n      {accessRequest.postApprovalInstructions && (\n        <Accordion type=\"single\" collapsible>\n          <AccordionItem\n            value=\"post-approval\"\n            className=\"border rounded-lg px-4\"\n          >\n            <AccordionTrigger className=\"text-sm hover:no-underline py-3\">\n              Post-Approval Instructions\n            </AccordionTrigger>\n            <AccordionContent className=\"pb-3\">\n              <div className=\"text-sm text-muted-foreground prose prose-sm max-w-none\">\n                <ReactMarkdown components={{ a: MarkdownLink }}>\n                  {accessRequest.postApprovalInstructions}\n                </ReactMarkdown>\n              </div>\n            </AccordionContent>\n          </AccordionItem>\n        </Accordion>\n      )}\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AccessRequestSection.js","sources":["../../../../../../src/modules/appCatalog/ui/components/AccessRequestSection.tsx"],"sourcesContent":["import type {\n  AppApprovalMethod,\n  AppForCatalog,\n} from '@igstack/app-catalog-backend-core'\nimport { Bot, Check, Copy, ExternalLink, Settings, Users } from 'lucide-react'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport ReactMarkdown from 'react-markdown'\nimport { Button } from '~/ui/button'\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from '~/ui/accordion'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '~/ui/table'\nimport { PersonBadge } from './PersonBadge'\n\n// Constants\nconst COPY_FEEDBACK_DURATION = 2000\n\ninterface AccessRequestSectionProps {\n  app: AppForCatalog\n  approvalMethods: AppApprovalMethod[]\n}\n\n// Component for rendering markdown links with security attributes\nconst MarkdownLink = ({\n  href,\n  children,\n}: {\n  href?: string\n  children?: React.ReactNode\n}) => (\n  <a\n    href={href}\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    className=\"text-primary hover:underline\"\n  >\n    {children}\n  </a>\n)\n\n// Helper function for approval method icons\nfunction getApprovalMethodIcon(\n  type: 'service' | 'personTeam' | 'custom' | 'noAccessRequired' | 'unknown',\n) {\n  switch (type) {\n    case 'service':\n      return <Bot className=\"size-5 text-primary\" />\n    case 'personTeam':\n      return <Users className=\"size-5 text-primary\" />\n    case 'custom':\n    case 'noAccessRequired':\n    case 'unknown':\n      return <Settings className=\"size-5 text-primary\" />\n  }\n}\n\n/**\n * Custom hook for handling copy-to-clipboard functionality with feedback\n * Includes proper cleanup to prevent memory leaks\n */\nfunction useCopyToClipboard() {\n  const [copiedId, setCopiedId] = useState<string | null>(null)\n  const [error, setError] = useState<string | null>(null)\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null)\n\n  // Cleanup timeout on unmount\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current)\n      }\n    }\n  }, [])\n\n  const copyToClipboard = useCallback(async (text: string, id: string) => {\n    // Clear existing timeout\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current)\n    }\n\n    try {\n      await navigator.clipboard.writeText(text)\n      setCopiedId(id)\n      setError(null)\n\n      // Set new timeout with cleanup\n      timeoutRef.current = setTimeout(() => {\n        setCopiedId(null)\n      }, COPY_FEEDBACK_DURATION)\n    } catch (err) {\n      console.error('Failed to copy to clipboard:', err)\n      setError('Failed to copy')\n\n      // Clear error after duration\n      timeoutRef.current = setTimeout(() => {\n        setError(null)\n      }, COPY_FEEDBACK_DURATION)\n    }\n  }, [])\n\n  return { copiedId, error, copyToClipboard }\n}\n\n/**\n * Reusable copy button component with accessibility\n */\ninterface CopyButtonProps {\n  onCopy: () => void\n  isCopied: boolean\n  ariaLabel: string\n  className?: string\n}\n\nfunction CopyButton({\n  onCopy,\n  isCopied,\n  ariaLabel,\n  className,\n}: CopyButtonProps) {\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"sm\"\n      onClick={onCopy}\n      className={className}\n      aria-label={ariaLabel}\n      title={isCopied ? 'Copied!' : 'Copy to clipboard'}\n    >\n      {isCopied ? (\n        <>\n          <Check className=\"h-3.5 w-3.5 text-green-600\" />\n          <span className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n            Copied to clipboard\n          </span>\n        </>\n      ) : (\n        <Copy className=\"h-3.5 w-3.5\" />\n      )}\n    </Button>\n  )\n}\n\nexport function AccessRequestSection({\n  app,\n  approvalMethods,\n}: AccessRequestSectionProps) {\n  const { copiedId, copyToClipboard } = useCopyToClipboard()\n  const accessRequest = app.accessRequest\n  const approvalMethod = approvalMethods.find(\n    (m) => m.slug === accessRequest?.approvalMethodSlug,\n  )\n\n  const handleCopyPrompt = useCallback(() => {\n    if (accessRequest?.requestPrompt) {\n      copyToClipboard(accessRequest.requestPrompt, 'prompt')\n    }\n  }, [accessRequest?.requestPrompt, copyToClipboard])\n\n  // Early return if no access request\n  if (!accessRequest) return null\n\n  return (\n    <div className=\"mt-6 space-y-4\">\n      <h3 className=\"text-sm font-medium\">Access Request</h3>\n\n      {/* Approval Method */}\n      {approvalMethod && approvalMethod.type !== 'custom' && (\n        <div className=\"flex items-center gap-2\">\n          {approvalMethod.type === 'service' && approvalMethod.config.url ? (\n            <>\n              <a\n                href={approvalMethod.config.url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"flex items-center gap-2 hover:text-primary transition-colors\"\n                title={approvalMethod.config.url}\n              >\n                <div>{getApprovalMethodIcon(approvalMethod.type)}</div>\n                <div className=\"font-medium\">{approvalMethod.displayName}</div>\n              </a>\n              <a\n                href={approvalMethod.config.url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"text-muted-foreground hover:text-primary\"\n                title={approvalMethod.config.url}\n              >\n                <ExternalLink className=\"size-4\" />\n              </a>\n            </>\n          ) : (\n            <>\n              <div>{getApprovalMethodIcon(approvalMethod.type)}</div>\n              <div className=\"font-medium\">{approvalMethod.displayName}</div>\n            </>\n          )}\n        </div>\n      )}\n\n      {/* Request Prompt - Inline */}\n      {accessRequest.requestPrompt && (\n        <div className=\"text-sm inline-flex items-center gap-2\">\n          <span className=\"whitespace-nowrap shrink-0\">Request Prompt:</span>\n          <span className=\"prose prose-sm inline [&>*]:inline [&>*]:m-0\">\n            <ReactMarkdown components={{ a: MarkdownLink }}>\n              {accessRequest.requestPrompt}\n            </ReactMarkdown>\n          </span>\n          <CopyButton\n            onCopy={handleCopyPrompt}\n            isCopied={copiedId === 'prompt'}\n            ariaLabel=\"Copy request prompt\"\n            className=\"h-6 w-6 p-0 shrink-0\"\n          />\n        </div>\n      )}\n\n      {/* Comments */}\n      {accessRequest.comments && (\n        <div className=\"text-sm text-muted-foreground prose prose-sm max-w-none\">\n          <ReactMarkdown components={{ a: MarkdownLink }}>\n            {accessRequest.comments}\n          </ReactMarkdown>\n        </div>\n      )}\n\n      {/* Roles Table */}\n      {accessRequest.roles && accessRequest.roles.length > 0 && (\n        <div>\n          <h4 className=\"mb-2 text-sm font-medium\">Available Roles</h4>\n          <div className=\"rounded-lg border\">\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead className=\"whitespace-nowrap\">Role</TableHead>\n                  <TableHead>Description</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                {accessRequest.roles.map((role, idx) => (\n                  <TableRow key={`${role.displayName}-${idx}`}>\n                    <TableCell className=\"font-medium whitespace-nowrap\">\n                      {role.displayName}\n                    </TableCell>\n                    <TableCell className=\"text-sm text-muted-foreground\">\n                      {role.description || '—'}\n                      {role.adminNotes && (\n                        <div className=\"mt-1 text-xs italic text-muted-foreground/80\">\n                          Note: {role.adminNotes}\n                        </div>\n                      )}\n                    </TableCell>\n                  </TableRow>\n                ))}\n              </TableBody>\n            </Table>\n          </div>\n        </div>\n      )}\n\n      {/* Approvers */}\n      {accessRequest.approverPersonSlugs &&\n        accessRequest.approverPersonSlugs.length > 0 && (\n          <div>\n            <h4 className=\"mb-2 text-sm font-medium\">Approvers</h4>\n            <div className=\"flex flex-wrap gap-2\">\n              {accessRequest.approverPersonSlugs.map((slug) => (\n                <PersonBadge key={slug} slug={slug} />\n              ))}\n            </div>\n          </div>\n        )}\n\n      {/* Documentation URLs */}\n      {accessRequest.urls && accessRequest.urls.length > 0 && (\n        <div>\n          <h4 className=\"mb-2 text-sm font-medium\">Documentation</h4>\n          <div className=\"flex flex-col gap-1.5\">\n            {accessRequest.urls.map((urlObj, idx) => (\n              <a\n                key={`${urlObj.url}-${idx}`}\n                href={urlObj.url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"text-sm text-muted-foreground hover:text-primary inline-flex items-center gap-1.5\"\n              >\n                {urlObj.label || urlObj.url}\n                <ExternalLink className=\"size-3\" />\n              </a>\n            ))}\n          </div>\n        </div>\n      )}\n\n      {/* Post-Approval Instructions - Collapsible (secondary info) */}\n      {accessRequest.postApprovalInstructions && (\n        <Accordion type=\"single\" collapsible>\n          <AccordionItem\n            value=\"post-approval\"\n            className=\"border rounded-lg px-4\"\n          >\n            <AccordionTrigger className=\"text-sm hover:no-underline py-3\">\n              Post-Approval Instructions\n            </AccordionTrigger>\n            <AccordionContent className=\"pb-3\">\n              <div className=\"text-sm text-muted-foreground prose prose-sm max-w-none\">\n                <ReactMarkdown components={{ a: MarkdownLink }}>\n                  {accessRequest.postApprovalInstructions}\n                </ReactMarkdown>\n              </div>\n            </AccordionContent>\n          </AccordionItem>\n        </Accordion>\n      )}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;AAyBA,MAAM,yBAAyB;AAQ/B,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AACF,MAIE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC;AAAA,IACA,QAAO;AAAA,IACP,KAAI;AAAA,IACJ,WAAU;AAAA,IAET;AAAA,EAAA;AACH;AAIF,SAAS,sBACP,MACA;AACA,UAAQ,MAAA;AAAA,IACN,KAAK;AACH,aAAO,oBAAC,KAAA,EAAI,WAAU,sBAAA,CAAsB;AAAA,IAC9C,KAAK;AACH,aAAO,oBAAC,OAAA,EAAM,WAAU,sBAAA,CAAsB;AAAA,IAChD,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAO,oBAAC,UAAA,EAAS,WAAU,sBAAA,CAAsB;AAAA,EAAA;AAEvD;AAMA,SAAS,qBAAqB;AAC5B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAwB,IAAI;AAC5D,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,QAAM,aAAa,OAA8B,IAAI;AAGrD,YAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,WAAW,SAAS;AACtB,qBAAa,WAAW,OAAO;AAAA,MACjC;AAAA,IACF;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,kBAAkB,YAAY,OAAO,MAAc,OAAe;AAEtE,QAAI,WAAW,SAAS;AACtB,mBAAa,WAAW,OAAO;AAAA,IACjC;AAEA,QAAI;AACF,YAAM,UAAU,UAAU,UAAU,IAAI;AACxC,kBAAY,EAAE;AACd,eAAS,IAAI;AAGb,iBAAW,UAAU,WAAW,MAAM;AACpC,oBAAY,IAAI;AAAA,MAClB,GAAG,sBAAsB;AAAA,IAC3B,SAAS,KAAK;AACZ,cAAQ,MAAM,gCAAgC,GAAG;AACjD,eAAS,gBAAgB;AAGzB,iBAAW,UAAU,WAAW,MAAM;AACpC,iBAAS,IAAI;AAAA,MACf,GAAG,sBAAsB;AAAA,IAC3B;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,SAAO,EAAE,UAAU,OAAO,gBAAA;AAC5B;AAYA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,SAAS;AAAA,MACT;AAAA,MACA,cAAY;AAAA,MACZ,OAAO,WAAW,YAAY;AAAA,MAE7B,qBACC,qBAAA,UAAA,EACE,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAM,WAAU,6BAAA,CAA6B;AAAA,QAC9C,oBAAC,UAAK,WAAU,WAAU,MAAK,UAAS,aAAU,UAAS,UAAA,sBAAA,CAE3D;AAAA,MAAA,EAAA,CACF,IAEA,oBAAC,MAAA,EAAK,WAAU,cAAA,CAAc;AAAA,IAAA;AAAA,EAAA;AAItC;AAEO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AACF,GAA8B;AAC5B,QAAM,EAAE,UAAU,gBAAA,IAAoB,mBAAA;AACtC,QAAM,gBAAgB,IAAI;AAC1B,QAAM,iBAAiB,gBAAgB;AAAA,IACrC,CAAC,MAAM,EAAE,UAAS,+CAAe;AAAA,EAAA;AAGnC,QAAM,mBAAmB,YAAY,MAAM;AACzC,QAAI,+CAAe,eAAe;AAChC,sBAAgB,cAAc,eAAe,QAAQ;AAAA,IACvD;AAAA,EACF,GAAG,CAAC,+CAAe,eAAe,eAAe,CAAC;AAGlD,MAAI,CAAC,cAAe,QAAO;AAE3B,SACE,qBAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,IAAA,oBAAC,MAAA,EAAG,WAAU,uBAAsB,UAAA,kBAAc;AAAA,IAGjD,kBAAkB,eAAe,SAAS,gCACxC,OAAA,EAAI,WAAU,2BACZ,UAAA,eAAe,SAAS,aAAa,eAAe,OAAO,MAC1D,qBAAA,UAAA,EACE,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM,eAAe,OAAO;AAAA,UAC5B,QAAO;AAAA,UACP,KAAI;AAAA,UACJ,WAAU;AAAA,UACV,OAAO,eAAe,OAAO;AAAA,UAE7B,UAAA;AAAA,YAAA,oBAAC,OAAA,EAAK,UAAA,sBAAsB,eAAe,IAAI,GAAE;AAAA,YACjD,oBAAC,OAAA,EAAI,WAAU,eAAe,yBAAe,YAAA,CAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAE3D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM,eAAe,OAAO;AAAA,UAC5B,QAAO;AAAA,UACP,KAAI;AAAA,UACJ,WAAU;AAAA,UACV,OAAO,eAAe,OAAO;AAAA,UAE7B,UAAA,oBAAC,cAAA,EAAa,WAAU,SAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACnC,EAAA,CACF,IAEA,qBAAA,UAAA,EACE,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAK,UAAA,sBAAsB,eAAe,IAAI,GAAE;AAAA,MACjD,oBAAC,OAAA,EAAI,WAAU,eAAe,yBAAe,YAAA,CAAY;AAAA,IAAA,EAAA,CAC3D,EAAA,CAEJ;AAAA,IAID,cAAc,iBACb,qBAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAU,8BAA6B,UAAA,mBAAe;AAAA,MAC5D,oBAAC,QAAA,EAAK,WAAU,gDACd,UAAA,oBAAC,eAAA,EAAc,YAAY,EAAE,GAAG,gBAC7B,UAAA,cAAc,eACjB,GACF;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,QAAQ;AAAA,UACR,UAAU,aAAa;AAAA,UACvB,WAAU;AAAA,UACV,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ,GACF;AAAA,IAID,cAAc,YACb,oBAAC,OAAA,EAAI,WAAU,2DACb,UAAA,oBAAC,eAAA,EAAc,YAAY,EAAE,GAAG,aAAA,GAC7B,UAAA,cAAc,UACjB,GACF;AAAA,IAID,cAAc,SAAS,cAAc,MAAM,SAAS,0BAClD,OAAA,EACC,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAG,WAAU,4BAA2B,UAAA,mBAAe;AAAA,MACxD,oBAAC,OAAA,EAAI,WAAU,qBACb,+BAAC,OAAA,EACC,UAAA;AAAA,QAAA,oBAAC,aAAA,EACC,+BAAC,UAAA,EACC,UAAA;AAAA,UAAA,oBAAC,WAAA,EAAU,WAAU,qBAAoB,UAAA,QAAI;AAAA,UAC7C,oBAAC,aAAU,UAAA,cAAA,CAAW;AAAA,QAAA,EAAA,CACxB,EAAA,CACF;AAAA,QACA,oBAAC,aACE,UAAA,cAAc,MAAM,IAAI,CAAC,MAAM,QAC9B,qBAAC,UAAA,EACC,UAAA;AAAA,UAAA,oBAAC,WAAA,EAAU,WAAU,iCAClB,UAAA,KAAK,aACR;AAAA,UACA,qBAAC,WAAA,EAAU,WAAU,iCAClB,UAAA;AAAA,YAAA,KAAK,eAAe;AAAA,YACpB,KAAK,cACJ,qBAAC,OAAA,EAAI,WAAU,gDAA+C,UAAA;AAAA,cAAA;AAAA,cACrD,KAAK;AAAA,YAAA,EAAA,CACd;AAAA,UAAA,EAAA,CAEJ;AAAA,QAAA,EAAA,GAXa,GAAG,KAAK,WAAW,IAAI,GAAG,EAYzC,CACD,EAAA,CACH;AAAA,MAAA,EAAA,CACF,EAAA,CACF;AAAA,IAAA,GACF;AAAA,IAID,cAAc,uBACb,cAAc,oBAAoB,SAAS,0BACxC,OAAA,EACC,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAG,WAAU,4BAA2B,UAAA,aAAS;AAAA,MAClD,oBAAC,OAAA,EAAI,WAAU,wBACZ,wBAAc,oBAAoB,IAAI,CAAC,SACtC,oBAAC,aAAA,EAAuB,KAAA,GAAN,IAAkB,CACrC,EAAA,CACH;AAAA,IAAA,GACF;AAAA,IAIH,cAAc,QAAQ,cAAc,KAAK,SAAS,0BAChD,OAAA,EACC,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAG,WAAU,4BAA2B,UAAA,iBAAa;AAAA,MACtD,oBAAC,SAAI,WAAU,yBACZ,wBAAc,KAAK,IAAI,CAAC,QAAQ,QAC/B;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,MAAM,OAAO;AAAA,UACb,QAAO;AAAA,UACP,KAAI;AAAA,UACJ,WAAU;AAAA,UAET,UAAA;AAAA,YAAA,OAAO,SAAS,OAAO;AAAA,YACxB,oBAAC,cAAA,EAAa,WAAU,SAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAP5B,GAAG,OAAO,GAAG,IAAI,GAAG;AAAA,MAAA,CAS5B,EAAA,CACH;AAAA,IAAA,GACF;AAAA,IAID,cAAc,4BACb,oBAAC,aAAU,MAAK,UAAS,aAAW,MAClC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,oBAAC,kBAAA,EAAiB,WAAU,mCAAkC,UAAA,8BAE9D;AAAA,8BACC,kBAAA,EAAiB,WAAU,QAC1B,UAAA,oBAAC,OAAA,EAAI,WAAU,2DACb,UAAA,oBAAC,eAAA,EAAc,YAAY,EAAE,GAAG,aAAA,GAC7B,UAAA,cAAc,0BACjB,GACF,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,EACF,CACF;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/esm/modules/appCatalog/ui/components/PersonBadge.d.ts

@@ -0,0 +1,5 @@
+interface PersonBadgeProps {
+    slug: string;
+}
+export declare function PersonBadge({ slug }: PersonBadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/modules/appCatalog/ui/components/PersonBadge.js

@@ -0,0 +1,68 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { User, Check, Copy } from "lucide-react";
+import { useState, useRef, useEffect, useCallback } from "react";
+import { Badge } from "../../../../ui/badge.js";
+import { useAppCatalogContext } from "../../context/AppCatalogContext.js";
+import "@tanstack/react-query-devtools";
+import "next-themes";
+import "@radix-ui/react-dialog";
+import "clsx";
+import "tailwind-merge";
+import "../../../config/GlobalConfigContext.js";
+import "../../../pluginCore/PluginManagerContext.js";
+import "@radix-ui/react-tooltip";
+import "../../../../ui/empty.js";
+import "../../../../ui/button.js";
+import { getPersonBySlug } from "../../utils/resolveHelpers.js";
+function PersonBadge({ slug }) {
+  const { persons } = useAppCatalogContext();
+  const person = getPersonBySlug(persons, slug);
+  const displayName = person ? `${person.firstName} ${person.lastName}`.trim() || slug : slug;
+  const email = person == null ? void 0 : person.email;
+  return /* @__PURE__ */ jsxs(
+    Badge,
+    {
+      variant: "outline",
+      className: "font-normal inline-flex items-center gap-1",
+      title: email ? `${displayName} (${email})` : displayName,
+      children: [
+        /* @__PURE__ */ jsx(User, { className: "size-3" }),
+        displayName,
+        email && /* @__PURE__ */ jsx(CopyEmailButton, { email })
+      ]
+    }
+  );
+}
+function CopyEmailButton({ email }) {
+  const [copied, setCopied] = useState(false);
+  const timeoutRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+  const handleCopy = useCallback(
+    (e) => {
+      e.stopPropagation();
+      navigator.clipboard.writeText(email);
+      setCopied(true);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => setCopied(false), 2e3);
+    },
+    [email]
+  );
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: handleCopy,
+      className: "ml-0.5 hover:text-primary transition-colors",
+      title: copied ? "Copied!" : `Copy ${email}`,
+      type: "button",
+      children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3 text-green-600" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3" })
+    }
+  );
+}
+export {
+  PersonBadge
+};
+//# sourceMappingURL=PersonBadge.js.map

package/dist/esm/modules/appCatalog/ui/components/PersonBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PersonBadge.js","sources":["../../../../../../src/modules/appCatalog/ui/components/PersonBadge.tsx"],"sourcesContent":["import { Check, Copy, User } from 'lucide-react'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { Badge } from '~/ui/badge'\nimport { useAppCatalogContext } from '~/modules/appCatalog'\nimport { getPersonBySlug } from '~/modules/appCatalog/utils/resolveHelpers'\n\ninterface PersonBadgeProps {\n  slug: string\n}\n\nexport function PersonBadge({ slug }: PersonBadgeProps) {\n  const { persons } = useAppCatalogContext()\n  const person = getPersonBySlug(persons, slug)\n\n  const displayName = person\n    ? `${person.firstName} ${person.lastName}`.trim() || slug\n    : slug\n\n  const email = person?.email\n\n  return (\n    <Badge\n      variant=\"outline\"\n      className=\"font-normal inline-flex items-center gap-1\"\n      title={email ? `${displayName} (${email})` : displayName}\n    >\n      <User className=\"size-3\" />\n      {displayName}\n      {email && <CopyEmailButton email={email} />}\n    </Badge>\n  )\n}\n\nfunction CopyEmailButton({ email }: { email: string }) {\n  const [copied, setCopied] = useState(false)\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null)\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current)\n    }\n  }, [])\n\n  const handleCopy = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation()\n      navigator.clipboard.writeText(email)\n      setCopied(true)\n      if (timeoutRef.current) clearTimeout(timeoutRef.current)\n      timeoutRef.current = setTimeout(() => setCopied(false), 2000)\n    },\n    [email],\n  )\n\n  return (\n    <button\n      onClick={handleCopy}\n      className=\"ml-0.5 hover:text-primary transition-colors\"\n      title={copied ? 'Copied!' : `Copy ${email}`}\n      type=\"button\"\n    >\n      {copied ? (\n        <Check className=\"size-3 text-green-600\" />\n      ) : (\n        <Copy className=\"size-3\" />\n      )}\n    </button>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAUO,SAAS,YAAY,EAAE,QAA0B;AACtD,QAAM,EAAE,QAAA,IAAY,qBAAA;AACpB,QAAM,SAAS,gBAAgB,SAAS,IAAI;AAE5C,QAAM,cAAc,SAChB,GAAG,OAAO,SAAS,IAAI,OAAO,QAAQ,GAAG,KAAA,KAAU,OACnD;AAEJ,QAAM,QAAQ,iCAAQ;AAEtB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,WAAU;AAAA,MACV,OAAO,QAAQ,GAAG,WAAW,KAAK,KAAK,MAAM;AAAA,MAE7C,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAK,WAAU,SAAA,CAAS;AAAA,QACxB;AAAA,QACA,SAAS,oBAAC,iBAAA,EAAgB,MAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG/C;AAEA,SAAS,gBAAgB,EAAE,SAA4B;AACrD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,aAAa,OAA8B,IAAI;AAErD,YAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,WAAW,QAAS,cAAa,WAAW,OAAO;AAAA,IACzD;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,aAAa;AAAA,IACjB,CAAC,MAAwB;AACvB,QAAE,gBAAA;AACF,gBAAU,UAAU,UAAU,KAAK;AACnC,gBAAU,IAAI;AACd,UAAI,WAAW,QAAS,cAAa,WAAW,OAAO;AACvD,iBAAW,UAAU,WAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AAAA,IAC9D;AAAA,IACA,CAAC,KAAK;AAAA,EAAA;AAGR,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,MACT,WAAU;AAAA,MACV,OAAO,SAAS,YAAY,QAAQ,KAAK;AAAA,MACzC,MAAK;AAAA,MAEJ,UAAA,6BACE,OAAA,EAAM,WAAU,yBAAwB,IAEzC,oBAAC,MAAA,EAAK,WAAU,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAIjC;"}

package/dist/esm/modules/appCatalog/ui/components/SubResourcesSection.d.ts

@@ -0,0 +1,6 @@
+import { SubResource } from '@igstack/app-catalog-backend-core';
+interface SubResourcesSectionProps {
+    subResources: SubResource[];
+}
+export declare function SubResourcesSection({ subResources, }: SubResourcesSectionProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/esm/modules/appCatalog/ui/components/SubResourcesSection.js

@@ -0,0 +1,148 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Search } from "lucide-react";
+import { useState, useMemo } from "react";
+import { Badge } from "../../../../ui/badge.js";
+import { Input } from "../../../../ui/input.js";
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "../../../../ui/table.js";
+import { PersonBadge } from "./PersonBadge.js";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "../../../../ui/select.js";
+import { useAppCatalogContext } from "../../context/AppCatalogContext.js";
+import "@tanstack/react-query-devtools";
+import "next-themes";
+import "@radix-ui/react-dialog";
+import "clsx";
+import "tailwind-merge";
+import "../../../config/GlobalConfigContext.js";
+import "../../../pluginCore/PluginManagerContext.js";
+import "@radix-ui/react-tooltip";
+import "../../../../ui/empty.js";
+import "../../../../ui/button.js";
+import { getGroupBySlug } from "../../utils/resolveHelpers.js";
+function getTierBadgeVariant(tierSlug) {
+  if (tierSlug === "prod" || tierSlug === "production") return "destructive";
+  if (tierSlug === "dev" || tierSlug === "staging") return "secondary";
+  if (tierSlug === "preprod") return "outline";
+  if (tierSlug === "sandbox") return "outline";
+  return "outline";
+}
+function getTierBadgeClassName(tierSlug) {
+  if (tierSlug === "preprod")
+    return "border-amber-400 bg-amber-100 text-amber-800 hover:bg-amber-200";
+  if (tierSlug === "sandbox")
+    return "border-gray-400 bg-gray-100 text-gray-700 hover:bg-gray-200";
+  return "";
+}
+function getTierDisplayLabel(tierSlug) {
+  if (tierSlug === "preprod") return "Pre-Prod";
+  if (tierSlug === "sandbox") return "Sandbox";
+  if (tierSlug === "prod" || tierSlug === "production") return "Prod";
+  if (tierSlug === "dev") return "Dev";
+  if (tierSlug === "staging") return "Staging";
+  return tierSlug;
+}
+function SubResourcesSection({
+  subResources
+}) {
+  const { groups } = useAppCatalogContext();
+  const [search, setSearch] = useState("");
+  const [tierFilter, setTierFilter] = useState("all");
+  const uniqueTiers = useMemo(() => {
+    const tiers = /* @__PURE__ */ new Set();
+    for (const sr of subResources) {
+      if (sr.tierSlug) tiers.add(sr.tierSlug);
+    }
+    return [...tiers].sort();
+  }, [subResources]);
+  const filtered = useMemo(() => {
+    let result = subResources;
+    if (tierFilter !== "all") {
+      result = result.filter((sr) => sr.tierSlug === tierFilter);
+    }
+    if (search.trim()) {
+      const q = search.trim().toLowerCase();
+      result = result.filter(
+        (sr) => {
+          var _a;
+          return sr.displayName.toLowerCase().includes(q) || sr.aliases.some((a) => a.toLowerCase().includes(q)) || (((_a = sr.description) == null ? void 0 : _a.toLowerCase().includes(q)) ?? false);
+        }
+      );
+    }
+    return result;
+  }, [subResources, search, tierFilter]);
+  if (subResources.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium", children: [
+      "Sub-Resources (",
+      filtered.length,
+      " of ",
+      subResources.length,
+      ")"
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+        /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-2.5 size-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            placeholder: "Search resources by name or alias...",
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            className: "pl-9 h-9"
+          }
+        )
+      ] }),
+      uniqueTiers.length > 1 && /* @__PURE__ */ jsxs(Select, { value: tierFilter, onValueChange: setTierFilter, children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { className: "w-[130px] h-9", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "All tiers" }) }),
+        /* @__PURE__ */ jsxs(SelectContent, { children: [
+          /* @__PURE__ */ jsx(SelectItem, { value: "all", children: "All tiers" }),
+          uniqueTiers.map((tier) => /* @__PURE__ */ jsx(SelectItem, { value: tier, children: tier }, tier))
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "rounded-lg border max-h-[400px] overflow-auto", children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableHead, { children: "Name" }),
+        /* @__PURE__ */ jsx(TableHead, { className: "w-[80px]", children: "Tier" }),
+        /* @__PURE__ */ jsx(TableHead, { children: "Owner" }),
+        /* @__PURE__ */ jsx(TableHead, { children: "Access Contacts" })
+      ] }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: filtered.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+        TableCell,
+        {
+          colSpan: 4,
+          className: "text-center text-muted-foreground py-8",
+          children: "No resources match your filters"
+        }
+      ) }) : filtered.map((sr) => {
+        const maintainerMembers = sr.accessMaintainerGroupSlugs.flatMap(
+          (groupSlug) => {
+            const group = getGroupBySlug(groups, groupSlug);
+            return (group == null ? void 0 : group.memberSlugs) ?? [];
+          }
+        );
+        const uniqueMaintainers = [...new Set(maintainerMembers)];
+        return /* @__PURE__ */ jsxs(TableRow, { children: [
+          /* @__PURE__ */ jsxs(TableCell, { children: [
+            /* @__PURE__ */ jsx("div", { className: "font-medium text-sm", children: sr.displayName }),
+            sr.aliases.length > 0 && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground mt-0.5", children: sr.aliases.join(", ") }),
+            sr.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground mt-0.5", children: sr.description })
+          ] }),
+          /* @__PURE__ */ jsx(TableCell, { children: sr.tierSlug && /* @__PURE__ */ jsx(
+            Badge,
+            {
+              variant: getTierBadgeVariant(sr.tierSlug),
+              className: `text-xs ${getTierBadgeClassName(sr.tierSlug)}`,
+              children: getTierDisplayLabel(sr.tierSlug)
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TableCell, { children: sr.ownerPersonSlug && /* @__PURE__ */ jsx(PersonBadge, { slug: sr.ownerPersonSlug }) }),
+          /* @__PURE__ */ jsx(TableCell, { children: uniqueMaintainers.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: uniqueMaintainers.map((personSlug) => /* @__PURE__ */ jsx(PersonBadge, { slug: personSlug }, personSlug)) }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "-" }) })
+        ] }, sr.slug);
+      }) })
+    ] }) })
+  ] });
+}
+export {
+  SubResourcesSection
+};
+//# sourceMappingURL=SubResourcesSection.js.map