@dsh-plus/image-studio 0.1.0 → 0.1.1

package/lib/client.js

@@ -4,121 +4,3630 @@ 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 _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
+		//#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
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const mergeClasses = (...classes) => classes.filter((className, index, array) => {
+			return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+		}).join(" ").trim();
+		//#endregion
+		//#region ../../node_modules/.pnpm/lucide-react@1.38.0_react@18.2.0/node_modules/lucide-react/dist/esm/shared/src/utils/toKebabCase.mjs
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+		//#endregion
+		//#region ../../node_modules/.pnpm/lucide-react@1.38.0_react@18.2.0/node_modules/lucide-react/dist/esm/shared/src/utils/toCamelCase.mjs
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const toCamelCase = (string) => string.replace(/^([A-Z])|[\s-_]+(\w)/g, (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase());
+		//#endregion
+		//#region ../../node_modules/.pnpm/lucide-react@1.38.0_react@18.2.0/node_modules/lucide-react/dist/esm/shared/src/utils/toPascalCase.mjs
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const toPascalCase = (string) => {
+			const camelCase = toCamelCase(string);
+			return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+		};
+		//#endregion
+		//#region ../../node_modules/.pnpm/lucide-react@1.38.0_react@18.2.0/node_modules/lucide-react/dist/esm/defaultAttributes.mjs
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		var defaultAttributes = {
+			xmlns: "http://www.w3.org/2000/svg",
+			width: 24,
+			height: 24,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 2,
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		};
+		//#endregion
+		//#region ../../node_modules/.pnpm/lucide-react@1.38.0_react@18.2.0/node_modules/lucide-react/dist/esm/shared/src/utils/hasA11yProp.mjs
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const hasA11yProp = (props) => {
+			for (const prop in props) if (prop.startsWith("aria-") || prop === "role" || prop === "title") return true;
+			return false;
+		};
+		//#endregion
+		//#region ../../node_modules/.pnpm/lucide-react@1.38.0_react@18.2.0/node_modules/lucide-react/dist/esm/context.mjs
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const LucideContext = (0, react.createContext)({});
+		const useLucideContext = () => (0, react.useContext)(LucideContext);
+		//#endregion
+		//#region ../../node_modules/.pnpm/lucide-react@1.38.0_react@18.2.0/node_modules/lucide-react/dist/esm/Icon.mjs
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const Icon = (0, react.forwardRef)(({ color, size, strokeWidth, absoluteStrokeWidth, className = "", children, iconNode, ...rest }, ref) => {
+			const { size: contextSize = 24, strokeWidth: contextStrokeWidth = 2, absoluteStrokeWidth: contextAbsoluteStrokeWidth = false, color: contextColor = "currentColor", className: contextClass = "" } = useLucideContext() ?? {};
+			const calculatedStrokeWidth = absoluteStrokeWidth ?? contextAbsoluteStrokeWidth ? Number(strokeWidth ?? contextStrokeWidth) * 24 / Number(size ?? contextSize) : strokeWidth ?? contextStrokeWidth;
+			return (0, react.createElement)("svg", {
+				ref,
+				...defaultAttributes,
+				width: size ?? contextSize ?? defaultAttributes.width,
+				height: size ?? contextSize ?? defaultAttributes.height,
+				stroke: color ?? contextColor,
+				strokeWidth: calculatedStrokeWidth,
+				className: mergeClasses("lucide", contextClass, className),
+				...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+				...rest
+			}, [...iconNode.map(([tag, attrs]) => (0, react.createElement)(tag, attrs)), ...Array.isArray(children) ? children : [children]]);
+		});
+		//#endregion
+		//#region ../../node_modules/.pnpm/lucide-react@1.38.0_react@18.2.0/node_modules/lucide-react/dist/esm/createLucideIcon.mjs
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const createLucideIcon = (iconName, iconNode) => {
+			const Component = (0, react.forwardRef)(({ className, ...props }, ref) => (0, react.createElement)(Icon, {
+				ref,
+				iconNode,
+				className: mergeClasses(`lucide-${toKebabCase(toPascalCase(iconName))}`, `lucide-${iconName}`, className),
+				...props
+			}));
+			Component.displayName = toPascalCase(iconName);
+			return Component;
+		};
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const Brush = createLucideIcon("brush", [
+			["path", {
+				d: "m11 10 3 3",
+				key: "fzmg1i"
+			}],
+			["path", {
+				d: "M6.5 21A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z",
+				key: "p4q2r7"
+			}],
+			["path", {
+				d: "M9.969 17.031 21.378 5.624a1 1 0 0 0-3.002-3.002L6.967 14.031",
+				key: "wy6l02"
+			}]
+		]);
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const Download = createLucideIcon("download", [
+			["path", {
+				d: "M12 15V3",
+				key: "m9g1x1"
+			}],
+			["path", {
+				d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4",
+				key: "ih7n3h"
+			}],
+			["path", {
+				d: "m7 10 5 5 5-5",
+				key: "brsn70"
+			}]
+		]);
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const Image = createLucideIcon("image", [
+			["rect", {
+				width: "18",
+				height: "18",
+				x: "3",
+				y: "3",
+				rx: "2",
+				ry: "2",
+				key: "1m3agn"
+			}],
+			["circle", {
+				cx: "9",
+				cy: "9",
+				r: "2",
+				key: "af1f0g"
+			}],
+			["path", {
+				d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21",
+				key: "1xmnt7"
+			}]
+		]);
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const Layers = createLucideIcon("layers", [
+			["path", {
+				d: "M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z",
+				key: "zw3jo"
+			}],
+			["path", {
+				d: "M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12",
+				key: "1wduqc"
+			}],
+			["path", {
+				d: "M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17",
+				key: "kqbvx6"
+			}]
+		]);
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
+		const Sparkles = createLucideIcon("sparkles", [
+			["path", {
+				d: "M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z",
+				key: "1s2grr"
+			}],
+			["path", {
+				d: "M20 2v4",
+				key: "1rf3ol"
+			}],
+			["path", {
+				d: "M22 4h-4",
+				key: "gwowj6"
+			}],
+			["circle", {
+				cx: "4",
+				cy: "20",
+				r: "2",
+				key: "6kqj1y"
+			}]
+		]);
+		//#endregion
+		//#region ../shared/src/client/icons.tsx
+		function lucideProps(props) {
+			return {
+				size: props.size ?? 14,
+				className: props.className,
+				"aria-hidden": true
+			};
+		}
+		/** 单图语义（图像工作室入口/画廊标签）。 */
+		function IconImage(props) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Image, { ...lucideProps(props) });
+		}
+		/** 文生图（灵感/生成）语义。 */
+		function IconSparkles(props) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Sparkles, { ...lucideProps(props) });
+		}
+		/** 图生图（画笔编辑）语义。 */
+		function IconBrush(props) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Brush, { ...lucideProps(props) });
+		}
+		/** 下载语义（画廊条目导出）。 */
+		function IconDownload(props) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Download, { ...lucideProps(props) });
+		}
+		/** 叠加/源图语义（二次编辑、源图选择）。 */
+		function IconLayers(props) {
+			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.IconChevronDownOutline14, { 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/fetch.ts
+		/**
+		* 同源自定义端点的最小 fetch 封装（各插件 client/api.ts 的公共收编版）。
+		* 仅同源（credentials: same-origin），错误统一抛 Error(body.error)。
+		* @module @dsh-plus/shared/client/fetch
+		*/
+		async function parse(res) {
+			const body = await res.json();
+			if (!res.ok) throw new Error(body.error ?? `HTTP ${res.status}`);
+			return body;
+		}
+		/** GET 同源 JSON 端点。 */
+		async function getJson(route) {
+			return parse(await fetch(route, { credentials: "same-origin" }));
+		}
+		/** POST 同源 JSON 端点（body 可省略）。 */
+		async function postJson(route, body) {
+			return parse(await fetch(route, {
+				method: "POST",
+				credentials: "same-origin",
+				headers: { "content-type": "application/json" },
+				body: body === void 0 ? void 0 : JSON.stringify(body)
+			}));
+		}
+		//#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 同款模式）。
+		* 读：describe 取命名空间视图（脱敏 value/revision + 顶层 writable）；
+		* 刷新：remote `settings/document-updated`（按命名空间过滤）与
+		* `connection/reset`；generation 防旧读覆盖新发布。任何页面 origin
+		* （loopback 或 tailnet 信任域名）下行为一致。
+		* effect 归属调用方 fiber（label 需含插件名以便诊断）。
+		*/
+		function createSettingsScope(c, ns, label) {
+			const remote = c.get("remote");
+			let state = {
+				status: "loading",
+				value: void 0,
+				revision: void 0,
+				writable: false
+			};
+			const listeners = /* @__PURE__ */ new Set();
+			let generation = 0;
+			const publish = (next) => {
+				state = next;
+				for (const listener of [...listeners]) listener();
+			};
+			const load = async () => {
+				const gen = ++generation;
+				let view;
+				try {
+					const response = await remote.settings.describe();
+					if (!response.ok) return;
+					view = response.value;
+				} catch {
+					return;
+				}
+				if (gen !== generation) return;
+				const namespace = view.namespaces.find((candidate) => candidate.ns === ns);
+				if (namespace === void 0) {
+					publish({
+						status: "unavailable",
+						value: void 0,
+						revision: void 0,
+						writable: view.writable
+					});
+					return;
+				}
+				publish({
+					status: "ready",
+					value: namespace.value,
+					revision: namespace.revision,
+					writable: view.writable
+				});
+			};
+			const refresh = (namespace) => {
+				if (namespace !== void 0 && namespace !== ns) return;
+				load();
+			};
+			const disposers = [remote.$on("settings/document-updated", refresh), c.on("connection/reset", () => {
+				load();
+			})];
+			c.effect(() => () => {
+				for (const dispose of disposers) dispose();
+			}, label);
+			load();
+			return {
+				getSnapshot: () => state,
+				subscribe: (listener) => {
+					listeners.add(listener);
+					return () => {
+						listeners.delete(listener);
+					};
+				},
+				load
+			};
+		}
+		/** 以 remote.settings 构造命名空间绑定的 api 面。 */
+		function createNamespaceApi(remote, ns) {
+			return {
+				update: async (patch, expectedRevision) => {
+					const response = await remote.update(ns, patch, expectedRevision);
+					if (!response.ok) throw new Error(response.error.message ?? "settings update failed");
+				},
+				describe: async () => {
+					const response = await remote.describe();
+					if (!response.ok) throw new Error(response.error.message ?? "settings describe failed");
+					return response.value;
+				}
+			};
+		}
+		//#endregion
+		//#region ../shared/src/client/styles.ts
+		/**
+		* 配置卡片样式工厂（各插件 client 的公共收编版）。
+		* 视觉规则与迁移前逐字一致（类名前缀换为各插件自身，DOM 类名不变），
+		* 另补移动端与可达性增强（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 为插件特有规则。 */
+		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}-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}
+.${prefix}-label{min-width:0;color:var(--dsw-alias-label-primary);flex:1;font-size:13px;font-weight:500;line-height:1.5}
+.${prefix}-badge{white-space:nowrap;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
+.${prefix}-badgeSet{background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary)}
+.${prefix}-badgeUnset{color:var(--dsw-alias-label-tertiary)}
+.${prefix}-input{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);height:34px;font:inherit;color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 12px;font-size:13px;transition:border-color .18s,background .18s}
+.${prefix}-input:hover:not(:disabled):not(:focus-visible){border-color:var(--dsw-alias-label-dimmed)}
+.${prefix}-input:focus-visible{border-color:var(--dsw-alias-brand-primary);outline:none}
+.${prefix}-input:disabled{color:var(--dsw-alias-label-tertiary);cursor:default}
+.${prefix}-inputInvalid{border-color:var(--dsw-alias-label-error)}
+.${prefix}-select{appearance:none;background:var(--dsw-alias-bg-module-platform);border:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--dsw-alias-label-secondary) 50%),linear-gradient(135deg,var(--dsw-alias-label-secondary) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;color:var(--dsw-alias-label-primary);font:inherit;font-size:13px;height:34px;box-sizing:border-box;border-radius:8px;padding:0 30px 0 12px;transition:background-color .18s}
+.${prefix}-select:hover:not(:disabled){background-color:var(--dsw-alias-interactive-bg-hover)}
+.${prefix}-hint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:1.5}
+.${prefix}-invalid{color:var(--dsw-alias-label-error);margin:0;font-size:12px;line-height:1.5}
+.${prefix}-checkRow{align-items:center;gap:10px;display:flex;padding:6px 0}
+.${prefix}-checkRow label{color:var(--dsw-alias-label-primary);font-size:13px;line-height:1.5;cursor:pointer;flex:1;min-width:0}
+/* 自绘圆角扁平开关（官方 UI 无可见原生 checkbox，选择类全走胶囊/菜单） */
+.${prefix}-checkRow input{appearance:none;-webkit-appearance:none;position:relative;box-sizing:border-box;background:var(--dsw-alias-bg-module-platform);border:none;border-radius:999px;width:34px;height:20px;flex:none;cursor:pointer;transition:background .18s;margin:0}
+.${prefix}-checkRow input::after{content:"";position:absolute;top:2px;left:2px;background:var(--dsw-alias-label-primary);border-radius:999px;width:16px;height:16px;transition:left .18s cubic-bezier(.4,0,.2,1)}
+.${prefix}-checkRow input:checked{background:var(--dsw-alias-brand-primary)}
+.${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}
+.${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}
+.${prefix}-btnGhost{border-color:var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary);background:0 0}
+.${prefix}-btnGhost:hover:not(:disabled){color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-label-dimmed)}
+.${prefix}-btnPrimary{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3)}
+.${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}
+.${prefix}-checkRow{min-height:44px}
+.${prefix}-input,.${prefix}-select{height:40px}
+}
+${extra}
+`;
+		}
+		/**
+		* 幂等注入样式标签（官方 data-plugin-css 约定）；返回新标签，
+		* 已存在或环境无 document 时返回 null（调用方 effect 卸载用）。
+		*/
+		function injectCardStyle(pluginId, css) {
+			if (typeof document === "undefined") return null;
+			const tagId = `${pluginId}/card.css`;
+			if (document.querySelector(`style[data-plugin-css=${JSON.stringify(tagId)}]`) !== null) return null;
+			const tag = document.createElement("style");
+			tag.dataset.plugin = pluginId;
+			tag.dataset.pluginCss = tagId;
+			tag.textContent = css;
+			document.head.appendChild(tag);
+			return tag;
+		}
+		//#endregion
+		//#region src/ns.ts
+		/**
+		* settings 命名空间字面量（纯常量，零依赖，浏览器半可安全引入）。
+		* 服务端直接以字面量注册（settings 编译期校验命名空间语法，见 config.ts），
+		* 浏览器半将其作为 settings.plugin.item keyed 槽位的 key（配置卡片）。
+		* @module image-studio/ns
+		*/
+		const SETTINGS_NS = "dsh-plus-image-studio";
+		//#endregion
+		//#region src/credentials.ts
+		/**
+		* 凭据引用名派生与校验：提供商预设 id → IMAGE_STUDIO_PRESET_<ID>。
+		* 规则对齐《插件存储规范》：大写下划线、全大写、前缀属主。
+		* 纯函数，零依赖。
+		* @module image-studio/credentials
+		*/
+		/** 引用名前缀（属主段）。 */
+		const REF_PREFIX = "IMAGE_STUDIO_PRESET_";
+		/** 预设 id 是否合法（kebab-case，用于引用名派生）。 */
+		function isValidPresetId(id) {
+			return /^[a-z][a-z0-9-]*$/.test(id) && id.length <= 64;
+		}
+		/** 预设 id → 凭据引用名（kebab → SNAKE 大写）。 */
+		function credentialRefNameOf(presetId) {
+			if (!isValidPresetId(presetId)) throw new Error(`非法提供商预设 id：${JSON.stringify(presetId)}`);
+			return `${REF_PREFIX}${presetId.replaceAll("-", "_").toUpperCase()}`;
+		}
+		/** 只读目录（冻结防运行期篡改）。 */
+		const PARAM_CATALOG = Object.freeze([
+			{
+				key: "model",
+				kind: "string",
+				applies: ["generation", "edit"],
+				generation: "all",
+				advanced: false,
+				description: "图像模型 id；请求基础来自提供商预设，此处仅作展示与 inline 覆盖"
+			},
+			{
+				key: "n",
+				kind: "integer",
+				min: 1,
+				max: 10,
+				applies: ["generation", "edit"],
+				generation: "current",
+				advanced: false,
+				description: "生成张数（1-10；部分中转仅支持 1）"
+			},
+			{
+				key: "size",
+				kind: "string",
+				applies: ["generation", "edit"],
+				generation: "current",
+				advanced: false,
+				description: "尺寸，如 1024x1024 / 1536x1024 / 1024x1536 / auto；宽高需为 16 的倍数、最大边 ≤3840、比例 ≤3:1（依模型限制）"
+			},
+			{
+				key: "quality",
+				kind: "enum",
+				values: [
+					"auto",
+					"low",
+					"medium",
+					"high"
+				],
+				applies: ["generation", "edit"],
+				generation: "current",
+				advanced: false,
+				description: "质量档位"
+			},
+			{
+				key: "background",
+				kind: "enum",
+				values: [
+					"auto",
+					"transparent",
+					"opaque"
+				],
+				applies: ["generation", "edit"],
+				generation: "current",
+				advanced: false,
+				description: "输出背景透明行为（对提示词里的场景背景无影响）"
+			},
+			{
+				key: "output_format",
+				kind: "enum",
+				values: [
+					"png",
+					"jpeg",
+					"webp"
+				],
+				applies: ["generation", "edit"],
+				generation: "current",
+				advanced: false,
+				description: "输出格式（部分中转不支持 webp）"
+			},
+			{
+				key: "output_compression",
+				kind: "integer",
+				min: 0,
+				max: 100,
+				applies: ["generation", "edit"],
+				generation: "current",
+				advanced: true,
+				description: "压缩率 0-100，仅 jpeg/webp 有效"
+			},
+			{
+				key: "moderation",
+				kind: "enum",
+				values: ["auto", "low"],
+				applies: ["generation", "edit"],
+				generation: "current",
+				advanced: true,
+				description: "内容审核严格度"
+			},
+			{
+				key: "response_format",
+				kind: "enum",
+				values: ["url", "b64_json"],
+				applies: ["generation", "edit"],
+				generation: "all",
+				advanced: false,
+				description: "返回形式；插件两种都会落盘本地化，画廊不受外链过期影响"
+			},
+			{
+				key: "stream",
+				kind: "boolean",
+				applies: ["generation", "edit"],
+				generation: "current",
+				advanced: true,
+				description: "流式返回（多数中转不支持，默认关闭）"
+			},
+			{
+				key: "partial_images",
+				kind: "integer",
+				min: 0,
+				max: 3,
+				applies: ["generation", "edit"],
+				generation: "current",
+				advanced: true,
+				description: "流式中间图数量（依赖 stream，默认关闭）"
+			},
+			{
+				key: "user",
+				kind: "string",
+				applies: ["generation", "edit"],
+				generation: "all",
+				advanced: true,
+				description: "终端用户标识（业务归因用）"
+			},
+			{
+				key: "input_fidelity",
+				kind: "enum",
+				values: ["low", "high"],
+				applies: ["edit"],
+				generation: "current",
+				advanced: false,
+				description: "图生图输入保真度（high 更保留原图细节，token 消耗增大）"
+			},
+			{
+				key: "style",
+				kind: "enum",
+				values: ["vivid", "natural"],
+				applies: ["generation"],
+				generation: "dall-e-3",
+				advanced: true,
+				description: "dall-e-3 代际风格参数（GPT Image 不需要）"
+			}
+		].map((entry) => Object.freeze(entry)));
+		/** 按字段名查目录条目。 */
+		function paramEntryOf(key) {
+			return PARAM_CATALOG.find((entry) => entry.key === key) ?? null;
+		}
+		/** 官方 API 对指定参数是否本就不发送（由请求基础或输入承载）。 */
+		function isHostParam(key) {
+			return key === "model";
+		}
+		//#endregion
+		//#region src/params/spec.ts
+		/** 归一化失败原因（边界校验用，端点转 invalid-request）。 */
+		var ParamValidationError = class extends Error {
+			key;
+			constructor(key, message) {
+				super(`参数 ${key} ${message}`);
+				this.name = "ParamValidationError";
+				this.key = key;
+			}
+		};
+		/** 校验单个值符合目录条目约束；返回规范值。 */
+		function validateParamValue(key, value) {
+			const entry = paramEntryOf(key);
+			if (entry === null) throw new ParamValidationError(key, "不在参数目录中");
+			switch (entry.kind) {
+				case "string":
+					if (typeof value !== "string" || value.length === 0) throw new ParamValidationError(key, "必须是非空字符串");
+					return value;
+				case "enum":
+					if (typeof value !== "string" || !entry.values?.includes(value)) throw new ParamValidationError(key, `必须是 ${entry.values?.join(" | ") ?? "枚举值"} 之一`);
+					return value;
+				case "integer":
+					if (typeof value !== "number" || !Number.isInteger(value)) throw new ParamValidationError(key, "必须是整数");
+					if (entry.min !== void 0 && value < entry.min) throw new ParamValidationError(key, `不能小于 ${entry.min}`);
+					if (entry.max !== void 0 && value > entry.max) throw new ParamValidationError(key, `不能大于 ${entry.max}`);
+					return value;
+				case "boolean":
+					if (typeof value !== "boolean") throw new ParamValidationError(key, "必须是布尔值");
+					return value;
+			}
+		}
+		/** 校验预设里的参数表（结构合法但可跨端点；应用时再按端点归一化）。 */
+		function validateParamSpecs(specs) {
+			if (specs === null || typeof specs !== "object" || Array.isArray(specs)) throw new ParamValidationError("(整体)", "必须是对象");
+			const out = {};
+			for (const [key, raw] of Object.entries(specs)) {
+				if (raw === null || typeof raw !== "object") throw new ParamValidationError(key, "条目必须是 { enabled, value? }");
+				const spec = raw;
+				if (typeof spec.enabled !== "boolean") throw new ParamValidationError(key, "enabled 必须是布尔值");
+				if (paramEntryOf(key) === null) throw new ParamValidationError(key, "不在参数目录中");
+				const item = { enabled: spec.enabled };
+				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`);
+		}
+		/** 画廊列表。 */
+		function fetchGallery() {
+			return getJson(`${BASE}/gallery`);
+		}
+		/** 删除画廊条目。 */
+		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}`;
+		}
+		/** 凭据状态（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
 		/**
-		* 配置卡片占位组件：本次交付为空壳（不做前端设计与编码）。
-		* 后续版本在此渲染三组预设编辑与凭据管理；keyed 槽位契约已声明。
+		* 配置卡片（settings.plugin.item，key = settings 命名空间）：
+		* 三组预设（提供商/参数/提示词）+ 高级项（并发/超时/代理/画廊上限）的
+		* staged draft 编辑；提供商预设逐条附 API Key 管理（凭据端点，值不回显）。
+		* JSON 字段（extraHeaders/paramSpecs）以文本镜像编辑，保存时解析 +
+		* validateParamSpecs 本地校验，非法即拦在保存前。
 		* @module image-studio/client/card
 		*/
-		/** 占位组件。 */
-		function StudioConfigCard(props) {
-			const t = props.t ?? ((key) => key);
-			const el = document.createElement("div");
-			el.className = "dsh-plus-image-studio-card-placeholder";
-			el.textContent = t("cardPlaceholder");
+		/** 配置值 → 编辑草稿。 */
+		function draftOf(value) {
+			return {
+				providers: value.providerPresets.map((p) => ({
+					id: p.id,
+					name: p.name,
+					protocol: p.protocol,
+					baseUrl: p.baseUrl,
+					model: p.model,
+					extraHeadersText: JSON.stringify(p.extraHeaders ?? {}, null, 2)
+				})),
+				params: value.paramPresets.map((p) => ({
+					id: p.id,
+					name: p.name,
+					endpoint: p.endpoint,
+					specsText: JSON.stringify(p.paramSpecs ?? {}, null, 2)
+				})),
+				prompts: value.promptPresets.map((p) => ({
+					id: p.id,
+					name: p.name,
+					text: p.text
+				})),
+				maxConcurrent: String(value.maxConcurrent),
+				requestTimeoutMs: String(value.requestTimeoutMs),
+				proxy: value.proxy,
+				galleryMaxItems: String(value.galleryMaxItems)
+			};
+		}
+		function parseJson(text, label) {
+			try {
+				return JSON.parse(text);
+			} catch (error) {
+				throw new Error(`${label} ${error instanceof Error ? error.message : String(error)}`);
+			}
+		}
+		/** 草稿 → settings 载荷（边界校验：JSON 解析、参数表校验、预设 id 形态）。 */
+		function payloadOf(draft) {
+			const providers = draft.providers.map((p) => {
+				if (!isValidPresetId(p.id)) throw new Error(p.id);
+				return {
+					id: p.id,
+					name: p.name,
+					protocol: p.protocol,
+					baseUrl: p.baseUrl,
+					model: p.model,
+					credentialRef: credentialRefNameOf(p.id),
+					extraHeaders: parseJson(p.extraHeadersText, p.id)
+				};
+			});
+			const params = draft.params.map((p) => ({
+				id: p.id,
+				name: p.name,
+				endpoint: p.endpoint,
+				paramSpecs: validateParamSpecs(parseJson(p.specsText, p.id))
+			}));
 			return {
-				type: el,
-				props: {}
+				promptPresets: draft.prompts.map((p) => ({
+					id: p.id,
+					name: p.name,
+					text: p.text
+				})),
+				paramPresets: params,
+				providerPresets: providers,
+				maxConcurrent: Math.max(0, Math.floor(Number(draft.maxConcurrent) || 0)),
+				requestTimeoutMs: Math.max(1e4, Math.floor(Number(draft.requestTimeoutMs) || 3e5)),
+				proxy: draft.proxy,
+				galleryMaxItems: Math.max(0, Math.floor(Number(draft.galleryMaxItems) || 0))
 			};
 		}
+		/** 单个提供商预设的 API Key 行（describe 徽标 + 设置/删除，值不回显）。 */
+		function CredentialRow(props) {
+			const { t, presetId, disabled } = props;
+			const [configured, setConfigured] = (0, react.useState)(null);
+			const [value, setValue] = (0, react.useState)("");
+			const [busy, setBusy] = (0, react.useState)(false);
+			(0, react.useEffect)(() => {
+				if (!isValidPresetId(presetId)) return;
+				let alive = true;
+				fetchCredentialStatus(presetId).then((res) => {
+					if (alive) setConfigured(res.configured);
+				}).catch(() => {});
+				return () => {
+					alive = false;
+				};
+			}, [presetId]);
+			const act = (fn) => {
+				setBusy(true);
+				fn().then(() => fetchCredentialStatus(presetId)).then((res) => {
+					setConfigured(res.configured);
+					setValue("");
+				}).catch(() => {}).finally(() => setBusy(false));
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "imsc-credRow",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						className: "imsc-input",
+						type: "password",
+						autoComplete: "off",
+						placeholder: t("card.credential.placeholder"),
+						"aria-label": t("card.credential.label"),
+						value,
+						disabled: disabled || busy,
+						onChange: (event) => setValue(event.target.value)
+					}),
+					configured !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: `imsc-badge ${configured ? "imsc-badgeSet" : "imsc-badgeUnset"}`,
+						children: t(configured ? "card.credential.configured" : "card.credential.unconfigured")
+					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "imsc-btn imsc-btnGhost",
+						disabled: disabled || busy || value === "" || !isValidPresetId(presetId),
+						onClick: () => act(() => setCredential(presetId, value)),
+						children: t("card.credential.set")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "imsc-btn imsc-btnGhost",
+						disabled: disabled || busy || configured !== true || !isValidPresetId(presetId),
+						onClick: () => act(() => unsetCredential(presetId)),
+						children: t("card.credential.unset")
+					})
+				]
+			});
+		}
+		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)(false);
+			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(() => {});
+			}, []);
+			(0, react.useEffect)(() => {
+				if (value === void 0 || draft !== null) return;
+				const initial = draftOf(value);
+				setDraft(initial);
+				setBaseline(JSON.stringify(initial));
+			}, [value, draft]);
+			const dirty = (0, react.useMemo)(() => draft !== null && JSON.stringify(draft) !== baseline, [draft, baseline]);
+			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 disabled = !snapshot.writable;
+			const onSave = () => {
+				let payload;
+				try {
+					payload = payloadOf(draft);
+				} catch (error) {
+					setStatus({
+						kind: "error",
+						text: `${t("card.specsInvalid")}${error instanceof Error ? error.message : String(error)}`
+					});
+					return;
+				}
+				setSaving(true);
+				api.update(payload, snapshot.revision).then(() => scope.load()).then(() => {
+					setBaseline(JSON.stringify(draft));
+					setStatus({
+						kind: "ok",
+						text: t("card.saved")
+					});
+				}).catch((error) => {
+					setStatus({
+						kind: "error",
+						text: `${t("card.saveFailed")}${error instanceof Error ? error.message : String(error)}`
+					});
+				}).finally(() => setSaving(false));
+			};
+			const patch = (next) => {
+				setDraft({
+					...draft,
+					...next
+				});
+				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) });
+			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
+				},
+				dirty,
+				dirtyLabel: t("common.unsaved"),
+				readOnlyNotice: disabled ? t("card.readOnly") : void 0,
+				status,
+				actions: [{
+					key: "discard",
+					label: t("card.discard"),
+					disabled: !dirty || saving,
+					onClick: () => {
+						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
+				}],
+				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 })
+						})]
+					})
+				]
+			});
+		}
 		//#endregion
 		//#region src/client/i18n.ts
 		/**
-		* i18n 字典（zh 为主，en 兜底）；NS 与 settings 命名空间分离，
-		* 仅承载前端文案 key。本次只含占位文案。
+		* i18n 字典（zh 为键域事实源，en 全量对译）；NS 与 settings 命名空间分离，
+		* 仅承载前端文案 key。面板 / 入口 / 配置卡片共用同一命名空间。
 		* @module image-studio/client/i18n
 		*/
 		/** locale 命名空间。 */
 		const NS = "dsh-plus-image-studio";
 		const zh = {
-			nav: "图像工作室",
-			placeholder: "生图工作台与画廊将在后续版本提供",
-			cardPlaceholder: "图像工作室配置（预设/凭据管理将在后续版本提供）"
+			"entry.label": "图像",
+			"panel.title": "图像工作室",
+			"tab.generation": "文生图",
+			"tab.edit": "图生图",
+			"tab.gallery": "画廊",
+			"common.close": "关闭",
+			"common.cancel": "取消",
+			"common.save": "保存",
+			"common.saving": "保存中…",
+			"common.retry": "重试",
+			"common.loading": "加载中…",
+			"common.loadFailed": "加载失败",
+			"common.delete": "删除",
+			"common.confirmDelete": "确认删除",
+			"common.refresh": "刷新",
+			"common.download": "下载",
+			"common.unsaved": "未保存",
+			"provider.label": "提供商",
+			"provider.placeholder": "选择提供商预设…",
+			"provider.empty": "暂无提供商预设：请到 设置 → 插件 → 图像工作室 添加",
+			"provider.credential.configured": "Key 已配置",
+			"provider.credential.missing": "Key 未配置",
+			"provider.inline.toggle": "临时覆盖协议/地址/模型",
+			"provider.inline.protocol": "协议",
+			"provider.inline.baseUrl": "API 地址",
+			"provider.inline.model": "模型",
+			"provider.inline.hint": "覆盖时凭据沿用所选预设的 API Key",
+			"prompt.label": "提示词",
+			"prompt.placeholder": "描述想要生成的画面…",
+			"prompt.preset.insert": "插入提示词预设…",
+			"prompt.preset.save": "存为预设",
+			"prompt.preset.name": "预设名称",
+			"prompt.preset.saved": "已保存提示词预设",
+			"params.basic": "常用参数",
+			"params.advanced": "高级参数",
+			"params.preset.placeholder": "应用参数预设…",
+			"params.preset.save": "存为预设",
+			"params.preset.saved": "已保存参数预设",
+			"params.enabled": "启用",
+			"sources.label": "源图",
+			"sources.pick": "选择源图",
+			"sources.count": "已选 {n}/16 张",
+			"sources.mask": "遮罩（可选）",
+			"sources.maskPick": "选择遮罩",
+			"sources.maskClear": "清除",
+			"picker.empty": "画廊暂无图片",
+			"picker.confirm": "使用所选（{n}）",
+			"generate.submit": "生成",
+			"generate.submitted": "已提交任务 {id}，进度见下方任务条",
+			"generate.failed": "提交失败：",
+			"generate.needProvider": "请先选择提供商预设",
+			"generate.needPrompt": "请填写提示词",
+			"generate.needSources": "请先选择至少一张源图",
+			"tasks.title": "任务",
+			"tasks.state.queued": "排队中",
+			"tasks.state.running": "生成中",
+			"tasks.state.succeeded": "已完成",
+			"tasks.state.failed": "失败",
+			"tasks.state.cancelled": "已取消",
+			"tasks.view": "查看",
+			"gallery.empty": "画廊为空，去文生图生成第一张吧",
+			"gallery.total": "共 {n} 条",
+			"gallery.detail.prompt": "提示词",
+			"gallery.detail.revised": "改写提示词",
+			"gallery.detail.params": "请求参数",
+			"gallery.detail.model": "模型",
+			"gallery.detail.endpoint": "端点",
+			"gallery.detail.time": "时间",
+			"gallery.detail.sources": "源图",
+			"gallery.edit": "二次编辑",
+			"card.title": "图像工作室",
+			"card.description": "文生图/图生图：提供商与 API Key、参数/提示词预设",
+			"card.providers": "提供商预设",
+			"card.prompts": "提示词预设",
+			"card.params": "参数预设",
+			"card.advanced": "高级设置",
+			"card.add": "添加",
+			"card.field.id": "ID",
+			"card.field.name": "名称",
+			"card.field.protocol": "协议",
+			"card.field.baseUrl": "API 地址",
+			"card.field.model": "模型",
+			"card.field.extraHeaders": "附加请求头（JSON）",
+			"card.field.text": "提示词模板",
+			"card.field.endpoint": "适用端点",
+			"card.field.paramSpecs": "参数表（JSON：{ \"size\": { \"enabled\": true, \"value\": \"1024x1024\" } }）",
+			"card.idHint": "小写字母开头，仅小写字母/数字/中划线（凭据引用名派生用）",
+			"card.credential.label": "API Key",
+			"card.credential.placeholder": "输入 Key（保存后不回显）",
+			"card.credential.set": "保存 Key",
+			"card.credential.unset": "删除 Key",
+			"card.credential.configured": "已配置",
+			"card.credential.unconfigured": "未配置",
+			"card.maxConcurrent": "生图并发上限（0 = 不限）",
+			"card.requestTimeoutMs": "单请求超时（毫秒）",
+			"card.proxy": "上游代理（空 = 直连）",
+			"card.galleryMaxItems": "画廊保留上限（0 = 不清理）",
+			"card.specsInvalid": "参数表非法：",
+			"card.idInvalid": "ID 非法：",
+			"card.save": "保存",
+			"card.discard": "放弃修改",
+			"card.saved": "已保存",
+			"card.saveFailed": "保存失败：",
+			"card.readOnly": "当前部署的设置文档为只读",
+			"card.badgeOn": "{n} 个提供商",
+			"card.badgeOff": "未配置"
 		};
 		const en = {
-			nav: "Image Studio",
-			placeholder: "Image workspace and gallery arrive in a later release",
-			cardPlaceholder: "Image Studio settings (preset/credential management arrives later)"
+			"entry.label": "Image",
+			"panel.title": "Image Studio",
+			"tab.generation": "Text to Image",
+			"tab.edit": "Image to Image",
+			"tab.gallery": "Gallery",
+			"common.close": "Close",
+			"common.cancel": "Cancel",
+			"common.save": "Save",
+			"common.saving": "Saving…",
+			"common.retry": "Retry",
+			"common.loading": "Loading…",
+			"common.loadFailed": "Load failed",
+			"common.delete": "Delete",
+			"common.confirmDelete": "Confirm delete",
+			"common.refresh": "Refresh",
+			"common.download": "Download",
+			"common.unsaved": "Unsaved",
+			"provider.label": "Provider",
+			"provider.placeholder": "Select a provider preset…",
+			"provider.empty": "No provider presets: add one in Settings → Plugins → Image Studio",
+			"provider.credential.configured": "Key configured",
+			"provider.credential.missing": "Key missing",
+			"provider.inline.toggle": "Override protocol/URL/model",
+			"provider.inline.protocol": "Protocol",
+			"provider.inline.baseUrl": "API base URL",
+			"provider.inline.model": "Model",
+			"provider.inline.hint": "Overrides reuse the API key of the selected preset",
+			"prompt.label": "Prompt",
+			"prompt.placeholder": "Describe the image you want…",
+			"prompt.preset.insert": "Insert prompt preset…",
+			"prompt.preset.save": "Save as preset",
+			"prompt.preset.name": "Preset name",
+			"prompt.preset.saved": "Prompt preset saved",
+			"params.basic": "Common parameters",
+			"params.advanced": "Advanced parameters",
+			"params.preset.placeholder": "Apply a parameter preset…",
+			"params.preset.save": "Save as preset",
+			"params.preset.saved": "Parameter preset saved",
+			"params.enabled": "Enabled",
+			"sources.label": "Source images",
+			"sources.pick": "Pick sources",
+			"sources.count": "{n}/16 selected",
+			"sources.mask": "Mask (optional)",
+			"sources.maskPick": "Pick mask",
+			"sources.maskClear": "Clear",
+			"picker.empty": "No images in the gallery yet",
+			"picker.confirm": "Use selected ({n})",
+			"generate.submit": "Generate",
+			"generate.submitted": "Task {id} submitted; progress in the task bar below",
+			"generate.failed": "Submit failed: ",
+			"generate.needProvider": "Select a provider preset first",
+			"generate.needPrompt": "Enter a prompt first",
+			"generate.needSources": "Pick at least one source image",
+			"tasks.title": "Tasks",
+			"tasks.state.queued": "Queued",
+			"tasks.state.running": "Running",
+			"tasks.state.succeeded": "Done",
+			"tasks.state.failed": "Failed",
+			"tasks.state.cancelled": "Cancelled",
+			"tasks.view": "View",
+			"gallery.empty": "Gallery is empty — generate your first image",
+			"gallery.total": "{n} items",
+			"gallery.detail.prompt": "Prompt",
+			"gallery.detail.revised": "Revised prompt",
+			"gallery.detail.params": "Request parameters",
+			"gallery.detail.model": "Model",
+			"gallery.detail.endpoint": "Endpoint",
+			"gallery.detail.time": "Time",
+			"gallery.detail.sources": "Sources",
+			"gallery.edit": "Edit again",
+			"card.title": "Image Studio",
+			"card.description": "Text/Image-to-image: providers & API keys, param/prompt presets",
+			"card.providers": "Provider presets",
+			"card.prompts": "Prompt presets",
+			"card.params": "Parameter presets",
+			"card.advanced": "Advanced",
+			"card.add": "Add",
+			"card.field.id": "ID",
+			"card.field.name": "Name",
+			"card.field.protocol": "Protocol",
+			"card.field.baseUrl": "API base URL",
+			"card.field.model": "Model",
+			"card.field.extraHeaders": "Extra headers (JSON)",
+			"card.field.text": "Prompt template",
+			"card.field.endpoint": "Endpoint",
+			"card.field.paramSpecs": "Param specs (JSON: { \"size\": { \"enabled\": true, \"value\": \"1024x1024\" } })",
+			"card.idHint": "Lowercase letter first; lowercase/digits/dashes only (derives credential ref)",
+			"card.credential.label": "API Key",
+			"card.credential.placeholder": "Enter key (never echoed back)",
+			"card.credential.set": "Save key",
+			"card.credential.unset": "Remove key",
+			"card.credential.configured": "Configured",
+			"card.credential.unconfigured": "Not configured",
+			"card.maxConcurrent": "Max concurrent tasks (0 = unlimited)",
+			"card.requestTimeoutMs": "Request timeout (ms)",
+			"card.proxy": "Upstream proxy (empty = direct)",
+			"card.galleryMaxItems": "Gallery retention (0 = keep all)",
+			"card.specsInvalid": "Invalid param specs: ",
+			"card.idInvalid": "Invalid ID: ",
+			"card.save": "Save",
+			"card.discard": "Discard",
+			"card.saved": "Saved",
+			"card.saveFailed": "Save failed: ",
+			"card.readOnly": "Settings document is read-only in this deployment",
+			"card.badgeOn": "{n} providers",
+			"card.badgeOff": "Not configured"
 		};
 		//#endregion
-		//#region src/client/section.tsx
+		//#region src/client/panel/controller.ts
+		/** 创建一个模块级控制器（apply 内调用一次，inject 给两个 slot 入口）。 */
+		function createPanelController() {
+			let state = {
+				open: false,
+				tab: "generation",
+				editSeed: null
+			};
+			let nonce = 0;
+			const listeners = /* @__PURE__ */ new Set();
+			const publish = () => {
+				for (const listener of [...listeners]) listener();
+			};
+			const set = (next) => {
+				state = next;
+				publish();
+			};
+			return {
+				subscribe: (listener) => {
+					listeners.add(listener);
+					return () => listeners.delete(listener);
+				},
+				getSnapshot: () => state,
+				setOpen: (open) => {
+					if (state.open === open) return;
+					set({
+						...state,
+						open
+					});
+				},
+				toggle: () => set({
+					...state,
+					open: !state.open
+				}),
+				setTab: (tab) => {
+					if (state.tab === tab) return;
+					set({
+						...state,
+						tab
+					});
+				},
+				seedEdit: (seed) => {
+					nonce += 1;
+					set({
+						...state,
+						tab: "edit",
+						editSeed: {
+							...seed,
+							nonce
+						}
+					});
+				}
+			};
+		}
+		//#endregion
+		//#region src/client/panel/entry.tsx
 		/**
-		* 独立设置页占位组件：本次交付为空壳（不做前端设计与编码）。
-		* 后续版本在此渲染生图工作台与画廊；插槽契约已按官方 settings.section 形态声明。
-		* @module image-studio/client/section
+		* 侧边栏 footer 入口按钮：与文件/终端入口同款（整行图标 + 文案；
+		* rail 折叠态退化为居中圆形图标）。flex:1 由样式层与邻居等分行宽。
+		* @module image-studio/client/panel/entry
 		*/
-		/** 占位组件（props 形态对齐 settings.section 四 share 注入）。 */
-		function StudioSection(props) {
-			const t = props.t ?? ((key) => key);
-			const el = document.createElement("div");
-			el.className = "dsh-plus-image-studio-section-placeholder";
-			el.textContent = t("placeholder");
-			return {
-				type: el,
-				props: {}
+		function StudioEntryButton({ studio, t, wide }) {
+			const { open } = (0, react.useSyncExternalStore)(studio.subscribe, studio.getSnapshot);
+			const rail = wide === false;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				className: rail ? "ims-entry ims-entry-rail" : "ims-entry",
+				"aria-haspopup": "dialog",
+				"aria-expanded": open,
+				"aria-label": t("entry.label"),
+				onClick: () => studio.toggle(),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconImage, { size: rail ? 18 : 16 }), !rail && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "ims-entry-label",
+					children: t("entry.label")
+				})]
+			});
+		}
+		//#endregion
+		//#region src/client/panel/gallery.tsx
+		/**
+		* 画廊视图：条目网格（首图缩略）+ 详情模态（全部图片、提示词/改写、
+		* 请求参数回放、衍生链源图、下载/删除/二次编辑）。
+		* @module image-studio/client/panel/gallery
+		*/
+		function fmtTime(iso) {
+			const date = new Date(iso);
+			return Number.isNaN(date.getTime()) ? iso : date.toLocaleString();
+		}
+		/** 详情模态。 */
+		function GalleryDetail(props) {
+			const { t, item, onClose, onEdit, onDeleted } = props;
+			const [confirming, setConfirming] = (0, react.useState)(false);
+			const [deleting, setDeleting] = (0, react.useState)(false);
+			const [error, setError] = (0, react.useState)(null);
+			const doDelete = () => {
+				setDeleting(true);
+				deleteGalleryItem(item.id).then(() => onDeleted(item.id)).catch((err) => {
+					setError(err instanceof Error ? err.message : String(err));
+					setDeleting(false);
+					setConfirming(false);
+				});
 			};
+			const paramRows = Object.entries(item.params);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "ims-detailBackdrop",
+				role: "presentation",
+				onClick: onClose,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "ims-detail",
+					role: "dialog",
+					"aria-modal": "true",
+					"aria-label": item.prompt.slice(0, 40),
+					onClick: (event) => event.stopPropagation(),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "ims-detailHead",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "ims-detailMeta",
+								children: [
+									t("gallery.detail.model"),
+									"：",
+									item.model,
+									" · ",
+									t("gallery.detail.endpoint"),
+									"：",
+									item.endpoint,
+									" · ",
+									t("gallery.detail.time"),
+									"：",
+									fmtTime(item.createdAt)
+								]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "ims-btn ims-btnGhost",
+								onClick: onClose,
+								children: t("common.close")
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "ims-detailBody",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "ims-detailImages",
+								children: item.imageIds.map((imageId, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("figure", {
+									className: "ims-detailFigure",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+										src: imageUrl(imageId),
+										alt: item.prompt
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("figcaption", { children: [item.revisedPrompts[index] !== null && item.revisedPrompts[index] !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										className: "ims-revised",
+										title: item.revisedPrompts[index] ?? "",
+										children: [
+											t("gallery.detail.revised"),
+											"：",
+											item.revisedPrompts[index]
+										]
+									}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+										className: "ims-btn ims-btnGhost ims-btnSmall",
+										href: imageUrl(imageId),
+										download: true,
+										children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconDownload, { size: 14 }),
+											" ",
+											t("common.download")
+										]
+									})] })]
+								}, imageId))
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "ims-detailInfo",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+										className: "ims-detailLabel",
+										children: t("gallery.detail.prompt")
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "ims-detailPrompt",
+										children: item.prompt
+									}),
+									item.sourceIds.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+										className: "ims-detailLabel",
+										children: t("gallery.detail.sources")
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "ims-sources",
+										children: item.sourceIds.map((imageId) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "ims-thumb",
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+												src: imageUrl(imageId),
+												alt: ""
+											})
+										}, imageId))
+									})] }) : null,
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+										className: "ims-detailLabel",
+										children: t("gallery.detail.params")
+									}),
+									paramRows.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "ims-hint",
+										children: "—"
+									}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
+										className: "ims-paramTable",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: paramRows.map(([key, value]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+											className: "ims-paramTableKey",
+											children: key
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: JSON.stringify(value) })] }, key)) })
+									})
+								]
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "ims-detailFoot",
+							children: [
+								error !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "ims-status ims-statusError",
+									role: "alert",
+									children: error
+								}) : null,
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "ims-btn ims-btnPrimary",
+									onClick: () => onEdit(item),
+									children: t("gallery.edit")
+								}),
+								confirming ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "ims-btn ims-btnDanger",
+									disabled: deleting,
+									onClick: doDelete,
+									children: t("common.confirmDelete")
+								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+									type: "button",
+									className: "ims-btn ims-btnGhost",
+									onClick: () => setConfirming(true),
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconTrashOutline16, { size: 14 }),
+										" ",
+										t("common.delete")
+									]
+								})
+							]
+						})
+					]
+				})
+			});
+		}
+		function GalleryView(props) {
+			const { t, items, loading, failed, onRefresh, onEdit, detailId, onDetailChange } = props;
+			const detail = items.find((item) => item.id === detailId) ?? null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "ims-gallery",
+				hidden: props.hidden,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "ims-galleryBar",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "ims-hint",
+							children: t("gallery.total").replace("{n}", String(items.length))
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							className: "ims-btn ims-btnGhost ims-btnSmall",
+							onClick: onRefresh,
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconRefreshOutline16, { size: 14 }),
+								" ",
+								t("common.refresh")
+							]
+						})]
+					}),
+					failed ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+						className: "ims-empty",
+						children: [t("common.loadFailed"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "ims-btn ims-btnGhost ims-btnSmall",
+							onClick: onRefresh,
+							children: t("common.retry")
+						})]
+					}) : loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "ims-empty",
+						children: t("common.loading")
+					}) : items.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "ims-empty",
+						children: t("gallery.empty")
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "ims-grid",
+						children: [...items].reverse().map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							className: "ims-cell",
+							onClick: () => onDetailChange(item.id),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+								src: imageUrl(item.imageIds[0] ?? ""),
+								alt: item.prompt,
+								loading: "lazy"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ims-cellPrompt",
+								children: item.prompt
+							})]
+						}, item.id))
+					}),
+					detail !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GalleryDetail, {
+						t,
+						item: detail,
+						onClose: () => onDetailChange(null),
+						onEdit: (item) => {
+							onDetailChange(null);
+							onEdit(item);
+						},
+						onDeleted: () => {
+							onDetailChange(null);
+							onRefresh();
+						}
+					}) : null
+				]
+			});
+		}
+		//#endregion
+		//#region src/client/panel/param-state.ts
+		/**
+		* 参数表单状态纯函数：目录（ParamEntry）驱动的表单状态 ⇄ ParamSpecMap。
+		* - 表单值统一字符串/布尔（输入控件友好），提交时按 kind 解析回数值；
+		* - 画廊条目 params 回放、参数预设应用、预设另存均经此模块换算；
+		* - 纯函数零 DOM 依赖，可 node 单测。
+		* @module image-studio/client/panel/param-state
+		*/
+		/** 各参数的顺手默认值（启用控件时的预填，非官方默认）。 */
+		const DEFAULT_VALUES = {
+			n: "1",
+			size: "1024x1024",
+			quality: "auto",
+			background: "auto",
+			output_format: "png",
+			output_compression: "100",
+			moderation: "auto",
+			response_format: "url",
+			stream: false,
+			partial_images: "0",
+			user: "",
+			input_fidelity: "high",
+			style: "vivid"
+		};
+		/** 目录条目 → 表单默认值（enum 取首值兜底）。 */
+		function defaultValueFor(entry) {
+			const known = DEFAULT_VALUES[entry.key];
+			if (known !== void 0) return known;
+			if (entry.kind === "enum") return entry.values?.[0] ?? "";
+			if (entry.kind === "boolean") return false;
+			return "";
+		}
+		/** 端点可用的目录条目（剔除 host 承载参数 model）。 */
+		function paramEntriesFor(catalog, endpoint) {
+			return catalog.filter((entry) => entry.applies.includes(endpoint) && !isHostParam(entry.key));
+		}
+		/** 空表单（全部关闭 + 默认值）。 */
+		function emptyParamForm(catalog, endpoint) {
+			const form = {};
+			for (const entry of paramEntriesFor(catalog, endpoint)) form[entry.key] = {
+				enabled: false,
+				value: defaultValueFor(entry)
+			};
+			return form;
+		}
+		/** 表单值 ← 服务端参数值（按 kind 字符串化；未知键忽略）。 */
+		function fieldValueOf(entry, value) {
+			if (entry.kind === "boolean") return value === true;
+			if (typeof value === "number") return String(value);
+			if (typeof value === "string") return value;
+			return defaultValueFor(entry);
+		}
+		/** 套用参数表（预设应用/画廊回放共用）：仅目录内且端点适用的键生效并启用。 */
+		function applyParams(catalog, endpoint, params) {
+			const form = emptyParamForm(catalog, endpoint);
+			for (const entry of paramEntriesFor(catalog, endpoint)) {
+				const value = params[entry.key];
+				if (value === void 0) continue;
+				form[entry.key] = {
+					enabled: true,
+					value: fieldValueOf(entry, value)
+				};
+			}
+			return form;
+		}
+		/** 参数预设（ParamSpecMap 形态）套用到表单：enabled=false 的键显式关闭。 */
+		function applySpecs(catalog, endpoint, specs) {
+			const form = emptyParamForm(catalog, endpoint);
+			for (const entry of paramEntriesFor(catalog, endpoint)) {
+				const spec = specs[entry.key];
+				if (spec === void 0) continue;
+				form[entry.key] = {
+					enabled: spec.enabled,
+					value: spec.enabled && spec.value !== void 0 ? fieldValueOf(entry, spec.value) : defaultValueFor(entry)
+				};
+			}
+			return form;
+		}
+		/**
+		* 表单 → ParamSpecMap（提交/另存预设共用）：仅导出启用项，integer 按数值解析；
+		* 空字符串 integer 视为未填（导出 {enabled:true} 无 value，交由边界校验报错）。
+		*/
+		function formToSpecs(catalog, endpoint, form) {
+			const specs = {};
+			for (const entry of paramEntriesFor(catalog, endpoint)) {
+				const field = form[entry.key];
+				if (field === void 0 || !field.enabled) continue;
+				if (entry.kind === "boolean") {
+					specs[entry.key] = {
+						enabled: true,
+						value: field.value === true
+					};
+					continue;
+				}
+				const text = String(field.value).trim();
+				if (entry.kind === "integer") {
+					if (text === "") {
+						specs[entry.key] = { enabled: true };
+						continue;
+					}
+					const parsed = Number(text);
+					specs[entry.key] = {
+						enabled: true,
+						value: Number.isNaN(parsed) ? text : parsed
+					};
+					continue;
+				}
+				specs[entry.key] = {
+					enabled: true,
+					value: text
+				};
+			}
+			return specs;
+		}
+		//#endregion
+		//#region src/client/panel/params-form.tsx
+		/** 单参数行：开关 + 名称/说明 + 值控件。 */
+		function ParamRow(props) {
+			const { t, entry, form, onChange } = props;
+			const field = form[entry.key] ?? {
+				enabled: false,
+				value: ""
+			};
+			const patch = (next) => onChange({
+				...form,
+				[entry.key]: {
+					...field,
+					...next
+				}
+			});
+			const control = (() => {
+				if (entry.kind === "boolean") return null;
+				if (entry.kind === "enum") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+					className: "ims-input ims-paramControl",
+					value: String(field.value),
+					disabled: !field.enabled,
+					onChange: (event) => patch({ value: event.target.value }),
+					children: (entry.values ?? []).map((value) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+						value,
+						children: value
+					}, value))
+				});
+				if (entry.kind === "integer") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					className: "ims-input ims-paramControl",
+					type: "number",
+					inputMode: "numeric",
+					min: entry.min,
+					max: entry.max,
+					value: String(field.value),
+					disabled: !field.enabled,
+					onChange: (event) => patch({ value: event.target.value })
+				});
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					className: "ims-input ims-paramControl",
+					type: "text",
+					value: String(field.value),
+					disabled: !field.enabled,
+					onChange: (event) => patch({ value: event.target.value })
+				});
+			})();
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `ims-paramRow${field.enabled ? " ims-paramRowOn" : ""}`,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						className: "ims-switch",
+						title: t("params.enabled"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							type: "checkbox",
+							role: "switch",
+							"aria-label": `${entry.key} ${t("params.enabled")}`,
+							"aria-checked": field.enabled,
+							checked: field.enabled,
+							onChange: (event) => entry.kind === "boolean" ? patch({
+								enabled: event.target.checked,
+								value: event.target.checked
+							}) : patch({ enabled: event.target.checked })
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "ims-switchTrack",
+							"aria-hidden": "true"
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "ims-paramText",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "ims-paramKey",
+							children: [entry.key, entry.generation !== "current" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ims-paramGen",
+								children: entry.generation
+							}) : null]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "ims-paramDesc",
+							children: entry.description
+						})]
+					}),
+					control
+				]
+			});
+		}
+		function ParamsForm(props) {
+			const { t, catalog, endpoint, form, onChange } = props;
+			const entries = paramEntriesFor(catalog, endpoint);
+			const basics = entries.filter((entry) => !entry.advanced);
+			const advanced = entries.filter((entry) => entry.advanced);
+			const advancedOn = advanced.filter((entry) => form[entry.key]?.enabled === true).length;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "ims-params",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "ims-paramGroup",
+					children: basics.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ParamRow, {
+						t,
+						entry,
+						form,
+						onChange
+					}, entry.key))
+				}), advanced.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
+					className: "ims-adv",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("summary", {
+						className: "ims-advSummary",
+						children: [t("params.advanced"), advancedOn > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "ims-advCount",
+							children: advancedOn
+						}) : null]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "ims-paramGroup",
+						children: advanced.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ParamRow, {
+							t,
+							entry,
+							form,
+							onChange
+						}, entry.key))
+					})]
+				}) : null]
+			});
+		}
+		//#endregion
+		//#region src/client/panel/picker.tsx
+		/**
+		* 画廊图片选择器（模态）：源图多选（≤16）与遮罩单选共用。
+		* 扁平化全部画廊条目的图片，倒序排列；底部确认条显示已选数量。
+		* @module image-studio/client/panel/picker
+		*/
+		function flattenImages(items) {
+			const out = [];
+			for (const item of [...items].reverse()) for (const imageId of item.imageIds) out.push({
+				imageId,
+				prompt: item.prompt,
+				createdAt: item.createdAt
+			});
+			return out;
+		}
+		function ImagePicker(props) {
+			const { t, title, items, multiple, initial, onConfirm, onClose } = props;
+			const [selected, setSelected] = (0, react.useState)(initial);
+			const images = flattenImages(items);
+			const toggle = (imageId) => {
+				if (multiple) {
+					setSelected((current) => current.includes(imageId) ? current.filter((id) => id !== imageId) : current.length >= 16 ? current : [...current, imageId]);
+					return;
+				}
+				setSelected((current) => current.includes(imageId) ? [] : [imageId]);
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "ims-pickerBackdrop",
+				role: "presentation",
+				onClick: onClose,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "ims-picker",
+					role: "dialog",
+					"aria-modal": "true",
+					"aria-label": title,
+					onClick: (event) => event.stopPropagation(),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "ims-pickerHead",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+								className: "ims-pickerTitle",
+								children: title
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "ims-btn ims-btnGhost",
+								onClick: onClose,
+								children: t("common.close")
+							})]
+						}),
+						images.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "ims-empty",
+							children: t("picker.empty")
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "ims-pickerGrid",
+							role: "listbox",
+							"aria-multiselectable": multiple,
+							children: images.map((image) => {
+								const on = selected.includes(image.imageId);
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+									type: "button",
+									role: "option",
+									"aria-selected": on,
+									className: `ims-pickerCell${on ? " ims-pickerCellOn" : ""}`,
+									title: image.prompt,
+									onClick: () => toggle(image.imageId),
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+										src: imageUrl(image.imageId),
+										alt: image.prompt,
+										loading: "lazy"
+									}), on ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "ims-pickerMark",
+										children: selected.indexOf(image.imageId) + 1
+									}) : null]
+								}, image.imageId);
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "ims-pickerFoot",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "ims-btn ims-btnPrimary",
+								disabled: selected.length === 0,
+								onClick: () => onConfirm(selected),
+								children: t("picker.confirm").replace("{n}", String(selected.length))
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "ims-btn ims-btnGhost",
+								onClick: onClose,
+								children: t("common.cancel")
+							})]
+						})
+					]
+				})
+			});
+		}
+		//#endregion
+		//#region src/client/panel/generator.tsx
+		/**
+		* 生图工作台表单（文生图/图生图共用，endpoint 区分）：
+		* - 提供商预设选择 + 凭据状态徽标 + inline 覆盖（凭据沿用预设）；
+		* - 提示词编辑 + 预设插入/另存；
+		* - 目录驱动的参数表单 + 参数预设应用/另存；
+		* - 图生图追加源图（≤16）与可选遮罩选择（画廊取图）；
+		* - 提交 generate → 202 taskId 交由面板任务条轮询。
+		* 预设另存走 settings RPC（scope/api 注入），成功后经 onPresetSaved 刷新快照。
+		* @module image-studio/client/panel/generator
+		*/
+		const IDLE = {
+			kind: "idle",
+			text: ""
+		};
+		/** 预设 id 生成（稳定唯一即可；provider 预设的 kebab 约束不适用此处）。 */
+		function presetId(prefix) {
+			return `${prefix}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`;
+		}
+		function GeneratorForm(props) {
+			const { t, endpoint, catalog, protocols, presets, gallery, scope, api } = props;
+			const [providerId, setProviderId] = (0, react.useState)("");
+			const [inline, setInline] = (0, react.useState)({
+				open: false,
+				protocol: protocols[0]?.id ?? "openai-images",
+				baseUrl: "",
+				model: ""
+			});
+			const [credentialOk, setCredentialOk] = (0, react.useState)(null);
+			const [prompt, setPrompt] = (0, react.useState)("");
+			const [form, setForm] = (0, react.useState)({});
+			const [sourceIds, setSourceIds] = (0, react.useState)([]);
+			const [maskId, setMaskId] = (0, react.useState)(null);
+			const [picker, setPicker] = (0, react.useState)(null);
+			const [naming, setNaming] = (0, react.useState)(null);
+			const [status, setStatus] = (0, react.useState)(IDLE);
+			const [submitting, setSubmitting] = (0, react.useState)(false);
+			/** 目录就绪后初始化表单一次（catalog 会话内静态，重载不覆盖用户编辑）。 */
+			const formReadyRef = (0, react.useRef)(false);
+			/** 已消费的种子 nonce（防重复回填）。 */
+			const seedRef = (0, react.useRef)(0);
+			(0, react.useEffect)(() => {
+				if (formReadyRef.current || catalog.length === 0) return;
+				formReadyRef.current = true;
+				setForm(emptyParamForm(catalog, endpoint));
+			}, [catalog, endpoint]);
+			const seed = endpoint === "edit" ? props.editSeed : null;
+			(0, react.useEffect)(() => {
+				if (seed === null || seed.nonce === seedRef.current || !formReadyRef.current) return;
+				seedRef.current = seed.nonce;
+				setPrompt(seed.prompt);
+				setSourceIds(seed.sourceIds);
+				setForm(applyParams(catalog, endpoint, seed.params));
+				if (seed.providerPresetId !== null) setProviderId(seed.providerPresetId);
+				setStatus(IDLE);
+			}, [
+				seed,
+				catalog,
+				endpoint
+			]);
+			(0, react.useEffect)(() => {
+				if (providerId === "") {
+					setCredentialOk(null);
+					return;
+				}
+				let alive = true;
+				fetchCredentialStatus(providerId).then((res) => {
+					if (alive) setCredentialOk(res.configured);
+				}).catch(() => {
+					if (alive) setCredentialOk(null);
+				});
+				return () => {
+					alive = false;
+				};
+			}, [providerId]);
+			const paramPresets = (0, react.useMemo)(() => presets.paramPresets.filter((preset) => preset.endpoint === endpoint), [presets, endpoint]);
+			const selectedProvider = presets.providerPresets.find((preset) => preset.id === providerId);
+			const toggleInline = (open) => {
+				setInline((current) => ({
+					...current,
+					open,
+					baseUrl: open && current.baseUrl === "" ? selectedProvider?.baseUrl ?? "" : current.baseUrl,
+					model: open && current.model === "" ? selectedProvider?.model ?? "" : current.model,
+					protocol: open && current.protocol === "" ? selectedProvider?.protocol ?? current.protocol : current.protocol
+				}));
+			};
+			const applyParamPreset = (id) => {
+				if (id === "") return;
+				const preset = paramPresets.find((item) => item.id === id);
+				if (preset === void 0) return;
+				try {
+					const specs = validateParamSpecs(preset.paramSpecs);
+					setForm(applySpecs(catalog, endpoint, specs));
+					setStatus(IDLE);
+				} catch (error) {
+					setStatus({
+						kind: "error",
+						text: error instanceof Error ? error.message : String(error)
+					});
+				}
+			};
+			/** 预设另存（settings RPC + revision fencing，成功后刷新快照）。 */
+			const savePreset = () => {
+				if (naming === null || naming.name.trim() === "") return;
+				const snapshot = scope.getSnapshot();
+				const value = snapshot.value ?? {};
+				const patch = naming.kind === "prompt" ? { promptPresets: [...value.promptPresets ?? [], {
+					id: presetId("prompt"),
+					name: naming.name.trim(),
+					text: prompt
+				}] } : { paramPresets: [...value.paramPresets ?? [], {
+					id: presetId("param"),
+					name: naming.name.trim(),
+					endpoint,
+					paramSpecs: formToSpecs(catalog, endpoint, form)
+				}] };
+				api.update(patch, snapshot.revision).then(() => scope.load()).then(() => {
+					setNaming(null);
+					setStatus({
+						kind: "ok",
+						text: t(naming.kind === "prompt" ? "prompt.preset.saved" : "params.preset.saved")
+					});
+					props.onPresetSaved();
+				}).catch((error) => {
+					setStatus({
+						kind: "error",
+						text: `${t("card.saveFailed")}${error instanceof Error ? error.message : String(error)}`
+					});
+				});
+			};
+			const submit = () => {
+				if (providerId === "") {
+					setStatus({
+						kind: "error",
+						text: t("generate.needProvider")
+					});
+					return;
+				}
+				if (prompt.trim() === "") {
+					setStatus({
+						kind: "error",
+						text: t("generate.needPrompt")
+					});
+					return;
+				}
+				if (endpoint === "edit" && sourceIds.length === 0) {
+					setStatus({
+						kind: "error",
+						text: t("generate.needSources")
+					});
+					return;
+				}
+				let paramSpecs;
+				try {
+					paramSpecs = validateParamSpecs(formToSpecs(catalog, endpoint, form));
+				} catch (error) {
+					setStatus({
+						kind: "error",
+						text: error instanceof Error ? error.message : String(error)
+					});
+					return;
+				}
+				const request = {
+					providerPresetId: providerId,
+					endpoint,
+					prompt: prompt.trim(),
+					paramSpecs
+				};
+				if (inline.open) request.inlineProvider = {
+					protocol: inline.protocol,
+					baseUrl: inline.baseUrl.trim(),
+					model: inline.model.trim()
+				};
+				if (endpoint === "edit") {
+					request.sourceIds = sourceIds;
+					if (maskId !== null) request.maskId = maskId;
+				}
+				setSubmitting(true);
+				setStatus(IDLE);
+				generate(request).then(({ taskId }) => {
+					setStatus({
+						kind: "ok",
+						text: t("generate.submitted").replace("{id}", taskId)
+					});
+					props.onSubmitted(taskId);
+				}).catch((error) => {
+					setStatus({
+						kind: "error",
+						text: `${t("generate.failed")}${error instanceof Error ? error.message : String(error)}`
+					});
+				}).finally(() => setSubmitting(false));
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "ims-gen",
+				hidden: props.hidden,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "ims-genMain",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+								className: "ims-block",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+										className: "ims-blockTitle",
+										children: t("provider.label")
+									}),
+									presets.providerPresets.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "ims-hint",
+										children: t("provider.empty")
+									}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "ims-providerRow",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+											className: "ims-input",
+											value: providerId,
+											"aria-label": t("provider.label"),
+											onChange: (event) => setProviderId(event.target.value),
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+												value: "",
+												children: t("provider.placeholder")
+											}), presets.providerPresets.map((preset) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("option", {
+												value: preset.id,
+												children: [
+													preset.name,
+													"（",
+													preset.model,
+													"）"
+												]
+											}, preset.id))]
+										}), credentialOk !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: `ims-badge ${credentialOk ? "ims-badgeOn" : "ims-badgeOff"}`,
+											children: t(credentialOk ? "provider.credential.configured" : "provider.credential.missing")
+										}) : null]
+									}),
+									providerId !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+										className: "ims-checkLine",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+											type: "checkbox",
+											checked: inline.open,
+											onChange: (event) => toggleInline(event.target.checked)
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("provider.inline.toggle") })]
+									}), inline.open ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "ims-inlineGrid",
+										children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+												className: "ims-mini",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("provider.inline.protocol") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+													className: "ims-input",
+													value: inline.protocol,
+													onChange: (event) => setInline({
+														...inline,
+														protocol: event.target.value
+													}),
+													children: protocols.map((protocol) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+														value: protocol.id,
+														children: protocol.label
+													}, protocol.id))
+												})]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+												className: "ims-mini",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("provider.inline.baseUrl") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+													className: "ims-input",
+													value: inline.baseUrl,
+													placeholder: "https://api.openai.com/v1",
+													onChange: (event) => setInline({
+														...inline,
+														baseUrl: event.target.value
+													})
+												})]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+												className: "ims-mini",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("provider.inline.model") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+													className: "ims-input",
+													value: inline.model,
+													placeholder: "gpt-image-1",
+													onChange: (event) => setInline({
+														...inline,
+														model: event.target.value
+													})
+												})]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+												className: "ims-hint",
+												children: t("provider.inline.hint")
+											})
+										]
+									}) : null] }) : null
+								]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+								className: "ims-block",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+										className: "ims-blockTitle",
+										children: t("prompt.label")
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+										className: "ims-input ims-prompt",
+										rows: 5,
+										value: prompt,
+										placeholder: t("prompt.placeholder"),
+										onChange: (event) => setPrompt(event.target.value)
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "ims-rowActions",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+											className: "ims-input ims-rowGrow",
+											value: "",
+											"aria-label": t("prompt.preset.insert"),
+											onChange: (event) => {
+												const preset = presets.promptPresets.find((item) => item.id === event.target.value);
+												if (preset !== void 0) setPrompt((current) => current.trim() === "" ? preset.text : `${current}\n${preset.text}`);
+											},
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+												value: "",
+												children: t("prompt.preset.insert")
+											}), presets.promptPresets.map((preset) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+												value: preset.id,
+												children: preset.name
+											}, preset.id))]
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: "ims-btn ims-btnGhost",
+											disabled: prompt.trim() === "",
+											onClick: () => setNaming({
+												kind: "prompt",
+												name: ""
+											}),
+											children: t("prompt.preset.save")
+										})]
+									})
+								]
+							}),
+							endpoint === "edit" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+								className: "ims-block",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+										className: "ims-blockTitle",
+										children: t("sources.label")
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "ims-sources",
+										children: [sourceIds.map((imageId) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+											className: "ims-thumb",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+												src: imageUrl(imageId),
+												alt: ""
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+												type: "button",
+												className: "ims-thumbRemove",
+												"aria-label": t("common.delete"),
+												onClick: () => setSourceIds((current) => current.filter((id) => id !== imageId)),
+												children: "×"
+											})]
+										}, imageId)), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+											type: "button",
+											className: "ims-thumbAdd",
+											onClick: () => setPicker("sources"),
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconLayers, { size: 18 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("sources.pick") })]
+										})]
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "ims-hint",
+										children: t("sources.count").replace("{n}", String(sourceIds.length))
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+										className: "ims-blockTitle",
+										children: t("sources.mask")
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "ims-sources",
+										children: [maskId !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+											className: "ims-thumb",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+												src: imageUrl(maskId),
+												alt: ""
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+												type: "button",
+												className: "ims-thumbRemove",
+												"aria-label": t("sources.maskClear"),
+												onClick: () => setMaskId(null),
+												children: "×"
+											})]
+										}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+											type: "button",
+											className: "ims-thumbAdd",
+											onClick: () => setPicker("mask"),
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconLayers, { size: 18 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("sources.maskPick") })]
+										})]
+									})
+								]
+							}) : null
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "ims-genSide",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+							className: "ims-block",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "ims-rowActions ims-blockHead",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+										className: "ims-blockTitle",
+										children: t("params.basic")
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+										className: "ims-input ims-rowGrow",
+										value: "",
+										"aria-label": t("params.preset.placeholder"),
+										onChange: (event) => applyParamPreset(event.target.value),
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+											value: "",
+											children: t("params.preset.placeholder")
+										}), paramPresets.map((preset) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+											value: preset.id,
+											children: preset.name
+										}, preset.id))]
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "ims-btn ims-btnGhost",
+										onClick: () => setNaming({
+											kind: "params",
+											name: ""
+										}),
+										children: t("params.preset.save")
+									})
+								]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ParamsForm, {
+								t,
+								catalog,
+								endpoint,
+								form,
+								onChange: setForm
+							})]
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "ims-genFoot",
+						children: [
+							naming !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "ims-naming",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										className: "ims-input ims-rowGrow",
+										value: naming.name,
+										placeholder: t("prompt.preset.name"),
+										autoFocus: true,
+										onChange: (event) => setNaming({
+											...naming,
+											name: event.target.value
+										}),
+										onKeyDown: (event) => {
+											if (event.key === "Enter") savePreset();
+											if (event.key === "Escape") setNaming(null);
+										}
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "ims-btn ims-btnPrimary",
+										disabled: naming.name.trim() === "",
+										onClick: savePreset,
+										children: t("common.save")
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "ims-btn ims-btnGhost",
+										onClick: () => setNaming(null),
+										children: t("common.cancel")
+									})
+								]
+							}) : null,
+							status.kind !== "idle" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: `ims-status${status.kind === "error" ? " ims-statusError" : ""}`,
+								role: "status",
+								children: status.text
+							}) : null,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "ims-btn ims-btnPrimary ims-submit",
+								disabled: submitting,
+								onClick: submit,
+								children: t("generate.submit")
+							})
+						]
+					}),
+					picker !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImagePicker, {
+						t,
+						title: t(picker === "sources" ? "sources.label" : "sources.mask"),
+						items: gallery,
+						multiple: picker === "sources",
+						initial: picker === "sources" ? sourceIds : [],
+						onConfirm: (ids) => {
+							if (picker === "sources") setSourceIds(ids);
+							else setMaskId(ids[0] ?? null);
+							setPicker(null);
+						},
+						onClose: () => setPicker(null)
+					}) : null
+				]
+			});
+		}
+		//#endregion
+		//#region src/client/panel/tasks.tsx
+		/**
+		* 任务条：面板底部的横向任务流（最新在左）。
+		* 活跃任务（排队/生成中）带旋转标与取消按钮；已完成可一键跳画廊详情。
+		* 轮询由面板根组件负责，本组件纯渲染。
+		* @module image-studio/client/panel/tasks
+		*/
+		const STATE_KEYS = {
+			queued: "tasks.state.queued",
+			running: "tasks.state.running",
+			succeeded: "tasks.state.succeeded",
+			failed: "tasks.state.failed",
+			cancelled: "tasks.state.cancelled"
+		};
+		function TasksBar(props) {
+			const { t, tasks, onCancel, onView } = props;
+			if (tasks.length === 0) return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+				className: "ims-tasks",
+				"aria-label": t("tasks.title"),
+				children: tasks.slice(0, 20).map((task) => {
+					const active = task.state === "queued" || task.state === "running";
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: `ims-task ims-task-${task.state}`,
+						children: [
+							active ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconLoadingOutline16, {
+								className: "ims-spin",
+								size: 14
+							}) : null,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: `ims-taskState ims-taskState-${task.state}`,
+								children: t(STATE_KEYS[task.state])
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ims-taskPrompt",
+								title: task.promptPreview,
+								children: task.promptPreview
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ims-taskModel",
+								children: task.model
+							}),
+							active ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "ims-btn ims-btnGhost ims-btnSmall",
+								onClick: () => onCancel(task.id),
+								children: t("common.cancel")
+							}) : null,
+							task.state === "succeeded" && task.galleryItemId !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "ims-btn ims-btnGhost ims-btnSmall",
+								onClick: () => onView(task.galleryItemId),
+								children: t("tasks.view")
+							}) : null,
+							task.state === "failed" && task.error !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ims-taskError",
+								title: task.error,
+								children: task.error
+							}) : null
+						]
+					}, task.id);
+				})
+			});
+		}
+		//#endregion
+		//#region src/client/panel/panel.tsx
+		const EMPTY_PRESETS = {
+			promptPresets: [],
+			paramPresets: [],
+			providerPresets: []
+		};
+		function StudioPanel(props) {
+			const { studio, t, scope, api } = props;
+			const { open, tab, editSeed } = (0, react.useSyncExternalStore)(studio.subscribe, studio.getSnapshot);
+			const [providers, setProviders] = (0, react.useState)(null);
+			const [presets, setPresets] = (0, react.useState)(EMPTY_PRESETS);
+			const [gallery, setGallery] = (0, react.useState)([]);
+			const [galleryLoading, setGalleryLoading] = (0, react.useState)(false);
+			const [galleryFailed, setGalleryFailed] = (0, react.useState)(false);
+			const [tasks, setTasks] = (0, react.useState)([]);
+			const [detailId, setDetailId] = (0, react.useState)(null);
+			/** 上一轮任务快照（成功转移侦测）。 */
+			const prevTasksRef = (0, react.useRef)(/* @__PURE__ */ new Map());
+			const reloadGallery = (0, react.useCallback)(() => {
+				setGalleryLoading(true);
+				fetchGallery().then((res) => {
+					setGallery(res.items);
+					setGalleryFailed(false);
+				}).catch(() => setGalleryFailed(true)).finally(() => setGalleryLoading(false));
+			}, []);
+			const reloadPresets = (0, react.useCallback)(() => {
+				fetchPresets().then(setPresets).catch(() => {});
+			}, []);
+			const reloadTasks = (0, react.useCallback)(() => {
+				fetchTasks().then((res) => setTasks(res.tasks)).catch(() => {});
+			}, []);
+			(0, react.useEffect)(() => {
+				if (!open) return;
+				if (providers === null) fetchProviders().then(setProviders).catch(() => {});
+				reloadPresets();
+				reloadGallery();
+				reloadTasks();
+				const timer = setInterval(() => {
+					fetchTasks().then((res) => {
+						setTasks(res.tasks);
+						const prev = prevTasksRef.current;
+						const next = /* @__PURE__ */ new Map();
+						let succeeded = false;
+						for (const task of res.tasks) {
+							next.set(task.id, task.state);
+							if (task.state === "succeeded" && prev.get(task.id) !== "succeeded") succeeded = true;
+						}
+						prevTasksRef.current = next;
+						if (succeeded) reloadGallery();
+					}).catch(() => {});
+				}, 2e3);
+				return () => clearInterval(timer);
+			}, [
+				open,
+				providers,
+				reloadPresets,
+				reloadGallery,
+				reloadTasks
+			]);
+			if (!open) return null;
+			const catalog = providers?.params ?? [];
+			const protocols = providers?.protocols ?? [];
+			const tabs = [
+				{
+					key: "generation",
+					label: t("tab.generation"),
+					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconSparkles, { size: 15 })
+				},
+				{
+					key: "edit",
+					label: t("tab.edit"),
+					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconBrush, { size: 15 })
+				},
+				{
+					key: "gallery",
+					label: t("tab.gallery"),
+					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconImage, { size: 15 })
+				}
+			];
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "ims-backdrop",
+				role: "presentation",
+				onClick: () => studio.setOpen(false),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "ims-panel",
+					role: "dialog",
+					"aria-modal": "true",
+					"aria-label": t("panel.title"),
+					onClick: (event) => event.stopPropagation(),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+							className: "ims-head",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "ims-tabs",
+								role: "tablist",
+								"aria-label": t("panel.title"),
+								children: tabs.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+									type: "button",
+									role: "tab",
+									"aria-selected": tab === item.key,
+									className: `ims-tab${tab === item.key ? " ims-tabActive" : ""}`,
+									onClick: () => studio.setTab(item.key),
+									children: [item.icon, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.label })]
+								}, item.key))
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "ims-iconBtn",
+								"aria-label": t("common.close"),
+								onClick: () => studio.setOpen(false),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconCloseOutline16, { size: 16 })
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "ims-body",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GeneratorForm, {
+									t,
+									endpoint: "generation",
+									catalog,
+									protocols,
+									presets,
+									gallery,
+									scope,
+									api,
+									editSeed: null,
+									onPresetSaved: reloadPresets,
+									onSubmitted: reloadTasks,
+									hidden: tab !== "generation"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GeneratorForm, {
+									t,
+									endpoint: "edit",
+									catalog,
+									protocols,
+									presets,
+									gallery,
+									scope,
+									api,
+									editSeed,
+									onPresetSaved: reloadPresets,
+									onSubmitted: reloadTasks,
+									hidden: tab !== "edit"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GalleryView, {
+									t,
+									items: gallery,
+									loading: galleryLoading,
+									failed: galleryFailed,
+									onRefresh: reloadGallery,
+									onEdit: (item) => studio.seedEdit({
+										sourceIds: [...item.imageIds],
+										prompt: item.prompt,
+										params: item.params,
+										providerPresetId: item.providerPresetId
+									}),
+									detailId,
+									onDetailChange: setDetailId,
+									hidden: tab !== "gallery"
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TasksBar, {
+							t,
+							tasks,
+							onCancel: (taskId) => {
+								cancelTask(taskId).then(reloadTasks).catch(() => {});
+							},
+							onView: (galleryItemId) => {
+								studio.setTab("gallery");
+								setDetailId(galleryItemId);
+							}
+						})
+					]
+				})
+			});
 		}
 		//#endregion
 		//#region src/client/styles.ts
 		/**
-		* 画廊/生图占位样式：本次交付仅注入极简占位类名（无视觉设计）。
-		* 沿用官方约定 <style data-plugin data-plugin-css>，HMR 按此卸载。
+		* 图像工作室前端样式：侧栏入口 + overlay 工作台 + 配置卡片附加件。
+		* 全部颜色引用 --dsw-* 设计令牌（跟随原生深浅色主题）；响应式断点 767px
+		* 与 @dsh-plus/ui-mobile-fit 对齐（移动端面板全屏、生图表单单列、画廊两列）。
+		* 注入沿用 <style data-plugin data-plugin-css> 约定（HMR 可卸载）。
 		* @module image-studio/client/styles
 		*/
 		const PKG = "@dsh-plus/image-studio";
-		/** 注入设置页占位样式。 */
-		function injectSectionStyle() {
-			return inject$1("dsh-plus-image-studio-section", ".dsh-plus-image-studio-section-placeholder{padding:16px;opacity:.6}");
-		}
-		/** 注入配置卡片占位样式。 */
-		function injectCardStyles() {
-			return inject$1("dsh-plus-image-studio-card", ".dsh-plus-image-studio-card-placeholder{padding:8px;opacity:.6}");
-		}
-		function inject$1(id, css) {
+		const STYLE_TAG_ID = `${PKG}/styles.css`;
+		const imageStudioCss = `
+/* ── 侧边栏入口（与文件/终端入口同款；flex:1 1 0 与邻居等分 footer 行宽）── */
+.ims-entry {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 0;
+  min-width: 0;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  height: 42px;
+  margin: 4px 0;
+  padding: 0 10px 0 8px;
+  border: none;
+  border-radius: 12px;
+  background: transparent;
+  color: var(--dsw-alias-label-primary, #1f2328);
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 22px;
+  cursor: pointer;
+  overflow: hidden;
+}
+.ims-entry:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(0,0,0,.06)); }
+.ims-entry-rail {
+  flex: none;
+  width: 36px;
+  height: 36px;
+  margin: 8px 0 10px;
+  padding: 0;
+  border-radius: 50%;
+  justify-content: center;
+  gap: 0;
+}
+.ims-entry-label { white-space: nowrap; overflow: hidden; }
+
+/* ── 面板骨架 ── */
+.ims-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--dsw-alias-overlay-bg, rgba(0,0,0,.4));
+}
+.ims-panel {
+  display: flex;
+  flex-direction: column;
+  width: min(1100px, 94vw);
+  height: min(780px, 88vh);
+  border-radius: 16px;
+  background: var(--dsw-alias-bg-primary, #fff);
+  color: var(--dsw-alias-label-primary, #1f2328);
+  box-shadow: 0 16px 48px rgba(0,0,0,.24);
+  overflow: hidden;
+}
+.ims-head {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: .5px solid var(--dsw-alias-border-l3, rgba(0,0,0,.08));
+}
+.ims-tabs { display: flex; flex: 1; gap: 4px; min-width: 0; }
+.ims-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 34px;
+  padding: 0 14px;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary, #57606a);
+  font-family: inherit;
+  font-size: 14px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.ims-tab:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(0,0,0,.06)); }
+.ims-tabActive {
+  background: var(--dsw-alias-button-elevated-fill, rgba(0,0,0,.06));
+  color: var(--dsw-alias-label-primary, #1f2328);
+  font-weight: 500;
+}
+.ims-iconBtn {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--dsw-alias-label-primary, #1f2328);
+  cursor: pointer;
+}
+.ims-iconBtn:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(0,0,0,.06)); }
+.ims-body { flex: 1; min-height: 0; overflow-y: auto; }
+
+/* ── 通用件 ── */
+.ims-input {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 34px;
+  padding: 6px 10px;
+  border: .5px solid var(--dsw-alias-border-l2, rgba(0,0,0,.16));
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-primary, #fff);
+  color: var(--dsw-alias-label-primary, #1f2328);
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 20px;
+}
+.ims-input:focus { outline: 2px solid var(--dsw-alias-focus-ring, #4d9fff); outline-offset: 0; }
+.ims-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 34px;
+  padding: 6px 14px;
+  border: none;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.ims-btn:disabled { opacity: .5; cursor: not-allowed; }
+.ims-btnPrimary {
+  background: var(--dsw-alias-button-primary-fill, #1f2328);
+  color: var(--dsw-alias-button-primary-label, #fff);
+}
+.ims-btnGhost {
+  background: transparent;
+  color: var(--dsw-alias-label-primary, #1f2328);
+  border: .5px solid var(--dsw-alias-border-l2, rgba(0,0,0,.16));
+}
+.ims-btnGhost:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, rgba(0,0,0,.06)); }
+.ims-btnDanger { background: var(--dsw-alias-status-error, #d1242f); color: #fff; }
+.ims-btnSmall { min-height: 28px; padding: 3px 10px; font-size: 12px; }
+.ims-hint { margin: 4px 0 0; font-size: 12px; color: var(--dsw-alias-label-secondary, #57606a); }
+.ims-empty {
+  padding: 32px 16px;
+  text-align: center;
+  font-size: 13px;
+  color: var(--dsw-alias-label-secondary, #57606a);
+}
+.ims-badge {
+  flex: none;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  line-height: 16px;
+}
+.ims-badgeOn { background: var(--dsw-alias-status-success-subtle, rgba(35,134,54,.15)); color: var(--dsw-alias-status-success, #1a7f37); }
+.ims-badgeOff { background: var(--dsw-alias-status-error-subtle, rgba(209,36,47,.12)); color: var(--dsw-alias-status-error, #d1242f); }
+.ims-status { margin: 8px 0 0; font-size: 12px; color: var(--dsw-alias-status-success, #1a7f37); }
+.ims-statusError { color: var(--dsw-alias-status-error, #d1242f); }
+.ims-spin { animation: ims-rotate 1s linear infinite; }
+@keyframes ims-rotate { to { transform: rotate(360deg); } }
+
+/* ── 生图表单 ── */
+.ims-gen {
+  display: grid;
+  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
+  gap: 0 20px;
+  padding: 16px;
+}
+.ims-gen[hidden] { display: none; }
+.ims-genMain, .ims-genSide { min-width: 0; }
+.ims-block { margin-bottom: 16px; }
+.ims-blockTitle { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
+.ims-blockHead { align-items: center; }
+.ims-blockHead .ims-blockTitle { margin: 0; flex: none; }
+.ims-providerRow { display: flex; align-items: center; gap: 8px; }
+.ims-checkLine {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 10px;
+  font-size: 13px;
+  cursor: pointer;
+}
+.ims-inlineGrid { display: grid; gap: 8px; margin-top: 8px; }
+.ims-mini { display: grid; gap: 4px; font-size: 12px; color: var(--dsw-alias-label-secondary, #57606a); }
+.ims-prompt { resize: vertical; min-height: 96px; }
+.ims-rowActions { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
+.ims-rowGrow { flex: 1; min-width: 0; }
+
+/* 参数表单 */
+.ims-paramGroup { display: grid; gap: 6px; }
+.ims-paramRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 8px;
+  border-radius: 8px;
+}
+.ims-paramRowOn { background: var(--dsw-alias-bg-secondary, rgba(0,0,0,.04)); }
+.ims-paramText { flex: 1; min-width: 0; display: grid; }
+.ims-paramKey { font-size: 12px; font-weight: 600; font-family: var(--ds-font-family-code, monospace); }
+.ims-paramGen {
+  margin-left: 6px;
+  padding: 0 5px;
+  border-radius: 4px;
+  background: var(--dsw-alias-bg-tertiary, rgba(0,0,0,.08));
+  font-size: 10px;
+  font-weight: 400;
+}
+.ims-paramDesc {
+  font-size: 11px;
+  color: var(--dsw-alias-label-secondary, #57606a);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ims-paramControl { width: 132px; flex: none; min-height: 30px; padding: 4px 8px; }
+.ims-adv { margin-top: 8px; }
+.ims-advSummary {
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 6px 0;
+  color: var(--dsw-alias-label-secondary, #57606a);
+  user-select: none;
+}
+.ims-advCount {
+  margin-left: 6px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--dsw-alias-button-primary-fill, #1f2328);
+  color: var(--dsw-alias-button-primary-label, #fff);
+  font-size: 10px;
+}
+
+/* 开关（switch） */
+.ims-switch { position: relative; display: inline-flex; flex: none; width: 30px; height: 18px; }
+.ims-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
+.ims-switchTrack {
+  position: absolute;
+  inset: 0;
+  border-radius: 999px;
+  background: var(--dsw-alias-border-l1, rgba(0,0,0,.24));
+  transition: background .15s;
+  pointer-events: none;
+}
+.ims-switchTrack::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #fff;
+  transition: transform .15s;
+}
+.ims-switch input:checked + .ims-switchTrack { background: var(--dsw-alias-status-success, #1a7f37); }
+.ims-switch input:checked + .ims-switchTrack::after { transform: translateX(12px); }
+
+/* 源图/遮罩缩略 */
+.ims-sources { display: flex; flex-wrap: wrap; gap: 8px; }
+.ims-thumb { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; }
+.ims-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.ims-thumbRemove {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 18px;
+  height: 18px;
+  border: none;
+  border-radius: 50%;
+  background: rgba(0,0,0,.55);
+  color: #fff;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+}
+.ims-thumbAdd {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 64px;
+  height: 64px;
+  border: 1px dashed var(--dsw-alias-border-l1, rgba(0,0,0,.24));
+  border-radius: 8px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary, #57606a);
+  font-size: 11px;
+  cursor: pointer;
+}
+.ims-thumbAdd:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(0,0,0,.06)); }
+
+/* 提交区 */
+.ims-genFoot { grid-column: 1 / -1; border-top: .5px solid var(--dsw-alias-border-l3, rgba(0,0,0,.08)); padding-top: 12px; }
+.ims-naming { display: flex; gap: 8px; margin-bottom: 8px; }
+.ims-submit { width: 100%; min-height: 40px; font-size: 14px; margin-top: 8px; }
+
+/* ── 图片选择器 ── */
+.ims-pickerBackdrop, .ims-detailBackdrop {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--dsw-alias-overlay-bg, rgba(0,0,0,.4));
+}
+.ims-picker, .ims-detail {
+  display: flex;
+  flex-direction: column;
+  width: min(760px, 92%);
+  max-height: 86%;
+  border-radius: 14px;
+  background: var(--dsw-alias-bg-primary, #fff);
+  overflow: hidden;
+}
+.ims-pickerHead, .ims-detailHead {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 14px;
+  border-bottom: .5px solid var(--dsw-alias-border-l3, rgba(0,0,0,.08));
+}
+.ims-pickerTitle { margin: 0; font-size: 14px; }
+.ims-pickerGrid {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
+  gap: 8px;
+  padding: 12px 14px;
+}
+.ims-pickerCell {
+  position: relative;
+  aspect-ratio: 1;
+  border: 2px solid transparent;
+  border-radius: 8px;
+  padding: 0;
+  background: none;
+  cursor: pointer;
+  overflow: hidden;
+}
+.ims-pickerCell img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.ims-pickerCellOn { border-color: var(--dsw-alias-focus-ring, #4d9fff); }
+.ims-pickerMark {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  min-width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  background: var(--dsw-alias-button-primary-fill, #1f2328);
+  color: var(--dsw-alias-button-primary-label, #fff);
+  font-size: 11px;
+  line-height: 18px;
+  text-align: center;
+}
+.ims-pickerFoot {
+  display: flex;
+  flex: none;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 10px 14px;
+  border-top: .5px solid var(--dsw-alias-border-l3, rgba(0,0,0,.08));
+}
+
+/* ── 画廊 ── */
+.ims-gallery { padding: 12px 16px; }
+.ims-gallery[hidden] { display: none; }
+.ims-galleryBar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
+.ims-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 10px;
+}
+.ims-cell {
+  position: relative;
+  aspect-ratio: 1;
+  border: none;
+  border-radius: 10px;
+  padding: 0;
+  background: var(--dsw-alias-bg-secondary, rgba(0,0,0,.04));
+  cursor: pointer;
+  overflow: hidden;
+}
+.ims-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.ims-cellPrompt {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 14px 8px 6px;
+  background: linear-gradient(transparent, rgba(0,0,0,.72));
+  color: #fff;
+  font-size: 11px;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity .15s;
+}
+.ims-cell:hover .ims-cellPrompt, .ims-cell:focus-visible .ims-cellPrompt { opacity: 1; }
+
+/* 详情模态 */
+.ims-detail { width: min(920px, 94%); }
+.ims-detailMeta { font-size: 12px; color: var(--dsw-alias-label-secondary, #57606a); }
+.ims-detailBody {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  display: grid;
+  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+  gap: 16px;
+  padding: 14px;
+}
+.ims-detailImages { display: grid; gap: 10px; align-content: start; }
+.ims-detailFigure { margin: 0; display: grid; gap: 6px; }
+.ims-detailFigure img {
+  width: 100%;
+  border-radius: 10px;
+  background: var(--dsw-alias-bg-secondary, rgba(0,0,0,.04));
+  display: block;
+}
+.ims-detailFigure figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.ims-revised {
+  font-size: 11px;
+  color: var(--dsw-alias-label-secondary, #57606a);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ims-detailInfo { min-width: 0; }
+.ims-detailLabel { margin: 12px 0 6px; font-size: 12px; font-weight: 600; }
+.ims-detailLabel:first-child { margin-top: 0; }
+.ims-detailPrompt { margin: 0; font-size: 13px; white-space: pre-wrap; word-break: break-word; }
+.ims-paramTable { width: 100%; border-collapse: collapse; font-size: 12px; }
+.ims-paramTable td { padding: 4px 6px; border-top: .5px solid var(--dsw-alias-border-l3, rgba(0,0,0,.08)); word-break: break-all; }
+.ims-paramTableKey { font-family: var(--ds-font-family-code, monospace); font-weight: 600; white-space: nowrap; }
+.ims-detailFoot {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 10px 14px;
+  border-top: .5px solid var(--dsw-alias-border-l3, rgba(0,0,0,.08));
+}
+.ims-detailFoot .ims-status { margin: 0 auto 0 0; }
+
+/* ── 任务条 ── */
+.ims-tasks {
+  display: flex;
+  flex: none;
+  gap: 8px;
+  padding: 8px 12px;
+  overflow-x: auto;
+  border-top: .5px solid var(--dsw-alias-border-l3, rgba(0,0,0,.08));
+}
+.ims-task {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 6px;
+  max-width: 340px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: var(--dsw-alias-bg-secondary, rgba(0,0,0,.04));
+  font-size: 12px;
+}
+.ims-taskState { font-weight: 600; flex: none; }
+.ims-taskState-running { color: var(--dsw-alias-status-info, #0969da); }
+.ims-taskState-queued { color: var(--dsw-alias-label-secondary, #57606a); }
+.ims-taskState-succeeded { color: var(--dsw-alias-status-success, #1a7f37); }
+.ims-taskState-failed { color: var(--dsw-alias-status-error, #d1242f); }
+.ims-taskState-cancelled { color: var(--dsw-alias-label-secondary, #57606a); }
+.ims-taskPrompt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ims-taskModel { flex: none; color: var(--dsw-alias-label-secondary, #57606a); font-size: 11px; }
+.ims-taskError {
+  max-width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--dsw-alias-status-error, #d1242f);
+}
+
+/* ── 配置卡片附加件（imsc- 基础类由 cardCss('imsc') 生成）── */
+.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: .5px solid var(--dsw-alias-border-l3, rgba(0,0,0,.08));
+  border-radius: 10px;
+  padding: 10px;
+  margin-bottom: 10px;
+  display: grid;
+  gap: 8px;
+}
+.imsc-presetHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.imsc-presetName { font-size: 13px; font-weight: 600; }
+.imsc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.imsc-textarea {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 64px;
+  padding: 6px 10px;
+  border: .5px solid var(--dsw-alias-border-l2, rgba(0,0,0,.16));
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-primary, #fff);
+  color: var(--dsw-alias-label-primary, #1f2328);
+  font-family: var(--ds-font-family-code, monospace);
+  font-size: 12px;
+  resize: vertical;
+}
+.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-backdrop { align-items: stretch; justify-content: stretch; }
+  .ims-panel { width: 100%; height: 100%; border-radius: 0; }
+  .ims-gen { grid-template-columns: minmax(0, 1fr); }
+  .ims-genSide { margin-top: 4px; }
+  .ims-tab { padding: 0 10px; }
+  .ims-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .ims-detailBody { grid-template-columns: minmax(0, 1fr); }
+  .ims-picker, .ims-detail { width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
+  .ims-pickerBackdrop, .ims-detailBackdrop { align-items: stretch; justify-content: stretch; }
+  .ims-paramControl { width: 108px; }
+  .ims-btn { min-height: 40px; }
+  .ims-btnSmall { min-height: 32px; }
+  .imsc-grid2 { grid-template-columns: 1fr; }
+}
+`;
+		/** 注入面板 + 入口 + 卡片附加样式（重复调用幂等：已存在则跳过）。 */
+		function injectStudioStyles() {
 			if (typeof document === "undefined") return null;
+			if (document.querySelector(`style[data-plugin-css=${JSON.stringify(STYLE_TAG_ID)}]`) !== null) return null;
 			const tag = document.createElement("style");
 			tag.dataset.plugin = PKG;
-			tag.dataset.pluginCss = `${PKG}/${id}`;
-			tag.textContent = css;
+			tag.dataset.pluginCss = STYLE_TAG_ID;
+			tag.textContent = imageStudioCss;
 			document.head.appendChild(tag);
 			return tag;
 		}
 		//#endregion
 		//#region src/client/client.ts
 		const name = "dsh-plus-image-studio";
-		/** 浏览器半需要的 cordis 服务 key（loader 据此注入）。 */
+		/** 浏览器半需要的 cordis 服务 key（loader 据此注入；package.json 的 dsh.client.inject 管包加载顺序）。 */
 		const inject = [
 			"slots",
 			"locale",
 			"remote",
 			"remote.settings"
 		];
+		const PLUGIN_ID = "@dsh-plus/image-studio";
 		function apply(ctx) {
 			const c = ctx;
-			const sectionTag = injectSectionStyle();
-			const cardTag = injectCardStyles();
-			c.effect(() => () => {
-				sectionTag?.remove();
-				cardTag?.remove();
-			}, "image-studio: style");
+			const panelTag = injectStudioStyles();
+			const cardTag = injectCardStyle(PLUGIN_ID, cardCss("imsc"));
+			const controller = createPanelController();
 			c.effect(() => c.locale.register(NS, {
 				zh,
 				en
 			}), "image-studio: locale");
 			const t = c.locale.bind(NS);
-			c.slots.inject("settings.section", () => c.slots.register({
-				name: "settings.section",
-				id: "dsh-plus-image-studio",
-				order: 16,
-				label: () => t("nav"),
-				inject: () => ({ t })
-			}, StudioSection));
+			c.effect(() => c.slots.inject("sidebar.footer.action", () => c.slots.register({
+				name: "sidebar.footer.action",
+				id: "image-studio-entry",
+				locale: NS,
+				inject: () => ({
+					studio: controller,
+					t
+				})
+			}, StudioEntryButton)), "image-studio: entry slot");
+			const scope = createSettingsScope(c, SETTINGS_NS, "image-studio: settings scope");
+			const api = createNamespaceApi(c.get("remote").settings, SETTINGS_NS);
+			c.effect(() => c.slots.inject("shell.overlay", () => c.slots.register({
+				name: "shell.overlay",
+				id: "image-studio-panel",
+				locale: NS,
+				inject: () => ({
+					studio: controller,
+					t,
+					scope,
+					api
+				})
+			}, StudioPanel)), "image-studio: overlay slot");
 			c.slots.inject("settings.plugin.item", () => c.slots.register({
 				name: "settings.plugin.item",
-				key: "dsh-plus-image-studio",
+				key: SETTINGS_NS,
 				locale: NS,
-				inject: () => ({ t })
+				inject: () => ({
+					t,
+					scope,
+					api
+				})
 			}, StudioConfigCard));
+			c.effect(() => () => {
+				panelTag?.remove();
+				cardTag?.remove();
+			}, "image-studio: cleanup");
 		}
 		//#endregion
 		exports.apply = apply;