@burdenoff/microfe-store 2026.624.6 → 2026.625.1

package/dist/pages/ProductDetailPage.js

@@ -9,6 +9,7 @@ import { useCallback as a, useEffect as le, useMemo as ue, useRef as de, useStat
 import { AlertCircle as s, ArrowLeft as fe, Check as pe, Loader2 as me, Package as he, ShieldCheck as c, ShoppingCart as ge, Star as l, ThumbsUp as u } from "lucide-react";
 import { Fragment as _e, jsx as d, jsxs as f } from "react/jsx-runtime";
 import { useLocation as ve, useNavigate as ye, useParams as be } from "react-router-dom";
+import { GlassCard as p } from "@burdenoff/fe-libs/ui";
 import { useEventBus as xe } from "@burdenoff/fe-libs/shared/events";
 //#region src/pages/ProductDetailPage.tsx
 var Se = (e, t) => ({
@@ -103,7 +104,7 @@ var Se = (e, t) => ({
 		})
 	]
 }), we = ({ review: e, onMarkHelpful: t, markingHelpful: n }) => /* @__PURE__ */ f("div", {
-	className: "rounded-lg border border-border-default bg-bg-surface p-4",
+	className: "rounded-lg border border-border-seam bg-bg-surface p-4 transition-[box-shadow,border-color] hover:border-border-strong hover:shadow-[var(--shadow-pop)]",
 	children: [
 		/* @__PURE__ */ d("div", {
 			className: "mb-3 flex items-start justify-between",
@@ -243,7 +244,7 @@ var Se = (e, t) => ({
 					className: "mb-4 flex items-center gap-2",
 					children: [/* @__PURE__ */ d("div", { className: "size-5 animate-pulse rounded bg-bg-sunken" }), /* @__PURE__ */ d("div", { className: "h-6 w-32 animate-pulse rounded bg-bg-sunken" })]
 				}), /* @__PURE__ */ f("div", {
-					className: "animate-pulse rounded-lg border border-border-default bg-bg-surface p-4",
+					className: "animate-pulse rounded-lg border border-border-seam bg-bg-surface p-4",
 					children: [/* @__PURE__ */ f("div", {
 						className: "space-y-2",
 						children: [
@@ -276,7 +277,7 @@ var Se = (e, t) => ({
 					/* @__PURE__ */ f("div", {
 						className: "mb-6 flex flex-col gap-6 md:flex-row",
 						children: [/* @__PURE__ */ d("div", {
-							className: "animate-pulse rounded-lg border border-border-default bg-bg-surface p-4 md:w-64",
+							className: "animate-pulse rounded-lg border border-border-seam bg-bg-surface p-4 md:w-64",
 							children: /* @__PURE__ */ f("div", {
 								className: "flex items-center gap-6",
 								children: [/* @__PURE__ */ f("div", {
@@ -318,7 +319,7 @@ var Se = (e, t) => ({
 					/* @__PURE__ */ d("div", {
 						className: "space-y-4",
 						children: [...[, ,]].map((e, t) => /* @__PURE__ */ f("div", {
-							className: "animate-pulse rounded-lg border border-border-default bg-bg-surface p-4",
+							className: "animate-pulse rounded-lg border border-border-seam bg-bg-surface p-4",
 							children: [/* @__PURE__ */ f("div", {
 								className: "mb-3 flex items-start gap-3",
 								children: [/* @__PURE__ */ d("div", { className: "size-10 rounded-full bg-bg-sunken" }), /* @__PURE__ */ f("div", {
@@ -351,7 +352,7 @@ var Se = (e, t) => ({
 					className: "mb-4 flex items-center gap-2",
 					children: [/* @__PURE__ */ d("div", { className: "size-5 animate-pulse rounded bg-bg-sunken" }), /* @__PURE__ */ d("div", { className: "h-6 w-48 animate-pulse rounded bg-bg-sunken" })]
 				}), /* @__PURE__ */ d("div", {
-					className: "animate-pulse rounded-lg border border-border-default bg-bg-surface p-4",
+					className: "animate-pulse rounded-lg border border-border-seam bg-bg-surface p-4",
 					children: /* @__PURE__ */ d("div", {
 						className: "grid gap-4 md:grid-cols-2",
 						children: [...[
@@ -381,7 +382,7 @@ var Se = (e, t) => ({
 						,
 						,
 					]].map((e, t) => /* @__PURE__ */ d("div", {
-						className: "animate-pulse rounded-lg border border-border-default bg-bg-surface p-3",
+						className: "animate-pulse rounded-lg border border-border-seam bg-bg-surface p-3",
 						children: /* @__PURE__ */ f("div", {
 							className: "flex items-center gap-3",
 							children: [/* @__PURE__ */ d("div", { className: "size-14 rounded-xl bg-bg-sunken" }), /* @__PURE__ */ f("div", {
@@ -402,7 +403,7 @@ var Se = (e, t) => ({
 			/* @__PURE__ */ f("section", {
 				className: "mb-8",
 				children: [/* @__PURE__ */ d("div", { className: "mb-4 h-6 w-36 animate-pulse rounded bg-bg-sunken" }), /* @__PURE__ */ f("div", {
-					className: "animate-pulse rounded-lg border border-border-default bg-bg-surface p-4",
+					className: "animate-pulse rounded-lg border border-border-seam bg-bg-surface p-4",
 					children: [/* @__PURE__ */ f("div", {
 						className: "flex items-center gap-4",
 						children: [/* @__PURE__ */ d("div", { className: "size-12 rounded-lg bg-bg-sunken" }), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ f("div", {
@@ -448,13 +449,13 @@ var Se = (e, t) => ({
 		]
 	})
 }), De = () => {
-	let { productId: s } = be(), u = ye(), De = ve(), { basePath: p, workspaceId: m } = e(), { addProduct: h, cartItems: Oe, addingToCart: ke, createOrder: Ae, checkingOut: je } = t(), { installations: Me, refetch: g } = ae({
-		filter: ue(() => s && m ? {
+	let { productId: s } = be(), u = ye(), De = ve(), { basePath: m, workspaceId: h } = e(), { addProduct: Oe, cartItems: ke, addingToCart: g, createOrder: Ae, checkingOut: je } = t(), { installations: Me, refetch: Ne } = ae({
+		filter: ue(() => s && h ? {
 			productId: s,
-			workspaceId: m
-		} : void 0, [s, m]),
+			workspaceId: h
+		} : void 0, [s, h]),
 		limit: 1
-	}), Ne = Me.some((e) => e.productId === s && e.workspaceId === m && e.status === "ACTIVE"), { createReview: _, loading: v } = ee(), { updateReview: y, loading: Pe } = ie(), { deleteReview: b, loading: Fe } = te(), { markHelpful: Ie, loading: Le } = ne(), x = xe(), [S, Re] = o(!1), [C, ze] = o(!1), [Be, w] = o(!1), [T, E] = o(null), [D, O] = o(null), [Ve, k] = o("success"), [A, j] = o(!1), [M, N] = o(""), [P, F] = o(""), [I, L] = o(5), [He, R] = o(null), [Ue, z] = o(!1), { data: We, loading: Ge, error: B, refetch: V } = re({
+	}), Pe = Me.some((e) => e.productId === s && e.workspaceId === h && e.status === "ACTIVE"), { createReview: _, loading: Fe } = ee(), { updateReview: Ie, loading: v } = ie(), { deleteReview: y, loading: Le } = te(), { markHelpful: Re, loading: ze } = ne(), b = xe(), [x, Be] = o(!1), [S, Ve] = o(!1), [C, w] = o(!1), [T, E] = o(null), [D, O] = o(null), [He, k] = o("success"), [A, j] = o(!1), [M, N] = o(""), [P, F] = o(""), [I, L] = o(5), [Ue, R] = o(null), [We, z] = o(!1), { data: Ge, loading: Ke, error: B, refetch: V } = re({
 		id: s,
 		slug: s,
 		includeReviews: !0,
@@ -462,14 +463,14 @@ var Se = (e, t) => ({
 		includeRelated: !0,
 		relatedLimit: 4,
 		includeVersions: !0
-	}), H = We, U = H?.product, W = H?.publisher, G = Oe.some((e) => e.productId === U?.id), Ke = a(async () => {
+	}), H = Ge, U = H?.product, W = H?.publisher, G = ke.some((e) => e.productId === U?.id), qe = a(async () => {
 		if (U) {
 			if (E(null), G) {
-				u(`${p}/cart`);
+				u(`${m}/cart`);
 				return;
 			}
 			try {
-				await h(Se(U, W), void 0, 1);
+				await Oe(Se(U, W), void 0, 1);
 			} catch (e) {
 				console.error("Failed to add product to cart:", e), E("Failed to add this product to cart. Please try again.");
 			}
@@ -477,11 +478,11 @@ var Se = (e, t) => ({
 	}, [
 		U,
 		W,
-		h,
+		Oe,
 		G,
 		u,
-		p
-	]), qe = a(async () => {
+		m
+	]), Je = a(async () => {
 		if (U) {
 			E(null), w(!0);
 			try {
@@ -507,34 +508,34 @@ var Se = (e, t) => ({
 		U,
 		Ae,
 		u
-	]), Je = a(() => {
+	]), Ye = a(() => {
 		U && z(!0);
-	}, [U]), Ye = de(U);
-	Ye.current = U;
-	let Xe = de(x);
-	Xe.current = x, le(() => {
-		let e = Ye.current;
-		e && Xe.current.emit("store.product.viewed", {
+	}, [U]), Xe = de(U);
+	Xe.current = U;
+	let Ze = de(b);
+	Ze.current = b, le(() => {
+		let e = Xe.current;
+		e && Ze.current.emit("store.product.viewed", {
 			productId: e.id,
 			productSlug: e.slug,
 			productType: e.type,
 			pricingModel: e.pricingModel
 		});
 	}, [U?.id]);
-	let Ze = a((e, t) => {
-		U && (x.emit("store.product.installed", {
+	let Qe = a((e, t) => {
+		U && (b.emit("store.product.installed", {
 			productId: U.id,
 			workspaceId: e
-		}), console.log(`Successfully installed ${U.name} to workspace ${t} (${e})`), g());
+		}), console.log(`Successfully installed ${U.name} to workspace ${t} (${e})`), Ne());
 	}, [
 		U,
-		x,
-		g
-	]), Qe = a((e) => {
+		b,
+		Ne
+	]), $e = a((e) => {
 		console.error("Installation failed:", e.message);
-	}, []), $e = a(() => {
+	}, []), et = a(() => {
 		N(H?.userReview?.title ?? ""), F(H?.userReview?.comment ?? ""), L(H?.userReview?.rating ?? 5), O(null), k("success"), j(!0);
-	}, [H?.userReview]), et = a(async () => {
+	}, [H?.userReview]), tt = a(async () => {
 		if (!U) return;
 		if (I < 1 || I > 5) {
 			k("error"), O("Choose a rating from 1 to 5 stars.");
@@ -546,7 +547,7 @@ var Se = (e, t) => ({
 			title: M.trim() || void 0,
 			comment: P.trim() || void 0
 		};
-		if (!(H?.userReview ? await y(H.userReview.id, {
+		if (!(H?.userReview ? await Ie(H.userReview.id, {
 			rating: e.rating,
 			title: e.title,
 			comment: e.comment
@@ -554,12 +555,12 @@ var Se = (e, t) => ({
 			k("error"), O("We could not save your review. Please try again.");
 			return;
 		}
-		k("success"), O(H?.userReview ? "Your review was updated." : "Your review was submitted."), j(!1), x.emit("store.review.submitted", {
+		k("success"), O(H?.userReview ? "Your review was updated." : "Your review was submitted."), j(!1), b.emit("store.review.submitted", {
 			productId: U.id,
 			rating: I
 		}), await V();
 	}, [
-		x,
+		b,
 		_,
 		U,
 		H?.userReview,
@@ -567,32 +568,32 @@ var Se = (e, t) => ({
 		P,
 		I,
 		M,
-		y
-	]), tt = a(async () => {
+		Ie
+	]), nt = a(async () => {
 		if (H?.userReview && (se("medium"), await oe({
 			title: "Delete review",
 			message: "Are you sure you want to remove your review?",
 			okButtonTitle: "Delete",
 			cancelButtonTitle: "Cancel"
 		}) !== !1)) {
-			if (!await b(H.userReview.id)) {
+			if (!await y(H.userReview.id)) {
 				k("error"), O("We could not remove your review. Please try again."), i("error");
 				return;
 			}
 			k("success"), O("Your review was removed."), j(!1), N(""), F(""), L(5), i("success"), await V();
 		}
 	}, [
-		b,
+		y,
 		H?.userReview,
 		V
-	]), nt = a(async (e) => {
-		R(e), await Ie(e) && await V(), R(null);
-	}, [Ie, V]);
-	if (Ge) return /* @__PURE__ */ d(Te, {});
+	]), rt = a(async (e) => {
+		R(e), await Re(e) && await V(), R(null);
+	}, [Re, V]);
+	if (Ke) return /* @__PURE__ */ d(Te, {});
 	if (B) return /* @__PURE__ */ d(Ee, {
 		error: B,
 		onRetry: V,
-		onBack: () => u(`${p}/marketplace`)
+		onBack: () => u(`${m}/marketplace`)
 	});
 	if (!H?.product) return /* @__PURE__ */ d("div", {
 		className: "flex h-full items-center justify-center",
@@ -609,14 +610,14 @@ var Se = (e, t) => ({
 				}),
 				/* @__PURE__ */ d("button", {
 					type: "button",
-					onClick: () => u(`${p}/marketplace`),
+					onClick: () => u(`${m}/marketplace`),
 					className: "rounded-lg bg-action-primary-bg px-4 py-2 text-action-primary-text transition-opacity hover:opacity-90",
 					children: "Back to Marketplace"
 				})
 			]
 		})
 	});
-	let { reviews: K, reviewsCount: rt, relatedProducts: q, ratingDistribution: J, isPurchased: Y, userEntitlement: X } = H, Z = U, Q = J ? J.fiveStars + J.fourStars + J.threeStars + J.twoStars + J.oneStar : 0, it = J ? [
+	let { reviews: K, reviewsCount: it, relatedProducts: q, ratingDistribution: J, isPurchased: Y, userEntitlement: X } = H, Z = U, Q = J ? J.fiveStars + J.fourStars + J.threeStars + J.twoStars + J.oneStar : 0, at = J ? [
 		{
 			stars: 5,
 			count: J.fiveStars,
@@ -642,7 +643,7 @@ var Se = (e, t) => ({
 			count: J.oneStar,
 			percentage: Q > 0 ? J.oneStar / Q * 100 : 0
 		}
-	] : [], at = Z.requiredPermissions || [], ot = Z.integrationDeps || [], st = () => Z.pricingModel === "FREE" ? "Free" : Z.pricingModel === "SUBSCRIPTION" ? `${r(Z.price, Z.currency)}/mo` : r(Z.price, Z.currency), $ = Z.pricingModel === "FREE" || Z.price === 0;
+	] : [], ot = Z.requiredPermissions || [], st = Z.integrationDeps || [], ct = () => Z.pricingModel === "FREE" ? "Free" : Z.pricingModel === "SUBSCRIPTION" ? `${r(Z.price, Z.currency)}/mo` : r(Z.price, Z.currency), $ = Z.pricingModel === "FREE" || Z.price === 0;
 	return /* @__PURE__ */ f("div", {
 		className: "h-full overflow-y-auto bg-bg-base",
 		children: [
@@ -711,7 +712,7 @@ var Se = (e, t) => ({
 												/* @__PURE__ */ d(l, { className: "size-4 fill-current text-status-warning-text" }),
 												/* @__PURE__ */ f("span", {
 													className: "ml-1 text-xs text-text-muted",
-													children: [n(rt || Z.reviewCount), " reviews"]
+													children: [n(it || Z.reviewCount), " reviews"]
 												})
 											]
 										}),
@@ -744,7 +745,7 @@ var Se = (e, t) => ({
 								}),
 								/* @__PURE__ */ f("div", {
 									className: "mb-6 flex items-center gap-3",
-									children: [Ne ? /* @__PURE__ */ f("button", {
+									children: [Pe ? /* @__PURE__ */ f("button", {
 										type: "button",
 										disabled: !0,
 										className: "flex items-center gap-2 rounded-full bg-status-success-bg-subtle px-8 py-3 font-medium text-status-success-text cursor-default",
@@ -761,26 +762,26 @@ var Se = (e, t) => ({
 										}), "Installed"]
 									}) : Y && !$ ? /* @__PURE__ */ d("button", {
 										type: "button",
-										onClick: Je,
+										onClick: Ye,
 										className: "cursor-pointer rounded-full bg-action-primary-bg px-8 py-3 font-medium text-action-primary-text transition-opacity hover:opacity-90",
 										children: "Install to Workspace"
 									}) : $ ? /* @__PURE__ */ d("button", {
 										type: "button",
-										onClick: Je,
+										onClick: Ye,
 										className: "cursor-pointer rounded-full bg-action-primary-bg px-8 py-3 font-medium text-action-primary-text transition-opacity hover:opacity-90",
 										children: "Install"
 									}) : /* @__PURE__ */ d("button", {
 										type: "button",
-										onClick: qe,
-										disabled: Be || je,
+										onClick: Je,
+										disabled: C || je,
 										className: "cursor-pointer flex items-center gap-2 rounded-full bg-action-primary-bg px-8 py-3 font-medium text-action-primary-text transition-opacity hover:opacity-90 disabled:opacity-70",
-										children: Be || je ? /* @__PURE__ */ f(_e, { children: [/* @__PURE__ */ d(me, { className: "size-4 animate-spin" }), "Processing…"] }) : `Buy ${st()}`
+										children: C || je ? /* @__PURE__ */ f(_e, { children: [/* @__PURE__ */ d(me, { className: "size-4 animate-spin" }), "Processing…"] }) : `Buy ${ct()}`
 									}), !$ && !Y && /* @__PURE__ */ f("button", {
 										type: "button",
-										onClick: Ke,
-										disabled: ke,
+										onClick: qe,
+										disabled: g,
 										className: "cursor-pointer flex items-center gap-2 rounded-full border border-border-default px-4 py-3 text-sm text-text-primary transition-colors hover:bg-bg-sunken disabled:opacity-50",
-										children: [ke ? /* @__PURE__ */ d(me, { className: "size-4 animate-spin" }) : G ? /* @__PURE__ */ d(pe, { className: "size-4 text-status-success-text" }) : /* @__PURE__ */ d(ge, { className: "size-4" }), G ? "In Cart" : "Add to Cart"]
+										children: [g ? /* @__PURE__ */ d(me, { className: "size-4 animate-spin" }) : G ? /* @__PURE__ */ d(pe, { className: "size-4 text-status-success-text" }) : /* @__PURE__ */ d(ge, { className: "size-4" }), G ? "In Cart" : "Add to Cart"]
 									})]
 								}),
 								/* @__PURE__ */ f("p", {
@@ -854,19 +855,19 @@ var Se = (e, t) => ({
 									/* @__PURE__ */ f("div", {
 										className: "text-sm leading-relaxed text-text-secondary",
 										children: [/* @__PURE__ */ d("p", {
-											className: S ? "" : "line-clamp-4",
+											className: x ? "" : "line-clamp-4",
 											children: Z.longDescription || Z.description || "No description available."
 										}), ((Z.longDescription || Z.description)?.length ?? 0) > 200 && /* @__PURE__ */ d("button", {
 											type: "button",
-											onClick: () => Re(!S),
+											onClick: () => Be(!x),
 											className: "cursor-pointer mt-3 text-sm font-medium text-text-link",
-											children: S ? "Show less" : "Show more"
+											children: x ? "Show less" : "Show more"
 										})]
 									}),
 									Z.tags && Z.tags.length > 0 && /* @__PURE__ */ d("div", {
 										className: "mt-4 flex flex-wrap gap-2",
 										children: Z.tags.map((e) => /* @__PURE__ */ d("span", {
-											className: "rounded-full border border-border-default px-3 py-1.5 text-xs text-text-muted transition-colors hover:bg-bg-sunken",
+											className: "rounded-full border border-border-seam px-3 py-1.5 text-xs text-text-muted transition-colors hover:bg-bg-sunken",
 											children: e
 										}, e))
 									})
@@ -882,15 +883,16 @@ var Se = (e, t) => ({
 											children: "Ratings & Reviews"
 										})
 									}),
-									/* @__PURE__ */ f("div", {
-										className: "rounded-xl border border-border-default bg-bg-surface p-5",
+									/* @__PURE__ */ f(p, {
+										treatment: "insight",
+										className: "p-5",
 										children: [K && K.length > 0 ? /* @__PURE__ */ f("div", {
 											className: "flex items-start gap-8",
 											children: [/* @__PURE__ */ f("div", {
 												className: "text-center",
 												children: [
 													/* @__PURE__ */ d("p", {
-														className: "text-5xl font-light text-text-primary",
+														className: "text-5xl font-light tabular-nums text-text-primary",
 														children: (Z.rating || 0).toFixed(1)
 													}),
 													/* @__PURE__ */ d("div", {
@@ -905,12 +907,12 @@ var Se = (e, t) => ({
 													}),
 													/* @__PURE__ */ f("p", {
 														className: "text-sm text-text-muted",
-														children: [n(rt || Z.reviewCount), " reviews"]
+														children: [n(it || Z.reviewCount), " reviews"]
 													})
 												]
-											}), it.length > 0 && /* @__PURE__ */ d("div", {
+											}), at.length > 0 && /* @__PURE__ */ d("div", {
 												className: "flex-1 space-y-1.5",
-												children: it.map((e) => /* @__PURE__ */ d(Ce, { ...e }, e.stars))
+												children: at.map((e) => /* @__PURE__ */ d(Ce, { ...e }, e.stars))
 											})]
 										}) : /* @__PURE__ */ f("div", {
 											className: "flex flex-col items-center justify-center py-6 text-center",
@@ -935,20 +937,20 @@ var Se = (e, t) => ({
 												})
 											]
 										}), /* @__PURE__ */ f("div", {
-											className: "mt-6 border-t border-border-default pt-4",
+											className: "mt-6 border-t border-border-seam pt-4",
 											children: [D && /* @__PURE__ */ d("p", {
-												role: Ve === "success" ? "status" : "alert",
-												className: `mb-3 rounded-lg px-3 py-2 text-sm ${Ve === "success" ? "bg-status-success-bg-subtle text-status-success-text" : "bg-status-error-bg-subtle text-status-error-text"}`,
+												role: He === "success" ? "status" : "alert",
+												className: `mb-3 rounded-lg px-3 py-2 text-sm ${He === "success" ? "bg-status-success-bg-subtle text-status-success-text" : "bg-status-error-bg-subtle text-status-error-text"}`,
 												children: D
 											}), Y || H?.userReview ? /* @__PURE__ */ f("div", {
 												className: "space-y-4",
 												children: [/* @__PURE__ */ d("button", {
 													type: "button",
-													onClick: () => A ? j(!1) : $e(),
+													onClick: () => A ? j(!1) : et(),
 													className: "w-full cursor-pointer py-2 text-center text-sm font-medium text-text-primary transition-colors hover:text-text-link",
 													children: H?.userReview ? A ? "Cancel review editing" : "Edit your review" : A ? "Cancel review" : "Write a Review"
 												}), A && /* @__PURE__ */ f("div", {
-													className: "rounded-xl border border-border-default bg-bg-sunken p-4",
+													className: "rounded-xl border border-border-seam bg-bg-sunken p-4",
 													children: [
 														/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("p", {
 															className: "text-sm font-medium text-text-primary",
@@ -995,16 +997,16 @@ var Se = (e, t) => ({
 															className: "mt-4 flex flex-wrap gap-3",
 															children: [/* @__PURE__ */ d("button", {
 																type: "button",
-																onClick: et,
-																disabled: v || Pe,
+																onClick: tt,
+																disabled: Fe || v,
 																className: "cursor-pointer rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60",
-																children: v || Pe ? "Saving..." : H?.userReview ? "Update Review" : "Submit Review"
+																children: Fe || v ? "Saving..." : H?.userReview ? "Update Review" : "Submit Review"
 															}), H?.userReview && /* @__PURE__ */ d("button", {
 																type: "button",
-																onClick: tt,
-																disabled: Fe,
+																onClick: nt,
+																disabled: Le,
 																className: "cursor-pointer rounded-lg border border-status-error-border px-4 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg-subtle disabled:cursor-not-allowed disabled:opacity-60",
-																children: Fe ? "Removing..." : "Delete Review"
+																children: Le ? "Removing..." : "Delete Review"
 															})]
 														})
 													]
@@ -1019,16 +1021,16 @@ var Se = (e, t) => ({
 										className: "mt-4 space-y-3",
 										children: [/* @__PURE__ */ d("ul", {
 											className: "space-y-3",
-											children: (C ? K : K.slice(0, 2)).map((e) => /* @__PURE__ */ d("li", { children: /* @__PURE__ */ d(we, {
+											children: (S ? K : K.slice(0, 2)).map((e) => /* @__PURE__ */ d("li", { children: /* @__PURE__ */ d(we, {
 												review: e,
-												onMarkHelpful: nt,
-												markingHelpful: Le && He === e.id
+												onMarkHelpful: rt,
+												markingHelpful: ze && Ue === e.id
 											}) }, e.id))
 										}), K.length > 2 && /* @__PURE__ */ d("button", {
 											type: "button",
-											onClick: () => ze(!C),
+											onClick: () => Ve(!S),
 											className: "cursor-pointer text-sm font-medium text-text-link",
-											children: C ? "Show less" : `Show all ${K.length} reviews`
+											children: S ? "Show less" : `Show all ${K.length} reviews`
 										})]
 									}),
 									(!K || K.length === 0) && /* @__PURE__ */ d("p", {
@@ -1037,14 +1039,14 @@ var Se = (e, t) => ({
 									})
 								]
 							}),
-							at.length > 0 && /* @__PURE__ */ f("section", {
+							ot.length > 0 && /* @__PURE__ */ f("section", {
 								className: "mb-8",
 								children: [/* @__PURE__ */ d("h2", {
 									className: "mb-4 text-lg font-medium text-text-primary",
 									children: "Required Permissions"
 								}), /* @__PURE__ */ d("div", {
 									className: "space-y-2",
-									children: at.map((e) => /* @__PURE__ */ f("div", {
+									children: ot.map((e) => /* @__PURE__ */ f("div", {
 										className: "flex items-center gap-3 rounded-lg bg-bg-surface px-4 py-3",
 										children: [/* @__PURE__ */ d(c, { className: "size-5 text-status-success-text" }), /* @__PURE__ */ d("span", {
 											className: "text-sm text-text-primary",
@@ -1053,14 +1055,14 @@ var Se = (e, t) => ({
 									}, e))
 								})]
 							}),
-							ot.length > 0 && /* @__PURE__ */ f("section", {
+							st.length > 0 && /* @__PURE__ */ f("section", {
 								className: "mb-8",
 								children: [/* @__PURE__ */ d("h2", {
 									className: "mb-4 text-lg font-medium text-text-primary",
 									children: "Integrations"
 								}), /* @__PURE__ */ d("div", {
 									className: "flex flex-wrap gap-2",
-									children: ot.map((e) => /* @__PURE__ */ d("span", {
+									children: st.map((e) => /* @__PURE__ */ d("span", {
 										className: "rounded-lg bg-bg-surface px-4 py-2 text-sm font-medium text-text-primary",
 										children: e
 									}, e))
@@ -1071,8 +1073,9 @@ var Se = (e, t) => ({
 								children: [/* @__PURE__ */ d("h2", {
 									className: "mb-4 text-lg font-medium text-text-primary",
 									children: "Additional Information"
-								}), /* @__PURE__ */ f("div", {
-									className: "grid grid-cols-2 gap-6 md:grid-cols-3",
+								}), /* @__PURE__ */ f(p, {
+									treatment: "metric",
+									className: "grid grid-cols-2 gap-6 p-5 md:grid-cols-3",
 									children: [
 										Z.manifestVersion && /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("p", {
 											className: "text-xs text-text-muted",
@@ -1123,8 +1126,8 @@ var Se = (e, t) => ({
 					}), /* @__PURE__ */ f("div", {
 						className: "w-full lg:w-80",
 						children: [
-							(Z.documentationUrl || Z.repositoryUrl || W?.email) && /* @__PURE__ */ f("div", {
-								className: "mb-6 rounded-xl border border-border-default bg-bg-surface p-4",
+							(Z.documentationUrl || Z.repositoryUrl || W?.email) && /* @__PURE__ */ f(p, {
+								className: "mb-6 p-4",
 								children: [/* @__PURE__ */ d("h3", {
 									className: "font-medium text-text-primary",
 									children: "App support"
@@ -1153,8 +1156,8 @@ var Se = (e, t) => ({
 									]
 								})]
 							}),
-							W && /* @__PURE__ */ f("div", {
-								className: "mb-6 rounded-xl border border-border-default bg-bg-surface p-4",
+							W && /* @__PURE__ */ f(p, {
+								className: "mb-6 p-4",
 								children: [
 									/* @__PURE__ */ d("h3", {
 										className: "font-medium text-text-primary",
@@ -1187,7 +1190,7 @@ var Se = (e, t) => ({
 								className: "space-y-3",
 								children: q.slice(0, 4).map((e) => /* @__PURE__ */ f("button", {
 									type: "button",
-									onClick: () => u(`${p}/marketplace/product/${e.id}`),
+									onClick: () => u(`${m}/marketplace/product/${e.id}`),
 									className: "flex w-full cursor-pointer items-center gap-3 rounded-lg p-2 text-left transition-colors hover:bg-bg-sunken",
 									children: [e.icon ? /* @__PURE__ */ d("img", {
 										src: e.icon,
@@ -1223,7 +1226,7 @@ var Se = (e, t) => ({
 				})
 			}),
 			Z && /* @__PURE__ */ d(ce, {
-				isOpen: Ue,
+				isOpen: We,
 				onClose: () => z(!1),
 				app: {
 					id: Z.id,
@@ -1234,8 +1237,8 @@ var Se = (e, t) => ({
 					version: Z.manifestVersion
 				},
 				purchaseState: Y && !$ ? "purchased" : "free",
-				onInstallSuccess: Ze,
-				onInstallError: Qe
+				onInstallSuccess: Qe,
+				onInstallError: $e
 			})
 		]
 	});