@burdenoff/microfe-store 2026.625.3 → 2026.625.5

package/dist/pages/InstalledAppsPage.js

@@ -2,14 +2,156 @@ import { useStore as e } from "../providers/StoreProvider.js";
 import { useInstallationStatusUpdatedSubscription as t } from "../generated/global-operations.js";
 import { useInstallations as n } from "../hooks/useInstallations.js";
 import { StoreInstallationStatus as r } from "../generated/global-types.js";
-import { useMemo as i, useState as a } from "react";
-import { useI18n as o } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { AlertCircle as s, Loader2 as c, Package as l, Plus as u, RefreshCw as d, Trash2 as f } from "lucide-react";
-import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
-import { useNavigate as g } from "react-router-dom";
-import { AlertDialog as _, AlertDialogAction as v, AlertDialogCancel as y, AlertDialogContent as b, AlertDialogDescription as x, AlertDialogFooter as S, AlertDialogHeader as C, AlertDialogTitle as w } from "@burdenoff/fe-libs/ui";
+import { useCallback as i, useEffect as a, useMemo as o, useRef as s, useState as c } from "react";
+import { useI18n as l } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { AlertCircle as u, ArrowUpCircle as d, CheckCircle as f, Loader2 as p, Package as m, Plus as h, RefreshCw as g, Settings2 as _, ShieldCheck as v, Trash2 as y, X as b } from "lucide-react";
+import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
+import { useNavigate as w } from "react-router-dom";
+import { graphqlFetch as T } from "@burdenoff/fe-libs/shared/graphql";
 //#region src/pages/InstalledAppsPage.tsx
-var T = [
+var E = "\n  query GetProductVersion($id: ID!) {\n    product(id: $id) {\n      id\n      manifestVersion\n      requiredPermissions\n    }\n  }\n", D = "mutation RecordAppInstallation($input: RecordAppInstallationInput!) { recordAppInstallation(input: $input) { id status workspaceId version } }";
+function O(e, t) {
+	let [n, r] = c({}), [o, l] = c(!1), u = s(e);
+	u.current = e;
+	let d = i(async (e) => {
+		if (e.length !== 0) {
+			l(!0);
+			try {
+				let n = await Promise.all(e.map((e) => T({
+					gateway: "global",
+					query: E,
+					variables: { id: e },
+					authToken: t || void 0
+				}).then((e) => e.data?.product ?? null).catch(() => null))), i = {};
+				for (let e of n) e && (i[e.id] = {
+					manifestVersion: e.manifestVersion,
+					requiredPermissions: e.requiredPermissions
+				});
+				r(i);
+			} finally {
+				l(!1);
+			}
+		}
+	}, [t]);
+	return a(() => {
+		e.length > 0 && d(e);
+	}, [e.join(",")]), {
+		metaMap: n,
+		metaLoading: o,
+		refetchMeta: () => d(u.current)
+	};
+}
+var k = ({ installation: e, product: t, onClose: n, onAccept: r }) => {
+	let [i, a] = c(!1), [o, s] = c("permissions");
+	return /* @__PURE__ */ C("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+		children: [/* @__PURE__ */ S("button", {
+			type: "button",
+			"aria-label": "Close",
+			className: "absolute inset-0 bg-bg-overlay/50 backdrop-blur-sm",
+			onClick: n
+		}), /* @__PURE__ */ C("dialog", {
+			open: !0,
+			"aria-modal": "true",
+			className: "relative z-10 w-full max-w-md rounded-2xl border border-border-default bg-bg-surface shadow-2xl",
+			children: [
+				/* @__PURE__ */ C("div", {
+					className: "flex items-center justify-between border-b border-border-default px-6 py-4",
+					children: [/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("h2", {
+						className: "text-lg font-semibold text-text-primary",
+						children: o === "permissions" ? "Review Updated Permissions" : "Confirm Update"
+					}), /* @__PURE__ */ S("p", {
+						className: "text-sm text-text-muted",
+						children: e.workspaceName ?? e.workspaceId
+					})] }), /* @__PURE__ */ S("button", {
+						type: "button",
+						onClick: n,
+						className: "cursor-pointer rounded-lg p-2 text-text-muted hover:bg-bg-sunken",
+						children: /* @__PURE__ */ S(b, { className: "size-5" })
+					})]
+				}),
+				o === "permissions" && /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ C("div", {
+					className: "px-6 py-4",
+					children: [
+						/* @__PURE__ */ C("div", {
+							className: "mb-3 flex items-center gap-2 rounded-lg bg-status-info-bg-subtle px-3 py-2 text-sm text-status-info-text",
+							children: [/* @__PURE__ */ S(d, { className: "size-4 flex-shrink-0" }), /* @__PURE__ */ C("span", { children: ["Update available: v", t.manifestVersion] })]
+						}),
+						/* @__PURE__ */ S("p", {
+							className: "mb-4 text-sm text-text-secondary",
+							children: "This update requires the following permissions. Review and accept to continue."
+						}),
+						t.requiredPermissions.length > 0 ? /* @__PURE__ */ S("div", {
+							className: "max-h-56 overflow-y-auto space-y-2",
+							children: t.requiredPermissions.map((e) => /* @__PURE__ */ C("div", {
+								className: "flex items-center gap-3 rounded-lg bg-bg-sunken px-4 py-3",
+								children: [/* @__PURE__ */ S(v, { className: "size-5 flex-shrink-0 text-status-success-text" }), /* @__PURE__ */ S("span", {
+									className: "text-sm text-text-primary",
+									children: e
+								})]
+							}, e))
+						}) : /* @__PURE__ */ S("p", {
+							className: "text-sm text-text-muted",
+							children: "No permissions required by this version."
+						})
+					]
+				}), /* @__PURE__ */ C("div", {
+					className: "border-t border-border-default px-6 py-4 flex justify-end gap-3",
+					children: [/* @__PURE__ */ S("button", {
+						type: "button",
+						onClick: n,
+						className: "cursor-pointer rounded-lg border border-border-default px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
+						children: "Cancel"
+					}), /* @__PURE__ */ C("button", {
+						type: "button",
+						onClick: () => s("confirm"),
+						className: "cursor-pointer rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90 inline-flex items-center gap-2",
+						children: [/* @__PURE__ */ S(f, { className: "size-4" }), "Accept & Update"]
+					})]
+				})] }),
+				o === "confirm" && /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S("div", {
+					className: "px-6 py-4",
+					children: /* @__PURE__ */ C("div", {
+						className: "rounded-lg bg-status-success-bg-subtle p-4 text-center",
+						children: [
+							/* @__PURE__ */ S(f, { className: "mx-auto mb-2 size-8 text-status-success-text" }),
+							/* @__PURE__ */ S("p", {
+								className: "text-sm font-medium text-text-primary",
+								children: "Permissions accepted"
+							}),
+							/* @__PURE__ */ C("p", {
+								className: "mt-1 text-xs text-text-muted",
+								children: ["Ready to update to v", t.manifestVersion]
+							})
+						]
+					})
+				}), /* @__PURE__ */ C("div", {
+					className: "border-t border-border-default px-6 py-4 flex justify-end gap-3",
+					children: [/* @__PURE__ */ S("button", {
+						type: "button",
+						onClick: () => s("permissions"),
+						disabled: i,
+						className: "cursor-pointer rounded-lg border border-border-default px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken disabled:opacity-50",
+						children: "Back"
+					}), /* @__PURE__ */ S("button", {
+						type: "button",
+						onClick: async () => {
+							a(!0);
+							try {
+								await r(), n();
+							} finally {
+								a(!1);
+							}
+						},
+						disabled: i,
+						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:opacity-50 inline-flex items-center gap-2",
+						children: i ? /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S(p, { className: "size-4 animate-spin" }), " Updating…"] }) : "Confirm Update"
+					})]
+				})] })
+			]
+		})]
+	});
+}, A = [
 	{
 		label: "All",
 		value: "all"
@@ -38,11 +180,11 @@ var T = [
 		label: "Uninstalled",
 		value: r.Uninstalled
 	}
-], E = (e) => e === r.Active ? "bg-status-success-bg-subtle text-status-success-text" : e === r.Pending || e === r.Installing || e === r.Inactive ? "bg-status-warning-bg-subtle text-status-warning-text" : e === r.Failed ? "bg-status-error-bg-subtle text-status-error-text" : "bg-bg-sunken text-text-muted", D = () => {
-	let D = g(), { basePath: O, workspaceId: k } = e(), { t: A } = o(), [j, M] = a("all"), [N, P] = a(null), [F, I] = a(null), { installations: L, totalCount: R, hasMore: z, loading: B, error: V, uninstall: H, uninstallingIds: U, refetch: W, loadMore: G } = n({ filter: i(() => j === "all" ? void 0 : { status: j }, [j]) });
+], j = (e) => e === r.Active ? "bg-status-success-bg-subtle text-status-success-text" : e === r.Pending || e === r.Installing || e === r.Inactive ? "bg-status-warning-bg-subtle text-status-warning-text" : e === r.Failed ? "bg-status-error-bg-subtle text-status-error-text" : "bg-bg-sunken text-text-muted", M = () => {
+	let i = w(), { basePath: a, workspaceId: s, authToken: f } = e(), { t: v } = l(), [b, x] = c("all"), [E, M] = c(null), [N, P] = c(null), [F, I] = c(null), { installations: L, totalCount: R, hasMore: z, loading: B, error: V, uninstall: H, uninstallingIds: U, refetch: W, loadMore: G } = n({ filter: o(() => b === "all" ? void 0 : { status: b }, [b]) });
 	t({
-		variables: { workspaceId: k ?? "" },
-		skip: !k,
+		variables: { workspaceId: s ?? "" },
+		skip: !s,
 		onData: () => {
 			W();
 		},
@@ -50,109 +192,128 @@ var T = [
 			console.warn("InstallationStatusUpdated subscription error:", e.message);
 		}
 	});
-	let K = i(() => [...L].sort((e, t) => t.installedAt.localeCompare(e.installedAt)), [L]), q = () => {
-		D(`${O}/marketplace`);
-	}, J = async (e) => {
-		P(null), await H(e, "User requested uninstall from store UI") || P("Could not uninstall. Try again."), I(null);
+	let K = o(() => [...L].sort((e, t) => t.installedAt.localeCompare(e.installedAt)), [L]), { metaMap: q, refetchMeta: J } = O(o(() => [...new Set(L.map((e) => e.productId))], [L]), f), Y = () => {
+		i(`${a}/marketplace`);
+	}, X = async (e) => {
+		M(null), await H(e, "User requested uninstall from store UI") || M("Could not uninstall. Try again."), P(null);
+	}, Z = async (e) => {
+		let t = q[e.productId];
+		if (t?.manifestVersion) try {
+			await T({
+				gateway: "global",
+				query: D,
+				variables: { input: {
+					productId: e.productId,
+					workspaceId: e.workspaceId,
+					workspaceName: e.workspaceName,
+					workspaceType: e.workspaceType,
+					organizationId: e.organizationId,
+					version: t.manifestVersion
+				} },
+				authToken: f || void 0
+			}), await W(), J();
+		} catch {
+			M("Update failed. Please try again.");
+		}
 	};
-	return /* @__PURE__ */ h("div", {
+	return /* @__PURE__ */ C("div", {
 		className: "flex h-full flex-col",
 		children: [
-			/* @__PURE__ */ m("header", {
-				className: "border-b border-border-seam bg-bg-surface px-6 py-4",
-				children: /* @__PURE__ */ h("div", {
+			/* @__PURE__ */ S("header", {
+				className: "border-b border-border-default bg-bg-surface px-6 py-4",
+				children: /* @__PURE__ */ C("div", {
 					className: "flex items-center justify-between",
-					children: [/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h1", {
+					children: [/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("h1", {
 						className: "text-2xl font-bold text-text-primary",
-						children: A("pages.installed.title", { defaultValue: "Installed Apps" })
-					}), /* @__PURE__ */ m("p", {
+						children: v("pages.installed.title", { defaultValue: "Installed Apps" })
+					}), /* @__PURE__ */ S("p", {
 						className: "text-sm text-text-muted",
 						children: "Manage your installed applications"
-					})] }), /* @__PURE__ */ h("button", {
+					})] }), /* @__PURE__ */ C("button", {
 						type: "button",
-						onClick: q,
+						onClick: Y,
 						className: "flex cursor-pointer items-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2 font-semibold text-action-primary-text transition-colors hover:opacity-90",
-						children: [/* @__PURE__ */ m(u, { className: "size-5" }), /* @__PURE__ */ m("span", { children: A("pages.installed.installNew", { defaultValue: "Install New App" }) })]
+						children: [/* @__PURE__ */ S(h, { className: "size-5" }), /* @__PURE__ */ S("span", { children: v("pages.installed.installNew", { defaultValue: "Install New App" }) })]
 					})]
 				})
 			}),
-			/* @__PURE__ */ m("main", {
+			/* @__PURE__ */ S("main", {
 				className: "flex-1 overflow-y-auto p-6",
-				children: /* @__PURE__ */ h("div", {
+				children: /* @__PURE__ */ C("div", {
 					className: "mx-auto max-w-6xl",
 					children: [
-						/* @__PURE__ */ h("div", {
+						/* @__PURE__ */ C("div", {
 							className: "mb-4 flex flex-wrap items-center gap-2",
-							children: [T.map((e) => /* @__PURE__ */ m("button", {
+							children: [A.map((e) => /* @__PURE__ */ S("button", {
 								type: "button",
-								onClick: () => M(e.value),
-								className: `cursor-pointer rounded-full px-3 py-1.5 text-sm font-medium transition-colors ${j === e.value ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-primary hover:bg-bg-surface"}`,
+								onClick: () => x(e.value),
+								className: `cursor-pointer rounded-full px-3 py-1.5 text-sm font-medium transition-colors ${b === e.value ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-primary hover:bg-bg-surface"}`,
 								children: e.label
-							}, e.label)), /* @__PURE__ */ h("button", {
+							}, e.label)), /* @__PURE__ */ C("button", {
 								type: "button",
 								onClick: () => W(),
 								className: "ml-auto cursor-pointer inline-flex items-center gap-2 rounded-lg border border-border-default bg-bg-surface px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
-								children: [/* @__PURE__ */ m(d, { className: "size-4" }), "Refresh"]
+								children: [/* @__PURE__ */ S(g, { className: "size-4" }), "Refresh"]
 							})]
 						}),
-						N && /* @__PURE__ */ m("div", {
+						E && /* @__PURE__ */ S("div", {
 							role: "alert",
 							className: "mb-4 rounded-lg border border-status-error-border bg-status-error-bg-subtle px-4 py-3 text-sm text-status-error-text",
-							children: N
+							children: E
 						}),
-						B ? /* @__PURE__ */ m("output", {
+						B ? /* @__PURE__ */ S("output", {
 							"aria-label": "Loading installed apps",
 							className: "flex items-center justify-center py-16",
-							children: /* @__PURE__ */ m(c, {
+							children: /* @__PURE__ */ S(p, {
 								className: "size-8 animate-spin text-text-muted",
 								"aria-hidden": "true"
 							})
-						}) : V ? /* @__PURE__ */ h("div", {
+						}) : V ? /* @__PURE__ */ C("div", {
 							role: "alert",
 							className: "flex flex-col items-center justify-center rounded-xl border border-status-error-border bg-status-error-bg-subtle py-16 text-center",
 							children: [
-								/* @__PURE__ */ m(s, { className: "mb-3 size-10 text-status-error-text" }),
-								/* @__PURE__ */ m("h3", {
+								/* @__PURE__ */ S(u, { className: "mb-3 size-10 text-status-error-text" }),
+								/* @__PURE__ */ S("h3", {
 									className: "text-lg font-semibold text-status-error-text",
 									children: "Failed to load installations"
 								}),
-								/* @__PURE__ */ m("p", {
+								/* @__PURE__ */ S("p", {
 									className: "mt-2 text-sm text-text-muted",
 									children: V.message
 								}),
-								/* @__PURE__ */ m("button", {
+								/* @__PURE__ */ S("button", {
 									type: "button",
 									onClick: () => W(),
 									className: "mt-4 cursor-pointer rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text",
 									children: "Try Again"
 								})
 							]
-						}) : K.length === 0 ? /* @__PURE__ */ m("div", {
+						}) : K.length === 0 ? /* @__PURE__ */ S("div", {
 							className: "flex items-center justify-center py-16",
-							children: /* @__PURE__ */ h("div", {
+							children: /* @__PURE__ */ C("div", {
 								className: "text-center",
 								children: [
-									/* @__PURE__ */ m(l, { className: "mx-auto mb-4 size-16 text-text-muted" }),
-									/* @__PURE__ */ m("h3", {
+									/* @__PURE__ */ S(m, { className: "mx-auto mb-4 size-16 text-text-muted" }),
+									/* @__PURE__ */ S("h3", {
 										className: "mb-2 text-lg font-semibold text-text-primary",
 										children: "No apps installed"
 									}),
-									/* @__PURE__ */ m("p", {
+									/* @__PURE__ */ S("p", {
 										className: "mb-4 text-sm text-text-muted",
 										children: "Browse the marketplace to install your first app"
 									}),
-									/* @__PURE__ */ m("button", {
+									/* @__PURE__ */ S("button", {
 										type: "button",
-										onClick: q,
+										onClick: Y,
 										className: "rounded-lg bg-action-primary-bg px-4 py-2 font-semibold text-action-primary-text transition-colors hover:opacity-90",
 										children: "Browse Marketplace"
 									})
 								]
 							})
-						}) : /* @__PURE__ */ h("div", {
+						}) : /* @__PURE__ */ C("div", {
 							className: "flex flex-col gap-y-4",
 							children: [
-								/* @__PURE__ */ h("p", {
+								/* @__PURE__ */ C("p", {
 									"aria-live": "polite",
 									className: "text-sm text-text-muted",
 									children: [
@@ -162,71 +323,89 @@ var T = [
 										" found"
 									]
 								}),
-								/* @__PURE__ */ m("ul", {
+								/* @__PURE__ */ S("ul", {
 									className: "flex flex-col gap-y-4",
 									children: K.map((e) => {
-										let t = U.has(`${e.workspaceId}:${e.productId}`);
-										return /* @__PURE__ */ m("li", {
-											className: "rounded-xl 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__ */ h("div", {
+										let t = U.has(`${e.workspaceId}:${e.productId}`), n = q[e.productId], o = n?.manifestVersion && e.version && n.manifestVersion !== e.version;
+										return /* @__PURE__ */ C("li", {
+											className: `rounded-xl border bg-bg-surface p-4 ${o ? "border-status-info-border" : "border-border-default"}`,
+											children: [o && /* @__PURE__ */ C("div", {
+												className: "mb-3 flex items-center gap-2 rounded-lg bg-status-info-bg-subtle px-3 py-2 text-sm text-status-info-text",
+												children: [
+													/* @__PURE__ */ S(d, { className: "size-4 flex-shrink-0" }),
+													/* @__PURE__ */ C("span", { children: ["Update available: v", n?.manifestVersion] }),
+													/* @__PURE__ */ S("button", {
+														type: "button",
+														onClick: () => I(e),
+														className: "ml-auto cursor-pointer rounded-md bg-action-primary-bg px-3 py-1 text-xs font-medium text-action-primary-text hover:opacity-90",
+														children: "Update"
+													})
+												]
+											}), /* @__PURE__ */ C("div", {
 												className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-												children: [/* @__PURE__ */ h("div", {
+												children: [/* @__PURE__ */ C("div", {
 													className: "flex items-start gap-3",
-													children: [/* @__PURE__ */ m("div", {
+													children: [/* @__PURE__ */ S("div", {
 														className: "flex size-12 items-center justify-center rounded-lg bg-bg-sunken text-lg font-semibold text-text-muted",
-														children: /* @__PURE__ */ m(l, { className: "size-6" })
-													}), /* @__PURE__ */ h("div", { children: [
-														/* @__PURE__ */ m("h3", {
+														children: /* @__PURE__ */ S(m, { className: "size-6" })
+													}), /* @__PURE__ */ C("div", { children: [
+														/* @__PURE__ */ S("h3", {
 															className: "font-semibold text-text-primary",
 															children: e.workspaceName ?? e.workspaceId
 														}),
-														/* @__PURE__ */ h("p", {
+														/* @__PURE__ */ C("p", {
 															className: "text-sm text-text-muted",
 															children: ["Product: ", e.productId]
 														}),
-														/* @__PURE__ */ h("div", {
+														/* @__PURE__ */ C("div", {
 															className: "mt-2 flex flex-wrap items-center gap-2 text-xs text-text-muted",
 															children: [
-																/* @__PURE__ */ m("span", {
-																	className: `rounded-full px-2 py-1 font-medium ${E(e.status)}`,
+																/* @__PURE__ */ S("span", {
+																	className: `rounded-full px-2 py-1 font-medium ${j(e.status)}`,
 																	children: e.status
 																}),
-																e.version && /* @__PURE__ */ h("span", { children: ["v", e.version] }),
-																e.workspaceType && /* @__PURE__ */ m("span", { children: e.workspaceType })
+																e.version && /* @__PURE__ */ C("span", { children: ["v", e.version] }),
+																e.workspaceType && /* @__PURE__ */ S("span", { children: e.workspaceType })
 															]
 														})
 													] })]
-												}), /* @__PURE__ */ h("div", {
+												}), /* @__PURE__ */ C("div", {
 													className: "flex items-center gap-2",
 													children: [
-														/* @__PURE__ */ m("button", {
+														/* @__PURE__ */ S("button", {
 															type: "button",
-															onClick: () => D(`${O}/installed/${e.id}`),
+															onClick: () => i(`${a}/installed/${e.id}`),
 															className: "cursor-pointer rounded-lg border border-border-default px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
 															children: "Details"
 														}),
-														/* @__PURE__ */ m("button", {
+														/* @__PURE__ */ C("button", {
 															type: "button",
-															onClick: () => D(`${O}/marketplace/product/${e.productId}`),
+															onClick: () => i(`${a}/installed/${e.id}/settings`),
+															className: "cursor-pointer inline-flex items-center gap-1.5 rounded-lg border border-border-default px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
+															children: [/* @__PURE__ */ S(_, { className: "size-4" }), "Configure"]
+														}),
+														/* @__PURE__ */ S("button", {
+															type: "button",
+															onClick: () => i(`${a}/marketplace/product/${e.productId}`),
 															className: "cursor-pointer rounded-lg border border-border-default px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
 															children: "View Product"
 														}),
-														e.status !== r.Uninstalled && /* @__PURE__ */ h("button", {
+														e.status !== r.Uninstalled && /* @__PURE__ */ C("button", {
 															type: "button",
-															onClick: () => I(e),
+															onClick: () => P(e),
 															disabled: t,
 															className: "cursor-pointer inline-flex items-center gap-1.5 rounded-lg border border-status-error-border px-3 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg-subtle disabled:opacity-60",
-															children: [t ? /* @__PURE__ */ m(c, { className: "size-4 animate-spin" }) : /* @__PURE__ */ m(f, { className: "size-4" }), "Uninstall"]
+															children: [t ? /* @__PURE__ */ S(p, { className: "size-4 animate-spin" }) : /* @__PURE__ */ S(y, { className: "size-4" }), "Uninstall"]
 														})
 													]
 												})]
-											})
+											})]
 										}, e.id);
 									})
 								}),
-								z && /* @__PURE__ */ m("div", {
+								z && /* @__PURE__ */ S("div", {
 									className: "flex justify-center pt-6",
-									children: /* @__PURE__ */ m("button", {
+									children: /* @__PURE__ */ S("button", {
 										type: "button",
 										onClick: G,
 										disabled: B,
@@ -239,40 +418,70 @@ var T = [
 					]
 				})
 			}),
-			/* @__PURE__ */ m(_, {
-				open: F !== null,
-				onOpenChange: (e) => !e && I(null),
-				children: /* @__PURE__ */ h(b, {
-					className: "max-w-md",
-					children: [/* @__PURE__ */ h(C, { children: [/* @__PURE__ */ m(w, { children: "Uninstall app" }), /* @__PURE__ */ m(x, { children: F && /* @__PURE__ */ h(p, { children: [
-						"Remove product",
-						" ",
-						/* @__PURE__ */ m("span", {
-							className: "font-medium text-text-primary",
-							children: F.productId
+			F && q[F.productId] && /* @__PURE__ */ S(k, {
+				installation: F,
+				product: q[F.productId],
+				onClose: () => I(null),
+				onAccept: () => Z(F)
+			}),
+			N && /* @__PURE__ */ C("div", {
+				className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+				children: [/* @__PURE__ */ S("button", {
+					type: "button",
+					"aria-label": "Cancel uninstall",
+					className: "absolute inset-0 bg-bg-overlay/50",
+					onClick: () => P(null)
+				}), /* @__PURE__ */ C("dialog", {
+					open: !0,
+					"aria-modal": "true",
+					"aria-labelledby": "installed-apps-uninstall-title",
+					className: "relative z-10 w-full max-w-md rounded-2xl border border-border-default bg-bg-surface p-6 shadow-2xl",
+					children: [
+						/* @__PURE__ */ S("h2", {
+							id: "installed-apps-uninstall-title",
+							className: "text-lg font-semibold text-text-primary",
+							children: "Uninstall app"
 						}),
-						" ",
-						"from workspace",
-						" ",
-						/* @__PURE__ */ m("span", {
-							className: "font-medium text-text-primary",
-							children: F.workspaceName ?? F.workspaceId
+						/* @__PURE__ */ C("p", {
+							className: "mt-2 text-sm text-text-muted",
+							children: [
+								"Remove product",
+								" ",
+								/* @__PURE__ */ S("span", {
+									className: "font-medium text-text-primary",
+									children: N.productId
+								}),
+								" ",
+								"from workspace",
+								" ",
+								/* @__PURE__ */ S("span", {
+									className: "font-medium text-text-primary",
+									children: N.workspaceName ?? N.workspaceId
+								}),
+								"?"
+							]
 						}),
-						"?"
-					] }) })] }), /* @__PURE__ */ h(S, { children: [/* @__PURE__ */ m(y, {
-						onClick: () => I(null),
-						children: "Cancel"
-					}), /* @__PURE__ */ m(v, {
-						className: "bg-status-error-bg text-status-error-text hover:bg-status-error-bg-emphasis",
-						onClick: () => F && J(F),
-						children: "Uninstall"
-					})] })]
-				})
+						/* @__PURE__ */ C("div", {
+							className: "mt-6 flex flex-wrap justify-end gap-3",
+							children: [/* @__PURE__ */ S("button", {
+								type: "button",
+								onClick: () => P(null),
+								className: "cursor-pointer rounded-lg border border-border-default px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
+								children: "Cancel"
+							}), /* @__PURE__ */ S("button", {
+								type: "button",
+								onClick: () => X(N),
+								className: "cursor-pointer rounded-lg bg-status-error-bg px-4 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg-emphasis",
+								children: "Uninstall"
+							})]
+						})
+					]
+				})]
 			})
 		]
 	});
 };
 //#endregion
-export { D as InstalledAppsPage };
+export { M as InstalledAppsPage };
 
 //# sourceMappingURL=InstalledAppsPage.js.map