@burdenoff/microfe-vibecontrols 2026.601.21 → 2026.601.23

package/dist/pages/ComponentDetailPage.js

@@ -11,21 +11,23 @@ import { Card as d } from "../components/shared/Card.js";
 import { StatCard as f } from "../components/shared/StatCard.js";
 import "../components/shared/index.js";
 import { VIBE_PERMISSIONS as ie } from "../constants/permissions.js";
-import { PageSkeleton as ae } from "../components/shared/PageSkeleton.js";
-import { useQueryBackedTab as oe } from "../hooks/useQueryBackedTab.js";
-import { DocsTabPanel as se } from "../components/docs/DocsTabPanel.js";
+import { EntityShareButton as ae } from "../components/sharing/EntityShareButton.js";
+import "../components/sharing/index.js";
+import { PageSkeleton as oe } from "../components/shared/PageSkeleton.js";
+import { useQueryBackedTab as se } from "../hooks/useQueryBackedTab.js";
+import { DocsTabPanel as ce } from "../components/docs/DocsTabPanel.js";
 import "../components/docs/index.js";
-import { ComponentForm as ce } from "../components/idp-components/ComponentForm.js";
-import { DependencyGraphTab as le } from "../components/idp-components/DependencyGraphTab.js";
+import { ComponentForm as le } from "../components/idp-components/ComponentForm.js";
+import { DependencyGraphTab as ue } from "../components/idp-components/DependencyGraphTab.js";
 import "../components/idp-components/index.js";
-import { CatalogCard as ue } from "../components/catalog/CatalogCard.js";
+import { CatalogCard as de } from "../components/catalog/CatalogCard.js";
 import "../components/catalog/index.js";
-import { PublishTemplateForm as de } from "../components/templates/PublishTemplateForm.js";
+import { PublishTemplateForm as fe } from "../components/templates/PublishTemplateForm.js";
 import "../components/templates/index.js";
-import { useCallback as fe, useMemo as pe, useState as p } from "react";
-import { useI18n as me } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { ArrowLeft as m, BookOpen as h, Box as g, FileCode as _, FileText as v, Layers as he, Plus as y, RefreshCw as b, Settings as ge, Share2 as _e, Tag as ve, Trash2 as ye, Upload as x, X as be } from "lucide-react";
-import { useParams as xe } from "react-router-dom";
+import { useCallback as pe, useMemo as me, useState as p } from "react";
+import { useI18n as he } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { ArrowLeft as m, BookOpen as h, Box as g, FileCode as _, FileText as ge, Layers as v, Plus as y, RefreshCw as _e, Settings as ve, Share2 as ye, Tag as be, Trash2 as xe, Upload as b, X as Se } from "lucide-react";
+import { useParams as x } from "react-router-dom";
 import { usePermissions as S } from "@burdenoff/fe-libs/shared/providers/shell";
 import { AnimatePresence as C, motion as w } from "framer-motion";
 import { jsx as T, jsxs as E } from "react/jsx-runtime";
@@ -40,21 +42,21 @@ var A = [
 	"settings"
 ];
 function j() {
-	let { t: j } = me(), { id: M } = xe(), N = o(), { hasPermission: Se, isLoading: Ce } = S(), P = fe((e, t) => {
+	let { t: j } = he(), { id: M } = x(), N = o(), { hasPermission: Ce, isLoading: we } = S(), P = pe((e, t) => {
 		let n = j(e);
 		return n === e ? t : n;
-	}, [j]), [F, we] = oe(A, "overview"), [Te, I] = p(!1), [Ee, L] = p(!1), [De, R] = p(!1), [z, B] = p(null), [Oe, V] = p(!1), [ke, H] = p(!1), [U, W] = p(!1), { data: Ae, loading: G, error: K, refetch: q } = n({
+	}, [j]), [F, Te] = se(A, "overview"), [Ee, I] = p(!1), [De, L] = p(!1), [Oe, R] = p(!1), [z, B] = p(null), [ke, V] = p(!1), [Ae, H] = p(!1), [U, W] = p(!1), { data: je, loading: G, error: K, refetch: q } = n({
 		variables: { id: M || "" },
 		skip: !M,
 		fetchPolicy: "cache-and-network"
-	}), [je] = ee({ refetchQueries: ["GetComponent"] }), [J] = t({ refetchQueries: ["ListComponents"] }), [Me] = i({ refetchQueries: ["GetComponent"] }), [Ne] = e({ refetchQueries: ["GetComponent"] }), { data: Y } = r({
+	}), [Me] = ee({ refetchQueries: ["GetComponent"] }), [Ne] = t({ refetchQueries: ["ListComponents"] }), [Pe] = i({ refetchQueries: ["GetComponent"] }), [Fe] = e({ refetchQueries: ["GetComponent"] }), { data: J } = r({
 		variables: { pagination: {
 			limit: 100,
 			offset: 0
 		} },
 		skip: !U,
 		fetchPolicy: "cache-and-network"
-	}), X = Ae?.vibecontrolsComponent ?? null, Z = pe(() => (X?.catalogs ?? []).map((e) => {
+	}), Y = je?.vibecontrolsComponent ?? null, X = me(() => (Y?.catalogs ?? []).map((e) => {
 		let t = e.catalog || {};
 		return {
 			id: t.id,
@@ -67,15 +69,15 @@ function j() {
 			createdAt: t.createdAt,
 			updatedAt: t.updatedAt
 		};
-	}), [X?.catalogs]);
-	if (Ce) return /* @__PURE__ */ T("div", {
+	}), [Y?.catalogs]);
+	if (we) return /* @__PURE__ */ T("div", {
 		className: "flex items-center justify-center min-h-[400px]",
 		children: /* @__PURE__ */ T("p", {
 			className: "text-text-secondary",
 			children: "Loading permissions…"
 		})
 	});
-	if (!Se(ie.VIBE_READ)) return /* @__PURE__ */ T("div", {
+	if (!Ce(ie.VIBE_READ)) return /* @__PURE__ */ T("div", {
 		className: "flex items-center justify-center min-h-[400px]",
 		children: /* @__PURE__ */ E("div", {
 			className: "text-center space-y-2",
@@ -88,12 +90,12 @@ function j() {
 			})]
 		})
 	});
-	let Q = () => {
+	let Z = () => {
 		N("/components");
-	}, Pe = (e) => {
+	}, Ie = (e) => {
 		N(`/catalogs/${e.id}`);
-	}, Fe = async (e) => {
-		M && (await je({ variables: {
+	}, Le = async (e) => {
+		M && (await Me({ variables: {
 			id: M,
 			input: {
 				name: e.name,
@@ -111,18 +113,18 @@ function j() {
 				sbomData: e.sbomData ?? void 0
 			}
 		} }), B(P("component.updatedSuccess", "Component updated successfully")), setTimeout(() => B(null), 3e3));
-	}, Ie = async () => {
+	}, Re = async () => {
 		if (M) {
 			R(!0);
 			try {
-				await J({ variables: { id: M } }), L(!1), N("/components");
+				await Ne({ variables: { id: M } }), L(!1), N("/components");
 			} finally {
 				R(!1);
 			}
 		}
-	}, Le = async (e) => {
+	}, Q = async (e) => {
 		if (M) try {
-			let t = await Me({ variables: {
+			let t = await Pe({ variables: {
 				componentId: M,
 				input: {
 					name: e.name,
@@ -146,12 +148,12 @@ function j() {
 			}
 			throw e;
 		}
-	}, Re = {
+	}, ze = {
 		EXPERIMENTAL: "bg-status-warning-bg text-status-warning-text",
 		ACTIVE: "bg-status-success-bg text-status-success-text",
 		DEPRECATED: "bg-status-error-bg text-status-error-text",
 		END_OF_LIFE: "bg-status-error-bg text-status-error-text"
-	}, $ = Array.isArray(X?.dependencies) ? X.dependencies : [], ze = [
+	}, $ = Array.isArray(Y?.dependencies) ? Y.dependencies : [], Be = [
 		{
 			id: "overview",
 			label: P("nav.overview", "Overview"),
@@ -161,17 +163,17 @@ function j() {
 			id: "catalogs",
 			label: P("component.catalogs", "Catalogs"),
 			icon: h,
-			badge: `${Z.length}`
+			badge: `${X.length}`
 		},
 		{
 			id: "docs",
 			label: P("component.docs", "Docs"),
-			icon: v
+			icon: ge
 		},
 		{
 			id: "dependencies",
 			label: P("component.dependencies", "Dependencies"),
-			icon: _e,
+			icon: ye,
 			badge: $.length > 0 ? `${$.length}` : void 0
 		},
 		{
@@ -182,22 +184,22 @@ function j() {
 		{
 			id: "settings",
 			label: P("common.settings", "Settings"),
-			icon: ge
+			icon: ve
 		}
 	];
-	return G && !X ? /* @__PURE__ */ E(k, {
+	return G && !Y ? /* @__PURE__ */ E(k, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
 		children: [/* @__PURE__ */ E("button", {
 			type: "button",
-			onClick: Q,
+			onClick: Z,
 			className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
 			children: [/* @__PURE__ */ T(m, { className: "size-4" }), P("component.backToComponents", "Back to Components")]
-		}), /* @__PURE__ */ T(ae, { variant: "detail" })]
-	}) : K && !X ? /* @__PURE__ */ E(k, {
+		}), /* @__PURE__ */ T(oe, { variant: "detail" })]
+	}) : K && !Y ? /* @__PURE__ */ E(k, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
 		children: [/* @__PURE__ */ E("button", {
 			type: "button",
-			onClick: Q,
+			onClick: Z,
 			className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
 			children: [/* @__PURE__ */ T(m, { className: "size-4" }), P("component.backToComponents", "Back to Components")]
 		}), /* @__PURE__ */ T(c, {
@@ -205,7 +207,7 @@ function j() {
 			message: K.message,
 			onRetry: () => q()
 		})]
-	}) : X ? /* @__PURE__ */ E(k, {
+	}) : Y ? /* @__PURE__ */ E(k, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
 		children: [
 			z && /* @__PURE__ */ T("div", {
@@ -214,31 +216,40 @@ function j() {
 			}),
 			/* @__PURE__ */ E("button", {
 				type: "button",
-				onClick: Q,
+				onClick: Z,
 				className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
 				children: [/* @__PURE__ */ T(m, { className: "size-4" }), P("component.backToComponents", "Back to Components")]
 			}),
 			/* @__PURE__ */ T(s, {
-				title: X.name,
-				description: X.description || P("component.noDescription", "No description"),
+				title: Y.name,
+				description: Y.description || P("component.noDescription", "No description"),
 				actions: /* @__PURE__ */ E("div", {
 					className: "flex items-center gap-2 flex-wrap",
 					children: [
+						/* @__PURE__ */ T(ae, {
+							entity: "component",
+							resource: {
+								id: Y.id,
+								name: Y.name
+							},
+							label: P("component.share", "Share"),
+							variant: "button"
+						}),
 						/* @__PURE__ */ T("button", {
 							type: "button",
 							onClick: () => q(),
 							disabled: G,
 							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: P("common.refresh", "Refresh"),
-							children: /* @__PURE__ */ T(b, { className: `size-4 ${G ? "animate-spin" : ""}` })
+							children: /* @__PURE__ */ T(_e, { className: `size-4 ${G ? "animate-spin" : ""}` })
 						}),
 						/* @__PURE__ */ T("span", {
 							className: "inline-flex items-center px-2.5 py-1 text-xs font-medium bg-bg-sunken text-text-secondary rounded",
-							children: X.type
+							children: Y.type
 						}),
 						/* @__PURE__ */ T("span", {
-							className: `inline-flex items-center px-2.5 py-1 text-xs font-medium rounded ${Re[X.lifecycle] || "bg-bg-sunken text-text-secondary"}`,
-							children: X.lifecycle
+							className: `inline-flex items-center px-2.5 py-1 text-xs font-medium rounded ${ze[Y.lifecycle] || "bg-bg-sunken text-text-secondary"}`,
+							children: Y.lifecycle
 						})
 					]
 				})
@@ -249,30 +260,30 @@ function j() {
 				children: [
 					/* @__PURE__ */ T(D, { children: /* @__PURE__ */ T(f, {
 						title: P("component.type", "Type"),
-						value: X.type,
+						value: Y.type,
 						icon: /* @__PURE__ */ T(g, { className: "size-4" })
 					}) }),
 					/* @__PURE__ */ T(D, { children: /* @__PURE__ */ T(f, {
 						title: P("component.lifecycle", "Lifecycle"),
-						value: X.lifecycle,
-						icon: /* @__PURE__ */ T(he, { className: "size-4" }),
-						variant: X.lifecycle === "ACTIVE" ? "success" : X.lifecycle === "DEPRECATED" || X.lifecycle === "END_OF_LIFE" ? "error" : "warning"
+						value: Y.lifecycle,
+						icon: /* @__PURE__ */ T(v, { className: "size-4" }),
+						variant: Y.lifecycle === "ACTIVE" ? "success" : Y.lifecycle === "DEPRECATED" || Y.lifecycle === "END_OF_LIFE" ? "error" : "warning"
 					}) }),
 					/* @__PURE__ */ T(D, { children: /* @__PURE__ */ T(f, {
 						title: P("component.version", "Version"),
-						value: X.version || "-",
+						value: Y.version || "-",
 						icon: /* @__PURE__ */ T(_, { className: "size-4" })
 					}) }),
 					/* @__PURE__ */ T(D, { children: /* @__PURE__ */ T(f, {
 						title: P("component.catalogs", "Catalogs"),
-						value: Z.length,
+						value: X.length,
 						icon: /* @__PURE__ */ T(h, { className: "size-4" })
 					}) })
 				]
 			}),
 			/* @__PURE__ */ E(d, { children: [/* @__PURE__ */ E("div", {
 				className: "p-4 border-b border-border-default flex items-center gap-2",
-				children: [/* @__PURE__ */ T(ve, { className: "size-5" }), /* @__PURE__ */ T("h3", {
+				children: [/* @__PURE__ */ T(be, { className: "size-5" }), /* @__PURE__ */ T("h3", {
 					className: "font-semibold text-text-primary",
 					children: P("component.tags", "Tags")
 				})]
@@ -280,7 +291,7 @@ function j() {
 				className: "p-4",
 				children: /* @__PURE__ */ T(l, {
 					entityType: "VIBECONTROLS_COMPONENT",
-					entityId: X.id
+					entityId: Y.id
 				})
 			})] }),
 			/* @__PURE__ */ T("div", {
@@ -288,11 +299,11 @@ function j() {
 				children: /* @__PURE__ */ T("nav", {
 					className: "flex gap-1 -mb-px overflow-x-auto pb-1",
 					"aria-label": P("component.tabsAriaLabel", "Component tabs"),
-					children: ze.map((e) => {
+					children: Be.map((e) => {
 						let t = e.icon, n = F === e.id;
 						return /* @__PURE__ */ E("button", {
 							type: "button",
-							onClick: () => we(e.id),
+							onClick: () => Te(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",
@@ -327,11 +338,11 @@ function j() {
 						transition: { duration: .2 },
 						className: "space-y-6",
 						children: [
-							X.description && /* @__PURE__ */ T(d, { children: /* @__PURE__ */ T("div", {
+							Y.description && /* @__PURE__ */ T(d, { children: /* @__PURE__ */ T("div", {
 								className: "p-4",
 								children: /* @__PURE__ */ T("p", {
 									className: "text-text-primary",
-									children: X.description
+									children: Y.description
 								})
 							}) }),
 							/* @__PURE__ */ E(d, { children: [/* @__PURE__ */ T("div", {
@@ -350,40 +361,40 @@ function j() {
 											children: P("component.ownerNameLabel", "Owner")
 										}), /* @__PURE__ */ T("p", {
 											className: "font-medium text-text-primary",
-											children: X.ownerName || P("common.unset", "Unset")
+											children: Y.ownerName || P("common.unset", "Unset")
 										})] }),
 										/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("p", {
 											className: "text-text-secondary",
 											children: P("component.languageLabel", "Language")
 										}), /* @__PURE__ */ T("p", {
 											className: "font-medium text-text-primary",
-											children: X.language || P("common.unset", "Unset")
+											children: Y.language || P("common.unset", "Unset")
 										})] }),
 										/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("p", {
 											className: "text-text-secondary",
 											children: P("component.frameworkLabel", "Framework")
 										}), /* @__PURE__ */ T("p", {
 											className: "font-medium text-text-primary",
-											children: X.framework || P("common.unset", "Unset")
+											children: Y.framework || P("common.unset", "Unset")
 										})] }),
 										/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("p", {
 											className: "text-text-secondary",
 											children: P("component.versionLabel", "Version")
 										}), /* @__PURE__ */ T("p", {
 											className: "font-medium text-text-primary",
-											children: X.version || P("common.unset", "Unset")
+											children: Y.version || P("common.unset", "Unset")
 										})] }),
-										X.repositoryUrl && /* @__PURE__ */ E("div", {
+										Y.repositoryUrl && /* @__PURE__ */ E("div", {
 											className: "sm:col-span-2",
 											children: [/* @__PURE__ */ T("p", {
 												className: "text-text-secondary",
 												children: P("component.repository", "Repository")
 											}), /* @__PURE__ */ T("a", {
-												href: X.repositoryUrl,
+												href: Y.repositoryUrl,
 												target: "_blank",
 												rel: "noopener noreferrer",
 												className: "font-medium text-action-primary-bg hover:underline break-all",
-												children: X.repositoryUrl
+												children: Y.repositoryUrl
 											})]
 										}),
 										/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("p", {
@@ -391,26 +402,26 @@ function j() {
 											children: P("common.created", "Created")
 										}), /* @__PURE__ */ T("p", {
 											className: "font-medium text-text-primary",
-											children: new Date(X.createdAt).toLocaleDateString()
+											children: new Date(Y.createdAt).toLocaleDateString()
 										})] }),
 										/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("p", {
 											className: "text-text-secondary",
 											children: P("common.updated", "Updated")
 										}), /* @__PURE__ */ T("p", {
 											className: "font-medium text-text-primary",
-											children: new Date(X.updatedAt).toLocaleDateString()
+											children: new Date(Y.updatedAt).toLocaleDateString()
 										})] })
 									]
 								})
 							})] }),
-							X.tags?.length > 0 && /* @__PURE__ */ T(d, { children: /* @__PURE__ */ E("div", {
+							Y.tags?.length > 0 && /* @__PURE__ */ T(d, { children: /* @__PURE__ */ E("div", {
 								className: "p-4",
 								children: [/* @__PURE__ */ T("h3", {
 									className: "font-semibold text-text-primary mb-3",
 									children: P("component.tags", "Tags")
 								}), /* @__PURE__ */ T("div", {
 									className: "flex flex-wrap gap-2",
-									children: X.tags.map((e) => /* @__PURE__ */ T("span", {
+									children: Y.tags.map((e) => /* @__PURE__ */ T("span", {
 										className: "px-2.5 py-1 text-sm bg-bg-sunken text-text-secondary rounded-md",
 										children: e
 									}, e))
@@ -438,7 +449,7 @@ function j() {
 							children: [/* @__PURE__ */ E("p", {
 								className: "text-sm text-text-secondary",
 								children: [
-									Z.length,
+									X.length,
 									" ",
 									P("component.catalogsContaining", "catalogs containing this component")
 								]
@@ -448,12 +459,12 @@ function j() {
 								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__ */ T(y, { className: "size-4" }), P("component.addToCatalog", "Add to Catalog")]
 							})]
-						}), Z.length > 0 ? /* @__PURE__ */ T(O, {
+						}), X.length > 0 ? /* @__PURE__ */ T(O, {
 							stagger: .04,
 							className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
-							children: Z.map((e) => /* @__PURE__ */ T(D, { children: /* @__PURE__ */ T(ue, {
+							children: X.map((e) => /* @__PURE__ */ T(D, { children: /* @__PURE__ */ T(de, {
 								catalog: e,
-								onOpen: Pe
+								onOpen: Ie
 							}) }, e.id))
 						}) : /* @__PURE__ */ T(u, {
 							icon: /* @__PURE__ */ T(h, { className: "size-8 text-text-secondary" }),
@@ -482,7 +493,7 @@ function j() {
 						},
 						transition: { duration: .2 },
 						className: "space-y-6",
-						children: /* @__PURE__ */ T(se, {
+						children: /* @__PURE__ */ T(ce, {
 							ownerType: "COMPONENT",
 							ownerId: M || ""
 						})
@@ -501,9 +512,9 @@ function j() {
 							y: -8
 						},
 						transition: { duration: .2 },
-						children: /* @__PURE__ */ T(le, {
-							componentName: X.name,
-							componentType: X.type,
+						children: /* @__PURE__ */ T(ue, {
+							componentName: Y.name,
+							componentType: Y.type,
 							dependencies: $
 						})
 					}, "dependencies"),
@@ -522,7 +533,7 @@ function j() {
 						},
 						transition: { duration: .2 },
 						className: "space-y-4",
-						children: (X.templates?.length ?? 0) === 0 ? /* @__PURE__ */ T(d, {
+						children: (Y.templates?.length ?? 0) === 0 ? /* @__PURE__ */ T(d, {
 							padding: "lg",
 							children: /* @__PURE__ */ E("div", {
 								className: "flex flex-col items-center justify-center py-12 text-center",
@@ -540,7 +551,7 @@ function j() {
 										type: "button",
 										onClick: () => H(!0),
 										className: "flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors",
-										children: [/* @__PURE__ */ T(x, { className: "size-4" }), P("component.publishAsTemplate", "Publish as Template")]
+										children: [/* @__PURE__ */ T(b, { className: "size-4" }), P("component.publishAsTemplate", "Publish as Template")]
 									})
 								]
 							})
@@ -552,7 +563,7 @@ function j() {
 							})
 						}), /* @__PURE__ */ E("div", {
 							className: "p-4 space-y-3",
-							children: [X.templates.map((e) => /* @__PURE__ */ E("div", {
+							children: [Y.templates.map((e) => /* @__PURE__ */ E("div", {
 								className: "flex items-center justify-between p-3 bg-bg-sunken rounded-lg",
 								children: [/* @__PURE__ */ E("div", {
 									className: "flex items-center gap-3",
@@ -577,7 +588,7 @@ function j() {
 								type: "button",
 								onClick: () => H(!0),
 								className: "flex items-center gap-2 px-3 py-2 text-sm text-text-secondary border border-dashed border-border-default hover:border-border-strong rounded-lg w-full justify-center transition-colors",
-								children: [/* @__PURE__ */ T(x, { className: "size-4" }), "Update template"]
+								children: [/* @__PURE__ */ T(b, { className: "size-4" }), "Update template"]
 							})]
 						})] })
 					}, "template"),
@@ -624,7 +635,7 @@ function j() {
 										"data-testid": "component-delete-button",
 										onClick: () => L(!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__ */ T(ye, {
+										children: [/* @__PURE__ */ T(xe, {
 											className: "size-4",
 											"aria-hidden": "true"
 										}), P("component.deleteComponent", "Delete Component")]
@@ -635,39 +646,39 @@ function j() {
 					}, "settings")
 				]
 			}),
-			/* @__PURE__ */ T(ce, {
-				isOpen: Te,
+			/* @__PURE__ */ T(le, {
+				isOpen: Ee,
 				onClose: () => I(!1),
-				onSubmit: Fe,
+				onSubmit: Le,
 				initialData: {
-					name: X.name,
-					description: X.description || "",
-					type: X.type,
-					lifecycle: X.lifecycle,
-					language: X.language || "",
-					framework: X.framework || "",
-					version: X.version || "",
-					ownerName: X.ownerName || "",
-					tags: X.tags || [],
-					repositoryUrl: X.repositoryUrl || "",
-					documentationUrl: X.documentationUrl || "",
-					dependencies: Array.isArray(X.dependencies) ? X.dependencies : null,
-					sbomData: X.sbomData && typeof X.sbomData == "object" ? X.sbomData : null
+					name: Y.name,
+					description: Y.description || "",
+					type: Y.type,
+					lifecycle: Y.lifecycle,
+					language: Y.language || "",
+					framework: Y.framework || "",
+					version: Y.version || "",
+					ownerName: Y.ownerName || "",
+					tags: Y.tags || [],
+					repositoryUrl: Y.repositoryUrl || "",
+					documentationUrl: Y.documentationUrl || "",
+					dependencies: Array.isArray(Y.dependencies) ? Y.dependencies : null,
+					sbomData: Y.sbomData && typeof Y.sbomData == "object" ? Y.sbomData : null
 				},
 				title: P("component.editComponent", "Edit Component")
 			}),
 			/* @__PURE__ */ T(te, {
-				isOpen: Ee,
+				isOpen: De,
 				onClose: () => L(!1),
-				onConfirm: Ie,
+				onConfirm: Re,
 				title: P("component.deleteComponent", "Delete Component"),
-				message: P("component.deleteConfirmMessage", `Are you sure you want to delete "${X.name}"? This action cannot be undone.`),
+				message: P("component.deleteConfirmMessage", `Are you sure you want to delete "${Y.name}"? This action cannot be undone.`),
 				confirmLabel: P("common.delete", "Delete"),
 				variant: "danger",
-				isLoading: De
+				isLoading: Oe
 			}),
 			/* @__PURE__ */ T(ne, {
-				isOpen: Oe,
+				isOpen: ke,
 				onClose: () => V(!1),
 				onConfirm: () => {
 					V(!1), N("/billing/plans");
@@ -675,11 +686,11 @@ function j() {
 				title: "Template Quota Reached",
 				message: "You've reached the maximum number of published templates on your current plan. Upgrade your plan or purchase an add-on to publish more templates."
 			}),
-			ke && /* @__PURE__ */ T(de, {
-				componentName: X.name,
-				componentRepositoryUrl: X.repositoryUrl,
+			Ae && /* @__PURE__ */ T(fe, {
+				componentName: Y.name,
+				componentRepositoryUrl: Y.repositoryUrl,
 				onClose: () => H(!1),
-				onSubmit: Le
+				onSubmit: Q
 			}),
 			U && /* @__PURE__ */ T("div", {
 				className: "fixed inset-0 flex items-center justify-center z-50 p-4",
@@ -703,11 +714,11 @@ function j() {
 							type: "button",
 							onClick: () => W(!1),
 							className: "p-1.5 text-text-secondary hover:text-text-primary rounded-md hover:bg-bg-sunken transition-colors",
-							children: /* @__PURE__ */ T(be, { className: "size-4" })
+							children: /* @__PURE__ */ T(Se, { className: "size-4" })
 						})]
 					}), /* @__PURE__ */ T("div", {
 						className: "p-2 max-h-80 overflow-y-auto",
-						children: (Y?.vibecontrolsCatalogs?.items ?? []).length === 0 ? /* @__PURE__ */ E("p", {
+						children: (J?.vibecontrolsCatalogs?.items ?? []).length === 0 ? /* @__PURE__ */ E("p", {
 							className: "text-sm text-text-secondary text-center py-6",
 							children: [
 								"No catalogs found.",
@@ -721,14 +732,14 @@ function j() {
 									children: "Create one first."
 								})
 							]
-						}) : (Y?.vibecontrolsCatalogs?.items ?? []).map((e) => {
-							let t = Z.some((t) => t.id === e.id);
+						}) : (J?.vibecontrolsCatalogs?.items ?? []).map((e) => {
+							let t = X.some((t) => t.id === e.id);
 							return /* @__PURE__ */ E("button", {
 								type: "button",
 								disabled: t,
 								onClick: async () => {
 									if (!(!M || t)) try {
-										await Ne({ variables: {
+										await Fe({ variables: {
 											catalogId: e.id,
 											componentId: M
 										} }), W(!1), B(`Added to ${e.name}`), setTimeout(() => B(null), 3e3);
@@ -755,7 +766,7 @@ function j() {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
 		children: [/* @__PURE__ */ E("button", {
 			type: "button",
-			onClick: Q,
+			onClick: Z,
 			className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
 			children: [/* @__PURE__ */ T(m, { className: "size-4" }), P("component.backToComponents", "Back to Components")]
 		}), /* @__PURE__ */ T(u, {
@@ -764,7 +775,7 @@ function j() {
 			description: `No component with ID "${M}" exists`,
 			action: /* @__PURE__ */ T("button", {
 				type: "button",
-				onClick: Q,
+				onClick: Z,
 				className: "px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors",
 				children: P("component.backToComponents", "Back to Components")
 			})