@burdenoff/microfe-vibecontrols 2026.613.1 → 2026.618.1

package/dist/pages/ComponentDetailPage.js

@@ -1,41 +1,41 @@
-import { useAddComponentToCatalogMutation as e, useDeleteComponentMutation as t, useGetComponentQuery as n, useListCatalogsQuery as ee, usePublishComponentAsTemplateMutation as r, useUpdateComponentMutation as i } from "../generated/wspace-operations.js";
-import { ConfirmDialog as a } from "../components/shared/ConfirmDialog.js";
-import { QuotaExhaustedDialog as te } from "../components/shared/QuotaExhaustedDialog.js";
-import { isQuotaExhaustedError as o, markQuotaHandledLocally as ne } from "../utils/quotaUtils.js";
-import { useVibeNavigate as re } from "../providers/VibeControlsProvider.js";
-import { PageHeader as ie } from "../components/shared/PageHeader.js";
-import { ErrorState as ae } from "../components/shared/ErrorState.js";
-import { EntityTagPicker as s } from "../components/shared/EntityTagPicker.js";
-import { EmptyState as c } from "../components/shared/EmptyState.js";
-import { Card as l } from "../components/shared/Card.js";
-import { StatCard as u } from "../components/shared/StatCard.js";
+import { useAddComponentToCatalogMutation as e, useDeleteComponentMutation as t, useGetComponentQuery as n, useListCatalogsQuery as ee, usePublishComponentAsTemplateMutation as te, useUpdateComponentMutation as ne } from "../generated/wspace-operations.js";
+import { ConfirmDialog as re } from "../components/shared/ConfirmDialog.js";
+import { QuotaExhaustedDialog as r } from "../components/shared/QuotaExhaustedDialog.js";
+import { isQuotaExhaustedError as i, markQuotaHandledLocally as ie } from "../utils/quotaUtils.js";
+import { useVibeNavigate as ae } from "../providers/VibeControlsProvider.js";
+import { PageHeader as oe } from "../components/shared/PageHeader.js";
+import { ErrorState as se } from "../components/shared/ErrorState.js";
+import { EntityTagPicker as ce } from "../components/shared/EntityTagPicker.js";
+import { EmptyState as a } from "../components/shared/EmptyState.js";
+import { Card as o } from "../components/shared/Card.js";
+import { StatCard as s } from "../components/shared/StatCard.js";
 import "../components/shared/index.js";
-import { VIBE_PERMISSIONS as d } from "../constants/permissions.js";
-import { EntityShareButton as f } from "../components/sharing/EntityShareButton.js";
+import { VIBE_PERMISSIONS as c } from "../constants/permissions.js";
+import { EntityShareButton as l } from "../components/sharing/EntityShareButton.js";
 import "../components/sharing/index.js";
-import { PageSkeleton as p } from "../components/shared/PageSkeleton.js";
-import { useQueryBackedTab as oe } from "../hooks/useQueryBackedTab.js";
-import { DocsTabPanel as se } from "../components/docs/DocsTabPanel.js";
+import { PageSkeleton as u } from "../components/shared/PageSkeleton.js";
+import { useQueryBackedTab as d } from "../hooks/useQueryBackedTab.js";
+import { DocsTabPanel as le } from "../components/docs/DocsTabPanel.js";
 import "../components/docs/index.js";
-import { ScorecardPanel as ce } from "../components/scorecard/ScorecardPanel.js";
+import { ScorecardPanel as ue } from "../components/scorecard/ScorecardPanel.js";
 import "../components/scorecard/index.js";
-import { ComponentForm as le } from "../components/idp-components/ComponentForm.js";
-import { DependencyGraphTab as ue } from "../components/idp-components/DependencyGraphTab.js";
+import { ComponentForm as de } from "../components/idp-components/ComponentForm.js";
+import { DependencyGraphTab as fe } from "../components/idp-components/DependencyGraphTab.js";
 import "../components/idp-components/index.js";
-import { CatalogCard as de } from "../components/catalog/CatalogCard.js";
+import { CatalogCard as pe } from "../components/catalog/CatalogCard.js";
 import "../components/catalog/index.js";
-import { PublishTemplateForm as fe } from "../components/templates/PublishTemplateForm.js";
+import { PublishTemplateForm as me } from "../components/templates/PublishTemplateForm.js";
 import "../components/templates/index.js";
-import { useCallback as pe, useMemo as me, useState as m } from "react";
-import { useI18n as he } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { ArrowLeft as h, BarChart3 as ge, BookOpen as g, Box as _, FileCode as v, FileText as _e, Layers as ve, Plus as y, RefreshCw as ye, Settings as be, Share2 as xe, Tag as Se, Trash2 as Ce, Upload as b, X as x } from "lucide-react";
-import { useParams as S } from "react-router-dom";
-import { usePermissions as C } from "@burdenoff/fe-libs/shared/providers/shell";
-import { AnimatePresence as w, motion as T } from "framer-motion";
-import { jsx as E, jsxs as D } from "react/jsx-runtime";
-import { MotionItem as O, MotionList as k, MotionPage as A } from "@burdenoff/fe-libs/shared/motion";
+import { useCallback as he, useMemo as ge, useState as f } from "react";
+import { useI18n as _e } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { ArrowLeft as p, BarChart3 as ve, BookOpen as m, Box as h, FileCode as g, FileText as ye, Layers as be, Plus as _, RefreshCw as xe, Settings as Se, Share2 as Ce, Tag as we, Trash2 as Te, Upload as v, X as Ee } from "lucide-react";
+import { useParams as De } from "react-router-dom";
+import { usePermissions as Oe } from "@burdenoff/fe-libs/shared/providers/shell";
+import { AnimatePresence as ke, motion as y } from "framer-motion";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+import { MotionItem as S, MotionList as C, MotionPage as w } from "@burdenoff/fe-libs/shared/motion";
 //#region src/pages/ComponentDetailPage.tsx
-var j = [
+var Ae = [
 	"overview",
 	"catalogs",
 	"scorecard",
@@ -44,22 +44,22 @@ var j = [
 	"template",
 	"settings"
 ];
-function M() {
-	let { t: M } = he(), { id: N } = S(), P = re(), { hasPermission: we, isLoading: Te } = C(), F = pe((e, t) => {
-		let n = M(e);
+function T() {
+	let { t: T } = _e(), { id: E } = De(), D = ae(), { hasPermission: O, isLoading: k } = Oe(), A = O(c.COMPONENT_READ), j = O(c.COMPONENT_UPDATE), je = O(c.COMPONENT_DELETE), Me = O(c.CATALOG_READ), Ne = O(c.CATALOG_UPDATE), M = Me && Ne, N = O(c.TEMPLATE_CREATE), P = he((e, t) => {
+		let n = T(e);
 		return n === e ? t : n;
-	}, [M]), [I, Ee] = oe(j, "overview"), [De, L] = m(!1), [Oe, R] = m(!1), [ke, z] = m(!1), [B, V] = m(null), [Ae, H] = m(!1), [je, U] = m(!1), [W, G] = m(!1), { data: Me, loading: K, error: q, refetch: J } = n({
-		variables: { id: N || "" },
-		skip: !N,
+	}, [T]), [F, Pe] = d(Ae, "overview"), [Fe, I] = f(!1), [Ie, L] = f(!1), [Le, R] = f(!1), [z, B] = f(null), [Re, V] = f(!1), [ze, H] = f(!1), [U, W] = f(!1), { data: Be, loading: G, error: K, refetch: q } = n({
+		variables: { id: E || "" },
+		skip: !E || k || !A,
 		fetchPolicy: "cache-and-network"
-	}), [Ne] = i({ refetchQueries: ["GetComponent"] }), [Pe] = t({ refetchQueries: ["ListComponents"] }), [Fe] = r({ refetchQueries: ["GetComponent"] }), [Ie] = e({ refetchQueries: ["GetComponent"] }), { data: Y } = ee({
+	}), [Ve] = ne({ refetchQueries: ["GetComponent"] }), [He] = t({ refetchQueries: ["ListComponents"] }), [Ue] = te({ refetchQueries: ["GetComponent"] }), [We] = e({ refetchQueries: ["GetComponent"] }), { data: J } = ee({
 		variables: { pagination: {
 			limit: 100,
 			offset: 0
 		} },
-		skip: !W,
+		skip: !U || !M,
 		fetchPolicy: "cache-and-network"
-	}), X = Me?.vibecontrolsComponent ?? null, Z = me(() => (X?.catalogs ?? []).map((e) => {
+	}), Y = Be?.vibecontrolsComponent ?? null, X = ge(() => (Y?.catalogs ?? []).map((e) => {
 		let t = e.catalog || {};
 		return {
 			id: t.id,
@@ -72,34 +72,34 @@ function M() {
 			createdAt: t.createdAt,
 			updatedAt: t.updatedAt
 		};
-	}), [X?.catalogs]);
-	if (Te) return /* @__PURE__ */ E("div", {
+	}), [Y?.catalogs]);
+	if (k) return /* @__PURE__ */ b("div", {
 		className: "flex items-center justify-center min-h-[400px]",
-		children: /* @__PURE__ */ E("p", {
+		children: /* @__PURE__ */ b("p", {
 			className: "text-text-secondary",
 			children: "Loading permissions…"
 		})
 	});
-	if (!we(d.VIBE_READ)) return /* @__PURE__ */ E("div", {
+	if (!A) return /* @__PURE__ */ b("div", {
 		className: "flex items-center justify-center min-h-[400px]",
-		children: /* @__PURE__ */ D("div", {
+		children: /* @__PURE__ */ x("div", {
 			className: "text-center space-y-2",
-			children: [/* @__PURE__ */ E("h2", {
+			children: [/* @__PURE__ */ b("h2", {
 				className: "text-lg font-semibold text-foreground",
 				children: "Access Denied"
-			}), /* @__PURE__ */ E("p", {
+			}), /* @__PURE__ */ b("p", {
 				className: "text-sm text-text-secondary",
 				children: "You don't have permission to access this page."
 			})]
 		})
 	});
-	let Q = () => {
-		P("/components");
-	}, Le = (e) => {
-		P(`/catalogs/${e.id}`);
-	}, Re = async (e) => {
-		N && (await Ne({ variables: {
-			id: N,
+	let Z = () => {
+		D("/components");
+	}, Ge = (e) => {
+		D(`/catalogs/${e.id}`);
+	}, Q = async (e) => {
+		!E || !j || (await Ve({ variables: {
+			id: E,
 			input: {
 				name: e.name,
 				description: e.description || void 0,
@@ -115,20 +115,20 @@ function M() {
 				dependencies: e.dependencies ?? void 0,
 				sbomData: e.sbomData ?? void 0
 			}
-		} }), V(F("component.updatedSuccess", "Component updated successfully")), setTimeout(() => V(null), 3e3));
-	}, ze = async () => {
-		if (N) {
-			z(!0);
+		} }), B(P("component.updatedSuccess", "Component updated successfully")), setTimeout(() => B(null), 3e3));
+	}, Ke = async () => {
+		if (E) {
+			R(!0);
 			try {
-				await Pe({ variables: { id: N } }), R(!1), P("/components");
+				await He({ variables: { id: E } }), L(!1), D("/components");
 			} finally {
-				z(!1);
+				R(!1);
 			}
 		}
-	}, Be = async (e) => {
-		if (N) try {
-			let t = await Fe({ variables: {
-				componentId: N,
+	}, qe = async (e) => {
+		if (!(!E || !N)) try {
+			let t = await Ue({ variables: {
+				componentId: E,
 				input: {
 					name: e.name,
 					description: e.description || void 0,
@@ -139,186 +139,186 @@ function M() {
 					sourceRepositoryUrl: e.sourceRepositoryUrl
 				}
 			} });
-			if (t.error && o(t.error)) {
-				U(!1), H(!0);
+			if (t.error && i(t.error)) {
+				H(!1), V(!0);
 				return;
 			}
-			U(!1), V(F("component.publishedAsTemplate", "Published as template successfully")), setTimeout(() => V(null), 3e3);
+			H(!1), B(P("component.publishedAsTemplate", "Published as template successfully")), setTimeout(() => B(null), 3e3);
 		} catch (e) {
-			if (o(e)) {
-				U(!1), ne(), H(!0);
+			if (i(e)) {
+				H(!1), ie(), V(!0);
 				return;
 			}
 			throw e;
 		}
-	}, Ve = {
+	}, Je = {
 		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 : [], He = [
+	}, $ = Array.isArray(Y?.dependencies) ? Y.dependencies : [], Ye = [
 		{
 			id: "overview",
-			label: F("nav.overview", "Overview"),
-			icon: _
+			label: P("nav.overview", "Overview"),
+			icon: h
 		},
 		{
 			id: "catalogs",
-			label: F("component.catalogs", "Catalogs"),
-			icon: g,
-			badge: `${Z.length}`
+			label: P("component.catalogs", "Catalogs"),
+			icon: m,
+			badge: `${X.length}`
 		},
 		{
 			id: "scorecard",
-			label: F("component.scorecard", "Scorecard"),
-			icon: ge
+			label: P("component.scorecard", "Scorecard"),
+			icon: ve
 		},
 		{
 			id: "docs",
-			label: F("component.docs", "Docs"),
-			icon: _e
+			label: P("component.docs", "Docs"),
+			icon: ye
 		},
 		{
 			id: "dependencies",
-			label: F("component.dependencies", "Dependencies"),
-			icon: xe,
+			label: P("component.dependencies", "Dependencies"),
+			icon: Ce,
 			badge: $.length > 0 ? `${$.length}` : void 0
 		},
 		{
 			id: "template",
-			label: F("component.template", "Template"),
-			icon: v
+			label: P("component.template", "Template"),
+			icon: g
 		},
 		{
 			id: "settings",
-			label: F("common.settings", "Settings"),
-			icon: be
+			label: P("common.settings", "Settings"),
+			icon: Se
 		}
 	];
-	return K && !X ? /* @__PURE__ */ D(A, {
+	return G && !Y ? /* @__PURE__ */ x(w, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
-		children: [/* @__PURE__ */ D("button", {
+		children: [/* @__PURE__ */ x("button", {
 			type: "button",
-			onClick: Q,
+			onClick: Z,
 			className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
-			children: [/* @__PURE__ */ E(h, { className: "size-4" }), F("component.backToComponents", "Back to Components")]
-		}), /* @__PURE__ */ E(p, { variant: "detail" })]
-	}) : q && !X ? /* @__PURE__ */ D(A, {
+			children: [/* @__PURE__ */ b(p, { className: "size-4" }), P("component.backToComponents", "Back to Components")]
+		}), /* @__PURE__ */ b(u, { variant: "detail" })]
+	}) : K && !Y ? /* @__PURE__ */ x(w, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
-		children: [/* @__PURE__ */ D("button", {
+		children: [/* @__PURE__ */ x("button", {
 			type: "button",
-			onClick: Q,
+			onClick: Z,
 			className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
-			children: [/* @__PURE__ */ E(h, { className: "size-4" }), F("component.backToComponents", "Back to Components")]
-		}), /* @__PURE__ */ E(ae, {
-			title: F("component.failedLoad", "Failed to load component"),
-			message: q.message,
-			onRetry: () => J()
+			children: [/* @__PURE__ */ b(p, { className: "size-4" }), P("component.backToComponents", "Back to Components")]
+		}), /* @__PURE__ */ b(se, {
+			title: P("component.failedLoad", "Failed to load component"),
+			message: K.message,
+			onRetry: () => q()
 		})]
-	}) : X ? /* @__PURE__ */ D(A, {
+	}) : Y ? /* @__PURE__ */ x(w, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
 		children: [
-			B && /* @__PURE__ */ E("div", {
+			z && /* @__PURE__ */ b("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: B
+				children: z
 			}),
-			/* @__PURE__ */ D("button", {
+			/* @__PURE__ */ x("button", {
 				type: "button",
-				onClick: Q,
+				onClick: Z,
 				className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
-				children: [/* @__PURE__ */ E(h, { className: "size-4" }), F("component.backToComponents", "Back to Components")]
+				children: [/* @__PURE__ */ b(p, { className: "size-4" }), P("component.backToComponents", "Back to Components")]
 			}),
-			/* @__PURE__ */ E(ie, {
-				title: X.name,
-				description: X.description || F("component.noDescription", "No description"),
-				actions: /* @__PURE__ */ D("div", {
+			/* @__PURE__ */ b(oe, {
+				title: Y.name,
+				description: Y.description || P("component.noDescription", "No description"),
+				actions: /* @__PURE__ */ x("div", {
 					className: "flex items-center gap-2 flex-wrap",
 					children: [
-						/* @__PURE__ */ E(f, {
+						/* @__PURE__ */ b(l, {
 							entity: "component",
 							resource: {
-								id: X.id,
-								name: X.name
+								id: Y.id,
+								name: Y.name
 							},
-							label: F("component.share", "Share"),
+							label: P("component.share", "Share"),
 							variant: "button"
 						}),
-						/* @__PURE__ */ E("button", {
+						/* @__PURE__ */ b("button", {
 							type: "button",
-							onClick: () => J(),
-							disabled: K,
+							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: F("common.refresh", "Refresh"),
-							children: /* @__PURE__ */ E(ye, { className: `size-4 ${K ? "animate-spin" : ""}` })
+							title: P("common.refresh", "Refresh"),
+							children: /* @__PURE__ */ b(xe, { className: `size-4 ${G ? "animate-spin" : ""}` })
 						}),
-						/* @__PURE__ */ E("span", {
+						/* @__PURE__ */ b("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__ */ E("span", {
-							className: `inline-flex items-center px-2.5 py-1 text-xs font-medium rounded ${Ve[X.lifecycle] || "bg-bg-sunken text-text-secondary"}`,
-							children: X.lifecycle
+						/* @__PURE__ */ b("span", {
+							className: `inline-flex items-center px-2.5 py-1 text-xs font-medium rounded ${Je[Y.lifecycle] || "bg-bg-sunken text-text-secondary"}`,
+							children: Y.lifecycle
 						})
 					]
 				})
 			}),
-			/* @__PURE__ */ D(k, {
+			/* @__PURE__ */ x(C, {
 				stagger: .04,
 				className: "grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4",
 				children: [
-					/* @__PURE__ */ E(O, { children: /* @__PURE__ */ E(u, {
-						title: F("component.type", "Type"),
-						value: X.type,
-						icon: /* @__PURE__ */ E(_, { className: "size-4" })
+					/* @__PURE__ */ b(S, { children: /* @__PURE__ */ b(s, {
+						title: P("component.type", "Type"),
+						value: Y.type,
+						icon: /* @__PURE__ */ b(h, { className: "size-4" })
 					}) }),
-					/* @__PURE__ */ E(O, { children: /* @__PURE__ */ E(u, {
-						title: F("component.lifecycle", "Lifecycle"),
-						value: X.lifecycle,
-						icon: /* @__PURE__ */ E(ve, { className: "size-4" }),
-						variant: X.lifecycle === "ACTIVE" ? "success" : X.lifecycle === "DEPRECATED" || X.lifecycle === "END_OF_LIFE" ? "error" : "warning"
+					/* @__PURE__ */ b(S, { children: /* @__PURE__ */ b(s, {
+						title: P("component.lifecycle", "Lifecycle"),
+						value: Y.lifecycle,
+						icon: /* @__PURE__ */ b(be, { className: "size-4" }),
+						variant: Y.lifecycle === "ACTIVE" ? "success" : Y.lifecycle === "DEPRECATED" || Y.lifecycle === "END_OF_LIFE" ? "error" : "warning"
 					}) }),
-					/* @__PURE__ */ E(O, { children: /* @__PURE__ */ E(u, {
-						title: F("component.version", "Version"),
-						value: X.version || "-",
-						icon: /* @__PURE__ */ E(v, { className: "size-4" })
+					/* @__PURE__ */ b(S, { children: /* @__PURE__ */ b(s, {
+						title: P("component.version", "Version"),
+						value: Y.version || "-",
+						icon: /* @__PURE__ */ b(g, { className: "size-4" })
 					}) }),
-					/* @__PURE__ */ E(O, { children: /* @__PURE__ */ E(u, {
-						title: F("component.catalogs", "Catalogs"),
-						value: Z.length,
-						icon: /* @__PURE__ */ E(g, { className: "size-4" })
+					/* @__PURE__ */ b(S, { children: /* @__PURE__ */ b(s, {
+						title: P("component.catalogs", "Catalogs"),
+						value: X.length,
+						icon: /* @__PURE__ */ b(m, { className: "size-4" })
 					}) })
 				]
 			}),
-			/* @__PURE__ */ D(l, { children: [/* @__PURE__ */ D("div", {
+			/* @__PURE__ */ x(o, { children: [/* @__PURE__ */ x("div", {
 				className: "p-4 border-b border-border-default flex items-center gap-2",
-				children: [/* @__PURE__ */ E(Se, { className: "size-5" }), /* @__PURE__ */ E("h3", {
+				children: [/* @__PURE__ */ b(we, { className: "size-5" }), /* @__PURE__ */ b("h3", {
 					className: "font-semibold text-text-primary",
-					children: F("component.tags", "Tags")
+					children: P("component.tags", "Tags")
 				})]
-			}), /* @__PURE__ */ E("div", {
+			}), /* @__PURE__ */ b("div", {
 				className: "p-4",
-				children: /* @__PURE__ */ E(s, {
+				children: /* @__PURE__ */ b(ce, {
 					entityType: "VIBECONTROLS_COMPONENT",
-					entityId: X.id
+					entityId: Y.id
 				})
 			})] }),
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ b("div", {
 				className: "border-b border-border-default",
-				children: /* @__PURE__ */ E("nav", {
+				children: /* @__PURE__ */ b("nav", {
 					className: "flex gap-1 -mb-px overflow-x-auto pb-1",
-					"aria-label": F("component.tabsAriaLabel", "Component tabs"),
-					children: He.map((e) => {
-						let t = e.icon, n = I === e.id;
-						return /* @__PURE__ */ D("button", {
+					"aria-label": P("component.tabsAriaLabel", "Component tabs"),
+					children: Ye.map((e) => {
+						let t = e.icon, n = F === e.id;
+						return /* @__PURE__ */ x("button", {
 							type: "button",
-							onClick: () => Ee(e.id),
+							onClick: () => Pe(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__ */ E(t, { className: "size-4" }),
+								/* @__PURE__ */ b(t, { className: "size-4" }),
 								e.label,
-								e.badge && /* @__PURE__ */ E("span", {
+								e.badge && /* @__PURE__ */ b("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
 								})
@@ -327,10 +327,10 @@ function M() {
 					})
 				})
 			}),
-			/* @__PURE__ */ D(w, {
+			/* @__PURE__ */ x(ke, {
 				mode: "wait",
 				children: [
-					I === "overview" && /* @__PURE__ */ D(T.div, {
+					F === "overview" && /* @__PURE__ */ x(y.div, {
 						initial: {
 							opacity: 0,
 							y: 8
@@ -346,90 +346,90 @@ function M() {
 						transition: { duration: .2 },
 						className: "space-y-6",
 						children: [
-							X.description && /* @__PURE__ */ E(l, { children: /* @__PURE__ */ E("div", {
+							Y.description && /* @__PURE__ */ b(o, { children: /* @__PURE__ */ b("div", {
 								className: "p-4",
-								children: /* @__PURE__ */ E("p", {
+								children: /* @__PURE__ */ b("p", {
 									className: "text-text-primary",
-									children: X.description
+									children: Y.description
 								})
 							}) }),
-							/* @__PURE__ */ D(l, { children: [/* @__PURE__ */ E("div", {
+							/* @__PURE__ */ x(o, { children: [/* @__PURE__ */ b("div", {
 								className: "p-4 border-b border-border-default",
-								children: /* @__PURE__ */ E("h3", {
+								children: /* @__PURE__ */ b("h3", {
 									className: "font-semibold text-text-primary",
-									children: F("component.metadata", "Metadata")
+									children: P("component.metadata", "Metadata")
 								})
-							}), /* @__PURE__ */ E("div", {
+							}), /* @__PURE__ */ b("div", {
 								className: "p-4",
-								children: /* @__PURE__ */ D("div", {
+								children: /* @__PURE__ */ x("div", {
 									className: "grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm",
 									children: [
-										/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
+										/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
 											className: "text-text-secondary",
-											children: F("component.ownerNameLabel", "Owner")
-										}), /* @__PURE__ */ E("p", {
+											children: P("component.ownerNameLabel", "Owner")
+										}), /* @__PURE__ */ b("p", {
 											className: "font-medium text-text-primary",
-											children: X.ownerName || F("common.unset", "Unset")
+											children: Y.ownerName || P("common.unset", "Unset")
 										})] }),
-										/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
+										/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
 											className: "text-text-secondary",
-											children: F("component.languageLabel", "Language")
-										}), /* @__PURE__ */ E("p", {
+											children: P("component.languageLabel", "Language")
+										}), /* @__PURE__ */ b("p", {
 											className: "font-medium text-text-primary",
-											children: X.language || F("common.unset", "Unset")
+											children: Y.language || P("common.unset", "Unset")
 										})] }),
-										/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
+										/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
 											className: "text-text-secondary",
-											children: F("component.frameworkLabel", "Framework")
-										}), /* @__PURE__ */ E("p", {
+											children: P("component.frameworkLabel", "Framework")
+										}), /* @__PURE__ */ b("p", {
 											className: "font-medium text-text-primary",
-											children: X.framework || F("common.unset", "Unset")
+											children: Y.framework || P("common.unset", "Unset")
 										})] }),
-										/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
+										/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
 											className: "text-text-secondary",
-											children: F("component.versionLabel", "Version")
-										}), /* @__PURE__ */ E("p", {
+											children: P("component.versionLabel", "Version")
+										}), /* @__PURE__ */ b("p", {
 											className: "font-medium text-text-primary",
-											children: X.version || F("common.unset", "Unset")
+											children: Y.version || P("common.unset", "Unset")
 										})] }),
-										X.repositoryUrl && /* @__PURE__ */ D("div", {
+										Y.repositoryUrl && /* @__PURE__ */ x("div", {
 											className: "sm:col-span-2",
-											children: [/* @__PURE__ */ E("p", {
+											children: [/* @__PURE__ */ b("p", {
 												className: "text-text-secondary",
-												children: F("component.repository", "Repository")
-											}), /* @__PURE__ */ E("a", {
-												href: X.repositoryUrl,
+												children: P("component.repository", "Repository")
+											}), /* @__PURE__ */ b("a", {
+												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__ */ D("div", { children: [/* @__PURE__ */ E("p", {
+										/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
 											className: "text-text-secondary",
-											children: F("common.created", "Created")
-										}), /* @__PURE__ */ E("p", {
+											children: P("common.created", "Created")
+										}), /* @__PURE__ */ b("p", {
 											className: "font-medium text-text-primary",
-											children: new Date(X.createdAt).toLocaleDateString()
+											children: new Date(Y.createdAt).toLocaleDateString()
 										})] }),
-										/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
+										/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
 											className: "text-text-secondary",
-											children: F("common.updated", "Updated")
-										}), /* @__PURE__ */ E("p", {
+											children: P("common.updated", "Updated")
+										}), /* @__PURE__ */ b("p", {
 											className: "font-medium text-text-primary",
-											children: new Date(X.updatedAt).toLocaleDateString()
+											children: new Date(Y.updatedAt).toLocaleDateString()
 										})] })
 									]
 								})
 							})] }),
-							X.tags?.length > 0 && /* @__PURE__ */ E(l, { children: /* @__PURE__ */ D("div", {
+							Y.tags?.length > 0 && /* @__PURE__ */ b(o, { children: /* @__PURE__ */ x("div", {
 								className: "p-4",
-								children: [/* @__PURE__ */ E("h3", {
+								children: [/* @__PURE__ */ b("h3", {
 									className: "font-semibold text-text-primary mb-3",
-									children: F("component.tags", "Tags")
-								}), /* @__PURE__ */ E("div", {
+									children: P("component.tags", "Tags")
+								}), /* @__PURE__ */ b("div", {
 									className: "flex flex-wrap gap-2",
-									children: X.tags.map((e) => /* @__PURE__ */ E("span", {
+									children: Y.tags.map((e) => /* @__PURE__ */ b("span", {
 										className: "px-2.5 py-1 text-sm bg-bg-sunken text-text-secondary rounded-md",
 										children: e
 									}, e))
@@ -437,7 +437,7 @@ function M() {
 							}) })
 						]
 					}, "overview"),
-					I === "catalogs" && /* @__PURE__ */ D(T.div, {
+					F === "catalogs" && /* @__PURE__ */ x(y.div, {
 						initial: {
 							opacity: 0,
 							y: 8
@@ -452,41 +452,41 @@ function M() {
 						},
 						transition: { duration: .2 },
 						className: "space-y-4",
-						children: [/* @__PURE__ */ D("div", {
+						children: [/* @__PURE__ */ x("div", {
 							className: "flex items-center justify-between",
-							children: [/* @__PURE__ */ D("p", {
+							children: [/* @__PURE__ */ x("p", {
 								className: "text-sm text-text-secondary",
 								children: [
-									Z.length,
+									X.length,
 									" ",
-									F("component.catalogsContaining", "catalogs containing this component")
+									P("component.catalogsContaining", "catalogs containing this component")
 								]
-							}), /* @__PURE__ */ D("button", {
+							}), M && /* @__PURE__ */ x("button", {
 								type: "button",
-								onClick: () => G(!0),
+								onClick: () => W(!0),
 								className: "flex items-center gap-2 px-3 py-2 text-sm bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors",
-								children: [/* @__PURE__ */ E(y, { className: "size-4" }), F("component.addToCatalog", "Add to Catalog")]
+								children: [/* @__PURE__ */ b(_, { className: "size-4" }), P("component.addToCatalog", "Add to Catalog")]
 							})]
-						}), Z.length > 0 ? /* @__PURE__ */ E(k, {
+						}), X.length > 0 ? /* @__PURE__ */ b(C, {
 							stagger: .04,
 							className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
-							children: Z.map((e) => /* @__PURE__ */ E(O, { children: /* @__PURE__ */ E(de, {
+							children: X.map((e) => /* @__PURE__ */ b(S, { children: /* @__PURE__ */ b(pe, {
 								catalog: e,
-								onOpen: Le
+								onOpen: Ge
 							}) }, e.id))
-						}) : /* @__PURE__ */ E(c, {
-							icon: /* @__PURE__ */ E(g, { className: "size-8 text-text-secondary" }),
-							title: F("component.noCatalogs", "Not in any catalogs"),
-							description: F("component.noCatalogsDescription", "This component has not been added to any catalogs yet"),
-							action: /* @__PURE__ */ D("button", {
+						}) : /* @__PURE__ */ b(a, {
+							icon: /* @__PURE__ */ b(m, { className: "size-8 text-text-secondary" }),
+							title: P("component.noCatalogs", "Not in any catalogs"),
+							description: P("component.noCatalogsDescription", "This component has not been added to any catalogs yet"),
+							action: M ? /* @__PURE__ */ x("button", {
 								type: "button",
-								onClick: () => G(!0),
+								onClick: () => W(!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__ */ E(y, { className: "size-4" }), F("component.addToCatalog", "Add to Catalog")]
-							})
+								children: [/* @__PURE__ */ b(_, { className: "size-4" }), P("component.addToCatalog", "Add to Catalog")]
+							}) : void 0
 						})]
 					}, "catalogs"),
-					I === "scorecard" && /* @__PURE__ */ E(T.div, {
+					F === "scorecard" && /* @__PURE__ */ b(y.div, {
 						initial: {
 							opacity: 0,
 							y: 8
@@ -501,12 +501,12 @@ function M() {
 						},
 						transition: { duration: .2 },
 						className: "space-y-6",
-						children: /* @__PURE__ */ E(ce, {
+						children: /* @__PURE__ */ b(ue, {
 							ownerType: "COMPONENT",
-							ownerId: N || ""
+							ownerId: E || ""
 						})
 					}, "scorecard"),
-					I === "docs" && /* @__PURE__ */ E(T.div, {
+					F === "docs" && /* @__PURE__ */ b(y.div, {
 						initial: {
 							opacity: 0,
 							y: 8
@@ -521,12 +521,12 @@ function M() {
 						},
 						transition: { duration: .2 },
 						className: "space-y-6",
-						children: /* @__PURE__ */ E(se, {
+						children: /* @__PURE__ */ b(le, {
 							ownerType: "COMPONENT",
-							ownerId: N || ""
+							ownerId: E || ""
 						})
 					}, "docs"),
-					I === "dependencies" && /* @__PURE__ */ E(T.div, {
+					F === "dependencies" && /* @__PURE__ */ b(y.div, {
 						initial: {
 							opacity: 0,
 							y: 8
@@ -540,13 +540,13 @@ function M() {
 							y: -8
 						},
 						transition: { duration: .2 },
-						children: /* @__PURE__ */ E(ue, {
-							componentName: X.name,
-							componentType: X.type,
+						children: /* @__PURE__ */ b(fe, {
+							componentName: Y.name,
+							componentType: Y.type,
 							dependencies: $
 						})
 					}, "dependencies"),
-					I === "template" && /* @__PURE__ */ E(T.div, {
+					F === "template" && /* @__PURE__ */ b(y.div, {
 						initial: {
 							opacity: 0,
 							y: 8
@@ -561,44 +561,44 @@ function M() {
 						},
 						transition: { duration: .2 },
 						className: "space-y-4",
-						children: (X.templates?.length ?? 0) === 0 ? /* @__PURE__ */ E(l, {
+						children: (Y.templates?.length ?? 0) === 0 ? /* @__PURE__ */ b(o, {
 							padding: "lg",
-							children: /* @__PURE__ */ D("div", {
+							children: /* @__PURE__ */ x("div", {
 								className: "flex flex-col items-center justify-center py-12 text-center",
 								children: [
-									/* @__PURE__ */ E(v, { className: "size-12 text-text-muted mb-4" }),
-									/* @__PURE__ */ E("h3", {
+									/* @__PURE__ */ b(g, { className: "size-12 text-text-muted mb-4" }),
+									/* @__PURE__ */ b("h3", {
 										className: "text-lg font-semibold text-text-primary mb-2",
-										children: F("component.template", "Publish as Template")
+										children: P("component.template", "Publish as Template")
 									}),
-									/* @__PURE__ */ E("p", {
+									/* @__PURE__ */ b("p", {
 										className: "text-sm text-text-secondary max-w-md mb-6",
-										children: F("component.publishDescription", "Turn this component into a reusable template. Others can clone it and fill in configuration variables to create new components.")
+										children: P("component.publishDescription", "Turn this component into a reusable template. Others can clone it and fill in configuration variables to create new components.")
 									}),
-									/* @__PURE__ */ D("button", {
+									N && /* @__PURE__ */ x("button", {
 										type: "button",
-										onClick: () => U(!0),
+										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__ */ E(b, { className: "size-4" }), F("component.publishAsTemplate", "Publish as Template")]
+										children: [/* @__PURE__ */ b(v, { className: "size-4" }), P("component.publishAsTemplate", "Publish as Template")]
 									})
 								]
 							})
-						}) : /* @__PURE__ */ D(l, { children: [/* @__PURE__ */ E("div", {
+						}) : /* @__PURE__ */ x(o, { children: [/* @__PURE__ */ b("div", {
 							className: "p-4 border-b border-border-default",
-							children: /* @__PURE__ */ E("h3", {
+							children: /* @__PURE__ */ b("h3", {
 								className: "font-semibold text-text-primary",
 								children: "Published Templates"
 							})
-						}), /* @__PURE__ */ D("div", {
+						}), /* @__PURE__ */ x("div", {
 							className: "p-4 space-y-3",
-							children: [X.templates.map((e) => /* @__PURE__ */ D("div", {
+							children: [Y.templates.map((e) => /* @__PURE__ */ x("div", {
 								className: "flex items-center justify-between p-3 bg-bg-sunken rounded-lg",
-								children: [/* @__PURE__ */ D("div", {
+								children: [/* @__PURE__ */ x("div", {
 									className: "flex items-center gap-3",
-									children: [/* @__PURE__ */ E(v, { className: "size-5 text-action-primary-bg" }), /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
+									children: [/* @__PURE__ */ b(g, { className: "size-5 text-action-primary-bg" }), /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
 										className: "text-sm font-medium text-text-primary",
 										children: e.name
-									}), /* @__PURE__ */ D("p", {
+									}), /* @__PURE__ */ x("p", {
 										className: "text-xs text-text-muted",
 										children: [
 											e.category,
@@ -606,21 +606,21 @@ function M() {
 											e.version || "—"
 										]
 									})] })]
-								}), /* @__PURE__ */ E("button", {
+								}), /* @__PURE__ */ b("button", {
 									type: "button",
-									onClick: () => P(`/templates/${e.id}`),
+									onClick: () => D(`/templates/${e.id}`),
 									className: "text-xs text-action-primary-bg hover:underline",
 									children: "View Template →"
 								})]
-							}, e.id)), /* @__PURE__ */ D("button", {
+							}, e.id)), N && /* @__PURE__ */ x("button", {
 								type: "button",
-								onClick: () => U(!0),
+								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__ */ E(b, { className: "size-4" }), "Update template"]
+								children: [/* @__PURE__ */ b(v, { className: "size-4" }), "Update template"]
 							})]
 						})] })
 					}, "template"),
-					I === "settings" && /* @__PURE__ */ E(T.div, {
+					F === "settings" && /* @__PURE__ */ b(y.div, {
 						initial: {
 							opacity: 0,
 							y: 8
@@ -634,39 +634,39 @@ function M() {
 							y: -8
 						},
 						transition: { duration: .2 },
-						children: /* @__PURE__ */ D("div", {
+						children: /* @__PURE__ */ x("div", {
 							className: "space-y-4",
-							children: [/* @__PURE__ */ D(l, {
+							children: [j && /* @__PURE__ */ x(o, {
 								padding: "lg",
-								children: [/* @__PURE__ */ E("h3", {
+								children: [/* @__PURE__ */ b("h3", {
 									className: "font-semibold text-text-primary mb-4",
-									children: F("component.editComponent", "Edit Component")
-								}), /* @__PURE__ */ E("button", {
+									children: P("component.editComponent", "Edit Component")
+								}), /* @__PURE__ */ b("button", {
 									type: "button",
-									onClick: () => L(!0),
+									onClick: () => I(!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: F("component.editDetails", "Edit Details")
+									children: P("component.editDetails", "Edit Details")
 								})]
-							}), /* @__PURE__ */ D(l, {
+							}), je && /* @__PURE__ */ x(o, {
 								padding: "lg",
 								children: [
-									/* @__PURE__ */ E("h3", {
+									/* @__PURE__ */ b("h3", {
 										className: "font-semibold text-status-error-text mb-2",
-										children: F("component.dangerZone", "Danger Zone")
+										children: P("component.dangerZone", "Danger Zone")
 									}),
-									/* @__PURE__ */ E("p", {
+									/* @__PURE__ */ b("p", {
 										className: "text-sm text-text-secondary mb-4",
-										children: F("component.deleteWarning", "Deleting this component will remove it from all catalogs and break any templates derived from it. This cannot be undone.")
+										children: P("component.deleteWarning", "Deleting this component will remove it from all catalogs and break any templates derived from it. This cannot be undone.")
 									}),
-									/* @__PURE__ */ D("button", {
+									/* @__PURE__ */ x("button", {
 										type: "button",
 										"data-testid": "component-delete-button",
-										onClick: () => R(!0),
+										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__ */ E(Ce, {
+										children: [/* @__PURE__ */ b(Te, {
 											className: "size-4",
 											"aria-hidden": "true"
-										}), F("component.deleteComponent", "Delete Component")]
+										}), P("component.deleteComponent", "Delete Component")]
 									})
 								]
 							})]
@@ -674,56 +674,56 @@ function M() {
 					}, "settings")
 				]
 			}),
-			/* @__PURE__ */ E(le, {
-				isOpen: De,
-				onClose: () => L(!1),
-				onSubmit: Re,
+			j && /* @__PURE__ */ b(de, {
+				isOpen: Fe,
+				onClose: () => I(!1),
+				onSubmit: Q,
 				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: F("component.editComponent", "Edit Component")
+				title: P("component.editComponent", "Edit Component")
 			}),
-			/* @__PURE__ */ E(a, {
-				isOpen: Oe,
-				onClose: () => R(!1),
-				onConfirm: ze,
-				title: F("component.deleteComponent", "Delete Component"),
-				message: F("component.deleteConfirmMessage", `Are you sure you want to delete "${X.name}"? This action cannot be undone.`),
-				confirmLabel: F("common.delete", "Delete"),
+			/* @__PURE__ */ b(re, {
+				isOpen: Ie,
+				onClose: () => L(!1),
+				onConfirm: Ke,
+				title: P("component.deleteComponent", "Delete Component"),
+				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: ke
+				isLoading: Le
 			}),
-			/* @__PURE__ */ E(te, {
-				isOpen: Ae,
-				onClose: () => H(!1),
+			/* @__PURE__ */ b(r, {
+				isOpen: Re,
+				onClose: () => V(!1),
 				onConfirm: () => {
-					H(!1), P("/billing/plans");
+					V(!1), D("/billing/plans");
 				},
 				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."
 			}),
-			je && /* @__PURE__ */ E(fe, {
-				componentName: X.name,
-				componentRepositoryUrl: X.repositoryUrl,
-				onClose: () => U(!1),
-				onSubmit: Be
+			ze && N && /* @__PURE__ */ b(me, {
+				componentName: Y.name,
+				componentRepositoryUrl: Y.repositoryUrl,
+				onClose: () => H(!1),
+				onSubmit: qe
 			}),
-			W && /* @__PURE__ */ E("div", {
+			U && M && /* @__PURE__ */ b("div", {
 				className: "fixed inset-0 flex items-center justify-center z-50 p-4",
 				style: { backgroundColor: "rgba(0,0,0,0.55)" },
-				children: /* @__PURE__ */ D(T.div, {
+				children: /* @__PURE__ */ x(y.div, {
 					initial: {
 						opacity: 0,
 						scale: .95
@@ -733,54 +733,54 @@ function M() {
 						scale: 1
 					},
 					className: "bg-bg-surface rounded-lg w-full max-w-md shadow-xl",
-					children: [/* @__PURE__ */ D("div", {
+					children: [/* @__PURE__ */ x("div", {
 						className: "flex items-center justify-between px-4 py-3 border-b border-border-default",
-						children: [/* @__PURE__ */ E("h2", {
+						children: [/* @__PURE__ */ b("h2", {
 							className: "text-base font-semibold text-text-primary",
-							children: F("component.addToCatalog", "Add to Catalog")
-						}), /* @__PURE__ */ E("button", {
+							children: P("component.addToCatalog", "Add to Catalog")
+						}), /* @__PURE__ */ b("button", {
 							type: "button",
-							onClick: () => G(!1),
+							onClick: () => W(!1),
 							className: "p-1.5 text-text-secondary hover:text-text-primary rounded-md hover:bg-bg-sunken transition-colors",
-							children: /* @__PURE__ */ E(x, { className: "size-4" })
+							children: /* @__PURE__ */ b(Ee, { className: "size-4" })
 						})]
-					}), /* @__PURE__ */ E("div", {
+					}), /* @__PURE__ */ b("div", {
 						className: "p-2 max-h-80 overflow-y-auto",
-						children: (Y?.vibecontrolsCatalogs?.items ?? []).length === 0 ? /* @__PURE__ */ D("p", {
+						children: (J?.vibecontrolsCatalogs?.items ?? []).length === 0 ? /* @__PURE__ */ x("p", {
 							className: "text-sm text-text-secondary text-center py-6",
 							children: [
 								"No catalogs found.",
 								" ",
-								/* @__PURE__ */ E("button", {
+								/* @__PURE__ */ b("button", {
 									type: "button",
 									onClick: () => {
-										G(!1), P("/catalogs");
+										W(!1), D("/catalogs");
 									},
 									className: "text-action-primary-bg hover:underline",
 									children: "Create one first."
 								})
 							]
-						}) : (Y?.vibecontrolsCatalogs?.items ?? []).map((e) => {
-							let t = Z.some((t) => t.id === e.id);
-							return /* @__PURE__ */ D("button", {
+						}) : (J?.vibecontrolsCatalogs?.items ?? []).map((e) => {
+							let t = X.some((t) => t.id === e.id);
+							return /* @__PURE__ */ x("button", {
 								type: "button",
 								disabled: t,
 								onClick: async () => {
-									if (!(!N || t)) try {
-										await Ie({ variables: {
+									if (!(!E || t)) try {
+										await We({ variables: {
 											catalogId: e.id,
-											componentId: N
-										} }), G(!1), V(`Added to ${e.name}`), setTimeout(() => V(null), 3e3);
+											componentId: E
+										} }), W(!1), B(`Added to ${e.name}`), setTimeout(() => B(null), 3e3);
 									} catch {}
 								},
 								className: `flex items-center justify-between w-full px-3 py-2.5 text-left rounded-md transition-colors ${t ? "opacity-40 cursor-not-allowed" : "hover:bg-bg-sunken cursor-pointer"}`,
-								children: [/* @__PURE__ */ D("div", {
+								children: [/* @__PURE__ */ x("div", {
 									className: "flex items-center gap-2",
-									children: [/* @__PURE__ */ E(g, { className: "size-4 text-action-primary-bg flex-shrink-0" }), /* @__PURE__ */ E("span", {
+									children: [/* @__PURE__ */ b(m, { className: "size-4 text-action-primary-bg flex-shrink-0" }), /* @__PURE__ */ b("span", {
 										className: "text-sm text-text-primary",
 										children: e.name
 									})]
-								}), t && /* @__PURE__ */ E("span", {
+								}), t && /* @__PURE__ */ b("span", {
 									className: "text-xs text-text-muted",
 									children: "already added"
 								})]
@@ -790,27 +790,27 @@ function M() {
 				})
 			})
 		]
-	}) : /* @__PURE__ */ D(A, {
+	}) : /* @__PURE__ */ x(w, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
-		children: [/* @__PURE__ */ D("button", {
+		children: [/* @__PURE__ */ x("button", {
 			type: "button",
-			onClick: Q,
+			onClick: Z,
 			className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
-			children: [/* @__PURE__ */ E(h, { className: "size-4" }), F("component.backToComponents", "Back to Components")]
-		}), /* @__PURE__ */ E(c, {
-			icon: /* @__PURE__ */ E(_, { className: "size-8 text-text-secondary" }),
-			title: F("component.notFound", "Component not found"),
-			description: `No component with ID "${N}" exists`,
-			action: /* @__PURE__ */ E("button", {
+			children: [/* @__PURE__ */ b(p, { className: "size-4" }), P("component.backToComponents", "Back to Components")]
+		}), /* @__PURE__ */ b(a, {
+			icon: /* @__PURE__ */ b(h, { className: "size-8 text-text-secondary" }),
+			title: P("component.notFound", "Component not found"),
+			description: `No component with ID "${E}" exists`,
+			action: /* @__PURE__ */ b("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: F("component.backToComponents", "Back to Components")
+				children: P("component.backToComponents", "Back to Components")
 			})
 		})]
 	});
 }
 //#endregion
-export { M as ComponentDetailPage };
+export { T as ComponentDetailPage };
 
 //# sourceMappingURL=ComponentDetailPage.js.map