dsh-plugin-shop 0.7.4 → 0.8.0-beta.0

package/lib/client.js

@@ -4324,6 +4324,9 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 		});
 		const dsh_plugin_shop_shop_installed_result$schema = array(object({
 			"name": string(),
+			"source": union([literal("npm"), literal("github")]),
+			"repo": union([_undefined(), string()]).optional(),
+			"subdir": union([_undefined(), string()]).optional(),
 			"installed": string(),
 			"latest": string(),
 			"outdated": boolean(),
@@ -4336,7 +4339,14 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				_undefined(),
 				literal(false),
 				literal(true)
-			]).optional()
+			]).optional(),
+			"source": union([
+				_undefined(),
+				literal("npm"),
+				literal("github")
+			]).optional(),
+			"repo": union([_undefined(), string()]).optional(),
+			"subdir": union([_undefined(), string()]).optional()
 		});
 		const dsh_plugin_shop_shop_installStart_result$schema = union([object({
 			"ok": literal(true),
@@ -4348,7 +4358,8 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				literal("denied"),
 				literal("version-mismatch"),
 				literal("needs-acknowledgement"),
-				literal("tarball-integrity")
+				literal("tarball-integrity"),
+				literal("ambiguous-identity")
 			]),
 			"detail": string()
 		})]);
@@ -4437,7 +4448,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					},
 					sourceLocation: {
 						"file": "packages/dsh-plugin-shop/src/host/index.ts",
-						"line": 577,
+						"line": 678,
 						"column": 9
 					}
 				},
@@ -4455,7 +4466,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					},
 					sourceLocation: {
 						"file": "packages/dsh-plugin-shop/src/host/index.ts",
-						"line": 763,
+						"line": 863,
 						"column": 9
 					}
 				},
@@ -4483,7 +4494,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					},
 					sourceLocation: {
 						"file": "packages/dsh-plugin-shop/src/host/index.ts",
-						"line": 628,
+						"line": 726,
 						"column": 9
 					}
 				},
@@ -4510,7 +4521,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					},
 					sourceLocation: {
 						"file": "packages/dsh-plugin-shop/src/host/index.ts",
-						"line": 752,
+						"line": 852,
 						"column": 3
 					}
 				},
@@ -4528,7 +4539,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					},
 					sourceLocation: {
 						"file": "packages/dsh-plugin-shop/src/host/index.ts",
-						"line": 913,
+						"line": 1021,
 						"column": 9
 					}
 				},
@@ -4555,7 +4566,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					},
 					sourceLocation: {
 						"file": "packages/dsh-plugin-shop/src/host/index.ts",
-						"line": 469,
+						"line": 535,
 						"column": 9
 					}
 				},
@@ -4583,7 +4594,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					},
 					sourceLocation: {
 						"file": "packages/dsh-plugin-shop/src/host/index.ts",
-						"line": 855,
+						"line": 956,
 						"column": 9
 					}
 				},
@@ -4610,7 +4621,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					},
 					sourceLocation: {
 						"file": "packages/dsh-plugin-shop/src/host/index.ts",
-						"line": 981,
+						"line": 1106,
 						"column": 9
 					}
 				},
@@ -4628,7 +4639,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					},
 					sourceLocation: {
 						"file": "packages/dsh-plugin-shop/src/host/index.ts",
-						"line": 964,
+						"line": 1089,
 						"column": 9
 					}
 				}
@@ -4709,6 +4720,16 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 			return hasPlugin || SHOP_KEYWORDS.includes(segments.at(-1));
 		}
 		//#endregion
+		//#region src/shared/identity.ts
+		/** The registry's uniqueness rule, shared with the presentation layer. */
+		function identityKey(identity) {
+			return identity.source === "npm" ? `npm:${identity.name}` : `github:${identity.repo ?? identity.name}#${identity.subdir ?? ""}`;
+		}
+		/** `owner/slug`, lowercased, or null when this is not a repository reference. */
+		const REPO = "([\\w.-]+)\\/([\\w.-]+?)";
+		new RegExp(`^github:${REPO}(?:[#&].*)?$`);
+		new RegExp(`^(?:git\\+)?https?:\\/\\/(?:www\\.)?github\\.com\\/${REPO}(?:\\.git)?(?:[\\/?#].*)?$`);
+		//#endregion
 		//#region src/client/present.ts
 		/** Hot-mount reason code → locale key, so the notice reads in the language
 		* the person set in dsh. An absent (or unrecognized) reason keeps the generic
@@ -4733,9 +4754,10 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 		}
 		/** The peers the Host said this installation does not provide, or none when it
 		* said nothing — a plugin that runs here and one the Host could not judge are
-		* both rendered as no warning at all. */
-		function missingPeersOf(incompatible, name) {
-			return incompatible[name] ?? [];
+		* both rendered as no warning at all. The map is keyed by install identity,
+		* never by name, because two entries can share a name. */
+		function missingPeersOf(incompatible, key) {
+			return incompatible[key] ?? [];
 		}
 		/** Spec §9.3 verbatim — the community-tier acknowledgement. The zh dictionary
 		* states the same facts in its own register; never soften this wording. */
@@ -4751,6 +4773,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				case "version-mismatch": return "versionMismatchCode";
 				case "needs-acknowledgement": return "needsAcknowledgementCode";
 				case "tarball-integrity": return "tarballIntegrityCode";
+				case "ambiguous-identity": return "ambiguousIdentityCode";
 			}
 		}
 		/** The version a card displays: full for npm, the short commit for github. */
@@ -4934,7 +4957,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 		* This mirrors the registry's identity verbatim; the two must not drift.
 		*/
 		function entryKey(entry) {
-			return entry.source === "npm" ? `npm:${entry.name}` : `github:${entry.repo ?? entry.name}#${entry.subdir ?? ""}`;
+			return identityKey(entry);
 		}
 		/**
 		* One entry's star count from the sidecar, or undefined when it has none.
@@ -4951,8 +4974,14 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 		* repo, one the catalog never even listed.
 		*/
 		function starsOf(entry, stars) {
-			return stars[entry.repo ?? entry.name];
-		}
+			const key = entry.repo ?? entry.name;
+			if (!Object.hasOwn(stars, key)) return void 0;
+			return stars[key];
+		}
+		/** One collator for the whole shelf. Passing an options object to
+		* localeCompare creates a collator per comparison, which dominates the sort
+		* for a catalog with thousands of entries. */
+		const NAME_COLLATOR = new Intl.Collator(void 0, { sensitivity: "base" });
 		/** Sort the shelf: stars descending, un-starred entries last, name ascending
 		* (case-insensitive) on ties (spec 2026-08-26-github-stars-design.md D1).
 		* Display-time only — the catalog's own name sort is untouched. */
@@ -4961,7 +4990,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 			return [...entries].sort((a, b) => {
 				const byStars = count(b) - count(a);
 				if (byStars !== 0) return byStars;
-				return a.name.localeCompare(b.name, void 0, { sensitivity: "base" });
+				return NAME_COLLATOR.compare(a.name, b.name);
 			});
 		}
 		/** 999 → "999"; 1000 → "1k"; 1234 → "1.2k"; 1500 → "1.5k"; 99999 → "100k". */
@@ -5030,6 +5059,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 			versionMismatchCode: "版本不匹配",
 			needsAcknowledgementCode: "需要确认",
 			tarballIntegrityCode: "压缩包完整性校验失败",
+			ambiguousIdentityCode: "无法确定是哪一个条目",
 			npmSource: "npm 包",
 			githubSource: "源码在 GitHub",
 			installedSection: "已安装",
@@ -5119,6 +5149,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 			versionMismatchCode: "Version mismatch",
 			needsAcknowledgementCode: "Acknowledgement required",
 			tarballIntegrityCode: "tarball integrity check failed",
+			ambiguousIdentityCode: "Ambiguous entry",
 			npmSource: "npm package",
 			githubSource: "source on GitHub",
 			installedSection: "Installed",
@@ -5176,42 +5207,93 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				installStatus
 			]);
 		}
-		/** Drive one install: rejections, the polling loop at INSTALL_POLL_MS, and
-		* terminal states. The interval is cleared on unmount and whenever the view
-		* leaves `running`, so a done/failed/rejected install never polls again. */
-		function useInstall(install, installStatus) {
-			const [view, setView] = (0, react.useState)({ kind: "idle" });
-			const start = (0, react.useCallback)(async (args) => {
-				setView({ kind: "idle" });
+		/**
+		* Install flows owned by the tab and keyed by install identity. Keeping the
+		* state above individual cards preserves a running operation when filtering
+		* unmounts its card, and makes the shelf and Outdated panels agree.
+		*/
+		function useInstallFlows(install, installStatus, onSettled) {
+			const [views, setViews] = (0, react.useState)(() => /* @__PURE__ */ new Map());
+			const settled = (0, react.useRef)(onSettled);
+			settled.current = onSettled;
+			const put = (0, react.useCallback)((key, view) => {
+				setViews((current) => {
+					const next = new Map(current);
+					next.set(key, view);
+					return next;
+				});
+			}, []);
+			const apply = (0, react.useCallback)((key, event) => {
+				setViews((current) => {
+					const before = current.get(key) ?? { kind: "idle" };
+					const after = reduceInstall(before, event);
+					if (after === before) return current;
+					const next = new Map(current);
+					next.set(key, after);
+					return next;
+				});
+			}, []);
+			const start = (0, react.useCallback)(async (key, args) => {
+				put(key, { kind: "idle" });
 				try {
 					const result = await install(args);
 					if (!result.ok) {
-						setView({
+						put(key, {
 							kind: "rejected",
 							code: result.code,
 							detail: result.detail
 						});
 						return;
 					}
-					setView({
+					put(key, {
 						kind: "running",
 						installId: result.installId,
 						log: []
 					});
 				} catch {
-					setView({
+					put(key, {
 						kind: "failed",
 						detail: "",
 						log: []
 					});
 				}
-			}, [install]);
-			usePollStatus(view, setView, installStatus);
-			return {
-				view,
+			}, [install, put]);
+			const reset = (0, react.useCallback)((key) => {
+				setViews((current) => {
+					if (!current.has(key)) return current;
+					const next = new Map(current);
+					next.delete(key);
+					return next;
+				});
+			}, []);
+			(0, react.useEffect)(() => {
+				const running = [];
+				for (const [key, view] of views) if (view.kind === "running") running.push([key, view.installId]);
+				if (running.length === 0) return;
+				const timer = setInterval(() => {
+					for (const [key, installId] of running) installStatus({ installId }).then((status) => {
+						apply(key, {
+							type: "status",
+							status
+						});
+						if (status.found && status.state !== "running") settled.current?.(key);
+					}, () => {});
+				}, INSTALL_POLL_MS);
+				return () => clearInterval(timer);
+			}, [
+				views,
+				installStatus,
+				apply
+			]);
+			return { flowFor: (0, react.useCallback)((key) => ({
+				view: views.get(key) ?? { kind: "idle" },
+				start: (args) => start(key, args),
+				reset: () => reset(key)
+			}), [
+				views,
 				start,
-				reset: (0, react.useCallback)(() => setView({ kind: "idle" }), [])
-			};
+				reset
+			]) };
 		}
 		//#endregion
 		//#region src/client/useUninstall.ts
@@ -5300,7 +5382,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 		}
 		//#endregion
 		//#region \0dsh-plugin-shop-css:e3675a89
-		const css = "/* Shop tab styles — a market shelf inside the settings surface. The visual\n * language is the dsh theme's alias tokens ONLY (the four tokens the previous\n * styles referenced that do not exist — bg-layer-3, interactive-bg-hover,\n * state-error, state-success — are corrected to bg-layer-2 and the\n * state-*-primary set). The signature is the category spine: one HUE per\n * category (seven fixed hues, not the brand token — the brand resolves to\n * near-black in the light theme, so seven brand opacities read as seven\n * shades of gray), with the category name as the cover label in the same hue. Class names are mapped to content-derived names at bundle time\n * (tsdown.s8583e3_client.s942a79_config.s5f67aa_ts) and stubbed in tests; only the keys are relied\n * on.\n *\n * One token rule the theme forces: the background LAYERS do not carry\n * contrast. In the light theme bg-base, bg-layer-1, bg-layer-2 and\n * bg-layer-3 all resolve to the same white; only the dark theme spreads them\n * (950/875/850/800). So a layer-2 fill on a layer-1 ground is invisible for\n * half of all users, and anything whose fill is its ONLY affordance — the\n * loading skeleton, the borderless capability chips — derives its fill from\n * label-primary instead, which inverts with the theme by construction.\n * Elements that also carry a border or text may keep a layer fill.\n * `css-tokens.s8583e3_client.sfd9d8a_spec.s5f67aa_ts` pins this. */\n\n.s255e5a_panel {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  /* The shelf never scrolls sideways: a card too wide for its track wraps\n   * its badges rather than widening the panel.\n   *\n   * Clipped on BOTH axes, with a margin, because `.s232ec4_searchInput` sits at\n   * exactly (0, 0) of this box — it is the first child of `.s646509_toolbar`, itself\n   * the first child here, and this rule carries no padding — so its focus\n   * ring paints ENTIRELY outside the panel.\n   *\n   * Both axes is the load-bearing part: `overflow-clip-margin` is inert\n   * unless the element clips on both. Clipping x alone left the margin doing\n   * nothing — measured against the live app on 0.7.1, the ring reached 0 of\n   * its 3px on the left at every device pixel ratio (1, 1.25, 1.5, 2), while\n   * keeping the full 3px on the right, where the 280px input stops short of\n   * the panel and never meets the clip edge. Raising the margin to 6px\n   * changed nothing; clipping both axes with the SAME 3px restored the whole\n   * ring. A test that reads declarations cannot see that difference, which is\n   * why the first attempt at this shipped broken.\n   *\n   * `clip` is not a scroll container, so this does not bring back the\n   * accidental scrolling `hidden` caused by coercing the other axis to\n   * `auto`. Nothing is lost vertically: the panel's scrollHeight equals its\n   * height and no descendant paints outside the clip rect (measured).\n   * `overflow-x: hidden` stays as the fallback for engines without `clip`,\n   * where the ring is clipped as it was before, never worse. */\n  overflow-x: hidden;\n  overflow: clip;\n  overflow-clip-margin: 3px;\n}\n\n.s44a3ec_stateLine {\n  margin: 0;\n  color: var(--dsw-alias-label-primary);\n  font-size: 13px;\n}\n\n/* Visually hidden but screen-reader readable (the loading copy while the\n * skeleton stands in visually). */\n.s3a0ece_srOnly {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n/* The loading shelf: ghost cards with the same geometry as the real grid, so\n * the swap to content is a same-shape handoff instead of a jump. */\n.se0c3b4_skeletonGrid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 8px;\n}\n\n.s520416_skeletonCard {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--dsw-alias-border-l1);\n  border-radius: 10px;\n  background: var(--dsw-alias-bg-layer-1);\n  overflow: hidden;\n}\n\n/* The shimmer sweep: one gradient band travels across each ghost card while\n * the bars breathe, so the loading state reads as \"the shelf is scanning\". */\n.s520416_skeletonCard::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    100deg,\n    transparent 25%,\n    color-mix(in srgb, var(--dsw-alias-label-primary) 14%, transparent) 50%,\n    transparent 75%\n  );\n  transform: translateX(-100%);\n  animation: dshShopSkeletonSweep 1.4s ease-in-out infinite;\n  pointer-events: none;\n}\n\n@keyframes dshShopSkeletonSweep {\n  to { transform: translateX(100%); }\n}\n\n.s8c7d6f_skeletonName {\n  width: 55%;\n  height: 14px;\n  margin: 10px 12px 0;\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--dsw-alias-label-primary) 8%, transparent);\n}\n\n.sf5179e_skeletonSummary {\n  width: 92%;\n  height: 12px;\n  margin: 10px 12px 0;\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--dsw-alias-label-primary) 8%, transparent);\n}\n\n.sbb0d25_skeletonSummaryShort {\n  width: 68%;\n  height: 12px;\n  margin: 6px 12px 10px;\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--dsw-alias-label-primary) 8%, transparent);\n}\n\n/* The ghost of the action line, right where the real buttons land. */\n.s96e910_skeletonActions {\n  display: block;\n  width: 84px;\n  height: 24px;\n  margin: 0 12px 10px;\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--dsw-alias-label-primary) 8%, transparent);\n}\n\n.s520416_skeletonCard span {\n  animation: dshShopSkeletonPulse 1.6s ease-in-out infinite;\n}\n\n@keyframes dshShopSkeletonPulse {\n  0%, 100% { opacity: 0.5; }\n  50% { opacity: 1; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .s520416_skeletonCard span { animation: none; opacity: 0.75; }\n  .s520416_skeletonCard::after { content: none; }\n}\n\n.s73242a_actionButton {\n  align-self: flex-start;\n  padding: 5px 14px;\n  border: 1px solid var(--dsw-alias-border-l2);\n  border-radius: 6px;\n  background: var(--dsw-alias-bg-layer-2);\n  color: var(--dsw-alias-label-primary);\n  font-size: 13px;\n  cursor: pointer;\n}\n\n.s73242a_actionButton:hover {\n  border-color: color-mix(in srgb, var(--dsw-alias-brand-primary) 45%, var(--dsw-alias-border-l2));\n  color: var(--dsw-alias-brand-primary);\n}\n\n.s73242a_actionButton:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary);\n  outline-offset: 1px;\n}\n\n.s646509_toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.s745e3c_toolbarRight {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n/* The shop's own version, right of the search box: `v0.4.4`, plus the\n * update button when the version check found a newer release. */\n.s4fe61f_versionBlock {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.sb9b924_versionText {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 12px;\n  letter-spacing: 0.02em;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.sa04455_updateSelfButton {\n  padding: 2px 10px;\n  border: 1px solid var(--dsw-alias-brand-primary);\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--dsw-alias-brand-primary) 12%, transparent);\n  color: var(--dsw-alias-brand-primary);\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.sa04455_updateSelfButton:hover {\n  background: color-mix(in srgb, var(--dsw-alias-brand-primary) 20%, transparent);\n}\n\n.sa04455_updateSelfButton:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary);\n  outline-offset: 1px;\n}\n\n/* The on-demand re-check next to the version number: a quiet pill; the\n * border and text carry it in the light theme where bg layers are white. */\n.s614a38_checkUpdateButton {\n  padding: 2px 10px;\n  border: 1px solid var(--dsw-alias-border-l2);\n  border-radius: 999px;\n  background: var(--dsw-alias-bg-layer-2);\n  color: var(--dsw-alias-label-secondary);\n  font-size: 12px;\n  cursor: pointer;\n}\n\n.s614a38_checkUpdateButton:hover {\n  border-color: var(--dsw-alias-label-secondary);\n  color: var(--dsw-alias-label-primary);\n}\n\n.s614a38_checkUpdateButton:disabled {\n  opacity: 0.6;\n  cursor: default;\n}\n\n.s614a38_checkUpdateButton:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary);\n  outline-offset: 1px;\n}\n\n/* The project's GitHub mark, right of the version row: a quiet icon link.\n * The octocat carries itself — color shift on hover, no text, no border. */\n.sa987f7_githubLink {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 3px;\n  border-radius: 6px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.sa987f7_githubLink:hover {\n  color: var(--dsw-alias-label-primary);\n  background: var(--dsw-alias-bg-layer-2);\n}\n\n.sa987f7_githubLink:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary);\n  outline-offset: 1px;\n}\n\n/* The self-update's expanded states (running log / done + restart /\n * failure detail) sit under the toolbar, above the category bar. */\n.sb81ba5_selfUpdatePanel {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-top: 8px;\n}\n\n.s232ec4_searchInput {\n  width: min(280px, 100%);\n  padding: 6px 10px;\n  border: 1px solid var(--dsw-alias-border-l2);\n  border-radius: 6px;\n  background: var(--dsw-alias-bg-layer-1);\n  color: var(--dsw-alias-label-primary);\n  font-size: 13px;\n}\n\n.s232ec4_searchInput:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary);\n  outline-offset: 1px;\n}\n\n.s3946f1_staleBadge {\n  padding: 2px 8px;\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 14%, transparent);\n  border: 1px solid color-mix(in srgb, var(--dsw-alias-state-warn-primary) 40%, transparent);\n  color: var(--dsw-alias-state-warn-primary);\n  font-size: 12px;\n}\n\n.sb2c859_categoryBar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin-top: 6px;\n}\n\n.s26d58e_categoryButton {\n  padding: 3px 10px;\n  border: 1px solid var(--dsw-alias-border-l2);\n  border-radius: 999px;\n  background: var(--dsw-alias-bg-layer-1);\n  color: var(--dsw-alias-label-secondary);\n  font-size: 12px;\n  cursor: pointer;\n}\n\n.s26d58e_categoryButton:hover {\n  border-color: color-mix(in srgb, var(--dsw-alias-brand-primary) 45%, var(--dsw-alias-border-l2));\n  color: var(--dsw-alias-brand-primary);\n}\n\n.s5f68c4_categoryButtonOn {\n  border-color: var(--dsw-alias-brand-primary);\n  background: color-mix(in srgb, var(--dsw-alias-brand-primary) 12%, transparent);\n  color: var(--dsw-alias-brand-primary);\n  font-weight: 600;\n}\n\n.s26d58e_categoryButton:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary);\n  outline-offset: 1px;\n}\n\n.s668774_catalogHeading {\n  margin: 2px 0 0;\n  font-size: 16px;\n  font-weight: 600;\n  letter-spacing: 0.02em;\n  color: var(--dsw-alias-label-primary);\n}\n\n.seb0a1e_catalogStatsRow {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin: 6px 0 0;\n}\n\n.sccc4d1_catalogStats {\n  margin: 0;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 12px;\n  letter-spacing: 0.02em;\n  color: var(--dsw-alias-label-secondary);\n}\n\n/* Sits beside the 12px stats caption, so it is quieter than `.s73242a_actionButton`:\n * this is an affordance, not a call to action — the catalog reloads on its\n * own at mount and the shelf is already usable without it. */\n.s64a5ff_reloadButton {\n  padding: 1px 9px;\n  border: 1px solid var(--dsw-alias-border-l2);\n  border-radius: 999px;\n  background: transparent;\n  color: var(--dsw-alias-label-secondary);\n  font-size: 11px;\n  line-height: 17px;\n  cursor: pointer;\n}\n\n.s64a5ff_reloadButton:hover:not(:disabled) {\n  border-color: color-mix(in srgb, var(--dsw-alias-brand-primary) 45%, var(--dsw-alias-border-l2));\n  color: var(--dsw-alias-brand-primary);\n}\n\n.s64a5ff_reloadButton:disabled {\n  cursor: default;\n  opacity: 0.6;\n}\n\n.s64a5ff_reloadButton:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary);\n  outline-offset: 1px;\n}\n\n.s4453f3_reloadFailed {\n  font-size: 11px;\n  color: var(--dsw-alias-state-warn-primary);\n}\n\n.s6de1ab_emptyLine {\n  margin: 0;\n  color: var(--dsw-alias-label-primary);\n  font-size: 13px;\n}\n\n/* The shelf: a responsive grid of cards. */\n/* Single-line rows: one full-width column, one plugin per line. */\n.sf657f5_cards {\n  display: grid;\n  grid-template-columns: 1fr;\n  max-width: 100%;\n  gap: 8px;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  animation: dshShopCardsIn 220ms ease;\n}\n\n@keyframes dshShopCardsIn {\n  from { opacity: 0; transform: translateY(3px); }\n  to { opacity: 1; transform: none; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sf657f5_cards { animation: none; }\n}\n\n.s65f383_card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  /* A grid item's min-width is auto by default: its content would widen the\n   * 1fr track past the panel and overflow horizontally. */\n  min-width: 0;\n  border: 1px solid var(--dsw-alias-border-l1);\n  border-radius: 10px;\n  background: var(--dsw-alias-bg-layer-1);\n  overflow: hidden;\n  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;\n  /* Off-screen cards skip layout and paint; the placeholder keeps scrollbar\n   * estimation sane before the browser has measured the real height. */\n  content-visibility: auto;\n  contain-intrinsic-size: auto 140px;\n}\n\n/* The sentinel that triggers the next shelf batch: zero visual footprint. */\n.sd7ee01_cardsSentry {\n  height: 1px;\n  margin: 0;\n  padding: 0;\n}\n\n.s705cc6_showingLine {\n  margin: 0;\n  font-size: 12px;\n  letter-spacing: 0.02em;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.s65f383_card:hover {\n  border-color: color-mix(in srgb, var(--dsw-alias-brand-primary) 45%, var(--dsw-alias-border-l1));\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--dsw-alias-brand-primary) 12%, transparent);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .s65f383_card { transition: none; }\n  .s65f383_card:hover { transform: none; }\n}\n\n/* The signature: a spine and cover in the category's own hue. The hues are\n * fixed mid-bright colors that read on both themes; `other` deliberately\n * stays a neutral gray so the fallback category does not compete. */\n.s4ce25d_cardSpine {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 3px;\n  background: var(--spine-hue, #8B8E96);\n}\n\n.s65f383_card[data-category='tool'] { --spine-hue: #4C8DFF; }\n.s65f383_card[data-category='provider'] { --spine-hue: #A78BFA; }\n.s65f383_card[data-category='ui'] { --spine-hue: #2DD4BF; }\n.s65f383_card[data-category='workflow'] { --spine-hue: #F59E0B; }\n.s65f383_card[data-category='integration'] { --spine-hue: #34D399; }\n.s65f383_card[data-category='theme'] { --spine-hue: #F472B6; }\n.s65f383_card[data-category='other'] { --spine-hue: #8B8E96; }\n\n/* The category sits in the badge row as a quiet chip in the category's own\n * hue — the border carries it where the light theme's white layers cannot\n * (the same lesson as the check button). */\n.s9c8eaa_categoryBadge {\n  padding: 1px 7px;\n  border: 1px solid color-mix(in srgb, var(--spine-hue, #8B8E96) 45%, transparent);\n  border-radius: 999px;\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--spine-hue, #8B8E96);\n  white-space: nowrap;\n}\n\n.sa97234_entryHeader {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n  padding: 8px 12px 2px;\n  border: none;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n}\n\n.sa97234_entryHeader:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary);\n  outline-offset: -2px;\n}\n\n/* The name fills the row and truncates rather than wraps; the badges stay\n * intact beside it. */\n.sc3f149_name {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 13px;\n  font-weight: 600;\n  flex: 1 1 auto;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--dsw-alias-label-primary);\n}\n\n.s513026_badges {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n/* The action line: buttons side by side; an active install/uninstall flow\n * (gate, log, notices) takes the full width below them. */\n.s9b5048_cardActions {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px 10px;\n}\n\n.s9b5048_cardActions > .sc4f2ac_gate,\n.s9b5048_cardActions > .s4d374c_installPanel,\n.s9b5048_cardActions > .sf53ca0_installedActions {\n  flex-basis: 100%;\n}\n\n/* The entry's version, always visible on the card (the expanded detail\n * repeats it in the version row) — the same quiet mono as the toolbar. */\n.sc6ec6e_cardVersion {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 12px;\n  letter-spacing: 0.02em;\n  color: var(--dsw-alias-label-secondary);\n}\n\n/* The octocat marking a github-sourced entry, beside its short commit. */\n.s71f10f_sourceBadge {\n  display: inline-flex;\n  align-items: center;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.s5e82cb_tierBadge {\n  padding: 1px 7px;\n  border-radius: 999px;\n  font-size: 11px;\n  line-height: 1.6;\n}\n\n.s5e82cb_tierBadge[data-tier='verified'] {\n  color: var(--dsw-alias-state-success-primary);\n  background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 14%, transparent);\n  border: 1px solid color-mix(in srgb, var(--dsw-alias-state-success-primary) 40%, transparent);\n}\n\n.s5e82cb_tierBadge[data-tier='verified-stale'] {\n  color: var(--dsw-alias-state-warn-primary);\n  background: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 14%, transparent);\n  border: 1px solid color-mix(in srgb, var(--dsw-alias-state-warn-primary) 40%, transparent);\n}\n\n.s5e82cb_tierBadge[data-tier='community'] {\n  color: var(--dsw-alias-label-secondary);\n  background: var(--dsw-alias-bg-layer-2);\n  border: 1px solid var(--dsw-alias-border-l2);\n}\n\n.s4bbe02_incompatibleBadge {\n  padding: 1px 7px;\n  border-radius: 999px;\n  font-size: 11px;\n  color: var(--dsw-alias-state-error-primary);\n  background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 14%, transparent);\n  border: 1px solid color-mix(in srgb, var(--dsw-alias-state-error-primary) 40%, transparent);\n}\n\n.sff43b4_starsBadge {\n  font-size: 11px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.s73f7fb_chevron, .s61393c_chevronOpen {\n  color: var(--dsw-alias-label-secondary);\n  transition: transform 120ms ease;\n}\n\n.s61393c_chevronOpen { transform: rotate(180deg); }\n\n@media (prefers-reduced-motion: reduce) {\n  .s73f7fb_chevron, .s61393c_chevronOpen { transition: none; }\n}\n\n.s820ebf_body {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 0 12px;\n}\n\n.sb8fbc8_summary {\n  margin: 0;\n  font-size: 13px;\n  line-height: 1.5;\n  color: var(--dsw-alias-label-primary);\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.se507db_summaryZh {\n  margin: -4px 0 0;\n  font-size: 12px;\n  line-height: 1.5;\n  color: var(--dsw-alias-label-secondary);\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* Expanded cards show the full summary: the clamp is lifted, never raised —\n * a higher number would still truncate the author's text, just later. */\n.s10baf0_summaryExpanded {\n  -webkit-line-clamp: unset;\n  display: block;\n}\n\n.sb9dba9_summaryZhExpanded {\n  -webkit-line-clamp: unset;\n  display: block;\n}\n\n/* `white-space: pre-line` so the newline in the copy is the copy's own: the\n   dictionary decides where the line breaks, and a translator changes it\n   without touching the component. Collapses runs of spaces like `normal`, so\n   only the explicit \\n survives. */\n.s6eca19_incompatibleDetail {\n  margin: 0;\n  font-size: 12px;\n  line-height: 1.5;\n  white-space: pre-line;\n  color: var(--dsw-alias-state-error-primary);\n}\n\n.s9d2029_capabilitiesBlock {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.s3bdbd5_capabilitiesNote {\n  margin: 0;\n  font-size: 11px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.s441702_capabilities {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.s441702_capabilities li {\n  padding: 1px 6px;\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--dsw-alias-label-primary) 6%, transparent);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 11px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.sde3f0c_detail {\n  border-top: 1px solid var(--dsw-alias-border-l1);\n  padding-top: 8px;\n}\n\n.se98179_detailRows {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  margin: 0;\n}\n\n.sfb4d2f_detailRow {\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  font-size: 12px;\n}\n\n.sfb4d2f_detailRow dt {\n  color: var(--dsw-alias-label-secondary);\n}\n\n.sfb4d2f_detailRow dd {\n  margin: 0;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  overflow-wrap: anywhere;\n  text-align: right;\n  color: var(--dsw-alias-label-primary);\n}\n\n.sfb4d2f_detailRow a {\n  color: var(--dsw-alias-brand-primary);\n  text-decoration: none;\n}\n\n.sfb4d2f_detailRow a:hover {\n  text-decoration: underline;\n}\n\n.sfb4d2f_detailRow a:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary);\n  outline-offset: 1px;\n}\n\n/* The publishing account, beside the npm link. Secondary label colour and a\n * middot separator carry the distinction — never a background fill, which is\n * invisible in the light theme where every bg-layer token is the same white. */\n/* Who published the entry, at the right edge of the action row. `margin-left:\n * auto` is what pushes it there; the row is a wrapping flex, so an active\n * install flow (which claims the full width) drops this to the next line\n * rather than squeezing it. */\n.s1ff66f_author {\n  margin-left: auto;\n  color: var(--dsw-alias-label-secondary);\n  font-size: 12px;\n}\n\n.sd58c6d_reviewedLine {\n  margin: 8px 0 0;\n  padding: 6px 8px;\n  border-radius: 6px;\n  background: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 12%, transparent);\n  font-size: 12px;\n  color: var(--dsw-alias-state-warn-primary);\n}\n\n/* Install flow. */\n.s4d374c_installPanel {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-top: 2px;\n}\n\n.se7aaed_installButton, .sb43a49_confirmButton, .s6e45d1_cancelButton {\n  align-self: flex-start;\n  padding: 5px 14px;\n  border-radius: 6px;\n  font-size: 13px;\n  cursor: pointer;\n}\n\n.se7aaed_installButton {\n  border: 1px solid var(--dsw-alias-brand-primary);\n  background: var(--dsw-alias-brand-primary);\n  color: var(--dsw-alias-bg-base);\n}\n\n.se7aaed_installButton:hover {\n  background: color-mix(in srgb, var(--dsw-alias-brand-primary) 88%, var(--dsw-alias-label-primary));\n}\n\n.sb43a49_confirmButton {\n  border: 1px solid var(--dsw-alias-brand-primary);\n  background: var(--dsw-alias-brand-primary);\n  color: var(--dsw-alias-bg-base);\n}\n\n.sb43a49_confirmButton:hover {\n  background: color-mix(in srgb, var(--dsw-alias-brand-primary) 88%, var(--dsw-alias-label-primary));\n}\n\n.s6e45d1_cancelButton {\n  border: 1px solid var(--dsw-alias-border-l2);\n  background: var(--dsw-alias-bg-layer-2);\n  color: var(--dsw-alias-label-primary);\n}\n\n.s6e45d1_cancelButton:hover {\n  border-color: var(--dsw-alias-label-secondary);\n}\n\n.se7aaed_installButton:focus-visible, .sb43a49_confirmButton:focus-visible, .s6e45d1_cancelButton:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary);\n  outline-offset: 1px;\n}\n\n/* The shelf card of a plugin that is installed and current carries this\n * non-interactive label instead of an install button. Border + text do the\n * work in the light theme, where every bg-layer token resolves to white. */\n.sb6fc74_installedLabel {\n  align-self: flex-start;\n  margin: 0;\n  padding: 5px 14px;\n  border: 1px solid var(--dsw-alias-border-l2);\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--dsw-alias-label-secondary);\n  background: var(--dsw-alias-bg-layer-2);\n}\n\n/* An installed card's controls: the installed label or the update button,\n * plus the uninstall button. The install panel's running/failed states are\n * column layouts and sit as one item of this row. */\n.sf53ca0_installedActions {\n  display: flex;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n/* Uninstall revokes privilege; the quiet outline keeps it from competing\n * with the primary action, and the error tint says \"removes\". */\n.s96967f_uninstallButton {\n  align-self: flex-start;\n  padding: 5px 14px;\n  border: 1px solid color-mix(in srgb, var(--dsw-alias-state-error-primary) 55%, transparent);\n  border-radius: 6px;\n  background: transparent;\n  color: var(--dsw-alias-state-error-primary);\n  font-size: 13px;\n  cursor: pointer;\n}\n\n.s96967f_uninstallButton:hover {\n  background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent);\n}\n\n.s96967f_uninstallButton:focus-visible {\n  outline: 2px solid var(--dsw-alias-state-error-primary);\n  outline-offset: 1px;\n}\n\n/* The restart dsh button on a done install: quiet outline, same rank as\n * the other secondary actions. */\n.sb00c36_restartSelfButton {\n  /* The version row's third state. Geometry matches .s614a38_checkUpdateButton and\n   * .sa04455_updateSelfButton exactly — the row is one evolving control and a\n   * different pill would read as a different kind of thing. It takes the\n   * emphasised fill rather than the neutral one because at that moment the\n   * restart is the only thing left to do, the same reason Update has it. */\n  padding: 2px 10px;\n  border: 1px solid var(--dsw-alias-brand-primary);\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--dsw-alias-brand-primary) 12%, transparent);\n  color: var(--dsw-alias-brand-primary);\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.sb00c36_restartSelfButton:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary);\n  outline-offset: 1px;\n}\n\n.s6ac237_restartButton {\n  align-self: flex-start;\n  padding: 5px 14px;\n  border: 1px solid var(--dsw-alias-border-l2);\n  border-radius: 6px;\n  background: var(--dsw-alias-bg-layer-2);\n  color: var(--dsw-alias-label-primary);\n  font-size: 13px;\n  cursor: pointer;\n}\n\n.s6ac237_restartButton:hover {\n  border-color: var(--dsw-alias-label-secondary);\n}\n\n.s6ac237_restartButton:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary);\n  outline-offset: 1px;\n}\n\n.sc4f2ac_gate {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 10px;\n  border: 1px solid var(--dsw-alias-state-warn-primary);\n  border-radius: 8px;\n  background: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 8%, transparent);\n}\n\n.s559c38_gateTitle {\n  margin: 0;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--dsw-alias-state-warn-primary);\n}\n\n.s3c0ace_gateBody {\n  margin: 0;\n  font-size: 12px;\n  line-height: 1.6;\n  color: var(--dsw-alias-label-primary);\n}\n\n.sc323e5_gateWarning {\n  margin: 0;\n  font-size: 12px;\n  line-height: 1.6;\n  white-space: pre-line;\n  color: var(--dsw-alias-state-error-primary);\n}\n\n.s4b2373_gateActions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.s52b5a5_installing {\n  margin: 0;\n  font-size: 12px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.s64ab71_log {\n  max-height: 160px;\n  overflow: auto;\n  margin: 0;\n  padding: 8px;\n  border-radius: 6px;\n  background: var(--dsw-alias-bg-base);\n  border: 1px solid var(--dsw-alias-border-l1);\n  list-style: none;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 11px;\n  line-height: 1.5;\n}\n\n.s1531a8_logLine {\n  white-space: pre-wrap;\n  word-break: break-all;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.sf20dda_notice {\n  margin: 0;\n  font-size: 12px;\n  color: var(--dsw-alias-state-success-primary);\n}\n\n.seb9b08_failedHeading {\n  margin: 0;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--dsw-alias-state-error-primary);\n}\n\n.sfd3021_failedDetail {\n  margin: 0;\n  font-size: 12px;\n  line-height: 1.6;\n  color: var(--dsw-alias-label-primary);\n}\n\n.s50ba35_rejectedCode {\n  margin: 0;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--dsw-alias-state-error-primary);\n}\n\n.se75489_rejectedDetail {\n  margin: 0;\n  font-size: 12px;\n  line-height: 1.6;\n  color: var(--dsw-alias-label-primary);\n}\n\n/* Installed section. */\n.sa276cf_outdatedSection {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-top: 6px;\n}\n\n.sceae6e_outdatedList {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.s8d2072_outdatedRow {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  flex-wrap: wrap;\n  padding: 10px 12px;\n  border: 1px solid var(--dsw-alias-border-l1);\n  border-radius: 8px;\n  background: var(--dsw-alias-bg-layer-1);\n}\n\n.s5c2545_outdatedInfo {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.s5c2545_outdatedInfo strong {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 13px;\n  word-break: break-all;\n  color: var(--dsw-alias-label-primary);\n}\n\n.s877c68_outdatedVersions {\n  /* Two inline labels with nothing between them in the markup ran together as\n   * `installed v1.0.0latest v2.0.0`: JSX drops the whitespace-only line, and\n   * the per-label class the markup asked for was never defined (singular\n   * against this rule's plural). The container owns the gap, the same idiom\n   * as .s513026_badges — the labels need no class of their own. */\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.sa1f556_outdatedActions {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n/* The enable/disable switch. */\n.s11c019_switch {\n  position: relative;\n  width: 32px;\n  height: 18px;\n  border: 1px solid var(--dsw-alias-border-l2);\n  border-radius: 999px;\n  background: var(--dsw-alias-bg-layer-2);\n  cursor: pointer;\n  transition: background 120ms ease, border-color 120ms ease;\n}\n\n.s7580e8_switchOn {\n  border-color: var(--dsw-alias-state-success-primary);\n  background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 55%, transparent);\n}\n\n.saab2b3_switchKnob {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 12px;\n  height: 12px;\n  border-radius: 999px;\n  background: var(--dsw-alias-label-primary);\n  transition: transform 120ms ease, background 120ms ease;\n}\n\n.s7580e8_switchOn .saab2b3_switchKnob {\n  transform: translateX(14px);\n  background: var(--dsw-alias-bg-base);\n}\n\n.s11c019_switch:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary);\n  outline-offset: 1px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .s11c019_switch, .saab2b3_switchKnob { transition: none; }\n}\n\n/* The hot enable/disable switch on installed rows: the knob button plus the\n * §8 hot-apply / failure notices rendered beside it. */\n.sd9f9e4_switchWrap {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n";
+		const css = "/* Shop tab styles — a market shelf inside the settings surface. The visual\n * language is the dsh theme's alias tokens ONLY (the four tokens the previous\n * styles referenced that do not exist — bg-layer-3, interactive-bg-hover,\n * state-error, state-success — are corrected to bg-layer-2 and the\n * state-*-primary set). The signature is the category spine: one HUE per\n * category (seven fixed hues, not the brand token — the brand resolves to\n * near-black in the light theme, so seven brand opacities read as seven\n * shades of gray), with the category name as the cover label in the same hue. Class names are mapped to content-derived names at bundle time\n * (tsdown.s8583e3_client.s942a79_config.s5f67aa_ts) and stubbed in tests; only the keys are relied\n * on.\n *\n * One token rule the theme forces: the background LAYERS do not carry\n * contrast. In the light theme bg-base, bg-layer-1, bg-layer-2 and\n * bg-layer-3 all resolve to the same white; only the dark theme spreads them\n * (950/875/850/800). So a layer-2 fill on a layer-1 ground is invisible for\n * half of all users, and anything whose fill is its ONLY affordance — the\n * loading skeleton, the borderless capability chips — derives its fill from\n * label-primary instead, which inverts with the theme by construction.\n * Elements that also carry a border or text may keep a layer fill.\n * `css-tokens.s8583e3_client.sfd9d8a_spec.s5f67aa_ts` pins this. */\n\n.s255e5a_panel {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  /* The shelf never scrolls sideways: a card too wide for its track wraps\n   * its badges rather than widening the panel.\n   *\n   * Clipped on BOTH axes, with a margin, because `.s232ec4_searchInput` sits at\n   * exactly (0, 0) of this box — it is the first child of `.s646509_toolbar`, itself\n   * the first child here, and this rule carries no padding — so its focus\n   * ring paints ENTIRELY outside the panel.\n   *\n   * Both axes is the load-bearing part: `overflow-clip-margin` is inert\n   * unless the element clips on both. Clipping x alone left the margin doing\n   * nothing — measured against the live app on 0.7.1, the ring reached 0 of\n   * its 3px on the left at every device pixel ratio (1, 1.25, 1.5, 2), while\n   * keeping the full 3px on the right, where the 280px input stops short of\n   * the panel and never meets the clip edge. Raising the margin to 6px\n   * changed nothing; clipping both axes with the SAME 3px restored the whole\n   * ring. A test that reads declarations cannot see that difference, which is\n   * why the first attempt at this shipped broken.\n   *\n   * `clip` is not a scroll container, so this does not bring back the\n   * accidental scrolling `hidden` caused by coercing the other axis to\n   * `auto`. Nothing is lost vertically: the panel's scrollHeight equals its\n   * height and no descendant paints outside the clip rect (measured).\n   * `overflow-x: hidden` stays as the fallback for engines without `clip`,\n   * where the ring is clipped as it was before, never worse. */\n  overflow-x: hidden;\n  overflow: clip;\n  overflow-clip-margin: 3px;\n}\n\n.s44a3ec_stateLine {\n  margin: 0;\n  color: var(--dsw-alias-label-primary);\n  font-size: 13px;\n}\n\n/* Visually hidden but screen-reader readable (the loading copy while the\n * skeleton stands in visually). */\n.s3a0ece_srOnly {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n/* The loading shelf: ghost cards with the same geometry as the real grid, so\n * the swap to content is a same-shape handoff instead of a jump. */\n.se0c3b4_skeletonGrid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 8px;\n}\n\n.s520416_skeletonCard {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--dsw-alias-border-l1);\n  border-radius: 10px;\n  background: var(--dsw-alias-bg-layer-1);\n  overflow: hidden;\n}\n\n/* The shimmer sweep: one gradient band travels across each ghost card while\n * the bars breathe, so the loading state reads as \"the shelf is scanning\". */\n.s520416_skeletonCard::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    100deg,\n    transparent 25%,\n    color-mix(in srgb, var(--dsw-alias-label-primary) 14%, transparent) 50%,\n    transparent 75%\n  );\n  transform: translateX(-100%);\n  animation: dshShopSkeletonSweep 1.4s ease-in-out infinite;\n  pointer-events: none;\n}\n\n@keyframes dshShopSkeletonSweep {\n  to { transform: translateX(100%); }\n}\n\n.s8c7d6f_skeletonName {\n  width: 55%;\n  height: 14px;\n  margin: 10px 12px 0;\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--dsw-alias-label-primary) 8%, transparent);\n}\n\n.sf5179e_skeletonSummary {\n  width: 92%;\n  height: 12px;\n  margin: 10px 12px 0;\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--dsw-alias-label-primary) 8%, transparent);\n}\n\n.sbb0d25_skeletonSummaryShort {\n  width: 68%;\n  height: 12px;\n  margin: 6px 12px 10px;\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--dsw-alias-label-primary) 8%, transparent);\n}\n\n/* The ghost of the action line, right where the real buttons land. */\n.s96e910_skeletonActions {\n  display: block;\n  width: 84px;\n  height: 24px;\n  margin: 0 12px 10px;\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--dsw-alias-label-primary) 8%, transparent);\n}\n\n.s520416_skeletonCard span {\n  animation: dshShopSkeletonPulse 1.6s ease-in-out infinite;\n}\n\n@keyframes dshShopSkeletonPulse {\n  0%, 100% { opacity: 0.5; }\n  50% { opacity: 1; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .s520416_skeletonCard span { animation: none; opacity: 0.75; }\n  .s520416_skeletonCard::after { content: none; }\n}\n\n.s73242a_actionButton {\n  align-self: flex-start;\n  padding: 5px 14px;\n  border: 1px solid var(--dsw-alias-border-l2);\n  border-radius: 6px;\n  background: var(--dsw-alias-bg-layer-2);\n  color: var(--dsw-alias-label-primary);\n  font-size: 13px;\n  cursor: pointer;\n}\n\n.s73242a_actionButton:hover {\n  border-color: color-mix(in srgb, var(--dsw-alias-brand-primary) 45%, var(--dsw-alias-border-l2));\n  color: var(--dsw-alias-brand-primary);\n}\n\n.s73242a_actionButton:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary);\n  outline-offset: 1px;\n}\n\n.s646509_toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.s745e3c_toolbarRight {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n/* The shop's own version, right of the search box: `v0.4.4`, plus the\n * update button when the version check found a newer release. */\n.s4fe61f_versionBlock {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.sb9b924_versionText {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 12px;\n  letter-spacing: 0.02em;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.sa04455_updateSelfButton {\n  padding: 2px 10px;\n  border: 1px solid var(--dsw-alias-brand-primary);\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--dsw-alias-brand-primary) 12%, transparent);\n  color: var(--dsw-alias-brand-primary);\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.sa04455_updateSelfButton:hover {\n  background: color-mix(in srgb, var(--dsw-alias-brand-primary) 20%, transparent);\n}\n\n.sa04455_updateSelfButton:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary);\n  outline-offset: 1px;\n}\n\n/* The on-demand re-check next to the version number: a quiet pill; the\n * border and text carry it in the light theme where bg layers are white. */\n.s614a38_checkUpdateButton {\n  padding: 2px 10px;\n  border: 1px solid var(--dsw-alias-border-l2);\n  border-radius: 999px;\n  background: var(--dsw-alias-bg-layer-2);\n  color: var(--dsw-alias-label-secondary);\n  font-size: 12px;\n  cursor: pointer;\n}\n\n.s614a38_checkUpdateButton:hover {\n  border-color: var(--dsw-alias-label-secondary);\n  color: var(--dsw-alias-label-primary);\n}\n\n.s614a38_checkUpdateButton:disabled {\n  opacity: 0.6;\n  cursor: default;\n}\n\n.s614a38_checkUpdateButton:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary);\n  outline-offset: 1px;\n}\n\n/* The project's GitHub mark, right of the version row: a quiet icon link.\n * The octocat carries itself — color shift on hover, no text, no border. */\n.sa987f7_githubLink {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 3px;\n  border-radius: 6px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.sa987f7_githubLink:hover {\n  color: var(--dsw-alias-label-primary);\n  background: var(--dsw-alias-bg-layer-2);\n}\n\n.sa987f7_githubLink:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary);\n  outline-offset: 1px;\n}\n\n/* The self-update's expanded states (running log / done + restart /\n * failure detail) sit under the toolbar, above the category bar. */\n.sb81ba5_selfUpdatePanel {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-top: 8px;\n}\n\n.s232ec4_searchInput {\n  width: min(280px, 100%);\n  padding: 6px 10px;\n  border: 1px solid var(--dsw-alias-border-l2);\n  border-radius: 6px;\n  background: var(--dsw-alias-bg-layer-1);\n  color: var(--dsw-alias-label-primary);\n  font-size: 13px;\n}\n\n.s232ec4_searchInput:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary);\n  outline-offset: 1px;\n}\n\n.s3946f1_staleBadge {\n  padding: 2px 8px;\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 14%, transparent);\n  border: 1px solid color-mix(in srgb, var(--dsw-alias-state-warn-primary) 40%, transparent);\n  color: var(--dsw-alias-state-warn-primary);\n  font-size: 12px;\n}\n\n.sb2c859_categoryBar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin-top: 6px;\n}\n\n.s26d58e_categoryButton {\n  padding: 3px 10px;\n  border: 1px solid var(--dsw-alias-border-l2);\n  border-radius: 999px;\n  background: var(--dsw-alias-bg-layer-1);\n  color: var(--dsw-alias-label-secondary);\n  font-size: 12px;\n  cursor: pointer;\n}\n\n.s26d58e_categoryButton:hover {\n  border-color: color-mix(in srgb, var(--dsw-alias-brand-primary) 45%, var(--dsw-alias-border-l2));\n  color: var(--dsw-alias-brand-primary);\n}\n\n.s5f68c4_categoryButtonOn {\n  border-color: var(--dsw-alias-brand-primary);\n  background: color-mix(in srgb, var(--dsw-alias-brand-primary) 12%, transparent);\n  color: var(--dsw-alias-brand-primary);\n  font-weight: 600;\n}\n\n.s26d58e_categoryButton:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary);\n  outline-offset: 1px;\n}\n\n.s668774_catalogHeading {\n  margin: 2px 0 0;\n  font-size: 16px;\n  font-weight: 600;\n  letter-spacing: 0.02em;\n  color: var(--dsw-alias-label-primary);\n}\n\n.seb0a1e_catalogStatsRow {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin: 6px 0 0;\n}\n\n.sccc4d1_catalogStats {\n  margin: 0;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 12px;\n  letter-spacing: 0.02em;\n  color: var(--dsw-alias-label-secondary);\n}\n\n/* Sits beside the 12px stats caption, so it is quieter than `.s73242a_actionButton`:\n * this is an affordance, not a call to action — the catalog reloads on its\n * own at mount and the shelf is already usable without it. */\n.s64a5ff_reloadButton {\n  padding: 1px 9px;\n  border: 1px solid var(--dsw-alias-border-l2);\n  border-radius: 999px;\n  background: transparent;\n  color: var(--dsw-alias-label-secondary);\n  font-size: 11px;\n  line-height: 17px;\n  cursor: pointer;\n}\n\n.s64a5ff_reloadButton:hover:not(:disabled) {\n  border-color: color-mix(in srgb, var(--dsw-alias-brand-primary) 45%, var(--dsw-alias-border-l2));\n  color: var(--dsw-alias-brand-primary);\n}\n\n.s64a5ff_reloadButton:disabled {\n  cursor: default;\n  opacity: 0.6;\n}\n\n.s64a5ff_reloadButton:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary);\n  outline-offset: 1px;\n}\n\n.s4453f3_reloadFailed {\n  font-size: 11px;\n  color: var(--dsw-alias-state-warn-primary);\n}\n\n.s6de1ab_emptyLine {\n  margin: 0;\n  color: var(--dsw-alias-label-primary);\n  font-size: 13px;\n}\n\n/* The shelf: a responsive grid of cards. */\n/* Single-line rows: one full-width column, one plugin per line. */\n.sf657f5_cards {\n  display: grid;\n  grid-template-columns: 1fr;\n  max-width: 100%;\n  gap: 8px;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  animation: dshShopCardsIn 220ms ease;\n}\n\n@keyframes dshShopCardsIn {\n  from { opacity: 0; transform: translateY(3px); }\n  to { opacity: 1; transform: none; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sf657f5_cards { animation: none; }\n}\n\n.s65f383_card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  /* A grid item's min-width is auto by default: its content would widen the\n   * 1fr track past the panel and overflow horizontally. */\n  min-width: 0;\n  border: 1px solid var(--dsw-alias-border-l1);\n  border-radius: 10px;\n  background: var(--dsw-alias-bg-layer-1);\n  overflow: hidden;\n  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;\n  /* Off-screen cards skip layout and paint; the placeholder keeps scrollbar\n   * estimation sane before the browser has measured the real height. */\n  content-visibility: auto;\n  contain-intrinsic-size: auto 140px;\n}\n\n/* The sentinel that triggers the next shelf batch: zero visual footprint. */\n.sd7ee01_cardsSentry {\n  height: 1px;\n  margin: 0;\n  padding: 0;\n}\n\n.s705cc6_showingLine {\n  margin: 0;\n  font-size: 12px;\n  letter-spacing: 0.02em;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.s65f383_card:hover {\n  border-color: color-mix(in srgb, var(--dsw-alias-brand-primary) 45%, var(--dsw-alias-border-l1));\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--dsw-alias-brand-primary) 12%, transparent);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .s65f383_card { transition: none; }\n  .s65f383_card:hover { transform: none; }\n}\n\n/* The signature: a spine and cover in the category's own hue. The hues are\n * fixed mid-bright colors that read on both themes; `other` deliberately\n * stays a neutral gray so the fallback category does not compete. */\n.s4ce25d_cardSpine {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 3px;\n  background: var(--spine-hue, #8B8E96);\n}\n\n.s65f383_card[data-category='tool'] { --spine-hue: #4C8DFF; }\n.s65f383_card[data-category='provider'] { --spine-hue: #A78BFA; }\n.s65f383_card[data-category='ui'] { --spine-hue: #2DD4BF; }\n.s65f383_card[data-category='workflow'] { --spine-hue: #F59E0B; }\n.s65f383_card[data-category='integration'] { --spine-hue: #34D399; }\n.s65f383_card[data-category='theme'] { --spine-hue: #F472B6; }\n.s65f383_card[data-category='other'] { --spine-hue: #8B8E96; }\n\n/* The category sits in the badge row as a quiet chip in the category's own\n * hue — the border carries it where the light theme's white layers cannot\n * (the same lesson as the check button). */\n.s9c8eaa_categoryBadge {\n  padding: 1px 7px;\n  border: 1px solid color-mix(in srgb, var(--spine-hue, #8B8E96) 45%, transparent);\n  border-radius: 999px;\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--spine-hue, #8B8E96);\n  white-space: nowrap;\n}\n\n.sa97234_entryHeader {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n  padding: 8px 12px 2px;\n  border: none;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n}\n\n.sa97234_entryHeader:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary);\n  outline-offset: -2px;\n}\n\n/* The name fills the row and truncates rather than wraps; the badges stay\n * intact beside it. */\n.sc3f149_name {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 13px;\n  font-weight: 600;\n  flex: 1 1 auto;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--dsw-alias-label-primary);\n}\n\n.s513026_badges {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n/* The action line: buttons side by side; an active install/uninstall flow\n * (gate, log, notices) takes the full width below them. */\n.s9b5048_cardActions {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px 10px;\n}\n\n.s9b5048_cardActions > .sc4f2ac_gate,\n.s9b5048_cardActions > .s4d374c_installPanel,\n.s9b5048_cardActions > .sf53ca0_installedActions {\n  flex-basis: 100%;\n}\n\n/* The entry's version, always visible on the card (the expanded detail\n * repeats it in the version row) — the same quiet mono as the toolbar. */\n.sc6ec6e_cardVersion {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 12px;\n  letter-spacing: 0.02em;\n  color: var(--dsw-alias-label-secondary);\n}\n\n/* The octocat marking a github-sourced entry, beside its short commit. */\n.s71f10f_sourceBadge {\n  display: inline-flex;\n  align-items: center;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.s5e82cb_tierBadge {\n  padding: 1px 7px;\n  border-radius: 999px;\n  font-size: 11px;\n  line-height: 1.6;\n}\n\n.s5e82cb_tierBadge[data-tier='verified'] {\n  color: var(--dsw-alias-state-success-primary);\n  background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 14%, transparent);\n  border: 1px solid color-mix(in srgb, var(--dsw-alias-state-success-primary) 40%, transparent);\n}\n\n.s5e82cb_tierBadge[data-tier='verified-stale'] {\n  color: var(--dsw-alias-state-warn-primary);\n  background: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 14%, transparent);\n  border: 1px solid color-mix(in srgb, var(--dsw-alias-state-warn-primary) 40%, transparent);\n}\n\n.s5e82cb_tierBadge[data-tier='community'] {\n  color: var(--dsw-alias-label-secondary);\n  background: var(--dsw-alias-bg-layer-2);\n  border: 1px solid var(--dsw-alias-border-l2);\n}\n\n.s4bbe02_incompatibleBadge {\n  flex-shrink: 0;\n  padding: 3px 9px;\n  border-radius: 999px;\n  font-size: 12px;\n  white-space: nowrap;\n  color: var(--dsw-alias-state-error-primary);\n  background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 14%, transparent);\n  border: 1px solid color-mix(in srgb, var(--dsw-alias-state-error-primary) 40%, transparent);\n}\n\n.sff43b4_starsBadge {\n  font-size: 11px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.s73f7fb_chevron, .s61393c_chevronOpen {\n  color: var(--dsw-alias-label-secondary);\n  transition: transform 120ms ease;\n}\n\n.s61393c_chevronOpen { transform: rotate(180deg); }\n\n@media (prefers-reduced-motion: reduce) {\n  .s73f7fb_chevron, .s61393c_chevronOpen { transition: none; }\n}\n\n.s820ebf_body {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 0 12px;\n}\n\n.sb8fbc8_summary {\n  margin: 0;\n  font-size: 13px;\n  line-height: 1.5;\n  color: var(--dsw-alias-label-primary);\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.se507db_summaryZh {\n  margin: -4px 0 0;\n  font-size: 12px;\n  line-height: 1.5;\n  color: var(--dsw-alias-label-secondary);\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* Expanded cards show the full summary: the clamp is lifted, never raised —\n * a higher number would still truncate the author's text, just later. */\n.s10baf0_summaryExpanded {\n  -webkit-line-clamp: unset;\n  display: block;\n}\n\n.sb9dba9_summaryZhExpanded {\n  -webkit-line-clamp: unset;\n  display: block;\n}\n\n/* `white-space: pre-line` so the newline in the copy is the copy's own: the\n   dictionary decides where the line breaks, and a translator changes it\n   without touching the component. Collapses runs of spaces like `normal`, so\n   only the explicit \\n survives. */\n.s6eca19_incompatibleDetail {\n  margin: 0;\n  font-size: 12px;\n  line-height: 1.5;\n  white-space: pre-line;\n  color: var(--dsw-alias-state-error-primary);\n}\n\n.s9d2029_capabilitiesBlock {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.s3bdbd5_capabilitiesNote {\n  margin: 0;\n  font-size: 11px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.s441702_capabilities {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.s441702_capabilities li {\n  padding: 1px 6px;\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--dsw-alias-label-primary) 6%, transparent);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 11px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.sde3f0c_detail {\n  border-top: 1px solid var(--dsw-alias-border-l1);\n  padding-top: 8px;\n}\n\n.se98179_detailRows {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  margin: 0;\n}\n\n.sfb4d2f_detailRow {\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  font-size: 12px;\n}\n\n.sfb4d2f_detailRow dt {\n  color: var(--dsw-alias-label-secondary);\n}\n\n.sfb4d2f_detailRow dd {\n  margin: 0;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  overflow-wrap: anywhere;\n  text-align: right;\n  color: var(--dsw-alias-label-primary);\n}\n\n.sfb4d2f_detailRow a {\n  color: var(--dsw-alias-brand-primary);\n  text-decoration: none;\n}\n\n.sfb4d2f_detailRow a:hover {\n  text-decoration: underline;\n}\n\n.sfb4d2f_detailRow a:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary);\n  outline-offset: 1px;\n}\n\n/* The publishing account, beside the npm link. Secondary label colour and a\n * middot separator carry the distinction — never a background fill, which is\n * invisible in the light theme where every bg-layer token is the same white. */\n/* Who published the entry, at the right edge of the action row. `margin-left:\n * auto` is what pushes it there; the row is a wrapping flex, so an active\n * install flow (which claims the full width) drops this to the next line\n * rather than squeezing it. */\n.s1ff66f_author {\n  margin-left: auto;\n  color: var(--dsw-alias-label-secondary);\n  font-size: 12px;\n}\n\n.sd58c6d_reviewedLine {\n  margin: 8px 0 0;\n  padding: 6px 8px;\n  border-radius: 6px;\n  background: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 12%, transparent);\n  font-size: 12px;\n  color: var(--dsw-alias-state-warn-primary);\n}\n\n/* Install flow. */\n.s4d374c_installPanel {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-top: 2px;\n}\n\n.se7aaed_installButton, .sb43a49_confirmButton, .s6e45d1_cancelButton {\n  align-self: flex-start;\n  padding: 5px 14px;\n  border-radius: 6px;\n  font-size: 13px;\n  cursor: pointer;\n}\n\n.se7aaed_installButton {\n  border: 1px solid var(--dsw-alias-brand-primary);\n  background: var(--dsw-alias-brand-primary);\n  color: var(--dsw-alias-bg-base);\n}\n\n.se7aaed_installButton:hover {\n  background: color-mix(in srgb, var(--dsw-alias-brand-primary) 88%, var(--dsw-alias-label-primary));\n}\n\n.sb43a49_confirmButton {\n  border: 1px solid var(--dsw-alias-brand-primary);\n  background: var(--dsw-alias-brand-primary);\n  color: var(--dsw-alias-bg-base);\n}\n\n.sb43a49_confirmButton:hover {\n  background: color-mix(in srgb, var(--dsw-alias-brand-primary) 88%, var(--dsw-alias-label-primary));\n}\n\n.s6e45d1_cancelButton {\n  border: 1px solid var(--dsw-alias-border-l2);\n  background: var(--dsw-alias-bg-layer-2);\n  color: var(--dsw-alias-label-primary);\n}\n\n.s6e45d1_cancelButton:hover {\n  border-color: var(--dsw-alias-label-secondary);\n}\n\n.se7aaed_installButton:focus-visible, .sb43a49_confirmButton:focus-visible, .s6e45d1_cancelButton:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary);\n  outline-offset: 1px;\n}\n\n/* The shelf card of a plugin that is installed and current carries this\n * non-interactive label instead of an install button. Border + text do the\n * work in the light theme, where every bg-layer token resolves to white. */\n.sb6fc74_installedLabel {\n  align-self: flex-start;\n  margin: 0;\n  padding: 5px 14px;\n  border: 1px solid var(--dsw-alias-border-l2);\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--dsw-alias-label-secondary);\n  background: var(--dsw-alias-bg-layer-2);\n}\n\n/* An installed card's controls: the installed label or the update button,\n * plus the uninstall button. The install panel's running/failed states are\n * column layouts and sit as one item of this row. */\n.sf53ca0_installedActions {\n  display: flex;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n/* Uninstall revokes privilege; the quiet outline keeps it from competing\n * with the primary action, and the error tint says \"removes\". */\n.s96967f_uninstallButton {\n  align-self: flex-start;\n  padding: 5px 14px;\n  border: 1px solid color-mix(in srgb, var(--dsw-alias-state-error-primary) 55%, transparent);\n  border-radius: 6px;\n  background: transparent;\n  color: var(--dsw-alias-state-error-primary);\n  font-size: 13px;\n  cursor: pointer;\n}\n\n.s96967f_uninstallButton:hover {\n  background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent);\n}\n\n.s96967f_uninstallButton:focus-visible {\n  outline: 2px solid var(--dsw-alias-state-error-primary);\n  outline-offset: 1px;\n}\n\n/* The restart dsh button on a done install: quiet outline, same rank as\n * the other secondary actions. */\n.sb00c36_restartSelfButton {\n  /* The version row's third state. Geometry matches .s614a38_checkUpdateButton and\n   * .sa04455_updateSelfButton exactly — the row is one evolving control and a\n   * different pill would read as a different kind of thing. It takes the\n   * emphasised fill rather than the neutral one because at that moment the\n   * restart is the only thing left to do, the same reason Update has it. */\n  padding: 2px 10px;\n  border: 1px solid var(--dsw-alias-brand-primary);\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--dsw-alias-brand-primary) 12%, transparent);\n  color: var(--dsw-alias-brand-primary);\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.sb00c36_restartSelfButton:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary);\n  outline-offset: 1px;\n}\n\n.s6ac237_restartButton {\n  align-self: flex-start;\n  padding: 5px 14px;\n  border: 1px solid var(--dsw-alias-border-l2);\n  border-radius: 6px;\n  background: var(--dsw-alias-bg-layer-2);\n  color: var(--dsw-alias-label-primary);\n  font-size: 13px;\n  cursor: pointer;\n}\n\n.s6ac237_restartButton:hover {\n  border-color: var(--dsw-alias-label-secondary);\n}\n\n.s6ac237_restartButton:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary);\n  outline-offset: 1px;\n}\n\n.sc4f2ac_gate {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 10px;\n  border: 1px solid var(--dsw-alias-state-warn-primary);\n  border-radius: 8px;\n  background: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 8%, transparent);\n}\n\n.s559c38_gateTitle {\n  margin: 0;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--dsw-alias-state-warn-primary);\n}\n\n.s3c0ace_gateBody {\n  margin: 0;\n  font-size: 12px;\n  line-height: 1.6;\n  color: var(--dsw-alias-label-primary);\n}\n\n.sc323e5_gateWarning {\n  margin: 0;\n  font-size: 12px;\n  line-height: 1.6;\n  white-space: pre-line;\n  color: var(--dsw-alias-state-error-primary);\n}\n\n.s4b2373_gateActions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.s52b5a5_installing {\n  margin: 0;\n  font-size: 12px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.s64ab71_log {\n  max-height: 160px;\n  overflow: auto;\n  margin: 0;\n  padding: 8px;\n  border-radius: 6px;\n  background: var(--dsw-alias-bg-base);\n  border: 1px solid var(--dsw-alias-border-l1);\n  list-style: none;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 11px;\n  line-height: 1.5;\n}\n\n.s1531a8_logLine {\n  white-space: pre-wrap;\n  word-break: break-all;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.sf20dda_notice {\n  margin: 0;\n  font-size: 12px;\n  color: var(--dsw-alias-state-success-primary);\n}\n\n.seb9b08_failedHeading {\n  margin: 0;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--dsw-alias-state-error-primary);\n}\n\n.sfd3021_failedDetail {\n  margin: 0;\n  font-size: 12px;\n  line-height: 1.6;\n  color: var(--dsw-alias-label-primary);\n}\n\n.s50ba35_rejectedCode {\n  margin: 0;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--dsw-alias-state-error-primary);\n}\n\n.se75489_rejectedDetail {\n  margin: 0;\n  font-size: 12px;\n  line-height: 1.6;\n  color: var(--dsw-alias-label-primary);\n}\n\n/* Installed section. */\n.sa276cf_outdatedSection {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-top: 6px;\n}\n\n.sceae6e_outdatedList {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.s8d2072_outdatedRow {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  flex-wrap: wrap;\n  padding: 10px 12px;\n  border: 1px solid var(--dsw-alias-border-l1);\n  border-radius: 8px;\n  background: var(--dsw-alias-bg-layer-1);\n}\n\n.s5c2545_outdatedInfo {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.s5c2545_outdatedInfo strong {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 13px;\n  word-break: break-all;\n  color: var(--dsw-alias-label-primary);\n}\n\n.s877c68_outdatedVersions {\n  /* Two inline labels with nothing between them in the markup ran together as\n   * `installed v1.0.0latest v2.0.0`: JSX drops the whitespace-only line, and\n   * the per-label class the markup asked for was never defined (singular\n   * against this rule's plural). The container owns the gap, the same idiom\n   * as .s513026_badges — the labels need no class of their own. */\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.sa1f556_outdatedActions {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n/* The enable/disable switch. */\n.s11c019_switch {\n  position: relative;\n  width: 32px;\n  height: 18px;\n  border: 1px solid var(--dsw-alias-border-l2);\n  border-radius: 999px;\n  background: var(--dsw-alias-bg-layer-2);\n  cursor: pointer;\n  transition: background 120ms ease, border-color 120ms ease;\n}\n\n.s7580e8_switchOn {\n  border-color: var(--dsw-alias-state-success-primary);\n  background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 55%, transparent);\n}\n\n.saab2b3_switchKnob {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 12px;\n  height: 12px;\n  border-radius: 999px;\n  background: var(--dsw-alias-label-primary);\n  transition: transform 120ms ease, background 120ms ease;\n}\n\n.s7580e8_switchOn .saab2b3_switchKnob {\n  transform: translateX(14px);\n  background: var(--dsw-alias-bg-base);\n}\n\n.s11c019_switch:focus-visible {\n  outline: 2px solid var(--dsw-alias-brand-primary);\n  outline-offset: 1px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .s11c019_switch, .saab2b3_switchKnob { transition: none; }\n}\n\n/* The hot enable/disable switch on installed rows: the knob button plus the\n * §8 hot-apply / failure notices rendered beside it. */\n.sd9f9e4_switchWrap {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n";
 		if (typeof document !== "undefined" && !document.querySelector("style[data-plugin-css=\"e3675a89\"]")) {
 			const tag = document.createElement("style");
 			tag.dataset.pluginCss = "e3675a89";
@@ -5433,13 +5515,25 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 		* install controls. An installed plugin's card carries its installed row:
 		* current → the non-interactive installed label, behind → the update button;
 		* uninstalled → the install button. */
-		const EntryCard = (0, react.memo)(function EntryCard({ entry, stars, installed, missing, t, install, installStatus, uninstall, restart, restartSupported, setEnabled }) {
+		const EntryCard = (0, react.memo)(function EntryCard({ entry, stars, installed, missing, t, flowFor, installStatus, uninstall, restart, restartSupported, setEnabled, onSettled }) {
 			const [open, setOpen] = (0, react.useState)(false);
 			const detailId = (0, react.useId)();
 			const summary = entry.catalog?.summary;
 			const npmUrl = npmPageUrl(entry);
 			const author = authorOf(entry);
 			const category = entry.catalog?.category ?? "other";
+			const installTarget = {
+				name: entry.name,
+				version: entry.version,
+				source: entry.source,
+				repo: entry.repo,
+				subdir: entry.subdir
+			};
+			const flow = flowFor(entryKey(entry));
+			const uninstallSettled = (0, react.useCallback)(() => {
+				flow.reset();
+				onSettled();
+			}, [flow, onSettled]);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: _dsh_plugin_shop_css_e3675a89_default.card,
 				"data-shop-entry": entry.name,
@@ -5506,12 +5600,6 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 									"data-tier": entry.tier,
 									children: t(tierKey(entry.tier))
 								}),
-								missing.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: _dsh_plugin_shop_css_e3675a89_default.incompatibleBadge,
-									"data-shop-incompatible": true,
-									title: t("incompatibleDetail", { modules: missing.join(", ") }),
-									children: t("incompatibleBadge")
-								}),
 								stars !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 									className: _dsh_plugin_shop_css_e3675a89_default.starsBadge,
 									role: "img",
@@ -5595,34 +5683,33 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 						className: _dsh_plugin_shop_css_e3675a89_default.cardActions,
 						"data-shop-actions": true,
 						children: [installed === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InstallPanel, {
-							name: entry.name,
-							version: entry.version,
+							target: installTarget,
 							tier: entry.tier,
 							missing,
 							missingStated: true,
+							flow,
 							t,
-							install,
-							installStatus,
 							restart,
 							restartSupported
 						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-							installed.outdated ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InstallPanel, {
-								name: entry.name,
-								version: entry.version,
+							installed.outdated || flow.view.kind !== "idle" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InstallPanel, {
+								target: installTarget,
 								tier: entry.tier,
-								variant: "update",
+								variant: installed.outdated ? "update" : "install",
 								missing,
 								missingStated: true,
+								flow,
 								t,
-								install,
-								installStatus,
 								restart,
 								restartSupported
-							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 								className: _dsh_plugin_shop_css_e3675a89_default.installedLabel,
 								"data-shop-installed": true,
 								children: t("installed")
-							}),
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IncompatibleBadge, {
+								missing,
+								t
+							})] }),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EnabledSwitch, {
 								row: installed,
 								t,
@@ -5634,7 +5721,8 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 								uninstall,
 								installStatus,
 								restart,
-								restartSupported
+								restartSupported,
+								onSettled: uninstallSettled
 							})
 						] }), author !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: _dsh_plugin_shop_css_e3675a89_default.author,
@@ -5645,14 +5733,32 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				]
 			});
 		});
+		/** The harness-compatibility verdict, rendered beside the control it
+		* qualifies. It answers "what happens if I press this", not "what is this",
+		* so it belongs to the action row and not among the identity badges in the
+		* header — where it also sat inside a <button>, competing with that button's
+		* own hit area for the tooltip. Renders nothing when the harness provides
+		* everything. */
+		function IncompatibleBadge({ missing, t }) {
+			if (missing.length === 0) return null;
+			const detail = t("incompatibleDetail", { modules: missing.join(", ") });
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: _dsh_plugin_shop_css_e3675a89_default.incompatibleBadge,
+				"data-shop-incompatible": true,
+				role: "img",
+				"aria-label": detail,
+				title: detail,
+				children: t("incompatibleBadge")
+			});
+		}
 		/** One entry's install flow: the button, the §9.3 acknowledgement gate for
 		* community-tier entries, and the live view — running log, restart notice,
 		* failure detail, rejection detail — driven by `useInstall`. Shared by the
 		* catalog cards (`variant: 'install'`) and the outdated rows' update button
 		* (`variant: 'update'`, which drives the same install flow for `name@latest`). */
-		function InstallPanel({ name, version, tier, missing, missingStated = false, variant = "install", t, install, installStatus, restart, restartSupported }) {
+		function InstallPanel({ target, tier, missing, missingStated = false, variant = "install", flow, t, restart, restartSupported }) {
 			const [gateOpen, setGateOpen] = (0, react.useState)(false);
-			const { view, start } = useInstall(install, installStatus);
+			const { view, start } = flow;
 			if (view.kind === "running") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: _dsh_plugin_shop_css_e3675a89_default.installPanel,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
@@ -5740,8 +5846,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 							onClick: () => {
 								setGateOpen(false);
 								start({
-									name,
-									version,
+									...target,
 									acknowledged: true
 								});
 							},
@@ -5756,20 +5861,22 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				]
 			});
 			const update = variant === "update";
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				className: _dsh_plugin_shop_css_e3675a89_default.installButton,
 				...update ? { "data-shop-update": true } : { "data-shop-install": true },
 				onClick: () => {
 					if (tier === "verified") start({
-						name,
-						version,
+						...target,
 						acknowledged: void 0
 					});
 					else setGateOpen(true);
 				},
 				children: t(update ? "update" : "install")
-			});
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IncompatibleBadge, {
+				missing,
+				t
+			})] });
 		}
 		/** One installed entry's uninstall flow: remove from the profile through the
 		* same executor records and poll loop as installs. Uninstalling revokes
@@ -5777,8 +5884,13 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 		* §9.3 is about granting. A business failure (not in the catalog / not
 		* installed) lands in the failed view with the host's published detail; a
 		* transport failure carries the empty detail and the localized fallback. */
-		function UninstallPanel({ name, t, uninstall, installStatus, restart, restartSupported }) {
+		function UninstallPanel({ name, t, uninstall, installStatus, restart, restartSupported, onSettled }) {
 			const { view, start } = useUninstall(uninstall, installStatus);
+			const settled = (0, react.useRef)(onSettled);
+			settled.current = onSettled;
+			(0, react.useEffect)(() => {
+				if (view.kind === "done") settled.current();
+			}, [view.kind]);
 			if (view.kind === "running") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: _dsh_plugin_shop_css_e3675a89_default.installPanel,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
@@ -6006,26 +6118,18 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 		/** One outdated install row (§7.3): the name, the installed and latest
 		* versions, the hot enable/disable switch, and the update button (the
 		* install flow for `name@latest`, reusing `InstallPanel`). */
-		function OutdatedRow({ row, tier, source, missing, t, setEnabled, install, installStatus, restart, restartSupported }) {
+		function OutdatedRow({ row, tier, missing, t, setEnabled, flowFor, restart, restartSupported }) {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: _dsh_plugin_shop_css_e3675a89_default.outdatedRow,
 				"data-shop-outdated-entry": row.name,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: _dsh_plugin_shop_css_e3675a89_default.outdatedInfo,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: _dsh_plugin_shop_css_e3675a89_default.badges,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: _dsh_plugin_shop_css_e3675a89_default.name,
-							children: row.name
-						}), missing.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: _dsh_plugin_shop_css_e3675a89_default.incompatibleBadge,
-							"data-shop-incompatible": true,
-							title: t("incompatibleDetail", { modules: missing.join(", ") }),
-							children: t("incompatibleBadge")
-						})]
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: _dsh_plugin_shop_css_e3675a89_default.name,
+						children: row.name
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 						className: _dsh_plugin_shop_css_e3675a89_default.outdatedVersions,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("installedVersion", { version: source === "github" ? row.installed.slice(0, 7) : row.installed }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("latestVersion", { version: row.latest }) })]
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("installedVersion", { version: row.source === "github" ? row.installed.slice(0, 7) : row.installed }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("latestVersion", { version: row.latest }) })]
 					})]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: _dsh_plugin_shop_css_e3675a89_default.outdatedActions,
@@ -6034,14 +6138,18 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 						t,
 						setEnabled
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InstallPanel, {
-						name: row.name,
-						version: row.latest,
+						target: {
+							name: row.name,
+							version: row.latest,
+							source: row.source,
+							repo: row.repo,
+							subdir: row.subdir
+						},
 						tier,
 						variant: "update",
 						missing,
+						flow: flowFor(identityKey(row)),
 						t,
-						install,
-						installStatus,
 						restart,
 						restartSupported
 					})]
@@ -6055,7 +6163,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 		* tier for the update gate is looked up from the catalog by name (community →
 		* acknowledgement); an entry absent from the catalog defaults to the
 		* community gate (the safer read). */
-		function OutdatedSection({ state, tiers, sources, missingByName, t, setEnabled, install, installStatus, restart, restartSupported }) {
+		function OutdatedSection({ state, entriesByKey, missingByKey, t, setEnabled, flowFor, restart, restartSupported }) {
 			if (state.kind === "loading") return null;
 			if (state.kind === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: _dsh_plugin_shop_css_e3675a89_default.stateLine,
@@ -6074,16 +6182,14 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					className: _dsh_plugin_shop_css_e3675a89_default.outdatedList,
 					children: outdated.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OutdatedRow, {
 						row,
-						tier: tiers.get(row.name) ?? "community",
-						source: sources.get(row.name) ?? "npm",
-						missing: missingByName.get(row.name) ?? [],
+						tier: entriesByKey.get(identityKey(row))?.tier ?? "community",
+						missing: missingByKey.get(identityKey(row)) ?? [],
 						t,
 						setEnabled,
-						install,
-						installStatus,
+						flowFor,
 						restart,
 						restartSupported
-					}) }, row.name))
+					}) }, identityKey(row)))
 				})]
 			});
 		}
@@ -6098,6 +6204,11 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 			const [selfRestartGate, setSelfRestartGate] = (0, react.useState)(false);
 			const selfUpdate = useUpdateSelf(updateStart, installStatus);
 			const [request, setRequest] = (0, react.useState)({ kind: "initial" });
+			const [mutations, setMutations] = (0, react.useState)(0);
+			const noteMutation = (0, react.useCallback)(() => {
+				setMutations((current) => current + 1);
+			}, []);
+			const flows = useInstallFlows(install, installStatus, noteMutation);
 			const [reloading, setReloading] = (0, react.useState)(false);
 			const [reloadFailed, setReloadFailed] = (0, react.useState)(false);
 			const [query, setQuery] = (0, react.useState)("");
@@ -6178,10 +6289,14 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				return () => {
 					cancelled = true;
 				};
-			}, [installed, request]);
-			const installedByName = (0, react.useMemo)(() => {
+			}, [
+				installed,
+				request,
+				mutations
+			]);
+			const installedByKey = (0, react.useMemo)(() => {
 				const map = /* @__PURE__ */ new Map();
-				if (installedState.kind === "ready") for (const entry of installedState.entries) map.set(entry.name, entry);
+				if (installedState.kind === "ready") for (const entry of installedState.entries) map.set(identityKey(entry), entry);
 				return map;
 			}, [installedState]);
 			const browsable = (0, react.useMemo)(() => {
@@ -6189,11 +6304,13 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				const cleared = new Set(catalogState.result.notAShop ?? []);
 				return catalogState.result.plugins.filter((entry) => cleared.has(entry.name) || !isShopLike(entry.name) && (entry.repo === void 0 || !isShopLike(entry.repo)));
 			}, [catalogState]);
+			const stars = (0, react.useMemo)(() => catalogState.kind === "ready" ? catalogState.result.stars : {}, [catalogState]);
+			const sortedBrowsable = (0, react.useMemo)(() => sortByStars(browsable, stars), [browsable, stars]);
 			const filtered = (0, react.useMemo)(() => {
 				const q = query.trim().toLowerCase();
-				return browsable.filter((entry) => {
+				return sortedBrowsable.filter((entry) => {
 					if (category === "installed") {
-						if (!installedByName.has(entry.name)) return false;
+						if (!installedByKey.has(entryKey(entry))) return false;
 					} else if (category !== null && categoryKey(entry) !== categoryLocaleKey(category)) return false;
 					if (q === "") return true;
 					const summaryEn = entry.catalog?.summary.en ?? "";
@@ -6201,14 +6318,12 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					return entry.name.toLowerCase().includes(q) || summaryEn.toLowerCase().includes(q) || summaryZh.toLowerCase().includes(q);
 				});
 			}, [
-				browsable,
+				sortedBrowsable,
 				query,
 				category,
-				installedByName
+				installedByKey
 			]);
 			filteredLenRef.current = filtered.length;
-			const stars = catalogState.kind === "ready" ? catalogState.result.stars : {};
-			const sorted = (0, react.useMemo)(() => sortByStars(filtered, stars), [filtered, stars]);
 			(0, react.useEffect)(() => {
 				if (!incremental) return;
 				const node = sentinelRef.current;
@@ -6223,7 +6338,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				visibleCount,
 				filtered.length
 			]);
-			const visible = incremental ? sorted.slice(0, visibleCount) : sorted;
+			const visible = incremental ? filtered.slice(0, visibleCount) : filtered;
 			const categoryCounts = (0, react.useMemo)(() => {
 				const counts = /* @__PURE__ */ new Map();
 				for (const entry of browsable) {
@@ -6237,19 +6352,14 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				if (installedState.kind !== "ready") return 0;
 				return installedState.entries.filter((entry) => !isShopLike(entry.name)).length;
 			}, [installedState]);
-			const tiers = (0, react.useMemo)(() => {
-				const map = /* @__PURE__ */ new Map();
-				if (catalogState.kind === "ready") for (const entry of catalogState.result.plugins) map.set(entry.name, entry.tier);
-				return map;
-			}, [catalogState]);
-			const sources = (0, react.useMemo)(() => {
+			const entriesByKey = (0, react.useMemo)(() => {
 				const map = /* @__PURE__ */ new Map();
-				if (catalogState.kind === "ready") for (const entry of catalogState.result.plugins) map.set(entry.name, entry.source);
+				if (catalogState.kind === "ready") for (const entry of catalogState.result.plugins) map.set(entryKey(entry), entry);
 				return map;
 			}, [catalogState]);
-			const missingByName = (0, react.useMemo)(() => {
+			const missingByKey = (0, react.useMemo)(() => {
 				const map = /* @__PURE__ */ new Map();
-				if (catalogState.kind === "ready") for (const entry of catalogState.result.plugins) map.set(entry.name, missingPeersOf(catalogState.result.incompatible, entry.name));
+				if (catalogState.kind === "ready") for (const entry of catalogState.result.plugins) map.set(entryKey(entry), missingPeersOf(catalogState.result.incompatible, entryKey(entry)));
 				return map;
 			}, [catalogState]);
 			if (catalogState.kind === "loading") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -6512,15 +6622,16 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 						children: [visible.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EntryCard, {
 							entry,
 							stars: starsOf(entry, stars),
-							installed: installedByName.get(entry.name),
-							missing: missingByName.get(entry.name) ?? [],
+							installed: installedByKey.get(entryKey(entry)),
+							missing: missingByKey.get(entryKey(entry)) ?? [],
 							t,
-							install,
+							flowFor: flows.flowFor,
 							installStatus,
 							uninstall,
 							restart,
 							restartSupported,
-							setEnabled
+							setEnabled,
+							onSettled: noteMutation
 						}) }, entryKey(entry))), incremental && visibleCount < filtered.length && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
 							ref: sentinelRef,
 							className: _dsh_plugin_shop_css_e3675a89_default.cardsSentry,
@@ -6537,13 +6648,11 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					})] }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OutdatedSection, {
 						state: installedState,
-						tiers,
-						sources,
-						missingByName,
+						entriesByKey,
+						missingByKey,
 						t,
 						setEnabled,
-						install,
-						installStatus,
+						flowFor: flows.flowFor,
 						restart,
 						restartSupported
 					})
@@ -6554,13 +6663,17 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 		//#region src/client/index.ts
 		/** Dictionary namespace owned by this plugin. */
 		const NS = "settings.shop";
+		/** How long a stashed catalog may satisfy a plain open. The host applies the
+		* same five-minute freshness window, so the client stash must not outlive it. */
+		const WARM_TTL_MS = 3e5;
 		/** The boot-time warm fetch: the catalog the tab wants on its first open.
 		* Started in apply — the client bundle boots with the web app, long before
 		* the user reaches Settings — so the host's slow network fetch runs while
 		* nobody is looking at the shop, and the tab's mount consumes this promise
 		* instead of starting its own fetch. A rejection stays stored (the injected
 		* catalog falls back to a fresh call); the extra catch keeps the
-		* fire-and-forget from surfacing as an unhandled rejection. */
+		* fire-and-forget from surfacing as an unhandled rejection. Every later
+		* result, including an explicit refresh, replaces this timestamped stash. */
 		let warmCatalog = null;
 		/** Services required by the tab registration and the Remote mount.
 		*
@@ -6592,19 +6705,33 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				return result.value;
 			};
 			warmCatalog = null;
-			warmCatalog = Promise.resolve(ns.catalog(void 0)).then((result) => unwrap(result));
-			warmCatalog.catch(() => {});
+			const warmed = Promise.resolve(ns.catalog(void 0)).then((result) => unwrap(result));
+			warmCatalog = {
+				at: Date.now(),
+				result: warmed
+			};
+			warmed.catch(() => {});
 			Promise.resolve(ns.installed()).then((result) => unwrap(result)).catch(() => {});
 			Promise.resolve(ns.version()).then((result) => unwrap(result)).catch(() => {});
 			const injected = () => ({
 				catalog: async (args) => {
-					if (args?.refresh === true) return unwrap(await ns.catalog(args));
+					if (args?.refresh === true) {
+						const refreshed = unwrap(await ns.catalog(args));
+						warmCatalog = {
+							at: Date.now(),
+							result: Promise.resolve(refreshed)
+						};
+						return refreshed;
+					}
 					const warm = warmCatalog;
-					if (warm !== null) try {
-						return await warm;
+					if (warm !== null && Date.now() - warm.at < 3e5) try {
+						return await warm.result;
 					} catch {}
 					const fresh = unwrap(await ns.catalog(args));
-					warmCatalog = Promise.resolve(fresh);
+					warmCatalog = {
+						at: Date.now(),
+						result: Promise.resolve(fresh)
+					};
 					return fresh;
 				},
 				install: async (args) => unwrap(await ns.installStart(args)),
@@ -6627,6 +6754,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 		}
 		//#endregion
 		exports.NS = NS;
+		exports.WARM_TTL_MS = WARM_TTL_MS;
 		exports.apply = apply;
 		exports.inject = inject;
 		return module.exports;