@burdenoff/microfe-vibecontrols 2026.613.1 → 2026.618.1

package/dist/pages/TemplateDetailPage.js

@@ -4,32 +4,32 @@ import { QuotaExhaustedDialog as s } from "../components/shared/QuotaExhaustedDi
 import { isQuotaExhaustedError as c } from "../utils/quotaUtils.js";
 import { useVibeNavigate as l } from "../providers/VibeControlsProvider.js";
 import { PageHeader as ee } from "../components/shared/PageHeader.js";
-import { ErrorState as u } from "../components/shared/ErrorState.js";
-import { EntityTagPicker as d } from "../components/shared/EntityTagPicker.js";
-import { EmptyState as te } from "../components/shared/EmptyState.js";
+import { ErrorState as te } from "../components/shared/ErrorState.js";
+import { EntityTagPicker as u } from "../components/shared/EntityTagPicker.js";
+import { EmptyState as d } from "../components/shared/EmptyState.js";
 import { Card as f } from "../components/shared/Card.js";
 import "../components/shared/index.js";
-import { VIBE_PERMISSIONS as ne } from "../constants/permissions.js";
-import { EntityShareButton as re } from "../components/sharing/EntityShareButton.js";
+import { VIBE_PERMISSIONS as p } from "../constants/permissions.js";
+import { EntityShareButton as ne } from "../components/sharing/EntityShareButton.js";
 import "../components/sharing/index.js";
-import { PageSkeleton as ie } from "../components/shared/PageSkeleton.js";
-import { TemplateWizard as p } from "../components/templates/TemplateWizard.js";
+import { PageSkeleton as re } from "../components/shared/PageSkeleton.js";
+import { TemplateWizard as ie } from "../components/templates/TemplateWizard.js";
 import "../components/templates/index.js";
-import { useCallback as m, useState as h } from "react";
-import { useI18n as g } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { ArrowLeft as _, CheckCircle2 as v, Clock as ae, Copy as y, FileCode as b, FolderTree as oe, Github as se, Layers as ce, Loader2 as le, RefreshCw as ue, Tag as x, Trash2 as de, Variable as fe, XCircle as pe } from "lucide-react";
-import { useParams as me } from "react-router-dom";
-import { usePermissions as he } from "@burdenoff/fe-libs/shared/providers/shell";
-import { Fragment as ge, jsx as S, jsxs as C } from "react/jsx-runtime";
-import { MotionPage as w } from "@burdenoff/fe-libs/shared/motion";
+import { useCallback as ae, useState as m } from "react";
+import { useI18n as h } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { ArrowLeft as g, CheckCircle2 as oe, Clock as se, Copy as _, FileCode as v, FolderTree as y, Github as b, Layers as x, Loader2 as ce, RefreshCw as le, Tag as S, Trash2 as ue, Variable as de, XCircle as fe } from "lucide-react";
+import { useParams as pe } from "react-router-dom";
+import { usePermissions as me } from "@burdenoff/fe-libs/shared/providers/shell";
+import { Fragment as he, jsx as C, jsxs as w } from "react/jsx-runtime";
+import { MotionPage as T } from "@burdenoff/fe-libs/shared/motion";
 //#region src/pages/TemplateDetailPage.tsx
-function T(e, t) {
+function E(e, t) {
 	return e.replace(/\{\{(\w+)\}\}|\{(\w+)\}/g, (e, n, r) => {
 		let i = n ?? r;
 		return i in t ? String(t[i]) : e;
 	});
 }
-function E(e) {
+function ge(e) {
 	try {
 		let t = e.match(/^https?:\/\/github\.com\/([^/]+)\/([^/]+?)(?:\.git)?(?:\/.*)?$/);
 		return t ? {
@@ -40,7 +40,7 @@ function E(e) {
 		return null;
 	}
 }
-async function D(e, t, n, r) {
+async function _e(e, t, n, r) {
 	if (!r) return;
 	let i = n.variableValues, a = Array.isArray(r.variables) ? r.variables : [], o = [];
 	if (o.push(`# ${n.name}`), o.push(""), n.description && (o.push(n.description), o.push("")), o.push(`> Scaffolded from VibeControls template: **${r.name}**`), o.push(""), a.length > 0 && Object.keys(i).length > 0) {
@@ -51,7 +51,7 @@ async function D(e, t, n, r) {
 		}
 		o.push("");
 	}
-	r.setupInstructions && (o.push("## Getting Started"), o.push(""), o.push(T(r.setupInstructions, i)), o.push("")), r.fileTree && (o.push("## Project Structure"), o.push(""), o.push("```"), o.push(typeof r.fileTree == "string" ? r.fileTree : JSON.stringify(r.fileTree, null, 2)), o.push("```"), o.push(""));
+	r.setupInstructions && (o.push("## Getting Started"), o.push(""), o.push(E(r.setupInstructions, i)), o.push("")), r.fileTree && (o.push("## Project Structure"), o.push(""), o.push("```"), o.push(typeof r.fileTree == "string" ? r.fileTree : JSON.stringify(r.fileTree, null, 2)), o.push("```"), o.push(""));
 	let s = o.join("\n"), c = await fetch(`https://api.github.com/repos/${e}/contents/README.md`, { headers: t }), l;
 	if (c.ok && (l = (await c.json()).sha), await fetch(`https://api.github.com/repos/${e}/contents/README.md`, {
 		method: "PUT",
@@ -63,7 +63,7 @@ async function D(e, t, n, r) {
 		})
 	}), r.setupInstructions || a.length > 0 && Object.keys(i).length > 0) {
 		let n = ["# Getting Started", ""];
-		if (r.setupInstructions && (n.push(T(r.setupInstructions, i)), n.push("")), a.length > 0 && Object.keys(i).length > 0) {
+		if (r.setupInstructions && (n.push(E(r.setupInstructions, i)), n.push("")), a.length > 0 && Object.keys(i).length > 0) {
 			n.push("---"), n.push(""), n.push("## Template Variable Values"), n.push(""), n.push("These are the values you chose when creating this project:"), n.push("");
 			for (let e of a) {
 				let t = i[e.name];
@@ -80,7 +80,7 @@ async function D(e, t, n, r) {
 		});
 	}
 }
-var O = {
+var ve = {
 	STARTER: "bg-bg-sunken text-text-secondary",
 	MICROSERVICE: "bg-action-primary-bg/10 text-action-primary-bg",
 	FRONTEND: "bg-status-info-bg text-status-info-text",
@@ -90,15 +90,15 @@ var O = {
 	LIBRARY: "bg-status-warning-bg text-status-warning-text",
 	CUSTOM: "bg-bg-sunken text-text-secondary"
 };
-function k() {
-	let { t: T } = g(), { id: k } = me(), A = l(), { hasPermission: j, isLoading: M } = he(), N = m((e, t) => {
-		let n = T(e);
+function D() {
+	let { t: E } = h(), { id: D } = pe(), O = l(), { hasPermission: k, isLoading: A } = me(), j = k(p.TEMPLATE_READ), M = k(p.TEMPLATE_CREATE), N = k(p.TEMPLATE_DELETE), P = k(p.INTEGRATION_CONNECTION_READ), F = ae((e, t) => {
+		let n = E(e);
 		return n === e ? t : n;
-	}, [T]), [P, F] = h(!1), [I, L] = h(!1), [_e, R] = h(!1), [ve, z] = h(!1), [B, V] = h(null), [H, ye] = h(null), [U, W] = h(null), [G, K] = h(null), { data: q, loading: J, error: Y, refetch: X } = n({
-		variables: { id: k || "" },
-		skip: !k,
+	}, [E]), [I, L] = m(!1), [ye, R] = m(!1), [be, z] = m(!1), [xe, B] = m(!1), [V, H] = m(null), [U, Se] = m(null), [W, G] = m(null), [K, q] = m(null), { data: Ce, loading: J, error: Y, refetch: X } = n({
+		variables: { id: D || "" },
+		skip: !D || A || !j,
 		fetchPolicy: "cache-and-network"
-	}), [be] = r({ refetchQueries: ["ListComponents"] }), [xe] = e({ refetchQueries: ["ListTemplates"] }), [Z] = a(), [Se] = t(), { data: Ce } = i({
+	}), [we] = r({ refetchQueries: ["ListComponents"] }), [Te] = e({ refetchQueries: ["ListTemplates"] }), [Z] = a(), [Ee] = t(), { data: De } = i({
 		variables: {
 			filter: { status: "ACTIVE" },
 			pagination: {
@@ -106,8 +106,9 @@ function k() {
 				offset: 0
 			}
 		},
-		fetchPolicy: "cache-first"
-	}), we = (Ce?.getConnections?.items ?? []).filter((e) => e.provider?.key === "github").map((e) => ({
+		fetchPolicy: "cache-first",
+		skip: !M || !P
+	}), Oe = (De?.getConnections?.items ?? []).filter((e) => e.provider?.key === "github").map((e) => ({
 		id: e.id,
 		name: e.name,
 		externalAccountEmail: e.externalAccountEmail,
@@ -116,205 +117,205 @@ function k() {
 			key: e.provider.key,
 			name: e.provider.name
 		}
-	})), Q = q?.vibecontrolsTemplate ?? null;
-	if (M) return /* @__PURE__ */ S("div", {
+	})), Q = Ce?.vibecontrolsTemplate ?? null;
+	if (A) return /* @__PURE__ */ C("div", {
 		className: "flex items-center justify-center min-h-[400px]",
-		children: /* @__PURE__ */ S("p", {
+		children: /* @__PURE__ */ C("p", {
 			className: "text-text-secondary",
 			children: "Loading permissions…"
 		})
 	});
-	if (!j(ne.VIBE_READ)) return /* @__PURE__ */ S("div", {
+	if (!j) return /* @__PURE__ */ C("div", {
 		className: "flex items-center justify-center min-h-[400px]",
-		children: /* @__PURE__ */ C("div", {
+		children: /* @__PURE__ */ w("div", {
 			className: "text-center space-y-2",
-			children: [/* @__PURE__ */ S("h2", {
+			children: [/* @__PURE__ */ C("h2", {
 				className: "text-lg font-semibold text-foreground",
 				children: "Access Denied"
-			}), /* @__PURE__ */ S("p", {
+			}), /* @__PURE__ */ C("p", {
 				className: "text-sm text-text-secondary",
 				children: "You don't have permission to access this page."
 			})]
 		})
 	});
 	let $ = () => {
-		A("/templates");
+		O("/templates");
 	};
-	return J && !Q ? /* @__PURE__ */ C(w, {
+	return J && !Q ? /* @__PURE__ */ w(T, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
-		children: [/* @__PURE__ */ C("button", {
+		children: [/* @__PURE__ */ w("button", {
 			type: "button",
 			onClick: $,
 			className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
-			children: [/* @__PURE__ */ S(_, { className: "size-4" }), N("template.backToTemplates", "Back to Templates")]
-		}), /* @__PURE__ */ S(ie, { variant: "detail" })]
-	}) : Y && !Q ? /* @__PURE__ */ C(w, {
+			children: [/* @__PURE__ */ C(g, { className: "size-4" }), F("template.backToTemplates", "Back to Templates")]
+		}), /* @__PURE__ */ C(re, { variant: "detail" })]
+	}) : Y && !Q ? /* @__PURE__ */ w(T, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
-		children: [/* @__PURE__ */ C("button", {
+		children: [/* @__PURE__ */ w("button", {
 			type: "button",
 			onClick: $,
 			className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
-			children: [/* @__PURE__ */ S(_, { className: "size-4" }), N("template.backToTemplates", "Back to Templates")]
-		}), /* @__PURE__ */ S(u, {
-			title: N("template.failedLoad", "Failed to load template"),
+			children: [/* @__PURE__ */ C(g, { className: "size-4" }), F("template.backToTemplates", "Back to Templates")]
+		}), /* @__PURE__ */ C(te, {
+			title: F("template.failedLoad", "Failed to load template"),
 			message: Y.message,
 			onRetry: () => X()
 		})]
-	}) : Q ? /* @__PURE__ */ C(w, {
+	}) : Q ? /* @__PURE__ */ w(T, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
 		children: [
-			B && /* @__PURE__ */ S("div", {
+			V && /* @__PURE__ */ C("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: V
 			}),
-			U && /* @__PURE__ */ S("div", {
+			W && /* @__PURE__ */ C("div", {
 				className: "fixed top-4 left-4 right-4 sm:left-auto z-50 bg-status-warning-bg text-status-warning-text px-4 py-3 rounded-md shadow-lg text-sm max-w-sm",
-				children: U
+				children: W
 			}),
-			H && /* @__PURE__ */ S("div", {
+			U && /* @__PURE__ */ C("div", {
 				className: "fixed top-4 left-4 right-4 sm:left-auto z-50 bg-status-error-bg text-status-error-text px-4 py-3 rounded-md shadow-lg",
-				children: H
+				children: U
 			}),
-			G && /* @__PURE__ */ S("div", {
+			K && /* @__PURE__ */ C("div", {
 				className: "fixed inset-0 z-[9999] flex items-center justify-center p-4",
 				style: { backgroundColor: "rgba(0,0,0,0.55)" },
-				children: /* @__PURE__ */ C("div", {
+				children: /* @__PURE__ */ w("div", {
 					className: "bg-bg-surface border border-border-default rounded-xl shadow-2xl p-8 flex flex-col items-center gap-4 max-w-xs w-full",
-					children: [G.done ? /* @__PURE__ */ S(v, { className: "size-10 text-status-success-text" }) : G.error ? /* @__PURE__ */ S(pe, { className: "size-10 text-status-error-text" }) : /* @__PURE__ */ S(le, { className: "size-10 text-action-primary-bg animate-spin" }), /* @__PURE__ */ S("p", {
+					children: [K.done ? /* @__PURE__ */ C(oe, { className: "size-10 text-status-success-text" }) : K.error ? /* @__PURE__ */ C(fe, { className: "size-10 text-status-error-text" }) : /* @__PURE__ */ C(ce, { className: "size-10 text-action-primary-bg animate-spin" }), /* @__PURE__ */ C("p", {
 						className: "text-sm font-medium text-text-primary text-center",
-						children: G.stage
+						children: K.stage
 					})]
 				})
 			}),
-			/* @__PURE__ */ C("button", {
+			/* @__PURE__ */ w("button", {
 				type: "button",
 				onClick: $,
 				className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
-				children: [/* @__PURE__ */ S(_, { className: "size-4" }), N("template.backToTemplates", "Back to Templates")]
+				children: [/* @__PURE__ */ C(g, { className: "size-4" }), F("template.backToTemplates", "Back to Templates")]
 			}),
-			/* @__PURE__ */ S(ee, {
+			/* @__PURE__ */ C(ee, {
 				title: Q.name,
-				description: Q.description || N("template.noDescription", "No description"),
-				actions: /* @__PURE__ */ C("div", {
+				description: Q.description || F("template.noDescription", "No description"),
+				actions: /* @__PURE__ */ w("div", {
 					className: "flex items-center gap-2 flex-wrap",
 					children: [
-						/* @__PURE__ */ S(re, {
+						/* @__PURE__ */ C(ne, {
 							entity: "template",
 							resource: {
 								id: Q.id,
 								name: Q.name
 							},
-							label: N("template.share", "Share"),
+							label: F("template.share", "Share"),
 							variant: "button"
 						}),
-						/* @__PURE__ */ S("button", {
+						/* @__PURE__ */ C("button", {
 							type: "button",
 							onClick: () => X(),
 							disabled: J,
 							className: "flex items-center justify-center p-2 bg-bg-sunken text-text-primary rounded-md hover:bg-bg-sunken/80 transition-colors disabled:opacity-50",
-							title: N("common.refresh", "Refresh"),
-							children: /* @__PURE__ */ S(ue, { className: `size-4 ${J ? "animate-spin" : ""}` })
+							title: F("common.refresh", "Refresh"),
+							children: /* @__PURE__ */ C(le, { className: `size-4 ${J ? "animate-spin" : ""}` })
 						}),
-						/* @__PURE__ */ C("button", {
+						M && /* @__PURE__ */ w("button", {
 							type: "button",
-							onClick: () => F(!0),
+							onClick: () => L(!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__ */ S(y, { className: "size-4" }), N("template.useTemplate", "Use Template")]
+							children: [/* @__PURE__ */ C(_, { className: "size-4" }), F("template.useTemplate", "Use Template")]
 						}),
-						/* @__PURE__ */ C("button", {
+						N && /* @__PURE__ */ w("button", {
 							type: "button",
 							"data-testid": "template-delete-button",
-							onClick: () => R(!0),
+							onClick: () => z(!0),
 							className: "flex items-center gap-2 px-4 py-2 bg-status-error-bg text-status-error-text rounded-md hover:opacity-90 transition-opacity",
-							"aria-label": N("template.deleteTemplate", "Delete Template"),
-							children: [/* @__PURE__ */ S(de, {
+							"aria-label": F("template.deleteTemplate", "Delete Template"),
+							children: [/* @__PURE__ */ C(ue, {
 								className: "size-4",
 								"aria-hidden": "true"
-							}), N("common.delete", "Delete")]
+							}), F("common.delete", "Delete")]
 						})
 					]
 				})
 			}),
-			/* @__PURE__ */ C("p", {
+			M && /* @__PURE__ */ w("p", {
 				className: "text-sm text-text-muted",
 				children: [
 					"Click ",
-					/* @__PURE__ */ S("span", {
+					/* @__PURE__ */ C("span", {
 						className: "font-medium text-text-secondary",
 						children: "Use Template"
 					}),
 					" to open a short wizard — give your new component a name, fill in any variables, and optionally create a GitHub repository. The whole thing takes under a minute."
 				]
 			}),
-			/* @__PURE__ */ C("div", {
+			/* @__PURE__ */ w("div", {
 				className: "flex items-center gap-3 flex-wrap",
 				children: [
-					Q.category && /* @__PURE__ */ C("span", {
-						className: `inline-flex items-center gap-1.5 px-2.5 py-1 text-sm font-medium rounded ${O[Q.category] || "bg-bg-sunken text-text-secondary"}`,
-						children: [/* @__PURE__ */ S(ce, { className: "size-3.5" }), Q.category]
+					Q.category && /* @__PURE__ */ w("span", {
+						className: `inline-flex items-center gap-1.5 px-2.5 py-1 text-sm font-medium rounded ${ve[Q.category] || "bg-bg-sunken text-text-secondary"}`,
+						children: [/* @__PURE__ */ C(x, { className: "size-3.5" }), Q.category]
 					}),
-					/* @__PURE__ */ C("span", {
+					/* @__PURE__ */ w("span", {
 						className: "inline-flex items-center gap-1.5 text-sm text-text-secondary",
 						children: [
-							/* @__PURE__ */ S(y, { className: "size-3.5" }),
+							/* @__PURE__ */ C(_, { className: "size-3.5" }),
 							Q.cloneCount,
 							" ",
-							N("template.clones", "clones")
+							F("template.clones", "clones")
 						]
 					}),
-					Q.sourceRepositoryUrl && /* @__PURE__ */ C("a", {
+					Q.sourceRepositoryUrl && /* @__PURE__ */ w("a", {
 						href: Q.sourceRepositoryUrl,
 						target: "_blank",
 						rel: "noopener noreferrer",
 						onClick: (e) => e.stopPropagation(),
 						className: "inline-flex items-center gap-1.5 text-sm text-action-primary-bg hover:underline",
-						children: [/* @__PURE__ */ S(se, { className: "size-3.5" }), Q.sourceRepositoryUrl.replace("https://github.com/", "")]
+						children: [/* @__PURE__ */ C(b, { className: "size-3.5" }), Q.sourceRepositoryUrl.replace("https://github.com/", "")]
 					}),
-					/* @__PURE__ */ C("span", {
+					/* @__PURE__ */ w("span", {
 						className: "inline-flex items-center gap-1.5 text-sm text-text-secondary",
-						children: [/* @__PURE__ */ S(ae, { className: "size-3.5" }), new Date(Q.createdAt).toLocaleDateString()]
+						children: [/* @__PURE__ */ C(se, { className: "size-3.5" }), new Date(Q.createdAt).toLocaleDateString()]
 					})
 				]
 			}),
-			Q.tags?.length > 0 && /* @__PURE__ */ S("div", {
+			Q.tags?.length > 0 && /* @__PURE__ */ C("div", {
 				className: "flex flex-wrap gap-2",
-				children: Q.tags.map((e) => /* @__PURE__ */ C("span", {
+				children: Q.tags.map((e) => /* @__PURE__ */ w("span", {
 					className: "inline-flex items-center gap-1 px-2.5 py-1 text-sm bg-bg-sunken text-text-secondary rounded-md",
-					children: [/* @__PURE__ */ S(x, { className: "size-3" }), e]
+					children: [/* @__PURE__ */ C(S, { className: "size-3" }), e]
 				}, e))
 			}),
-			/* @__PURE__ */ C(f, { children: [/* @__PURE__ */ C("div", {
+			/* @__PURE__ */ w(f, { children: [/* @__PURE__ */ w("div", {
 				className: "p-4 border-b border-border-default flex items-center gap-2",
-				children: [/* @__PURE__ */ S(x, { className: "size-5" }), /* @__PURE__ */ S("h3", {
+				children: [/* @__PURE__ */ C(S, { className: "size-5" }), /* @__PURE__ */ C("h3", {
 					className: "font-semibold text-text-primary",
-					children: N("template.tags", "Tags")
+					children: F("template.tags", "Tags")
 				})]
-			}), /* @__PURE__ */ S("div", {
+			}), /* @__PURE__ */ C("div", {
 				className: "p-4",
-				children: /* @__PURE__ */ S(d, {
+				children: /* @__PURE__ */ C(u, {
 					entityType: "VIBECONTROLS_TEMPLATE",
 					entityId: Q.id
 				})
 			})] }),
-			Q.sourceComponent && /* @__PURE__ */ C(f, { children: [/* @__PURE__ */ S("div", {
+			Q.sourceComponent && /* @__PURE__ */ w(f, { children: [/* @__PURE__ */ C("div", {
 				className: "p-4 border-b border-border-default",
-				children: /* @__PURE__ */ S("h3", {
+				children: /* @__PURE__ */ C("h3", {
 					className: "font-semibold text-text-primary",
-					children: N("template.sourceComponent", "Source Component")
+					children: F("template.sourceComponent", "Source Component")
 				})
-			}), /* @__PURE__ */ S("div", {
+			}), /* @__PURE__ */ C("div", {
 				className: "p-4",
-				children: /* @__PURE__ */ C("button", {
+				children: /* @__PURE__ */ w("button", {
 					type: "button",
-					onClick: () => A(`/components/${Q.sourceComponent.id}`),
+					onClick: () => O(`/components/${Q.sourceComponent.id}`),
 					className: "flex items-center gap-3 text-left hover:bg-bg-sunken p-2 -m-2 rounded-md transition-colors",
-					children: [/* @__PURE__ */ S("div", {
+					children: [/* @__PURE__ */ C("div", {
 						className: "size-10 rounded-lg bg-action-primary-bg/10 flex items-center justify-center flex-shrink-0",
-						children: /* @__PURE__ */ S(b, { className: "size-5 text-action-primary-bg" })
-					}), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
+						children: /* @__PURE__ */ C(v, { className: "size-5 text-action-primary-bg" })
+					}), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
 						className: "font-medium text-text-primary",
 						children: Q.sourceComponent.name
-					}), /* @__PURE__ */ C("p", {
+					}), /* @__PURE__ */ w("p", {
 						className: "text-xs text-text-secondary",
 						children: [
 							Q.sourceComponent.type,
@@ -324,15 +325,15 @@ function k() {
 					})] })]
 				})
 			})] }),
-			Q.clonedComponents && Q.clonedComponents.length > 0 && /* @__PURE__ */ C(f, { children: [/* @__PURE__ */ C("div", {
+			Q.clonedComponents && Q.clonedComponents.length > 0 && /* @__PURE__ */ w(f, { children: [/* @__PURE__ */ w("div", {
 				className: "p-4 border-b border-border-default flex items-center gap-2",
 				children: [
-					/* @__PURE__ */ S(y, { className: "size-5" }),
-					/* @__PURE__ */ S("h3", {
+					/* @__PURE__ */ C(_, { className: "size-5" }),
+					/* @__PURE__ */ C("h3", {
 						className: "font-semibold text-text-primary",
-						children: N("template.createdComponents", "Created Components")
+						children: F("template.createdComponents", "Created Components")
 					}),
-					/* @__PURE__ */ C("span", {
+					/* @__PURE__ */ w("span", {
 						className: "ml-auto text-xs text-text-muted",
 						children: [
 							Q.clonedComponents.length,
@@ -341,33 +342,33 @@ function k() {
 						]
 					})
 				]
-			}), /* @__PURE__ */ S("div", {
+			}), /* @__PURE__ */ C("div", {
 				className: "divide-y divide-border-default",
-				children: Q.clonedComponents.map((e) => /* @__PURE__ */ C("button", {
+				children: Q.clonedComponents.map((e) => /* @__PURE__ */ w("button", {
 					type: "button",
-					onClick: () => A(`/components/${e.id}`),
+					onClick: () => O(`/components/${e.id}`),
 					className: "flex items-center gap-3 w-full text-left px-4 py-3 hover:bg-bg-sunken transition-colors",
 					children: [
-						/* @__PURE__ */ S("div", {
+						/* @__PURE__ */ C("div", {
 							className: "size-8 rounded-md bg-action-primary-bg/10 flex items-center justify-center flex-shrink-0",
-							children: /* @__PURE__ */ S(b, { className: "size-4 text-action-primary-bg" })
+							children: /* @__PURE__ */ C(v, { className: "size-4 text-action-primary-bg" })
 						}),
-						/* @__PURE__ */ C("div", {
+						/* @__PURE__ */ w("div", {
 							className: "flex-1 min-w-0",
-							children: [/* @__PURE__ */ S("p", {
+							children: [/* @__PURE__ */ C("p", {
 								className: "text-sm font-medium text-text-primary truncate",
 								children: e.name
-							}), /* @__PURE__ */ C("p", {
+							}), /* @__PURE__ */ w("p", {
 								className: "text-xs text-text-secondary",
 								children: [
 									e.type,
 									" · ",
 									e.lifecycle,
-									e.repositoryUrl && /* @__PURE__ */ C(ge, { children: [
+									e.repositoryUrl && /* @__PURE__ */ w(he, { children: [
 										" ",
 										"·",
 										" ",
-										/* @__PURE__ */ S("span", {
+										/* @__PURE__ */ C("span", {
 											className: "font-mono",
 											children: e.repositoryUrl.replace("https://github.com/", "")
 										})
@@ -375,22 +376,22 @@ function k() {
 								]
 							})]
 						}),
-						/* @__PURE__ */ S("span", {
+						/* @__PURE__ */ C("span", {
 							className: "text-xs text-text-muted flex-shrink-0",
 							children: new Date(e.createdAt).toLocaleDateString()
 						})
 					]
 				}, e.id))
 			})] }),
-			Array.isArray(Q.variables) && Q.variables.length > 0 && /* @__PURE__ */ C(f, { children: [/* @__PURE__ */ C("div", {
+			Array.isArray(Q.variables) && Q.variables.length > 0 && /* @__PURE__ */ w(f, { children: [/* @__PURE__ */ w("div", {
 				className: "p-4 border-b border-border-default flex items-center gap-2",
 				children: [
-					/* @__PURE__ */ S(fe, { className: "size-5" }),
-					/* @__PURE__ */ S("h3", {
+					/* @__PURE__ */ C(de, { className: "size-5" }),
+					/* @__PURE__ */ C("h3", {
 						className: "font-semibold text-text-primary",
-						children: N("template.variables", "Template Variables")
+						children: F("template.variables", "Template Variables")
 					}),
-					/* @__PURE__ */ C("span", {
+					/* @__PURE__ */ w("span", {
 						className: "ml-auto text-xs text-text-muted",
 						children: [
 							Q.variables.length,
@@ -399,94 +400,95 @@ function k() {
 						]
 					})
 				]
-			}), /* @__PURE__ */ S("div", {
+			}), /* @__PURE__ */ C("div", {
 				className: "divide-y divide-border-default",
-				children: Q.variables.map((e) => /* @__PURE__ */ C("div", {
+				children: Q.variables.map((e) => /* @__PURE__ */ w("div", {
 					className: "px-4 py-3 flex items-start gap-4",
-					children: [/* @__PURE__ */ C("div", {
+					children: [/* @__PURE__ */ w("div", {
 						className: "flex-1 min-w-0",
 						children: [
-							/* @__PURE__ */ C("div", {
+							/* @__PURE__ */ w("div", {
 								className: "flex items-center gap-2",
 								children: [
-									/* @__PURE__ */ S("span", {
+									/* @__PURE__ */ C("span", {
 										className: "text-sm font-medium text-text-primary font-mono",
 										children: e.name
 									}),
-									e.required && /* @__PURE__ */ S("span", {
+									e.required && /* @__PURE__ */ C("span", {
 										className: "text-xs bg-status-error-bg text-status-error-text px-1.5 py-0.5 rounded",
 										children: "required"
 									}),
-									/* @__PURE__ */ S("span", {
+									/* @__PURE__ */ C("span", {
 										className: "text-xs bg-bg-sunken text-text-muted px-1.5 py-0.5 rounded",
 										children: e.type
 									})
 								]
 							}),
-							e.title && e.title !== e.name && /* @__PURE__ */ S("p", {
+							e.title && e.title !== e.name && /* @__PURE__ */ C("p", {
 								className: "text-xs text-text-secondary mt-0.5",
 								children: e.title
 							}),
-							e.default && /* @__PURE__ */ C("p", {
+							e.default && /* @__PURE__ */ w("p", {
 								className: "text-xs text-text-muted mt-0.5",
-								children: ["Default: ", /* @__PURE__ */ S("span", {
+								children: ["Default: ", /* @__PURE__ */ C("span", {
 									className: "font-mono",
 									children: e.default
 								})]
 							})
 						]
-					}), e.options.length > 0 && /* @__PURE__ */ S("div", {
+					}), e.options.length > 0 && /* @__PURE__ */ C("div", {
 						className: "flex flex-wrap gap-1",
-						children: e.options.map((e) => /* @__PURE__ */ S("span", {
+						children: e.options.map((e) => /* @__PURE__ */ C("span", {
 							className: "text-xs bg-bg-sunken text-text-secondary px-1.5 py-0.5 rounded",
 							children: e
 						}, e))
 					})]
 				}, e.name))
 			})] }),
-			Q.setupInstructions && /* @__PURE__ */ C(f, { children: [/* @__PURE__ */ S("div", {
+			Q.setupInstructions && /* @__PURE__ */ w(f, { children: [/* @__PURE__ */ C("div", {
 				className: "p-4 border-b border-border-default",
-				children: /* @__PURE__ */ S("h3", {
+				children: /* @__PURE__ */ C("h3", {
 					className: "font-semibold text-text-primary",
-					children: N("template.setupInstructions", "Setup Instructions")
+					children: F("template.setupInstructions", "Setup Instructions")
 				})
-			}), /* @__PURE__ */ S("div", {
+			}), /* @__PURE__ */ C("div", {
 				className: "p-4",
-				children: /* @__PURE__ */ S("div", {
+				children: /* @__PURE__ */ C("div", {
 					className: "prose prose-sm max-w-none text-text-primary",
-					children: /* @__PURE__ */ S("pre", {
+					children: /* @__PURE__ */ C("pre", {
 						className: "bg-bg-sunken rounded-md p-4 text-xs sm:text-sm overflow-x-auto whitespace-pre-wrap font-mono text-text-primary",
 						children: Q.setupInstructions
 					})
 				})
 			})] }),
-			Q.fileTree && /* @__PURE__ */ C(f, { children: [/* @__PURE__ */ S("div", {
+			Q.fileTree && /* @__PURE__ */ w(f, { children: [/* @__PURE__ */ C("div", {
 				className: "p-4 border-b border-border-default",
-				children: /* @__PURE__ */ C("h3", {
+				children: /* @__PURE__ */ w("h3", {
 					className: "font-semibold text-text-primary flex items-center gap-2",
-					children: [/* @__PURE__ */ S(oe, { className: "size-5" }), N("template.fileTree", "File Tree")]
+					children: [/* @__PURE__ */ C(y, { className: "size-5" }), F("template.fileTree", "File Tree")]
 				})
-			}), /* @__PURE__ */ S("div", {
+			}), /* @__PURE__ */ C("div", {
 				className: "p-4",
-				children: /* @__PURE__ */ S("pre", {
+				children: /* @__PURE__ */ C("pre", {
 					className: "bg-bg-sunken rounded-md p-4 text-xs sm:text-sm overflow-x-auto font-mono text-text-primary",
 					children: typeof Q.fileTree == "string" ? Q.fileTree : JSON.stringify(Q.fileTree, null, 2)
 				})
 			})] }),
-			P && /* @__PURE__ */ S(p, {
+			I && M && /* @__PURE__ */ C(ie, {
 				templateName: Q.name,
 				variables: Array.isArray(Q.variables) ? Q.variables : [],
 				sourceRepoUrl: Q.sourceRepositoryUrl || Q.componentSnapshot?.repositoryUrl || Q.sourceComponent?.repositoryUrl || null,
-				githubConnections: we,
-				onClose: () => F(!1),
+				githubConnections: Oe,
+				onClose: () => L(!1),
 				onSubmit: async (e) => {
-					F(!1), K({
+					if (!M) return;
+					L(!1), q({
 						stage: "Creating component…",
 						done: !1,
 						error: !1
 					});
-					let t = await be({ variables: {
-						templateId: k,
+					let t = await we({ variables: {
+						templateId: D,
 						input: {
 							name: e.name,
 							description: e.description || void 0,
@@ -494,7 +496,7 @@ function k() {
 						}
 					} });
 					if (t.error && c(t.error)) {
-						K(null), L(!0);
+						q(null), R(!0);
 						return;
 					}
 					let n = t.data?.instantiateVibecontrolsTemplate?.id;
@@ -506,12 +508,12 @@ function k() {
 						let t = e.githubConfig, r = Q?.componentSnapshot?.repositoryUrl, i = Q?.sourceRepositoryUrl || r || Q?.sourceComponent?.repositoryUrl || void 0;
 						try {
 							if (t.connectionId) {
-								K({
+								q({
 									stage: i ? "Forking repository via connected account…" : "Creating GitHub repository via connected account…",
 									done: !1,
 									error: !1
 								});
-								let r = (await Se({ variables: { input: {
+								let r = (await Ee({ variables: { input: {
 									connectionId: t.connectionId,
 									sourceRepoUrl: i || void 0,
 									repoName: t.repoName,
@@ -520,27 +522,27 @@ function k() {
 									orgName: t.orgName || void 0,
 									description: e.description || `Created from VibeControls template: ${Q?.name}`
 								} } })).data?.forkVibecontrolsGitHubRepo;
-								r ? (K({
+								r ? (q({
 									stage: r.isForked ? "Repository forked!" : "Repository created!",
 									done: !0,
 									error: !1
 								}), await Z({ variables: {
 									id: n,
 									input: { repositoryUrl: r.repoUrl }
-								} }), await new Promise((e) => setTimeout(e, 1200))) : (K({
+								} }), await new Promise((e) => setTimeout(e, 1200))) : (q({
 									stage: "GitHub repo creation failed — check your connected account",
 									done: !1,
 									error: !0
-								}), setTimeout(() => K(null), 6e3));
+								}), setTimeout(() => q(null), 6e3));
 							} else {
 								let r = {
 									Authorization: `Bearer ${t.token}`,
 									"Content-Type": "application/json",
 									Accept: "application/vnd.github+json",
 									"X-GitHub-Api-Version": "2022-11-28"
-								}, a = "https://api.github.com", o = i ? E(i) : null, s = null, c = !1;
+								}, a = "https://api.github.com", o = i ? ge(i) : null, s = null, c = !1;
 								if (o) {
-									K({
+									q({
 										stage: `Forking ${o.owner}/${o.repo}…`,
 										done: !1,
 										error: !1
@@ -557,11 +559,11 @@ function k() {
 									if (e.ok) s = await e.json(), c = !0;
 									else {
 										let t = await e.json();
-										K(null), W(`Could not fork ${i} (${e.status}: ${t.message ?? e.statusText}) — creating a new empty repository instead.`), setTimeout(() => W(null), 1e4);
+										q(null), G(`Could not fork ${i} (${e.status}: ${t.message ?? e.statusText}) — creating a new empty repository instead.`), setTimeout(() => G(null), 1e4);
 									}
 								}
 								if (!s) {
-									K({
+									q({
 										stage: "Creating GitHub repository…",
 										done: !1,
 										error: !1
@@ -576,86 +578,86 @@ function k() {
 											description: e.description || `Created from VibeControls template: ${Q?.name}`
 										})
 									});
-									i.ok ? s = await i.json() : (K({
+									i.ok ? s = await i.json() : (q({
 										stage: `GitHub repo failed: ${(await i.json()).message ?? i.statusText}`,
 										done: !1,
 										error: !0
-									}), setTimeout(() => K(null), 6e3));
+									}), setTimeout(() => q(null), 6e3));
 								}
-								s ? (c || (K({
+								s ? (c || (q({
 									stage: "Scaffolding README…",
 									done: !1,
 									error: !1
-								}), await D(s.full_name, r, e, Q)), K({
+								}), await _e(s.full_name, r, e, Q)), q({
 									stage: c ? "Repository forked!" : "Repository created!",
 									done: !0,
 									error: !1
 								}), await Z({ variables: {
 									id: n,
 									input: { repositoryUrl: s.html_url }
-								} }), await new Promise((e) => setTimeout(e, 1200)), K(null)) : (await new Promise((e) => setTimeout(e, 3e3)), K(null));
+								} }), await new Promise((e) => setTimeout(e, 1200)), q(null)) : (await new Promise((e) => setTimeout(e, 3e3)), q(null));
 							}
 						} catch {
-							K({
+							q({
 								stage: "GitHub repo creation failed — check your credentials",
 								done: !1,
 								error: !0
-							}), setTimeout(() => K(null), 6e3);
+							}), setTimeout(() => q(null), 6e3);
 						}
 					}
-					K(null), n ? A(`/components/${n}`) : (V(N("template.clonedSuccess", "Component created — check Components list")), setTimeout(() => V(null), 4e3));
+					q(null), n ? O(`/components/${n}`) : (H(F("template.clonedSuccess", "Component created — check Components list")), setTimeout(() => H(null), 4e3));
 				}
 			}),
-			/* @__PURE__ */ S(s, {
-				isOpen: I,
-				onClose: () => L(!1),
+			/* @__PURE__ */ C(s, {
+				isOpen: ye,
+				onClose: () => R(!1),
 				onConfirm: () => {
-					L(!1), A("/billing/plans");
+					R(!1), O("/billing/plans");
 				},
 				title: "Component Quota Reached",
 				message: "You've reached the maximum number of components on your current plan. Upgrade your plan or purchase an add-on to create more components."
 			}),
-			/* @__PURE__ */ S(o, {
-				isOpen: _e,
-				onClose: () => R(!1),
+			/* @__PURE__ */ C(o, {
+				isOpen: be,
+				onClose: () => z(!1),
 				onConfirm: async () => {
-					if (k) {
-						z(!0);
+					if (D) {
+						B(!0);
 						try {
-							await xe({ variables: { id: k } }), R(!1), A("/templates");
+							await Te({ variables: { id: D } }), z(!1), O("/templates");
 						} finally {
-							z(!1);
+							B(!1);
 						}
 					}
 				},
-				title: N("template.deleteTemplate", "Delete Template"),
-				message: N("template.deleteConfirmMessage", `Are you sure you want to delete template "${Q.name}"? Existing instantiated components are unaffected, but the template will no longer be available for cloning. This cannot be undone.`),
-				confirmLabel: N("common.delete", "Delete"),
+				title: F("template.deleteTemplate", "Delete Template"),
+				message: F("template.deleteConfirmMessage", `Are you sure you want to delete template "${Q.name}"? Existing instantiated components are unaffected, but the template will no longer be available for cloning. This cannot be undone.`),
+				confirmLabel: F("common.delete", "Delete"),
 				variant: "danger",
-				isLoading: ve
+				isLoading: xe
 			})
 		]
-	}) : /* @__PURE__ */ C(w, {
+	}) : /* @__PURE__ */ w(T, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
-		children: [/* @__PURE__ */ C("button", {
+		children: [/* @__PURE__ */ w("button", {
 			type: "button",
 			onClick: $,
 			className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
-			children: [/* @__PURE__ */ S(_, { className: "size-4" }), N("template.backToTemplates", "Back to Templates")]
-		}), /* @__PURE__ */ S(te, {
-			icon: /* @__PURE__ */ S(b, { className: "size-8 text-text-secondary" }),
-			title: N("template.notFound", "Template not found"),
-			description: `No template with ID "${k}" exists`,
-			action: /* @__PURE__ */ S("button", {
+			children: [/* @__PURE__ */ C(g, { className: "size-4" }), F("template.backToTemplates", "Back to Templates")]
+		}), /* @__PURE__ */ C(d, {
+			icon: /* @__PURE__ */ C(v, { className: "size-8 text-text-secondary" }),
+			title: F("template.notFound", "Template not found"),
+			description: `No template with ID "${D}" exists`,
+			action: /* @__PURE__ */ C("button", {
 				type: "button",
 				onClick: $,
 				className: "px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors",
-				children: N("template.backToTemplates", "Back to Templates")
+				children: F("template.backToTemplates", "Back to Templates")
 			})
 		})]
 	});
 }
 //#endregion
-export { k as TemplateDetailPage };
+export { D as TemplateDetailPage };
 
 //# sourceMappingURL=TemplateDetailPage.js.map