@dsh-plus/image-studio 0.1.22 → 0.1.24

package/lib/client.js

@@ -4,9 +4,175 @@ window.__ModuleLoader__.load({
 		var module = { exports: {} };
 		var exports = module.exports;
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-		let react = require("react");
 		let react_jsx_runtime = require("react/jsx-runtime");
+		let react = require("react");
 		let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
+		//#region ../shared/src/client/card.tsx
+		const IDLE_STATUS = {
+			kind: "idle",
+			text: ""
+		};
+		function CardChrome(props) {
+			const p = props.prefix;
+			const badge = props.statusBadge;
+			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.jsxs)("div", {
+						className: `${p}-sectionBody`,
+						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}-sectionFooter`,
+								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))]
+							})
+						]
+					})
+				]
+			});
+		}
+		/** 取值未到达时的占位：与 CardChrome 同形态，避免宿主页里闪一次卡片外壳。 */
+		function CardLoading(props) {
+			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
+				})
+			});
+		}
+		//#endregion
+		//#region ../shared/src/client/config-slots.ts
+		/** dsh-plus 聚合 bundle 的包名（各插件 row 均经其补丁层插入 profile）。 */
+		const DSH_PLUS_BUNDLE = "@dsh-plus/bundle-main";
+		/**
+		* 把一张配置卡片注册进插件页的两个配置槽位。
+		* 两个槽位都由 0.2.1-alpha.1 的插件页声明，任一缺席即报错——不做版本探测。
+		*/
+		function injectPluginConfigCard(slots, reg) {
+			const base = {
+				locale: reg.ns,
+				inject: reg.inject
+			};
+			slots.inject("plugins.row.config", () => slots.register({
+				name: "plugins.row.config",
+				key: `${DSH_PLUS_BUNDLE}#${reg.rowId}`,
+				...base
+			}, reg.component));
+			slots.inject("plugins.bundle.config", () => slots.register({
+				name: "plugins.bundle.config",
+				key: reg.pkg,
+				...base
+			}, 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();
+			if (!res.ok) throw new Error(body.error ?? `HTTP ${res.status}`);
+			if (guard !== void 0 && !guard(body)) throw new Error(`响应结构不符合预期（${res.url}）`);
+			return body;
+		}
+		/** GET 同源 JSON 端点。 */
+		async function getJson(route, guard) {
+			return parse(await fetch(route, { credentials: "same-origin" }), guard);
+		}
+		/** POST 同源 JSON 端点（body 可省略）。 */
+		async function postJson(route, body, guard) {
+			return parse(await fetch(route, {
+				method: "POST",
+				credentials: "same-origin",
+				headers: { "content-type": "application/json" },
+				...body === void 0 ? {} : { body: JSON.stringify(body) }
+			}), guard);
+		}
+		//#endregion
+		//#region ../shared/src/client/fields.tsx
+		function TextField(props) {
+			const p = props.prefix ?? "dshp";
+			const invalid = props.invalid === true;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `${p}-field`,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: `${p}-head`,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+							className: `${p}-label`,
+							htmlFor: props.id,
+							children: props.label
+						}), props.badge !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: `${p}-badge ${props.badge.set ? `${p}-badgeSet` : `${p}-badgeUnset`}`,
+							children: props.badge.text
+						}) : null]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						id: props.id,
+						className: `${p}-input${invalid ? ` ${p}-inputInvalid` : ""}`,
+						type: props.password === true ? "password" : "text",
+						inputMode: props.numeric === true ? "numeric" : void 0,
+						autoComplete: props.password === true ? "off" : void 0,
+						"aria-invalid": invalid || void 0,
+						value: props.value,
+						disabled: props.disabled === true,
+						onChange: (event) => props.onEdit(event.target.value)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: invalid ? `${p}-invalid` : `${p}-hint`,
+						children: invalid ? props.invalidLabel ?? "" : props.hint ?? ""
+					})
+				]
+			});
+		}
+		//#endregion
 		//#region ../../node_modules/.pnpm/lucide-react@1.38.0_react@18.2.0/node_modules/lucide-react/dist/esm/shared/src/utils/mergeClasses.mjs
 		/**
 		* @license lucide-react v1.38.0 - ISC
@@ -272,158 +438,6 @@ window.__ModuleLoader__.load({
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Layers, { ...lucideProps(props) });
 		}
 		//#endregion
-		//#region ../shared/src/client/card.tsx
-		const IDLE_STATUS = {
-			kind: "idle",
-			text: ""
-		};
-		function CardChrome(props) {
-			const p = props.prefix;
-			const badge = props.statusBadge;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-				className: `${p}-card${props.open ? ` ${p}-cardOpen` : ""}`,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-					type: "button",
-					className: `${p}-header`,
-					"aria-expanded": props.open,
-					"aria-label": props.title,
-					onClick: () => props.onToggle(!props.open),
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: `${p}-headText`,
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: `${p}-name`,
-								children: props.title
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: `${p}-description`,
-								children: props.description
-							})]
-						}),
-						badge !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: `${p}-statusBadge ${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,
-						/* @__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", {
-					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))]
-						})
-					]
-				}) : null]
-			});
-		}
-		//#endregion
-		//#region ../shared/src/client/config-slots.ts
-		/** dsh-plus 聚合 bundle 的包名（各插件 row 均经其补丁层插入 profile）。 */
-		const DSH_PLUS_BUNDLE = "@dsh-plus/bundle-main";
-		/**
-		* 把一张配置卡片同时注册进 legacy 与新版三个槽位。
-		* 任一槽位在当前 dsh 版本未声明时对应 inject 挂起等待，版本不命中即 no-op。
-		*/
-		function injectPluginConfigCard(slots, reg) {
-			const base = {
-				locale: reg.ns,
-				inject: reg.inject
-			};
-			slots.inject("settings.plugin.item", () => slots.register({
-				name: "settings.plugin.item",
-				key: reg.ns,
-				...base
-			}, reg.component));
-			slots.inject("plugins.row.config", () => slots.register({
-				name: "plugins.row.config",
-				key: `${DSH_PLUS_BUNDLE}#${reg.rowId}`,
-				...base
-			}, reg.component));
-			slots.inject("plugins.bundle.config", () => slots.register({
-				name: "plugins.bundle.config",
-				key: reg.pkg,
-				...base
-			}, reg.component));
-		}
-		//#endregion
-		//#region ../shared/src/client/fetch.ts
-		async function parse(res, guard) {
-			const body = await res.json();
-			if (!res.ok) throw new Error(body.error ?? `HTTP ${res.status}`);
-			if (guard !== void 0 && !guard(body)) throw new Error(`响应结构不符合预期（${res.url}）`);
-			return body;
-		}
-		/** GET 同源 JSON 端点。 */
-		async function getJson(route, guard) {
-			return parse(await fetch(route, { credentials: "same-origin" }), guard);
-		}
-		/** POST 同源 JSON 端点（body 可省略）。 */
-		async function postJson(route, body, guard) {
-			return parse(await fetch(route, {
-				method: "POST",
-				credentials: "same-origin",
-				headers: { "content-type": "application/json" },
-				...body === void 0 ? {} : { body: JSON.stringify(body) }
-			}), guard);
-		}
-		//#endregion
-		//#region ../shared/src/client/fields.tsx
-		function TextField(props) {
-			const p = props.prefix ?? "dshp";
-			const invalid = props.invalid === true;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: `${p}-field`,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: `${p}-head`,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-							className: `${p}-label`,
-							htmlFor: props.id,
-							children: props.label
-						}), props.badge !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: `${p}-badge ${props.badge.set ? `${p}-badgeSet` : `${p}-badgeUnset`}`,
-							children: props.badge.text
-						}) : null]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-						id: props.id,
-						className: `${p}-input${invalid ? ` ${p}-inputInvalid` : ""}`,
-						type: props.password === true ? "password" : "text",
-						inputMode: props.numeric === true ? "numeric" : void 0,
-						autoComplete: props.password === true ? "off" : void 0,
-						"aria-invalid": invalid || void 0,
-						value: props.value,
-						disabled: props.disabled === true,
-						onChange: (event) => props.onEdit(event.target.value)
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: invalid ? `${p}-invalid` : `${p}-hint`,
-						children: invalid ? props.invalidLabel ?? "" : props.hint ?? ""
-					})
-				]
-			});
-		}
-		//#endregion
 		//#region ../shared/src/client/scope.ts
 		/**
 		* remote.settings 直连实现的命名空间 scope（官方配置页 tab 同款模式）。
@@ -514,33 +528,33 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region ../shared/src/client/styles.ts
 		/**
-		* 配置卡片样式工厂（各插件 client 的公共收编版）。
-		* 视觉规则与迁移前逐字一致（类名前缀换为各插件自身，DOM 类名不变），
-		* 另补移动端与可达性增强（767px 断点 + pointer:coarse，对齐 ui-mobile-fit 约定）：
+		* 配置分节样式工厂（各插件 client 的公共收编版）。
+		*
+		* 目标宿主 dsh 0.2.1-alpha.1：插件页把配置视图放进已有页面级内边距的容器里
+		* （`div.detailSections[data-plugin-config]` 或 `section.detailSection[data-plugin-config]`），
+		* 外层无边框——故这里输出的是**无边框分节**（小节标题 13px/600、字段 12px 0、
+		* 横向零内边距、页脚非 sticky），度量对齐官方设置页
+		* （`@deepseek-ai/dsh-client-ui-primitives` 的 settings-form）。
+		*
+		* 移动端与可达性（767px 断点 + pointer:coarse，对齐 ui-mobile-fit 约定）：
 		* - 窄屏 input/textarea 16px（防 iOS 聚焦缩放）、可点目标 ≥44px；
-		* - footer 按钮等宽换行、状态文字独占一行；
-		* - 展开态 body 底部 sticky 保存栏（长表单滚动中始终可达）。
+		* - 页脚按钮等宽换行、状态文字独占一行。
 		* 沿用官方 data-plugin / data-plugin-css 约定（HMR 据此卸载），不覆盖上游选择器。
 		* @module @dsh-plus/shared/client/styles
 		*/
-		/** 生成全套卡片 CSS；prefix 为插件类名前缀（如 'dne'），extra 为插件特有规则。 */
+		/** 生成全套分节 CSS；prefix 为插件类名前缀（如 'dne'），extra 为插件特有规则。 */
 		function cardCss(prefix, extra = "") {
 			return `
-.${prefix}-card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;list-style:none;transition:border-color .16s,background .16s}
-.${prefix}-card:hover{border-color:var(--dsw-alias-label-dimmed)}
-.${prefix}-cardOpen{background:var(--dsw-alias-bg-layer-2);border-color:var(--dsw-alias-label-dimmed)}
-.${prefix}-header{appearance:none;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:12px;align-items:center;gap:12px;padding:14px 16px;display:flex}
-.${prefix}-header:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:-2px}
-.${prefix}-headText{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}
-.${prefix}-name{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:1.4}
-.${prefix}-description{color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:1.5}
-.${prefix}-chevron{color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s;display:inline-flex}
-.${prefix}-chevronOpen{transform:rotate(180deg)}
+.${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}-pending{white-space:nowrap;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);border-radius:999px;flex:none;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
-.${prefix}-statusBadge{white-space:nowrap;border-radius:999px;flex:none;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
 .${prefix}-statusOn{background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary)}
 .${prefix}-statusOff{color:var(--dsw-alias-label-tertiary)}
-.${prefix}-body{border-top:1px solid var(--dsw-alias-border-l2);margin:0 16px;padding-bottom:8px}
 .${prefix}-field{flex-direction:column;gap:6px;padding:12px 0;display:flex}
 .${prefix}-field+.${prefix}-field{border-top:1px solid var(--dsw-alias-border-l2)}
 .${prefix}-head{align-items:center;gap:8px;display:flex}
@@ -569,7 +583,6 @@ window.__ModuleLoader__.load({
 .${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}
-.${prefix}-footer{border-top:1px solid var(--dsw-alias-border-l2);justify-content:flex-end;align-items:center;gap:8px;padding:12px 0 4px;display:flex;flex-wrap:wrap}
 .${prefix}-status{min-width:0;color:var(--dsw-alias-label-secondary);flex:1;margin:0;font-size:12px;line-height:1.5}
 .${prefix}-statusError{color:var(--dsw-alias-label-error)}
 .${prefix}-btn{appearance:none;font:inherit;cursor:pointer;border:1px solid #0000;border-radius:8px;padding:5px 14px;font-size:13px;line-height:1.5}
@@ -579,14 +592,10 @@ window.__ModuleLoader__.load({
 .${prefix}-btn:disabled{opacity:.4;cursor:default}
 .${prefix}-btn:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}
 @media (max-width:767px){
-.${prefix}-body{margin:0 10px}
-.${prefix}-header{padding:12px 12px}
 .${prefix}-input,.${prefix}-select{font-size:16px;height:40px}
 .${prefix}-checkRow{min-height:44px;padding:8px 0}
-.${prefix}-footer{position:sticky;bottom:0;background:var(--dsw-alias-bg-layer-2);margin:0 -10px;padding:10px 10px 6px;border-top:1px solid var(--dsw-alias-border-l2);border-bottom-left-radius:12px;border-bottom-right-radius:12px}
 .${prefix}-status{flex-basis:100%;flex:none}
 .${prefix}-btn{min-height:44px;flex:1;min-width:96px}
-.${prefix}-statusBadge{display:none}
 }
 @media (pointer:coarse){
 .${prefix}-btn{min-height:44px}
@@ -617,13 +626,97 @@ ${extra}
 		* settings 命名空间字面量（纯常量，零依赖，浏览器半可安全引入）。
 		* 服务端直接以字面量注册（0.1.2-alpha.2 起 dsh-settings 对命名空间做编译期
 		* 语法校验，见 config.ts）；浏览器半把它作为配置卡片的注册键
-		* （legacy settings.plugin.item keyed 槽位按「卡片编辑的 settings 命名空间」
-		* 分发；0.1.6-alpha.2 起改挂插件页 row/bundle config，见 shared/config-slots），
+		* （插件页配置卡片挂在 row/bundle config 槽位上，与命名空间解耦，
+		* 见 shared/config-slots），
 		* 同一字面量两处共用，防止漂移。
 		* @module image-studio/ns
 		*/
 		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>。
@@ -935,103 +1028,10 @@ ${extra}
 				if (spec.value !== void 0) item.value = validateParamValue(key, spec.value);
 				out[key] = item;
 			}
-			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
-		*/
+			return out;
+		}
+		//#endregion
+		//#region src/client/draft.ts
 		/** 配置值 → 编辑草稿。 */
 		function draftOf(value) {
 			return {
@@ -1103,6 +1103,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,22 +1195,343 @@ ${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 两槽位 = 插件页 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());
 			const value = snapshot.value;
-			const [open, setOpen] = (0, react.useState)(props.view === "page");
 			const [draft, setDraft] = (0, react.useState)(null);
 			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 +1540,9 @@ ${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")
-				})
+			if (value === void 0 || draft === null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardLoading, {
+				prefix: "imsc",
+				text: t("common.loading")
 			});
 			const disabled = !snapshot.writable;
 			const onSave = () => {
@@ -1224,24 +1577,29 @@ ${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,
 				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 +1608,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
 					})
 				]
 			});
@@ -4001,10 +4080,8 @@ ${extra}
 .imsc-loading{padding:14px 16px;margin:0;font-size:13px;color:var(--dsw-alias-label-tertiary)}
 .imsc-groupTitle { margin: 14px 0 6px; font-size: 13px; font-weight: 600; }
 .imsc-presetBox {
-  border: 1px solid var(--dsw-alias-border-l3);
-  border-radius: 10px;
-  padding: 10px;
-  margin-bottom: 10px;
+  border-top: 1px solid var(--dsw-alias-border-l3);
+  padding: 10px 0 2px;
   display: grid;
   gap: 8px;
 }
@@ -4027,6 +4104,7 @@ ${extra}
 .imsc-credRow { display: flex; align-items: center; gap: 8px; }
 .imsc-credRow .imsc-input { flex: 1; min-width: 0; }
 
+
 /* ── 移动端（≤767px，与 ui-mobile-fit 同断点）── */
 @media (max-width: 767px) {
   .ims-modal {