@burdenoff/microfe-vibecontrols 2026.511.1

package/dist/pages/CatalogDetailPage.js

@@ -0,0 +1,842 @@
+import { useAddComponentToCatalogMutation as e, useGetCatalogDependencyGraphQuery as t, useGetCatalogQuery as n, useGetCatalogSbomQuery as r, useListAllComponentsForCatalogQuery as i, useRemoveComponentFromCatalogMutation as a, useUpdateCatalogMutation as o } from "../generated/wspace-operations.js";
+import { useVibeNavigate as s } from "../providers/VibeControlsProvider.js";
+import { PageHeader as c } from "../components/shared/PageHeader.js";
+import { LoadingState as l } from "../components/shared/LoadingState.js";
+import { ErrorState as u } from "../components/shared/ErrorState.js";
+import { EmptyState as d } from "../components/shared/EmptyState.js";
+import { Card as f } from "../components/shared/Card.js";
+import { StatCard as p } from "../components/shared/StatCard.js";
+import "../components/shared/index.js";
+import { VIBE_PERMISSIONS as m } from "../constants/permissions.js";
+import { useQueryBackedTab as ee } from "../hooks/useQueryBackedTab.js";
+import { ScorecardPanel as te } from "../components/scorecard/ScorecardPanel.js";
+import "../components/scorecard/index.js";
+import { DocsTabPanel as ne } from "../components/docs/DocsTabPanel.js";
+import "../components/docs/index.js";
+import { ComponentCard as re } from "../components/idp-components/ComponentCard.js";
+import "../components/idp-components/index.js";
+import { CatalogForm as ie } from "../components/catalog/CatalogForm.js";
+import "../components/catalog/index.js";
+import { useCallback as ae, useMemo as h, useState as g } from "react";
+import { useI18n as _ } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { ArrowLeft as v, ArrowRight as y, BarChart3 as oe, BookOpen as b, Download as x, FileText as S, Layers as C, Network as w, Package as T, Plus as E, RefreshCw as D, Settings as se, Shield as O, Zap as k } from "lucide-react";
+import { useParams as ce } from "react-router-dom";
+import { usePermissions as le } from "@burdenoff/fe-libs/shared/providers/shell";
+import { AnimatePresence as ue, motion as A } from "framer-motion";
+import { Fragment as j, jsx as M, jsxs as N } from "react/jsx-runtime";
+import { MotionItem as P, MotionList as F, MotionPage as I } from "@burdenoff/fe-libs/shared/motion";
+//#region src/pages/CatalogDetailPage.tsx
+var L = [
+	"overview",
+	"components",
+	"dependency-graph",
+	"sbom",
+	"docs",
+	"scorecard",
+	"settings"
+];
+function R() {
+	let { t } = _(), { id: r } = ce(), i = s(), { hasPermission: y, isLoading: x } = le(), T = ae((e, n) => {
+		let r = t(e);
+		return r === e ? n : r;
+	}, [t]), [j, R] = ee(L, "overview"), [H, U] = g(!1), [de, W] = g(!1), [G, K] = g(null), { data: fe, loading: q, error: J, refetch: Y } = n({
+		variables: { id: r || "" },
+		skip: !r,
+		fetchPolicy: "cache-and-network"
+	}), [X] = o({ refetchQueries: ["GetCatalog"] }), [pe] = e({ refetchQueries: ["GetCatalog"] }), [me] = a({ refetchQueries: ["GetCatalog"] }), Z = fe?.vibecontrolsCatalog ?? null, Q = h(() => (Z?.components ?? []).map((e) => {
+		let t = e.component || {};
+		return {
+			id: t.id,
+			name: t.name,
+			description: t.description || null,
+			type: t.type,
+			lifecycle: t.lifecycle,
+			version: t.version || null,
+			language: t.language || null,
+			framework: t.framework || null,
+			tags: t.tags || [],
+			createdAt: t.createdAt,
+			updatedAt: t.updatedAt
+		};
+	}), [Z?.components]);
+	if (x) return /* @__PURE__ */ M("div", {
+		className: "flex items-center justify-center min-h-[400px]",
+		children: /* @__PURE__ */ M("p", {
+			className: "text-text-secondary",
+			children: "Loading permissions..."
+		})
+	});
+	if (!y(m.VIBE_READ)) return /* @__PURE__ */ M("div", {
+		className: "flex items-center justify-center min-h-[400px]",
+		children: /* @__PURE__ */ N("div", {
+			className: "text-center space-y-2",
+			children: [/* @__PURE__ */ M("h2", {
+				className: "text-lg font-semibold text-foreground",
+				children: "Access Denied"
+			}), /* @__PURE__ */ M("p", {
+				className: "text-sm text-text-secondary",
+				children: "You don't have permission to access this page."
+			})]
+		})
+	});
+	let $ = () => {
+		i("/catalogs");
+	}, he = (e) => {
+		i(`/components/${e.id}`);
+	}, ge = async (e) => {
+		r && (await X({ variables: {
+			id: r,
+			input: {
+				name: e.name,
+				description: e.description || void 0,
+				visibility: e.visibility,
+				ownerName: e.owner || void 0,
+				tags: e.tags.length > 0 ? e.tags : void 0
+			}
+		} }), K(T("catalog.updatedSuccess", "Catalog updated successfully")), setTimeout(() => K(null), 3e3));
+	}, _e = [
+		{
+			id: "overview",
+			label: T("nav.overview", "Overview"),
+			icon: b
+		},
+		{
+			id: "components",
+			label: T("catalog.components", "Components"),
+			icon: C,
+			badge: `${Z?.componentCount ?? 0}`
+		},
+		{
+			id: "dependency-graph",
+			label: T("catalog.dependencyGraph", "Dependency Graph"),
+			icon: w
+		},
+		{
+			id: "sbom",
+			label: T("catalog.sbom", "SBOM"),
+			icon: O
+		},
+		{
+			id: "docs",
+			label: T("catalog.docs", "Docs"),
+			icon: S
+		},
+		{
+			id: "scorecard",
+			label: T("catalog.scorecard", "Scorecard"),
+			icon: oe
+		},
+		{
+			id: "settings",
+			label: T("common.settings", "Settings"),
+			icon: se
+		}
+	];
+	return q && !Z ? /* @__PURE__ */ N(I, {
+		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
+		children: [/* @__PURE__ */ N("button", {
+			onClick: $,
+			className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
+			children: [/* @__PURE__ */ M(v, { className: "w-4 h-4" }), T("catalog.backToCatalogs", "Back to Catalogs")]
+		}), /* @__PURE__ */ M(l, { message: T("catalog.loadingDetails", "Loading catalog details...") })]
+	}) : J && !Z ? /* @__PURE__ */ N(I, {
+		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
+		children: [/* @__PURE__ */ N("button", {
+			onClick: $,
+			className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
+			children: [/* @__PURE__ */ M(v, { className: "w-4 h-4" }), T("catalog.backToCatalogs", "Back to Catalogs")]
+		}), /* @__PURE__ */ M(u, {
+			title: T("catalog.failedLoad", "Failed to load catalog"),
+			message: J.message,
+			onRetry: () => Y()
+		})]
+	}) : Z ? /* @__PURE__ */ N(I, {
+		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
+		children: [
+			G && /* @__PURE__ */ M("div", {
+				className: "fixed top-4 left-4 right-4 sm:left-auto z-50 bg-status-success-bg text-status-success-text px-4 py-3 rounded-md shadow-lg",
+				children: G
+			}),
+			/* @__PURE__ */ N("button", {
+				onClick: $,
+				className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
+				children: [/* @__PURE__ */ M(v, { className: "w-4 h-4" }), T("catalog.backToCatalogs", "Back to Catalogs")]
+			}),
+			/* @__PURE__ */ M(c, {
+				title: Z.name,
+				description: Z.description || T("catalog.noDescription", "No description"),
+				actions: /* @__PURE__ */ N("div", {
+					className: "flex items-center gap-2 flex-wrap",
+					children: [/* @__PURE__ */ M("button", {
+						onClick: () => Y(),
+						disabled: q,
+						className: "flex items-center justify-center p-2 bg-bg-sunken text-text-primary rounded-md hover:bg-bg-sunken/80 transition-colors disabled:opacity-50",
+						title: T("common.refresh", "Refresh"),
+						children: /* @__PURE__ */ M(D, { className: `w-4 h-4 ${q ? "animate-spin" : ""}` })
+					}), /* @__PURE__ */ M("span", {
+						className: `inline-flex items-center px-2.5 py-1 text-xs font-medium rounded ${Z.visibility === "PUBLIC" ? "bg-status-success-bg text-status-success-text" : Z.visibility === "INTERNAL" ? "bg-status-warning-bg text-status-warning-text" : "bg-bg-sunken text-text-secondary"}`,
+						children: Z.visibility
+					})]
+				})
+			}),
+			/* @__PURE__ */ N(F, {
+				stagger: .04,
+				className: "grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4",
+				children: [
+					/* @__PURE__ */ M(P, { children: /* @__PURE__ */ M(p, {
+						title: T("catalog.components", "Components"),
+						value: Z.componentCount ?? 0,
+						icon: /* @__PURE__ */ M(C, { className: "w-4 h-4" })
+					}) }),
+					/* @__PURE__ */ M(P, { children: /* @__PURE__ */ M(p, {
+						title: T("catalog.vibes", "Vibes"),
+						value: Z.vibeCount ?? 0,
+						icon: /* @__PURE__ */ M(k, { className: "w-4 h-4" })
+					}) }),
+					/* @__PURE__ */ M(P, { children: /* @__PURE__ */ M(p, {
+						title: T("catalog.ownerName", "Owner"),
+						value: Z.ownerNameName || "Unassigned",
+						icon: /* @__PURE__ */ M(b, { className: "w-4 h-4" })
+					}) })
+				]
+			}),
+			/* @__PURE__ */ M("div", {
+				className: "border-b border-border-default",
+				children: /* @__PURE__ */ M("nav", {
+					className: "flex gap-1 -mb-px overflow-x-auto pb-1",
+					"aria-label": T("catalog.tabsAriaLabel", "Catalog tabs"),
+					children: _e.map((e) => {
+						let t = e.icon, n = j === e.id;
+						return /* @__PURE__ */ N("button", {
+							onClick: () => R(e.id),
+							className: `flex shrink-0 items-center gap-1.5 px-3 py-2.5 text-xs sm:gap-2 sm:px-4 sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${n ? "border-action-primary-bg text-action-primary-text" : "border-transparent text-text-secondary hover:text-text-primary hover:border-border-default"}`,
+							"aria-selected": n,
+							role: "tab",
+							children: [
+								/* @__PURE__ */ M(t, { className: "w-4 h-4" }),
+								e.label,
+								e.badge && /* @__PURE__ */ M("span", {
+									className: `hidden rounded-full px-1.5 py-0.5 text-[10px] sm:inline-flex sm:text-xs ${n ? "bg-action-primary-bg/10 text-action-primary-bg" : "bg-bg-sunken text-text-muted"}`,
+									children: e.badge
+								})
+							]
+						}, e.id);
+					})
+				})
+			}),
+			/* @__PURE__ */ N(ue, {
+				mode: "wait",
+				children: [
+					j === "overview" && /* @__PURE__ */ N(A.div, {
+						initial: {
+							opacity: 0,
+							y: 8
+						},
+						animate: {
+							opacity: 1,
+							y: 0
+						},
+						exit: {
+							opacity: 0,
+							y: -8
+						},
+						transition: { duration: .2 },
+						className: "space-y-6",
+						children: [
+							Z.description && /* @__PURE__ */ M(f, { children: /* @__PURE__ */ M("div", {
+								className: "p-4",
+								children: /* @__PURE__ */ M("p", {
+									className: "text-text-primary",
+									children: Z.description
+								})
+							}) }),
+							/* @__PURE__ */ N(f, { children: [/* @__PURE__ */ M("div", {
+								className: "p-4 border-b border-border-default",
+								children: /* @__PURE__ */ M("h3", {
+									className: "font-semibold text-text-primary",
+									children: T("catalog.metadata", "Metadata")
+								})
+							}), /* @__PURE__ */ M("div", {
+								className: "p-4",
+								children: /* @__PURE__ */ N("div", {
+									className: "grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm",
+									children: [
+										/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+											className: "text-text-secondary",
+											children: T("catalog.ownerNameLabel", "Owner")
+										}), /* @__PURE__ */ M("p", {
+											className: "font-medium text-text-primary",
+											children: Z.ownerName || T("common.unset", "Unset")
+										})] }),
+										/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+											className: "text-text-secondary",
+											children: T("catalog.visibility", "Visibility")
+										}), /* @__PURE__ */ M("p", {
+											className: "font-medium text-text-primary",
+											children: Z.visibility
+										})] }),
+										/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+											className: "text-text-secondary",
+											children: T("common.created", "Created")
+										}), /* @__PURE__ */ M("p", {
+											className: "font-medium text-text-primary",
+											children: new Date(Z.createdAt).toLocaleDateString()
+										})] }),
+										/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+											className: "text-text-secondary",
+											children: T("common.updated", "Updated")
+										}), /* @__PURE__ */ M("p", {
+											className: "font-medium text-text-primary",
+											children: new Date(Z.updatedAt).toLocaleDateString()
+										})] })
+									]
+								})
+							})] }),
+							Z.tags?.length > 0 && /* @__PURE__ */ M(f, { children: /* @__PURE__ */ N("div", {
+								className: "p-4",
+								children: [/* @__PURE__ */ M("h3", {
+									className: "font-semibold text-text-primary mb-3",
+									children: T("catalog.tags", "Tags")
+								}), /* @__PURE__ */ M("div", {
+									className: "flex flex-wrap gap-2",
+									children: Z.tags.map((e) => /* @__PURE__ */ M("span", {
+										className: "px-2.5 py-1 text-sm bg-bg-sunken text-text-secondary rounded-md",
+										children: e
+									}, e))
+								})]
+							}) })
+						]
+					}, "overview"),
+					j === "components" && /* @__PURE__ */ N(A.div, {
+						initial: {
+							opacity: 0,
+							y: 8
+						},
+						animate: {
+							opacity: 1,
+							y: 0
+						},
+						exit: {
+							opacity: 0,
+							y: -8
+						},
+						transition: { duration: .2 },
+						className: "space-y-4",
+						children: [/* @__PURE__ */ N("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ N("p", {
+								className: "text-sm text-text-secondary",
+								children: [
+									Q.length,
+									" ",
+									T("catalog.componentsInCatalog", "components in this catalog")
+								]
+							}), /* @__PURE__ */ N("button", {
+								onClick: () => W(!0),
+								className: "flex items-center gap-2 px-3 py-2 text-sm bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors",
+								children: [/* @__PURE__ */ M(E, { className: "w-4 h-4" }), T("catalog.addComponent", "Add Component")]
+							})]
+						}), Q.length > 0 ? /* @__PURE__ */ M(F, {
+							stagger: .04,
+							className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
+							children: Q.map((e) => /* @__PURE__ */ M(P, { children: /* @__PURE__ */ M(re, {
+								component: e,
+								onOpen: he
+							}) }, e.id))
+						}) : /* @__PURE__ */ M(d, {
+							icon: /* @__PURE__ */ M(C, { className: "w-8 h-8 text-text-secondary" }),
+							title: T("catalog.noComponents", "No components"),
+							description: T("catalog.noComponentsDescription", "Add components to this catalog to track them")
+						})]
+					}, "components"),
+					j === "dependency-graph" && /* @__PURE__ */ M(z, {
+						catalogId: r || "",
+						tr: T
+					}),
+					j === "sbom" && /* @__PURE__ */ M(B, {
+						catalogId: r || "",
+						tr: T
+					}),
+					j === "docs" && /* @__PURE__ */ M(A.div, {
+						initial: {
+							opacity: 0,
+							y: 8
+						},
+						animate: {
+							opacity: 1,
+							y: 0
+						},
+						exit: {
+							opacity: 0,
+							y: -8
+						},
+						transition: { duration: .2 },
+						className: "space-y-6",
+						children: /* @__PURE__ */ M(ne, {
+							ownerType: "CATALOG",
+							ownerId: r || ""
+						})
+					}, "docs"),
+					j === "scorecard" && /* @__PURE__ */ M(A.div, {
+						initial: {
+							opacity: 0,
+							y: 8
+						},
+						animate: {
+							opacity: 1,
+							y: 0
+						},
+						exit: {
+							opacity: 0,
+							y: -8
+						},
+						transition: { duration: .2 },
+						children: /* @__PURE__ */ M(te, {
+							ownerType: "CATALOG",
+							ownerId: r || ""
+						})
+					}, "scorecard"),
+					j === "settings" && /* @__PURE__ */ M(A.div, {
+						initial: {
+							opacity: 0,
+							y: 8
+						},
+						animate: {
+							opacity: 1,
+							y: 0
+						},
+						exit: {
+							opacity: 0,
+							y: -8
+						},
+						transition: { duration: .2 },
+						children: /* @__PURE__ */ N(f, {
+							padding: "lg",
+							children: [/* @__PURE__ */ M("h3", {
+								className: "font-semibold text-text-primary mb-4",
+								children: T("catalog.editCatalog", "Edit Catalog")
+							}), /* @__PURE__ */ M("button", {
+								onClick: () => U(!0),
+								className: "px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors",
+								children: T("catalog.editDetails", "Edit Details")
+							})]
+						})
+					}, "settings")
+				]
+			}),
+			/* @__PURE__ */ M(ie, {
+				isOpen: H,
+				onClose: () => U(!1),
+				onSubmit: ge,
+				initialData: {
+					name: Z.name,
+					description: Z.description || "",
+					visibility: Z.visibility,
+					owner: Z.ownerName || "",
+					tags: Z.tags || []
+				},
+				title: T("catalog.editCatalog", "Edit Catalog")
+			}),
+			de && /* @__PURE__ */ M(V, {
+				catalogId: r || "",
+				existingComponentIds: Q.map((e) => e.id),
+				onAdd: async (e) => {
+					await pe({ variables: {
+						catalogId: r,
+						componentId: e
+					} }), K(T("catalog.componentAdded", "Component added to catalog")), setTimeout(() => K(null), 3e3), W(!1);
+				},
+				onClose: () => W(!1),
+				tr: T
+			})
+		]
+	}) : /* @__PURE__ */ N(I, {
+		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
+		children: [/* @__PURE__ */ N("button", {
+			onClick: $,
+			className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
+			children: [/* @__PURE__ */ M(v, { className: "w-4 h-4" }), T("catalog.backToCatalogs", "Back to Catalogs")]
+		}), /* @__PURE__ */ M(d, {
+			icon: /* @__PURE__ */ M(b, { className: "w-8 h-8 text-text-secondary" }),
+			title: T("catalog.notFound", "Catalog not found"),
+			description: `No catalog with ID "${r}" exists`,
+			action: /* @__PURE__ */ M("button", {
+				onClick: $,
+				className: "px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors",
+				children: T("catalog.backToCatalogs", "Back to Catalogs")
+			})
+		})]
+	});
+}
+function z({ catalogId: e, tr: n }) {
+	let { data: r, loading: i, error: a, refetch: o } = t({
+		variables: { catalogId: e },
+		skip: !e,
+		fetchPolicy: "cache-and-network"
+	}), s = r?.vibecontrolsCatalogDependencyGraph;
+	return /* @__PURE__ */ N(A.div, {
+		initial: {
+			opacity: 0,
+			y: 8
+		},
+		animate: {
+			opacity: 1,
+			y: 0
+		},
+		exit: {
+			opacity: 0,
+			y: -8
+		},
+		transition: { duration: .2 },
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ N("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ N("h3", {
+					className: "font-semibold text-text-primary flex items-center gap-2",
+					children: [/* @__PURE__ */ M(w, { className: "w-5 h-5" }), n("catalog.dependencyGraph", "Dependency Graph")]
+				}), /* @__PURE__ */ M("button", {
+					onClick: () => o(),
+					disabled: i,
+					className: "p-2 text-text-secondary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50",
+					title: n("common.refresh", "Refresh"),
+					children: /* @__PURE__ */ M(D, { className: `w-4 h-4 ${i ? "animate-spin" : ""}` })
+				})]
+			}),
+			i && !s && /* @__PURE__ */ M(l, { message: n("catalog.loadingGraph", "Loading dependency graph...") }),
+			a && !s && /* @__PURE__ */ M(u, {
+				title: n("catalog.graphError", "Failed to load graph"),
+				message: a.message,
+				onRetry: () => o()
+			}),
+			s && s.nodes.length === 0 && /* @__PURE__ */ M(d, {
+				icon: /* @__PURE__ */ M(w, { className: "w-8 h-8 text-text-secondary" }),
+				title: n("catalog.noGraphNodes", "No dependency data"),
+				description: n("catalog.noGraphNodesDesc", "Add components with dependencies to this catalog to visualize the dependency graph")
+			}),
+			s && s.nodes.length > 0 && /* @__PURE__ */ N(j, { children: [
+				/* @__PURE__ */ N("div", {
+					className: "grid grid-cols-2 gap-4",
+					children: [/* @__PURE__ */ N(f, {
+						padding: "md",
+						children: [/* @__PURE__ */ M("p", {
+							className: "text-sm text-text-secondary",
+							children: n("catalog.graphNodes", "Components")
+						}), /* @__PURE__ */ M("p", {
+							className: "text-2xl font-bold text-text-primary",
+							children: s.nodes.length
+						})]
+					}), /* @__PURE__ */ N(f, {
+						padding: "md",
+						children: [/* @__PURE__ */ M("p", {
+							className: "text-sm text-text-secondary",
+							children: n("catalog.graphEdges", "Dependencies")
+						}), /* @__PURE__ */ M("p", {
+							className: "text-2xl font-bold text-text-primary",
+							children: s.edges.length
+						})]
+					})]
+				}),
+				/* @__PURE__ */ N(f, { children: [/* @__PURE__ */ M("div", {
+					className: "p-4 border-b border-border-default",
+					children: /* @__PURE__ */ M("h4", {
+						className: "font-medium text-text-primary",
+						children: n("catalog.graphNodesList", "Components")
+					})
+				}), /* @__PURE__ */ M("div", {
+					className: "divide-y divide-border-default",
+					children: s.nodes.map((e) => /* @__PURE__ */ N("div", {
+						className: "p-3 flex items-center justify-between",
+						children: [/* @__PURE__ */ N("div", {
+							className: "flex items-center gap-3",
+							children: [/* @__PURE__ */ M(T, { className: "w-4 h-4 text-text-secondary" }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+								className: "font-medium text-text-primary text-sm",
+								children: e.name
+							}), /* @__PURE__ */ N("p", {
+								className: "text-xs text-text-secondary",
+								children: [e.type, e.version ? ` v${e.version}` : ""]
+							})] })]
+						}), /* @__PURE__ */ N("span", {
+							className: "text-xs text-text-muted",
+							children: [s.edges.filter((t) => t.source === e.id).length, " deps"]
+						})]
+					}, e.id))
+				})] }),
+				s.edges.length > 0 && /* @__PURE__ */ N(f, { children: [/* @__PURE__ */ M("div", {
+					className: "p-4 border-b border-border-default",
+					children: /* @__PURE__ */ M("h4", {
+						className: "font-medium text-text-primary",
+						children: n("catalog.graphEdgesList", "Dependencies")
+					})
+				}), /* @__PURE__ */ M("div", {
+					className: "divide-y divide-border-default",
+					children: s.edges.map((e, t) => /* @__PURE__ */ N("div", {
+						className: "p-3 flex items-center gap-3 text-sm",
+						children: [
+							/* @__PURE__ */ M("span", {
+								className: "font-medium text-text-primary truncate max-w-[120px]",
+								children: s.nodes.find((t) => t.id === e.source)?.name || e.source
+							}),
+							/* @__PURE__ */ M(y, { className: "w-4 h-4 text-text-muted flex-shrink-0" }),
+							/* @__PURE__ */ M("span", {
+								className: "text-text-primary truncate max-w-[120px]",
+								children: e.target
+							}),
+							e.version && /* @__PURE__ */ M("span", {
+								className: "text-xs text-text-muted ml-auto",
+								children: e.version
+							}),
+							e.dependencyType && /* @__PURE__ */ M("span", {
+								className: "text-xs bg-bg-sunken text-text-secondary px-1.5 py-0.5 rounded",
+								children: e.dependencyType
+							})
+						]
+					}, t))
+				})] })
+			] })
+		]
+	}, "dependency-graph");
+}
+function B({ catalogId: e, tr: t }) {
+	let { data: n, loading: i, error: a, refetch: o } = r({
+		variables: { catalogId: e },
+		skip: !e,
+		fetchPolicy: "cache-and-network"
+	}), s = n?.vibecontrolsCatalogSBOM;
+	return /* @__PURE__ */ N(A.div, {
+		initial: {
+			opacity: 0,
+			y: 8
+		},
+		animate: {
+			opacity: 1,
+			y: 0
+		},
+		exit: {
+			opacity: 0,
+			y: -8
+		},
+		transition: { duration: .2 },
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ N("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ N("h3", {
+					className: "font-semibold text-text-primary flex items-center gap-2",
+					children: [/* @__PURE__ */ M(O, { className: "w-5 h-5" }), t("catalog.sbom", "Software Bill of Materials")]
+				}), /* @__PURE__ */ N("div", {
+					className: "flex items-center gap-2",
+					children: [s && s.components.length > 0 && /* @__PURE__ */ N("button", {
+						onClick: () => {
+							if (!s) return;
+							let t = new Blob([JSON.stringify(s, null, 2)], { type: "application/json" }), n = URL.createObjectURL(t), r = document.createElement("a");
+							r.href = n, r.download = `sbom-${e}.json`, r.click(), URL.revokeObjectURL(n);
+						},
+						className: "flex items-center gap-2 px-3 py-2 text-sm bg-bg-sunken text-text-primary rounded-md hover:bg-bg-sunken/80 transition-colors",
+						children: [/* @__PURE__ */ M(x, { className: "w-4 h-4" }), t("catalog.downloadSBOM", "Download JSON")]
+					}), /* @__PURE__ */ M("button", {
+						onClick: () => o(),
+						disabled: i,
+						className: "p-2 text-text-secondary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50",
+						title: t("common.refresh", "Refresh"),
+						children: /* @__PURE__ */ M(D, { className: `w-4 h-4 ${i ? "animate-spin" : ""}` })
+					})]
+				})]
+			}),
+			i && !s && /* @__PURE__ */ M(l, { message: t("catalog.loadingSBOM", "Generating SBOM...") }),
+			a && !s && /* @__PURE__ */ M(u, {
+				title: t("catalog.sbomError", "Failed to load SBOM"),
+				message: a.message,
+				onRetry: () => o()
+			}),
+			s && /* @__PURE__ */ N(j, { children: [/* @__PURE__ */ N("div", {
+				className: "grid grid-cols-3 gap-4",
+				children: [
+					/* @__PURE__ */ N(f, {
+						padding: "md",
+						children: [/* @__PURE__ */ M("p", {
+							className: "text-sm text-text-secondary",
+							children: t("catalog.sbomFormat", "Format")
+						}), /* @__PURE__ */ M("p", {
+							className: "text-lg font-bold text-text-primary",
+							children: s.format
+						})]
+					}),
+					/* @__PURE__ */ N(f, {
+						padding: "md",
+						children: [/* @__PURE__ */ M("p", {
+							className: "text-sm text-text-secondary",
+							children: t("catalog.sbomEntries", "Entries")
+						}), /* @__PURE__ */ M("p", {
+							className: "text-lg font-bold text-text-primary",
+							children: s.totalCount
+						})]
+					}),
+					/* @__PURE__ */ N(f, {
+						padding: "md",
+						children: [/* @__PURE__ */ M("p", {
+							className: "text-sm text-text-secondary",
+							children: t("catalog.sbomGenerated", "Generated")
+						}), /* @__PURE__ */ M("p", {
+							className: "text-lg font-bold text-text-primary",
+							children: new Date(s.generatedAt).toLocaleTimeString()
+						})]
+					})
+				]
+			}), s.components.length > 0 ? /* @__PURE__ */ M(f, { children: /* @__PURE__ */ M("div", {
+				className: "overflow-x-auto",
+				children: /* @__PURE__ */ N("table", {
+					className: "w-full text-sm",
+					children: [/* @__PURE__ */ M("thead", { children: /* @__PURE__ */ N("tr", {
+						className: "border-b border-border-default",
+						children: [
+							/* @__PURE__ */ M("th", {
+								className: "text-left p-3 font-medium text-text-secondary",
+								children: t("catalog.sbomName", "Name")
+							}),
+							/* @__PURE__ */ M("th", {
+								className: "text-left p-3 font-medium text-text-secondary",
+								children: t("catalog.sbomVersion", "Version")
+							}),
+							/* @__PURE__ */ M("th", {
+								className: "text-left p-3 font-medium text-text-secondary",
+								children: t("catalog.sbomType", "Type")
+							}),
+							/* @__PURE__ */ M("th", {
+								className: "text-left p-3 font-medium text-text-secondary",
+								children: t("catalog.sbomLicense", "License")
+							}),
+							/* @__PURE__ */ M("th", {
+								className: "text-left p-3 font-medium text-text-secondary",
+								children: t("catalog.sbomSupplier", "Supplier")
+							})
+						]
+					}) }), /* @__PURE__ */ M("tbody", {
+						className: "divide-y divide-border-default",
+						children: s.components.map((e, t) => /* @__PURE__ */ N("tr", {
+							className: "hover:bg-bg-sunken/50 transition-colors",
+							children: [
+								/* @__PURE__ */ M("td", {
+									className: "p-3 font-medium text-text-primary",
+									children: e.name
+								}),
+								/* @__PURE__ */ M("td", {
+									className: "p-3 text-text-secondary",
+									children: e.version || "-"
+								}),
+								/* @__PURE__ */ M("td", {
+									className: "p-3 text-text-secondary",
+									children: e.type || "-"
+								}),
+								/* @__PURE__ */ M("td", {
+									className: "p-3",
+									children: e.license ? /* @__PURE__ */ M("span", {
+										className: "inline-flex px-2 py-0.5 text-xs bg-status-success-bg text-status-success-text rounded",
+										children: e.license
+									}) : "-"
+								}),
+								/* @__PURE__ */ M("td", {
+									className: "p-3 text-text-secondary",
+									children: e.supplier || "-"
+								})
+							]
+						}, t))
+					})]
+				})
+			}) }) : /* @__PURE__ */ M(d, {
+				icon: /* @__PURE__ */ M(O, { className: "w-8 h-8 text-text-secondary" }),
+				title: t("catalog.noSBOMEntries", "No SBOM entries"),
+				description: t("catalog.noSBOMEntriesDesc", "Add components with SBOM data or dependencies to this catalog to generate an aggregated SBOM")
+			})] })
+		]
+	}, "sbom");
+}
+function V({ catalogId: e, existingComponentIds: t, onAdd: n, onClose: r, tr: a }) {
+	let [o, s] = g(!1), [c, u] = g(""), { data: d, loading: f } = i({ fetchPolicy: "cache-and-network" }), p = h(() => {
+		let e = (d?.vibecontrolsComponents?.items ?? []).filter((e) => !t.includes(e.id));
+		if (!c) return e;
+		let n = c.toLowerCase();
+		return e.filter((e) => e.name.toLowerCase().includes(n) || e.type.toString().toLowerCase().includes(n));
+	}, [
+		d,
+		t,
+		c
+	]), m = async (e) => {
+		s(!0);
+		try {
+			await n(e);
+		} finally {
+			s(!1);
+		}
+	};
+	return /* @__PURE__ */ M("div", {
+		className: "fixed inset-0 bg-bg-overlay flex items-center justify-center z-50 p-4",
+		children: /* @__PURE__ */ N(A.div, {
+			initial: {
+				opacity: 0,
+				scale: .95
+			},
+			animate: {
+				opacity: 1,
+				scale: 1
+			},
+			className: "bg-bg-surface rounded-lg w-full max-w-md max-h-[70vh] flex flex-col",
+			children: [
+				/* @__PURE__ */ N("div", {
+					className: "p-4 border-b border-border-default",
+					children: [/* @__PURE__ */ M("h2", {
+						className: "text-lg font-semibold text-text-primary",
+						children: a("catalog.addComponentTitle", "Add Component to Catalog")
+					}), /* @__PURE__ */ M("div", {
+						className: "mt-3",
+						children: /* @__PURE__ */ M("input", {
+							type: "text",
+							value: c,
+							onChange: (e) => u(e.target.value),
+							placeholder: a("catalog.searchComponents", "Search components..."),
+							className: "w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder text-sm"
+						})
+					})]
+				}),
+				/* @__PURE__ */ N("div", {
+					className: "flex-1 overflow-y-auto p-2",
+					children: [
+						f && /* @__PURE__ */ M(l, { message: a("common.loading", "Loading...") }),
+						!f && p.length === 0 && /* @__PURE__ */ M("div", {
+							className: "p-4 text-center text-text-secondary text-sm",
+							children: a("catalog.noAvailableComponents", "No available components to add")
+						}),
+						p.map((e) => /* @__PURE__ */ N("button", {
+							onClick: () => m(e.id),
+							disabled: o,
+							className: "w-full flex items-center justify-between p-3 rounded-md hover:bg-bg-sunken transition-colors disabled:opacity-50 text-left",
+							children: [/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+								className: "font-medium text-text-primary text-sm",
+								children: e.name
+							}), /* @__PURE__ */ N("p", {
+								className: "text-xs text-text-secondary",
+								children: [
+									e.type,
+									" · ",
+									e.lifecycle
+								]
+							})] }), /* @__PURE__ */ M(E, { className: "w-4 h-4 text-text-secondary" })]
+						}, e.id))
+					]
+				}),
+				/* @__PURE__ */ M("div", {
+					className: "p-4 border-t border-border-default",
+					children: /* @__PURE__ */ M("button", {
+						onClick: r,
+						className: "w-full px-4 py-2 text-text-primary hover:bg-bg-sunken rounded-md transition-colors",
+						children: a("common.close", "Close")
+					})
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { R as CatalogDetailPage };
+
+//# sourceMappingURL=CatalogDetailPage.js.map