dsh-image-gen 0.6.8 → 0.6.10

package/lib/client.js

@@ -87,6 +87,8 @@ window.__ModuleLoader__.load({
 		const TEST_CONNECTION_ROUTE = "/plugins/dsh-image-gen/test";
 		/** Browser route the workbench infinite canvas pushes live state through. */
 		const CANVAS_STATE_ROUTE = "/plugins/dsh-image-gen/canvas-state";
+		/** Upload a selected canvas original to the host attachment store. */
+		const CANVAS_ASSET_ROUTE = "/plugins/dsh-image-gen/canvas-asset";
 		const SUBSCRIPTION_LOGIN_ROUTE = "/plugins/dsh-image-gen/subscription-login";
 		const SUBSCRIPTION_STATUS_ROUTE = "/plugins/dsh-image-gen/subscription-status";
 		/** Namespace persisted through DSH Settings. */
@@ -320,6 +322,7 @@ window.__ModuleLoader__.load({
 					resolve(request.result);
 				};
 				request.onerror = () => {
+					dbPromise = null;
 					reject(request.error);
 				};
 			});
@@ -370,11 +373,13 @@ window.__ModuleLoader__.load({
 		* Save or update a gallery record by attachmentId.
 		* Skipped if the item was previously deleted (tombstoned).
 		* Preserves existing isFavorite, tags, and original createdAt on re-renders.
+		* Returns false when the record was not persisted (e.g. IndexedDB unavailable)
+		* so callers can surface the failure and let the user retry.
 		*/
 		async function saveGalleryItem(item) {
 			try {
 				const db = await getDB();
-				if ((await loadTombstones(db)).has(item.id)) return;
+				if ((await loadTombstones(db)).has(item.id)) return true;
 				await new Promise((resolve, reject) => {
 					const store = db.transaction(STORE_NAME, "readwrite").objectStore(STORE_NAME);
 					const getReq = store.get(item.id);
@@ -398,8 +403,10 @@ window.__ModuleLoader__.load({
 					getReq.onerror = () => reject(getReq.error);
 				});
 				notifyListeners();
+				return true;
 			} catch (err) {
 				console.warn("[dsh-image-gen] Failed to save gallery item to IndexedDB:", err);
+				return false;
 			}
 		}
 		/**
@@ -115633,16 +115640,113 @@ img.ProseMirror-separator {
 			});
 		}
 		//#endregion
+		//#region lib/types/client/tl/canvas-selection.js
+		/** Bound raster dimensions before exporting; large multi-image PNGs get a
+		* JPEG preview instead of being silently discarded. Originals are separate. */
+		async function exportSelectionPreview(editor, shapes, maxBytes, signal) {
+			const bounds = editor.getSelectionPageBounds();
+			const scale = Math.min(1, 2048 / Math.max(1, (bounds?.w ?? 2048) + 32, (bounds?.h ?? 2048) + 32));
+			const attempts = [
+				{
+					format: "png",
+					scale,
+					quality: 1
+				},
+				{
+					format: "jpeg",
+					scale,
+					quality: .85
+				},
+				{
+					format: "jpeg",
+					scale: scale * .75,
+					quality: .7
+				},
+				{
+					format: "jpeg",
+					scale: scale * .5,
+					quality: .6
+				},
+				{
+					format: "jpeg",
+					scale: scale * .25,
+					quality: .5
+				}
+			];
+			const maxChars = Math.floor(Math.min(maxBytes, 4e6) / 3) * 4;
+			for (const attempt of attempts) {
+				signal.throwIfAborted();
+				const { url } = await editor.toImageDataUrl(shapes, {
+					background: true,
+					padding: 16,
+					pixelRatio: 1,
+					...attempt
+				});
+				signal.throwIfAborted();
+				if (url.length - url.indexOf(",") - 1 <= maxChars) return url;
+			}
+			throw new Error("preview-too-large");
+		}
+		async function readCanvasImageLimit(signal) {
+			const response = await fetch(CANVAS_ASSET_ROUTE, {
+				credentials: "same-origin",
+				signal
+			});
+			if (!response.ok) throw new Error(`host-unavailable (${response.status})`);
+			const value = await response.json();
+			if (typeof value.maxImageBytes !== "number" || !Number.isSafeInteger(value.maxImageBytes) || value.maxImageBytes <= 0) throw new Error("host-unavailable");
+			return value.maxImageBytes;
+		}
+		/** Use tldraw's resolver for IndexedDB-backed imports, not just asset.props.src.
+		* Upload each original once per mount/source, with individual byte limits. */
+		async function syncCanvasOriginal(editor, shape, maxBytes, signal, cache) {
+			if (shape.type !== "image" || shape.props.assetId === null) throw new Error("original-unavailable");
+			const asset = editor.getAsset(shape.props.assetId);
+			if (asset?.type !== "image") throw new Error("original-unavailable");
+			const cached = cache.get(asset.id);
+			if (cached?.src === asset.props.src) return cached.attachment;
+			const url = await editor.resolveAssetUrl(asset.id, { shouldResolveToOriginal: true });
+			signal.throwIfAborted();
+			if (url === null) throw new Error("original-unavailable");
+			const response = await fetch(url, { signal });
+			if (!response.ok) throw new Error("original-unavailable");
+			const blob = await response.blob();
+			if (blob.size > maxBytes) throw new Error("original-too-large");
+			const mediaType = blob.type || asset.props.mimeType || "";
+			if (![
+				"image/png",
+				"image/jpeg",
+				"image/webp",
+				"image/gif"
+			].includes(mediaType)) throw new Error("original-format-unsupported");
+			const uploaded = await fetch(CANVAS_ASSET_ROUTE, {
+				method: "POST",
+				credentials: "same-origin",
+				headers: { "content-type": mediaType },
+				body: blob,
+				signal
+			});
+			if (!uploaded.ok) throw new Error(uploaded.status === 413 ? "original-too-large" : `original-upload-failed (${uploaded.status})`);
+			const ref = (await uploaded.json()).attachment;
+			if (!ref || typeof ref.attachmentId !== "string" || ![
+				"image/png",
+				"image/jpeg",
+				"image/webp",
+				"image/gif"
+			].includes(ref.mediaType) || !Number.isSafeInteger(ref.bytes) || ref.bytes <= 0 || !Number.isInteger(ref.width) || ref.width <= 0 || !Number.isInteger(ref.height) || ref.height <= 0) throw new Error("original-upload-failed");
+			cache.set(asset.id, {
+				src: asset.props.src,
+				attachment: ref
+			});
+			return ref;
+		}
+		//#endregion
 		//#region lib/types/client/tl/canvas-sync.js
 		/** Debounce for ordinary document/session changes. */
 		const STATE_DEBOUNCE_MS = 600;
 		/** Extra settle time before an expensive selection screenshot export. */
 		const SELECTION_EXPORT_DELAY_MS = 1200;
-		/** Minimum spacing between two HTTP pushes. */
-		const MIN_PUSH_INTERVAL_MS = 400;
 		const MAX_TEXT_CHARS = 96;
-		/** Hard cap on the exported screenshot payload (base64 chars, ~5MB binary). */
-		const MAX_SCREENSHOT_DATAURL_CHARS = 7e6;
 		/** Map a tldraw shape type onto the coarse model-facing node kind. */
 		function kindOf(shapeType) {
 			switch (shapeType) {
@@ -115749,69 +115853,66 @@ img.ProseMirror-separator {
 			const ids = editor.getSelectedShapeIds().map(String).sort().join("|");
 			return ids.length === 0 ? "none" : ids;
 		}
-		/**
-		* Start mirroring one editor into the host canvas-state route.
-		* Returns a disposer that stops listening and marks the instance offline.
-		*/
-		function startCanvasSync(editor) {
-			const clientInstance = String(editor.id);
+		function startCanvasSync(editor, onStatus = () => {}) {
+			const clientInstance = `${String(editor.id).slice(0, 36)}-${Math.random().toString(36).slice(2, 10)}`;
 			let disposed = false;
 			let stateTimer;
 			let exportTimer;
 			let lastPushKey = "";
-			let lastSelectionKey = "init";
-			let lastPostAt = 0;
-			let inFlight;
-			const stopListening = editor.store.listen(() => {
+			let lastSelectionKey = selectionKeyOf(editor);
+			let revision = 0;
+			let sequence = 0;
+			let imageLimit;
+			let inFlight = new AbortController();
+			let exporting = false;
+			let exportAgain = false;
+			let prepared = {};
+			const originalCache = /* @__PURE__ */ new Map();
+			let preparedItems;
+			const stopListening = editor.store.listen((event) => {
 				if (disposed) return;
-				const selectionKey = selectionKeyOf(editor);
-				if (selectionKey !== lastSelectionKey) {
-					lastSelectionKey = selectionKey;
-					if (exportTimer !== void 0) clearTimeout(exportTimer);
-					exportTimer = setTimeout(() => {
-						exportTimer = void 0;
-						flush(true);
-					}, SELECTION_EXPORT_DELAY_MS);
+				const key = selectionKeyOf(editor);
+				const changes = event.changes;
+				const documentChanged = [
+					...Object.values(changes.added),
+					...Object.values(changes.removed),
+					...Object.values(changes.updated).map((pair) => pair[1])
+				].some((record) => record.typeName === "shape" || record.typeName === "asset" || record.typeName === "page");
+				if (key !== lastSelectionKey || documentChanged) {
+					lastSelectionKey = key;
+					invalidate();
 				}
 				if (stateTimer === void 0) stateTimer = setTimeout(() => {
 					stateTimer = void 0;
-					flush(false);
+					pushState();
 				}, STATE_DEBOUNCE_MS);
 			}, {
 				source: "all",
 				scope: "all"
 			});
-			async function flush(withScreenshot) {
+			function invalidate() {
+				revision++;
+				inFlight.abort();
+				inFlight = new AbortController();
+				prepared = {};
+				preparedItems = void 0;
+				const count = editor.getSelectedShapeIds().length;
+				onStatus({
+					phase: count > 0 ? "preparing" : "idle",
+					count
+				});
+				if (exportTimer !== void 0) clearTimeout(exportTimer);
+				if (count > 0) exportTimer = setTimeout(() => {
+					exportTimer = void 0;
+					prepare();
+				}, SELECTION_EXPORT_DELAY_MS);
+			}
+			async function pushState(force = false) {
 				if (disposed) return;
+				const currentRevision = revision;
 				const summary = summarize(editor);
-				if (!withScreenshot && summary.stateKey === lastPushKey) return;
-				const elapsed = Date.now() - lastPostAt;
-				if (elapsed < MIN_PUSH_INTERVAL_MS) {
-					if (stateTimer !== void 0) clearTimeout(stateTimer);
-					stateTimer = setTimeout(() => {
-						stateTimer = void 0;
-						flush(withScreenshot);
-					}, MIN_PUSH_INTERVAL_MS - elapsed);
-					return;
-				}
-				let selectionImage;
-				if (withScreenshot && summary.selectionCount > 0) try {
-					const selectedBefore = editor.getSelectedShapes();
-					const { url } = await editor.toImageDataUrl(selectedBefore, {
-						background: true,
-						padding: 16,
-						scale: 1,
-						pixelRatio: 2
-					});
-					if (disposed) return;
-					const selectedAfter = editor.getSelectedShapes();
-					const idsBefore = new Set(selectedBefore.map((shape) => String(shape.id)));
-					if (!(selectedBefore.length === selectedAfter.length && selectedAfter.every((shape) => idsBefore.has(String(shape.id))))) return;
-					if (url.length > MAX_SCREENSHOT_DATAURL_CHARS) console.warn("[dsh-image-gen] canvas selection screenshot skipped: too large");
-					else selectionImage = url;
-				} catch (error) {
-					console.warn("[dsh-image-gen] canvas selection screenshot failed:", error);
-				}
+				const key = `${revision}:${summary.stateKey}`;
+				if (!force && key === lastPushKey) return;
 				const payload = {
 					clientInstance,
 					connected: true,
@@ -115820,43 +115921,104 @@ img.ProseMirror-separator {
 					selection: {
 						count: summary.selectionCount,
 						kinds: summary.selectionKinds,
-						items: summary.selectionItems
+						items: preparedItems ?? summary.selectionItems
 					},
+					selectionRevision: String(revision),
+					...summary.selectionCount > 0 ? { selectionStatus: "preparing" } : {},
+					...prepared,
+					sequence: ++sequence,
 					updatedAt: Date.now()
 				};
-				if (selectionImage !== void 0) payload.selectionImage = selectionImage;
-				lastPushKey = summary.stateKey;
-				lastPostAt = Date.now();
-				const controller = new AbortController();
-				inFlight = controller;
+				const requestSequence = sequence;
 				try {
-					await fetch(CANVAS_STATE_ROUTE, {
+					const response = await fetch(CANVAS_STATE_ROUTE, {
 						method: "POST",
 						credentials: "same-origin",
 						headers: { "content-type": "application/json" },
 						body: JSON.stringify(payload),
-						signal: controller.signal
+						signal: AbortSignal.any([inFlight.signal, AbortSignal.timeout(3e4)])
+					});
+					if (!response.ok) throw new Error(`state-sync-failed (${response.status})`);
+					if (disposed || revision !== currentRevision || sequence !== requestSequence) return;
+					lastPushKey = key;
+					onStatus({
+						phase: payload.selectionStatus ?? "idle",
+						count: summary.selectionCount,
+						...payload.selectionError ? { error: payload.selectionError } : {}
 					});
 				} catch (error) {
-					if (!disposed) console.warn("[dsh-image-gen] canvas state push failed:", error);
+					if (disposed || revision !== currentRevision || sequence !== requestSequence) return;
 					lastPushKey = "";
+					onStatus({
+						phase: "error",
+						count: summary.selectionCount,
+						error: error instanceof Error ? error.message : "state-sync-failed"
+					});
+				}
+			}
+			async function prepare() {
+				if (disposed) return;
+				if (exporting) {
+					exportAgain = true;
+					return;
+				}
+				exporting = true;
+				const currentRevision = revision;
+				const signal = AbortSignal.any([inFlight.signal, AbortSignal.timeout(3e4)]);
+				const shapes = editor.getSelectedShapes();
+				const items = shapes.slice(0, 16).map((shape) => describeShape(editor, shape));
+				let selectionImage;
+				let failure;
+				try {
+					imageLimit ??= await readCanvasImageLimit(signal);
+					try {
+						selectionImage = await exportSelectionPreview(editor, shapes, imageLimit, signal);
+					} catch (error) {
+						signal.throwIfAborted();
+						failure = error instanceof Error ? error.message : "preview-export-failed";
+					}
+					if (shapes.length > 16 && shapes.some((shape) => shape.type === "image")) throw new Error("too-many-selected-shapes");
+					for (const [index, shape] of shapes.entries()) {
+						signal.throwIfAborted();
+						if (shape.type !== "image") continue;
+						const item = items[index];
+						if (item === void 0) continue;
+						const attachment = await syncCanvasOriginal(editor, shape, imageLimit, signal, originalCache);
+						item.attachment = attachment;
+						item.attachmentId = attachment.attachmentId;
+					}
+				} catch (error) {
+					failure = error instanceof Error ? error.message : "selection-sync-failed";
+				} finally {
+					exporting = false;
+				}
+				if (!disposed && revision === currentRevision) {
+					preparedItems = items;
+					prepared = {
+						selectionStatus: failure === void 0 ? "ready" : "error",
+						...failure === void 0 ? {} : { selectionError: failure.slice(0, 300) },
+						...selectionImage === void 0 ? {} : { selectionImage }
+					};
+					await pushState(true);
+				}
+				if (exportAgain && !disposed) {
+					exportAgain = false;
+					prepare();
 				}
 			}
+			invalidate();
 			stateTimer = setTimeout(() => {
 				stateTimer = void 0;
-				flush(false);
+				pushState();
 			}, STATE_DEBOUNCE_MS);
-			if (editor.getSelectedShapeIds().length > 0) exportTimer = setTimeout(() => {
-				exportTimer = void 0;
-				flush(true);
-			}, SELECTION_EXPORT_DELAY_MS);
-			return () => {
+			const stop = () => {
 				if (disposed) return;
 				disposed = true;
 				if (stateTimer !== void 0) clearTimeout(stateTimer);
 				if (exportTimer !== void 0) clearTimeout(exportTimer);
 				stopListening();
-				inFlight?.abort();
+				inFlight.abort();
+				originalCache.clear();
 				fetch(CANVAS_STATE_ROUTE, {
 					method: "POST",
 					credentials: "same-origin",
@@ -115866,10 +116028,15 @@ img.ProseMirror-separator {
 						clientInstance,
 						connected: false,
 						nodeCount: 0,
+						sequence: ++sequence,
 						updatedAt: Date.now()
 					})
 				}).catch(() => {});
 			};
+			return Object.assign(stop, { retry: () => {
+				invalidate();
+				pushState(true);
+			} });
 		}
 		//#endregion
 		//#region lib/types/client/tl/tl-canvas-bridge.js
@@ -116112,56 +116279,84 @@ img.ProseMirror-separator {
 			}
 			return true;
 		}
-		const StudioTlCanvas = (0, react.memo)(function StudioTlCanvas() {
+		const TL_COMPONENTS = { Toolbar: StudioToolbar };
+		const StudioTlCanvas = (0, react.memo)(function StudioTlCanvas({ lang = "zh" }) {
 			const sessionId = (0, react.useId)();
-			return (0, react_jsx_runtime.jsx)("div", {
+			const [syncStatus, setSyncStatus] = (0, react.useState)({
+				phase: "idle",
+				count: 0
+			});
+			const retrySync = (0, react.useRef)(() => {});
+			const onMount = (0, react.useCallback)((editor) => {
+				let active = true;
+				applyBrandTheme(editor);
+				editor.updateInstanceState({ isGridMode: true });
+				console.info(`[dsh-image-gen] tldraw mounted (instance ${editor.id})`);
+				const stopLanding = registerTlLandingConsumer((items) => {
+					const generation = getTlLandingGeneration();
+					return landTlItems(editor, items, () => active && generation === getTlLandingGeneration());
+				});
+				let stopSync = startCanvasSync(editor, setSyncStatus);
+				retrySync.current = () => stopSync.retry();
+				const clear = () => {
+					stopSync();
+					editor.complete();
+					editor.run(() => {
+						editor.selectNone();
+						const pages = editor.getPages();
+						for (const page of pages) editor.deleteShapes([...editor.getPageShapeIds(page.id)]);
+						for (const page of pages.slice(1)) editor.deletePage(page.id);
+						editor.deleteAssets(editor.getAssets());
+						editor.setCamera({
+							x: 0,
+							y: 0,
+							z: 1
+						});
+					}, {
+						history: "ignore",
+						ignoreShapeLock: true
+					});
+					editor.clearHistory();
+					stopSync = startCanvasSync(editor, setSyncStatus);
+				};
+				mountedCanvases.add(clear);
+				return () => {
+					active = false;
+					mountedCanvases.delete(clear);
+					stopLanding();
+					stopSync();
+					retrySync.current = () => {};
+				};
+			}, []);
+			const statusText = lang === "en" ? syncStatus.phase === "ready" ? `Selection ready · ${syncStatus.count} shapes` : syncStatus.phase === "preparing" ? `Preparing selection · ${syncStatus.count} shapes…` : "Selection sync failed" : syncStatus.phase === "ready" ? `选区已就绪 · ${syncStatus.count} 个元素` : syncStatus.phase === "preparing" ? `正在准备选区 · ${syncStatus.count} 个元素…` : "选区同步失败";
+			return (0, react_jsx_runtime.jsxs)("div", {
 				className: "dsh-ig-tl-canvas",
-				children: (0, react_jsx_runtime.jsx)(Tldraw, {
+				children: [(0, react_jsx_runtime.jsx)(Tldraw, {
 					persistenceKey: "dsh-image-gen-workbench-v1",
 					sessionId,
-					components: { Toolbar: StudioToolbar },
-					onMount: (editor) => {
-						let active = true;
-						applyBrandTheme(editor);
-						editor.updateInstanceState({ isGridMode: true });
-						console.info(`[dsh-image-gen] tldraw mounted (instance ${editor.id})`);
-						const stopLanding = registerTlLandingConsumer((items) => {
-							const generation = getTlLandingGeneration();
-							return landTlItems(editor, items, () => active && generation === getTlLandingGeneration());
-						});
-						let stopSync = startCanvasSync(editor);
-						const clear = () => {
-							stopSync();
-							editor.complete();
-							editor.run(() => {
-								editor.selectNone();
-								const pages = editor.getPages();
-								for (const page of pages) editor.deleteShapes([...editor.getPageShapeIds(page.id)]);
-								for (const page of pages.slice(1)) editor.deletePage(page.id);
-								editor.deleteAssets(editor.getAssets());
-								editor.setCamera({
-									x: 0,
-									y: 0,
-									z: 1
-								});
-							}, {
-								history: "ignore",
-								ignoreShapeLock: true
-							});
-							editor.clearHistory();
-							stopSync = startCanvasSync(editor);
-						};
-						mountedCanvases.add(clear);
-						return () => {
-							active = false;
-							mountedCanvases.delete(clear);
-							stopLanding();
-							stopSync();
-						};
-					}
-				})
+					components: TL_COMPONENTS,
+					onMount
+				}), syncStatus.phase !== "idle" && (0, react_jsx_runtime.jsxs)("div", {
+					className: "dsh-ig-canvas-sync-status",
+					"data-phase": syncStatus.phase,
+					role: "status",
+					"aria-live": "polite",
+					children: [(0, react_jsx_runtime.jsxs)("span", { children: [statusText, syncStatus.phase === "error" ? `：${canvasSyncError(syncStatus.error, lang)}` : ""] }), syncStatus.phase === "error" && (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: () => retrySync.current(),
+						children: lang === "en" ? "Retry" : "重试"
+					})]
+				})]
 			});
 		});
+		function canvasSyncError(error, lang) {
+			const en = lang === "en";
+			if (error?.includes("too-many-selected")) return en ? "Select at most 16 shapes to edit with originals." : "使用原图编辑时，请一次选择不超过 16 个元素。";
+			if (error?.includes("too-large")) return en ? "An image exceeds the size limit. Reduce its size and retry." : "图片超出大小限制，请缩小后重试。";
+			if (error?.includes("unsupported")) return en ? "Use PNG, JPEG, WebP or GIF images." : "请使用 PNG、JPEG、WebP 或 GIF 图片。";
+			if (error?.includes("host-unavailable")) return en ? "Restart DSH to load the updated plugin, then retry." : "请重启 DSH 加载新版插件后重试。";
+			return en ? "Check the connection or re-import an unavailable image, then retry." : "请检查连接；若原图已失效，请重新导入后重试。";
+		}
 		//#endregion
 		//#region lib/types/client/studio-view.js
 		/** Below this workbench width the recent-generations rail folds automatically. */
@@ -116246,6 +116441,7 @@ img.ProseMirror-separator {
 				favorited: "已收藏",
 				favoriteAdded: "已添加到收藏",
 				favoriteRemoved: "已取消收藏",
+				gallerySaveFailed: "保存到图库失败，请重试",
 				loadMore: "加载更多 ({n})",
 				deleteModalTitle: "从图库删除",
 				deleteModalDesc: "确定从图库中删除这张图片吗？（原聊天记录不会受影响）",
@@ -116354,6 +116550,7 @@ img.ProseMirror-separator {
 				favorited: "Favorited",
 				favoriteAdded: "Added to favorites",
 				favoriteRemoved: "Removed from favorites",
+				gallerySaveFailed: "Failed to save to the gallery, please retry",
 				loadMore: "Load more ({n})",
 				deleteModalTitle: "Delete from gallery",
 				deleteModalDesc: "Remove this image from the local gallery? (Chat history remains unaffected)",
@@ -117018,7 +117215,7 @@ img.ProseMirror-separator {
 					...targetRoot ? { workspacePath: targetRoot } : {},
 					...workspace?.workspaceId ? { workspaceId: workspace.workspaceId } : {}
 				};
-				await saveGalleryItem(updatedItem);
+				if (!await saveGalleryItem(updatedItem)) throw new Error(t("gallerySaveFailed"));
 				return updatedItem;
 			};
 			const handleSaveToGallery = async () => {
@@ -117112,16 +117309,29 @@ img.ProseMirror-separator {
 					} : i) : null);
 					flash(nextFav ? t("favoriteAdded") : t("favoriteRemoved"));
 				} else {
-					const nextFav = !selected.isFavorite;
-					setSelected((curr) => curr !== null && curr.id === targetId ? {
-						...curr,
-						isFavorite: nextFav
-					} : curr);
-					if (currentBatch) setCurrentBatch((prev) => prev ? prev.map((i) => i.id === targetId ? {
-						...i,
-						isFavorite: nextFav
-					} : i) : null);
-					flash(nextFav ? t("favoriteAdded") : t("favoriteRemoved"));
+					if (!!selected.isFavorite) {
+						setSelected((curr) => curr !== null && curr.id === targetId ? {
+							...curr,
+							isFavorite: false
+						} : curr);
+						if (currentBatch) setCurrentBatch((prev) => prev ? prev.map((i) => i.id === targetId ? {
+							...i,
+							isFavorite: false
+						} : i) : null);
+						flash(t("favoriteRemoved"));
+						return;
+					}
+					try {
+						const updated = await saveGalleryEntry({
+							...selected,
+							isFavorite: true
+						});
+						setSelected((curr) => curr !== null && curr.id === targetId ? updated : curr);
+						if (currentBatch) setCurrentBatch((prev) => prev ? prev.map((i) => i.id === targetId ? updated : i) : prev);
+						flash(t("favoriteAdded"));
+					} catch (err) {
+						setError(err instanceof Error ? err.message : t("gallerySaveFailed"));
+					}
 				}
 			};
 			const stepLightbox = (delta) => {
@@ -117353,7 +117563,7 @@ img.ProseMirror-separator {
 											})
 										]
 									}),
-									canvasSurface === "infinite" ? (0, react_jsx_runtime.jsx)(StudioTlCanvas, {}) : (0, react_jsx_runtime.jsx)("div", {
+									canvasSurface === "infinite" ? (0, react_jsx_runtime.jsx)(StudioTlCanvas, { lang }) : (0, react_jsx_runtime.jsx)("div", {
 										className: `dsh-ig-canvas ${isDragging ? "is-dragging" : ""}`,
 										ref: canvasRef,
 										onMouseDown: handleCanvasMouseDown,
@@ -119434,6 +119644,7 @@ img.ProseMirror-separator {
 				confirmRegenerate: "开始生成",
 				regenerating: "正在重新生成…",
 				regenerateSuccess: "已生成新图片并收录到画廊",
+				regenerateSaveFailed: "图片已生成，但保存到图库失败，请重试",
 				regenerateFailed: "重新生成失败",
 				delete: "从画廊删除",
 				confirmDelete: "确定要从画廊中删除这张图片吗？（不会影响原聊天记录）",
@@ -119519,6 +119730,7 @@ img.ProseMirror-separator {
 				confirmRegenerate: "Generate",
 				regenerating: "Regenerating…",
 				regenerateSuccess: "New image generated and added to gallery",
+				regenerateSaveFailed: "Image generated, but saving to the gallery failed. Please retry.",
 				regenerateFailed: "Regeneration failed",
 				delete: "Delete from gallery",
 				confirmDelete: "Are you sure you want to remove this image from the gallery? (Chat history will not be affected)",
@@ -119934,11 +120146,11 @@ img.ProseMirror-separator {
 						...activeWorkspace?.workspaceId ? { workspaceId: activeWorkspace.workspaceId } : {},
 						...currentSessionId ? { sessionId: currentSessionId } : {}
 					};
-					await saveGalleryItem(newItem);
+					const savedOk = await saveGalleryItem(newItem);
 					if (activeTab !== "gallery") setActiveTab("gallery");
 					if (search.trim().length > 0) setSearch("");
 					openPreviewItem(newItem);
-					showToast(t("regenerateSuccess"));
+					showToast(savedOk ? t("regenerateSuccess") : t("regenerateSaveFailed"));
 				} catch (err) {
 					if (controller.signal.aborted) return;
 					showToast(err instanceof Error ? err.message : String(err));
@@ -121284,6 +121496,9 @@ img.ProseMirror-separator {
 
 /* tldraw infinite canvas surface (P0 spike) */
 .dsh-ig-tl-canvas{position:relative;flex:1 1 0;height:0;min-height:0;overflow:hidden;isolation:isolate}
+.dsh-ig-canvas-sync-status{position:absolute;z-index:500;bottom:48px;left:60px;right:16px;display:flex;align-items:center;justify-content:center;gap:8px;max-width:560px;margin:auto;padding:7px 12px;border:1px solid var(--dsh-ig-border);border-radius:10px;background:var(--dsh-ig-surface,#fff);color:var(--dsh-ig-text,#475569);box-shadow:0 2px 8px #0001;font-size:12px;pointer-events:none}
+.dsh-ig-canvas-sync-status[data-phase='error']{color:#b42318;border-color:#fecdca}
+.dsh-ig-canvas-sync-status button{pointer-events:auto;flex-shrink:0;border:1px solid currentColor;border-radius:6px;padding:3px 9px;background:transparent;color:inherit;cursor:pointer}
 
 /* ---- Right-sidebar seat variant (DSH 0.1.5 'sidebar.right.pane.tab') ----
    The seat is a narrow panel beside the conversation column, not a full
@@ -122005,7 +122220,7 @@ img.ProseMirror-separator {
 `;
 		//#endregion
 		//#region lib/types/client/index.js
-		console.info(`[dsh-image-gen] canvas bundle 2026-09-14T15:26:26.831Z`);
+		console.info(`[dsh-image-gen] canvas bundle 2026-09-20T16:35:15.504Z`);
 		/** Right-sidebar tab-type registration id (DSH 0.1.5 `sidebarRightTabs`). */
 		const SIDEBAR_STUDIO_TAB_ID = "dsh-image-gen/studio";
 		/** The tab kind: a page type opened by kind, recognizing no resource address. */
@@ -122066,6 +122281,7 @@ img.ProseMirror-separator {
 				keyCleared: "已清除 Key",
 				clearKeyFailed: "清除 Key 失败",
 				saveKeyFailed: "保存 Key 失败",
+				saveKeyFirst: "请先保存 API Key，再拉取模型或测试连接。",
 				clearKeyUnsupported: "当前版本 DSH 不支持在此清除 Key，请到凭据管理中删除。",
 				endpoint: "接口地址",
 				reset: "重置",
@@ -122080,6 +122296,18 @@ img.ProseMirror-separator {
 				editExtra: "附加 JSON 字段",
 				editExtraPlaceholder: "{\"watermark\": false, \"prompt_extend\": true}",
 				editExtraHint: "仅 JSON 形态生效；会合并到请求体末尾，可覆盖默认字段。留空表示不附加。",
+				arkOutputFormat: "输出格式",
+				arkOutputFormatPng: "PNG（无损，带透明通道）",
+				arkOutputFormatJpeg: "JPEG（方舟默认，有损）",
+				arkOutputFormatHint: "JPEG 会在主体边缘留下压缩色斑，抠图时变成难去掉的彩色毛边。要后期加工就选 PNG。",
+				arkWatermark: "AI 生成水印",
+				arkWatermarkOn: "添加（方舟默认）",
+				arkWatermarkOff: "不添加",
+				arkWatermarkHint: "方舟默认在右下角烙上“AI 生成”标识。做游戏素材或需要后期处理时关掉。",
+				arkBackground: "背景",
+				arkBackgroundOpaque: "不透明（方舟默认）",
+				arkBackgroundTransparent: "透明",
+				arkBackgroundHint: "仅图生图有效，且要求参考图本身带透明通道；文生图会被方舟拒绝，因此这一项只在图生图时发出。",
 				editExtraInvalid: "附加 JSON 字段必须是合法的 JSON 对象。",
 				endpointHintSeedream: "火山方舟兼容的 /api/v3 地址。",
 				endpointHintDashScope: "阿里云百炼 DashScope 官方接口地址。",
@@ -122136,6 +122364,7 @@ img.ProseMirror-separator {
 				confirmRegenerate: "确认生成",
 				regenerating: "重新生成中…",
 				regenerateFailed: "重新生成失败",
+				regenerateSaveFailed: "已重新生成，但保存到图库失败，请重试",
 				versionPrevious: "上一版本",
 				versionNext: "下一版本",
 				versionLabel: "图片版本 {current}/{total}"
@@ -122195,6 +122424,7 @@ img.ProseMirror-separator {
 				keyCleared: "Key cleared",
 				clearKeyFailed: "Failed to clear key",
 				saveKeyFailed: "Failed to save the key",
+				saveKeyFirst: "Save the API key first, then fetch models or test the connection.",
 				clearKeyUnsupported: "This DSH build cannot clear keys here; remove it from credential management instead.",
 				endpoint: "Endpoint / Base URL",
 				reset: "Reset",
@@ -122209,6 +122439,18 @@ img.ProseMirror-separator {
 				editExtra: "Extra JSON fields",
 				editExtraPlaceholder: "{\"watermark\": false, \"prompt_extend\": true}",
 				editExtraHint: "Only used with the JSON format; merged into the request body last and may override defaults. Leave empty for none.",
+				arkOutputFormat: "Output format",
+				arkOutputFormatPng: "PNG (lossless, keeps an alpha channel)",
+				arkOutputFormatJpeg: "JPEG (Ark default, lossy)",
+				arkOutputFormatHint: "JPEG ringing around the subject turns into coloured fringing that is hard to remove when cutting the background out. Pick PNG if you plan to edit the result.",
+				arkWatermark: "AI generated watermark",
+				arkWatermarkOn: "Add (Ark default)",
+				arkWatermarkOff: "Do not add",
+				arkWatermarkHint: "Ark stamps an \"AI generated\" mark into the bottom-right corner by default. Turn it off for game assets or any post-processing.",
+				arkBackground: "Background",
+				arkBackgroundOpaque: "Opaque (Ark default)",
+				arkBackgroundTransparent: "Transparent",
+				arkBackgroundHint: "Image-to-image only, and every reference image must already carry an alpha channel; Ark rejects it for text-to-image, so it is sent on edits alone.",
 				editExtraInvalid: "Extra JSON fields must be a valid JSON object.",
 				endpointHintSeedream: "Volcengine Ark compatible /api/v3 base URL.",
 				endpointHintDashScope: "Official Aliyun DashScope endpoint.",
@@ -122265,6 +122507,7 @@ img.ProseMirror-separator {
 				confirmRegenerate: "Regenerate",
 				regenerating: "Regenerating…",
 				regenerateFailed: "Regeneration failed",
+				regenerateSaveFailed: "Regenerated, but saving to the gallery failed. Please retry.",
 				versionPrevious: "Previous version",
 				versionNext: "Next version",
 				versionLabel: "Image version {current}/{total}"
@@ -122621,16 +122864,25 @@ img.ProseMirror-separator {
 			} };
 			const injectSettingsItem = (owner) => {
 				const ownerRegister = owner.slots.register.bind(owner.slots);
+				const injectSettingsFace = () => ({
+					scope,
+					credentials: credentialsProxy,
+					credentialsAvailable,
+					locale,
+					credentialEvents
+				});
+				owner.slots.inject("settings.plugins.tab", () => ownerRegister({
+					name: "settings.plugins.tab",
+					id: IMAGE_GENERATION_NAMESPACE,
+					order: 30,
+					label: () => locale?.getSnapshot?.()?.active?.startsWith("en") ? "Image generation" : "图像生成",
+					locale,
+					inject: injectSettingsFace
+				}, ImageGenerationSettingsCard));
 				owner.slots.inject("settings.plugin.item", () => ownerRegister({
 					name: "settings.plugin.item",
 					key: IMAGE_GENERATION_NAMESPACE,
-					inject: () => ({
-						scope,
-						credentials: credentialsProxy,
-						credentialsAvailable,
-						locale,
-						credentialEvents
-					})
+					inject: injectSettingsFace
 				}, ImageGenerationSettingsCard));
 			};
 			const injectComposerPill = (owner) => {
@@ -122793,7 +123045,10 @@ img.ProseMirror-separator {
 				activeWorkflow: "",
 				timeoutSeconds: DEFAULT_COMFYUI_TIMEOUT_MS / 1e3,
 				editFormat: "multipart",
-				editExtraText: ""
+				editExtraText: "",
+				outputFormat: "jpeg",
+				watermark: true,
+				background: "opaque"
 			};
 		}
 		/** Settings field each cloud provider persists its model under. */
@@ -122862,6 +123117,11 @@ img.ProseMirror-separator {
 				...provider === "openai-compat" ? {
 					editFormat: value?.openaiCompatEditFormat === "jsonImageUrlArray" ? "jsonImageUrlArray" : "multipart",
 					editExtraText: editExtraTextOf(value?.openaiCompatEditExtra)
+				} : {},
+				...provider === "seedream" ? {
+					outputFormat: value?.seedreamOutputFormat === "png" ? "png" : "jpeg",
+					watermark: value?.seedreamWatermark !== false,
+					background: value?.seedreamBackground === "transparent" ? "transparent" : "opaque"
 				} : {}
 			};
 			return rows;
@@ -123074,6 +123334,11 @@ img.ProseMirror-separator {
 							workflows: resolveComfyUIWorkflows(value ?? {}),
 							activeWorkflow: activeComfyUIWorkflow(value ?? {})?.name ?? "",
 							timeoutSeconds: Math.max(1, Math.round((value?.comfyuiTimeoutMs ?? 3e5) / 1e3))
+						} : {},
+						...provider === "seedream" ? {
+							outputFormat: value?.seedreamOutputFormat === "png" ? "png" : "jpeg",
+							watermark: value?.seedreamWatermark !== false,
+							background: value?.seedreamBackground === "transparent" ? "transparent" : "opaque"
 						} : {}
 					};
 					return next;
@@ -123205,6 +123470,11 @@ img.ProseMirror-separator {
 							await props.scope.set("openaiCompatEditFormat", row.editFormat);
 							await props.scope.set("openaiCompatEditExtra", editExtra);
 						}
+						if (provider === "seedream") {
+							await props.scope.set("seedreamOutputFormat", row.outputFormat);
+							await props.scope.set("seedreamWatermark", row.watermark);
+							await props.scope.set("seedreamBackground", row.background);
+						}
 						if (row.keyInput.trim().length > 0) {
 							const keyRef = cloudCredentialRef(provider);
 							if (keyRef === void 0) throw new Error(t("comfyuiNoKey"));
@@ -123219,7 +123489,10 @@ img.ProseMirror-separator {
 					}
 					updateRow(provider, {
 						message: t("saved"),
-						messageIsError: false
+						messageIsError: false,
+						testResult: void 0,
+						modelFetchMessage: "",
+						modelFetchIsError: false
 					});
 				} catch (cause) {
 					updateRow(provider, {
@@ -123232,6 +123505,14 @@ img.ProseMirror-separator {
 			};
 			/** Probe through the host route so the browser side never touches credential values. */
 			const testConnection = async (provider) => {
+				if (rows[provider].keyInput.trim().length > 0) {
+					updateRow(provider, {
+						message: t("saveKeyFirst"),
+						messageIsError: false,
+						testResult: void 0
+					});
+					return;
+				}
 				updateRow(provider, {
 					testing: true,
 					testResult: void 0,
@@ -123258,6 +123539,13 @@ img.ProseMirror-separator {
 			};
 			/** Pull the provider's image-capable model ids through the host route (Google and the OpenAI family). */
 			const fetchProviderModels = async (provider) => {
+				if (rows[provider].keyInput.trim().length > 0) {
+					updateRow(provider, {
+						modelFetchMessage: t("saveKeyFirst"),
+						modelFetchIsError: false
+					});
+					return;
+				}
 				updateRow(provider, {
 					fetchingModels: true,
 					modelFetchMessage: "",
@@ -123606,7 +123894,7 @@ img.ProseMirror-separator {
 											(0, react_jsx_runtime.jsx)("button", {
 												type: "button",
 												className: "dsh-ig-btn-secondary",
-												disabled: row.fetchingModels || !snapshot.writable,
+												disabled: row.fetchingModels || row.saving || !snapshot.writable,
 												onClick: () => {
 													fetchProviderModels(provider);
 												},
@@ -123660,6 +123948,92 @@ img.ProseMirror-separator {
 									})
 								]
 							}) : null,
+							provider === "seedream" ? (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+								(0, react_jsx_runtime.jsxs)("label", {
+									className: "dsh-ig-field",
+									children: [
+										(0, react_jsx_runtime.jsx)("span", {
+											className: "dsh-ig-label",
+											children: t("arkOutputFormat")
+										}),
+										(0, react_jsx_runtime.jsxs)("select", {
+											className: "dsh-ig-input",
+											value: row.outputFormat,
+											onChange: (event) => {
+												updateRow(provider, { outputFormat: event.target.value === "png" ? "png" : "jpeg" });
+											},
+											disabled: !snapshot.writable,
+											children: [(0, react_jsx_runtime.jsx)("option", {
+												value: "jpeg",
+												children: t("arkOutputFormatJpeg")
+											}), (0, react_jsx_runtime.jsx)("option", {
+												value: "png",
+												children: t("arkOutputFormatPng")
+											})]
+										}),
+										(0, react_jsx_runtime.jsx)("span", {
+											className: "dsh-ig-hint",
+											children: t("arkOutputFormatHint")
+										})
+									]
+								}),
+								(0, react_jsx_runtime.jsxs)("label", {
+									className: "dsh-ig-field",
+									children: [
+										(0, react_jsx_runtime.jsx)("span", {
+											className: "dsh-ig-label",
+											children: t("arkWatermark")
+										}),
+										(0, react_jsx_runtime.jsxs)("select", {
+											className: "dsh-ig-input",
+											value: row.watermark ? "on" : "off",
+											onChange: (event) => {
+												updateRow(provider, { watermark: event.target.value === "on" });
+											},
+											disabled: !snapshot.writable,
+											children: [(0, react_jsx_runtime.jsx)("option", {
+												value: "on",
+												children: t("arkWatermarkOn")
+											}), (0, react_jsx_runtime.jsx)("option", {
+												value: "off",
+												children: t("arkWatermarkOff")
+											})]
+										}),
+										(0, react_jsx_runtime.jsx)("span", {
+											className: "dsh-ig-hint",
+											children: t("arkWatermarkHint")
+										})
+									]
+								}),
+								(0, react_jsx_runtime.jsxs)("label", {
+									className: "dsh-ig-field",
+									children: [
+										(0, react_jsx_runtime.jsx)("span", {
+											className: "dsh-ig-label",
+											children: t("arkBackground")
+										}),
+										(0, react_jsx_runtime.jsxs)("select", {
+											className: "dsh-ig-input",
+											value: row.background,
+											onChange: (event) => {
+												updateRow(provider, { background: event.target.value === "transparent" ? "transparent" : "opaque" });
+											},
+											disabled: !snapshot.writable,
+											children: [(0, react_jsx_runtime.jsx)("option", {
+												value: "opaque",
+												children: t("arkBackgroundOpaque")
+											}), (0, react_jsx_runtime.jsx)("option", {
+												value: "transparent",
+												children: t("arkBackgroundTransparent")
+											})]
+										}),
+										(0, react_jsx_runtime.jsx)("span", {
+											className: "dsh-ig-hint",
+											children: t("arkBackgroundHint")
+										})
+									]
+								})
+							] }) : null,
 							provider === "openai-compat" && row.editFormat === "jsonImageUrlArray" ? (0, react_jsx_runtime.jsxs)("label", {
 								className: "dsh-ig-field",
 								children: [
@@ -123695,7 +124069,7 @@ img.ProseMirror-separator {
 										(0, react_jsx_runtime.jsx)("button", {
 											type: "button",
 											className: "dsh-ig-btn-secondary",
-											disabled: row.testing,
+											disabled: row.testing || row.saving,
 											onClick: () => {
 												testConnection(provider);
 											},
@@ -123713,7 +124087,7 @@ img.ProseMirror-separator {
 										(0, react_jsx_runtime.jsx)("button", {
 											className: "dsh-ig-save",
 											type: "submit",
-											disabled: row.saving || !snapshot.writable,
+											disabled: row.saving || row.testing || row.fetchingModels || !snapshot.writable,
 											children: row.saving ? t("saving") : t("save")
 										})
 									]
@@ -124445,7 +124819,7 @@ img.ProseMirror-separator {
 						ratio: request.ratio,
 						quality: request.quality
 					};
-					await saveGalleryItem({
+					const savedOk = await saveGalleryItem({
 						id: String(revision.attachment.attachmentId),
 						attachment: revision.attachment,
 						prompt: revision.prompt,
@@ -124460,7 +124834,7 @@ img.ProseMirror-separator {
 					});
 					const next = appendConversationImageRevision(String(originId), revision);
 					setRevisionChain(next);
-					setToast(t("regenerate"));
+					setToast(savedOk ? t("regenerate") : t("regenerateSaveFailed"));
 					setTimeout(() => {
 						setToast(void 0);
 					}, 2e3);