@dsh-plus/image-studio 0.1.1 → 0.1.3

package/lib/client.js

@@ -1718,19 +1718,17 @@ ${extra}
 				});
 			};
 			const paramRows = Object.entries(item.params);
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "ims-detailBackdrop",
-				role: "presentation",
-				onClick: onClose,
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Modal, {
+				open: true,
+				onClose,
+				title: item.prompt.slice(0, 40),
+				headless: true,
+				className: "ims-detailModal",
 				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(),
+					className: "ims-sub",
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "ims-detailHead",
+							className: "ims-subHead",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 								className: "ims-detailMeta",
 								children: [
@@ -1823,7 +1821,7 @@ ${extra}
 							})]
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "ims-detailFoot",
+							className: "ims-subFoot",
 							children: [
 								error !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 									className: "ims-status ims-statusError",
@@ -2189,21 +2187,19 @@ ${extra}
 				}
 				setSelected((current) => current.includes(imageId) ? [] : [imageId]);
 			};
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "ims-pickerBackdrop",
-				role: "presentation",
-				onClick: onClose,
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Modal, {
+				open: true,
+				onClose,
+				title,
+				headless: true,
+				className: "ims-pickerModal",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "ims-picker",
-					role: "dialog",
-					"aria-modal": "true",
-					"aria-label": title,
-					onClick: (event) => event.stopPropagation(),
+					className: "ims-sub",
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "ims-pickerHead",
+							className: "ims-subHead",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-								className: "ims-pickerTitle",
+								className: "ims-subTitle",
 								children: title
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
@@ -2240,7 +2236,7 @@ ${extra}
 							})
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "ims-pickerFoot",
+							className: "ims-subFoot",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
 								className: "ims-btn ims-btnPrimary",
@@ -2829,6 +2825,15 @@ ${extra}
 		}
 		//#endregion
 		//#region src/client/panel/panel.tsx
+		/**
+		* 图像工作室面板根组件：侧栏 footer 入口打开的 overlay 工作台。
+		* 三个标签（文生图/图生图/画廊）+ 底部任务条；两个生图表单常驻挂载
+		* （hidden 切换，保留各自表单态）。数据归口：providers 一次性加载，
+		* presets/gallery/tasks 面板打开时加载，任务 2s 轮询并侦测成功转移
+		* 自动刷画廊。
+		* 响应式：桌面居中模态（≤1100px），≤767px 全屏抽屉（见 styles.ts）。
+		* @module image-studio/client/panel/panel
+		*/
 		const EMPTY_PRESETS = {
 			promptPresets: [],
 			paramPresets: [],
@@ -2887,7 +2892,6 @@ ${extra}
 				reloadGallery,
 				reloadTasks
 			]);
-			if (!open) return null;
 			const catalog = providers?.params ?? [];
 			const protocols = providers?.protocols ?? [];
 			const tabs = [
@@ -2907,16 +2911,14 @@ ${extra}
 					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),
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Modal, {
+				open,
+				onClose: () => studio.setOpen(false),
+				title: t("panel.title"),
+				headless: true,
+				className: "ims-modal",
 				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",
@@ -3007,10 +3009,11 @@ ${extra}
 		//#endregion
 		//#region src/client/styles.ts
 		/**
-		* 图像工作室前端样式：侧栏入口 + overlay 工作台 + 配置卡片附加件。
-		* 全部颜色引用 --dsw-* 设计令牌（跟随原生深浅色主题）；响应式断点 767px
-		* 与 @dsh-plus/ui-mobile-fit 对齐（移动端面板全屏、生图表单单列、画廊两列）。
-		* 注入沿用 <style data-plugin data-plugin-css> 约定（HMR 可卸载）。
+		* 图像工作室前端样式：侧栏入口 + 工作台（官方 Modal 承载）+ 配置卡片附加件。
+		* 设计令牌仅用 dsh-client-ui-theme 实测存在的 --dsw-alias-*（深浅色自适应）；
+		* 模态骨架（遮罩/Escape/portal 层叠）由官方 Modal 原语承载，本表只覆写尺寸
+		* 与内部布局（.ims-modal 等，模式同 web-files/web-terminal 的 wf-/wt-modal）。
+		* 响应式断点 767px 与 @dsh-plus/ui-mobile-fit 对齐（移动端全屏、单列、44px 热区）。
 		* @module image-studio/client/styles
 		*/
 		const PKG = "@dsh-plus/image-studio";
@@ -3031,14 +3034,14 @@ ${extra}
   border: none;
   border-radius: 12px;
   background: transparent;
-  color: var(--dsw-alias-label-primary, #1f2328);
+  color: var(--dsw-alias-label-primary);
   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:hover { background: var(--dsw-alias-interactive-bg-hover); }
 .ims-entry-rail {
   flex: none;
   width: 36px;
@@ -3051,26 +3054,26 @@ ${extra}
 }
 .ims-entry-label { white-space: nowrap; overflow: hidden; }
 
-/* ── 面板骨架 ── */
-.ims-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 60;
+/* ── 工作台模态尺寸覆写（官方 Modal headless 卡片）── */
+.ims-modal {
+  width: min(1100px, 94vw) !important;
+  max-width: none !important;
+  height: min(780px, 88vh);
+  padding: 0 !important;
+  gap: 0 !important;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--dsw-alias-overlay-bg, rgba(0,0,0,.4));
+  flex-direction: column;
+  overflow: hidden;
 }
+
+/* ── 面板骨架 ── */
 .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;
+  height: 100%;
+  min-height: 0;
+  position: relative;
+  color: var(--dsw-alias-label-primary);
 }
 .ims-head {
   display: flex;
@@ -3078,7 +3081,7 @@ ${extra}
   align-items: center;
   gap: 8px;
   padding: 10px 12px;
-  border-bottom: .5px solid var(--dsw-alias-border-l3, rgba(0,0,0,.08));
+  border-bottom: 1px solid var(--dsw-alias-border-l3);
 }
 .ims-tabs { display: flex; flex: 1; gap: 4px; min-width: 0; }
 .ims-tab {
@@ -3090,16 +3093,16 @@ ${extra}
   border: none;
   border-radius: 10px;
   background: transparent;
-  color: var(--dsw-alias-label-secondary, #57606a);
+  color: var(--dsw-alias-label-secondary);
   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-tab:hover { background: var(--dsw-alias-interactive-bg-hover); }
 .ims-tabActive {
-  background: var(--dsw-alias-button-elevated-fill, rgba(0,0,0,.06));
-  color: var(--dsw-alias-label-primary, #1f2328);
+  background: var(--dsw-alias-button-elevated-fill);
+  color: var(--dsw-alias-label-primary);
   font-weight: 500;
 }
 .ims-iconBtn {
@@ -3112,10 +3115,10 @@ ${extra}
   border: none;
   border-radius: 8px;
   background: transparent;
-  color: var(--dsw-alias-label-primary, #1f2328);
+  color: var(--dsw-alias-label-primary);
   cursor: pointer;
 }
-.ims-iconBtn:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(0,0,0,.06)); }
+.ims-iconBtn:hover { background: var(--dsw-alias-interactive-bg-hover); }
 .ims-body { flex: 1; min-height: 0; overflow-y: auto; }
 
 /* ── 通用件 ── */
@@ -3124,15 +3127,15 @@ ${extra}
   width: 100%;
   min-height: 34px;
   padding: 6px 10px;
-  border: .5px solid var(--dsw-alias-border-l2, rgba(0,0,0,.16));
+  border: 1px solid var(--dsw-alias-border-l2);
   border-radius: 8px;
-  background: var(--dsw-alias-bg-primary, #fff);
-  color: var(--dsw-alias-label-primary, #1f2328);
+  background: var(--dsw-alias-bg-layer-3);
+  color: var(--dsw-alias-label-primary);
   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-input:focus { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: 0; }
 .ims-btn {
   display: inline-flex;
   align-items: center;
@@ -3150,23 +3153,24 @@ ${extra}
 }
 .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);
+  background: var(--dsw-alias-button-primary-fill);
+  color: var(--dsw-alias-label-primary-inverted);
 }
+.ims-btnPrimary:hover:not(:disabled) { background: var(--dsw-alias-button-primary-hover); }
 .ims-btnGhost {
   background: transparent;
-  color: var(--dsw-alias-label-primary, #1f2328);
-  border: .5px solid var(--dsw-alias-border-l2, rgba(0,0,0,.16));
+  color: var(--dsw-alias-label-primary);
+  border: 1px solid var(--dsw-alias-border-l2);
 }
-.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-btnGhost:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover); }
+.ims-btnDanger { background: var(--dsw-alias-state-error-primary); color: var(--dsw-alias-label-primary-inverted); }
 .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-hint { margin: 4px 0 0; font-size: 12px; color: var(--dsw-alias-label-tertiary); }
 .ims-empty {
   padding: 32px 16px;
   text-align: center;
   font-size: 13px;
-  color: var(--dsw-alias-label-secondary, #57606a);
+  color: var(--dsw-alias-label-tertiary);
 }
 .ims-badge {
   flex: none;
@@ -3175,10 +3179,10 @@ ${extra}
   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-badgeOn { background: var(--dsw-alias-state-success-secondary); color: var(--dsw-alias-state-success-primary); }
+.ims-badgeOff { background: var(--dsw-alias-state-error-secondary); color: var(--dsw-alias-state-error-primary); }
+.ims-status { margin: 8px 0 0; font-size: 12px; color: var(--dsw-alias-state-success-primary); }
+.ims-statusError { color: var(--dsw-alias-state-error-primary); }
 .ims-spin { animation: ims-rotate 1s linear infinite; }
 @keyframes ims-rotate { to { transform: rotate(360deg); } }
 
@@ -3205,7 +3209,7 @@ ${extra}
   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-mini { display: grid; gap: 4px; font-size: 12px; color: var(--dsw-alias-label-secondary); }
 .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; }
@@ -3219,20 +3223,21 @@ ${extra}
   padding: 6px 8px;
   border-radius: 8px;
 }
-.ims-paramRowOn { background: var(--dsw-alias-bg-secondary, rgba(0,0,0,.04)); }
+.ims-paramRowOn { background: var(--dsw-alias-bg-layer-1); }
 .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-paramKey { font-size: 12px; font-weight: 600; font-family: var(--ds-font-family-code); }
 .ims-paramGen {
   margin-left: 6px;
   padding: 0 5px;
   border-radius: 4px;
-  background: var(--dsw-alias-bg-tertiary, rgba(0,0,0,.08));
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-secondary);
   font-size: 10px;
   font-weight: 400;
 }
 .ims-paramDesc {
   font-size: 11px;
-  color: var(--dsw-alias-label-secondary, #57606a);
+  color: var(--dsw-alias-label-tertiary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -3244,15 +3249,15 @@ ${extra}
   font-size: 12px;
   font-weight: 600;
   padding: 6px 0;
-  color: var(--dsw-alias-label-secondary, #57606a);
+  color: var(--dsw-alias-label-secondary);
   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);
+  background: var(--dsw-alias-button-primary-fill);
+  color: var(--dsw-alias-label-primary-inverted);
   font-size: 10px;
 }
 
@@ -3263,7 +3268,7 @@ ${extra}
   position: absolute;
   inset: 0;
   border-radius: 999px;
-  background: var(--dsw-alias-border-l1, rgba(0,0,0,.24));
+  background: var(--dsw-alias-bg-module-platform);
   transition: background .15s;
   pointer-events: none;
 }
@@ -3275,10 +3280,10 @@ ${extra}
   width: 14px;
   height: 14px;
   border-radius: 50%;
-  background: #fff;
+  background: var(--dsw-alias-label-primary);
   transition: transform .15s;
 }
-.ims-switch input:checked + .ims-switchTrack { background: var(--dsw-alias-status-success, #1a7f37); }
+.ims-switch input:checked + .ims-switchTrack { background: var(--dsw-alias-brand-primary); }
 .ims-switch input:checked + .ims-switchTrack::after { transform: translateX(12px); }
 
 /* 源图/遮罩缩略 */
@@ -3307,49 +3312,64 @@ ${extra}
   gap: 4px;
   width: 64px;
   height: 64px;
-  border: 1px dashed var(--dsw-alias-border-l1, rgba(0,0,0,.24));
+  border: 1px dashed var(--dsw-alias-border-l1);
   border-radius: 8px;
   background: transparent;
-  color: var(--dsw-alias-label-secondary, #57606a);
+  color: var(--dsw-alias-label-secondary);
   font-size: 11px;
   cursor: pointer;
 }
-.ims-thumbAdd:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(0,0,0,.06)); }
+.ims-thumbAdd:hover { background: var(--dsw-alias-interactive-bg-hover); }
 
 /* 提交区 */
-.ims-genFoot { grid-column: 1 / -1; border-top: .5px solid var(--dsw-alias-border-l3, rgba(0,0,0,.08)); padding-top: 12px; }
+.ims-genFoot { grid-column: 1 / -1; border-top: 1px solid var(--dsw-alias-border-l3); 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));
+/* ── 子模态（图片选择器 / 画廊详情，官方 Modal 承载）── */
+.ims-pickerModal {
+  width: min(760px, 92vw) !important;
+  max-width: none !important;
+  max-height: 86vh;
+  padding: 0 !important;
+  gap: 0 !important;
 }
-.ims-picker, .ims-detail {
+.ims-detailModal {
+  width: min(920px, 94vw) !important;
+  max-width: none !important;
+  max-height: 88vh;
+  padding: 0 !important;
+  gap: 0 !important;
+}
+.ims-sub {
   display: flex;
   flex-direction: column;
-  width: min(760px, 92%);
-  max-height: 86%;
-  border-radius: 14px;
-  background: var(--dsw-alias-bg-primary, #fff);
-  overflow: hidden;
+  min-height: 0;
+  max-height: inherit;
+  color: var(--dsw-alias-label-primary);
 }
-.ims-pickerHead, .ims-detailHead {
+.ims-subHead {
   display: flex;
   flex: none;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--dsw-alias-border-l3);
+}
+.ims-subTitle { margin: 0; font-size: 14px; }
+.ims-subFoot {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
   padding: 10px 14px;
-  border-bottom: .5px solid var(--dsw-alias-border-l3, rgba(0,0,0,.08));
+  border-top: 1px solid var(--dsw-alias-border-l3);
 }
-.ims-pickerTitle { margin: 0; font-size: 14px; }
+.ims-subFoot .ims-status { margin: 0 auto 0 0; }
+
+/* 选择器网格 */
 .ims-pickerGrid {
   flex: 1;
   min-height: 0;
@@ -3370,7 +3390,7 @@ ${extra}
   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-pickerCellOn { border-color: var(--dsw-alias-brand-primary); }
 .ims-pickerMark {
   position: absolute;
   top: 4px;
@@ -3378,20 +3398,12 @@ ${extra}
   min-width: 18px;
   height: 18px;
   border-radius: 999px;
-  background: var(--dsw-alias-button-primary-fill, #1f2328);
-  color: var(--dsw-alias-button-primary-label, #fff);
+  background: var(--dsw-alias-button-primary-fill);
+  color: var(--dsw-alias-label-primary-inverted);
   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; }
@@ -3408,7 +3420,7 @@ ${extra}
   border: none;
   border-radius: 10px;
   padding: 0;
-  background: var(--dsw-alias-bg-secondary, rgba(0,0,0,.04));
+  background: var(--dsw-alias-bg-layer-1);
   cursor: pointer;
   overflow: hidden;
 }
@@ -3431,9 +3443,8 @@ ${extra}
 }
 .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-detailMeta { font-size: 12px; color: var(--dsw-alias-label-tertiary); }
 .ims-detailBody {
   flex: 1;
   min-height: 0;
@@ -3448,13 +3459,13 @@ ${extra}
 .ims-detailFigure img {
   width: 100%;
   border-radius: 10px;
-  background: var(--dsw-alias-bg-secondary, rgba(0,0,0,.04));
+  background: var(--dsw-alias-bg-layer-1);
   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);
+  color: var(--dsw-alias-label-tertiary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -3464,18 +3475,8 @@ ${extra}
 .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-paramTable td { padding: 4px 6px; border-top: 1px solid var(--dsw-alias-border-l3); word-break: break-all; }
+.ims-paramTableKey { font-family: var(--ds-font-family-code); font-weight: 600; white-space: nowrap; }
 
 /* ── 任务条 ── */
 .ims-tasks {
@@ -3483,8 +3484,9 @@ ${extra}
   flex: none;
   gap: 8px;
   padding: 8px 12px;
+  margin: 0;
   overflow-x: auto;
-  border-top: .5px solid var(--dsw-alias-border-l3, rgba(0,0,0,.08));
+  border-top: 1px solid var(--dsw-alias-border-l3);
 }
 .ims-task {
   display: inline-flex;
@@ -3494,30 +3496,30 @@ ${extra}
   max-width: 340px;
   padding: 4px 10px;
   border-radius: 999px;
-  background: var(--dsw-alias-bg-secondary, rgba(0,0,0,.04));
+  background: var(--dsw-alias-bg-layer-1);
   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-taskState-running { color: var(--dsw-alias-brand-primary); }
+.ims-taskState-queued { color: var(--dsw-alias-label-tertiary); }
+.ims-taskState-succeeded { color: var(--dsw-alias-state-success-primary); }
+.ims-taskState-failed { color: var(--dsw-alias-state-error-primary); }
+.ims-taskState-cancelled { color: var(--dsw-alias-label-tertiary); }
 .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-taskModel { flex: none; color: var(--dsw-alias-label-tertiary); font-size: 11px; }
 .ims-taskError {
   max-width: 140px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--dsw-alias-status-error, #d1242f);
+  color: var(--dsw-alias-state-error-primary);
 }
 
 /* ── 配置卡片附加件（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: 1px solid var(--dsw-alias-border-l3);
   border-radius: 10px;
   padding: 10px;
   margin-bottom: 10px;
@@ -3532,11 +3534,11 @@ ${extra}
   width: 100%;
   min-height: 64px;
   padding: 6px 10px;
-  border: .5px solid var(--dsw-alias-border-l2, rgba(0,0,0,.16));
+  border: 1px solid var(--dsw-alias-border-l2);
   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);
+  background: var(--dsw-alias-bg-layer-3);
+  color: var(--dsw-alias-label-primary);
+  font-family: var(--ds-font-family-code);
   font-size: 12px;
   resize: vertical;
 }
@@ -3545,15 +3547,32 @@ ${extra}
 
 /* ── 移动端（≤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-modal {
+    position: fixed;
+    inset: 0;
+    margin: 0;
+    width: 100% !important;
+    max-width: none !important;
+    height: 100%;
+    max-height: none;
+    border: none;
+    border-radius: 0 !important;
+  }
   .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-pickerModal, .ims-detailModal {
+    position: fixed;
+    inset: 0;
+    width: 100% !important;
+    max-width: none !important;
+    max-height: none;
+    height: 100%;
+    border: none;
+    border-radius: 0 !important;
+  }
   .ims-paramControl { width: 108px; }
   .ims-btn { min-height: 40px; }
   .ims-btnSmall { min-height: 32px; }

package/lib/index.d.ts

@@ -161,7 +161,7 @@ interface PresetsWire {
 //#endregion
 //#region src/service.d.ts
 declare class ImageStudioService extends Service {
-  static [Context.inject]: string[];
+  static inject: string[];
   private current;
   private readonly runner;
   private readonly log;