@dsh-plus/image-studio 0.1.22 → 0.1.23

package/lib/client.js

@@ -277,9 +277,72 @@ window.__ModuleLoader__.load({
 			kind: "idle",
 			text: ""
 		};
+		/** 状态行 + 动作按钮（两种形态共用，类名随形态切换度量）。 */
+		function CardFoot(props) {
+			const p = props.prefix;
+			const section = props.variant === "section";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: section ? `${p}-sectionFooter` : `${p}-footer`,
+				children: [props.status !== void 0 && props.status.kind !== "idle" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: `${p}-status${props.status.kind === "error" ? ` ${p}-statusError` : ""}`,
+					role: "status",
+					children: props.status.text
+				}) : null, props.actions.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: `${p}-btn ${action.variant === "primary" ? `${p}-btnPrimary` : `${p}-btnGhost`}`,
+					disabled: action.disabled === true,
+					onClick: action.onClick,
+					children: action.label
+				}, action.key))]
+			});
+		}
+		/** 只读提示 + 字段区 + 页脚（两种形态共用）。 */
+		function CardBody(props) {
+			const p = props.prefix;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				props.readOnlyNotice !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: `${p}-readOnly`,
+					role: "status",
+					children: props.readOnlyNotice
+				}) : null,
+				props.children,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardFoot, { ...props })
+			] });
+		}
 		function CardChrome(props) {
 			const p = props.prefix;
 			const badge = props.statusBadge;
+			if (props.variant === "section") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: `${p}-section`,
+				"aria-label": props.title,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: `${p}-sectionHead`,
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+								className: `${p}-sectionTitle`,
+								children: props.title
+							}),
+							badge !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: `${p}-sectionBadge ${badge.on ? `${p}-statusOn` : `${p}-statusOff`}`,
+								children: badge.text
+							}) : null,
+							props.dirty ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: `${p}-pending`,
+								children: props.dirtyLabel
+							}) : null
+						]
+					}),
+					props.description === "" ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: `${p}-sectionDesc`,
+						children: props.description
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: `${p}-sectionBody`,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardBody, { ...props })
+					})
+				]
+			});
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
 				className: `${p}-card${props.open ? ` ${p}-cardOpen` : ""}`,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
@@ -309,38 +372,44 @@ window.__ModuleLoader__.load({
 						}) : null,
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, { className: `${p}-chevron${props.open ? ` ${p}-chevronOpen` : ""}` })
 					]
-				}), props.open ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				}), props.open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: `${p}-body`,
-					children: [
-						props.readOnlyNotice !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: `${p}-readOnly`,
-							role: "status",
-							children: props.readOnlyNotice
-						}) : null,
-						props.children,
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: `${p}-footer`,
-							children: [props.status !== void 0 && props.status.kind !== "idle" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: `${p}-status${props.status.kind === "error" ? ` ${p}-statusError` : ""}`,
-								role: "status",
-								children: props.status.text
-							}) : null, props.actions.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: `${p}-btn ${action.variant === "primary" ? `${p}-btnPrimary` : `${p}-btnGhost`}`,
-								disabled: action.disabled === true,
-								onClick: action.onClick,
-								children: action.label
-							}, action.key))]
-						})
-					]
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardBody, { ...props })
 				}) : null]
 			});
 		}
+		/** 取值未到达时的占位：与 CardChrome 同形态，避免宿主页里闪一次卡片外壳。 */
+		function CardLoading(props) {
+			if (props.variant === "section") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+				className: `${props.prefix}-section`,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: `${props.prefix}-readOnly`,
+					role: "status",
+					children: props.text
+				})
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+				className: `${props.prefix}-card`,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: `${props.prefix}-readOnly`,
+					role: "status",
+					children: props.text
+				})
+			});
+		}
 		//#endregion
 		//#region ../shared/src/client/config-slots.ts
 		/** dsh-plus 聚合 bundle 的包名（各插件 row 均经其补丁层插入 profile）。 */
 		const DSH_PLUS_BUNDLE = "@dsh-plus/bundle-main";
 		/**
+		* 视图 → 外壳形态：插件页 page 视图渲染在官方页面容器内（宿主已画标题、图标、
+		* 面包屑与页面级内边距），再套卡片会形成卡片套卡片并压缩移动端可用宽度，
+		* 故用无边框分节；summary 与 legacy 槽位保持卡片形态。
+		*/
+		function cardVariantFor(view) {
+			return view === "page" ? "section" : "card";
+		}
+		/**
 		* 把一张配置卡片同时注册进 legacy 与新版三个槽位。
 		* 任一槽位在当前 dsh 版本未声明时对应 inject 挂起等待，版本不命中即 no-op。
 		*/
@@ -366,6 +435,17 @@ window.__ModuleLoader__.load({
 			}, reg.component));
 		}
 		//#endregion
+		//#region ../shared/src/client/draft.ts
+		/**
+		* 单命名空间 staged 草稿（简单配置卡片共用）：读 scope 快照、播种草稿、
+		* 脏判定、保存（revision fencing + 重新装载）与状态行。
+		*
+		* 语义与官方 staged 表单一致：Host 更新不覆盖在途编辑，只有保存才写回；
+		* 保存成功后按 Host 解析值重置草稿。`from`/`patch` 参与 effect 与 useMemo
+		* 依赖，必须是模块级稳定函数（不要内联箭头函数）。
+		* @module @dsh-plus/shared/client/draft
+		*/
+		//#endregion
 		//#region ../shared/src/client/fetch.ts
 		async function parse(res, guard) {
 			const body = await res.json();
@@ -520,6 +600,9 @@ window.__ModuleLoader__.load({
 		* - 窄屏 input/textarea 16px（防 iOS 聚焦缩放）、可点目标 ≥44px；
 		* - footer 按钮等宽换行、状态文字独占一行；
 		* - 展开态 body 底部 sticky 保存栏（长表单滚动中始终可达）。
+		* - 分节形态（-section，插件页 page 视图内嵌宿主页面）：无边框/背景、横向零
+		*   内边距，页脚不 sticky——官方插件页已提供页面级内边距，再叠一层卡片会
+		*   缩窄移动端可用宽度（卡片套卡片）。
 		* 沿用官方 data-plugin / data-plugin-css 约定（HMR 据此卸载），不覆盖上游选择器。
 		* @module @dsh-plus/shared/client/styles
 		*/
@@ -566,6 +649,15 @@ window.__ModuleLoader__.load({
 .${prefix}-checkRow input:checked::after{left:16px;background:var(--dsw-alias-bg-base)}
 .${prefix}-checkRow input:disabled{opacity:.4;cursor:default}
 .${prefix}-checkRow input:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
+/* 宿主内嵌分节形态（插件页 page 视图）：官方设置页同构——无边框/背景，
+   横向零内边距（宽度交给宿主页面容器），小节标题 13px/600，页脚非 sticky。 */
+.${prefix}-section{box-sizing:border-box;flex-direction:column;width:100%;min-width:0;padding:16px 0;display:flex}
+.${prefix}-sectionHead{align-items:center;gap:8px;min-width:0;display:flex}
+.${prefix}-sectionTitle{min-width:0;color:var(--dsw-alias-label-primary);flex:1;margin:0;font-size:13px;font-weight:600;line-height:1.5}
+.${prefix}-sectionBadge{white-space:nowrap;border-radius:999px;flex:none;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
+.${prefix}-sectionDesc{color:var(--dsw-alias-label-tertiary);margin:4px 0 0;font-size:12px;line-height:1.5}
+.${prefix}-sectionBody{flex-direction:column;min-width:0;display:flex}
+.${prefix}-sectionFooter{align-items:center;gap:8px;padding-top:16px;display:flex;flex-wrap:wrap}
 .${prefix}-groupLabel{color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:600;padding:12px 0 2px;margin:0}
 .${prefix}-readOnly{color:var(--dsw-alias-label-tertiary);margin:12px 0 0;font-size:12px;line-height:1.5}
 .${prefix}-warn{color:var(--dsw-alias-label-error);margin:12px 0 0;font-size:12px;line-height:1.5}
@@ -587,6 +679,8 @@ window.__ModuleLoader__.load({
 .${prefix}-status{flex-basis:100%;flex:none}
 .${prefix}-btn{min-height:44px;flex:1;min-width:96px}
 .${prefix}-statusBadge{display:none}
+.${prefix}-sectionBadge{display:inline-block}
+.${prefix}-sectionFooter{position:static}
 }
 @media (pointer:coarse){
 .${prefix}-btn{min-height:44px}
@@ -624,6 +718,90 @@ ${extra}
 		*/
 		const SETTINGS_NS = "dsh-plus-image-studio";
 		//#endregion
+		//#region src/client/api.ts
+		/**
+		* 数据端点通道（前端预留）：同源 fetch 封装，类型与 dto.ts 对齐。
+		* 本次仅交付通道层，不交付调用它的界面。
+		* @module image-studio/client/api
+		*/
+		const BASE = "/dsh-plus/image-studio";
+		/** 提交生图任务。 */
+		function generate(request) {
+			return postJson(`${BASE}/generate`, request);
+		}
+		/** 批量任务轮询。 */
+		function fetchTasks() {
+			return getJson(`${BASE}/tasks`);
+		}
+		/** 取消任务。 */
+		function cancelTask(taskId) {
+			return postJson(`${BASE}/tasks/${taskId}/cancel`);
+		}
+		/** 画廊列表应答形状守卫：items 需为数组（渲染期直接 map）。 */
+		function isGalleryList(value) {
+			if (typeof value !== "object" || value === null) return false;
+			return Array.isArray(value.items);
+		}
+		/** 画廊列表。 */
+		function fetchGallery() {
+			return getJson(`${BASE}/gallery`, isGalleryList);
+		}
+		/** 删除画廊条目。 */
+		function deleteGalleryItem(itemId) {
+			return fetch(`${BASE}/gallery/${itemId}`, {
+				method: "DELETE",
+				credentials: "same-origin"
+			}).then((res) => res.json());
+		}
+		/** 图片 URL（<img src> 直连，非 fetch）。 */
+		function imageUrl(imageId) {
+			return `${BASE}/images/${imageId}`;
+		}
+		/** 上传原图 URL（缩略图直连，非 fetch）。 */
+		function uploadImageUrl(uploadId) {
+			return `${BASE}/uploads/${uploadId}`;
+		}
+		/** 上传本地图片：raw body 流（query 携带原文件名，仅展示用）。 */
+		async function uploadImage(file) {
+			const query = new URLSearchParams({ name: file.name });
+			const res = await fetch(`${BASE}/uploads?${query.toString()}`, {
+				method: "POST",
+				credentials: "same-origin",
+				headers: { "content-type": "application/octet-stream" },
+				body: file
+			});
+			const body = await res.json();
+			if (!res.ok) throw new Error(body.message ?? body.error ?? `HTTP ${res.status}`);
+			return body;
+		}
+		/** 上传列表（最新在后；界面自行倒序）。 */
+		async function fetchUploads() {
+			return getJson(`${BASE}/uploads`);
+		}
+		/** 凭据状态（describe，永不回传值）。 */
+		function fetchCredentialStatus(refName) {
+			return getJson(`${BASE}/credentials/${refName}`);
+		}
+		/** 设置凭据值。 */
+		function setCredential(refName, value) {
+			return postJson(`${BASE}/credentials/${refName}`, { value });
+		}
+		/** 删除凭据。 */
+		function unsetCredential(refName) {
+			return fetch(`${BASE}/credentials/${refName}`, {
+				method: "DELETE",
+				credentials: "same-origin"
+			}).then((res) => res.json());
+		}
+		/** 协议 registry + 参数目录。 */
+		function fetchProviders() {
+			return getJson(`${BASE}/providers`);
+		}
+		/** 预设只读快照（读写走官方 settings RPC）。 */
+		function fetchPresets() {
+			return getJson(`${BASE}/presets`);
+		}
+		//#endregion
 		//#region src/credentials.ts
 		/**
 		* 凭据引用名派生与校验：提供商预设 id → IMAGE_STUDIO_PRESET_<ID>。
@@ -938,100 +1116,7 @@ ${extra}
 			return out;
 		}
 		//#endregion
-		//#region src/client/api.ts
-		/**
-		* 数据端点通道（前端预留）：同源 fetch 封装，类型与 dto.ts 对齐。
-		* 本次仅交付通道层，不交付调用它的界面。
-		* @module image-studio/client/api
-		*/
-		const BASE = "/dsh-plus/image-studio";
-		/** 提交生图任务。 */
-		function generate(request) {
-			return postJson(`${BASE}/generate`, request);
-		}
-		/** 批量任务轮询。 */
-		function fetchTasks() {
-			return getJson(`${BASE}/tasks`);
-		}
-		/** 取消任务。 */
-		function cancelTask(taskId) {
-			return postJson(`${BASE}/tasks/${taskId}/cancel`);
-		}
-		/** 画廊列表应答形状守卫：items 需为数组（渲染期直接 map）。 */
-		function isGalleryList(value) {
-			if (typeof value !== "object" || value === null) return false;
-			return Array.isArray(value.items);
-		}
-		/** 画廊列表。 */
-		function fetchGallery() {
-			return getJson(`${BASE}/gallery`, isGalleryList);
-		}
-		/** 删除画廊条目。 */
-		function deleteGalleryItem(itemId) {
-			return fetch(`${BASE}/gallery/${itemId}`, {
-				method: "DELETE",
-				credentials: "same-origin"
-			}).then((res) => res.json());
-		}
-		/** 图片 URL（<img src> 直连，非 fetch）。 */
-		function imageUrl(imageId) {
-			return `${BASE}/images/${imageId}`;
-		}
-		/** 上传原图 URL（缩略图直连，非 fetch）。 */
-		function uploadImageUrl(uploadId) {
-			return `${BASE}/uploads/${uploadId}`;
-		}
-		/** 上传本地图片：raw body 流（query 携带原文件名，仅展示用）。 */
-		async function uploadImage(file) {
-			const query = new URLSearchParams({ name: file.name });
-			const res = await fetch(`${BASE}/uploads?${query.toString()}`, {
-				method: "POST",
-				credentials: "same-origin",
-				headers: { "content-type": "application/octet-stream" },
-				body: file
-			});
-			const body = await res.json();
-			if (!res.ok) throw new Error(body.message ?? body.error ?? `HTTP ${res.status}`);
-			return body;
-		}
-		/** 上传列表（最新在后；界面自行倒序）。 */
-		async function fetchUploads() {
-			return getJson(`${BASE}/uploads`);
-		}
-		/** 凭据状态（describe，永不回传值）。 */
-		function fetchCredentialStatus(refName) {
-			return getJson(`${BASE}/credentials/${refName}`);
-		}
-		/** 设置凭据值。 */
-		function setCredential(refName, value) {
-			return postJson(`${BASE}/credentials/${refName}`, { value });
-		}
-		/** 删除凭据。 */
-		function unsetCredential(refName) {
-			return fetch(`${BASE}/credentials/${refName}`, {
-				method: "DELETE",
-				credentials: "same-origin"
-			}).then((res) => res.json());
-		}
-		/** 协议 registry + 参数目录。 */
-		function fetchProviders() {
-			return getJson(`${BASE}/providers`);
-		}
-		/** 预设只读快照（读写走官方 settings RPC）。 */
-		function fetchPresets() {
-			return getJson(`${BASE}/presets`);
-		}
-		//#endregion
-		//#region src/client/card.tsx
-		/**
-		* 配置卡片（injectPluginConfigCard 三槽位，legacy key = settings 命名空间，
-		* 0.1.6-alpha.2 起为插件页 row/bundle config，view 分发 summary/page）：
-		* 三组预设（提供商/参数/提示词）+ 高级项（并发/超时/代理/画廊上限）的
-		* staged draft 编辑；提供商预设逐条附 API Key 管理（凭据端点，值不回显）。
-		* JSON 字段（extraHeaders/paramSpecs）以文本镜像编辑，保存时解析 +
-		* validateParamSpecs 本地校验，非法即拦在保存前。
-		* @module image-studio/client/card
-		*/
+		//#region src/client/draft.ts
 		/** 配置值 → 编辑草稿。 */
 		function draftOf(value) {
 			return {
@@ -1103,6 +1188,41 @@ ${extra}
 				uploadTtlHours: Math.max(1, Math.floor(Number(draft.uploadTtlHours) || 24))
 			};
 		}
+		/** 空提供商预设（新增行用；协议取目录首项）。 */
+		function emptyProviderDraft(protocol) {
+			return {
+				id: "",
+				name: "",
+				protocol,
+				baseUrl: "",
+				model: "",
+				extraHeadersText: "{}"
+			};
+		}
+		/** 空参数预设（新增行用；id 由时间戳生成，行序即身份）。 */
+		function emptyParamDraft() {
+			return {
+				id: `param-${Date.now().toString(36)}`,
+				name: "",
+				endpoint: "generation",
+				specsText: "{}"
+			};
+		}
+		/** 空提示词预设（新增行用）。 */
+		function emptyPromptDraft() {
+			return {
+				id: `prompt-${Date.now().toString(36)}`,
+				name: "",
+				text: ""
+			};
+		}
+		//#endregion
+		//#region src/client/preset-sections.tsx
+		/**
+		* 配置卡片的三组预设编辑区：提供商（含逐条 API Key 管理）、提示词、参数。
+		* 从 card.tsx 拆出，避免单组件过长；草稿类型与纯转换在 ./draft.ts。
+		* @module image-studio/client/preset-sections
+		*/
 		/** 单个提供商预设的 API Key 行（describe 徽标 + 设置/删除，值不回显）。 */
 		function CredentialRow(props) {
 			const { t, presetId, disabled } = props;
@@ -1160,6 +1280,334 @@ ${extra}
 				]
 			});
 		}
+		function ProviderPresetSection(props) {
+			const { t, draft, disabled, protocols, onPatch, onPatchProvider } = props;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+					className: "imsc-groupTitle",
+					children: t("card.providers")
+				}),
+				draft.providers.map((provider, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "imsc-presetBox",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "imsc-presetHead",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "imsc-presetName",
+								children: provider.name || provider.id || "—"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "imsc-btn imsc-btnGhost",
+								disabled,
+								onClick: () => onPatch({ providers: draft.providers.filter((_, i) => i !== index) }),
+								children: t("common.delete")
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "imsc-grid2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField, {
+								prefix: "imsc",
+								id: `imsc-pid-${index}`,
+								label: t("card.field.id"),
+								hint: t("card.idHint"),
+								value: provider.id,
+								invalid: provider.id !== "" && !isValidPresetId(provider.id),
+								invalidLabel: t("card.idInvalid"),
+								disabled,
+								onEdit: (v) => onPatchProvider(index, { id: v })
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField, {
+								prefix: "imsc",
+								id: `imsc-pname-${index}`,
+								label: t("card.field.name"),
+								value: provider.name,
+								disabled,
+								onEdit: (v) => onPatchProvider(index, { name: v })
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "imsc-grid2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "imsc-field",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "imsc-head",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+										className: "imsc-label",
+										htmlFor: `imsc-pproto-${index}`,
+										children: t("card.field.protocol")
+									})
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+									id: `imsc-pproto-${index}`,
+									className: "imsc-select",
+									value: provider.protocol,
+									disabled,
+									onChange: (event) => onPatchProvider(index, { protocol: event.target.value }),
+									children: (protocols.length > 0 ? protocols : [{
+										id: provider.protocol,
+										label: provider.protocol
+									}]).map((protocol) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: protocol.id,
+										children: protocol.label
+									}, protocol.id))
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField, {
+								prefix: "imsc",
+								id: `imsc-pmodel-${index}`,
+								label: t("card.field.model"),
+								value: provider.model,
+								disabled,
+								onEdit: (v) => onPatchProvider(index, { model: v })
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField, {
+							prefix: "imsc",
+							id: `imsc-purl-${index}`,
+							label: t("card.field.baseUrl"),
+							value: provider.baseUrl,
+							disabled,
+							onEdit: (v) => onPatchProvider(index, { baseUrl: v })
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "imsc-field",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "imsc-head",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+									className: "imsc-label",
+									htmlFor: `imsc-pheaders-${index}`,
+									children: t("card.field.extraHeaders")
+								})
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+								id: `imsc-pheaders-${index}`,
+								className: "imsc-textarea",
+								value: provider.extraHeadersText,
+								disabled,
+								onChange: (event) => onPatchProvider(index, { extraHeadersText: event.target.value })
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CredentialRow, {
+							t,
+							presetId: provider.id,
+							disabled
+						})
+					]
+				}, `provider-${index}`)),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: "imsc-btn imsc-btnGhost",
+					disabled,
+					onClick: () => onPatch({ providers: [...draft.providers, emptyProviderDraft(protocols[0]?.id ?? "openai-images")] }),
+					children: [
+						t("card.add"),
+						" · ",
+						t("card.providers")
+					]
+				})
+			] });
+		}
+		function PromptPresetSection(props) {
+			const { t, draft, disabled, onPatch, onPatchPrompt } = props;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+					className: "imsc-groupTitle",
+					children: t("card.prompts")
+				}),
+				draft.prompts.map((prompt, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "imsc-presetBox",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "imsc-presetHead",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							className: "imsc-input",
+							"aria-label": t("card.field.name"),
+							value: prompt.name,
+							disabled,
+							onChange: (event) => onPatchPrompt(index, { name: event.target.value })
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "imsc-btn imsc-btnGhost",
+							disabled,
+							onClick: () => onPatch({ prompts: draft.prompts.filter((_, i) => i !== index) }),
+							children: t("common.delete")
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+						className: "imsc-textarea",
+						"aria-label": t("card.field.text"),
+						value: prompt.text,
+						disabled,
+						onChange: (event) => onPatchPrompt(index, { text: event.target.value })
+					})]
+				}, `prompt-${index}`)),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: "imsc-btn imsc-btnGhost",
+					disabled,
+					onClick: () => onPatch({ prompts: [...draft.prompts, emptyPromptDraft()] }),
+					children: [
+						t("card.add"),
+						" · ",
+						t("card.prompts")
+					]
+				})
+			] });
+		}
+		function ParamPresetSection(props) {
+			const { t, draft, disabled, onPatch, onPatchParam } = props;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+					className: "imsc-groupTitle",
+					children: t("card.params")
+				}),
+				draft.params.map((param, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "imsc-presetBox",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "imsc-presetHead",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								className: "imsc-input",
+								"aria-label": t("card.field.name"),
+								value: param.name,
+								disabled,
+								onChange: (event) => onPatchParam(index, { name: event.target.value })
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+								className: "imsc-select",
+								"aria-label": t("card.field.endpoint"),
+								value: param.endpoint,
+								disabled,
+								onChange: (event) => onPatchParam(index, { endpoint: event.target.value }),
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+									value: "generation",
+									children: t("tab.generation")
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+									value: "edit",
+									children: t("tab.edit")
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "imsc-btn imsc-btnGhost",
+								disabled,
+								onClick: () => onPatch({ params: draft.params.filter((_, i) => i !== index) }),
+								children: t("common.delete")
+							})
+						]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+						className: "imsc-textarea",
+						"aria-label": t("card.field.paramSpecs"),
+						placeholder: "{ \"size\": { \"enabled\": true, \"value\": \"1024x1024\" } }",
+						value: param.specsText,
+						disabled,
+						onChange: (event) => onPatchParam(index, { specsText: event.target.value })
+					})]
+				}, `param-${index}`)),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: "imsc-btn imsc-btnGhost",
+					disabled,
+					onClick: () => onPatch({ params: [...draft.params, emptyParamDraft()] }),
+					children: [
+						t("card.add"),
+						" · ",
+						t("card.params")
+					]
+				})
+			] });
+		}
+		//#endregion
+		//#region src/client/card.tsx
+		/**
+		* 配置卡片（injectPluginConfigCard 三槽位，legacy key = settings 命名空间，
+		* 0.1.6-alpha.2 起为插件页 row/bundle config，view 分发 summary/page）：
+		* 三组预设（提供商/参数/提示词）+ 高级项（并发/超时/代理/画廊上限）的
+		* staged draft 编辑；提供商预设逐条附 API Key 管理（凭据端点，值不回显）。
+		* JSON 字段（extraHeaders/paramSpecs）以文本镜像编辑，保存时解析 +
+		* validateParamSpecs 本地校验，非法即拦在保存前。
+		* 草稿类型与纯转换在 ./draft.ts，三组预设编辑区在 ./preset-sections.tsx。
+		* @module image-studio/client/card
+		*/
+		/** 协议目录（服务端 /providers）：驱动提供商预设的协议下拉。 */
+		function useProtocols() {
+			const [protocols, setProtocols] = (0, react.useState)([]);
+			(0, react.useEffect)(() => {
+				fetchProviders().then((res) => setProtocols(res.protocols.map((p) => ({
+					id: p.id,
+					label: p.label
+				})))).catch(() => {});
+			}, []);
+			return protocols;
+		}
+		/** 卡片动作：放弃（回到 Host 值并重置基线）与保存。 */
+		function cardActions(options) {
+			const { t } = options;
+			return [{
+				key: "discard",
+				label: t("card.discard"),
+				disabled: !options.dirty || options.saving,
+				onClick: options.onDiscard
+			}, {
+				key: "save",
+				label: t(options.saving ? "common.saving" : "card.save"),
+				variant: "primary",
+				disabled: !options.dirty || options.saving || options.disabled,
+				onClick: options.onSave
+			}];
+		}
+		/** 高级项：并发 / 超时 / 代理 / 画廊上限 / 上传保留时长。 */
+		function AdvancedFields(props) {
+			const { t, draft, disabled, onPatch } = props;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+					className: "imsc-groupTitle",
+					children: t("card.advanced")
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "imsc-grid2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField, {
+						prefix: "imsc",
+						id: "imsc-conc",
+						label: t("card.maxConcurrent"),
+						numeric: true,
+						value: draft.maxConcurrent,
+						disabled,
+						onEdit: (v) => onPatch({ maxConcurrent: v })
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField, {
+						prefix: "imsc",
+						id: "imsc-timeout",
+						label: t("card.requestTimeoutMs"),
+						numeric: true,
+						value: draft.requestTimeoutMs,
+						disabled,
+						onEdit: (v) => onPatch({ requestTimeoutMs: v })
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "imsc-grid2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField, {
+						prefix: "imsc",
+						id: "imsc-proxy",
+						label: t("card.proxy"),
+						value: draft.proxy,
+						disabled,
+						onEdit: (v) => onPatch({ proxy: v })
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField, {
+						prefix: "imsc",
+						id: "imsc-gmax",
+						label: t("card.galleryMaxItems"),
+						numeric: true,
+						value: draft.galleryMaxItems,
+						disabled,
+						onEdit: (v) => onPatch({ galleryMaxItems: v })
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField, {
+					prefix: "imsc",
+					id: "imsc-upload-ttl",
+					label: t("card.uploadTtlHours"),
+					numeric: true,
+					value: draft.uploadTtlHours,
+					disabled,
+					onEdit: (v) => onPatch({ uploadTtlHours: v })
+				})
+			] });
+		}
 		function StudioConfigCard(props) {
 			const { t, scope, api } = props;
 			const snapshot = (0, react.useSyncExternalStore)((listener) => scope.subscribe(listener), () => scope.getSnapshot());
@@ -1169,13 +1617,7 @@ ${extra}
 			const [baseline, setBaseline] = (0, react.useState)("");
 			const [saving, setSaving] = (0, react.useState)(false);
 			const [status, setStatus] = (0, react.useState)(IDLE_STATUS);
-			const [protocols, setProtocols] = (0, react.useState)([]);
-			(0, react.useEffect)(() => {
-				fetchProviders().then((res) => setProtocols(res.protocols.map((p) => ({
-					id: p.id,
-					label: p.label
-				})))).catch(() => {});
-			}, []);
+			const protocols = useProtocols();
 			(0, react.useEffect)(() => {
 				if (value === void 0 || draft !== null) return;
 				const initial = draftOf(value);
@@ -1184,12 +1626,11 @@ ${extra}
 			}, [value, draft]);
 			const dirty = (0, react.useMemo)(() => draft !== null && JSON.stringify(draft) !== baseline, [draft, baseline]);
 			if (props.view === "summary") return t("card.summary");
-			if (value === void 0 || draft === null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
-				className: "imsc-card",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "imsc-loading",
-					children: t("common.loading")
-				})
+			const variant = cardVariantFor(props.view);
+			if (value === void 0 || draft === null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardLoading, {
+				prefix: "imsc",
+				variant,
+				text: t("common.loading")
 			});
 			const disabled = !snapshot.writable;
 			const onSave = () => {
@@ -1224,24 +1665,32 @@ ${extra}
 				});
 				setStatus(IDLE_STATUS);
 			};
-			const patchProvider = (index, next) => patch({ providers: draft.providers.map((p, i) => i === index ? {
-				...p,
-				...next
-			} : p) });
-			const patchParam = (index, next) => patch({ params: draft.params.map((p, i) => i === index ? {
-				...p,
-				...next
-			} : p) });
-			const patchPrompt = (index, next) => patch({ prompts: draft.prompts.map((p, i) => i === index ? {
-				...p,
-				...next
-			} : p) });
+			const sectionProps = {
+				t,
+				draft,
+				disabled,
+				protocols,
+				onPatch: patch,
+				onPatchProvider: (index, next) => patch({ providers: draft.providers.map((p, i) => i === index ? {
+					...p,
+					...next
+				} : p) }),
+				onPatchParam: (index, next) => patch({ params: draft.params.map((p, i) => i === index ? {
+					...p,
+					...next
+				} : p) }),
+				onPatchPrompt: (index, next) => patch({ prompts: draft.prompts.map((p, i) => i === index ? {
+					...p,
+					...next
+				} : p) })
+			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CardChrome, {
 				prefix: "imsc",
 				title: t("card.title"),
 				description: t("card.description"),
 				open,
 				onToggle: setOpen,
+				variant,
 				statusBadge: {
 					text: draft.providers.length > 0 ? t("card.badgeOn").replace("{n}", String(draft.providers.length)) : t("card.badgeOff"),
 					on: draft.providers.length > 0
@@ -1250,307 +1699,28 @@ ${extra}
 				dirtyLabel: t("common.unsaved"),
 				readOnlyNotice: disabled ? t("card.readOnly") : void 0,
 				status,
-				actions: [{
-					key: "discard",
-					label: t("card.discard"),
-					disabled: !dirty || saving,
-					onClick: () => {
+				actions: cardActions({
+					t,
+					dirty,
+					saving,
+					disabled,
+					onDiscard: () => {
 						const restored = draftOf(value);
 						setDraft(restored);
 						setBaseline(JSON.stringify(restored));
 						setStatus(IDLE_STATUS);
-					}
-				}, {
-					key: "save",
-					label: t(saving ? "common.saving" : "card.save"),
-					variant: "primary",
-					disabled: !dirty || saving || disabled,
-					onClick: onSave
-				}],
+					},
+					onSave
+				}),
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
-						className: "imsc-groupTitle",
-						children: t("card.providers")
-					}),
-					draft.providers.map((provider, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "imsc-presetBox",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "imsc-presetHead",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "imsc-presetName",
-									children: provider.name || provider.id || "—"
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									className: "imsc-btn imsc-btnGhost",
-									disabled,
-									onClick: () => patch({ providers: draft.providers.filter((_, i) => i !== index) }),
-									children: t("common.delete")
-								})]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "imsc-grid2",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField, {
-									prefix: "imsc",
-									id: `imsc-pid-${index}`,
-									label: t("card.field.id"),
-									hint: t("card.idHint"),
-									value: provider.id,
-									invalid: provider.id !== "" && !isValidPresetId(provider.id),
-									invalidLabel: t("card.idInvalid"),
-									disabled,
-									onEdit: (v) => patchProvider(index, { id: v })
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField, {
-									prefix: "imsc",
-									id: `imsc-pname-${index}`,
-									label: t("card.field.name"),
-									value: provider.name,
-									disabled,
-									onEdit: (v) => patchProvider(index, { name: v })
-								})]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "imsc-grid2",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "imsc-field",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										className: "imsc-head",
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-											className: "imsc-label",
-											htmlFor: `imsc-pproto-${index}`,
-											children: t("card.field.protocol")
-										})
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
-										id: `imsc-pproto-${index}`,
-										className: "imsc-select",
-										value: provider.protocol,
-										disabled,
-										onChange: (event) => patchProvider(index, { protocol: event.target.value }),
-										children: (protocols.length > 0 ? protocols : [{
-											id: provider.protocol,
-											label: provider.protocol
-										}]).map((protocol) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-											value: protocol.id,
-											children: protocol.label
-										}, protocol.id))
-									})]
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField, {
-									prefix: "imsc",
-									id: `imsc-pmodel-${index}`,
-									label: t("card.field.model"),
-									value: provider.model,
-									disabled,
-									onEdit: (v) => patchProvider(index, { model: v })
-								})]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField, {
-								prefix: "imsc",
-								id: `imsc-purl-${index}`,
-								label: t("card.field.baseUrl"),
-								value: provider.baseUrl,
-								disabled,
-								onEdit: (v) => patchProvider(index, { baseUrl: v })
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "imsc-field",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: "imsc-head",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-										className: "imsc-label",
-										htmlFor: `imsc-pheaders-${index}`,
-										children: t("card.field.extraHeaders")
-									})
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
-									id: `imsc-pheaders-${index}`,
-									className: "imsc-textarea",
-									value: provider.extraHeadersText,
-									disabled,
-									onChange: (event) => patchProvider(index, { extraHeadersText: event.target.value })
-								})]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CredentialRow, {
-								t,
-								presetId: provider.id,
-								disabled
-							})
-						]
-					}, `provider-${index}`)),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						type: "button",
-						className: "imsc-btn imsc-btnGhost",
-						disabled,
-						onClick: () => patch({ providers: [...draft.providers, {
-							id: "",
-							name: "",
-							protocol: protocols[0]?.id ?? "openai-images",
-							baseUrl: "",
-							model: "",
-							extraHeadersText: "{}"
-						}] }),
-						children: [
-							t("card.add"),
-							" · ",
-							t("card.providers")
-						]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
-						className: "imsc-groupTitle",
-						children: t("card.prompts")
-					}),
-					draft.prompts.map((prompt, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "imsc-presetBox",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "imsc-presetHead",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-								className: "imsc-input",
-								"aria-label": t("card.field.name"),
-								value: prompt.name,
-								disabled,
-								onChange: (event) => patchPrompt(index, { name: event.target.value })
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: "imsc-btn imsc-btnGhost",
-								disabled,
-								onClick: () => patch({ prompts: draft.prompts.filter((_, i) => i !== index) }),
-								children: t("common.delete")
-							})]
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
-							className: "imsc-textarea",
-							"aria-label": t("card.field.text"),
-							value: prompt.text,
-							disabled,
-							onChange: (event) => patchPrompt(index, { text: event.target.value })
-						})]
-					}, `prompt-${index}`)),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						type: "button",
-						className: "imsc-btn imsc-btnGhost",
-						disabled,
-						onClick: () => patch({ prompts: [...draft.prompts, {
-							id: `prompt-${Date.now().toString(36)}`,
-							name: "",
-							text: ""
-						}] }),
-						children: [
-							t("card.add"),
-							" · ",
-							t("card.prompts")
-						]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
-						className: "imsc-groupTitle",
-						children: t("card.params")
-					}),
-					draft.params.map((param, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "imsc-presetBox",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "imsc-presetHead",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-									className: "imsc-input",
-									"aria-label": t("card.field.name"),
-									value: param.name,
-									disabled,
-									onChange: (event) => patchParam(index, { name: event.target.value })
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-									className: "imsc-select",
-									"aria-label": t("card.field.endpoint"),
-									value: param.endpoint,
-									disabled,
-									onChange: (event) => patchParam(index, { endpoint: event.target.value }),
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-										value: "generation",
-										children: t("tab.generation")
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-										value: "edit",
-										children: t("tab.edit")
-									})]
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									className: "imsc-btn imsc-btnGhost",
-									disabled,
-									onClick: () => patch({ params: draft.params.filter((_, i) => i !== index) }),
-									children: t("common.delete")
-								})
-							]
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
-							className: "imsc-textarea",
-							"aria-label": t("card.field.paramSpecs"),
-							placeholder: "{ \"size\": { \"enabled\": true, \"value\": \"1024x1024\" } }",
-							value: param.specsText,
-							disabled,
-							onChange: (event) => patchParam(index, { specsText: event.target.value })
-						})]
-					}, `param-${index}`)),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						type: "button",
-						className: "imsc-btn imsc-btnGhost",
-						disabled,
-						onClick: () => patch({ params: [...draft.params, {
-							id: `param-${Date.now().toString(36)}`,
-							name: "",
-							endpoint: "generation",
-							specsText: "{}"
-						}] }),
-						children: [
-							t("card.add"),
-							" · ",
-							t("card.params")
-						]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
-						className: "imsc-groupTitle",
-						children: t("card.advanced")
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "imsc-grid2",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField, {
-							prefix: "imsc",
-							id: "imsc-conc",
-							label: t("card.maxConcurrent"),
-							numeric: true,
-							value: draft.maxConcurrent,
-							disabled,
-							onEdit: (v) => patch({ maxConcurrent: v })
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField, {
-							prefix: "imsc",
-							id: "imsc-timeout",
-							label: t("card.requestTimeoutMs"),
-							numeric: true,
-							value: draft.requestTimeoutMs,
-							disabled,
-							onEdit: (v) => patch({ requestTimeoutMs: v })
-						})]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "imsc-grid2",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField, {
-							prefix: "imsc",
-							id: "imsc-proxy",
-							label: t("card.proxy"),
-							value: draft.proxy,
-							disabled,
-							onEdit: (v) => patch({ proxy: v })
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField, {
-							prefix: "imsc",
-							id: "imsc-gmax",
-							label: t("card.galleryMaxItems"),
-							numeric: true,
-							value: draft.galleryMaxItems,
-							disabled,
-							onEdit: (v) => patch({ galleryMaxItems: v })
-						})]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField, {
-						prefix: "imsc",
-						id: "imsc-upload-ttl",
-						label: t("card.uploadTtlHours"),
-						numeric: true,
-						value: draft.uploadTtlHours,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProviderPresetSection, { ...sectionProps }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PromptPresetSection, { ...sectionProps }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ParamPresetSection, { ...sectionProps }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AdvancedFields, {
+						t,
+						draft,
 						disabled,
-						onEdit: (v) => patch({ uploadTtlHours: v })
+						onPatch: patch
 					})
 				]
 			});
@@ -4026,6 +4196,14 @@ ${extra}
 }
 .imsc-credRow { display: flex; align-items: center; gap: 8px; }
 .imsc-credRow .imsc-input { flex: 1; min-width: 0; }
+/* 分节形态（插件页 page 视图，无边框分节）：预设块改为分隔线分组，去掉第二层内边距 */
+.imsc-section .imsc-presetBox {
+  border: 0;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 0;
+  padding: 10px 0 2px;
+  margin-bottom: 0;
+}
 
 /* ── 移动端（≤767px，与 ui-mobile-fit 同断点）── */
 @media (max-width: 767px) {
@@ -4059,6 +4237,7 @@ ${extra}
   .ims-btn { min-height: 40px; }
   .ims-btnSmall { min-height: 32px; }
   .imsc-grid2 { grid-template-columns: 1fr; }
+  .imsc-section .imsc-presetBox { padding: 10px 0 2px; }
 }
 `;
 		/** 注入面板 + 入口 + 卡片附加样式（重复调用幂等：已存在则跳过）。 */