@burdenoff/microfe-vibecontrols 2026.613.1 → 2026.618.1

package/dist/pages/CatalogDetailPage.js

@@ -9,31 +9,31 @@ import { EmptyState as m } from "../components/shared/EmptyState.js";
 import { Card as h } from "../components/shared/Card.js";
 import { StatCard as g } from "../components/shared/StatCard.js";
 import "../components/shared/index.js";
-import { VIBE_PERMISSIONS as ee } from "../constants/permissions.js";
-import { EntityShareButton as te } from "../components/sharing/EntityShareButton.js";
+import { VIBE_PERMISSIONS as _ } from "../constants/permissions.js";
+import { EntityShareButton as ee } from "../components/sharing/EntityShareButton.js";
 import "../components/sharing/index.js";
-import { PageSkeleton as ne } from "../components/shared/PageSkeleton.js";
-import { useQueryBackedTab as re } from "../hooks/useQueryBackedTab.js";
-import { DocsTabPanel as ie } from "../components/docs/DocsTabPanel.js";
+import { PageSkeleton as te } from "../components/shared/PageSkeleton.js";
+import { useQueryBackedTab as ne } from "../hooks/useQueryBackedTab.js";
+import { DocsTabPanel as re } from "../components/docs/DocsTabPanel.js";
 import "../components/docs/index.js";
-import { ScorecardPanel as ae } from "../components/scorecard/ScorecardPanel.js";
+import { ScorecardPanel as ie } from "../components/scorecard/ScorecardPanel.js";
 import "../components/scorecard/index.js";
-import { ComponentCard as oe } from "../components/idp-components/ComponentCard.js";
+import { ComponentCard as ae } from "../components/idp-components/ComponentCard.js";
 import "../components/idp-components/index.js";
-import { CatalogForm as se } from "../components/catalog/CatalogForm.js";
+import { CatalogForm as oe } from "../components/catalog/CatalogForm.js";
 import "../components/catalog/index.js";
-import { useCallback as _, useEffect as v, useMemo as y, useState as b } from "react";
-import { useI18n as ce } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { ArrowLeft as x, ArrowRight as S, BarChart3 as le, BookOpen as C, FileText as ue, Layers as w, Network as T, Plus as E, RefreshCw as D, Settings as de, Tag as fe, Trash2 as pe, Zap as me } from "lucide-react";
+import { useCallback as v, useEffect as y, useMemo as b, useState as x } from "react";
+import { useI18n as se } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { ArrowLeft as S, ArrowRight as C, BarChart3 as ce, BookOpen as w, FileText as le, Layers as T, Network as E, Plus as D, RefreshCw as ue, Settings as de, Tag as fe, Trash2 as pe, Zap as me } from "lucide-react";
 import { useParams as he } from "react-router-dom";
 import { usePermissions as ge } from "@burdenoff/fe-libs/shared/providers/shell";
 import { AnimatePresence as _e, motion as O } from "framer-motion";
 import { Fragment as k, jsx as A, jsxs as j } from "react/jsx-runtime";
 import { MotionItem as M, MotionList as N, MotionPage as P } from "@burdenoff/fe-libs/shared/motion";
-import { Background as F, BackgroundVariant as I, Controls as L, Handle as R, MarkerType as z, Position as B, ReactFlow as V, addEdge as H, useEdgesState as U, useNodesState as W } from "@xyflow/react";
+import { Background as ve, BackgroundVariant as F, Controls as I, Handle as L, MarkerType as R, Position as z, ReactFlow as B, addEdge as V, useEdgesState as H, useNodesState as U } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 //#region src/pages/CatalogDetailPage.tsx
-var ve = [
+var ye = [
 	"overview",
 	"components",
 	"dependency-graph",
@@ -41,15 +41,15 @@ var ve = [
 	"docs",
 	"settings"
 ];
-function G() {
-	let { t: n } = ce(), { id: i } = he(), s = l(), { hasPermission: d, isLoading: v } = ge(), S = _((e, t) => {
+function W() {
+	let { t: n } = se(), { id: i } = he(), s = l(), { hasPermission: d, isLoading: y } = ge(), C = d(_.CATALOG_READ), k = d(_.CATALOG_UPDATE), ve = d(_.CATALOG_DELETE), F = d(_.COMPONENT_READ), I = v((e, t) => {
 		let r = n(e);
 		return r === e ? t : r;
-	}, [n]), [k, F] = re(ve, "overview"), [I, L] = b(!1), [R, z] = b(!1), [B, V] = b(!1), [H, U] = b(!1), [W, G] = b(null), { data: K, loading: q, error: J, refetch: Y } = r({
+	}, [n]), [L, R] = ne(ye, "overview"), [z, B] = x(!1), [V, H] = x(!1), [U, W] = x(!1), [G, K] = x(!1), [q, J] = x(null), { data: Se, loading: Y, error: X, refetch: Ce } = r({
 		variables: { id: i || "" },
-		skip: !i,
+		skip: !i || y || !C,
 		fetchPolicy: "cache-and-network"
-	}), [be] = o({ refetchQueries: ["GetCatalog"] }), [xe] = t({ refetchQueries: ["ListCatalogs"] }), [Se] = e({ refetchQueries: ["GetCatalog"] }), [Ce] = a({ refetchQueries: ["GetCatalog"] }), Z = K?.vibecontrolsCatalog ?? null, Q = y(() => (Z?.components ?? []).map((e) => {
+	}), [we] = o({ refetchQueries: ["GetCatalog"] }), [Te] = t({ refetchQueries: ["ListCatalogs"] }), [Ee] = e({ refetchQueries: ["GetCatalog"] }), [De] = a({ refetchQueries: ["GetCatalog"] }), Z = Se?.vibecontrolsCatalog ?? null, Q = b(() => (Z?.components ?? []).map((e) => {
 		let t = e.component || {};
 		return {
 			id: t.id,
@@ -65,14 +65,14 @@ function G() {
 			updatedAt: t.updatedAt
 		};
 	}), [Z?.components]);
-	if (v) return /* @__PURE__ */ A("div", {
+	if (y) return /* @__PURE__ */ A("div", {
 		className: "flex items-center justify-center min-h-[400px]",
 		children: /* @__PURE__ */ A("p", {
 			className: "text-text-secondary",
 			children: "Loading permissions…"
 		})
 	});
-	if (!d(ee.VIBE_READ)) return /* @__PURE__ */ A("div", {
+	if (!C) return /* @__PURE__ */ A("div", {
 		className: "flex items-center justify-center min-h-[400px]",
 		children: /* @__PURE__ */ j("div", {
 			className: "text-center space-y-2",
@@ -87,10 +87,10 @@ function G() {
 	});
 	let $ = () => {
 		s("/catalogs");
-	}, we = (e) => {
+	}, Oe = (e) => {
 		s(`/components/${e.id}`);
-	}, Te = async (e) => {
-		i && (await be({ variables: {
+	}, ke = async (e) => {
+		!i || !k || (await we({ variables: {
 			id: i,
 			input: {
 				name: e.name,
@@ -99,104 +99,104 @@ function G() {
 				ownerName: e.owner || void 0,
 				tags: e.tags.length > 0 ? e.tags : void 0
 			}
-		} }), G(S("catalog.updatedSuccess", "Catalog updated successfully")), setTimeout(() => G(null), 3e3));
-	}, Ee = async () => {
+		} }), J(I("catalog.updatedSuccess", "Catalog updated successfully")), setTimeout(() => J(null), 3e3));
+	}, Ae = async () => {
 		if (i) {
-			U(!0);
+			K(!0);
 			try {
-				await xe({ variables: { id: i } }), V(!1), s("/catalogs");
+				await Te({ variables: { id: i } }), W(!1), s("/catalogs");
 			} finally {
-				U(!1);
+				K(!1);
 			}
 		}
-	}, De = [
+	}, je = [
 		{
 			id: "overview",
-			label: S("nav.overview", "Overview"),
-			icon: C
+			label: I("nav.overview", "Overview"),
+			icon: w
 		},
 		{
 			id: "components",
-			label: S("catalog.components", "Components"),
-			icon: w,
+			label: I("catalog.components", "Components"),
+			icon: T,
 			badge: `${Z?.componentCount ?? 0}`
 		},
 		{
 			id: "dependency-graph",
-			label: S("catalog.dependencyGraph", "Dependency Graph"),
-			icon: T
+			label: I("catalog.dependencyGraph", "Dependency Graph"),
+			icon: E
 		},
 		{
 			id: "scorecard",
-			label: S("catalog.scorecard", "Scorecard"),
-			icon: le
+			label: I("catalog.scorecard", "Scorecard"),
+			icon: ce
 		},
 		{
 			id: "docs",
-			label: S("catalog.docs", "Docs"),
-			icon: ue
+			label: I("catalog.docs", "Docs"),
+			icon: le
 		},
 		{
 			id: "settings",
-			label: S("common.settings", "Settings"),
+			label: I("common.settings", "Settings"),
 			icon: de
 		}
 	];
-	return q && !Z ? /* @__PURE__ */ j(P, {
+	return Y && !Z ? /* @__PURE__ */ j(P, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
 		children: [/* @__PURE__ */ j("button", {
 			type: "button",
 			onClick: $,
 			className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
-			children: [/* @__PURE__ */ A(x, { className: "size-4" }), S("catalog.backToCatalogs", "Back to Catalogs")]
-		}), /* @__PURE__ */ A(ne, { variant: "detail" })]
-	}) : J && !Z ? /* @__PURE__ */ j(P, {
+			children: [/* @__PURE__ */ A(S, { className: "size-4" }), I("catalog.backToCatalogs", "Back to Catalogs")]
+		}), /* @__PURE__ */ A(te, { variant: "detail" })]
+	}) : X && !Z ? /* @__PURE__ */ j(P, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
 		children: [/* @__PURE__ */ j("button", {
 			type: "button",
 			onClick: $,
 			className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
-			children: [/* @__PURE__ */ A(x, { className: "size-4" }), S("catalog.backToCatalogs", "Back to Catalogs")]
+			children: [/* @__PURE__ */ A(S, { className: "size-4" }), I("catalog.backToCatalogs", "Back to Catalogs")]
 		}), /* @__PURE__ */ A(f, {
-			title: S("catalog.failedLoad", "Failed to load catalog"),
-			message: J.message,
-			onRetry: () => Y()
+			title: I("catalog.failedLoad", "Failed to load catalog"),
+			message: X.message,
+			onRetry: () => Ce()
 		})]
 	}) : Z ? /* @__PURE__ */ j(P, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
 		children: [
-			W && /* @__PURE__ */ A("div", {
+			q && /* @__PURE__ */ A("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: W
+				children: q
 			}),
 			/* @__PURE__ */ j("button", {
 				type: "button",
 				onClick: $,
 				className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
-				children: [/* @__PURE__ */ A(x, { className: "size-4" }), S("catalog.backToCatalogs", "Back to Catalogs")]
+				children: [/* @__PURE__ */ A(S, { className: "size-4" }), I("catalog.backToCatalogs", "Back to Catalogs")]
 			}),
 			/* @__PURE__ */ A(u, {
 				title: Z.name,
-				description: Z.description || S("catalog.noDescription", "No description"),
+				description: Z.description || I("catalog.noDescription", "No description"),
 				actions: /* @__PURE__ */ j("div", {
 					className: "flex items-center gap-2 flex-wrap",
 					children: [
-						/* @__PURE__ */ A(te, {
+						/* @__PURE__ */ A(ee, {
 							entity: "catalog",
 							resource: {
 								id: Z.id,
 								name: Z.name
 							},
-							label: S("catalog.share", "Share"),
+							label: I("catalog.share", "Share"),
 							variant: "button"
 						}),
 						/* @__PURE__ */ A("button", {
 							type: "button",
-							onClick: () => Y(),
-							disabled: q,
+							onClick: () => Ce(),
+							disabled: Y,
 							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: S("common.refresh", "Refresh"),
-							children: /* @__PURE__ */ A(D, { className: `size-4 ${q ? "animate-spin" : ""}` })
+							title: I("common.refresh", "Refresh"),
+							children: /* @__PURE__ */ A(ue, { className: `size-4 ${Y ? "animate-spin" : ""}` })
 						}),
 						/* @__PURE__ */ A("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"}`,
@@ -210,19 +210,19 @@ function G() {
 				className: "grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4",
 				children: [
 					/* @__PURE__ */ A(M, { children: /* @__PURE__ */ A(g, {
-						title: S("catalog.components", "Components"),
+						title: I("catalog.components", "Components"),
 						value: Z.componentCount ?? 0,
-						icon: /* @__PURE__ */ A(w, { className: "size-4" })
+						icon: /* @__PURE__ */ A(T, { className: "size-4" })
 					}) }),
 					/* @__PURE__ */ A(M, { children: /* @__PURE__ */ A(g, {
-						title: S("catalog.vibes", "Vibes"),
+						title: I("catalog.vibes", "Vibes"),
 						value: Z.vibeCount ?? 0,
 						icon: /* @__PURE__ */ A(me, { className: "size-4" })
 					}) }),
 					/* @__PURE__ */ A(M, { children: /* @__PURE__ */ A(g, {
-						title: S("catalog.ownerName", "Owner"),
+						title: I("catalog.ownerName", "Owner"),
 						value: Z.ownerNameName || "Unassigned",
-						icon: /* @__PURE__ */ A(C, { className: "size-4" })
+						icon: /* @__PURE__ */ A(w, { className: "size-4" })
 					}) })
 				]
 			}),
@@ -230,7 +230,7 @@ function G() {
 				className: "p-4 border-b border-border-default flex items-center gap-2",
 				children: [/* @__PURE__ */ A(fe, { className: "size-5" }), /* @__PURE__ */ A("h3", {
 					className: "font-semibold text-text-primary",
-					children: S("catalog.tags", "Tags")
+					children: I("catalog.tags", "Tags")
 				})]
 			}), /* @__PURE__ */ A("div", {
 				className: "p-4",
@@ -243,12 +243,12 @@ function G() {
 				className: "border-b border-border-default",
 				children: /* @__PURE__ */ A("nav", {
 					className: "flex gap-1 -mb-px overflow-x-auto pb-1",
-					"aria-label": S("catalog.tabsAriaLabel", "Catalog tabs"),
-					children: De.map((e) => {
-						let t = e.icon, n = k === e.id;
+					"aria-label": I("catalog.tabsAriaLabel", "Catalog tabs"),
+					children: je.map((e) => {
+						let t = e.icon, n = L === e.id;
 						return /* @__PURE__ */ j("button", {
 							type: "button",
-							onClick: () => F(e.id),
+							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",
@@ -267,7 +267,7 @@ function G() {
 			/* @__PURE__ */ j(_e, {
 				mode: "wait",
 				children: [
-					k === "overview" && /* @__PURE__ */ j(O.div, {
+					L === "overview" && /* @__PURE__ */ j(O.div, {
 						initial: {
 							opacity: 0,
 							y: 8
@@ -294,7 +294,7 @@ function G() {
 								className: "p-4 border-b border-border-default",
 								children: /* @__PURE__ */ A("h3", {
 									className: "font-semibold text-text-primary",
-									children: S("catalog.metadata", "Metadata")
+									children: I("catalog.metadata", "Metadata")
 								})
 							}), /* @__PURE__ */ A("div", {
 								className: "p-4",
@@ -303,28 +303,28 @@ function G() {
 									children: [
 										/* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
 											className: "text-text-secondary",
-											children: S("catalog.ownerNameLabel", "Owner")
+											children: I("catalog.ownerNameLabel", "Owner")
 										}), /* @__PURE__ */ A("p", {
 											className: "font-medium text-text-primary",
-											children: Z.ownerName || S("common.unset", "Unset")
+											children: Z.ownerName || I("common.unset", "Unset")
 										})] }),
 										/* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
 											className: "text-text-secondary",
-											children: S("catalog.visibility", "Visibility")
+											children: I("catalog.visibility", "Visibility")
 										}), /* @__PURE__ */ A("p", {
 											className: "font-medium text-text-primary",
 											children: Z.visibility
 										})] }),
 										/* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
 											className: "text-text-secondary",
-											children: S("common.created", "Created")
+											children: I("common.created", "Created")
 										}), /* @__PURE__ */ A("p", {
 											className: "font-medium text-text-primary",
 											children: new Date(Z.createdAt).toLocaleDateString()
 										})] }),
 										/* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
 											className: "text-text-secondary",
-											children: S("common.updated", "Updated")
+											children: I("common.updated", "Updated")
 										}), /* @__PURE__ */ A("p", {
 											className: "font-medium text-text-primary",
 											children: new Date(Z.updatedAt).toLocaleDateString()
@@ -336,7 +336,7 @@ function G() {
 								className: "p-4",
 								children: [/* @__PURE__ */ A("h3", {
 									className: "font-semibold text-text-primary mb-3",
-									children: S("catalog.tags", "Tags")
+									children: I("catalog.tags", "Tags")
 								}), /* @__PURE__ */ A("div", {
 									className: "flex flex-wrap gap-2",
 									children: Z.tags.map((e) => /* @__PURE__ */ A("span", {
@@ -347,7 +347,7 @@ function G() {
 							}) })
 						]
 					}, "overview"),
-					k === "components" && /* @__PURE__ */ j(O.div, {
+					L === "components" && /* @__PURE__ */ j(O.div, {
 						initial: {
 							opacity: 0,
 							y: 8
@@ -369,32 +369,32 @@ function G() {
 								children: [
 									Q.length,
 									" ",
-									S("catalog.componentsInCatalog", "components in this catalog")
+									I("catalog.componentsInCatalog", "components in this catalog")
 								]
-							}), /* @__PURE__ */ j("button", {
+							}), k && F && /* @__PURE__ */ j("button", {
 								type: "button",
-								onClick: () => z(!0),
+								onClick: () => H(!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__ */ A(E, { className: "size-4" }), S("catalog.addComponent", "Add Component")]
+								children: [/* @__PURE__ */ A(D, { className: "size-4" }), I("catalog.addComponent", "Add Component")]
 							})]
 						}), Q.length > 0 ? /* @__PURE__ */ A(N, {
 							stagger: .04,
 							className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
-							children: Q.map((e) => /* @__PURE__ */ A(M, { children: /* @__PURE__ */ A(oe, {
+							children: Q.map((e) => /* @__PURE__ */ A(M, { children: /* @__PURE__ */ A(ae, {
 								component: e,
-								onOpen: we
+								onOpen: Oe
 							}) }, e.id))
 						}) : /* @__PURE__ */ A(m, {
-							icon: /* @__PURE__ */ A(w, { className: "size-8 text-text-secondary" }),
-							title: S("catalog.noComponents", "No components"),
-							description: S("catalog.noComponentsDescription", "Add components to this catalog to track them")
+							icon: /* @__PURE__ */ A(T, { className: "size-8 text-text-secondary" }),
+							title: I("catalog.noComponents", "No components"),
+							description: I("catalog.noComponentsDescription", "Add components to this catalog to track them")
 						})]
 					}, "components"),
-					k === "dependency-graph" && /* @__PURE__ */ A(ye, {
+					L === "dependency-graph" && /* @__PURE__ */ A(be, {
 						catalogId: i || "",
-						tr: S
+						tr: I
 					}),
-					k === "scorecard" && /* @__PURE__ */ A(O.div, {
+					L === "scorecard" && /* @__PURE__ */ A(O.div, {
 						initial: {
 							opacity: 0,
 							y: 8
@@ -409,12 +409,12 @@ function G() {
 						},
 						transition: { duration: .2 },
 						className: "space-y-6",
-						children: /* @__PURE__ */ A(ae, {
+						children: /* @__PURE__ */ A(ie, {
 							ownerType: "CATALOG",
 							ownerId: i || ""
 						})
 					}, "scorecard"),
-					k === "docs" && /* @__PURE__ */ A(O.div, {
+					L === "docs" && /* @__PURE__ */ A(O.div, {
 						initial: {
 							opacity: 0,
 							y: 8
@@ -429,12 +429,12 @@ function G() {
 						},
 						transition: { duration: .2 },
 						className: "space-y-6",
-						children: /* @__PURE__ */ A(ie, {
+						children: /* @__PURE__ */ A(re, {
 							ownerType: "CATALOG",
 							ownerId: i || ""
 						})
 					}, "docs"),
-					k === "settings" && /* @__PURE__ */ A(O.div, {
+					L === "settings" && /* @__PURE__ */ A(O.div, {
 						initial: {
 							opacity: 0,
 							y: 8
@@ -450,37 +450,37 @@ function G() {
 						transition: { duration: .2 },
 						children: /* @__PURE__ */ j("div", {
 							className: "space-y-4",
-							children: [/* @__PURE__ */ j(h, {
+							children: [k && /* @__PURE__ */ j(h, {
 								padding: "lg",
 								children: [/* @__PURE__ */ A("h3", {
 									className: "font-semibold text-text-primary mb-4",
-									children: S("catalog.editCatalog", "Edit Catalog")
+									children: I("catalog.editCatalog", "Edit Catalog")
 								}), /* @__PURE__ */ A("button", {
 									type: "button",
-									onClick: () => L(!0),
+									onClick: () => B(!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: S("catalog.editDetails", "Edit Details")
+									children: I("catalog.editDetails", "Edit Details")
 								})]
-							}), /* @__PURE__ */ j(h, {
+							}), ve && /* @__PURE__ */ j(h, {
 								padding: "lg",
 								children: [
 									/* @__PURE__ */ A("h3", {
 										className: "font-semibold text-status-error-text mb-2",
-										children: S("catalog.dangerZone", "Danger Zone")
+										children: I("catalog.dangerZone", "Danger Zone")
 									}),
 									/* @__PURE__ */ A("p", {
 										className: "text-sm text-text-secondary mb-4",
-										children: S("catalog.deleteWarning", "Deleting this catalog will detach all components and vibes. This cannot be undone.")
+										children: I("catalog.deleteWarning", "Deleting this catalog will detach all components and vibes. This cannot be undone.")
 									}),
 									/* @__PURE__ */ j("button", {
 										type: "button",
 										"data-testid": "catalog-delete-button",
-										onClick: () => V(!0),
+										onClick: () => W(!0),
 										className: "inline-flex items-center gap-2 px-4 py-2 bg-status-error-bg text-status-error-text rounded-md hover:opacity-90 transition-opacity",
 										children: [/* @__PURE__ */ A(pe, {
 											className: "size-4",
 											"aria-hidden": "true"
-										}), S("catalog.deleteCatalog", "Delete Catalog")]
+										}), I("catalog.deleteCatalog", "Delete Catalog")]
 									})
 								]
 							})]
@@ -488,10 +488,10 @@ function G() {
 					}, "settings")
 				]
 			}),
-			/* @__PURE__ */ A(se, {
-				isOpen: I,
-				onClose: () => L(!1),
-				onSubmit: Te,
+			k && /* @__PURE__ */ A(oe, {
+				isOpen: z,
+				onClose: () => B(!1),
+				onSubmit: ke,
 				initialData: {
 					name: Z.name,
 					description: Z.description || "",
@@ -499,29 +499,29 @@ function G() {
 					owner: Z.ownerName || "",
 					tags: Z.tags || []
 				},
-				title: S("catalog.editCatalog", "Edit Catalog")
+				title: I("catalog.editCatalog", "Edit Catalog")
 			}),
-			R && /* @__PURE__ */ A(X, {
+			V && k && F && /* @__PURE__ */ A(xe, {
 				catalogId: i || "",
 				existingComponentIds: Q.map((e) => e.id),
 				onAdd: async (e) => {
-					await Se({ variables: {
+					await Ee({ variables: {
 						catalogId: i,
 						componentId: e
-					} }), G(S("catalog.componentAdded", "Component added to catalog")), setTimeout(() => G(null), 3e3), z(!1);
+					} }), J(I("catalog.componentAdded", "Component added to catalog")), setTimeout(() => J(null), 3e3), H(!1);
 				},
-				onClose: () => z(!1),
-				tr: S
+				onClose: () => H(!1),
+				tr: I
 			}),
 			/* @__PURE__ */ A(c, {
-				isOpen: B,
-				onClose: () => V(!1),
-				onConfirm: Ee,
-				title: S("catalog.deleteCatalog", "Delete Catalog"),
-				message: S("catalog.deleteConfirmMessage", `Are you sure you want to delete "${Z.name}"? This action cannot be undone.`),
-				confirmLabel: S("common.delete", "Delete"),
+				isOpen: U,
+				onClose: () => W(!1),
+				onConfirm: Ae,
+				title: I("catalog.deleteCatalog", "Delete Catalog"),
+				message: I("catalog.deleteConfirmMessage", `Are you sure you want to delete "${Z.name}"? This action cannot be undone.`),
+				confirmLabel: I("common.delete", "Delete"),
 				variant: "danger",
-				isLoading: H
+				isLoading: G
 			})
 		]
 	}) : /* @__PURE__ */ j(P, {
@@ -530,25 +530,25 @@ function G() {
 			type: "button",
 			onClick: $,
 			className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
-			children: [/* @__PURE__ */ A(x, { className: "size-4" }), S("catalog.backToCatalogs", "Back to Catalogs")]
+			children: [/* @__PURE__ */ A(S, { className: "size-4" }), I("catalog.backToCatalogs", "Back to Catalogs")]
 		}), /* @__PURE__ */ A(m, {
-			icon: /* @__PURE__ */ A(C, { className: "size-8 text-text-secondary" }),
-			title: S("catalog.notFound", "Catalog not found"),
+			icon: /* @__PURE__ */ A(w, { className: "size-8 text-text-secondary" }),
+			title: I("catalog.notFound", "Catalog not found"),
 			description: `No catalog with ID "${i}" exists`,
 			action: /* @__PURE__ */ A("button", {
 				type: "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: S("catalog.backToCatalogs", "Back to Catalogs")
+				children: I("catalog.backToCatalogs", "Back to Catalogs")
 			})
 		})]
 	});
 }
-function K({ data: e }) {
+function G({ data: e }) {
 	return /* @__PURE__ */ j(k, { children: [
-		/* @__PURE__ */ A(R, {
+		/* @__PURE__ */ A(L, {
 			type: "target",
-			position: B.Left,
+			position: z.Left,
 			style: {
 				width: 8,
 				height: 8,
@@ -556,9 +556,9 @@ function K({ data: e }) {
 			}
 		}),
 		/* @__PURE__ */ A("div", { children: e.label }),
-		/* @__PURE__ */ A(R, {
+		/* @__PURE__ */ A(L, {
 			type: "source",
-			position: B.Right,
+			position: z.Right,
 			style: {
 				width: 8,
 				height: 8,
@@ -567,8 +567,8 @@ function K({ data: e }) {
 		})
 	] });
 }
-var q = { catalog: K };
-function J(e, t) {
+var K = { catalog: G };
+function q(e, t) {
 	let n = Math.max(1, Math.ceil(Math.sqrt(e.length))), r = new Map(e.map((e) => [e.name, e.id])), i = t.filter((e) => r.has(e.target));
 	return {
 		nodes: e.map((e, t) => {
@@ -639,7 +639,7 @@ function J(e, t) {
 			target: r.get(e.target),
 			label: e.version || void 0,
 			animated: e.dependencyType !== "dev",
-			markerEnd: { type: z.ArrowClosed },
+			markerEnd: { type: R.ArrowClosed },
 			style: {
 				stroke: "var(--color-border-strong)",
 				strokeWidth: 1.5,
@@ -656,10 +656,10 @@ function J(e, t) {
 		}))
 	};
 }
-function Y({ graphNodes: e, graphEdges: t, onComponentClick: n, onConnect: r }) {
-	let { nodes: i, edges: a } = y(() => J(e, t), [e, t]), [o, s, c] = W(i), [l, u, d] = U(a);
-	v(() => {
-		let { nodes: n, edges: r } = J(e, t);
+function J({ graphNodes: e, graphEdges: t, onComponentClick: n, onConnect: r }) {
+	let { nodes: i, edges: a } = b(() => q(e, t), [e, t]), [o, s, c] = U(i), [l, u, d] = H(a);
+	y(() => {
+		let { nodes: n, edges: r } = q(e, t);
 		s(n), u(r);
 	}, [
 		e,
@@ -667,13 +667,13 @@ function Y({ graphNodes: e, graphEdges: t, onComponentClick: n, onConnect: r })
 		s,
 		u
 	]);
-	let f = Math.ceil(e.length / Math.max(1, Math.ceil(Math.sqrt(e.length)))), p = Math.max(380, Math.min(f * 140 + 120, 600)), m = _((e, t) => {
+	let f = Math.ceil(e.length / Math.max(1, Math.ceil(Math.sqrt(e.length)))), p = Math.max(380, Math.min(f * 140 + 120, 600)), m = v((e, t) => {
 		n?.(t.id);
-	}, [n]), h = _((e) => {
-		!e.source || !e.target || (u((t) => H({
+	}, [n]), h = v((e) => {
+		!e.source || !e.target || (u((t) => V({
 			...e,
 			animated: !0,
-			markerEnd: { type: z.ArrowClosed },
+			markerEnd: { type: R.ArrowClosed },
 			style: {
 				stroke: "var(--color-border-strong)",
 				strokeWidth: 1.5
@@ -686,14 +686,14 @@ function Y({ graphNodes: e, graphEdges: t, onComponentClick: n, onConnect: r })
 			height: p,
 			background: "var(--color-bg-secondary)"
 		},
-		children: /* @__PURE__ */ j(V, {
+		children: /* @__PURE__ */ j(B, {
 			nodes: o,
 			edges: l,
 			onNodesChange: c,
 			onEdgesChange: d,
 			onNodeClick: m,
 			onConnect: h,
-			nodeTypes: q,
+			nodeTypes: K,
 			fitView: !0,
 			fitViewOptions: { padding: .25 },
 			minZoom: .15,
@@ -702,12 +702,12 @@ function Y({ graphNodes: e, graphEdges: t, onComponentClick: n, onConnect: r })
 			panOnScroll: !1,
 			zoomOnScroll: !0,
 			proOptions: { hideAttribution: !0 },
-			children: [/* @__PURE__ */ A(F, {
-				variant: I.Dots,
+			children: [/* @__PURE__ */ A(ve, {
+				variant: F.Dots,
 				gap: 20,
 				size: 1,
 				className: "!fill-text-tertiary/10"
-			}), /* @__PURE__ */ A(L, {
+			}), /* @__PURE__ */ A(I, {
 				showInteractive: !1,
 				style: {
 					background: "var(--color-bg-primary)",
@@ -719,12 +719,12 @@ function Y({ graphNodes: e, graphEdges: t, onComponentClick: n, onConnect: r })
 		})
 	});
 }
-function ye({ catalogId: e, tr: t }) {
+function be({ catalogId: e, tr: t }) {
 	let r = l(), { data: i, loading: a, error: o, refetch: c } = n({
 		variables: { catalogId: e },
 		skip: !e,
 		fetchPolicy: "cache-and-network"
-	}), [u] = s(), p = i?.vibecontrolsCatalogDependencyGraph, g = _(async (e, t) => {
+	}), [u] = s(), p = i?.vibecontrolsCatalogDependencyGraph, g = v(async (e, t) => {
 		if (!p) return;
 		let n = p.nodes.find((e) => e.id === t);
 		if (!n) return;
@@ -772,14 +772,14 @@ function ye({ catalogId: e, tr: t }) {
 				className: "flex items-center justify-between",
 				children: [/* @__PURE__ */ j("h3", {
 					className: "font-semibold text-text-primary flex items-center gap-2",
-					children: [/* @__PURE__ */ A(T, { className: "size-5" }), t("catalog.dependencyGraph", "Dependency Graph")]
+					children: [/* @__PURE__ */ A(E, { className: "size-5" }), t("catalog.dependencyGraph", "Dependency Graph")]
 				}), /* @__PURE__ */ A("button", {
 					type: "button",
 					onClick: () => c(),
 					disabled: a,
 					className: "p-2 text-text-secondary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50",
 					title: t("common.refresh", "Refresh"),
-					children: /* @__PURE__ */ A(D, { className: `size-4 ${a ? "animate-spin" : ""}` })
+					children: /* @__PURE__ */ A(ue, { className: `size-4 ${a ? "animate-spin" : ""}` })
 				})]
 			}),
 			a && !p && /* @__PURE__ */ A(d, { message: t("catalog.loadingGraph", "Loading dependency graph...") }),
@@ -789,7 +789,7 @@ function ye({ catalogId: e, tr: t }) {
 				onRetry: () => c()
 			}),
 			p && p.nodes.length === 0 && /* @__PURE__ */ A(m, {
-				icon: /* @__PURE__ */ A(T, { className: "size-8 text-text-secondary" }),
+				icon: /* @__PURE__ */ A(E, { className: "size-8 text-text-secondary" }),
 				title: t("catalog.noGraphNodes", "No components in catalog"),
 				description: t("catalog.noGraphNodesDesc", "Add components to this catalog to visualize the dependency graph")
 			}),
@@ -816,7 +816,7 @@ function ye({ catalogId: e, tr: t }) {
 						})]
 					})]
 				}),
-				/* @__PURE__ */ A(Y, {
+				/* @__PURE__ */ A(J, {
 					graphNodes: p.nodes,
 					graphEdges: p.edges,
 					onComponentClick: (e) => r(`/components/${e}`),
@@ -841,7 +841,7 @@ function ye({ catalogId: e, tr: t }) {
 								className: "font-medium text-text-primary truncate max-w-[120px]",
 								children: p.nodes.find((t) => t.id === e.source)?.name || e.source
 							}),
-							/* @__PURE__ */ A(S, { className: "size-4 text-text-muted flex-shrink-0" }),
+							/* @__PURE__ */ A(C, { className: "size-4 text-text-muted flex-shrink-0" }),
 							/* @__PURE__ */ A("span", {
 								className: "text-text-primary truncate max-w-[120px]",
 								children: p.nodes.find((t) => t.id === e.target)?.name || e.target
@@ -861,8 +861,8 @@ function ye({ catalogId: e, tr: t }) {
 		]
 	}, "dependency-graph");
 }
-function X({ catalogId: e, existingComponentIds: t, onAdd: n, onClose: r, tr: a }) {
-	let [o, s] = b(!1), [c, l] = b(""), { data: u, loading: f } = i({ fetchPolicy: "cache-and-network" }), p = y(() => {
+function xe({ catalogId: e, existingComponentIds: t, onAdd: n, onClose: r, tr: a }) {
+	let [o, s] = x(!1), [c, l] = x(""), { data: u, loading: f } = i({ fetchPolicy: "cache-and-network" }), p = b(() => {
 		let e = (u?.vibecontrolsComponents?.items ?? []).filter((e) => !t.includes(e.id));
 		if (!c) return e;
 		let n = c.toLowerCase();
@@ -932,7 +932,7 @@ function X({ catalogId: e, existingComponentIds: t, onAdd: n, onClose: r, tr: a
 									" · ",
 									e.lifecycle
 								]
-							})] }), /* @__PURE__ */ A(E, { className: "size-4 text-text-secondary" })]
+							})] }), /* @__PURE__ */ A(D, { className: "size-4 text-text-secondary" })]
 						}, e.id))
 					]
 				}),
@@ -950,6 +950,6 @@ function X({ catalogId: e, existingComponentIds: t, onAdd: n, onClose: r, tr: a
 	});
 }
 //#endregion
-export { G as CatalogDetailPage };
+export { W as CatalogDetailPage };
 
 //# sourceMappingURL=CatalogDetailPage.js.map