@burdenoff/microfe-vibecontrols 2026.511.1

package/dist/pages/ComponentDetailPage.js

@@ -0,0 +1,557 @@
+import { useGetComponentQuery as e, usePublishComponentAsTemplateMutation as t, useUpdateComponentMutation as n } from "../generated/wspace-operations.js";
+import { useVibeNavigate as ee } from "../providers/VibeControlsProvider.js";
+import { PageHeader as te } from "../components/shared/PageHeader.js";
+import { LoadingState as r } from "../components/shared/LoadingState.js";
+import { ErrorState as i } from "../components/shared/ErrorState.js";
+import { QuotaExhaustedDialog as a } from "../components/shared/QuotaExhaustedDialog.js";
+import { isQuotaExhaustedError as o } from "../utils/quotaUtils.js";
+import { EmptyState as s } from "../components/shared/EmptyState.js";
+import { Card as c } from "../components/shared/Card.js";
+import { StatCard as l } from "../components/shared/StatCard.js";
+import "../components/shared/index.js";
+import { VIBE_PERMISSIONS as u } from "../constants/permissions.js";
+import { useQueryBackedTab as d } from "../hooks/useQueryBackedTab.js";
+import { ScorecardPanel as f } from "../components/scorecard/ScorecardPanel.js";
+import "../components/scorecard/index.js";
+import { DocsTabPanel as p } from "../components/docs/DocsTabPanel.js";
+import "../components/docs/index.js";
+import { ComponentForm as m } from "../components/idp-components/ComponentForm.js";
+import "../components/idp-components/index.js";
+import { CatalogCard as h } from "../components/catalog/CatalogCard.js";
+import "../components/catalog/index.js";
+import { useCallback as g, useMemo as _, useState as v } from "react";
+import { useI18n as y } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { ArrowLeft as b, BarChart3 as x, BookOpen as S, Box as C, FileCode as w, FileText as ne, Layers as re, RefreshCw as ie, Settings as ae, Upload as oe } from "lucide-react";
+import { useParams as se } from "react-router-dom";
+import { usePermissions as T } from "@burdenoff/fe-libs/shared/providers/shell";
+import { AnimatePresence as E, motion as D } from "framer-motion";
+import { jsx as O, jsxs as k } from "react/jsx-runtime";
+import { MotionItem as A, MotionList as j, MotionPage as M } from "@burdenoff/fe-libs/shared/motion";
+//#region src/pages/ComponentDetailPage.tsx
+var N = [
+	"overview",
+	"catalogs",
+	"docs",
+	"scorecard",
+	"template",
+	"settings"
+];
+function P() {
+	let { t: P } = y(), { id: F } = se(), I = ee(), { hasPermission: L, isLoading: R } = T(), z = g((e, t) => {
+		let n = P(e);
+		return n === e ? t : n;
+	}, [P]), [B, ce] = d(N, "overview"), [V, H] = v(!1), [U, W] = v(null), [G, K] = v(!1), { data: le, loading: q, error: J, refetch: Y } = e({
+		variables: { id: F || "" },
+		skip: !F,
+		fetchPolicy: "cache-and-network"
+	}), [X] = n({ refetchQueries: ["GetComponent"] }), [ue] = t({ refetchQueries: ["GetComponent"] }), Z = le?.vibecontrolsComponent ?? null, Q = _(() => (Z?.catalogs ?? []).map((e) => {
+		let t = e.catalog || {};
+		return {
+			id: t.id,
+			name: t.name,
+			description: t.description || null,
+			visibility: t.visibility,
+			componentCount: t.componentCount || 0,
+			vibeCount: t.vibeCount || 0,
+			tags: t.tags || [],
+			createdAt: t.createdAt,
+			updatedAt: t.updatedAt
+		};
+	}), [Z?.catalogs]);
+	if (R) return /* @__PURE__ */ O("div", {
+		className: "flex items-center justify-center min-h-[400px]",
+		children: /* @__PURE__ */ O("p", {
+			className: "text-text-secondary",
+			children: "Loading permissions..."
+		})
+	});
+	if (!L(u.VIBE_READ)) return /* @__PURE__ */ O("div", {
+		className: "flex items-center justify-center min-h-[400px]",
+		children: /* @__PURE__ */ k("div", {
+			className: "text-center space-y-2",
+			children: [/* @__PURE__ */ O("h2", {
+				className: "text-lg font-semibold text-foreground",
+				children: "Access Denied"
+			}), /* @__PURE__ */ O("p", {
+				className: "text-sm text-text-secondary",
+				children: "You don't have permission to access this page."
+			})]
+		})
+	});
+	let $ = () => {
+		I("/components");
+	}, de = (e) => {
+		I(`/catalogs/${e.id}`);
+	}, fe = async (e) => {
+		F && (await X({ variables: {
+			id: F,
+			input: {
+				name: e.name,
+				description: e.description || void 0,
+				type: e.type,
+				lifecycle: e.lifecycle,
+				language: e.language || void 0,
+				framework: e.framework || void 0,
+				version: e.version || void 0,
+				ownerName: e.owner || void 0,
+				tags: e.tags.length > 0 ? e.tags : void 0
+			}
+		} }), W(z("component.updatedSuccess", "Component updated successfully")), setTimeout(() => W(null), 3e3));
+	}, pe = async () => {
+		if (F) try {
+			await ue({ variables: {
+				componentId: F,
+				input: { name: Z?.name || "Template" }
+			} }), W(z("component.publishedAsTemplate", "Published as template successfully")), setTimeout(() => W(null), 3e3);
+		} catch (e) {
+			if (o(e)) {
+				K(!0);
+				return;
+			}
+			W(e instanceof Error ? e.message : z("component.failedPublish", "Failed to publish")), setTimeout(() => W(null), 3e3);
+		}
+	}, me = {
+		EXPERIMENTAL: "bg-status-warning-bg text-status-warning-text",
+		PRODUCTION: "bg-status-success-bg text-status-success-text",
+		DEPRECATED: "bg-status-error-bg text-status-error-text"
+	}, he = [
+		{
+			id: "overview",
+			label: z("nav.overview", "Overview"),
+			icon: C
+		},
+		{
+			id: "catalogs",
+			label: z("component.catalogs", "Catalogs"),
+			icon: S,
+			badge: `${Q.length}`
+		},
+		{
+			id: "docs",
+			label: z("component.docs", "Docs"),
+			icon: ne
+		},
+		{
+			id: "scorecard",
+			label: z("component.scorecard", "Scorecard"),
+			icon: x
+		},
+		{
+			id: "template",
+			label: z("component.template", "Template"),
+			icon: w
+		},
+		{
+			id: "settings",
+			label: z("common.settings", "Settings"),
+			icon: ae
+		}
+	];
+	return q && !Z ? /* @__PURE__ */ k(M, {
+		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
+		children: [/* @__PURE__ */ k("button", {
+			onClick: $,
+			className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
+			children: [/* @__PURE__ */ O(b, { className: "w-4 h-4" }), z("component.backToComponents", "Back to Components")]
+		}), /* @__PURE__ */ O(r, { message: z("component.loadingDetails", "Loading component details...") })]
+	}) : J && !Z ? /* @__PURE__ */ k(M, {
+		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
+		children: [/* @__PURE__ */ k("button", {
+			onClick: $,
+			className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
+			children: [/* @__PURE__ */ O(b, { className: "w-4 h-4" }), z("component.backToComponents", "Back to Components")]
+		}), /* @__PURE__ */ O(i, {
+			title: z("component.failedLoad", "Failed to load component"),
+			message: J.message,
+			onRetry: () => Y()
+		})]
+	}) : Z ? /* @__PURE__ */ k(M, {
+		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
+		children: [
+			U && /* @__PURE__ */ O("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: U
+			}),
+			/* @__PURE__ */ k("button", {
+				onClick: $,
+				className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
+				children: [/* @__PURE__ */ O(b, { className: "w-4 h-4" }), z("component.backToComponents", "Back to Components")]
+			}),
+			/* @__PURE__ */ O(te, {
+				title: Z.name,
+				description: Z.description || z("component.noDescription", "No description"),
+				actions: /* @__PURE__ */ k("div", {
+					className: "flex items-center gap-2 flex-wrap",
+					children: [
+						/* @__PURE__ */ O("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: z("common.refresh", "Refresh"),
+							children: /* @__PURE__ */ O(ie, { className: `w-4 h-4 ${q ? "animate-spin" : ""}` })
+						}),
+						/* @__PURE__ */ O("span", {
+							className: "inline-flex items-center px-2.5 py-1 text-xs font-medium bg-bg-sunken text-text-secondary rounded",
+							children: Z.type
+						}),
+						/* @__PURE__ */ O("span", {
+							className: `inline-flex items-center px-2.5 py-1 text-xs font-medium rounded ${me[Z.lifecycle] || "bg-bg-sunken text-text-secondary"}`,
+							children: Z.lifecycle
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ k(j, {
+				stagger: .04,
+				className: "grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4",
+				children: [
+					/* @__PURE__ */ O(A, { children: /* @__PURE__ */ O(l, {
+						title: z("component.type", "Type"),
+						value: Z.type,
+						icon: /* @__PURE__ */ O(C, { className: "w-4 h-4" })
+					}) }),
+					/* @__PURE__ */ O(A, { children: /* @__PURE__ */ O(l, {
+						title: z("component.lifecycle", "Lifecycle"),
+						value: Z.lifecycle,
+						icon: /* @__PURE__ */ O(re, { className: "w-4 h-4" }),
+						variant: Z.lifecycle === "PRODUCTION" ? "success" : Z.lifecycle === "DEPRECATED" ? "error" : "warning"
+					}) }),
+					/* @__PURE__ */ O(A, { children: /* @__PURE__ */ O(l, {
+						title: z("component.version", "Version"),
+						value: Z.version || "-",
+						icon: /* @__PURE__ */ O(w, { className: "w-4 h-4" })
+					}) }),
+					/* @__PURE__ */ O(A, { children: /* @__PURE__ */ O(l, {
+						title: z("component.catalogs", "Catalogs"),
+						value: Q.length,
+						icon: /* @__PURE__ */ O(S, { className: "w-4 h-4" })
+					}) })
+				]
+			}),
+			/* @__PURE__ */ O("div", {
+				className: "border-b border-border-default",
+				children: /* @__PURE__ */ O("nav", {
+					className: "flex gap-1 -mb-px overflow-x-auto pb-1",
+					"aria-label": z("component.tabsAriaLabel", "Component tabs"),
+					children: he.map((e) => {
+						let t = e.icon, n = B === e.id;
+						return /* @__PURE__ */ k("button", {
+							onClick: () => ce(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__ */ O(t, { className: "w-4 h-4" }),
+								e.label,
+								e.badge && /* @__PURE__ */ O("span", {
+									className: `hidden rounded-full px-1.5 py-0.5 text-[10px] sm:inline-flex sm:text-xs ${n ? "bg-action-primary-bg/10 text-action-primary-bg" : "bg-bg-sunken text-text-muted"}`,
+									children: e.badge
+								})
+							]
+						}, e.id);
+					})
+				})
+			}),
+			/* @__PURE__ */ k(E, {
+				mode: "wait",
+				children: [
+					B === "overview" && /* @__PURE__ */ k(D.div, {
+						initial: {
+							opacity: 0,
+							y: 8
+						},
+						animate: {
+							opacity: 1,
+							y: 0
+						},
+						exit: {
+							opacity: 0,
+							y: -8
+						},
+						transition: { duration: .2 },
+						className: "space-y-6",
+						children: [
+							Z.description && /* @__PURE__ */ O(c, { children: /* @__PURE__ */ O("div", {
+								className: "p-4",
+								children: /* @__PURE__ */ O("p", {
+									className: "text-text-primary",
+									children: Z.description
+								})
+							}) }),
+							/* @__PURE__ */ k(c, { children: [/* @__PURE__ */ O("div", {
+								className: "p-4 border-b border-border-default",
+								children: /* @__PURE__ */ O("h3", {
+									className: "font-semibold text-text-primary",
+									children: z("component.metadata", "Metadata")
+								})
+							}), /* @__PURE__ */ O("div", {
+								className: "p-4",
+								children: /* @__PURE__ */ k("div", {
+									className: "grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm",
+									children: [
+										/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+											className: "text-text-secondary",
+											children: z("component.ownerNameLabel", "Owner")
+										}), /* @__PURE__ */ O("p", {
+											className: "font-medium text-text-primary",
+											children: Z.ownerName || z("common.unset", "Unset")
+										})] }),
+										/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+											className: "text-text-secondary",
+											children: z("component.languageLabel", "Language")
+										}), /* @__PURE__ */ O("p", {
+											className: "font-medium text-text-primary",
+											children: Z.language || z("common.unset", "Unset")
+										})] }),
+										/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+											className: "text-text-secondary",
+											children: z("component.frameworkLabel", "Framework")
+										}), /* @__PURE__ */ O("p", {
+											className: "font-medium text-text-primary",
+											children: Z.framework || z("common.unset", "Unset")
+										})] }),
+										/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+											className: "text-text-secondary",
+											children: z("component.versionLabel", "Version")
+										}), /* @__PURE__ */ O("p", {
+											className: "font-medium text-text-primary",
+											children: Z.version || z("common.unset", "Unset")
+										})] }),
+										Z.repositoryUrl && /* @__PURE__ */ k("div", {
+											className: "sm:col-span-2",
+											children: [/* @__PURE__ */ O("p", {
+												className: "text-text-secondary",
+												children: z("component.repository", "Repository")
+											}), /* @__PURE__ */ O("a", {
+												href: Z.repositoryUrl,
+												target: "_blank",
+												rel: "noopener noreferrer",
+												className: "font-medium text-action-primary-bg hover:underline break-all",
+												children: Z.repositoryUrl
+											})]
+										}),
+										/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+											className: "text-text-secondary",
+											children: z("common.created", "Created")
+										}), /* @__PURE__ */ O("p", {
+											className: "font-medium text-text-primary",
+											children: new Date(Z.createdAt).toLocaleDateString()
+										})] }),
+										/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+											className: "text-text-secondary",
+											children: z("common.updated", "Updated")
+										}), /* @__PURE__ */ O("p", {
+											className: "font-medium text-text-primary",
+											children: new Date(Z.updatedAt).toLocaleDateString()
+										})] })
+									]
+								})
+							})] }),
+							Z.tags?.length > 0 && /* @__PURE__ */ O(c, { children: /* @__PURE__ */ k("div", {
+								className: "p-4",
+								children: [/* @__PURE__ */ O("h3", {
+									className: "font-semibold text-text-primary mb-3",
+									children: z("component.tags", "Tags")
+								}), /* @__PURE__ */ O("div", {
+									className: "flex flex-wrap gap-2",
+									children: Z.tags.map((e) => /* @__PURE__ */ O("span", {
+										className: "px-2.5 py-1 text-sm bg-bg-sunken text-text-secondary rounded-md",
+										children: e
+									}, e))
+								})]
+							}) })
+						]
+					}, "overview"),
+					B === "catalogs" && /* @__PURE__ */ k(D.div, {
+						initial: {
+							opacity: 0,
+							y: 8
+						},
+						animate: {
+							opacity: 1,
+							y: 0
+						},
+						exit: {
+							opacity: 0,
+							y: -8
+						},
+						transition: { duration: .2 },
+						className: "space-y-4",
+						children: [/* @__PURE__ */ k("p", {
+							className: "text-sm text-text-secondary",
+							children: [
+								Q.length,
+								" ",
+								z("component.catalogsContaining", "catalogs containing this component")
+							]
+						}), Q.length > 0 ? /* @__PURE__ */ O(j, {
+							stagger: .04,
+							className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
+							children: Q.map((e) => /* @__PURE__ */ O(A, { children: /* @__PURE__ */ O(h, {
+								catalog: e,
+								onOpen: de
+							}) }, e.id))
+						}) : /* @__PURE__ */ O(s, {
+							icon: /* @__PURE__ */ O(S, { className: "w-8 h-8 text-text-secondary" }),
+							title: z("component.noCatalogs", "Not in any catalogs"),
+							description: z("component.noCatalogsDescription", "This component has not been added to any catalogs yet")
+						})]
+					}, "catalogs"),
+					B === "docs" && /* @__PURE__ */ O(D.div, {
+						initial: {
+							opacity: 0,
+							y: 8
+						},
+						animate: {
+							opacity: 1,
+							y: 0
+						},
+						exit: {
+							opacity: 0,
+							y: -8
+						},
+						transition: { duration: .2 },
+						className: "space-y-6",
+						children: /* @__PURE__ */ O(p, {
+							ownerType: "COMPONENT",
+							ownerId: F || ""
+						})
+					}, "docs"),
+					B === "scorecard" && /* @__PURE__ */ O(D.div, {
+						initial: {
+							opacity: 0,
+							y: 8
+						},
+						animate: {
+							opacity: 1,
+							y: 0
+						},
+						exit: {
+							opacity: 0,
+							y: -8
+						},
+						transition: { duration: .2 },
+						children: /* @__PURE__ */ O(f, {
+							ownerType: "COMPONENT",
+							ownerId: F || ""
+						})
+					}, "scorecard"),
+					B === "template" && /* @__PURE__ */ O(D.div, {
+						initial: {
+							opacity: 0,
+							y: 8
+						},
+						animate: {
+							opacity: 1,
+							y: 0
+						},
+						exit: {
+							opacity: 0,
+							y: -8
+						},
+						transition: { duration: .2 },
+						children: /* @__PURE__ */ O(c, {
+							padding: "lg",
+							children: /* @__PURE__ */ k("div", {
+								className: "flex flex-col items-center justify-center py-12 text-center",
+								children: [
+									/* @__PURE__ */ O(w, { className: "w-12 h-12 text-text-muted mb-4" }),
+									/* @__PURE__ */ O("h3", {
+										className: "text-lg font-semibold text-text-primary mb-2",
+										children: z("component.template", "Template")
+									}),
+									/* @__PURE__ */ O("p", {
+										className: "text-sm text-text-secondary max-w-md mb-4",
+										children: (Z.templates?.length ?? 0) > 0 ? z("component.alreadyPublished", "This component has been published as a template.") : z("component.publishDescription", "Publish this component as a reusable template that others can clone.")
+									}),
+									(Z.templates?.length ?? 0) === 0 && /* @__PURE__ */ k("button", {
+										onClick: pe,
+										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__ */ O(oe, { className: "w-4 h-4" }), z("component.publishAsTemplate", "Publish as Template")]
+									}),
+									(Z.templates?.length ?? 0) > 0 && /* @__PURE__ */ O("button", {
+										onClick: () => I(`/templates/${Z.templates[0].id}`),
+										className: "flex items-center gap-2 px-4 py-2 bg-bg-sunken text-text-primary rounded-md hover:bg-bg-sunken/80 transition-colors",
+										children: z("component.viewTemplate", "View Template")
+									})
+								]
+							})
+						})
+					}, "template"),
+					B === "settings" && /* @__PURE__ */ O(D.div, {
+						initial: {
+							opacity: 0,
+							y: 8
+						},
+						animate: {
+							opacity: 1,
+							y: 0
+						},
+						exit: {
+							opacity: 0,
+							y: -8
+						},
+						transition: { duration: .2 },
+						children: /* @__PURE__ */ k(c, {
+							padding: "lg",
+							children: [/* @__PURE__ */ O("h3", {
+								className: "font-semibold text-text-primary mb-4",
+								children: z("component.editComponent", "Edit Component")
+							}), /* @__PURE__ */ O("button", {
+								onClick: () => H(!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: z("component.editDetails", "Edit Details")
+							})]
+						})
+					}, "settings")
+				]
+			}),
+			/* @__PURE__ */ O(m, {
+				isOpen: V,
+				onClose: () => H(!1),
+				onSubmit: fe,
+				initialData: {
+					name: Z.name,
+					description: Z.description || "",
+					type: Z.type,
+					lifecycle: Z.lifecycle,
+					language: Z.language || "",
+					framework: Z.framework || "",
+					version: Z.version || "",
+					owner: Z.ownerName || "",
+					tags: Z.tags || []
+				},
+				title: z("component.editComponent", "Edit Component")
+			}),
+			/* @__PURE__ */ O(a, {
+				isOpen: G,
+				onClose: () => K(!1),
+				onConfirm: () => {
+					K(!1), I("/billing");
+				},
+				title: "Template Publish Quota Reached",
+				message: "You have used the template publishing quota for your current plan. Upgrade to publish more templates."
+			})
+		]
+	}) : /* @__PURE__ */ k(M, {
+		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
+		children: [/* @__PURE__ */ k("button", {
+			onClick: $,
+			className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
+			children: [/* @__PURE__ */ O(b, { className: "w-4 h-4" }), z("component.backToComponents", "Back to Components")]
+		}), /* @__PURE__ */ O(s, {
+			icon: /* @__PURE__ */ O(C, { className: "w-8 h-8 text-text-secondary" }),
+			title: z("component.notFound", "Component not found"),
+			description: `No component with ID "${F}" exists`,
+			action: /* @__PURE__ */ O("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: z("component.backToComponents", "Back to Components")
+			})
+		})]
+	});
+}
+//#endregion
+export { P as ComponentDetailPage };
+
+//# sourceMappingURL=ComponentDetailPage.js.map

package/dist/pages/ComponentDetailPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentDetailPage.js","names":[],"sources":["../../src/pages/ComponentDetailPage.tsx"],"sourcesContent":["import { useState, useCallback, useMemo } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { VIBE_PERMISSIONS } from '../constants/permissions';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport {\n  ArrowLeft,\n  Box,\n  BookOpen,\n  BarChart3,\n  FileText,\n  Settings,\n  RefreshCw,\n  FileCode,\n  Layers,\n  Upload,\n} from 'lucide-react';\nimport {\n  PageHeader,\n  Card,\n  StatCard,\n  EmptyState,\n  LoadingState,\n  ErrorState,\n  QuotaExhaustedDialog,\n} from '@/components/shared';\nimport { MotionPage, MotionList, MotionItem } from '@burdenoff/fe-libs/shared/motion';\nimport { ScorecardPanel } from '@/components/scorecard';\nimport { DocsTabPanel } from '@/components/docs';\nimport { CatalogCard } from '@/components/catalog';\nimport type { CatalogCardData } from '@/components/catalog';\nimport { ComponentForm } from '@/components/idp-components';\nimport type { ComponentFormData } from '@/components/idp-components';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { useQueryBackedTab } from '@/hooks/useQueryBackedTab';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { isQuotaExhaustedError } from '@/utils/quotaUtils';\nimport {\n  useGetComponentQuery,\n  useUpdateComponentMutation,\n  usePublishComponentAsTemplateMutation,\n} from '@/generated/wspace-operations';\n\ntype ComponentTab = 'overview' | 'catalogs' | 'docs' | 'scorecard' | 'template' | 'settings';\nconst COMPONENT_TABS: readonly ComponentTab[] = [\n  'overview',\n  'catalogs',\n  'docs',\n  'scorecard',\n  'template',\n  'settings',\n];\n\nexport function ComponentDetailPage() {\n  const { t } = useI18n();\n  const { id } = useParams<{ id: string }>();\n  const navigate = useVibeNavigate();\n  const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n\n  const tr = useCallback(\n    (key: string, fallback: string): string => {\n      const value = t(key);\n      return value === key ? fallback : value;\n    },\n    [t]\n  );\n\n  const [activeTab, setActiveTab] = useQueryBackedTab<ComponentTab>(COMPONENT_TABS, 'overview');\n  const [showEditForm, setShowEditForm] = useState(false);\n  const [successMessage, setSuccessMessage] = useState<string | null>(null);\n  const [showQuotaExhausted, setShowQuotaExhausted] = useState(false);\n\n  const { data, loading, error, refetch } = useGetComponentQuery({\n    variables: { id: id || '' },\n    skip: !id,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const [updateComponent] = useUpdateComponentMutation({ refetchQueries: ['GetComponent'] });\n  const [publishAsTemplate] = usePublishComponentAsTemplateMutation({\n    refetchQueries: ['GetComponent'],\n  });\n\n  const component = data?.vibecontrolsComponent ?? null;\n\n  const catalogs: CatalogCardData[] = useMemo(() => {\n    return (component?.catalogs ?? []).map((entry: Record<string, any>) => {\n      const c = entry.catalog || {};\n      return {\n        id: c.id as string,\n        name: c.name as string,\n        description: (c.description as string) || null,\n        visibility: c.visibility as CatalogCardData['visibility'],\n        componentCount: (c.componentCount as number) || 0,\n        vibeCount: (c.vibeCount as number) || 0,\n        tags: (c.tags as string[]) || [],\n        createdAt: c.createdAt as string,\n        updatedAt: c.updatedAt as string,\n      };\n    });\n  }, [component?.catalogs]);\n\n  if (permissionsLoading)\n    return (\n      <div className=\"flex items-center justify-center min-h-[400px]\">\n        <p className=\"text-text-secondary\">Loading permissions...</p>\n      </div>\n    );\n  if (!hasPermission(VIBE_PERMISSIONS.VIBE_READ))\n    return (\n      <div className=\"flex items-center justify-center min-h-[400px]\">\n        <div className=\"text-center space-y-2\">\n          <h2 className=\"text-lg font-semibold text-foreground\">Access Denied</h2>\n          <p className=\"text-sm text-text-secondary\">\n            You don't have permission to access this page.\n          </p>\n        </div>\n      </div>\n    );\n\n  const handleBack = () => {\n    navigate('/components');\n  };\n\n  const handleCatalogClick = (catalog: CatalogCardData) => {\n    navigate(`/catalogs/${catalog.id}`);\n  };\n\n  const handleUpdateComponent = async (formData: ComponentFormData) => {\n    if (!id) return;\n    await updateComponent({\n      variables: {\n        id,\n        input: {\n          name: formData.name,\n          description: formData.description || undefined,\n          type: formData.type,\n          lifecycle: formData.lifecycle,\n          language: formData.language || undefined,\n          framework: formData.framework || undefined,\n          version: formData.version || undefined,\n          ownerName: formData.owner || undefined,\n          tags: formData.tags.length > 0 ? formData.tags : undefined,\n        },\n      },\n    });\n    setSuccessMessage(tr('component.updatedSuccess', 'Component updated successfully'));\n    setTimeout(() => setSuccessMessage(null), 3000);\n  };\n\n  const handlePublishAsTemplate = async () => {\n    if (!id) return;\n    try {\n      await publishAsTemplate({\n        variables: { componentId: id, input: { name: component?.name || 'Template' } },\n      });\n      setSuccessMessage(tr('component.publishedAsTemplate', 'Published as template successfully'));\n      setTimeout(() => setSuccessMessage(null), 3000);\n    } catch (err) {\n      if (isQuotaExhaustedError(err)) {\n        setShowQuotaExhausted(true);\n        return;\n      }\n\n      setSuccessMessage(\n        err instanceof Error ? err.message : tr('component.failedPublish', 'Failed to publish')\n      );\n      setTimeout(() => setSuccessMessage(null), 3000);\n    }\n  };\n\n  const lifecycleStyles: Record<string, string> = {\n    EXPERIMENTAL: 'bg-status-warning-bg text-status-warning-text',\n    PRODUCTION: 'bg-status-success-bg text-status-success-text',\n    DEPRECATED: 'bg-status-error-bg text-status-error-text',\n  };\n\n  const tabs: { id: ComponentTab; label: string; icon: typeof Box; badge?: string }[] = [\n    { id: 'overview', label: tr('nav.overview', 'Overview'), icon: Box },\n    {\n      id: 'catalogs',\n      label: tr('component.catalogs', 'Catalogs'),\n      icon: BookOpen,\n      badge: `${catalogs.length}`,\n    },\n    { id: 'docs', label: tr('component.docs', 'Docs'), icon: FileText },\n    { id: 'scorecard', label: tr('component.scorecard', 'Scorecard'), icon: BarChart3 },\n    { id: 'template', label: tr('component.template', 'Template'), icon: FileCode },\n    { id: 'settings', label: tr('common.settings', 'Settings'), icon: Settings },\n  ];\n\n  // Guard states\n  if (loading && !component) {\n    return (\n      <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n        <button\n          onClick={handleBack}\n          className=\"flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors\"\n        >\n          <ArrowLeft className=\"w-4 h-4\" />\n          {tr('component.backToComponents', 'Back to Components')}\n        </button>\n        <LoadingState message={tr('component.loadingDetails', 'Loading component details...')} />\n      </MotionPage>\n    );\n  }\n\n  if (error && !component) {\n    return (\n      <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n        <button\n          onClick={handleBack}\n          className=\"flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors\"\n        >\n          <ArrowLeft className=\"w-4 h-4\" />\n          {tr('component.backToComponents', 'Back to Components')}\n        </button>\n        <ErrorState\n          title={tr('component.failedLoad', 'Failed to load component')}\n          message={error.message}\n          onRetry={() => refetch()}\n        />\n      </MotionPage>\n    );\n  }\n\n  if (!component) {\n    return (\n      <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n        <button\n          onClick={handleBack}\n          className=\"flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors\"\n        >\n          <ArrowLeft className=\"w-4 h-4\" />\n          {tr('component.backToComponents', 'Back to Components')}\n        </button>\n        <EmptyState\n          icon={<Box className=\"w-8 h-8 text-text-secondary\" />}\n          title={tr('component.notFound', 'Component not found')}\n          description={`No component with ID \"${id}\" exists`}\n          action={\n            <button\n              onClick={handleBack}\n              className=\"px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n            >\n              {tr('component.backToComponents', 'Back to Components')}\n            </button>\n          }\n        />\n      </MotionPage>\n    );\n  }\n\n  return (\n    <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n      {/* Success Toast */}\n      {successMessage && (\n        <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\">\n          {successMessage}\n        </div>\n      )}\n\n      {/* Back Button */}\n      <button\n        onClick={handleBack}\n        className=\"flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors\"\n      >\n        <ArrowLeft className=\"w-4 h-4\" />\n        {tr('component.backToComponents', 'Back to Components')}\n      </button>\n\n      {/* Header */}\n      <PageHeader\n        title={component.name}\n        description={component.description || tr('component.noDescription', 'No description')}\n        actions={\n          <div className=\"flex items-center gap-2 flex-wrap\">\n            <button\n              onClick={() => refetch()}\n              disabled={loading}\n              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\"\n              title={tr('common.refresh', 'Refresh')}\n            >\n              <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />\n            </button>\n            <span className=\"inline-flex items-center px-2.5 py-1 text-xs font-medium bg-bg-sunken text-text-secondary rounded\">\n              {component.type}\n            </span>\n            <span\n              className={`inline-flex items-center px-2.5 py-1 text-xs font-medium rounded ${lifecycleStyles[component.lifecycle] || 'bg-bg-sunken text-text-secondary'}`}\n            >\n              {component.lifecycle}\n            </span>\n          </div>\n        }\n      />\n\n      {/* Stat Cards */}\n      <MotionList stagger={0.04} className=\"grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4\">\n        <MotionItem>\n          <StatCard\n            title={tr('component.type', 'Type')}\n            value={component.type}\n            icon={<Box className=\"w-4 h-4\" />}\n          />\n        </MotionItem>\n        <MotionItem>\n          <StatCard\n            title={tr('component.lifecycle', 'Lifecycle')}\n            value={component.lifecycle}\n            icon={<Layers className=\"w-4 h-4\" />}\n            variant={\n              component.lifecycle === 'PRODUCTION'\n                ? 'success'\n                : component.lifecycle === 'DEPRECATED'\n                  ? 'error'\n                  : 'warning'\n            }\n          />\n        </MotionItem>\n        <MotionItem>\n          <StatCard\n            title={tr('component.version', 'Version')}\n            value={component.version || '-'}\n            icon={<FileCode className=\"w-4 h-4\" />}\n          />\n        </MotionItem>\n        <MotionItem>\n          <StatCard\n            title={tr('component.catalogs', 'Catalogs')}\n            value={catalogs.length}\n            icon={<BookOpen className=\"w-4 h-4\" />}\n          />\n        </MotionItem>\n      </MotionList>\n\n      {/* Tab Navigation */}\n      <div className=\"border-b border-border-default\">\n        <nav\n          className=\"flex gap-1 -mb-px overflow-x-auto pb-1\"\n          aria-label={tr('component.tabsAriaLabel', 'Component tabs')}\n        >\n          {tabs.map((tab) => {\n            const Icon = tab.icon;\n            const isActiveTab = activeTab === tab.id;\n            return (\n              <button\n                key={tab.id}\n                onClick={() => setActiveTab(tab.id)}\n                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                  isActiveTab\n                    ? 'border-action-primary-bg text-action-primary-text'\n                    : 'border-transparent text-text-secondary hover:text-text-primary hover:border-border-default'\n                }`}\n                aria-selected={isActiveTab}\n                role=\"tab\"\n              >\n                <Icon className=\"w-4 h-4\" />\n                {tab.label}\n                {tab.badge && (\n                  <span\n                    className={`hidden rounded-full px-1.5 py-0.5 text-[10px] sm:inline-flex sm:text-xs ${\n                      isActiveTab\n                        ? 'bg-action-primary-bg/10 text-action-primary-bg'\n                        : 'bg-bg-sunken text-text-muted'\n                    }`}\n                  >\n                    {tab.badge}\n                  </span>\n                )}\n              </button>\n            );\n          })}\n        </nav>\n      </div>\n\n      {/* Tab Panels */}\n      <AnimatePresence mode=\"wait\">\n        {activeTab === 'overview' && (\n          <motion.div\n            key=\"overview\"\n            initial={{ opacity: 0, y: 8 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: -8 }}\n            transition={{ duration: 0.2 }}\n            className=\"space-y-6\"\n          >\n            {component.description && (\n              <Card>\n                <div className=\"p-4\">\n                  <p className=\"text-text-primary\">{component.description}</p>\n                </div>\n              </Card>\n            )}\n\n            <Card>\n              <div className=\"p-4 border-b border-border-default\">\n                <h3 className=\"font-semibold text-text-primary\">\n                  {tr('component.metadata', 'Metadata')}\n                </h3>\n              </div>\n              <div className=\"p-4\">\n                <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm\">\n                  <div>\n                    <p className=\"text-text-secondary\">{tr('component.ownerNameLabel', 'Owner')}</p>\n                    <p className=\"font-medium text-text-primary\">\n                      {component.ownerName || tr('common.unset', 'Unset')}\n                    </p>\n                  </div>\n                  <div>\n                    <p className=\"text-text-secondary\">\n                      {tr('component.languageLabel', 'Language')}\n                    </p>\n                    <p className=\"font-medium text-text-primary\">\n                      {component.language || tr('common.unset', 'Unset')}\n                    </p>\n                  </div>\n                  <div>\n                    <p className=\"text-text-secondary\">\n                      {tr('component.frameworkLabel', 'Framework')}\n                    </p>\n                    <p className=\"font-medium text-text-primary\">\n                      {component.framework || tr('common.unset', 'Unset')}\n                    </p>\n                  </div>\n                  <div>\n                    <p className=\"text-text-secondary\">{tr('component.versionLabel', 'Version')}</p>\n                    <p className=\"font-medium text-text-primary\">\n                      {component.version || tr('common.unset', 'Unset')}\n                    </p>\n                  </div>\n                  {component.repositoryUrl && (\n                    <div className=\"sm:col-span-2\">\n                      <p className=\"text-text-secondary\">\n                        {tr('component.repository', 'Repository')}\n                      </p>\n                      <a\n                        href={component.repositoryUrl}\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        className=\"font-medium text-action-primary-bg hover:underline break-all\"\n                      >\n                        {component.repositoryUrl}\n                      </a>\n                    </div>\n                  )}\n                  <div>\n                    <p className=\"text-text-secondary\">{tr('common.created', 'Created')}</p>\n                    <p className=\"font-medium text-text-primary\">\n                      {new Date(component.createdAt).toLocaleDateString()}\n                    </p>\n                  </div>\n                  <div>\n                    <p className=\"text-text-secondary\">{tr('common.updated', 'Updated')}</p>\n                    <p className=\"font-medium text-text-primary\">\n                      {new Date(component.updatedAt).toLocaleDateString()}\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </Card>\n\n            {component.tags?.length > 0 && (\n              <Card>\n                <div className=\"p-4\">\n                  <h3 className=\"font-semibold text-text-primary mb-3\">\n                    {tr('component.tags', 'Tags')}\n                  </h3>\n                  <div className=\"flex flex-wrap gap-2\">\n                    {component.tags.map((tag: string) => (\n                      <span\n                        key={tag}\n                        className=\"px-2.5 py-1 text-sm bg-bg-sunken text-text-secondary rounded-md\"\n                      >\n                        {tag}\n                      </span>\n                    ))}\n                  </div>\n                </div>\n              </Card>\n            )}\n          </motion.div>\n        )}\n\n        {activeTab === 'catalogs' && (\n          <motion.div\n            key=\"catalogs\"\n            initial={{ opacity: 0, y: 8 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: -8 }}\n            transition={{ duration: 0.2 }}\n            className=\"space-y-4\"\n          >\n            <p className=\"text-sm text-text-secondary\">\n              {catalogs.length}{' '}\n              {tr('component.catalogsContaining', 'catalogs containing this component')}\n            </p>\n            {catalogs.length > 0 ? (\n              <MotionList\n                stagger={0.04}\n                className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\"\n              >\n                {catalogs.map((catalog) => (\n                  <MotionItem key={catalog.id}>\n                    <CatalogCard catalog={catalog} onOpen={handleCatalogClick} />\n                  </MotionItem>\n                ))}\n              </MotionList>\n            ) : (\n              <EmptyState\n                icon={<BookOpen className=\"w-8 h-8 text-text-secondary\" />}\n                title={tr('component.noCatalogs', 'Not in any catalogs')}\n                description={tr(\n                  'component.noCatalogsDescription',\n                  'This component has not been added to any catalogs yet'\n                )}\n              />\n            )}\n          </motion.div>\n        )}\n\n        {activeTab === 'docs' && (\n          <motion.div\n            key=\"docs\"\n            initial={{ opacity: 0, y: 8 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: -8 }}\n            transition={{ duration: 0.2 }}\n            className=\"space-y-6\"\n          >\n            <DocsTabPanel ownerType=\"COMPONENT\" ownerId={id || ''} />\n          </motion.div>\n        )}\n\n        {activeTab === 'scorecard' && (\n          <motion.div\n            key=\"scorecard\"\n            initial={{ opacity: 0, y: 8 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: -8 }}\n            transition={{ duration: 0.2 }}\n          >\n            <ScorecardPanel ownerType=\"COMPONENT\" ownerId={id || ''} />\n          </motion.div>\n        )}\n\n        {activeTab === 'template' && (\n          <motion.div\n            key=\"template\"\n            initial={{ opacity: 0, y: 8 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: -8 }}\n            transition={{ duration: 0.2 }}\n          >\n            <Card padding=\"lg\">\n              <div className=\"flex flex-col items-center justify-center py-12 text-center\">\n                <FileCode className=\"w-12 h-12 text-text-muted mb-4\" />\n                <h3 className=\"text-lg font-semibold text-text-primary mb-2\">\n                  {tr('component.template', 'Template')}\n                </h3>\n                <p className=\"text-sm text-text-secondary max-w-md mb-4\">\n                  {(component.templates?.length ?? 0) > 0\n                    ? tr(\n                        'component.alreadyPublished',\n                        'This component has been published as a template.'\n                      )\n                    : tr(\n                        'component.publishDescription',\n                        'Publish this component as a reusable template that others can clone.'\n                      )}\n                </p>\n                {(component.templates?.length ?? 0) === 0 && (\n                  <button\n                    onClick={handlePublishAsTemplate}\n                    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\"\n                  >\n                    <Upload className=\"w-4 h-4\" />\n                    {tr('component.publishAsTemplate', 'Publish as Template')}\n                  </button>\n                )}\n                {(component.templates?.length ?? 0) > 0 && (\n                  <button\n                    onClick={() => navigate(`/templates/${component.templates[0].id}`)}\n                    className=\"flex items-center gap-2 px-4 py-2 bg-bg-sunken text-text-primary rounded-md hover:bg-bg-sunken/80 transition-colors\"\n                  >\n                    {tr('component.viewTemplate', 'View Template')}\n                  </button>\n                )}\n              </div>\n            </Card>\n          </motion.div>\n        )}\n\n        {activeTab === 'settings' && (\n          <motion.div\n            key=\"settings\"\n            initial={{ opacity: 0, y: 8 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: -8 }}\n            transition={{ duration: 0.2 }}\n          >\n            <Card padding=\"lg\">\n              <h3 className=\"font-semibold text-text-primary mb-4\">\n                {tr('component.editComponent', 'Edit Component')}\n              </h3>\n              <button\n                onClick={() => setShowEditForm(true)}\n                className=\"px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n              >\n                {tr('component.editDetails', 'Edit Details')}\n              </button>\n            </Card>\n          </motion.div>\n        )}\n      </AnimatePresence>\n\n      {/* Edit Form */}\n      <ComponentForm\n        isOpen={showEditForm}\n        onClose={() => setShowEditForm(false)}\n        onSubmit={handleUpdateComponent}\n        initialData={{\n          name: component.name,\n          description: component.description || '',\n          type: component.type,\n          lifecycle: component.lifecycle,\n          language: component.language || '',\n          framework: component.framework || '',\n          version: component.version || '',\n          owner: component.ownerName || '',\n          tags: component.tags || [],\n        }}\n        title={tr('component.editComponent', 'Edit Component')}\n      />\n\n      <QuotaExhaustedDialog\n        isOpen={showQuotaExhausted}\n        onClose={() => setShowQuotaExhausted(false)}\n        onConfirm={() => {\n          setShowQuotaExhausted(false);\n          navigate('/billing');\n        }}\n        title=\"Template Publish Quota Reached\"\n        message=\"You have used the template publishing quota for your current plan. Upgrade to publish more templates.\"\n      />\n    </MotionPage>\n  );\n}\n"],"mappings":"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"}

package/dist/pages/ComponentDocsPage.d.ts

@@ -0,0 +1,2 @@
+export declare function ComponentDocsPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ComponentDocsPage.d.ts.map

package/dist/pages/ComponentDocsPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentDocsPage.d.ts","sourceRoot":"","sources":["../../src/pages/ComponentDocsPage.tsx"],"names":[],"mappings":"AAmCA,wBAAgB,iBAAiB,4CA4LhC"}