@linxin666/dsh-remote-web-ui 0.3.23 → 0.3.24

package/lib/client.js

@@ -4496,7 +4496,7 @@ window.__ModuleLoader__.load({
 		/** The building package's version, when the bundle carries it. */
 		function bakedVersion() {
 			try {
-				return "0.3.23";
+				return "0.3.24";
 			} catch {
 				return;
 			}
@@ -4580,6 +4580,12 @@ window.__ModuleLoader__.load({
 		const COMPACT_CLASS = "dsh-remote-compact-picker";
 		/** Body class while the header actions are seated in the tabs row. */
 		const HEADER_SEATED_CLASS = "dsh-remote-header-seated";
+		/**
+		* Width the seated header actions paint over the tabs row, as a CSS variable
+		* on <html>. The row caps its own width with it (see the v80 rules) instead of
+		* reserving the space with padding.
+		*/
+		const HEADER_RESERVE_VAR = "--dsh-remote-header-actions-reserve";
 		/** Locale-dependent fast path for the official picker cells (zh/en). */
 		const PICKER_CELL_PATTERN = {
 			model: /模型|Model/,
@@ -4678,6 +4684,9 @@ window.__ModuleLoader__.load({
 			"[class$=\"_composerSeat\"] [class$=\"_frame\"] [class$=\"_card\"]{max-width:none;width:100%}",
 			`body.${HEADER_SEATED_CLASS} [class$="_header"] [class$="_titleCluster"] [class$="_headerActions"]{position:absolute;left:0;top:0;margin:0;display:flex;align-items:center;gap:6px;flex:none;z-index:2}`,
 			"[class$=\"_header\"] [class$=\"_tabs\"] [class*=\"_tab\"]{font-size:12px;white-space:nowrap}",
+			`body.${HEADER_SEATED_CLASS} [class$="_header"] [class$="_tabs"]{max-width:max(0px,calc(100% - var(${HEADER_RESERVE_VAR},0px)));overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;margin-bottom:-2px}`,
+			`body.${HEADER_SEATED_CLASS} [class$="_header"] [class$="_tabs"]::-webkit-scrollbar{display:none}`,
+			`body.${HEADER_SEATED_CLASS} [class$="_header"] [class$="_tabs"] > [class*="_tab"]{flex:0 0 auto}`,
 			`body.${ACTIVE_CLASS} [class$=\"_detailsCol\"]{display:none !important}`,
 			`body.${ACTIVE_CLASS} [data-dsh-plugin=\"ssh\"],`,
 			`body.${ACTIVE_CLASS} [data-dsh-plugin=\"skill-explorer\"],`,
@@ -5096,7 +5105,9 @@ window.__ModuleLoader__.load({
 				let dx = translate !== null ? parseFloat(translate[1] ?? "0") : 0;
 				let dy = translate !== null ? parseFloat(translate[2] ?? "0") : 0;
 				const actionsRect = actions.getBoundingClientRect();
-				const rightDiff = tabs.getBoundingClientRect().right - actionsRect.right;
+				const headerRect = header.getBoundingClientRect();
+				const headerStyle = getComputedStyle(header);
+				const rightDiff = headerRect.right - (parseFloat(headerStyle.paddingRight) || 0) - (parseFloat(headerStyle.borderRightWidth) || 0) - actionsRect.right;
 				if (Math.abs(rightDiff) >= .5) dx = Math.round((dx + rightDiff) * 10) / 10;
 				const tabBottom = textBottom(tabBtn);
 				if (tabBottom !== null) {
@@ -5113,10 +5124,12 @@ window.__ModuleLoader__.load({
 				const next = `translate(${dx}px, ${dy}px)`;
 				if (actions.style.transform !== next) actions.style.transform = next;
 				const reserve = `${Math.ceil(actionsRect.width) + 8}px`;
-				if (tabs.style.paddingRight !== reserve) tabs.style.paddingRight = reserve;
+				const rootStyle = document.documentElement.style;
+				if (rootStyle.getPropertyValue(HEADER_RESERVE_VAR) !== reserve) rootStyle.setProperty(HEADER_RESERVE_VAR, reserve);
 			}
 			function unseatHeaderActions() {
 				document.body.classList.remove(HEADER_SEATED_CLASS);
+				document.documentElement.style.removeProperty(HEADER_RESERVE_VAR);
 				const header = document.querySelector("[class$=\"_header\"]");
 				const tabs = header !== null ? header.querySelector("[class$=\"_tabs\"]") : null;
 				const actions = header !== null ? header.querySelector("[class$=\"_titleCluster\"] [class$=\"_headerActions\"]") : null;
@@ -5425,6 +5438,129 @@ window.__ModuleLoader__.load({
 			};
 		}
 		//#endregion
+		//#region src/client/plugin-card-seat.ts
+		/**
+		* Family plugin-card seat.
+		*
+		* A family plugin contributes its settings card to whichever plugin-card seat
+		* the running host actually renders:
+		*
+		* - `web-ui.plugin.item` — the list seat declared by the dsh-web-settings
+		*   group section (this family's own first-level "Web UI plugins" section);
+		* - `settings.plugin.item` — the official keyed seat of the harness's
+		*   `ui-settings-plugins` tab, keyed by the settings namespace the card edits.
+		*
+		* SEAT SELECTION IS NOT A DECLARATION PROBE. The official `ui-settings-plugins`
+		* row belongs to the harness bundle and its `configurable` tab always declares
+		* `settings.plugin.item` before any external plugin's `apply()` runs, so
+		* "is the official seat declared?" answers yes even in the deployment whose
+		* whole point is the family group. Choosing on that probe sends every family
+		* card to the official Plugins tab and leaves the group's own section
+		* permanently empty — the family of reports where the section renders its
+		* heading and zero cards.
+		*
+		* The signal that actually distinguishes the two deployments is whether
+		* dsh-web-settings is loaded: it is the package that owns the group section and
+		* it publishes the `webUiSettings` service during `apply()`, which every
+		* family plugin already reads for its settings scope. Group loaded -> the family
+		* seat; group absent -> the official seat.
+		*
+		* The decision is re-evaluated on every `slots/changed` because the group may
+		* apply after this plugin (the family aggregate orders it first, a profile that
+		* installs the group separately need not): the initial contribution goes to the
+		* official seat, then moves to the family seat the moment the group's section
+		* registers. The entry is disposed before the replacement is registered, so a
+		* card is never in two seats at once.
+		*
+		* The shared tree has no client-SDK dependency, so this module reads its
+		* context through the structural shape below; callers pass the plugin's own
+		* `ctx`.
+		*/
+		/** The family list seat key. */
+		const FAMILY_PLUGIN_CARD_SEAT = "web-ui.plugin.item";
+		/** The official keyed plugin-card seat key. */
+		const OFFICIAL_PLUGIN_CARD_SEAT = "settings.plugin.item";
+		/** The service dsh-web-settings publishes while it is loaded. */
+		const FAMILY_GROUP_SERVICE = "webUiSettings";
+		/**
+		* Whether the family group (dsh-web-settings) is loaded in this page. The
+		* service is the group package's own contract, so the probe cannot be fooled
+		* by a harness release that starts declaring the official seat differently.
+		*/
+		function familyGroupLoaded(ctx) {
+			const get = ctx.get;
+			if (typeof get !== "function") return false;
+			try {
+				return get.call(ctx, FAMILY_GROUP_SERVICE) !== void 0;
+			} catch {
+				return false;
+			}
+		}
+		/** Report a refused registration instead of leaving the user with no card. */
+		function warnRefusedSeat(seat, error) {
+			try {
+				console.warn(`[dsh-web] plugin card registration into "${seat}" was refused; the card will not render`, error);
+			} catch {}
+		}
+		/**
+		* Contribute one family plugin card to the seat this host renders, following
+		* the group if it loads later. The entry is disposed and re-registered on a
+		* seat change, never duplicated.
+		* @param ctx - client context (its slot registry decides the seat).
+		* @param seat - the card contribution.
+		*/
+		function installPluginCard(ctx, seat) {
+			const slots = ctx.slots;
+			const component = seat.component;
+			const inject = seat.inject;
+			let dispose;
+			let current;
+			/**
+			* Re-entrancy latch. The registry emits a change event synchronously from
+			* inside both `register` and the previous entry's disposer, so an unguarded
+			* reconcile would re-enter itself mid-move and register the card twice into
+			* the seat it is leaving ("already has an entry for key ...").
+			*/
+			let reconciling = false;
+			/** Reconcile the contribution with the currently live seat (no-op when unchanged). */
+			const reconcile = () => {
+				if (reconciling) return;
+				const target = familyGroupLoaded(ctx) ? FAMILY_PLUGIN_CARD_SEAT : OFFICIAL_PLUGIN_CARD_SEAT;
+				if (current === target) return;
+				reconciling = true;
+				const previous = dispose;
+				dispose = void 0;
+				current = void 0;
+				previous?.();
+				try {
+					dispose = slots.register(target === "web-ui.plugin.item" ? {
+						name: FAMILY_PLUGIN_CARD_SEAT,
+						id: seat.id,
+						...seat.order === void 0 ? {} : { order: seat.order },
+						...seat.label === void 0 ? {} : { label: seat.label },
+						locale: seat.locale,
+						...seat.inject === void 0 ? {} : { inject }
+					} : {
+						name: OFFICIAL_PLUGIN_CARD_SEAT,
+						key: seat.namespace,
+						locale: seat.locale,
+						...seat.inject === void 0 ? {} : { inject }
+					}, component);
+					current = target;
+				} catch (error) {
+					warnRefusedSeat(target, error);
+				} finally {
+					reconciling = false;
+				}
+			};
+			if (typeof ctx.on === "function") try {
+				ctx.on("slots/changed", () => {
+					reconcile();
+				});
+			} catch {}
+			reconcile();
+		}
+		//#endregion
 		//#region src/client/index.ts
 		/**
 		* Remote control — browser half. Registers the `remote` dictionaries, the
@@ -5525,23 +5661,17 @@ window.__ModuleLoader__.load({
 				};
 			});
 			const remoteSettings = new RemoteSettingsCardController(settingsScope);
-			ctx.slots.inject("web-ui.plugin.item", () => {
-				try {
-					const unregister = ctx.slots.register({
-						name: "web-ui.plugin.item",
-						id: "remote-web-ui",
-						order: 90,
-						locale: NS,
-						inject: () => remoteSettings.inject()
-					}, RemoteSettingsCard);
-					return () => {
-						remoteSettings.dispose();
-						unregister();
-					};
-				} catch {
-					return () => {};
-				}
+			installPluginCard(ctx, {
+				namespace: REMOTE_WEB_UI_NS,
+				id: "remote-web-ui",
+				order: 90,
+				locale: NS,
+				inject: () => remoteSettings.inject(),
+				component: RemoteSettingsCard
 			});
+			ctx.effect(() => () => {
+				remoteSettings.dispose();
+			}, "remote-web-ui: settings card");
 			let disposeRuntime;
 			const syncRuntime = () => {
 				if (enabled() && disposeRuntime === void 0) disposeRuntime = ctx.effect(() => {