@burdenoff/microfe-vibecontrols 2026.601.21 → 2026.601.23

package/dist/pages/CatalogDetailPage.js

@@ -9,7 +9,9 @@ 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 { VIBE_PERMISSIONS as _ } from "../constants/permissions.js";
+import { EntityShareButton as ee } from "../components/sharing/EntityShareButton.js";
+import "../components/sharing/index.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";
@@ -18,15 +20,15 @@ import { ComponentCard as ie } from "../components/idp-components/ComponentCard.
 import "../components/idp-components/index.js";
 import { CatalogForm as ae } 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 { useCallback as v, useEffect as y, useMemo as b, useState as x } from "react";
 import { useI18n as oe } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { ArrowLeft as x, ArrowRight as S, BookOpen as C, FileText as se, Layers as w, Network as T, Plus as E, RefreshCw as D, Settings as ce, Tag as le, Trash2 as ue, Zap as de } from "lucide-react";
+import { ArrowLeft as S, ArrowRight as C, BookOpen as w, FileText as se, Layers as T, Network as E, Plus as D, RefreshCw as O, Settings as ce, Tag as le, Trash2 as ue, Zap as de } from "lucide-react";
 import { useParams as fe } from "react-router-dom";
 import { usePermissions as pe } from "@burdenoff/fe-libs/shared/providers/shell";
-import { AnimatePresence as me, 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 { AnimatePresence as me, motion as k } from "framer-motion";
+import { Fragment as A, jsx as j, jsxs as M } from "react/jsx-runtime";
+import { MotionItem as N, MotionList as P, MotionPage as F } from "@burdenoff/fe-libs/shared/motion";
+import { Background as I, BackgroundVariant as L, Controls as R, Handle as z, MarkerType as B, Position as V, ReactFlow as H, addEdge as U, useEdgesState as W, useNodesState as G } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 //#region src/pages/CatalogDetailPage.tsx
 var he = [
@@ -36,15 +38,15 @@ var he = [
 	"docs",
 	"settings"
 ];
-function G() {
-	let { t: n } = oe(), { id: i } = fe(), s = l(), { hasPermission: d, isLoading: v } = pe(), S = _((e, t) => {
+function K() {
+	let { t: n } = oe(), { id: i } = fe(), s = l(), { hasPermission: d, isLoading: y } = pe(), C = v((e, t) => {
 		let r = n(e);
 		return r === e ? t : r;
-	}, [n]), [k, F] = ne(he, "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]), [A, I] = ne(he, "overview"), [L, R] = x(!1), [z, B] = x(!1), [V, H] = x(!1), [U, W] = x(!1), [G, K] = x(null), { data: q, loading: J, error: Y, refetch: X } = r({
 		variables: { id: i || "" },
 		skip: !i,
 		fetchPolicy: "cache-and-network"
-	}), [ve] = o({ refetchQueries: ["GetCatalog"] }), [ye] = t({ refetchQueries: ["ListCatalogs"] }), [X] = e({ refetchQueries: ["GetCatalog"] }), [be] = a({ refetchQueries: ["GetCatalog"] }), Z = K?.vibecontrolsCatalog ?? null, Q = y(() => (Z?.components ?? []).map((e) => {
+	}), [ve] = o({ refetchQueries: ["GetCatalog"] }), [ye] = t({ refetchQueries: ["ListCatalogs"] }), [be] = e({ refetchQueries: ["GetCatalog"] }), [xe] = a({ refetchQueries: ["GetCatalog"] }), Z = q?.vibecontrolsCatalog ?? null, Q = b(() => (Z?.components ?? []).map((e) => {
 		let t = e.component || {};
 		return {
 			id: t.id,
@@ -60,21 +62,21 @@ function G() {
 			updatedAt: t.updatedAt
 		};
 	}), [Z?.components]);
-	if (v) return /* @__PURE__ */ A("div", {
+	if (y) return /* @__PURE__ */ j("div", {
 		className: "flex items-center justify-center min-h-[400px]",
-		children: /* @__PURE__ */ A("p", {
+		children: /* @__PURE__ */ j("p", {
 			className: "text-text-secondary",
 			children: "Loading permissions…"
 		})
 	});
-	if (!d(ee.VIBE_READ)) return /* @__PURE__ */ A("div", {
+	if (!d(_.VIBE_READ)) return /* @__PURE__ */ j("div", {
 		className: "flex items-center justify-center min-h-[400px]",
-		children: /* @__PURE__ */ j("div", {
+		children: /* @__PURE__ */ M("div", {
 			className: "text-center space-y-2",
-			children: [/* @__PURE__ */ A("h2", {
+			children: [/* @__PURE__ */ j("h2", {
 				className: "text-lg font-semibold text-foreground",
 				children: "Access Denied"
-			}), /* @__PURE__ */ A("p", {
+			}), /* @__PURE__ */ j("p", {
 				className: "text-sm text-text-secondary",
 				children: "You don't have permission to access this page."
 			})]
@@ -82,9 +84,9 @@ function G() {
 	});
 	let $ = () => {
 		s("/catalogs");
-	}, xe = (e) => {
+	}, Se = (e) => {
 		s(`/components/${e.id}`);
-	}, Se = async (e) => {
+	}, Ce = async (e) => {
 		i && (await ve({ variables: {
 			id: i,
 			input: {
@@ -94,146 +96,158 @@ 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));
-	}, Ce = async () => {
+		} }), K(C("catalog.updatedSuccess", "Catalog updated successfully")), setTimeout(() => K(null), 3e3));
+	}, we = async () => {
 		if (i) {
-			U(!0);
+			W(!0);
 			try {
-				await ye({ variables: { id: i } }), V(!1), s("/catalogs");
+				await ye({ variables: { id: i } }), H(!1), s("/catalogs");
 			} finally {
-				U(!1);
+				W(!1);
 			}
 		}
-	}, we = [
+	}, Te = [
 		{
 			id: "overview",
-			label: S("nav.overview", "Overview"),
-			icon: C
+			label: C("nav.overview", "Overview"),
+			icon: w
 		},
 		{
 			id: "components",
-			label: S("catalog.components", "Components"),
-			icon: w,
+			label: C("catalog.components", "Components"),
+			icon: T,
 			badge: `${Z?.componentCount ?? 0}`
 		},
 		{
 			id: "dependency-graph",
-			label: S("catalog.dependencyGraph", "Dependency Graph"),
-			icon: T
+			label: C("catalog.dependencyGraph", "Dependency Graph"),
+			icon: E
 		},
 		{
 			id: "docs",
-			label: S("catalog.docs", "Docs"),
+			label: C("catalog.docs", "Docs"),
 			icon: se
 		},
 		{
 			id: "settings",
-			label: S("common.settings", "Settings"),
+			label: C("common.settings", "Settings"),
 			icon: ce
 		}
 	];
-	return q && !Z ? /* @__PURE__ */ j(P, {
+	return J && !Z ? /* @__PURE__ */ M(F, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
-		children: [/* @__PURE__ */ j("button", {
+		children: [/* @__PURE__ */ M("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(te, { variant: "detail" })]
-	}) : J && !Z ? /* @__PURE__ */ j(P, {
+			children: [/* @__PURE__ */ j(S, { className: "size-4" }), C("catalog.backToCatalogs", "Back to Catalogs")]
+		}), /* @__PURE__ */ j(te, { variant: "detail" })]
+	}) : Y && !Z ? /* @__PURE__ */ M(F, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
-		children: [/* @__PURE__ */ j("button", {
+		children: [/* @__PURE__ */ M("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(f, {
-			title: S("catalog.failedLoad", "Failed to load catalog"),
-			message: J.message,
-			onRetry: () => Y()
+			children: [/* @__PURE__ */ j(S, { className: "size-4" }), C("catalog.backToCatalogs", "Back to Catalogs")]
+		}), /* @__PURE__ */ j(f, {
+			title: C("catalog.failedLoad", "Failed to load catalog"),
+			message: Y.message,
+			onRetry: () => X()
 		})]
-	}) : Z ? /* @__PURE__ */ j(P, {
+	}) : Z ? /* @__PURE__ */ M(F, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
 		children: [
-			W && /* @__PURE__ */ A("div", {
+			G && /* @__PURE__ */ j("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: G
 			}),
-			/* @__PURE__ */ j("button", {
+			/* @__PURE__ */ M("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__ */ j(S, { className: "size-4" }), C("catalog.backToCatalogs", "Back to Catalogs")]
 			}),
-			/* @__PURE__ */ A(u, {
+			/* @__PURE__ */ j(u, {
 				title: Z.name,
-				description: Z.description || S("catalog.noDescription", "No description"),
-				actions: /* @__PURE__ */ j("div", {
+				description: Z.description || C("catalog.noDescription", "No description"),
+				actions: /* @__PURE__ */ M("div", {
 					className: "flex items-center gap-2 flex-wrap",
-					children: [/* @__PURE__ */ A("button", {
-						type: "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: S("common.refresh", "Refresh"),
-						children: /* @__PURE__ */ A(D, { className: `size-4 ${q ? "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"}`,
-						children: Z.visibility
-					})]
+					children: [
+						/* @__PURE__ */ j(ee, {
+							entity: "catalog",
+							resource: {
+								id: Z.id,
+								name: Z.name
+							},
+							label: C("catalog.share", "Share"),
+							variant: "button"
+						}),
+						/* @__PURE__ */ j("button", {
+							type: "button",
+							onClick: () => X(),
+							disabled: J,
+							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: C("common.refresh", "Refresh"),
+							children: /* @__PURE__ */ j(O, { className: `size-4 ${J ? "animate-spin" : ""}` })
+						}),
+						/* @__PURE__ */ j("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__ */ j(N, {
+			/* @__PURE__ */ M(P, {
 				stagger: .04,
 				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"),
+					/* @__PURE__ */ j(N, { children: /* @__PURE__ */ j(g, {
+						title: C("catalog.components", "Components"),
 						value: Z.componentCount ?? 0,
-						icon: /* @__PURE__ */ A(w, { className: "size-4" })
+						icon: /* @__PURE__ */ j(T, { className: "size-4" })
 					}) }),
-					/* @__PURE__ */ A(M, { children: /* @__PURE__ */ A(g, {
-						title: S("catalog.vibes", "Vibes"),
+					/* @__PURE__ */ j(N, { children: /* @__PURE__ */ j(g, {
+						title: C("catalog.vibes", "Vibes"),
 						value: Z.vibeCount ?? 0,
-						icon: /* @__PURE__ */ A(de, { className: "size-4" })
+						icon: /* @__PURE__ */ j(de, { className: "size-4" })
 					}) }),
-					/* @__PURE__ */ A(M, { children: /* @__PURE__ */ A(g, {
-						title: S("catalog.ownerName", "Owner"),
+					/* @__PURE__ */ j(N, { children: /* @__PURE__ */ j(g, {
+						title: C("catalog.ownerName", "Owner"),
 						value: Z.ownerNameName || "Unassigned",
-						icon: /* @__PURE__ */ A(C, { className: "size-4" })
+						icon: /* @__PURE__ */ j(w, { className: "size-4" })
 					}) })
 				]
 			}),
-			/* @__PURE__ */ j(h, { children: [/* @__PURE__ */ j("div", {
+			/* @__PURE__ */ M(h, { children: [/* @__PURE__ */ M("div", {
 				className: "p-4 border-b border-border-default flex items-center gap-2",
-				children: [/* @__PURE__ */ A(le, { className: "size-5" }), /* @__PURE__ */ A("h3", {
+				children: [/* @__PURE__ */ j(le, { className: "size-5" }), /* @__PURE__ */ j("h3", {
 					className: "font-semibold text-text-primary",
-					children: S("catalog.tags", "Tags")
+					children: C("catalog.tags", "Tags")
 				})]
-			}), /* @__PURE__ */ A("div", {
+			}), /* @__PURE__ */ j("div", {
 				className: "p-4",
-				children: /* @__PURE__ */ A(p, {
+				children: /* @__PURE__ */ j(p, {
 					entityType: "VIBECONTROLS_CATALOG",
 					entityId: Z.id
 				})
 			})] }),
-			/* @__PURE__ */ A("div", {
+			/* @__PURE__ */ j("div", {
 				className: "border-b border-border-default",
-				children: /* @__PURE__ */ A("nav", {
+				children: /* @__PURE__ */ j("nav", {
 					className: "flex gap-1 -mb-px overflow-x-auto pb-1",
-					"aria-label": S("catalog.tabsAriaLabel", "Catalog tabs"),
-					children: we.map((e) => {
-						let t = e.icon, n = k === e.id;
-						return /* @__PURE__ */ j("button", {
+					"aria-label": C("catalog.tabsAriaLabel", "Catalog tabs"),
+					children: Te.map((e) => {
+						let t = e.icon, n = A === e.id;
+						return /* @__PURE__ */ M("button", {
 							type: "button",
-							onClick: () => F(e.id),
+							onClick: () => I(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__ */ A(t, { className: "size-4" }),
+								/* @__PURE__ */ j(t, { className: "size-4" }),
 								e.label,
-								e.badge && /* @__PURE__ */ A("span", {
+								e.badge && /* @__PURE__ */ j("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
 								})
@@ -242,10 +256,10 @@ function G() {
 					})
 				})
 			}),
-			/* @__PURE__ */ j(me, {
+			/* @__PURE__ */ M(me, {
 				mode: "wait",
 				children: [
-					k === "overview" && /* @__PURE__ */ j(O.div, {
+					A === "overview" && /* @__PURE__ */ M(k.div, {
 						initial: {
 							opacity: 0,
 							y: 8
@@ -261,63 +275,63 @@ function G() {
 						transition: { duration: .2 },
 						className: "space-y-6",
 						children: [
-							Z.description && /* @__PURE__ */ A(h, { children: /* @__PURE__ */ A("div", {
+							Z.description && /* @__PURE__ */ j(h, { children: /* @__PURE__ */ j("div", {
 								className: "p-4",
-								children: /* @__PURE__ */ A("p", {
+								children: /* @__PURE__ */ j("p", {
 									className: "text-text-primary",
 									children: Z.description
 								})
 							}) }),
-							/* @__PURE__ */ j(h, { children: [/* @__PURE__ */ A("div", {
+							/* @__PURE__ */ M(h, { children: [/* @__PURE__ */ j("div", {
 								className: "p-4 border-b border-border-default",
-								children: /* @__PURE__ */ A("h3", {
+								children: /* @__PURE__ */ j("h3", {
 									className: "font-semibold text-text-primary",
-									children: S("catalog.metadata", "Metadata")
+									children: C("catalog.metadata", "Metadata")
 								})
-							}), /* @__PURE__ */ A("div", {
+							}), /* @__PURE__ */ j("div", {
 								className: "p-4",
-								children: /* @__PURE__ */ j("div", {
+								children: /* @__PURE__ */ M("div", {
 									className: "grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm",
 									children: [
-										/* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+										/* @__PURE__ */ M("div", { children: [/* @__PURE__ */ j("p", {
 											className: "text-text-secondary",
-											children: S("catalog.ownerNameLabel", "Owner")
-										}), /* @__PURE__ */ A("p", {
+											children: C("catalog.ownerNameLabel", "Owner")
+										}), /* @__PURE__ */ j("p", {
 											className: "font-medium text-text-primary",
-											children: Z.ownerName || S("common.unset", "Unset")
+											children: Z.ownerName || C("common.unset", "Unset")
 										})] }),
-										/* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+										/* @__PURE__ */ M("div", { children: [/* @__PURE__ */ j("p", {
 											className: "text-text-secondary",
-											children: S("catalog.visibility", "Visibility")
-										}), /* @__PURE__ */ A("p", {
+											children: C("catalog.visibility", "Visibility")
+										}), /* @__PURE__ */ j("p", {
 											className: "font-medium text-text-primary",
 											children: Z.visibility
 										})] }),
-										/* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+										/* @__PURE__ */ M("div", { children: [/* @__PURE__ */ j("p", {
 											className: "text-text-secondary",
-											children: S("common.created", "Created")
-										}), /* @__PURE__ */ A("p", {
+											children: C("common.created", "Created")
+										}), /* @__PURE__ */ j("p", {
 											className: "font-medium text-text-primary",
 											children: new Date(Z.createdAt).toLocaleDateString()
 										})] }),
-										/* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+										/* @__PURE__ */ M("div", { children: [/* @__PURE__ */ j("p", {
 											className: "text-text-secondary",
-											children: S("common.updated", "Updated")
-										}), /* @__PURE__ */ A("p", {
+											children: C("common.updated", "Updated")
+										}), /* @__PURE__ */ j("p", {
 											className: "font-medium text-text-primary",
 											children: new Date(Z.updatedAt).toLocaleDateString()
 										})] })
 									]
 								})
 							})] }),
-							Z.tags?.length > 0 && /* @__PURE__ */ A(h, { children: /* @__PURE__ */ j("div", {
+							Z.tags?.length > 0 && /* @__PURE__ */ j(h, { children: /* @__PURE__ */ M("div", {
 								className: "p-4",
-								children: [/* @__PURE__ */ A("h3", {
+								children: [/* @__PURE__ */ j("h3", {
 									className: "font-semibold text-text-primary mb-3",
-									children: S("catalog.tags", "Tags")
-								}), /* @__PURE__ */ A("div", {
+									children: C("catalog.tags", "Tags")
+								}), /* @__PURE__ */ j("div", {
 									className: "flex flex-wrap gap-2",
-									children: Z.tags.map((e) => /* @__PURE__ */ A("span", {
+									children: Z.tags.map((e) => /* @__PURE__ */ j("span", {
 										className: "px-2.5 py-1 text-sm bg-bg-sunken text-text-secondary rounded-md",
 										children: e
 									}, e))
@@ -325,7 +339,7 @@ function G() {
 							}) })
 						]
 					}, "overview"),
-					k === "components" && /* @__PURE__ */ j(O.div, {
+					A === "components" && /* @__PURE__ */ M(k.div, {
 						initial: {
 							opacity: 0,
 							y: 8
@@ -340,39 +354,39 @@ function G() {
 						},
 						transition: { duration: .2 },
 						className: "space-y-4",
-						children: [/* @__PURE__ */ j("div", {
+						children: [/* @__PURE__ */ M("div", {
 							className: "flex items-center justify-between",
-							children: [/* @__PURE__ */ j("p", {
+							children: [/* @__PURE__ */ M("p", {
 								className: "text-sm text-text-secondary",
 								children: [
 									Q.length,
 									" ",
-									S("catalog.componentsInCatalog", "components in this catalog")
+									C("catalog.componentsInCatalog", "components in this catalog")
 								]
-							}), /* @__PURE__ */ j("button", {
+							}), /* @__PURE__ */ M("button", {
 								type: "button",
-								onClick: () => z(!0),
+								onClick: () => B(!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__ */ j(D, { className: "size-4" }), C("catalog.addComponent", "Add Component")]
 							})]
-						}), Q.length > 0 ? /* @__PURE__ */ A(N, {
+						}), Q.length > 0 ? /* @__PURE__ */ j(P, {
 							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(ie, {
+							children: Q.map((e) => /* @__PURE__ */ j(N, { children: /* @__PURE__ */ j(ie, {
 								component: e,
-								onOpen: xe
+								onOpen: Se
 							}) }, 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")
+						}) : /* @__PURE__ */ j(m, {
+							icon: /* @__PURE__ */ j(T, { className: "size-8 text-text-secondary" }),
+							title: C("catalog.noComponents", "No components"),
+							description: C("catalog.noComponentsDescription", "Add components to this catalog to track them")
 						})]
 					}, "components"),
-					k === "dependency-graph" && /* @__PURE__ */ A(ge, {
+					A === "dependency-graph" && /* @__PURE__ */ j(ge, {
 						catalogId: i || "",
-						tr: S
+						tr: C
 					}),
-					k === "docs" && /* @__PURE__ */ A(O.div, {
+					A === "docs" && /* @__PURE__ */ j(k.div, {
 						initial: {
 							opacity: 0,
 							y: 8
@@ -387,12 +401,12 @@ function G() {
 						},
 						transition: { duration: .2 },
 						className: "space-y-6",
-						children: /* @__PURE__ */ A(re, {
+						children: /* @__PURE__ */ j(re, {
 							ownerType: "CATALOG",
 							ownerId: i || ""
 						})
 					}, "docs"),
-					k === "settings" && /* @__PURE__ */ A(O.div, {
+					A === "settings" && /* @__PURE__ */ j(k.div, {
 						initial: {
 							opacity: 0,
 							y: 8
@@ -406,39 +420,39 @@ function G() {
 							y: -8
 						},
 						transition: { duration: .2 },
-						children: /* @__PURE__ */ j("div", {
+						children: /* @__PURE__ */ M("div", {
 							className: "space-y-4",
-							children: [/* @__PURE__ */ j(h, {
+							children: [/* @__PURE__ */ M(h, {
 								padding: "lg",
-								children: [/* @__PURE__ */ A("h3", {
+								children: [/* @__PURE__ */ j("h3", {
 									className: "font-semibold text-text-primary mb-4",
-									children: S("catalog.editCatalog", "Edit Catalog")
-								}), /* @__PURE__ */ A("button", {
+									children: C("catalog.editCatalog", "Edit Catalog")
+								}), /* @__PURE__ */ j("button", {
 									type: "button",
-									onClick: () => L(!0),
+									onClick: () => R(!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: C("catalog.editDetails", "Edit Details")
 								})]
-							}), /* @__PURE__ */ j(h, {
+							}), /* @__PURE__ */ M(h, {
 								padding: "lg",
 								children: [
-									/* @__PURE__ */ A("h3", {
+									/* @__PURE__ */ j("h3", {
 										className: "font-semibold text-status-error-text mb-2",
-										children: S("catalog.dangerZone", "Danger Zone")
+										children: C("catalog.dangerZone", "Danger Zone")
 									}),
-									/* @__PURE__ */ A("p", {
+									/* @__PURE__ */ j("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: C("catalog.deleteWarning", "Deleting this catalog will detach all components and vibes. This cannot be undone.")
 									}),
-									/* @__PURE__ */ j("button", {
+									/* @__PURE__ */ M("button", {
 										type: "button",
 										"data-testid": "catalog-delete-button",
-										onClick: () => V(!0),
+										onClick: () => H(!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(ue, {
+										children: [/* @__PURE__ */ j(ue, {
 											className: "size-4",
 											"aria-hidden": "true"
-										}), S("catalog.deleteCatalog", "Delete Catalog")]
+										}), C("catalog.deleteCatalog", "Delete Catalog")]
 									})
 								]
 							})]
@@ -446,10 +460,10 @@ function G() {
 					}, "settings")
 				]
 			}),
-			/* @__PURE__ */ A(ae, {
-				isOpen: I,
-				onClose: () => L(!1),
-				onSubmit: Se,
+			/* @__PURE__ */ j(ae, {
+				isOpen: L,
+				onClose: () => R(!1),
+				onSubmit: Ce,
 				initialData: {
 					name: Z.name,
 					description: Z.description || "",
@@ -457,66 +471,66 @@ function G() {
 					owner: Z.ownerName || "",
 					tags: Z.tags || []
 				},
-				title: S("catalog.editCatalog", "Edit Catalog")
+				title: C("catalog.editCatalog", "Edit Catalog")
 			}),
-			R && /* @__PURE__ */ A(_e, {
+			z && /* @__PURE__ */ j(_e, {
 				catalogId: i || "",
 				existingComponentIds: Q.map((e) => e.id),
 				onAdd: async (e) => {
-					await X({ variables: {
+					await be({ variables: {
 						catalogId: i,
 						componentId: e
-					} }), G(S("catalog.componentAdded", "Component added to catalog")), setTimeout(() => G(null), 3e3), z(!1);
+					} }), K(C("catalog.componentAdded", "Component added to catalog")), setTimeout(() => K(null), 3e3), B(!1);
 				},
-				onClose: () => z(!1),
-				tr: S
+				onClose: () => B(!1),
+				tr: C
 			}),
-			/* @__PURE__ */ A(c, {
-				isOpen: B,
-				onClose: () => V(!1),
-				onConfirm: Ce,
-				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"),
+			/* @__PURE__ */ j(c, {
+				isOpen: V,
+				onClose: () => H(!1),
+				onConfirm: we,
+				title: C("catalog.deleteCatalog", "Delete Catalog"),
+				message: C("catalog.deleteConfirmMessage", `Are you sure you want to delete "${Z.name}"? This action cannot be undone.`),
+				confirmLabel: C("common.delete", "Delete"),
 				variant: "danger",
-				isLoading: H
+				isLoading: U
 			})
 		]
-	}) : /* @__PURE__ */ j(P, {
+	}) : /* @__PURE__ */ M(F, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
-		children: [/* @__PURE__ */ j("button", {
+		children: [/* @__PURE__ */ M("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(m, {
-			icon: /* @__PURE__ */ A(C, { className: "size-8 text-text-secondary" }),
-			title: S("catalog.notFound", "Catalog not found"),
+			children: [/* @__PURE__ */ j(S, { className: "size-4" }), C("catalog.backToCatalogs", "Back to Catalogs")]
+		}), /* @__PURE__ */ j(m, {
+			icon: /* @__PURE__ */ j(w, { className: "size-8 text-text-secondary" }),
+			title: C("catalog.notFound", "Catalog not found"),
 			description: `No catalog with ID "${i}" exists`,
-			action: /* @__PURE__ */ A("button", {
+			action: /* @__PURE__ */ j("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: C("catalog.backToCatalogs", "Back to Catalogs")
 			})
 		})]
 	});
 }
-function K({ data: e }) {
-	return /* @__PURE__ */ j(k, { children: [
-		/* @__PURE__ */ A(R, {
+function q({ data: e }) {
+	return /* @__PURE__ */ M(A, { children: [
+		/* @__PURE__ */ j(z, {
 			type: "target",
-			position: B.Left,
+			position: V.Left,
 			style: {
 				width: 8,
 				height: 8,
 				background: "var(--color-border-strong)"
 			}
 		}),
-		/* @__PURE__ */ A("div", { children: e.label }),
-		/* @__PURE__ */ A(R, {
+		/* @__PURE__ */ j("div", { children: e.label }),
+		/* @__PURE__ */ j(z, {
 			type: "source",
-			position: B.Right,
+			position: V.Right,
 			style: {
 				width: 8,
 				height: 8,
@@ -525,8 +539,8 @@ function K({ data: e }) {
 		})
 	] });
 }
-var q = { catalog: K };
-function J(e, t) {
+var J = { catalog: q };
+function Y(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) => {
@@ -538,13 +552,13 @@ function J(e, t) {
 					x: r * 220 + 40,
 					y: a * 120 + 40
 				},
-				data: { label: /* @__PURE__ */ j("div", {
+				data: { label: /* @__PURE__ */ M("div", {
 					style: {
 						lineHeight: 1.4,
 						textAlign: "center"
 					},
 					children: [
-						/* @__PURE__ */ A("div", {
+						/* @__PURE__ */ j("div", {
 							style: {
 								fontWeight: 700,
 								fontSize: 12,
@@ -555,7 +569,7 @@ function J(e, t) {
 							},
 							children: e.name
 						}),
-						/* @__PURE__ */ j("div", {
+						/* @__PURE__ */ M("div", {
 							style: {
 								fontSize: 10,
 								color: o > 0 ? "rgba(255,255,255,0.75)" : "var(--color-text-muted)",
@@ -563,7 +577,7 @@ function J(e, t) {
 							},
 							children: [e.type, e.version ? ` v${e.version}` : ""]
 						}),
-						o > 0 && /* @__PURE__ */ j("div", {
+						o > 0 && /* @__PURE__ */ M("div", {
 							style: {
 								fontSize: 10,
 								marginTop: 3,
@@ -597,7 +611,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: B.ArrowClosed },
 			style: {
 				stroke: "var(--color-border-strong)",
 				strokeWidth: 1.5,
@@ -614,10 +628,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 X({ graphNodes: e, graphEdges: t, onComponentClick: n, onConnect: r }) {
+	let { nodes: i, edges: a } = b(() => Y(e, t), [e, t]), [o, s, c] = G(i), [l, u, d] = W(a);
+	y(() => {
+		let { nodes: n, edges: r } = Y(e, t);
 		s(n), u(r);
 	}, [
 		e,
@@ -625,33 +639,33 @@ 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) => U({
 			...e,
 			animated: !0,
-			markerEnd: { type: z.ArrowClosed },
+			markerEnd: { type: B.ArrowClosed },
 			style: {
 				stroke: "var(--color-border-strong)",
 				strokeWidth: 1.5
 			}
 		}, t)), r?.(e.source, e.target));
 	}, [r, u]);
-	return /* @__PURE__ */ A("div", {
+	return /* @__PURE__ */ j("div", {
 		className: "w-full rounded-lg border border-border-default overflow-hidden",
 		style: {
 			height: p,
 			background: "var(--color-bg-secondary)"
 		},
-		children: /* @__PURE__ */ j(V, {
+		children: /* @__PURE__ */ M(H, {
 			nodes: o,
 			edges: l,
 			onNodesChange: c,
 			onEdgesChange: d,
 			onNodeClick: m,
 			onConnect: h,
-			nodeTypes: q,
+			nodeTypes: J,
 			fitView: !0,
 			fitViewOptions: { padding: .25 },
 			minZoom: .15,
@@ -660,12 +674,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__ */ j(I, {
+				variant: L.Dots,
 				gap: 20,
 				size: 1,
 				className: "!fill-text-tertiary/10"
-			}), /* @__PURE__ */ A(L, {
+			}), /* @__PURE__ */ j(R, {
 				showInteractive: !1,
 				style: {
 					background: "var(--color-bg-primary)",
@@ -682,7 +696,7 @@ function ge({ catalogId: e, tr: t }) {
 		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;
@@ -710,7 +724,7 @@ function ge({ catalogId: e, tr: t }) {
 		u,
 		c
 	]);
-	return /* @__PURE__ */ j(O.div, {
+	return /* @__PURE__ */ M(k.div, {
 		initial: {
 			opacity: 0,
 			y: 8
@@ -726,89 +740,89 @@ function ge({ catalogId: e, tr: t }) {
 		transition: { duration: .2 },
 		className: "space-y-4",
 		children: [
-			/* @__PURE__ */ j("div", {
+			/* @__PURE__ */ M("div", {
 				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ j("h3", {
+				children: [/* @__PURE__ */ M("h3", {
 					className: "font-semibold text-text-primary flex items-center gap-2",
-					children: [/* @__PURE__ */ A(T, { className: "size-5" }), t("catalog.dependencyGraph", "Dependency Graph")]
-				}), /* @__PURE__ */ A("button", {
+					children: [/* @__PURE__ */ j(E, { className: "size-5" }), t("catalog.dependencyGraph", "Dependency Graph")]
+				}), /* @__PURE__ */ j("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__ */ j(O, { className: `size-4 ${a ? "animate-spin" : ""}` })
 				})]
 			}),
-			a && !p && /* @__PURE__ */ A(d, { message: t("catalog.loadingGraph", "Loading dependency graph...") }),
-			o && !p && /* @__PURE__ */ A(f, {
+			a && !p && /* @__PURE__ */ j(d, { message: t("catalog.loadingGraph", "Loading dependency graph...") }),
+			o && !p && /* @__PURE__ */ j(f, {
 				title: t("catalog.graphError", "Failed to load graph"),
 				message: o.message,
 				onRetry: () => c()
 			}),
-			p && p.nodes.length === 0 && /* @__PURE__ */ A(m, {
-				icon: /* @__PURE__ */ A(T, { className: "size-8 text-text-secondary" }),
+			p && p.nodes.length === 0 && /* @__PURE__ */ j(m, {
+				icon: /* @__PURE__ */ j(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")
 			}),
-			p && p.nodes.length > 0 && /* @__PURE__ */ j(k, { children: [
-				/* @__PURE__ */ j("div", {
+			p && p.nodes.length > 0 && /* @__PURE__ */ M(A, { children: [
+				/* @__PURE__ */ M("div", {
 					className: "grid grid-cols-2 gap-4",
-					children: [/* @__PURE__ */ j(h, {
+					children: [/* @__PURE__ */ M(h, {
 						padding: "md",
-						children: [/* @__PURE__ */ A("p", {
+						children: [/* @__PURE__ */ j("p", {
 							className: "text-sm text-text-secondary",
 							children: t("catalog.graphNodes", "Components")
-						}), /* @__PURE__ */ A("p", {
+						}), /* @__PURE__ */ j("p", {
 							className: "text-2xl font-bold text-text-primary",
 							children: p.nodes.length
 						})]
-					}), /* @__PURE__ */ j(h, {
+					}), /* @__PURE__ */ M(h, {
 						padding: "md",
-						children: [/* @__PURE__ */ A("p", {
+						children: [/* @__PURE__ */ j("p", {
 							className: "text-sm text-text-secondary",
 							children: t("catalog.graphEdges", "Dependencies")
-						}), /* @__PURE__ */ A("p", {
+						}), /* @__PURE__ */ j("p", {
 							className: "text-2xl font-bold text-text-primary",
 							children: p.edges.length
 						})]
 					})]
 				}),
-				/* @__PURE__ */ A(Y, {
+				/* @__PURE__ */ j(X, {
 					graphNodes: p.nodes,
 					graphEdges: p.edges,
 					onComponentClick: (e) => r(`/components/${e}`),
 					onConnect: g
 				}),
-				p.edges.length === 0 && /* @__PURE__ */ A("p", {
+				p.edges.length === 0 && /* @__PURE__ */ j("p", {
 					className: "text-xs text-text-muted text-center",
 					children: "No inter-component dependencies yet. Drag from a node's right handle to another node to create a dependency."
 				}),
-				p.edges.length > 0 && /* @__PURE__ */ j(h, { children: [/* @__PURE__ */ A("div", {
+				p.edges.length > 0 && /* @__PURE__ */ M(h, { children: [/* @__PURE__ */ j("div", {
 					className: "p-4 border-b border-border-default",
-					children: /* @__PURE__ */ A("h4", {
+					children: /* @__PURE__ */ j("h4", {
 						className: "font-medium text-text-primary",
 						children: t("catalog.graphEdgesList", "Dependency Edges")
 					})
-				}), /* @__PURE__ */ A("div", {
+				}), /* @__PURE__ */ j("div", {
 					className: "divide-y divide-border-default",
-					children: p.edges.map((e, t) => /* @__PURE__ */ j("div", {
+					children: p.edges.map((e, t) => /* @__PURE__ */ M("div", {
 						className: "p-3 flex items-center gap-3 text-sm",
 						children: [
-							/* @__PURE__ */ A("span", {
+							/* @__PURE__ */ j("span", {
 								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("span", {
+							/* @__PURE__ */ j(C, { className: "size-4 text-text-muted flex-shrink-0" }),
+							/* @__PURE__ */ j("span", {
 								className: "text-text-primary truncate max-w-[120px]",
 								children: p.nodes.find((t) => t.id === e.target)?.name || e.target
 							}),
-							e.version && /* @__PURE__ */ A("span", {
+							e.version && /* @__PURE__ */ j("span", {
 								className: "text-xs text-text-muted ml-auto",
 								children: e.version
 							}),
-							e.dependencyType && /* @__PURE__ */ A("span", {
+							e.dependencyType && /* @__PURE__ */ j("span", {
 								className: "text-xs bg-bg-sunken text-text-secondary px-1.5 py-0.5 rounded",
 								children: e.dependencyType
 							})
@@ -820,7 +834,7 @@ function ge({ catalogId: e, tr: t }) {
 	}, "dependency-graph");
 }
 function _e({ 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(() => {
+	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();
@@ -837,9 +851,9 @@ function _e({ catalogId: e, existingComponentIds: t, onAdd: n, onClose: r, tr: a
 			s(!1);
 		}
 	};
-	return /* @__PURE__ */ A("div", {
+	return /* @__PURE__ */ j("div", {
 		className: "fixed inset-0 bg-bg-overlay flex items-center justify-center z-50 p-4",
-		children: /* @__PURE__ */ j(O.div, {
+		children: /* @__PURE__ */ M(k.div, {
 			initial: {
 				opacity: 0,
 				scale: .95
@@ -850,14 +864,14 @@ function _e({ catalogId: e, existingComponentIds: t, onAdd: n, onClose: r, tr: a
 			},
 			className: "bg-bg-surface rounded-lg w-full max-w-md max-h-[70vh] flex flex-col",
 			children: [
-				/* @__PURE__ */ j("div", {
+				/* @__PURE__ */ M("div", {
 					className: "p-4 border-b border-border-default",
-					children: [/* @__PURE__ */ A("h2", {
+					children: [/* @__PURE__ */ j("h2", {
 						className: "text-lg font-semibold text-text-primary",
 						children: a("catalog.addComponentTitle", "Add Component to Catalog")
-					}), /* @__PURE__ */ A("div", {
+					}), /* @__PURE__ */ j("div", {
 						className: "mt-3",
-						children: /* @__PURE__ */ A("input", {
+						children: /* @__PURE__ */ j("input", {
 							"aria-label": "control",
 							type: "text",
 							value: c,
@@ -867,36 +881,36 @@ function _e({ catalogId: e, existingComponentIds: t, onAdd: n, onClose: r, tr: a
 						})
 					})]
 				}),
-				/* @__PURE__ */ j("div", {
+				/* @__PURE__ */ M("div", {
 					className: "flex-1 overflow-y-auto p-2",
 					children: [
-						f && /* @__PURE__ */ A(d, { message: a("common.loading", "Loading...") }),
-						!f && p.length === 0 && /* @__PURE__ */ A("div", {
+						f && /* @__PURE__ */ j(d, { message: a("common.loading", "Loading...") }),
+						!f && p.length === 0 && /* @__PURE__ */ j("div", {
 							className: "p-4 text-center text-text-secondary text-sm",
 							children: a("catalog.noAvailableComponents", "No available components to add")
 						}),
-						p.map((e) => /* @__PURE__ */ j("button", {
+						p.map((e) => /* @__PURE__ */ M("button", {
 							type: "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__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+							children: [/* @__PURE__ */ M("div", { children: [/* @__PURE__ */ j("p", {
 								className: "font-medium text-text-primary text-sm",
 								children: e.name
-							}), /* @__PURE__ */ j("p", {
+							}), /* @__PURE__ */ M("p", {
 								className: "text-xs text-text-secondary",
 								children: [
 									e.type,
 									" · ",
 									e.lifecycle
 								]
-							})] }), /* @__PURE__ */ A(E, { className: "size-4 text-text-secondary" })]
+							})] }), /* @__PURE__ */ j(D, { className: "size-4 text-text-secondary" })]
 						}, e.id))
 					]
 				}),
-				/* @__PURE__ */ A("div", {
+				/* @__PURE__ */ j("div", {
 					className: "p-4 border-t border-border-default",
-					children: /* @__PURE__ */ A("button", {
+					children: /* @__PURE__ */ j("button", {
 						type: "button",
 						onClick: r,
 						className: "w-full px-4 py-2 text-text-primary hover:bg-bg-sunken rounded-md transition-colors",
@@ -908,6 +922,6 @@ function _e({ catalogId: e, existingComponentIds: t, onAdd: n, onClose: r, tr: a
 	});
 }
 //#endregion
-export { G as CatalogDetailPage };
+export { K as CatalogDetailPage };
 
 //# sourceMappingURL=CatalogDetailPage.js.map