@burdenoff/microfe-vibecontrols 2026.601.21 → 2026.601.23

package/dist/pages/TemplateDetailPage.js

@@ -10,15 +10,17 @@ import { EmptyState as te } 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 { PageSkeleton as re } from "../components/shared/PageSkeleton.js";
-import { TemplateWizard as ie } from "../components/templates/TemplateWizard.js";
+import { EntityShareButton as re } 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 "../components/templates/index.js";
-import { useCallback as ae, useState as p } from "react";
-import { useI18n as m } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { ArrowLeft as h, CheckCircle2 as g, Clock as _, Copy as v, FileCode as y, FolderTree as oe, Github as se, Layers as ce, Loader2 as le, RefreshCw as ue, Tag as b, Trash2 as x, 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 S, jsxs as C } from "react/jsx-runtime";
+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";
 //#region src/pages/TemplateDetailPage.tsx
 function T(e, t) {
@@ -89,14 +91,14 @@ var O = {
 	CUSTOM: "bg-bg-sunken text-text-secondary"
 };
 function k() {
-	let { t: T } = m(), { id: k } = pe(), A = l(), { hasPermission: j, isLoading: M } = me(), N = ae((e, t) => {
+	let { t: T } = g(), { id: k } = me(), A = l(), { hasPermission: j, isLoading: M } = he(), N = m((e, t) => {
 		let n = T(e);
 		return n === e ? t : n;
-	}, [T]), [P, F] = p(!1), [I, L] = p(!1), [R, z] = p(!1), [ge, B] = p(!1), [V, H] = p(null), [U, _e] = p(null), [W, G] = p(null), [K, q] = p(null), { data: ve, loading: J, error: Y, refetch: X } = 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,
 		fetchPolicy: "cache-and-network"
-	}), [ye] = r({ refetchQueries: ["ListComponents"] }), [be] = e({ refetchQueries: ["ListTemplates"] }), [Z] = a(), [xe] = t(), { data: Se } = i({
+	}), [be] = r({ refetchQueries: ["ListComponents"] }), [xe] = e({ refetchQueries: ["ListTemplates"] }), [Z] = a(), [Se] = t(), { data: Ce } = i({
 		variables: {
 			filter: { status: "ACTIVE" },
 			pagination: {
@@ -105,7 +107,7 @@ function k() {
 			}
 		},
 		fetchPolicy: "cache-first"
-	}), Ce = (Se?.getConnections?.items ?? []).filter((e) => e.provider?.key === "github").map((e) => ({
+	}), we = (Ce?.getConnections?.items ?? []).filter((e) => e.provider?.key === "github").map((e) => ({
 		id: e.id,
 		name: e.name,
 		externalAccountEmail: e.externalAccountEmail,
@@ -114,7 +116,7 @@ function k() {
 			key: e.provider.key,
 			name: e.provider.name
 		}
-	})), Q = ve?.vibecontrolsTemplate ?? null;
+	})), Q = q?.vibecontrolsTemplate ?? null;
 	if (M) return /* @__PURE__ */ S("div", {
 		className: "flex items-center justify-center min-h-[400px]",
 		children: /* @__PURE__ */ S("p", {
@@ -144,15 +146,15 @@ function k() {
 			type: "button",
 			onClick: $,
 			className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
-			children: [/* @__PURE__ */ S(h, { className: "size-4" }), N("template.backToTemplates", "Back to Templates")]
-		}), /* @__PURE__ */ S(re, { variant: "detail" })]
+			children: [/* @__PURE__ */ S(_, { className: "size-4" }), N("template.backToTemplates", "Back to Templates")]
+		}), /* @__PURE__ */ S(ie, { variant: "detail" })]
 	}) : Y && !Q ? /* @__PURE__ */ C(w, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
 		children: [/* @__PURE__ */ C("button", {
 			type: "button",
 			onClick: $,
 			className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
-			children: [/* @__PURE__ */ S(h, { className: "size-4" }), N("template.backToTemplates", "Back to Templates")]
+			children: [/* @__PURE__ */ S(_, { className: "size-4" }), N("template.backToTemplates", "Back to Templates")]
 		}), /* @__PURE__ */ S(u, {
 			title: N("template.failedLoad", "Failed to load template"),
 			message: Y.message,
@@ -161,26 +163,26 @@ function k() {
 	}) : Q ? /* @__PURE__ */ C(w, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
 		children: [
-			V && /* @__PURE__ */ S("div", {
+			B && /* @__PURE__ */ S("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: V
+				children: B
 			}),
-			W && /* @__PURE__ */ S("div", {
+			U && /* @__PURE__ */ S("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: W
+				children: U
 			}),
-			U && /* @__PURE__ */ S("div", {
+			H && /* @__PURE__ */ S("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: U
+				children: H
 			}),
-			K && /* @__PURE__ */ S("div", {
+			G && /* @__PURE__ */ S("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", {
 					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: [K.done ? /* @__PURE__ */ S(g, { className: "size-10 text-status-success-text" }) : K.error ? /* @__PURE__ */ S(fe, { className: "size-10 text-status-error-text" }) : /* @__PURE__ */ S(le, { className: "size-10 text-action-primary-bg animate-spin" }), /* @__PURE__ */ S("p", {
+					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", {
 						className: "text-sm font-medium text-text-primary text-center",
-						children: K.stage
+						children: G.stage
 					})]
 				})
 			}),
@@ -188,7 +190,7 @@ function k() {
 				type: "button",
 				onClick: $,
 				className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
-				children: [/* @__PURE__ */ S(h, { className: "size-4" }), N("template.backToTemplates", "Back to Templates")]
+				children: [/* @__PURE__ */ S(_, { className: "size-4" }), N("template.backToTemplates", "Back to Templates")]
 			}),
 			/* @__PURE__ */ S(ee, {
 				title: Q.name,
@@ -196,6 +198,15 @@ function k() {
 				actions: /* @__PURE__ */ C("div", {
 					className: "flex items-center gap-2 flex-wrap",
 					children: [
+						/* @__PURE__ */ S(re, {
+							entity: "template",
+							resource: {
+								id: Q.id,
+								name: Q.name
+							},
+							label: N("template.share", "Share"),
+							variant: "button"
+						}),
 						/* @__PURE__ */ S("button", {
 							type: "button",
 							onClick: () => X(),
@@ -208,15 +219,15 @@ function k() {
 							type: "button",
 							onClick: () => F(!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(v, { className: "size-4" }), N("template.useTemplate", "Use Template")]
+							children: [/* @__PURE__ */ S(y, { className: "size-4" }), N("template.useTemplate", "Use Template")]
 						}),
 						/* @__PURE__ */ C("button", {
 							type: "button",
 							"data-testid": "template-delete-button",
-							onClick: () => z(!0),
+							onClick: () => R(!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(x, {
+							children: [/* @__PURE__ */ S(de, {
 								className: "size-4",
 								"aria-hidden": "true"
 							}), N("common.delete", "Delete")]
@@ -245,7 +256,7 @@ function k() {
 					/* @__PURE__ */ C("span", {
 						className: "inline-flex items-center gap-1.5 text-sm text-text-secondary",
 						children: [
-							/* @__PURE__ */ S(v, { className: "size-3.5" }),
+							/* @__PURE__ */ S(y, { className: "size-3.5" }),
 							Q.cloneCount,
 							" ",
 							N("template.clones", "clones")
@@ -261,7 +272,7 @@ function k() {
 					}),
 					/* @__PURE__ */ C("span", {
 						className: "inline-flex items-center gap-1.5 text-sm text-text-secondary",
-						children: [/* @__PURE__ */ S(_, { className: "size-3.5" }), new Date(Q.createdAt).toLocaleDateString()]
+						children: [/* @__PURE__ */ S(ae, { className: "size-3.5" }), new Date(Q.createdAt).toLocaleDateString()]
 					})
 				]
 			}),
@@ -269,12 +280,12 @@ function k() {
 				className: "flex flex-wrap gap-2",
 				children: Q.tags.map((e) => /* @__PURE__ */ C("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(b, { className: "size-3" }), e]
+					children: [/* @__PURE__ */ S(x, { className: "size-3" }), e]
 				}, e))
 			}),
 			/* @__PURE__ */ C(f, { children: [/* @__PURE__ */ C("div", {
 				className: "p-4 border-b border-border-default flex items-center gap-2",
-				children: [/* @__PURE__ */ S(b, { className: "size-5" }), /* @__PURE__ */ S("h3", {
+				children: [/* @__PURE__ */ S(x, { className: "size-5" }), /* @__PURE__ */ S("h3", {
 					className: "font-semibold text-text-primary",
 					children: N("template.tags", "Tags")
 				})]
@@ -299,7 +310,7 @@ function k() {
 					className: "flex items-center gap-3 text-left hover:bg-bg-sunken p-2 -m-2 rounded-md transition-colors",
 					children: [/* @__PURE__ */ S("div", {
 						className: "size-10 rounded-lg bg-action-primary-bg/10 flex items-center justify-center flex-shrink-0",
-						children: /* @__PURE__ */ S(y, { className: "size-5 text-action-primary-bg" })
+						children: /* @__PURE__ */ S(b, { className: "size-5 text-action-primary-bg" })
 					}), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
 						className: "font-medium text-text-primary",
 						children: Q.sourceComponent.name
@@ -316,7 +327,7 @@ function k() {
 			Q.clonedComponents && Q.clonedComponents.length > 0 && /* @__PURE__ */ C(f, { children: [/* @__PURE__ */ C("div", {
 				className: "p-4 border-b border-border-default flex items-center gap-2",
 				children: [
-					/* @__PURE__ */ S(v, { className: "size-5" }),
+					/* @__PURE__ */ S(y, { className: "size-5" }),
 					/* @__PURE__ */ S("h3", {
 						className: "font-semibold text-text-primary",
 						children: N("template.createdComponents", "Created Components")
@@ -339,7 +350,7 @@ function k() {
 					children: [
 						/* @__PURE__ */ S("div", {
 							className: "size-8 rounded-md bg-action-primary-bg/10 flex items-center justify-center flex-shrink-0",
-							children: /* @__PURE__ */ S(y, { className: "size-4 text-action-primary-bg" })
+							children: /* @__PURE__ */ S(b, { className: "size-4 text-action-primary-bg" })
 						}),
 						/* @__PURE__ */ C("div", {
 							className: "flex-1 min-w-0",
@@ -352,7 +363,7 @@ function k() {
 									e.type,
 									" · ",
 									e.lifecycle,
-									e.repositoryUrl && /* @__PURE__ */ C(he, { children: [
+									e.repositoryUrl && /* @__PURE__ */ C(ge, { children: [
 										" ",
 										"·",
 										" ",
@@ -374,7 +385,7 @@ function k() {
 			Array.isArray(Q.variables) && Q.variables.length > 0 && /* @__PURE__ */ C(f, { children: [/* @__PURE__ */ C("div", {
 				className: "p-4 border-b border-border-default flex items-center gap-2",
 				children: [
-					/* @__PURE__ */ S(de, { className: "size-5" }),
+					/* @__PURE__ */ S(fe, { className: "size-5" }),
 					/* @__PURE__ */ S("h3", {
 						className: "font-semibold text-text-primary",
 						children: N("template.variables", "Template Variables")
@@ -462,19 +473,19 @@ function k() {
 					children: typeof Q.fileTree == "string" ? Q.fileTree : JSON.stringify(Q.fileTree, null, 2)
 				})
 			})] }),
-			P && /* @__PURE__ */ S(ie, {
+			P && /* @__PURE__ */ S(p, {
 				templateName: Q.name,
 				variables: Array.isArray(Q.variables) ? Q.variables : [],
 				sourceRepoUrl: Q.sourceRepositoryUrl || Q.componentSnapshot?.repositoryUrl || Q.sourceComponent?.repositoryUrl || null,
-				githubConnections: Ce,
+				githubConnections: we,
 				onClose: () => F(!1),
 				onSubmit: async (e) => {
-					F(!1), q({
+					F(!1), K({
 						stage: "Creating component…",
 						done: !1,
 						error: !1
 					});
-					let t = await ye({ variables: {
+					let t = await be({ variables: {
 						templateId: k,
 						input: {
 							name: e.name,
@@ -483,7 +494,7 @@ function k() {
 						}
 					} });
 					if (t.error && c(t.error)) {
-						q(null), L(!0);
+						K(null), L(!0);
 						return;
 					}
 					let n = t.data?.instantiateVibecontrolsTemplate?.id;
@@ -495,12 +506,12 @@ function k() {
 						let t = e.githubConfig, r = Q?.componentSnapshot?.repositoryUrl, i = Q?.sourceRepositoryUrl || r || Q?.sourceComponent?.repositoryUrl || void 0;
 						try {
 							if (t.connectionId) {
-								q({
+								K({
 									stage: i ? "Forking repository via connected account…" : "Creating GitHub repository via connected account…",
 									done: !1,
 									error: !1
 								});
-								let r = (await xe({ variables: { input: {
+								let r = (await Se({ variables: { input: {
 									connectionId: t.connectionId,
 									sourceRepoUrl: i || void 0,
 									repoName: t.repoName,
@@ -509,18 +520,18 @@ function k() {
 									orgName: t.orgName || void 0,
 									description: e.description || `Created from VibeControls template: ${Q?.name}`
 								} } })).data?.forkVibecontrolsGitHubRepo;
-								r ? (q({
+								r ? (K({
 									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))) : (q({
+								} }), await new Promise((e) => setTimeout(e, 1200))) : (K({
 									stage: "GitHub repo creation failed — check your connected account",
 									done: !1,
 									error: !0
-								}), setTimeout(() => q(null), 6e3));
+								}), setTimeout(() => K(null), 6e3));
 							} else {
 								let r = {
 									Authorization: `Bearer ${t.token}`,
@@ -529,7 +540,7 @@ function k() {
 									"X-GitHub-Api-Version": "2022-11-28"
 								}, a = "https://api.github.com", o = i ? E(i) : null, s = null, c = !1;
 								if (o) {
-									q({
+									K({
 										stage: `Forking ${o.owner}/${o.repo}…`,
 										done: !1,
 										error: !1
@@ -546,11 +557,11 @@ function k() {
 									if (e.ok) s = await e.json(), c = !0;
 									else {
 										let t = await e.json();
-										q(null), G(`Could not fork ${i} (${e.status}: ${t.message ?? e.statusText}) — creating a new empty repository instead.`), setTimeout(() => G(null), 1e4);
+										K(null), W(`Could not fork ${i} (${e.status}: ${t.message ?? e.statusText}) — creating a new empty repository instead.`), setTimeout(() => W(null), 1e4);
 									}
 								}
 								if (!s) {
-									q({
+									K({
 										stage: "Creating GitHub repository…",
 										done: !1,
 										error: !1
@@ -565,34 +576,34 @@ function k() {
 											description: e.description || `Created from VibeControls template: ${Q?.name}`
 										})
 									});
-									i.ok ? s = await i.json() : (q({
+									i.ok ? s = await i.json() : (K({
 										stage: `GitHub repo failed: ${(await i.json()).message ?? i.statusText}`,
 										done: !1,
 										error: !0
-									}), setTimeout(() => q(null), 6e3));
+									}), setTimeout(() => K(null), 6e3));
 								}
-								s ? (c || (q({
+								s ? (c || (K({
 									stage: "Scaffolding README…",
 									done: !1,
 									error: !1
-								}), await D(s.full_name, r, e, Q)), q({
+								}), await D(s.full_name, r, e, Q)), K({
 									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)), q(null)) : (await new Promise((e) => setTimeout(e, 3e3)), q(null));
+								} }), await new Promise((e) => setTimeout(e, 1200)), K(null)) : (await new Promise((e) => setTimeout(e, 3e3)), K(null));
 							}
 						} catch {
-							q({
+							K({
 								stage: "GitHub repo creation failed — check your credentials",
 								done: !1,
 								error: !0
-							}), setTimeout(() => q(null), 6e3);
+							}), setTimeout(() => K(null), 6e3);
 						}
 					}
-					q(null), n ? A(`/components/${n}`) : (H(N("template.clonedSuccess", "Component created — check Components list")), setTimeout(() => H(null), 4e3));
+					K(null), n ? A(`/components/${n}`) : (V(N("template.clonedSuccess", "Component created — check Components list")), setTimeout(() => V(null), 4e3));
 				}
 			}),
 			/* @__PURE__ */ S(s, {
@@ -605,15 +616,15 @@ function k() {
 				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: R,
-				onClose: () => z(!1),
+				isOpen: _e,
+				onClose: () => R(!1),
 				onConfirm: async () => {
 					if (k) {
-						B(!0);
+						z(!0);
 						try {
-							await be({ variables: { id: k } }), z(!1), A("/templates");
+							await xe({ variables: { id: k } }), R(!1), A("/templates");
 						} finally {
-							B(!1);
+							z(!1);
 						}
 					}
 				},
@@ -621,7 +632,7 @@ function k() {
 				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"),
 				variant: "danger",
-				isLoading: ge
+				isLoading: ve
 			})
 		]
 	}) : /* @__PURE__ */ C(w, {
@@ -630,9 +641,9 @@ function k() {
 			type: "button",
 			onClick: $,
 			className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
-			children: [/* @__PURE__ */ S(h, { className: "size-4" }), N("template.backToTemplates", "Back to Templates")]
+			children: [/* @__PURE__ */ S(_, { className: "size-4" }), N("template.backToTemplates", "Back to Templates")]
 		}), /* @__PURE__ */ S(te, {
-			icon: /* @__PURE__ */ S(y, { className: "size-8 text-text-secondary" }),
+			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", {