@burdenoff/microfe-store 2026.510.113

package/dist/pages/ProductDetailPage.js

@@ -0,0 +1,1205 @@
+import { useStore as e } from "../providers/StoreProvider.js";
+import { useCart as t } from "../hooks/useCart.js";
+import { formatNumber as n, formatPrice as r } from "../utils/index.js";
+import { useCreateReview as ee, useDeleteReview as te, useMarkReviewHelpful as ne, useStoreProductDetails as re, useUpdateReview as ie } from "../hooks/useStoreGraphQL.js";
+import { nativeConfirm as ae, nativeImpact as oe, nativeNotify as i } from "../utils/nativeBridge.js";
+import { InstallAppModal as se } from "../components/InstallAppModal.js";
+import "../components/index.js";
+import { useCallback as a, useEffect as ce, useState as o } from "react";
+import { AlertCircle as s, ArrowLeft as le, Check as ue, Loader2 as c, Package as de, ShieldCheck as l, ShoppingCart as fe, Star as u, ThumbsUp as d } from "lucide-react";
+import { Fragment as pe, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { useNavigate as me, useParams as he } from "react-router-dom";
+import { useEventBus as ge } from "@burdenoff/fe-libs/shared/events";
+//#region src/pages/ProductDetailPage.tsx
+var _e = (e, t) => ({
+	id: e.id,
+	publisherId: t?.id || "",
+	publisher: {
+		id: t?.id || "",
+		name: t?.name || e.authorName || "Unknown",
+		displayName: t?.name || e.authorName || "Unknown",
+		email: t?.email || "",
+		verified: t?.isVerified || !1,
+		totalProducts: 0,
+		totalDownloads: 0,
+		averageRating: 0,
+		joinedAt: t?.createdAt || e.createdAt,
+		website: t?.websiteUrl,
+		logoUrl: t?.logoUrl
+	},
+	name: e.name,
+	slug: e.slug || e.id,
+	displayName: e.name,
+	description: e.longDescription || e.description || "",
+	shortDescription: e.description || "",
+	iconUrl: e.icon,
+	screenshotUrls: e.screenshots || [],
+	videoUrls: e.videoUrls || [],
+	itemType: ((e, t) => e === "PHYSICAL" ? "PHYSICAL" : {
+		APP: "APP",
+		BOTAPP: "APP",
+		AGENT: "APP",
+		WORKFLOW: "WORKFLOW",
+		TEMPLATE: "TEMPLATE",
+		INTEGRATION: "INTEGRATION",
+		EXTENSION: "EXTENSION",
+		THEME: "THEME"
+	}[t] || "APP")(e.nature, e.type),
+	type: ((e) => ({
+		APP: "STANDALONE_APP",
+		BOTAPP: "STANDALONE_APP",
+		AGENT: "STANDALONE_APP",
+		WORKFLOW: "WORKFLOW_TEMPLATE",
+		TEMPLATE: "WORKFLOW_TEMPLATE",
+		INTEGRATION: "API_INTEGRATION",
+		EXTENSION: "BROWSER_EXTENSION",
+		THEME: "UI_THEME",
+		PLUGIN: "WORKSPACE_MODULE",
+		COMPONENT: "WORKSPACE_MODULE",
+		WIDGET: "WORKSPACE_MODULE",
+		VIBEMODULE: "WORKSPACE_MODULE",
+		CONSOLE: "STANDALONE_APP",
+		NODE: "WORKSPACE_MODULE"
+	})[e] || "STANDALONE_APP")(e.type),
+	tags: e.tags || [],
+	pricingModel: ((e) => ({
+		FREE: "FREE",
+		PAID_ONETIME: "ONE_TIME",
+		SUBSCRIPTION: "SUBSCRIPTION",
+		USAGE_BASED: "USAGE_BASED",
+		FREEMIUM: "FREEMIUM"
+	})[e] || "ONE_TIME")(e.pricingModel),
+	basePrice: e.price,
+	currency: e.currency || "USD",
+	variants: [],
+	status: e.status || "PUBLISHED",
+	featured: e.featured,
+	verified: t?.isVerified || !1,
+	downloadCount: e.downloads,
+	installCount: e.downloads,
+	orderCount: 0,
+	averageRating: e.rating || 0,
+	reviewCount: e.reviewCount,
+	createdAt: e.createdAt,
+	updatedAt: e.updatedAt,
+	publishedAt: e.publishedAt
+}), ve = ({ stars: e, percentage: t, count: r }) => /* @__PURE__ */ p("div", {
+	className: "flex items-center gap-2",
+	children: [
+		/* @__PURE__ */ f("span", {
+			className: "w-3 text-xs text-text-muted",
+			children: e
+		}),
+		/* @__PURE__ */ f("div", {
+			className: "h-2 flex-1 overflow-hidden rounded-full bg-bg-sunken",
+			children: /* @__PURE__ */ f("div", {
+				className: "h-full rounded-full bg-status-warning-bg-subtle",
+				style: { width: `${t}%` }
+			})
+		}),
+		/* @__PURE__ */ f("span", {
+			className: "w-12 text-right text-xs text-text-muted",
+			children: n(r)
+		})
+	]
+}), ye = ({ review: e, onMarkHelpful: t, markingHelpful: n }) => /* @__PURE__ */ p("div", {
+	className: "rounded-lg border border-border-default bg-bg-surface p-4",
+	children: [
+		/* @__PURE__ */ f("div", {
+			className: "mb-3 flex items-start justify-between",
+			children: /* @__PURE__ */ p("div", {
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ f("div", {
+					className: "flex h-10 w-10 items-center justify-center rounded-full bg-bg-sunken text-text-muted",
+					children: e.userId.charAt(0).toUpperCase()
+				}), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ p("p", {
+					className: "font-medium text-text-primary",
+					children: ["User ", e.userId.slice(0, 8)]
+				}), /* @__PURE__ */ p("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ f("div", {
+						className: "flex gap-0.5",
+						children: [
+							1,
+							2,
+							3,
+							4,
+							5
+						].map((t) => /* @__PURE__ */ f(u, { className: `h-3 w-3 ${t <= e.rating ? "fill-current text-status-warning-text" : "text-text-muted"}` }, t))
+					}), /* @__PURE__ */ f("span", {
+						className: "text-xs text-text-muted",
+						children: ((e) => {
+							try {
+								return new Date(e).toLocaleDateString("en-US", {
+									year: "numeric",
+									month: "short",
+									day: "numeric"
+								});
+							} catch {
+								return e;
+							}
+						})(e.createdAt)
+					})]
+				})] })]
+			})
+		}),
+		e.title && /* @__PURE__ */ f("h4", {
+			className: "mb-2 font-medium text-text-primary",
+			children: e.title
+		}),
+		e.comment && /* @__PURE__ */ f("p", {
+			className: "mb-3 text-sm text-text-muted",
+			children: e.comment
+		}),
+		/* @__PURE__ */ f("div", {
+			className: "flex items-center justify-between",
+			children: /* @__PURE__ */ p("button", {
+				type: "button",
+				onClick: () => t(e.id),
+				disabled: n,
+				"aria-label": `Mark review from ${e.userId} as helpful`,
+				className: "flex items-center gap-1 text-xs text-text-muted transition-colors hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-60",
+				children: [/* @__PURE__ */ f(d, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ f("span", { children: n ? "Updating…" : `Helpful (${e.helpful})` })]
+			})
+		})
+	]
+}), be = () => /* @__PURE__ */ p("div", {
+	className: "h-full overflow-y-auto",
+	children: [/* @__PURE__ */ f("div", {
+		className: "sticky top-0 z-10 border-b border-border-default bg-bg-surface px-6 py-4",
+		children: /* @__PURE__ */ p("div", {
+			className: "flex items-center gap-4",
+			children: [
+				/* @__PURE__ */ f("div", { className: "h-10 w-10 animate-pulse rounded-lg bg-bg-sunken" }),
+				/* @__PURE__ */ f("div", { className: "h-6 w-48 flex-1 animate-pulse rounded bg-bg-sunken" }),
+				/* @__PURE__ */ p("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ f("div", { className: "h-10 w-10 animate-pulse rounded-lg bg-bg-sunken" }), /* @__PURE__ */ f("div", { className: "h-10 w-10 animate-pulse rounded-lg bg-bg-sunken" })]
+				})
+			]
+		})
+	}), /* @__PURE__ */ p("div", {
+		className: "mx-auto max-w-6xl px-6 py-6",
+		children: [
+			/* @__PURE__ */ p("div", {
+				className: "mb-8 flex flex-col gap-6 md:flex-row",
+				children: [/* @__PURE__ */ p("div", {
+					className: "flex gap-4 md:w-1/2",
+					children: [/* @__PURE__ */ f("div", { className: "h-28 w-28 animate-pulse rounded-2xl bg-bg-sunken" }), /* @__PURE__ */ p("div", {
+						className: "flex flex-1 flex-col justify-center gap-2",
+						children: [
+							/* @__PURE__ */ f("div", { className: "h-8 w-3/4 animate-pulse rounded bg-bg-sunken" }),
+							/* @__PURE__ */ p("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ f("div", { className: "h-4 w-32 animate-pulse rounded bg-bg-sunken" }), /* @__PURE__ */ f("div", { className: "h-4 w-4 animate-pulse rounded-full bg-bg-sunken" })]
+							}),
+							/* @__PURE__ */ p("div", {
+								className: "flex gap-3",
+								children: [/* @__PURE__ */ f("div", { className: "h-5 w-16 animate-pulse rounded bg-bg-sunken" }), /* @__PURE__ */ f("div", { className: "h-5 w-24 animate-pulse rounded bg-bg-sunken" })]
+							})
+						]
+					})]
+				}), /* @__PURE__ */ p("div", {
+					className: "flex flex-col gap-4 md:w-1/2 md:items-end",
+					children: [/* @__PURE__ */ p("div", {
+						className: "flex items-center gap-4",
+						children: [
+							/* @__PURE__ */ p("div", {
+								className: "text-center",
+								children: [/* @__PURE__ */ f("div", { className: "h-10 w-16 animate-pulse rounded bg-bg-sunken" }), /* @__PURE__ */ f("div", { className: "mt-1 h-3 w-20 animate-pulse rounded bg-bg-sunken" })]
+							}),
+							/* @__PURE__ */ f("div", { className: "h-12 w-px bg-border-default" }),
+							/* @__PURE__ */ p("div", {
+								className: "text-center",
+								children: [/* @__PURE__ */ f("div", { className: "h-8 w-16 animate-pulse rounded bg-bg-sunken" }), /* @__PURE__ */ f("div", { className: "mt-1 h-3 w-16 animate-pulse rounded bg-bg-sunken" })]
+							}),
+							/* @__PURE__ */ f("div", { className: "h-12 w-px bg-border-default" }),
+							/* @__PURE__ */ p("div", {
+								className: "text-center",
+								children: [/* @__PURE__ */ f("div", { className: "h-8 w-20 animate-pulse rounded bg-bg-sunken" }), /* @__PURE__ */ f("div", { className: "mt-1 h-3 w-12 animate-pulse rounded bg-bg-sunken" })]
+							})
+						]
+					}), /* @__PURE__ */ p("div", {
+						className: "flex gap-3",
+						children: [/* @__PURE__ */ f("div", { className: "h-12 w-40 animate-pulse rounded-lg bg-bg-sunken" }), /* @__PURE__ */ f("div", { className: "h-12 w-12 animate-pulse rounded-lg bg-bg-sunken" })]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ p("section", {
+				className: "mb-8",
+				children: [/* @__PURE__ */ f("div", { className: "aspect-video animate-pulse rounded-lg bg-bg-sunken" }), /* @__PURE__ */ f("div", {
+					className: "mt-4 flex gap-4",
+					children: [...[
+						,
+						,
+						,
+						,
+					]].map((e, t) => /* @__PURE__ */ f("div", { className: "h-20 w-36 animate-pulse rounded-lg bg-bg-sunken" }, t))
+				})]
+			}),
+			/* @__PURE__ */ p("section", {
+				className: "mb-8",
+				children: [/* @__PURE__ */ p("div", {
+					className: "mb-4 flex items-center gap-2",
+					children: [/* @__PURE__ */ f("div", { className: "h-5 w-5 animate-pulse rounded bg-bg-sunken" }), /* @__PURE__ */ f("div", { className: "h-6 w-32 animate-pulse rounded bg-bg-sunken" })]
+				}), /* @__PURE__ */ p("div", {
+					className: "animate-pulse rounded-lg border border-border-default bg-bg-surface p-4",
+					children: [/* @__PURE__ */ p("div", {
+						className: "space-y-2",
+						children: [
+							/* @__PURE__ */ f("div", { className: "h-4 w-full rounded bg-bg-sunken" }),
+							/* @__PURE__ */ f("div", { className: "h-4 w-full rounded bg-bg-sunken" }),
+							/* @__PURE__ */ f("div", { className: "h-4 w-3/4 rounded bg-bg-sunken" }),
+							/* @__PURE__ */ f("div", { className: "h-4 w-5/6 rounded bg-bg-sunken" })
+						]
+					}), /* @__PURE__ */ f("div", {
+						className: "mt-4 flex gap-2",
+						children: [...[
+							,
+							,
+							,
+							,
+						]].map((e, t) => /* @__PURE__ */ f("div", { className: "h-6 w-16 rounded-full bg-bg-sunken" }, t))
+					})]
+				})]
+			}),
+			/* @__PURE__ */ p("section", {
+				className: "mb-8",
+				children: [
+					/* @__PURE__ */ p("div", {
+						className: "mb-4 flex items-center justify-between",
+						children: [/* @__PURE__ */ p("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ f("div", { className: "h-5 w-5 animate-pulse rounded bg-bg-sunken" }), /* @__PURE__ */ f("div", { className: "h-6 w-40 animate-pulse rounded bg-bg-sunken" })]
+						}), /* @__PURE__ */ f("div", { className: "h-4 w-16 animate-pulse rounded bg-bg-sunken" })]
+					}),
+					/* @__PURE__ */ p("div", {
+						className: "mb-6 flex flex-col gap-6 md:flex-row",
+						children: [/* @__PURE__ */ f("div", {
+							className: "animate-pulse rounded-lg border border-border-default bg-bg-surface p-4 md:w-64",
+							children: /* @__PURE__ */ p("div", {
+								className: "flex items-center gap-6",
+								children: [/* @__PURE__ */ p("div", {
+									className: "text-center",
+									children: [
+										/* @__PURE__ */ f("div", { className: "h-12 w-16 rounded bg-bg-sunken" }),
+										/* @__PURE__ */ f("div", {
+											className: "my-1 flex justify-center gap-0.5",
+											children: [...[
+												,
+												,
+												,
+												,
+												,
+											]].map((e, t) => /* @__PURE__ */ f("div", { className: "h-4 w-4 rounded bg-bg-sunken" }, t))
+										}),
+										/* @__PURE__ */ f("div", { className: "h-3 w-20 rounded bg-bg-sunken" })
+									]
+								}), /* @__PURE__ */ f("div", {
+									className: "flex-1 space-y-1",
+									children: [...[
+										,
+										,
+										,
+										,
+										,
+									]].map((e, t) => /* @__PURE__ */ p("div", {
+										className: "flex items-center gap-2",
+										children: [
+											/* @__PURE__ */ f("div", { className: "h-2 w-3 rounded bg-bg-sunken" }),
+											/* @__PURE__ */ f("div", { className: "h-2 flex-1 rounded-full bg-bg-sunken" }),
+											/* @__PURE__ */ f("div", { className: "h-2 w-8 rounded bg-bg-sunken" })
+										]
+									}, t))
+								})]
+							})
+						}), /* @__PURE__ */ f("div", { className: "h-12 w-32 animate-pulse rounded-lg bg-bg-sunken" })]
+					}),
+					/* @__PURE__ */ f("div", {
+						className: "space-y-4",
+						children: [...[, ,]].map((e, t) => /* @__PURE__ */ p("div", {
+							className: "animate-pulse rounded-lg border border-border-default bg-bg-surface p-4",
+							children: [/* @__PURE__ */ p("div", {
+								className: "mb-3 flex items-start gap-3",
+								children: [/* @__PURE__ */ f("div", { className: "h-10 w-10 rounded-full bg-bg-sunken" }), /* @__PURE__ */ p("div", {
+									className: "flex-1",
+									children: [/* @__PURE__ */ f("div", { className: "h-4 w-32 rounded bg-bg-sunken" }), /* @__PURE__ */ p("div", {
+										className: "mt-1 flex items-center gap-2",
+										children: [/* @__PURE__ */ f("div", {
+											className: "flex gap-0.5",
+											children: [...[
+												,
+												,
+												,
+												,
+												,
+											]].map((e, t) => /* @__PURE__ */ f("div", { className: "h-3 w-3 rounded bg-bg-sunken" }, t))
+										}), /* @__PURE__ */ f("div", { className: "h-3 w-20 rounded bg-bg-sunken" })]
+									})]
+								})]
+							}), /* @__PURE__ */ p("div", {
+								className: "space-y-2",
+								children: [/* @__PURE__ */ f("div", { className: "h-4 w-full rounded bg-bg-sunken" }), /* @__PURE__ */ f("div", { className: "h-4 w-2/3 rounded bg-bg-sunken" })]
+							})]
+						}, t))
+					})
+				]
+			}),
+			/* @__PURE__ */ p("section", {
+				className: "mb-8",
+				children: [/* @__PURE__ */ p("div", {
+					className: "mb-4 flex items-center gap-2",
+					children: [/* @__PURE__ */ f("div", { className: "h-5 w-5 animate-pulse rounded bg-bg-sunken" }), /* @__PURE__ */ f("div", { className: "h-6 w-48 animate-pulse rounded bg-bg-sunken" })]
+				}), /* @__PURE__ */ f("div", {
+					className: "animate-pulse rounded-lg border border-border-default bg-bg-surface p-4",
+					children: /* @__PURE__ */ f("div", {
+						className: "grid gap-4 md:grid-cols-2",
+						children: [...[
+							,
+							,
+							,
+							,
+							,
+							,
+						]].map((e, t) => /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("div", { className: "h-3 w-16 rounded bg-bg-sunken" }), /* @__PURE__ */ f("div", { className: "mt-1 h-5 w-24 rounded bg-bg-sunken" })] }, t))
+					})
+				})]
+			}),
+			/* @__PURE__ */ p("section", {
+				className: "mb-8",
+				children: [/* @__PURE__ */ p("div", {
+					className: "mb-4 flex items-center justify-between",
+					children: [/* @__PURE__ */ p("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ f("div", { className: "h-5 w-5 animate-pulse rounded bg-bg-sunken" }), /* @__PURE__ */ f("div", { className: "h-6 w-40 animate-pulse rounded bg-bg-sunken" })]
+					}), /* @__PURE__ */ f("div", { className: "h-4 w-16 animate-pulse rounded bg-bg-sunken" })]
+				}), /* @__PURE__ */ f("div", {
+					className: "grid gap-4 md:grid-cols-4",
+					children: [...[
+						,
+						,
+						,
+						,
+					]].map((e, t) => /* @__PURE__ */ f("div", {
+						className: "animate-pulse rounded-lg border border-border-default bg-bg-surface p-3",
+						children: /* @__PURE__ */ p("div", {
+							className: "flex items-center gap-3",
+							children: [/* @__PURE__ */ f("div", { className: "h-14 w-14 rounded-xl bg-bg-sunken" }), /* @__PURE__ */ p("div", {
+								className: "flex-1",
+								children: [
+									/* @__PURE__ */ f("div", { className: "h-4 w-24 rounded bg-bg-sunken" }),
+									/* @__PURE__ */ f("div", { className: "mt-1 h-3 w-16 rounded bg-bg-sunken" }),
+									/* @__PURE__ */ p("div", {
+										className: "mt-1 flex items-center gap-2",
+										children: [/* @__PURE__ */ f("div", { className: "h-3 w-8 rounded bg-bg-sunken" }), /* @__PURE__ */ f("div", { className: "h-3 w-12 rounded bg-bg-sunken" })]
+									})
+								]
+							})]
+						})
+					}, t))
+				})]
+			}),
+			/* @__PURE__ */ p("section", {
+				className: "mb-8",
+				children: [/* @__PURE__ */ f("div", { className: "mb-4 h-6 w-36 animate-pulse rounded bg-bg-sunken" }), /* @__PURE__ */ p("div", {
+					className: "animate-pulse rounded-lg border border-border-default bg-bg-surface p-4",
+					children: [/* @__PURE__ */ p("div", {
+						className: "flex items-center gap-4",
+						children: [/* @__PURE__ */ f("div", { className: "h-12 w-12 rounded-lg bg-bg-sunken" }), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ p("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ f("div", { className: "h-5 w-32 rounded bg-bg-sunken" }), /* @__PURE__ */ f("div", { className: "h-4 w-4 rounded-full bg-bg-sunken" })]
+						}), /* @__PURE__ */ f("div", { className: "mt-1 h-4 w-40 rounded bg-bg-sunken" })] })]
+					}), /* @__PURE__ */ p("div", {
+						className: "mt-3 space-y-2",
+						children: [/* @__PURE__ */ f("div", { className: "h-4 w-full rounded bg-bg-sunken" }), /* @__PURE__ */ f("div", { className: "h-4 w-2/3 rounded bg-bg-sunken" })]
+					})]
+				})]
+			})
+		]
+	})]
+}), xe = ({ error: e, onRetry: t, onBack: n }) => /* @__PURE__ */ f("div", {
+	className: "flex h-full items-center justify-center",
+	children: /* @__PURE__ */ p("div", {
+		className: "text-center",
+		children: [
+			/* @__PURE__ */ f(s, { className: "mx-auto mb-4 h-12 w-12 text-status-error-text" }),
+			/* @__PURE__ */ f("h2", {
+				className: "mb-2 text-xl font-semibold text-text-primary",
+				children: "Failed to load product"
+			}),
+			/* @__PURE__ */ f("p", {
+				className: "mb-4 text-text-muted",
+				children: e.message || "An error occurred while loading the product details."
+			}),
+			/* @__PURE__ */ p("div", {
+				className: "flex justify-center gap-3",
+				children: [/* @__PURE__ */ f("button", {
+					onClick: t,
+					className: "rounded-lg bg-action-primary-bg px-4 py-2 text-action-primary-text transition-opacity hover:opacity-90",
+					children: "Try Again"
+				}), /* @__PURE__ */ f("button", {
+					onClick: n,
+					className: "rounded-lg border border-border-default px-4 py-2 text-text-primary transition-colors hover:bg-bg-sunken",
+					children: "Go Back"
+				})]
+			})
+		]
+	})
+}), m = () => {
+	let { productId: s } = he(), d = me(), { basePath: m } = e(), { addProduct: Se, cartItems: Ce, addingToCart: we, createOrder: Te, checkingOut: Ee } = t(), { createReview: De, loading: h } = ee(), { updateReview: g, loading: _ } = ie(), { deleteReview: v, loading: y } = te(), { markHelpful: b, loading: Oe } = ne(), x = ge(), [S, ke] = o(!1), [C, Ae] = o(!1), [w, T] = o(!1), [E, D] = o(null), [O, k] = o(null), [A, j] = o("success"), [M, N] = o(!1), [P, F] = o(""), [I, L] = o(""), [R, z] = o(5), [je, B] = o(null), [Me, Ne] = o(!1), { data: Pe, loading: Fe, error: Ie, refetch: V } = re({
+		id: s,
+		slug: s,
+		includeReviews: !0,
+		reviewsLimit: 10,
+		includeRelated: !0,
+		relatedLimit: 4,
+		includeVersions: !0
+	}), H = Pe, U = H?.product, W = H?.publisher, G = Ce.some((e) => e.productId === U?.id), Le = a(async () => {
+		if (U) {
+			if (D(null), G) {
+				d(`${m}/cart`);
+				return;
+			}
+			try {
+				await Se(_e(U, W), void 0, 1);
+			} catch (e) {
+				console.error("Failed to add product to cart:", e), D("Failed to add this product to cart. Please try again.");
+			}
+		}
+	}, [
+		U,
+		W,
+		Se,
+		G,
+		d,
+		m
+	]), Re = a(async () => {
+		if (U) {
+			D(null), T(!0);
+			try {
+				let e = U.price || 0, t = await Te({
+					total: e,
+					lineItems: [{
+						productId: U.id,
+						name: U.name,
+						quantity: 1,
+						unitPrice: e,
+						subtotal: e,
+						itemType: U.nature?.toLowerCase() || "digital",
+						pricingModel: U.pricingModel || "PAID_ONETIME"
+					}],
+					billingAccountId: ""
+				});
+				t?.id ? d(`/billing/checkout/store/${t.id}`) : (console.error("Failed to create order"), D("Failed to create order. Please try again."), T(!1));
+			} catch (e) {
+				console.error("Buy Now error:", e), D(e instanceof Error ? e.message : "Failed to start checkout"), T(!1);
+			}
+		}
+	}, [
+		U,
+		Te,
+		d
+	]), ze = a(() => {
+		U && Ne(!0);
+	}, [U]);
+	ce(() => {
+		U && x.emit("store.product.viewed", {
+			productId: U.id,
+			productSlug: U.slug,
+			productType: U.type,
+			pricingModel: U.pricingModel
+		});
+	}, [U?.id]);
+	let Be = a((e, t) => {
+		U && (x.emit("store.product.installed", {
+			productId: U.id,
+			workspaceId: e
+		}), console.log(`Successfully installed ${U.name} to workspace ${t} (${e})`));
+	}, [U, x]), Ve = a((e) => {
+		console.error("Installation failed:", e.message);
+	}, []), He = a(() => {
+		F(H?.userReview?.title ?? ""), L(H?.userReview?.comment ?? ""), z(H?.userReview?.rating ?? 5), k(null), j("success"), N(!0);
+	}, [H?.userReview]), Ue = a(async () => {
+		if (!U) return;
+		if (R < 1 || R > 5) {
+			j("error"), k("Choose a rating from 1 to 5 stars.");
+			return;
+		}
+		let e = {
+			productId: U.id,
+			rating: R,
+			title: P.trim() || void 0,
+			comment: I.trim() || void 0
+		};
+		if (!(H?.userReview ? await g(H.userReview.id, {
+			rating: e.rating,
+			title: e.title,
+			comment: e.comment
+		}) : await De(e))) {
+			j("error"), k("We could not save your review. Please try again.");
+			return;
+		}
+		j("success"), k(H?.userReview ? "Your review was updated." : "Your review was submitted."), N(!1), x.emit("store.review.submitted", {
+			productId: U.id,
+			rating: R
+		}), await V();
+	}, [
+		x,
+		De,
+		U,
+		H?.userReview,
+		V,
+		I,
+		R,
+		P,
+		g
+	]), We = a(async () => {
+		if (H?.userReview && (oe("medium"), await ae({
+			title: "Delete review",
+			message: "Are you sure you want to remove your review?",
+			okButtonTitle: "Delete",
+			cancelButtonTitle: "Cancel"
+		}) !== !1)) {
+			if (!await v(H.userReview.id)) {
+				j("error"), k("We could not remove your review. Please try again."), i("error");
+				return;
+			}
+			j("success"), k("Your review was removed."), N(!1), F(""), L(""), z(5), i("success"), await V();
+		}
+	}, [
+		v,
+		H?.userReview,
+		V
+	]), Ge = a(async (e) => {
+		B(e), await b(e) && await V(), B(null);
+	}, [b, V]);
+	if (Fe) return /* @__PURE__ */ f(be, {});
+	if (Ie) return /* @__PURE__ */ f(xe, {
+		error: Ie,
+		onRetry: V,
+		onBack: () => d(`${m}/marketplace`)
+	});
+	if (!H?.product) return /* @__PURE__ */ f("div", {
+		className: "flex h-full items-center justify-center",
+		children: /* @__PURE__ */ p("div", {
+			className: "text-center",
+			children: [
+				/* @__PURE__ */ f("h2", {
+					className: "mb-2 text-xl font-semibold text-text-primary",
+					children: "Product not found"
+				}),
+				/* @__PURE__ */ f("p", {
+					className: "mb-4 text-text-muted",
+					children: "The product you are looking for does not exist or has been removed."
+				}),
+				/* @__PURE__ */ f("button", {
+					onClick: () => d(`${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: Ke, relatedProducts: q, ratingDistribution: J, isPurchased: Y, userEntitlement: X } = H, Z = U, Q = J ? J.fiveStars + J.fourStars + J.threeStars + J.twoStars + J.oneStar : 0, qe = J ? [
+		{
+			stars: 5,
+			count: J.fiveStars,
+			percentage: Q > 0 ? J.fiveStars / Q * 100 : 0
+		},
+		{
+			stars: 4,
+			count: J.fourStars,
+			percentage: Q > 0 ? J.fourStars / Q * 100 : 0
+		},
+		{
+			stars: 3,
+			count: J.threeStars,
+			percentage: Q > 0 ? J.threeStars / Q * 100 : 0
+		},
+		{
+			stars: 2,
+			count: J.twoStars,
+			percentage: Q > 0 ? J.twoStars / Q * 100 : 0
+		},
+		{
+			stars: 1,
+			count: J.oneStar,
+			percentage: Q > 0 ? J.oneStar / Q * 100 : 0
+		}
+	] : [], Je = Z.requiredPermissions || [], Ye = Z.integrationDeps || [], Xe = () => 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__ */ p("div", {
+		className: "h-full overflow-y-auto bg-bg-base",
+		children: [
+			/* @__PURE__ */ f("div", {
+				className: "relative bg-bg-surface",
+				children: /* @__PURE__ */ f("div", {
+					className: "mx-auto max-w-7xl",
+					children: /* @__PURE__ */ p("div", {
+						className: "flex flex-col lg:flex-row",
+						children: [/* @__PURE__ */ p("div", {
+							className: "flex-1 px-6 py-8 lg:max-w-xl lg:py-12",
+							children: [
+								/* @__PURE__ */ p("button", {
+									onClick: () => d(-1),
+									className: "mb-6 cursor-pointer inline-flex items-center gap-2 text-sm text-text-muted transition-colors hover:text-text-primary",
+									children: [/* @__PURE__ */ f(le, { className: "h-4 w-4" }), "Back"]
+								}),
+								/* @__PURE__ */ f("h1", {
+									className: "mb-4 text-4xl font-normal leading-tight text-text-primary lg:text-5xl",
+									children: Z.name
+								}),
+								/* @__PURE__ */ p("div", {
+									className: "mb-2",
+									children: [W?.websiteUrl ? /* @__PURE__ */ f("a", {
+										href: W.websiteUrl,
+										target: "_blank",
+										rel: "noreferrer",
+										className: "text-base font-medium text-text-link hover:underline",
+										children: W.name
+									}) : /* @__PURE__ */ f("span", {
+										className: "text-base font-medium text-text-primary",
+										children: W?.name || Z.authorName || "Unknown Publisher"
+									}), W?.isVerified && /* @__PURE__ */ f(l, { className: "ml-1.5 inline h-4 w-4 text-status-success-text" })]
+								}),
+								/* @__PURE__ */ p("p", {
+									className: "mb-6 text-sm text-text-muted",
+									children: [
+										Z.category && /* @__PURE__ */ f("span", { children: Z.category }),
+										Z.category && " · ",
+										n(Z.downloads),
+										"+ downloads"
+									]
+								}),
+								/* @__PURE__ */ p("div", {
+									className: "mb-6 flex items-center gap-4",
+									children: [
+										/* @__PURE__ */ f("div", {
+											className: "flex h-12 w-12 items-center justify-center overflow-hidden rounded-xl bg-bg-sunken",
+											children: Z.icon ? /* @__PURE__ */ f("img", {
+												src: Z.icon,
+												alt: "",
+												className: "h-full w-full object-cover"
+											}) : /* @__PURE__ */ f("span", {
+												className: "text-lg font-bold text-text-muted",
+												children: Z.name.charAt(0)
+											})
+										}),
+										/* @__PURE__ */ p("div", {
+											className: "flex items-center gap-1 border-l border-border-default pl-4",
+											children: [
+												/* @__PURE__ */ f("span", {
+													className: "text-sm font-medium text-text-primary",
+													children: (Z.rating || 0).toFixed(1)
+												}),
+												/* @__PURE__ */ f(u, { className: "h-4 w-4 fill-current text-status-warning-text" }),
+												/* @__PURE__ */ p("span", {
+													className: "ml-1 text-xs text-text-muted",
+													children: [n(Ke || Z.reviewCount), " reviews"]
+												})
+											]
+										}),
+										/* @__PURE__ */ p("div", {
+											className: "border-l border-border-default pl-4",
+											children: [/* @__PURE__ */ p("span", {
+												className: "text-sm font-medium text-text-primary",
+												children: [n(Z.downloads), "+"]
+											}), /* @__PURE__ */ f("p", {
+												className: "text-xs text-text-muted",
+												children: "Downloads"
+											})]
+										}),
+										/* @__PURE__ */ p("div", {
+											className: "border-l border-border-default pl-4",
+											children: [/* @__PURE__ */ f("span", {
+												className: "rounded bg-bg-sunken px-2 py-1 text-xs font-medium text-text-primary",
+												children: Z.type
+											}), /* @__PURE__ */ f("p", {
+												className: "mt-0.5 text-xs text-text-muted",
+												children: "Type"
+											})]
+										})
+									]
+								}),
+								E && /* @__PURE__ */ f("div", {
+									role: "alert",
+									className: "mb-4 rounded-lg border border-status-error-bg bg-status-error-bg-subtle px-4 py-3 text-sm text-status-error-text",
+									children: E
+								}),
+								/* @__PURE__ */ p("div", {
+									className: "mb-6 flex items-center gap-3",
+									children: [Y && !$ ? /* @__PURE__ */ f("button", {
+										onClick: ze,
+										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__ */ f("button", {
+										onClick: ze,
+										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__ */ f("button", {
+										onClick: Re,
+										disabled: w || Ee,
+										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: w || Ee ? /* @__PURE__ */ p(pe, { children: [/* @__PURE__ */ f(c, { className: "h-4 w-4 animate-spin" }), "Processing..."] }) : `Buy ${Xe()}`
+									}), !$ && !Y && /* @__PURE__ */ p("button", {
+										onClick: Le,
+										disabled: we,
+										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: [we ? /* @__PURE__ */ f(c, { className: "h-4 w-4 animate-spin" }) : G ? /* @__PURE__ */ f(ue, { className: "h-4 w-4 text-status-success-text" }) : /* @__PURE__ */ f(fe, { className: "h-4 w-4" }), G ? "In Cart" : "Add to Cart"]
+									})]
+								}),
+								/* @__PURE__ */ p("p", {
+									className: "flex items-center gap-2 text-xs text-text-muted",
+									children: [/* @__PURE__ */ f(de, { className: "h-4 w-4" }), "This app is available for your workspace"]
+								}),
+								X && /* @__PURE__ */ p("p", {
+									className: "mt-2 flex items-center gap-2 text-xs text-text-muted",
+									children: [
+										/* @__PURE__ */ f(l, { className: "h-4 w-4 text-status-success-text" }),
+										"License: ",
+										X.status,
+										X.expiresAt && ` (Expires: ${new Date(X.expiresAt).toLocaleDateString()})`
+									]
+								})
+							]
+						}), /* @__PURE__ */ f("div", {
+							className: "relative flex-1 bg-bg-sunken lg:min-h-[500px]",
+							children: Z.screenshots && Z.screenshots.length > 0 ? /* @__PURE__ */ f("img", {
+								src: Z.screenshots[0],
+								alt: `${Z.name} screenshot`,
+								className: "h-full w-full object-cover"
+							}) : /* @__PURE__ */ f("div", {
+								className: "flex h-full min-h-[300px] items-center justify-center",
+								children: /* @__PURE__ */ p("div", {
+									className: "text-center",
+									children: [/* @__PURE__ */ f("div", {
+										className: "mx-auto mb-4 flex h-24 w-24 items-center justify-center rounded-2xl bg-bg-surface text-4xl font-bold text-text-muted",
+										children: Z.name.charAt(0)
+									}), /* @__PURE__ */ f("p", {
+										className: "text-sm text-text-muted",
+										children: "No preview available"
+									})]
+								})
+							})
+						})]
+					})
+				})
+			}),
+			/* @__PURE__ */ f("main", {
+				className: "mx-auto max-w-7xl px-6 py-8",
+				children: /* @__PURE__ */ p("div", {
+					className: "flex flex-col gap-8 lg:flex-row",
+					children: [/* @__PURE__ */ p("div", {
+						className: "flex-1 lg:max-w-3xl",
+						children: [
+							Z.screenshots && Z.screenshots.length > 1 && /* @__PURE__ */ f("section", {
+								className: "mb-8",
+								children: /* @__PURE__ */ f("div", {
+									className: "flex gap-4 overflow-x-auto pb-4",
+									children: Z.screenshots.map((e, t) => /* @__PURE__ */ f("div", {
+										className: "relative h-64 w-96 flex-shrink-0 overflow-hidden rounded-xl bg-bg-sunken",
+										children: /* @__PURE__ */ f("img", {
+											src: e,
+											alt: `Screenshot ${t + 1}`,
+											className: "h-full w-full object-cover"
+										})
+									}, t))
+								})
+							}),
+							/* @__PURE__ */ p("section", {
+								className: "mb-8",
+								children: [
+									/* @__PURE__ */ f("div", {
+										className: "mb-4 flex items-center justify-between text-left",
+										children: /* @__PURE__ */ f("h2", {
+											className: "text-lg font-medium text-text-primary",
+											children: "About this app"
+										})
+									}),
+									/* @__PURE__ */ p("div", {
+										className: "text-sm leading-relaxed text-text-secondary",
+										children: [/* @__PURE__ */ f("p", {
+											className: S ? "" : "line-clamp-4",
+											children: Z.longDescription || Z.description || "No description available."
+										}), ((Z.longDescription || Z.description)?.length ?? 0) > 200 && /* @__PURE__ */ f("button", {
+											onClick: () => ke(!S),
+											className: "cursor-pointer mt-3 text-sm font-medium text-text-link",
+											children: S ? "Show less" : "Show more"
+										})]
+									}),
+									Z.tags && Z.tags.length > 0 && /* @__PURE__ */ f("div", {
+										className: "mt-4 flex flex-wrap gap-2",
+										children: Z.tags.map((e) => /* @__PURE__ */ f("span", {
+											className: "rounded-full border border-border-default px-3 py-1.5 text-xs text-text-muted transition-colors hover:bg-bg-sunken",
+											children: e
+										}, e))
+									})
+								]
+							}),
+							/* @__PURE__ */ p("section", {
+								className: "mb-8",
+								children: [
+									/* @__PURE__ */ f("div", {
+										className: "mb-4 flex items-center justify-between text-left",
+										children: /* @__PURE__ */ f("h2", {
+											className: "text-lg font-medium text-text-primary",
+											children: "Ratings & Reviews"
+										})
+									}),
+									/* @__PURE__ */ p("div", {
+										className: "rounded-xl border border-border-default bg-bg-surface p-5",
+										children: [K && K.length > 0 ? /* @__PURE__ */ p("div", {
+											className: "flex items-start gap-8",
+											children: [/* @__PURE__ */ p("div", {
+												className: "text-center",
+												children: [
+													/* @__PURE__ */ f("p", {
+														className: "text-5xl font-light text-text-primary",
+														children: (Z.rating || 0).toFixed(1)
+													}),
+													/* @__PURE__ */ f("div", {
+														className: "my-2 flex justify-center gap-0.5",
+														children: [
+															1,
+															2,
+															3,
+															4,
+															5
+														].map((e) => /* @__PURE__ */ f(u, { className: `h-4 w-4 ${e <= Math.round(Z.rating || 0) ? "fill-current text-status-warning-text" : "text-text-muted"}` }, e))
+													}),
+													/* @__PURE__ */ p("p", {
+														className: "text-sm text-text-muted",
+														children: [n(Ke || Z.reviewCount), " reviews"]
+													})
+												]
+											}), qe.length > 0 && /* @__PURE__ */ f("div", {
+												className: "flex-1 space-y-1.5",
+												children: qe.map((e) => /* @__PURE__ */ f(ve, { ...e }, e.stars))
+											})]
+										}) : /* @__PURE__ */ p("div", {
+											className: "flex flex-col items-center justify-center py-6 text-center",
+											children: [
+												/* @__PURE__ */ f("div", {
+													className: "mb-3 flex gap-0.5",
+													children: [
+														1,
+														2,
+														3,
+														4,
+														5
+													].map((e) => /* @__PURE__ */ f(u, { className: "h-5 w-5 text-border-default" }, e))
+												}),
+												/* @__PURE__ */ f("p", {
+													className: "font-medium text-text-primary",
+													children: "No reviews yet"
+												}),
+												/* @__PURE__ */ f("p", {
+													className: "mt-1 text-sm text-text-muted",
+													children: "Be the first to share your experience with this app."
+												})
+											]
+										}), /* @__PURE__ */ p("div", {
+											className: "mt-6 border-t border-border-default pt-4",
+											children: [O && /* @__PURE__ */ f("p", {
+												role: A === "success" ? "status" : "alert",
+												className: `mb-3 rounded-lg px-3 py-2 text-sm ${A === "success" ? "bg-status-success-bg-subtle text-status-success-text" : "bg-status-error-bg-subtle text-status-error-text"}`,
+												children: O
+											}), Y || H?.userReview ? /* @__PURE__ */ p("div", {
+												className: "space-y-4",
+												children: [/* @__PURE__ */ f("button", {
+													type: "button",
+													onClick: () => M ? N(!1) : He(),
+													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 ? M ? "Cancel review editing" : "Edit your review" : M ? "Cancel review" : "Write a Review"
+												}), M && /* @__PURE__ */ p("div", {
+													className: "rounded-xl border border-border-default bg-bg-sunken p-4",
+													children: [
+														/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("p", {
+															className: "text-sm font-medium text-text-primary",
+															children: "Your rating"
+														}), /* @__PURE__ */ f("div", {
+															className: "mt-2 flex flex-wrap gap-2",
+															children: [
+																1,
+																2,
+																3,
+																4,
+																5
+															].map((e) => /* @__PURE__ */ p("button", {
+																type: "button",
+																onClick: () => z(e),
+																className: `cursor-pointer rounded-full border px-3 py-1.5 text-sm transition-colors ${R === e ? "border-action-primary-border bg-action-primary-bg text-action-primary-text" : "border-border-default bg-bg-surface text-text-primary hover:bg-bg-surface"}`,
+																children: [e, " ★"]
+															}, e))
+														})] }),
+														/* @__PURE__ */ p("label", {
+															className: "mt-4 block text-sm font-medium text-text-primary",
+															children: ["Title", /* @__PURE__ */ f("input", {
+																value: P,
+																onChange: (e) => F(e.target.value),
+																className: "mt-2 w-full rounded-lg border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary outline-none focus:border-action-primary-border",
+																placeholder: "Summarize your experience"
+															})]
+														}),
+														/* @__PURE__ */ p("label", {
+															className: "mt-4 block text-sm font-medium text-text-primary",
+															children: ["Review", /* @__PURE__ */ f("textarea", {
+																value: I,
+																onChange: (e) => L(e.target.value),
+																rows: 4,
+																required: !0,
+																"aria-required": "true",
+																className: "mt-2 w-full rounded-lg border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary outline-none focus:border-action-primary-border",
+																placeholder: "What worked well? What should improve?"
+															})]
+														}),
+														/* @__PURE__ */ p("div", {
+															className: "mt-4 flex flex-wrap gap-3",
+															children: [/* @__PURE__ */ f("button", {
+																type: "button",
+																onClick: Ue,
+																disabled: h || _,
+																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: h || _ ? "Saving..." : H?.userReview ? "Update Review" : "Submit Review"
+															}), H?.userReview && /* @__PURE__ */ f("button", {
+																type: "button",
+																onClick: We,
+																disabled: y,
+																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: y ? "Removing..." : "Delete Review"
+															})]
+														})
+													]
+												})]
+											}) : /* @__PURE__ */ f("p", {
+												className: "text-center text-sm text-text-muted",
+												children: "Purchase this app to submit a review."
+											})]
+										})]
+									}),
+									K && K.length > 0 && /* @__PURE__ */ p("div", {
+										className: "mt-4 space-y-3",
+										children: [/* @__PURE__ */ f("ul", {
+											className: "space-y-3",
+											children: (C ? K : K.slice(0, 2)).map((e) => /* @__PURE__ */ f("li", { children: /* @__PURE__ */ f(ye, {
+												review: e,
+												onMarkHelpful: Ge,
+												markingHelpful: Oe && je === e.id
+											}) }, e.id))
+										}), K.length > 2 && /* @__PURE__ */ f("button", {
+											onClick: () => Ae(!C),
+											className: "cursor-pointer text-sm font-medium text-text-link",
+											children: C ? "Show less" : `Show all ${K.length} reviews`
+										})]
+									}),
+									(!K || K.length === 0) && /* @__PURE__ */ f("p", {
+										className: "mt-4 text-sm text-text-muted",
+										children: "No reviews yet. Be the first to review!"
+									})
+								]
+							}),
+							Je.length > 0 && /* @__PURE__ */ p("section", {
+								className: "mb-8",
+								children: [/* @__PURE__ */ f("h2", {
+									className: "mb-4 text-lg font-medium text-text-primary",
+									children: "Required Permissions"
+								}), /* @__PURE__ */ f("div", {
+									className: "space-y-2",
+									children: Je.map((e) => /* @__PURE__ */ p("div", {
+										className: "flex items-center gap-3 rounded-lg bg-bg-surface px-4 py-3",
+										children: [/* @__PURE__ */ f(l, { className: "h-5 w-5 text-status-success-text" }), /* @__PURE__ */ f("span", {
+											className: "text-sm text-text-primary",
+											children: e
+										})]
+									}, e))
+								})]
+							}),
+							Ye.length > 0 && /* @__PURE__ */ p("section", {
+								className: "mb-8",
+								children: [/* @__PURE__ */ f("h2", {
+									className: "mb-4 text-lg font-medium text-text-primary",
+									children: "Integrations"
+								}), /* @__PURE__ */ f("div", {
+									className: "flex flex-wrap gap-2",
+									children: Ye.map((e) => /* @__PURE__ */ f("span", {
+										className: "rounded-lg bg-bg-surface px-4 py-2 text-sm font-medium text-text-primary",
+										children: e
+									}, e))
+								})]
+							}),
+							/* @__PURE__ */ p("section", {
+								className: "mb-8",
+								children: [/* @__PURE__ */ f("h2", {
+									className: "mb-4 text-lg font-medium text-text-primary",
+									children: "Additional Information"
+								}), /* @__PURE__ */ p("div", {
+									className: "grid grid-cols-2 gap-6 md:grid-cols-3",
+									children: [
+										Z.manifestVersion && /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("p", {
+											className: "text-xs text-text-muted",
+											children: "Version"
+										}), /* @__PURE__ */ f("p", {
+											className: "mt-1 text-sm font-medium text-text-primary",
+											children: Z.manifestVersion
+										})] }),
+										/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("p", {
+											className: "text-xs text-text-muted",
+											children: "Type"
+										}), /* @__PURE__ */ f("p", {
+											className: "mt-1 text-sm font-medium text-text-primary",
+											children: Z.type
+										})] }),
+										Z.publishedAt && /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("p", {
+											className: "text-xs text-text-muted",
+											children: "Published"
+										}), /* @__PURE__ */ f("p", {
+											className: "mt-1 text-sm font-medium text-text-primary",
+											children: new Date(Z.publishedAt).toLocaleDateString()
+										})] }),
+										/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("p", {
+											className: "text-xs text-text-muted",
+											children: "Updated"
+										}), /* @__PURE__ */ f("p", {
+											className: "mt-1 text-sm font-medium text-text-primary",
+											children: new Date(Z.updatedAt).toLocaleDateString()
+										})] }),
+										Z.license && /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("p", {
+											className: "text-xs text-text-muted",
+											children: "License"
+										}), /* @__PURE__ */ f("p", {
+											className: "mt-1 text-sm font-medium text-text-primary",
+											children: Z.license
+										})] }),
+										Z.minPlatformVersion && /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("p", {
+											className: "text-xs text-text-muted",
+											children: "Min Platform Version"
+										}), /* @__PURE__ */ f("p", {
+											className: "mt-1 text-sm font-medium text-text-primary",
+											children: Z.minPlatformVersion
+										})] })
+									]
+								})]
+							})
+						]
+					}), /* @__PURE__ */ p("div", {
+						className: "w-full lg:w-80",
+						children: [
+							(Z.documentationUrl || Z.repositoryUrl || W?.email) && /* @__PURE__ */ p("div", {
+								className: "mb-6 rounded-xl border border-border-default bg-bg-surface p-4",
+								children: [/* @__PURE__ */ f("h3", {
+									className: "font-medium text-text-primary",
+									children: "App support"
+								}), /* @__PURE__ */ p("div", {
+									className: "mt-3 space-y-2 text-sm",
+									children: [
+										Z.documentationUrl && /* @__PURE__ */ f("a", {
+											href: Z.documentationUrl,
+											target: "_blank",
+											rel: "noreferrer",
+											className: "block text-text-link hover:underline",
+											children: "Documentation"
+										}),
+										Z.repositoryUrl && /* @__PURE__ */ f("a", {
+											href: Z.repositoryUrl,
+											target: "_blank",
+											rel: "noreferrer",
+											className: "block text-text-link hover:underline",
+											children: "Source repository"
+										}),
+										W?.email && /* @__PURE__ */ f("a", {
+											href: `mailto:${W.email}`,
+											className: "block text-text-link hover:underline",
+											children: "Contact publisher"
+										})
+									]
+								})]
+							}),
+							W && /* @__PURE__ */ p("div", {
+								className: "mb-6 rounded-xl border border-border-default bg-bg-surface p-4",
+								children: [
+									/* @__PURE__ */ f("h3", {
+										className: "font-medium text-text-primary",
+										children: "Publisher"
+									}),
+									/* @__PURE__ */ f("p", {
+										className: "mt-2 text-sm text-text-primary",
+										children: W.name
+									}),
+									W.bio && /* @__PURE__ */ f("p", {
+										className: "mt-2 text-sm text-text-muted",
+										children: W.bio
+									}),
+									W.websiteUrl && /* @__PURE__ */ f("a", {
+										href: W.websiteUrl,
+										target: "_blank",
+										rel: "noreferrer",
+										className: "mt-3 inline-block text-sm text-text-link hover:underline",
+										children: "Visit publisher website"
+									})
+								]
+							}),
+							q && q.length > 0 && /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("div", {
+								className: "mb-4 flex items-center justify-between text-left",
+								children: /* @__PURE__ */ f("span", {
+									className: "font-medium text-text-primary",
+									children: "Similar apps"
+								})
+							}), /* @__PURE__ */ f("div", {
+								className: "space-y-3",
+								children: q.slice(0, 4).map((e) => /* @__PURE__ */ p("button", {
+									onClick: () => d(`${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__ */ f("img", {
+										src: e.icon,
+										alt: e.name,
+										className: "h-12 w-12 rounded-xl object-cover"
+									}) : /* @__PURE__ */ f("div", {
+										className: "flex h-12 w-12 items-center justify-center rounded-xl bg-bg-sunken text-lg font-bold text-text-muted",
+										children: e.name.charAt(0)
+									}), /* @__PURE__ */ p("div", {
+										className: "flex-1 overflow-hidden",
+										children: [
+											/* @__PURE__ */ f("p", {
+												className: "truncate text-sm font-medium text-text-primary",
+												children: e.name
+											}),
+											/* @__PURE__ */ f("p", {
+												className: "text-xs text-text-muted",
+												children: W?.name || "Unknown"
+											}),
+											(e.reviewCount ?? 0) > 0 && /* @__PURE__ */ p("div", {
+												className: "flex items-center gap-1",
+												children: [/* @__PURE__ */ f("span", {
+													className: "text-xs text-text-muted",
+													children: (e.rating || 0).toFixed(1)
+												}), /* @__PURE__ */ f(u, { className: "h-3 w-3 fill-current text-status-warning-text" })]
+											})
+										]
+									})]
+								}, e.id))
+							})] })
+						]
+					})]
+				})
+			}),
+			Z && /* @__PURE__ */ f(se, {
+				isOpen: Me,
+				onClose: () => Ne(!1),
+				app: {
+					id: Z.id,
+					name: Z.name,
+					slug: Z.slug,
+					icon: Z.icon,
+					type: Z.type,
+					version: Z.manifestVersion
+				},
+				purchaseState: Y && !$ ? "purchased" : "free",
+				onInstallSuccess: Be,
+				onInstallError: Ve
+			})
+		]
+	});
+};
+//#endregion
+export { m as ProductDetailPage };
+
+//# sourceMappingURL=ProductDetailPage.js.map