@klarkxy/dsh-web-search-manager 0.3.0 → 0.3.1

package/lib/client.js

@@ -225,6 +225,17 @@ ${scope} {
 /* --- Layout scaffolding. --- */
 & .dsh-ui-stack { display: flex; flex-direction: column; gap: 12px; }
 & .dsh-ui-stack-lg { display: flex; flex-direction: column; gap: 20px; }
+/* Plugin detail pages share one reading column. These are layout recipes;
+ * controls keep their own primitive styles. Form spacing follows the host's
+ * settings-form/fields.module.css and SettingsForm.module.css. */
+& .dsh-ui-page { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 760px; min-width: 0; }
+& .dsh-ui-form { display: flex; flex-direction: column; gap: 0; min-width: 0; }
+&.dsh-ui-form > .dsh-ui-field, & .dsh-ui-form > .dsh-ui-field { padding: 12px 0; }
+& .dsh-ui-form-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 16px; min-width: 0; }
+& .dsh-ui-fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; min-width: 0; margin: 0; padding: 0; border: 0; }
+@media (max-width: 560px) {
+  & .dsh-ui-fields-grid { grid-template-columns: minmax(0, 1fr); }
+}
 & .dsh-ui-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
 & .dsh-ui-row-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
 & .dsh-ui-spacer { flex: 1; min-width: 0; }
@@ -252,6 +263,9 @@ ${scope} {
  * official primitive, so this only owns the vertical rhythm. --- */
 & .dsh-ui-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
 & .dsh-ui-field + .dsh-ui-field { border-top: 0.5px solid var(--dsw-alias-border-l2); padding-top: 12px; }
+/* Grid fields share a row, so the stacked-field divider must not win later in
+ * the cascade. Reset it here, after the field recipe. */
+& .dsh-ui-fields-grid > .dsh-ui-field { padding: 0; border: 0; }
 & .dsh-ui-label { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--dsw-alias-label-primary); }
 & .dsh-ui-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
 & .dsh-ui-help { font-size: 12px; line-height: 1.6; color: var(--dsw-alias-label-secondary); }
@@ -442,9 +456,87 @@ ${scope} {
   & *, & *::before, & *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
 }
 }
-`.replace(/^& (\.dsh-ui-[a-z0-9-]+)(?![+>~])/gm, (_match, className) => `&${className}, & ${className}`);
+`.replace(/^& (\.dsh-ui-[a-z0-9-]+)(?=\s*\{)/gm, (_match, className) => `&${className}, & ${className}`);
 }
 //#endregion
+//#region src/client-styles.ts
+/**
+* The shared contract paints this page: the type tiers, the card, the field,
+* the button row, the notice, the focus ring and the state colours. What is
+* left here is only the geometry the contract does not cover — the reading
+* width of the panel, the ranked three-column row, the drag affordance, the
+* drop indicator, the screen-reader-only announcer and the limits grid.
+*
+* Nothing below declares a colour of its own beyond naming a host token, and
+* nothing carries a literal fallback: the host publishes both themes and a
+* literal would pin one of them.
+*
+* Every plugin rule nests under the plugin root, as the contract does, so a
+* .ws-* or .web-search-* class never paints a neighbouring plugin. Selectors
+* that start with an element name keep an explicit `&`, the form every
+* nesting implementation accepts.
+*/
+const webSearchClientStyles = `${officialUiCss("ws-root")}
+.ws-root {
+
+.ws-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 8px; }
+.ws-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+.ws-provider-note { display: flex; align-items: center; gap: 6px; }
+.web-search-provider { display: grid; gap: 8px; min-width: 0; }
+.web-search-provider-info { display: grid; gap: 3px; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-secondary); overflow-wrap: anywhere; }
+.web-search-provider-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 24px; }
+& a { color: var(--dsw-alias-state-business-primary); font-size: 12px; line-height: 18px; text-underline-offset: 3px; }
+/* The primitive renders a 32px control in an inline-flex wrapper; a settings
+ * field needs it to fill the column it sits in. */
+.ws-input { width: 100%; }
+.web-search-rank { margin: 0; padding: 0; list-style: none; }
+.web-search-rank li {
+  position: relative;
+  display: grid;
+  grid-template-columns: 24px minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: start;
+  padding: 14px 0;
+  border-top: 0.5px solid var(--dsw-alias-border-l2);
+}
+& button.web-search-drag-handle {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  min-height: 24px;
+  padding: 0;
+  cursor: grab;
+  opacity: 0.65;
+}
+& button.web-search-drag-handle:hover { opacity: 1; }
+& button.web-search-drag-handle:active { cursor: grabbing; }
+& button.web-search-drag-handle[aria-disabled='true'] { cursor: wait; opacity: 0.4; }
+.web-search-rank li[data-dragging] { opacity: 0.45; }
+.web-search-rank li[data-drop]::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: var(--dsw-alias-state-business-primary); pointer-events: none; }
+.web-search-rank li[data-drop='before']::after { top: -1px; }
+.web-search-rank li[data-drop='after']::after { bottom: -1px; }
+.web-search-rank-index { color: var(--dsw-alias-label-tertiary); font-variant-numeric: tabular-nums; line-height: 24px; }
+.web-search-rank-move { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; padding-top: 2px; }
+.ws-danger:hover:not(:disabled),
+.ws-danger[data-armed] { color: var(--dsw-alias-state-error-primary); border-color: var(--dsw-alias-state-error-primary); }
+.ws-danger:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover-danger); }
+@media (max-width: 560px) {
+  .web-search-rank-move { flex-direction: column; align-items: flex-end; }
+}
+}
+`;
+//#endregion
 //#region ../dsh-plugin-kit/src/client-utils.ts
 /** Fixed pause for failing background reads; manual work is never replayed. */
 function createPluginReadGate(now = Date.now) {
@@ -1292,7 +1384,7 @@ function NetworkSearchSettings({ client, hidden }) {
 		setNote({ key: "keyDeleted" });
 	}
 	if (!status || !limitDraft) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-		className: "web-search-settings ws-root dsh-ui-panel",
+		className: "web-search-settings ws-root dsh-ui-page",
 		children: [loadError ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
 			role: "alert",
 			className: "dsh-ui-error",
@@ -1386,7 +1478,7 @@ function NetworkSearchSettings({ client, hidden }) {
 		});
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-		className: "web-search-settings ws-root dsh-ui-panel",
+		className: "web-search-settings ws-root dsh-ui-page",
 		"data-testid": "web-search-settings",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.SegmentedTabs, {
@@ -1747,11 +1839,11 @@ function NetworkSearchSettings({ client, hidden }) {
 				hidden: tab !== "limits",
 				tabIndex: 0,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("fieldset", {
-					className: "web-search-limits",
+					className: "dsh-ui-fields-grid",
 					disabled: busy || reordering,
 					"aria-label": text.tabLimits,
 					children: LIMITS.map(([key, min, max]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-						className: "ws-limit",
+						className: "dsh-ui-field",
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: "dsh-ui-label",
@@ -1790,7 +1882,7 @@ function NetworkSearchSettings({ client, hidden }) {
 				})
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "dsh-ui-actions dsh-ui-actions-end",
+				className: "dsh-ui-form-footer dsh-ui-actions-end",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: "dsh-ui-meta",
 					children: limitsDirty || keysDirty ? text.unsaved : text.saveHint
@@ -1805,74 +1897,13 @@ function NetworkSearchSettings({ client, hidden }) {
 		]
 	});
 }
-const styles = `${officialUiCss("ws-root")}
-.ws-root { max-width: 760px; }
-.ws-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 8px; }
-.ws-sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
-}
-.ws-provider-note { display: flex; align-items: center; gap: 6px; }
-.web-search-provider { display: grid; gap: 8px; min-width: 0; }
-.web-search-provider-info { display: grid; gap: 3px; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-secondary); overflow-wrap: anywhere; }
-.web-search-provider-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 24px; }
-.web-search-settings a { color: var(--dsw-alias-state-business-primary); font-size: 12px; line-height: 18px; text-underline-offset: 3px; }
-/* The primitive renders a 32px control in an inline-flex wrapper; a settings
- * field needs it to fill the column it sits in. */
-.ws-input { width: 100%; }
-.web-search-rank { margin: 0; padding: 0; list-style: none; }
-.web-search-rank li {
-  position: relative;
-  display: grid;
-  grid-template-columns: 24px minmax(0, 1fr) auto;
-  gap: 10px;
-  align-items: start;
-  padding: 14px 0;
-  border-top: 0.5px solid var(--dsw-alias-border-l2);
-}
-.web-search-settings button.web-search-drag-handle {
-  display: grid;
-  place-items: center;
-  width: 24px;
-  height: 24px;
-  min-height: 24px;
-  padding: 0;
-  cursor: grab;
-  opacity: 0.65;
-}
-.web-search-settings button.web-search-drag-handle:hover { opacity: 1; }
-.web-search-settings button.web-search-drag-handle:active { cursor: grabbing; }
-.web-search-settings button.web-search-drag-handle[aria-disabled='true'] { cursor: wait; opacity: 0.4; }
-.web-search-rank li[data-dragging] { opacity: 0.45; }
-.web-search-rank li[data-drop]::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: var(--dsw-alias-state-business-primary); pointer-events: none; }
-.web-search-rank li[data-drop='before']::after { top: -1px; }
-.web-search-rank li[data-drop='after']::after { bottom: -1px; }
-.web-search-rank-index { color: var(--dsw-alias-label-tertiary); font-variant-numeric: tabular-nums; line-height: 24px; }
-.web-search-rank-move { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; padding-top: 2px; }
-.web-search-limits { margin: 0; border: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
-/* A two-column grid, so these fields keep the contract's caption and the
- * primitive's control and only own their vertical rhythm — a stacked list is
- * what draws the hairline between fields, and there is nothing to separate. */
-.ws-limit { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
-.ws-danger:hover:not(:disabled),
-.ws-danger[data-armed] { color: var(--dsw-alias-state-error-primary); border-color: var(--dsw-alias-state-error-primary); }
-.ws-danger:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover-danger); }
-@media (max-width: 560px) { .web-search-rank-move { flex-direction: column; align-items: flex-end; } .web-search-limits { grid-template-columns: minmax(0, 1fr); } }
-`;
 function apply(ctx) {
 	const client = ctx;
 	ctx.effect(() => {
 		if (typeof document === "undefined") return () => {};
 		const style = document.createElement("style");
 		style.setAttribute("data-plugin", "@klarkxy/dsh-web-search-manager");
-		style.textContent = styles;
+		style.textContent = webSearchClientStyles;
 		style.dataset.dshWebSearch = "";
 		document.head.appendChild(style);
 		return () => style.remove();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klarkxy/dsh-web-search-manager",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Manage and rank search and page-reading services, including providers from installed plugins, in one settings page.",
   "icon": "./icon.svg",
   "license": "SEE LICENSE IN LICENSE",
@@ -80,7 +80,7 @@
   },
   "dependencies": {
     "@deepseek-ai/dsh-web-search-exa": ">=0.2.0-rc.2",
-    "@klarkxy/dsh-plugin-kit": "0.4.0",
+    "@klarkxy/dsh-plugin-kit": "0.5.0",
     "zod": "^4.1.5"
   },
   "peerDependencies": {
@@ -152,6 +152,6 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dshRelease": {
-    "contentHash": "e86bf9ef6ca28eaf4dc5a9047a5718f54ef20befd42d82fe247477cef17564f7"
+    "contentHash": "b13ef2869d849beeed7fa30c94ddb05a2ec803a59d0d258a098c92c211b8a91f"
   }
 }