dsh-image-gen 0.3.0 → 0.3.1

package/lib/client.js

@@ -13,6 +13,8 @@ window.__ModuleLoader__.load({
 		const DELETE_ROUTE = "/plugins/dsh-image-gen/delete";
 		/** Same-origin route used by the browser image workbench. */
 		const STUDIO_ROUTE = "/plugins/dsh-image-gen/studio";
+		/** Browser route used for saving generated images to workspace on demand. */
+		const SAVE_WORKSPACE_ROUTE = "/plugins/dsh-image-gen/save-workspace";
 		/** Namespace persisted through DSH Settings. */
 		const IMAGE_GENERATION_NAMESPACE = "image-generation";
 		/** Providers supported by the first browser workbench release. */
@@ -511,6 +513,26 @@ window.__ModuleLoader__.load({
 		* This source code is licensed under the ISC license.
 		* See the LICENSE file in the root directory of this source tree.
 		*/
+		const BookmarkPlus = createLucideIcon("bookmark-plus", [
+			["path", {
+				d: "M12 7v6",
+				key: "lw1j43"
+			}],
+			["path", {
+				d: "M15 10H9",
+				key: "o6yqo3"
+			}],
+			["path", {
+				d: "M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z",
+				key: "oz39mx"
+			}]
+		]);
+		/**
+		* @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 Check = createLucideIcon("check", [["path", {
 			d: "M20 6 9 17l-5-5",
 			key: "1gmf2c"
@@ -1222,17 +1244,17 @@ window.__ModuleLoader__.load({
 		//#region lib/types/client/studio-view.js
 		const COPY = {
 			zh: {
-				title: "云端图像工作台",
+				title: "云端生图工作台",
 				configured: "API 已配置",
 				unconfigured: "未配置",
 				recent: "最近生成",
-				empty: "还没有生成记录",
+				empty: "暂无生成历史",
 				generate: "文生图",
 				edit: "图生图",
 				details: "图片详情",
 				reference: "参考图",
-				optional: "可选",
-				upload: "点击上传或拖拽图片到此处",
+				optional: "选填",
+				upload: "点击或拖拽图片到此处",
 				uploadHint: "支持 JPG / PNG / WebP / GIF，最大 10MB（最多 5 张）",
 				prompt: "提示词 Prompt",
 				clear: "清空",
@@ -1244,6 +1266,14 @@ window.__ModuleLoader__.load({
 				start: "开始生成",
 				generating: "正在生成…",
 				cancelGenerate: "取消生成",
+				count: "生成数量",
+				countUnit: "{n} 张",
+				partialSuccess: "已生成 {success} 张图片，{failed} 张失败",
+				generatingCount: "正在生成（共 {count} 张）…",
+				batchResult: "本次生成（共 {count} 张）",
+				saveToGallery: "收藏进画廊",
+				savedToGallery: "已收藏进画廊",
+				inGallery: "已在画廊",
 				retry: "重新加载",
 				configLoadFailed: "工作台配置加载失败，请检查服务后重试。",
 				noProvider: "请先在设置中配置至少一个云端图像 Provider 的 API Key。",
@@ -1319,6 +1349,14 @@ window.__ModuleLoader__.load({
 				start: "Generate",
 				generating: "Generating…",
 				cancelGenerate: "Cancel",
+				count: "Number of images",
+				countUnit: "{n}",
+				partialSuccess: "Generated {success} images, {failed} failed",
+				generatingCount: "Generating ({count} images)…",
+				batchResult: "Generated {count} images",
+				saveToGallery: "Save to Gallery",
+				savedToGallery: "Saved to Gallery",
+				inGallery: "In Gallery",
 				retry: "Retry",
 				configLoadFailed: "Failed to load studio configuration.",
 				noProvider: "Configure an API key for at least one cloud image provider in Settings.",
@@ -1389,6 +1427,8 @@ window.__ModuleLoader__.load({
 			const [quality, setQuality] = (0, react.useState)("1K");
 			const [prompt, setPrompt] = (0, react.useState)("");
 			const [references, setReferences] = (0, react.useState)([]);
+			const [count, setCount] = (0, react.useState)(1);
+			const [currentBatch, setCurrentBatch] = (0, react.useState)(null);
 			const [isGenerating, setIsGenerating] = (0, react.useState)(false);
 			const [error, setError] = (0, react.useState)(null);
 			const [notice, setNotice] = (0, react.useState)(null);
@@ -1476,7 +1516,7 @@ window.__ModuleLoader__.load({
 				const canvasEl = canvasRef.current;
 				if (!canvasEl) return;
 				const onWheel = (e) => {
-					if (selected === null || !image.url) return;
+					if (selected === null && (!currentBatch || currentBatch.length === 0)) return;
 					e.preventDefault();
 					const delta = e.deltaY < 0 ? 15 : -15;
 					setFit(false);
@@ -1484,7 +1524,7 @@ window.__ModuleLoader__.load({
 				};
 				canvasEl.addEventListener("wheel", onWheel, { passive: false });
 				return () => canvasEl.removeEventListener("wheel", onWheel);
-			}, [selected, image.url]);
+			}, [selected, currentBatch]);
 			(0, react.useEffect)(() => {
 				const handleMouseMove = (e) => {
 					if (!dragStartRef.current) return;
@@ -1544,18 +1584,20 @@ window.__ModuleLoader__.load({
 				});
 			};
 			const selectItem = (item) => {
+				setCurrentBatch(null);
 				setSelected(item);
 				setPanelTab("details");
 				resetFit();
 			};
 			const startNew = () => {
+				setCurrentBatch(null);
 				setSelected(null);
 				setPanelTab("generate");
 				resetFit();
 			};
 			const handleCanvasMouseDown = (e) => {
 				if (e.button !== 0 && e.button !== 1) return;
-				if (selected === null || !image.url) return;
+				if (selected === null && (!currentBatch || currentBatch.length === 0)) return;
 				setIsDragging(true);
 				hasDraggedRef.current = false;
 				dragStartRef.current = {
@@ -1565,9 +1607,7 @@ window.__ModuleLoader__.load({
 					startY: offset.y
 				};
 			};
-			const handleImageClick = () => {
-				if (!hasDraggedRef.current) setLightboxOpen(true);
-			};
+			const handleImageClick = () => {};
 			const addReferenceFiles = (fileList) => {
 				if (!fileList || fileList.length === 0) return;
 				const files = Array.from(fileList);
@@ -1692,30 +1732,45 @@ window.__ModuleLoader__.load({
 							prompt: prompt.trim(),
 							ratio,
 							quality,
+							...count > 1 ? { count } : {},
 							...workspace?.path ? { workspaceRoot: workspace.path } : {},
 							...referencesPayload === void 0 ? {} : { references: referencesPayload }
 						})
 					});
 					const payload = await response.json();
 					if (!response.ok || !("attachment" in payload)) throw new Error("error" in payload && payload.error ? payload.error : t("generationFailed"));
-					const item = {
-						id: String(payload.attachment.attachmentId),
+					const generatedList = Array.isArray(payload.items) && payload.items.length > 0 ? payload.items : [{
 						attachment: payload.attachment,
+						output: payload.output,
+						...payload.savedTo ? { savedTo: payload.savedTo } : {}
+					}];
+					const galleryEntries = generatedList.map((gen, idx) => ({
+						id: String(gen.attachment.attachmentId || `${payload.createdAt}-${idx}`),
+						attachment: gen.attachment,
 						prompt: payload.prompt,
 						provider: payload.provider,
 						model: payload.model,
-						createdAt: payload.createdAt,
+						createdAt: payload.createdAt + idx,
 						aspectRatio: ratio,
 						imageSize: quality,
-						output: payload.output,
-						...payload.savedTo ? { savedTo: payload.savedTo } : {},
+						output: gen.output,
+						...gen.savedTo ? { savedTo: gen.savedTo } : {},
 						...workspace?.path ? { workspacePath: workspace.path } : {},
 						...workspace?.workspaceId ? { workspaceId: workspace.workspaceId } : {}
-					};
-					await saveGalleryItem(item);
-					setSelected(item);
+					}));
+					if (galleryEntries.length > 1) {
+						setCurrentBatch(galleryEntries);
+						setSelected(galleryEntries[0]);
+					} else if (galleryEntries.length === 1) {
+						setCurrentBatch(null);
+						setSelected(galleryEntries[0]);
+					}
 					setPanelTab("details");
 					resetFit();
+					if (payload.failedCount && payload.failedCount > 0) flash(t("partialSuccess", {
+						success: String(generatedList.length),
+						failed: String(payload.failedCount)
+					}));
 				} catch (submitError) {
 					if (controller.signal.aborted) return;
 					setError(messageOf(submitError));
@@ -1726,6 +1781,42 @@ window.__ModuleLoader__.load({
 					}
 				}
 			};
+			const isSelectedInGallery = (0, react.useMemo)(() => {
+				if (selected === null) return false;
+				return items.some((item) => item.id === selected.id);
+			}, [items, selected]);
+			const handleSaveToGallery = async () => {
+				if (selected === null || isSelectedInGallery) return;
+				let savedTo = selected.savedTo;
+				const targetRoot = workspace?.path || config?.workspaceRoot;
+				if (!savedTo) try {
+					const res = await fetch(SAVE_WORKSPACE_ROUTE, {
+						method: "POST",
+						credentials: "same-origin",
+						headers: { "content-type": "application/json" },
+						body: JSON.stringify({
+							attachment: selected.attachment,
+							...targetRoot ? { workspaceRoot: targetRoot } : {}
+						})
+					});
+					if (res.ok) {
+						const data = await res.json();
+						if (data.savedTo) savedTo = data.savedTo;
+					}
+				} catch (e) {
+					console.warn("Failed to save to workspace:", e);
+				}
+				const updatedItem = {
+					...selected,
+					...savedTo ? { savedTo } : {},
+					...targetRoot ? { workspacePath: targetRoot } : {},
+					...workspace?.workspaceId ? { workspaceId: workspace.workspaceId } : {}
+				};
+				await saveGalleryItem(updatedItem);
+				setSelected(updatedItem);
+				if (currentBatch) setCurrentBatch((prev) => prev ? prev.map((i) => i.id === updatedItem.id ? updatedItem : i) : prev);
+				flash(t("savedToGallery"));
+			};
 			const handleConfirmDelete = async () => {
 				if (selected === null) return;
 				const idToDelete = selected.id;
@@ -1747,8 +1838,21 @@ window.__ModuleLoader__.load({
 							throw new Error(reason);
 						}
 					}
-					await deleteGalleryItem(idToDelete);
+					if (isSelectedInGallery) await deleteGalleryItem(idToDelete);
 					evictAttachmentCache(attachmentId);
+					if (currentBatch) {
+						const remaining = currentBatch.filter((i) => i.id !== idToDelete);
+						if (remaining.length > 1) {
+							setCurrentBatch(remaining);
+							setSelected(remaining[0]);
+						} else if (remaining.length === 1) {
+							setCurrentBatch(null);
+							setSelected(remaining[0]);
+						} else {
+							setCurrentBatch(null);
+							setSelected(null);
+						}
+					} else setSelected(null);
 					flash(t("deletedToast"));
 				} catch (delError) {
 					setError(messageOf(delError));
@@ -1766,13 +1870,50 @@ window.__ModuleLoader__.load({
 			const toggleFavorite = async () => {
 				if (selected === null) return;
 				const targetId = selected.id;
-				const nextFav = await toggleFavoriteGalleryItem(targetId);
-				setSelected((curr) => curr !== null && curr.id === targetId ? {
-					...curr,
-					isFavorite: nextFav
-				} : curr);
-				flash(nextFav ? t("favoriteAdded") : t("favoriteRemoved"));
+				if (isSelectedInGallery) {
+					const nextFav = await toggleFavoriteGalleryItem(targetId);
+					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"));
+				} 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"));
+				}
+			};
+			const stepLightbox = (delta) => {
+				if (!currentBatch || currentBatch.length <= 1 || selected === null) return;
+				const currIdx = currentBatch.findIndex((i) => i.id === selected.id);
+				if (currIdx === -1) return;
+				const nextIdx = (currIdx + delta + currentBatch.length) % currentBatch.length;
+				setSelected(currentBatch[nextIdx]);
 			};
+			(0, react.useEffect)(() => {
+				if (!lightboxOpen || !currentBatch || currentBatch.length <= 1) return;
+				const onKeyDown = (e) => {
+					if (e.key === "ArrowLeft") stepLightbox(-1);
+					else if (e.key === "ArrowRight") stepLightbox(1);
+				};
+				window.addEventListener("keydown", onKeyDown);
+				return () => window.removeEventListener("keydown", onKeyDown);
+			}, [
+				lightboxOpen,
+				currentBatch,
+				selected
+			]);
 			const flash = (message) => {
 				setNotice(message);
 				window.setTimeout(() => setNotice(null), 2200);
@@ -1933,13 +2074,29 @@ window.__ModuleLoader__.load({
 													className: "dsh-ig-generation-orbit",
 													children: (0, react_jsx_runtime.jsx)(Sparkles, { size: 28 })
 												}),
-												(0, react_jsx_runtime.jsx)("strong", { children: t("generating") }),
+												(0, react_jsx_runtime.jsx)("strong", { children: count > 1 ? t("generatingCount", { count: String(count) }) : t("generating") }),
 												(0, react_jsx_runtime.jsxs)("span", { children: [
 													activeProfile?.label,
 													" · ",
 													model
 												] })
 											]
+										}) : currentBatch && currentBatch.length > 1 ? (0, react_jsx_runtime.jsx)("div", {
+											className: "dsh-ig-canvas-cluster",
+											"data-count": currentBatch.length,
+											style: {
+												transform: `translate(${offset.x}px, ${offset.y}px) scale(${zoom / 100})`,
+												transformOrigin: "center center",
+												transition: isDragging ? "none" : "transform 0.08s ease-out"
+											},
+											children: currentBatch.map((batchItem, index) => (0, react_jsx_runtime.jsx)(BatchCanvasItem, {
+												item: batchItem,
+												index,
+												isSelected: selected?.id === batchItem.id,
+												onSelect: () => {
+													if (!hasDraggedRef.current) setSelected(batchItem);
+												}
+											}, batchItem.id))
 										}) : selected === null ? (0, react_jsx_runtime.jsxs)("div", {
 											className: "dsh-ig-canvas-empty",
 											children: [(0, react_jsx_runtime.jsx)(ImagePlus, { size: 36 }), (0, react_jsx_runtime.jsx)("span", { children: t("selectHistory") })]
@@ -1984,6 +2141,14 @@ window.__ModuleLoader__.load({
 										(0, react_jsx_runtime.jsxs)("div", {
 											className: "dsh-ig-result-actions",
 											children: [(0, react_jsx_runtime.jsx)("p", { children: selected.prompt }), (0, react_jsx_runtime.jsxs)("div", { children: [
+												(0, react_jsx_runtime.jsxs)("button", {
+													type: "button",
+													className: `dsh-ig-save-gallery-btn ${isSelectedInGallery ? "is-saved" : ""}`,
+													onClick: () => void handleSaveToGallery(),
+													title: isSelectedInGallery ? t("inGallery") : t("saveToGallery"),
+													disabled: isSelectedInGallery,
+													children: [isSelectedInGallery ? (0, react_jsx_runtime.jsx)(Check, { size: 15 }) : (0, react_jsx_runtime.jsx)(BookmarkPlus, { size: 15 }), (0, react_jsx_runtime.jsx)("span", { children: isSelectedInGallery ? t("inGallery") : t("saveToGallery") })]
+												}),
 												(0, react_jsx_runtime.jsxs)("button", {
 													type: "button",
 													onClick: () => void toggleFavorite(),
@@ -2177,39 +2342,59 @@ window.__ModuleLoader__.load({
 												onClick: () => void loadConfig(),
 												children: [(0, react_jsx_runtime.jsx)(RefreshCw, { size: 13 }), (0, react_jsx_runtime.jsx)("span", { children: t("retry") })]
 											})]
-										}) : (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsxs)("div", {
-											className: "dsh-ig-field-grid",
-											children: [(0, react_jsx_runtime.jsx)(FieldSelect, {
-												label: t("provider"),
-												value: provider,
-												onChange: changeProvider,
-												options: config.providers.map((item) => ({
-													value: item.provider,
-													label: `${item.label}${item.configured ? "" : ` · ${t("unconfigured")}`}`
-												}))
-											}), (0, react_jsx_runtime.jsx)(FieldSelect, {
-												label: t("model"),
-												value: model,
-												onChange: setModel,
-												options: activeProfile === void 0 ? [] : [{
-													value: activeProfile.model,
-													label: activeProfile.model
-												}]
-											})]
-										}), (0, react_jsx_runtime.jsxs)("div", {
-											className: "dsh-ig-field-grid",
-											children: [(0, react_jsx_runtime.jsx)(FieldSelect, {
-												label: t("ratio"),
-												value: ratio,
-												onChange: setRatio,
-												options: activeProfile?.ratioOptions ?? []
-											}), (0, react_jsx_runtime.jsx)(FieldSelect, {
-												label: t("quality"),
-												value: quality,
-												onChange: setQuality,
-												options: activeProfile?.qualityOptions ?? []
-											})]
-										})] }),
+										}) : (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+											(0, react_jsx_runtime.jsxs)("div", {
+												className: "dsh-ig-field-grid",
+												children: [(0, react_jsx_runtime.jsx)(FieldSelect, {
+													label: t("provider"),
+													value: provider,
+													onChange: changeProvider,
+													options: config.providers.map((item) => ({
+														value: item.provider,
+														label: `${item.label}${item.configured ? "" : ` · ${t("unconfigured")}`}`
+													}))
+												}), (0, react_jsx_runtime.jsx)(FieldSelect, {
+													label: t("model"),
+													value: model,
+													onChange: setModel,
+													options: activeProfile === void 0 ? [] : [{
+														value: activeProfile.model,
+														label: activeProfile.model
+													}]
+												})]
+											}),
+											(0, react_jsx_runtime.jsxs)("div", {
+												className: "dsh-ig-field-grid",
+												children: [(0, react_jsx_runtime.jsx)(FieldSelect, {
+													label: t("ratio"),
+													value: ratio,
+													onChange: setRatio,
+													options: activeProfile?.ratioOptions ?? []
+												}), (0, react_jsx_runtime.jsx)(FieldSelect, {
+													label: t("quality"),
+													value: quality,
+													onChange: setQuality,
+													options: activeProfile?.qualityOptions ?? []
+												})]
+											}),
+											(0, react_jsx_runtime.jsxs)("div", {
+												className: "dsh-ig-field",
+												children: [(0, react_jsx_runtime.jsx)("label", { children: t("count") }), (0, react_jsx_runtime.jsx)("div", {
+													className: "dsh-ig-count-row",
+													children: [
+														1,
+														2,
+														3,
+														4
+													].map((option) => (0, react_jsx_runtime.jsx)("button", {
+														type: "button",
+														className: `dsh-ig-count-pill ${count === option ? "is-active" : ""}`,
+														onClick: () => setCount(option),
+														children: t("countUnit", { n: String(option) })
+													}, option))
+												})]
+											})
+										] }),
 										configuredCount === 0 && config !== null && (0, react_jsx_runtime.jsx)("div", {
 											className: "dsh-ig-inline-note",
 											children: t("noProvider")
@@ -2231,7 +2416,7 @@ window.__ModuleLoader__.load({
 											className: "dsh-ig-generate-button",
 											disabled: config === null,
 											onClick: () => void submit(),
-											children: [(0, react_jsx_runtime.jsx)(Sparkles, { size: 17 }), (0, react_jsx_runtime.jsx)("span", { children: t("start") })]
+											children: [(0, react_jsx_runtime.jsx)(Sparkles, { size: 17 }), (0, react_jsx_runtime.jsxs)("span", { children: [t("start"), count > 1 ? ` (${count})` : ""] })]
 										})
 									]
 								})]
@@ -2255,6 +2440,14 @@ window.__ModuleLoader__.load({
 											className: "dsh-ig-tag dsh-ig-tag-model",
 											children: selected.model
 										}),
+										currentBatch && currentBatch.length > 1 && (0, react_jsx_runtime.jsxs)("span", {
+											className: "dsh-ig-tag",
+											children: [
+												currentBatch.findIndex((i) => i.id === selected.id) + 1,
+												" / ",
+												currentBatch.length
+											]
+										}),
 										selected.attachment.width && selected.attachment.height ? (0, react_jsx_runtime.jsxs)("span", {
 											className: "dsh-ig-tag",
 											children: [
@@ -2272,6 +2465,25 @@ window.__ModuleLoader__.load({
 									children: (0, react_jsx_runtime.jsx)(X, { size: 18 })
 								})]
 							}),
+							currentBatch && currentBatch.length > 1 && (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "dsh-ig-lightbox-nav is-prev",
+								onClick: (e) => {
+									e.stopPropagation();
+									stepLightbox(-1);
+								},
+								title: "上一张",
+								children: (0, react_jsx_runtime.jsx)(ChevronLeft, { size: 24 })
+							}), (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "dsh-ig-lightbox-nav is-next",
+								onClick: (e) => {
+									e.stopPropagation();
+									stepLightbox(1);
+								},
+								title: "下一张",
+								children: (0, react_jsx_runtime.jsx)(ChevronRight, { size: 24 })
+							})] }),
 							(0, react_jsx_runtime.jsx)("div", {
 								className: "dsh-ig-lightbox-img-wrap",
 								onClick: (e) => e.stopPropagation(),
@@ -2322,6 +2534,14 @@ window.__ModuleLoader__.load({
 											onClick: downloadSelected,
 											children: [(0, react_jsx_runtime.jsx)(Download, { size: 14 }), (0, react_jsx_runtime.jsx)("span", { children: t("download") })]
 										}),
+										(0, react_jsx_runtime.jsxs)("button", {
+											type: "button",
+											className: `dsh-ig-lightbox-btn ${isSelectedInGallery ? "is-saved" : ""}`,
+											title: isSelectedInGallery ? t("inGallery") : t("saveToGallery"),
+											onClick: () => void handleSaveToGallery(),
+											disabled: isSelectedInGallery,
+											children: [isSelectedInGallery ? (0, react_jsx_runtime.jsx)(Check, { size: 14 }) : (0, react_jsx_runtime.jsx)(BookmarkPlus, { size: 14 }), (0, react_jsx_runtime.jsx)("span", { children: isSelectedInGallery ? t("inGallery") : t("saveToGallery") })]
+										}),
 										(0, react_jsx_runtime.jsxs)("button", {
 											type: "button",
 											className: "dsh-ig-lightbox-btn",
@@ -2388,6 +2608,30 @@ window.__ModuleLoader__.load({
 				]
 			});
 		};
+		const BatchCanvasItem = ({ item, index, isSelected, onSelect }) => {
+			const image = useAttachmentImage(item.attachment, true);
+			return (0, react_jsx_runtime.jsxs)("div", {
+				className: `dsh-ig-canvas-item ${isSelected ? "is-selected" : ""}`,
+				onClick: onSelect,
+				children: [(0, react_jsx_runtime.jsxs)("span", {
+					className: "dsh-ig-canvas-badge",
+					children: ["#", index + 1]
+				}), image.url !== null ? (0, react_jsx_runtime.jsx)("img", {
+					src: image.url,
+					alt: item.prompt,
+					draggable: false
+				}) : image.loading ? (0, react_jsx_runtime.jsx)("div", {
+					className: "dsh-ig-canvas-item-loading",
+					children: (0, react_jsx_runtime.jsx)(LoaderCircle, {
+						className: "dsh-ig-spin",
+						size: 24
+					})
+				}) : (0, react_jsx_runtime.jsx)("div", {
+					className: "dsh-ig-canvas-item-loading",
+					children: (0, react_jsx_runtime.jsx)(ImagePlus, { size: 24 })
+				})]
+			});
+		};
 		const FieldSelect = ({ label, value, options, onChange }) => (0, react_jsx_runtime.jsxs)("label", {
 			className: "dsh-ig-field-select",
 			children: [(0, react_jsx_runtime.jsx)("span", { children: label }), (0, react_jsx_runtime.jsx)("select", {
@@ -4103,13 +4347,13 @@ window.__ModuleLoader__.load({
 .is-configured .dsh-ig-status-item-tag{color:#059669;background:rgba(16,185,129,.14)}
 .is-missing .dsh-ig-status-item-tag{color:#dc2626;background:rgba(239,68,68,.14)}
 .dsh-ig-canvas{position:relative;flex:1 1 0;height:0;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:24px;touch-action:none;user-select:none;cursor:grab;background-image:linear-gradient(45deg,rgba(114,128,156,.035) 25%,transparent 25%),linear-gradient(-45deg,rgba(114,128,156,.035) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(114,128,156,.035) 75%),linear-gradient(-45deg,transparent 75%,rgba(114,128,156,.035) 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}
-.dsh-ig-canvas.is-dragging{cursor:grabbing!important}
+.dsh-ig-canvas.is-dragging,.dsh-ig-canvas.is-dragging *{cursor:grabbing!important}
 .dsh-ig-canvas img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:10px;box-shadow:0 14px 45px rgba(25,35,63,.18);user-select:none;-webkit-user-drag:none;pointer-events:auto}
 .dsh-ig-canvas-empty,.dsh-ig-generating-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;color:#929bad;font-size:12px;padding:26px;cursor:default}
 .dsh-ig-generating-state strong{font-size:15px;color:var(--foreground,#182033)}.dsh-ig-generating-state span{font-size:11px}.dsh-ig-generation-orbit{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;color:var(--ig-blue);background:rgba(47,100,245,.09);box-shadow:0 0 0 10px rgba(47,100,245,.035);animation:dshIgPulse 1.8s ease-in-out infinite}
 .dsh-ig-result-strip{flex:0 0 auto;min-height:52px;padding:8px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--ig-line)}.dsh-ig-result-strip>span{font-size:12px;font-weight:650}.dsh-ig-result-strip>div,.dsh-ig-result-actions>div{display:flex;gap:7px}.dsh-ig-result-strip button,.dsh-ig-result-actions button{height:32px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border:1px solid var(--ig-line);border-radius:7px;background:var(--background,#fff);font-size:11px;cursor:pointer}.dsh-ig-result-strip button:hover,.dsh-ig-result-actions button:hover{border-color:#9fb2ed;color:var(--ig-blue)}.dsh-ig-result-actions{flex:0 0 auto;min-height:54px;padding:8px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--ig-line)}.dsh-ig-result-actions p{margin:0;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11.5px;line-height:18px;color:#596277}.dsh-ig-result-meta{flex:0 0 auto;min-height:32px;padding:6px 14px;display:flex;gap:13px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--ig-line);font-size:10px;color:#8790a3}.dsh-ig-result-meta span+span:before{content:'·';margin-right:13px}
 .dsh-ig-generate-panel{height:100%;display:flex;flex-direction:column;border-left:1px solid var(--ig-line);overflow:hidden}.dsh-ig-panel-tabs{height:48px;flex:0 0 48px;display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--ig-line);padding:0 14px}.dsh-ig-panel-tabs button{position:relative;border:0;background:transparent;font-size:12px;color:#7c8598;cursor:pointer}.dsh-ig-panel-tabs button.is-active{color:var(--ig-blue);font-weight:650}.dsh-ig-panel-tabs button.is-active:after{content:'';position:absolute;left:20%;right:20%;bottom:-1px;height:2px;background:var(--ig-blue);border-radius:2px 2px 0 0}.dsh-ig-generator-form{flex:1 1 0;height:0;padding:15px;display:flex;flex-direction:column;gap:15px;overflow-x:hidden;overflow-y:auto;min-height:0}.dsh-ig-mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px}.dsh-ig-mode-switch button{height:39px;border:1px solid var(--ig-line);border-radius:8px;background:var(--background,#fff);display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;cursor:pointer}.dsh-ig-mode-switch button.is-active{border-color:#789bff;color:var(--ig-blue);background:rgba(47,100,245,.065);box-shadow:inset 0 0 0 1px rgba(47,100,245,.1)}
-.dsh-ig-field{position:relative;display:flex;flex-direction:column;gap:7px}.dsh-ig-field>label,.dsh-ig-field-label label{font-size:11.5px;font-weight:630}.dsh-ig-field>label span{font-weight:400;color:#929bad}.dsh-ig-field-label{display:flex;align-items:center;justify-content:space-between}.dsh-ig-field-label b{color:#e14d4d}.dsh-ig-field-label button{border:0;background:transparent;color:#798397;font-size:10.5px;cursor:pointer}.dsh-ig-field textarea{width:100%;height:112px;padding:11px 12px 22px;resize:vertical;border:1px solid var(--ig-line);border-radius:9px;background:var(--background,#fff);font-size:12px;line-height:19px;outline:none}.dsh-ig-field textarea:focus{border-color:var(--ig-blue);box-shadow:0 0 0 3px rgba(47,100,245,.09)}.dsh-ig-field>small{position:absolute;right:9px;bottom:7px;color:#9aa2b2;font-size:9.5px}.dsh-ig-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.dsh-ig-field-select{display:flex;flex-direction:column;gap:6px;min-width:0}.dsh-ig-field-select>span{font-size:11px;font-weight:620}.dsh-ig-field-select select{width:100%;height:36px;padding:0 26px 0 9px;border:1px solid var(--ig-line);border-radius:8px;background:var(--background,#fff);font-size:11px;outline:none;text-overflow:ellipsis}.dsh-ig-field-select select:focus{border-color:var(--ig-blue)}
+.dsh-ig-field{position:relative;display:flex;flex-direction:column;gap:7px}.dsh-ig-field>label,.dsh-ig-field-label label{font-size:11.5px;font-weight:630}.dsh-ig-field>label span{font-weight:400;color:#929bad}.dsh-ig-field-label{display:flex;align-items:center;justify-content:space-between}.dsh-ig-field-label b{color:#e14d4d}.dsh-ig-field-label button{border:0;background:transparent;color:#798397;font-size:10.5px;cursor:pointer}.dsh-ig-field textarea{width:100%;height:112px;padding:11px 12px 22px;resize:vertical;border:1px solid var(--ig-line);border-radius:9px;background:var(--background,#fff);font-size:12px;line-height:19px;outline:none}.dsh-ig-field textarea:focus{border-color:var(--ig-blue);box-shadow:0 0 0 3px rgba(47,100,245,.09)}.dsh-ig-field>small{position:absolute;right:9px;bottom:7px;color:#9aa2b2;font-size:9.5px}.dsh-ig-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.dsh-ig-field-select{display:flex;flex-direction:column;gap:6px;min-width:0}.dsh-ig-field-select>span{font-size:11px;font-weight:620}.dsh-ig-field-select select{width:100%;height:36px;padding:0 26px 0 9px;border:1px solid var(--ig-line);border-radius:8px;background:var(--background,#fff);font-size:11px;outline:none;text-overflow:ellipsis}.dsh-ig-field-select select:focus{border-color:var(--ig-blue)}.dsh-ig-count-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.dsh-ig-count-pill{height:34px;border:1px solid var(--ig-line);border-radius:7px;background:var(--background,#fff);font-size:12px;font-weight:600;color:#596277;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.dsh-ig-count-pill:hover{border-color:#9fb2ed;color:var(--ig-blue)}.dsh-ig-count-pill.is-active{border-color:var(--ig-blue);background:rgba(47,100,245,.08);color:var(--ig-blue);box-shadow:inset 0 0 0 1px var(--ig-blue)}
 .dsh-ig-upload{height:92px;border:1px dashed #bcc6d9;border-radius:9px;background:rgba(255,255,255,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#7d879b;cursor:pointer}.dsh-ig-upload strong{font-size:11px;font-weight:570}.dsh-ig-upload small{font-size:9.5px}.dsh-ig-upload:hover,.dsh-ig-upload.is-dragging{border-color:var(--ig-blue);background:rgba(47,100,245,.05);color:var(--ig-blue)}
 .dsh-ig-reference-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
 .dsh-ig-reference-card{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:#eef1f7;border:1px solid var(--ig-line)}
@@ -4148,6 +4392,23 @@ window.__ModuleLoader__.load({
 .dsh-ig-workspace-checkbox{cursor:pointer;accent-color:#2f64f5;width:13.5px;height:13.5px;margin:0}
 .dsh-ig-workspace-filter-text{font-weight:500;white-space:nowrap}
 .dsh-ig-workspace-filter-badge{font-size:10px;font-weight:600;padding:1px 6px;border-radius:999px;background:color-mix(in srgb,currentColor 7%,transparent);color:#64748b;font-variant-numeric:tabular-nums}
+.dsh-ig-canvas-cluster{display:grid;gap:16px;align-items:center;justify-content:center;user-select:none;pointer-events:auto;flex-shrink:0}
+.dsh-ig-canvas-cluster[data-count="2"]{grid-template-columns:repeat(2,1fr);max-width:880px}
+.dsh-ig-canvas-cluster[data-count="3"],.dsh-ig-canvas-cluster[data-count="4"]{grid-template-columns:repeat(2,1fr);max-width:760px}
+.dsh-ig-canvas-item{position:relative;display:flex;align-items:center;justify-content:center;border-radius:10px;cursor:pointer;transition:transform .12s ease-out}
+.dsh-ig-canvas-item img{display:block;max-width:100%;max-height:360px;width:auto;height:auto;object-fit:contain;border-radius:10px;box-shadow:0 10px 30px rgba(25,35,63,.16);user-select:none;-webkit-user-drag:none;pointer-events:auto;transition:box-shadow .15s,outline .15s}
+.dsh-ig-canvas-item:hover img{box-shadow:0 14px 40px rgba(47,100,245,.2)}
+.dsh-ig-canvas-item.is-selected img{outline:3px solid var(--ig-blue);outline-offset:2px;box-shadow:0 14px 40px rgba(47,100,245,.35)}
+.dsh-ig-canvas-badge{position:absolute;top:10px;left:10px;background:rgba(15,23,42,.7);color:#fff;font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px;backdrop-filter:blur(4px);pointer-events:none;transition:background .15s;z-index:2}
+.dsh-ig-canvas-item.is-selected .dsh-ig-canvas-badge{background:var(--ig-blue)}
+.dsh-ig-canvas-item-loading{width:260px;height:260px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.45);border:1px solid var(--ig-line);border-radius:10px;color:#929bad}
+.dsh-ig-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:0;background:rgba(15,23,42,.65);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .15s,transform .15s;z-index:10;backdrop-filter:blur(4px)}
+.dsh-ig-lightbox-nav:hover{background:rgba(47,100,245,.85);transform:translateY(-50%) scale(1.08)}
+.dsh-ig-lightbox-nav.is-prev{left:18px}
+.dsh-ig-lightbox-nav.is-next{right:18px}
+.dsh-ig-save-gallery-btn{color:var(--ig-blue)!important;border-color:rgba(47,100,245,.35)!important;background:rgba(47,100,245,.06)!important}
+.dsh-ig-save-gallery-btn:hover{background:rgba(47,100,245,.12)!important}
+.dsh-ig-save-gallery-btn.is-saved{color:#64748b!important;border-color:var(--ig-line)!important;background:transparent!important}
 `;
 		//#endregion
 		//#region lib/types/client/image-result-node.js