dsh-codex-subscription 2.0.0 → 2.1.0-beta.1

package/lib/client.js

@@ -279,6 +279,66 @@ window.__ModuleLoader__.load({
 				};
 			}
 		};
+		//#endregion
+		//#region node_modules/.pnpm/@heroicons+react@2.2.0_react@18.3.1/node_modules/@heroicons/react/24/outline/esm/ArrowPathIcon.js
+		function ArrowPathIcon({ title, titleId, ...props }, svgRef) {
+			return /*#__PURE__*/ react.createElement("svg", Object.assign({
+				xmlns: "http://www.w3.org/2000/svg",
+				fill: "none",
+				viewBox: "0 0 24 24",
+				strokeWidth: 1.5,
+				stroke: "currentColor",
+				"aria-hidden": "true",
+				"data-slot": "icon",
+				ref: svgRef,
+				"aria-labelledby": titleId
+			}, props), title ? /*#__PURE__*/ react.createElement("title", { id: titleId }, title) : null, /*#__PURE__*/ react.createElement("path", {
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				d: "M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
+			}));
+		}
+		const ForwardRef$3 = /*#__PURE__*/ react.forwardRef(ArrowPathIcon);
+		//#endregion
+		//#region node_modules/.pnpm/@heroicons+react@2.2.0_react@18.3.1/node_modules/@heroicons/react/24/outline/esm/ExclamationCircleIcon.js
+		function ExclamationCircleIcon({ title, titleId, ...props }, svgRef) {
+			return /*#__PURE__*/ react.createElement("svg", Object.assign({
+				xmlns: "http://www.w3.org/2000/svg",
+				fill: "none",
+				viewBox: "0 0 24 24",
+				strokeWidth: 1.5,
+				stroke: "currentColor",
+				"aria-hidden": "true",
+				"data-slot": "icon",
+				ref: svgRef,
+				"aria-labelledby": titleId
+			}, props), title ? /*#__PURE__*/ react.createElement("title", { id: titleId }, title) : null, /*#__PURE__*/ react.createElement("path", {
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				d: "M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
+			}));
+		}
+		const ForwardRef$2 = /*#__PURE__*/ react.forwardRef(ExclamationCircleIcon);
+		//#endregion
+		//#region node_modules/.pnpm/@heroicons+react@2.2.0_react@18.3.1/node_modules/@heroicons/react/24/outline/esm/PhotoIcon.js
+		function PhotoIcon({ title, titleId, ...props }, svgRef) {
+			return /*#__PURE__*/ react.createElement("svg", Object.assign({
+				xmlns: "http://www.w3.org/2000/svg",
+				fill: "none",
+				viewBox: "0 0 24 24",
+				strokeWidth: 1.5,
+				stroke: "currentColor",
+				"aria-hidden": "true",
+				"data-slot": "icon",
+				ref: svgRef,
+				"aria-labelledby": titleId
+			}, props), title ? /*#__PURE__*/ react.createElement("title", { id: titleId }, title) : null, /*#__PURE__*/ react.createElement("path", {
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				d: "m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
+			}));
+		}
+		const ForwardRef$1 = /*#__PURE__*/ react.forwardRef(PhotoIcon);
 		const ORIGINAL_IMAGE_ID_PATTERN = /^img_[0-9a-f]{32}$/u;
 		const positiveInteger = (value) => Number.isSafeInteger(value) && value > 0;
 		function decodeOriginalImageRef(value) {
@@ -323,7 +383,11 @@ window.__ModuleLoader__.load({
 			"reset-credit/inspect",
 			"reset-credit/prepare",
 			"reset-credit/consume",
-			"image/original/chunk"
+			"image/original/chunk",
+			"sketch/connect",
+			"sketch/poll",
+			"sketch/result",
+			"sketch/disconnect"
 		]);
 		function createSubscriptionRpcClient(transport) {
 			return Object.freeze({ call(channel, endpoint, payload, signal) {
@@ -511,7 +575,7 @@ window.__ModuleLoader__.load({
 				})
 			});
 		}
-		function CodexImageToolRow({ block, sessionId, rpc, loadImage, openSketchImage, attachForEdit, getImageViewer, getInternalImageViewer, t, preference }) {
+		function CodexImageToolRow({ presentation = "tool", block, sessionId, rpc, loadImage, openSketchImage, attachForEdit, getImageViewer, getInternalImageViewer, t, preference }) {
 			const features = (0, react.useSyncExternalStore)(preference.subscribe, preference.getSnapshot);
 			const settled = block?.kind === "tool-result";
 			const image = settled ? block.content.find((item) => item?.type === "image" && item.attachment !== void 0) : void 0;
@@ -520,14 +584,15 @@ window.__ModuleLoader__.load({
 			const status = !settled ? t("imageGenerating") : failed ? t("imageFailed") : t("imageGenerated");
 			const error = failed ? block.content.find((item) => item?.type === "text" && typeof item.text === "string")?.text : void 0;
 			const original = decodeImagePresentation(block?.meta)?.original;
+			const showOutput = presentation === "output";
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "codexImageTool",
 				"data-state": state,
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					showOutput ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "codexImageToolRow",
 						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(!settled ? ForwardRef$3 : failed ? ForwardRef$2 : ForwardRef$1, {
 								className: "codexImageToolIcon",
 								"aria-hidden": "true"
 							}),
@@ -545,7 +610,7 @@ window.__ModuleLoader__.load({
 							})
 						]
 					}),
-					image === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					!showOutput || image === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "codexImageToolGallery",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodexGeneratedImage, {
 							features,
@@ -561,7 +626,7 @@ window.__ModuleLoader__.load({
 							t
 						})
 					}),
-					typeof block?.meta?.requestedModel === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
+					!showOutput && typeof block?.meta?.requestedModel === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
 						className: "codexImageDetails",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", { children: t("imageDetails") }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [
 							t("imageRequestedModel"),
@@ -595,13 +660,16 @@ window.__ModuleLoader__.load({
 				className: "codexImageOutput",
 				children: node.data.blocks.map((block) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodexImageToolRow, {
 					block,
-					...props
+					...props,
+					presentation: "output"
 				}, block.toolCallId))
 			});
 		}
 		//#endregion
 		//#region src/sketch-document.js
 		const SKETCH_SIZE = 1024;
+		const MAX_SKETCH_STROKES = 2e3;
+		const MAX_STROKE_POINTS = 2e3;
 		function sketchPoint(clientX, clientY, rect) {
 			if (!(rect.width > 0 && rect.height > 0)) return void 0;
 			return {
@@ -635,10 +703,18 @@ window.__ModuleLoader__.load({
 					context.stroke();
 				} else if (stroke.shape === "rectangle") {
 					context.rect(first.x * size, first.y * height, (last.x - first.x) * size, (last.y - first.y) * height);
-					context.stroke();
+					if (stroke.fill) context.fill();
+					else context.stroke();
 				} else if (stroke.shape === "circle") {
 					context.ellipse((first.x + last.x) * size / 2, (first.y + last.y) * height / 2, Math.abs(last.x - first.x) * size / 2, Math.abs(last.y - first.y) * height / 2, 0, 0, Math.PI * 2);
-					context.stroke();
+					if (stroke.fill) context.fill();
+					else context.stroke();
+				} else if (stroke.shape === "polygon") {
+					context.moveTo(first.x * size, first.y * height);
+					for (const point of stroke.points.slice(1)) context.lineTo(point.x * size, point.y * height);
+					context.closePath();
+					if (stroke.fill) context.fill();
+					else context.stroke();
 				} else if (stroke.points.length === 1) {
 					context.arc(first.x * size, first.y * height, context.lineWidth / 2, 0, Math.PI * 2);
 					context.fill();
@@ -676,7 +752,7 @@ window.__ModuleLoader__.load({
 				active: id
 			};
 			if (action === "add" || action === "duplicate") {
-				if (layers.length >= 8 || action === "duplicate" && strokeCount(doc) + layer.strokes.length > 200) return doc;
+				if (layers.length >= 8 || action === "duplicate" && strokeCount(doc) + layer.strokes.length > 2e3) return doc;
 				const next = action === "add" ? {
 					id: doc.nextId,
 					name: "",
@@ -736,6 +812,22 @@ window.__ModuleLoader__.load({
 			let points = stroke.points;
 			if (!points.length) return false;
 			const a = points[0], b = points.at(-1);
+			if (stroke.fill && stroke.shape === "rectangle" && point.x >= Math.min(a.x, b.x) && point.x <= Math.max(a.x, b.x) && point.y >= Math.min(a.y, b.y) && point.y <= Math.max(a.y, b.y)) return true;
+			if (stroke.fill && stroke.shape === "circle") {
+				const rx = Math.abs(b.x - a.x) / 2, ry = Math.abs(b.y - a.y) / 2;
+				if (rx && ry && ((point.x - (a.x + b.x) / 2) / rx) ** 2 + ((point.y - (a.y + b.y) / 2) / ry) ** 2 <= 1) return true;
+			}
+			if (stroke.shape === "polygon") {
+				if (stroke.fill) {
+					let inside = false;
+					for (let i = 0, j = points.length - 1; i < points.length; j = i++) {
+						const p = points[i], q = points[j];
+						if (p.y > point.y !== q.y > point.y && point.x < (q.x - p.x) * (point.y - p.y) / (q.y - p.y) + p.x) inside = !inside;
+					}
+					if (inside) return true;
+				}
+				points = [...points, points[0]];
+			}
 			if (stroke.shape === "rectangle") points = [
 				a,
 				{
@@ -1253,10 +1345,320 @@ window.__ModuleLoader__.load({
 				]
 			});
 		}
+		const SKETCH_COMMAND_HELP = {
+			coordinates: "Normalized x/y in [0,1]; width is canvas pixels. Read documentId and revision before editing.",
+			shapes: "line: exactly two endpoints; rectangle/circle: exactly two opposite bounding-box corners (circle draws an ellipse within that box); polygon: three or more vertices, closed automatically; pen: ordered path points. fill:true fills rectangle/circle/polygon. Layers and strokes paint in list order, later ones on top. All commands needed for drawing are described here; no source-code search is required.",
+			commands: {
+				stroke: "{op:\"stroke\",layer:1,shape:\"pen|line|rectangle|circle|polygon\",color:\"#rrggbb\",width:2,opacity:1,fill:false,points:[{x:0.1,y:0.1},...]}",
+				layer: "{op:\"layer\",action:\"add|select|rename|visible|duplicate|up|down|delete|clear\",id:1,value:\"name\"}",
+				resize: "{op:\"resize\",ratio:\"1:1|4:3|3:4|16:9|9:16\"}"
+			},
+			limits: {
+				strokes: MAX_SKETCH_STROKES,
+				pointsPerStroke: MAX_STROKE_POINTS,
+				pointsTotal: 2e5,
+				commandsPerBatch: 256
+			}
+		};
+		const finite = (value, min, max) => typeof value === "number" && Number.isFinite(value) && value >= min && value <= max;
+		function applySketchCommands(source, commands) {
+			if (!Array.isArray(commands) || !commands.length || commands.length > 256) throw Error("Expected 1–256 commands");
+			let doc = source;
+			for (const command of commands) {
+				if (!command || typeof command !== "object") throw Error("Invalid command");
+				if (command.op === "resize") {
+					doc = resizeSketch(doc, command.ratio);
+					continue;
+				}
+				if (command.op === "layer") {
+					if (![
+						"add",
+						"select",
+						"rename",
+						"visible",
+						"duplicate",
+						"up",
+						"down",
+						"delete",
+						"clear"
+					].includes(command.action)) throw Error("Unknown layer action");
+					const next = changeSketchLayer(doc, command.action, command.id ?? doc.active, command.value);
+					if (next === doc) throw Error("Layer action unavailable; inspect the document first");
+					doc = next;
+					continue;
+				}
+				if (command.op !== "stroke") throw Error("Unknown command");
+				const { points, color, shape = "pen", width = 2, opacity = 1, fill = false } = command;
+				if (![
+					"pen",
+					"line",
+					"rectangle",
+					"circle",
+					"polygon",
+					"eraser"
+				].includes(shape) || !/^#[0-9a-f]{6}$/i.test(color ?? "") || !finite(width, 1, 256) || !finite(opacity, 0, 1) || typeof fill !== "boolean" || !Array.isArray(points) || !points.length || points.length > 2e3 || points.some((p) => !p || !finite(p.x, 0, 1) || !finite(p.y, 0, 1))) throw Error("Invalid stroke");
+				if ([
+					"line",
+					"rectangle",
+					"circle"
+				].includes(shape) && points.length !== 2 || shape === "polygon" && points.length < 3) throw Error("Invalid shape points");
+				if (fill && ![
+					"rectangle",
+					"circle",
+					"polygon"
+				].includes(shape)) throw Error("Fill requires a closed shape");
+				const layer = doc.layers.find((layer) => layer.id === (command.layer ?? doc.active));
+				if (!layer?.visible) throw Error("Target layer is missing or hidden");
+				const stroke = {
+					shape,
+					color,
+					width,
+					opacity,
+					fill,
+					brush: "pen",
+					points: points.map((p) => ({
+						x: p.x,
+						y: p.y
+					}))
+				};
+				doc = {
+					...doc,
+					layers: doc.layers.map((item) => item === layer ? {
+						...item,
+						strokes: [...item.strokes, stroke]
+					} : item)
+				};
+			}
+			if (strokeCount(doc) > 2e3 || doc.layers.reduce((n, l) => n + l.strokes.reduce((m, s) => m + s.points.length, 0), 0) > 2e5) throw Error("Sketch resource budget exceeded");
+			return doc;
+		}
+		function createSketchCommandSession(adapter) {
+			const completed = /* @__PURE__ */ new Map();
+			let pending = false;
+			return async (request) => {
+				if (!request || typeof request !== "object") throw Error("Invalid sketch request");
+				if (!adapter.available()) throw Error("Open the sketch board for this session first");
+				const current = adapter.snapshot();
+				if (request.action === "inspect") return {
+					...current,
+					help: SKETCH_COMMAND_HELP
+				};
+				if (request.documentId !== current.documentId) throw Error("Document changed; inspect again");
+				if (pending || adapter.busy()) throw Error("Sketch is being edited; retry after it settles");
+				if (request.action === "preview") return {
+					...current,
+					png: await adapter.preview()
+				};
+				if (!["apply", "save"].includes(request.action)) throw Error("Unknown sketch action");
+				if (typeof request.requestId !== "string" || !request.requestId.length || request.requestId.length > 100) throw Error("A unique requestId is required");
+				const key = `${current.documentId}:${request.requestId}`, fingerprint = JSON.stringify(request);
+				const cached = completed.get(key);
+				if (cached) {
+					if (cached.fingerprint !== fingerprint) throw Error("requestId reused with different content");
+					return cached.result;
+				}
+				if (request.revision !== current.revision || adapter.busy()) throw Error("Sketch changed or is being edited; inspect again");
+				if (request.action === "apply") {
+					const next = applySketchCommands(adapter.document(), request.commands);
+					adapter.commit(next);
+				} else {
+					if (request.name !== void 0 && (typeof request.name !== "string" || request.name.length > 60)) throw Error("Invalid draft name");
+					pending = true;
+					try {
+						await adapter.save(request.name);
+					} finally {
+						pending = false;
+					}
+				}
+				const result = adapter.snapshot();
+				completed.set(key, {
+					fingerprint,
+					result
+				});
+				if (completed.size > 128) completed.delete(completed.keys().next().value);
+				return result;
+			};
+		}
+		//#endregion
+		//#region src/sketch-formats.js
+		const SKETCH_FILE_ACCEPT = ".psd,.dsh-sketch.json,image/png,image/jpeg,image/webp";
+		const canvas = (w, h) => {
+			const c = document.createElement("canvas");
+			c.width = w;
+			c.height = h;
+			return c;
+		};
+		function runPsdCodec(action, payload) {
+			return new Promise((resolve, reject) => {
+				const worker = new Worker("/api/codex-subscription/sketch-psd-worker", { type: "module" });
+				const finish = (callback, value) => {
+					clearTimeout(timer);
+					worker.terminate();
+					callback(value);
+				};
+				const timer = setTimeout(() => finish(reject, Error("PSD operation timed out")), 3e4);
+				worker.onerror = () => finish(reject, Error("PSD codec could not be loaded"));
+				worker.onmessage = (event) => event.data.ok ? finish(resolve, event.data.value) : finish(reject, Error(event.data.error));
+				worker.postMessage({
+					action,
+					payload
+				});
+			});
+		}
+		function encodeSketchDocument(doc) {
+			return JSON.stringify({
+				format: "dsh-sketch",
+				version: 1,
+				doc
+			});
+		}
+		function decodeSketchDocument(text) {
+			if (text.length > 32 * 1024 * 1024) throw Error("Draft exceeds 32 MB");
+			const file = JSON.parse(text), source = file.doc;
+			if (file.format !== "dsh-sketch" || file.version !== 1 || !source || !Array.isArray(source.layers) || !source.layers.length || source.layers.length > 8) throw Error("Invalid sketch file");
+			const w = source.width ?? 1024, h = source.height ?? 1024;
+			if (!Number.isInteger(w) || !Number.isInteger(h) || w < 1 || h < 1 || w > 2048 || h > 2048) throw Error("Invalid canvas size");
+			let doc = {
+				...createSketchLayers(),
+				width: w,
+				height: h,
+				ratio: Object.keys(SKETCH_RATIOS).find((k) => SKETCH_RATIOS[k][0] === w && SKETCH_RATIOS[k][1] === h) ?? "custom"
+			};
+			for (let i = 0; i < source.layers.length; i++) {
+				const layer = source.layers[i];
+				if (i) doc = applySketchCommands(doc, [{
+					op: "layer",
+					action: "add"
+				}]);
+				if (!Array.isArray(layer.strokes)) throw Error("Invalid strokes");
+				for (let j = 0; j < layer.strokes.length; j += 256) {
+					const strokes = layer.strokes.slice(j, j + 256);
+					doc = applySketchCommands(doc, strokes.map((s) => ({
+						...s,
+						op: "stroke",
+						layer: doc.active,
+						fill: s.fill ?? false
+					})));
+					const added = doc.layers.at(-1).strokes;
+					for (let k = 0; k < strokes.length; k++) {
+						const s = strokes[k];
+						if (s.brush !== void 0 && ![
+							"pen",
+							"pencil",
+							"marker"
+						].includes(s.brush)) throw Error("Invalid brush");
+						if (s.pressure !== void 0 && (!Number.isFinite(s.pressure) || s.pressure < .2 || s.pressure > 1)) throw Error("Invalid pressure");
+						Object.assign(added[added.length - strokes.length + k], {
+							brush: s.brush ?? "pen",
+							pressure: s.pressure ?? 1
+						});
+					}
+				}
+				const target = doc.layers.at(-1);
+				target.name = String(layer.name ?? "").slice(0, 40);
+				target.visible = layer.visible !== false;
+				if (layer.image) {
+					const image = layer.image;
+					if (typeof image.src !== "string" || !/^data:image\/png;base64,/.test(image.src) || image.src.length > 8 * 1024 * 1024 || [
+						"x",
+						"y",
+						"width",
+						"height"
+					].some((k) => !Number.isFinite(image[k]) || image[k] < 0 || image[k] > 1)) throw Error("Invalid draft image");
+					const bytes = Uint8Array.from(atob(image.src.slice(image.src.indexOf(",") + 1)), (c) => c.charCodeAt(0));
+					if (bytes.length < 24) throw Error("Invalid draft image");
+					const header = new DataView(bytes.buffer);
+					if (header.getUint32(0) !== 2303741511 || header.getUint32(4) !== 218765834 || header.getUint32(16) < 1 || header.getUint32(20) < 1 || header.getUint32(16) > 4096 || header.getUint32(20) > 4096) throw Error("Invalid draft image size");
+					target.image = {
+						src: image.src,
+						x: image.x,
+						y: image.y,
+						width: image.width,
+						height: image.height
+					};
+				}
+			}
+			const activeIndex = source.layers.findIndex((layer) => layer.id === source.active);
+			doc.active = doc.layers[Math.max(0, activeIndex)].id;
+			return doc;
+		}
+		async function exportSketchPsd(doc, images, composite) {
+			const width = doc.width ?? 1024, height = doc.height ?? 1024;
+			const children = doc.layers.map((layer, i) => {
+				const ctx = canvas(width, height).getContext("2d"), ref = layer.image;
+				if (ref) ctx.drawImage(images.get(ref.src), ref.x * width, ref.y * height, ref.width * width, ref.height * height);
+				paintSketch(ctx, layer.strokes, width, true, height);
+				return {
+					name: layer.name || `Layer ${i + 1}`,
+					hidden: !layer.visible,
+					opacity: 1,
+					blendMode: "normal",
+					imageData: ctx.getImageData(0, 0, width, height)
+				};
+			});
+			const context = canvas(width, height).getContext("2d");
+			context.fillStyle = "#fff";
+			context.fillRect(0, 0, width, height);
+			if (children[0] && !children[0].hidden) {
+				const bottom = canvas(width, height);
+				bottom.getContext("2d").putImageData(children[0].imageData, 0, 0);
+				context.drawImage(bottom, 0, 0);
+				children[0].imageData = context.getImageData(0, 0, width, height);
+			} else {
+				if (children.length >= 8) throw Error("Show the bottom layer before exporting this eight-layer drawing");
+				children.unshift({
+					name: "Paper",
+					opacity: 1,
+					blendMode: "normal",
+					imageData: context.getImageData(0, 0, width, height)
+				});
+			}
+			return runPsdCodec("write", {
+				width,
+				height,
+				children,
+				imageData: composite.getContext("2d").getImageData(0, 0, width, height)
+			});
+		}
+		async function importSketchPsd(file) {
+			if (file.size > 32 * 1024 * 1024) throw Error("PSD exceeds 32 MB");
+			const psd = await runPsdCodec("read", await file.arrayBuffer());
+			const scale = Math.min(1, 1024 / Math.max(psd.width, psd.height)), width = Math.max(1, Math.round(psd.width * scale)), height = Math.max(1, Math.round(psd.height * scale));
+			const doc = {
+				...createSketchLayers(),
+				width,
+				height,
+				ratio: Object.keys(SKETCH_RATIOS).find((k) => SKETCH_RATIOS[k][0] === width && SKETCH_RATIOS[k][1] === height) ?? "custom",
+				layers: [],
+				nextId: psd.layers.length + 1
+			};
+			for (const [i, layer] of psd.layers.entries()) {
+				const src = canvas(layer.imageData.width, layer.imageData.height);
+				src.getContext("2d").putImageData(new ImageData(new Uint8ClampedArray(layer.imageData.data), layer.imageData.width, layer.imageData.height), 0, 0);
+				const out = canvas(width, height), ctx = out.getContext("2d");
+				ctx.globalAlpha = layer.opacity;
+				ctx.drawImage(src, layer.left * scale, layer.top * scale, src.width * scale, src.height * scale);
+				doc.layers.push({
+					id: i + 1,
+					name: layer.name,
+					visible: !layer.hidden,
+					strokes: [],
+					image: {
+						src: out.toDataURL("image/png"),
+						x: 0,
+						y: 0,
+						width: 1,
+						height: 1
+					}
+				});
+			}
+			return doc;
+		}
 		//#endregion
 		//#region src/sketch-files.jsx
-		function SketchFiles({ save, load, fresh, importImage, disabled, t, report, onWorking }) {
+		function SketchFiles({ save, load, fresh, importImage, download, hasContent, disabled, t, report, onWorking }) {
 			const [open, setOpen] = (0, react.useState)(false), [rows, setRows] = (0, react.useState)([]), [name, setName] = (0, react.useState)(""), [remove, setRemove] = (0, react.useState)(null), [working, setWorking] = (0, react.useState)(false);
+			const [format, setFormat] = (0, react.useState)("png");
 			const input = (0, react.useRef)(null), host = (0, react.useRef)(null);
 			(0, react.useEffect)(() => {
 				if (open && !working) host.current?.querySelector("input:not([type=file])")?.focus({ preventScroll: true });
@@ -1271,8 +1673,8 @@ window.__ModuleLoader__.load({
 				onWorking(true);
 				try {
 					await operation();
-				} catch {
-					report(t("sketchStorageFailed"));
+				} catch (error) {
+					report(error?.message || t("sketchStorageFailed"));
 				} finally {
 					setWorking(false);
 					onWorking(false);
@@ -1303,7 +1705,7 @@ window.__ModuleLoader__.load({
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 						ref: input,
 						type: "file",
-						accept: "image/png,image/jpeg,image/webp",
+						accept: SKETCH_FILE_ACCEPT,
 						hidden: true,
 						onChange: (e) => {
 							const file = e.target.files?.[0];
@@ -1352,6 +1754,32 @@ window.__ModuleLoader__.load({
 								}),
 								children: t("sketchSave")
 							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "codexSketchExportFormats codexSketchSegment",
+								role: "group",
+								"aria-label": t("sketchExportFormat"),
+								children: [
+									["png", "PNG"],
+									["psd", "PSD"],
+									["draft", t("sketchEditableFile")]
+								].map(([value, label]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									"aria-pressed": format === value,
+									disabled: working,
+									onClick: () => setFormat(value),
+									children: label
+								}, value))
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								disabled: working || !hasContent,
+								onClick: () => void run(async () => {
+									await download(format);
+									setOpen(false);
+								}),
+								children: t("sketchDownload")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", { children: t("sketchFormatHint") }),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", { children: t("sketchLocalDrafts") }),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "codexSketchDraftList",
@@ -1430,6 +1858,62 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/sketch-agent-client.js
+		function connectSketchAgent(rpc, sessionId, execute, report, pollDelay = () => 350) {
+			let stopped = false, token, timer;
+			const call = (endpoint, payload) => rpc.call(CHANNEL, `sketch/${endpoint}`, {
+				sessionId,
+				token,
+				...payload
+			}).then(unwrap);
+			const poll = async () => {
+				try {
+					const tasks = await call("poll");
+					for (const task of tasks) {
+						if (stopped) break;
+						let value, error;
+						try {
+							if (task.expiresAt < Date.now()) throw Error("Sketch command expired; inspect before retrying");
+							value = await execute(task.request);
+						} catch (cause) {
+							error = cause.message;
+						}
+						await call("result", {
+							id: task.id,
+							value,
+							error
+						});
+					}
+				} catch (error) {
+					if (!stopped) report(error.message);
+					return;
+				}
+				if (!stopped) timer = setTimeout(poll, pollDelay());
+			};
+			call("connect").then((value) => {
+				token = value.token;
+				if (stopped) call("disconnect").catch(() => {});
+				else poll();
+			}, (error) => {
+				if (!stopped) report(error.message);
+			});
+			return () => {
+				stopped = true;
+				clearTimeout(timer);
+				if (token) call("disconnect").catch(() => {});
+			};
+		}
+		async function executeSketchFromAgent(request, { available, open, execute, live = () => true, wait = () => new Promise((resolve) => setTimeout(resolve, 20)) }) {
+			if (!available()) {
+				if (request.action !== "inspect") throw Error("Sketch board closed; inspect before editing");
+				if (!live()) throw Error("Sketch session disconnected");
+				open();
+				for (let i = 0; i < 100 && live() && !available(); i++) await wait();
+			}
+			if (!live() || !available()) throw Error("Sketch board could not open in the current session");
+			return execute(request);
+		}
+		//#endregion
 		//#region src/sketch-studio.jsx
 		const PALETTE = [
 			"#18181b",
@@ -1440,15 +1924,17 @@ window.__ModuleLoader__.load({
 			"#34c759",
 			"#0088ff"
 		];
-		function SketchStudio({ open, onClose, attachSketch, enabled, t, incoming }) {
+		function SketchStudio({ open, agentEnabled, onOpen, onClose, attachSketch, enabled, t, incoming, sessionId, rpc }) {
 			const dialog = (0, react.useRef)(null), canvas = (0, react.useRef)(null), doc = (0, react.useRef)(createSketchLayers()), cache = (0, react.useRef)(/* @__PURE__ */ new Map());
 			const undo = (0, react.useRef)([]), redo = (0, react.useRef)([]), active = (0, react.useRef)(null), frame = (0, react.useRef)(null);
 			const images = (0, react.useRef)(/* @__PURE__ */ new Map()), saved = (0, react.useRef)(null), dirty = (0, react.useRef)(false), updateUi = (0, react.useRef)(false);
+			const documentId = (0, react.useRef)(crypto.randomUUID()), documentRevision = (0, react.useRef)(0), agentAdapter = (0, react.useRef)({}), agentSession = (0, react.useRef)(null);
 			const [stability, setStability] = (0, react.useState)(0), [flow, setFlow] = (0, react.useState)(100), [picturesOpen, setPicturesOpen] = (0, react.useState)(false);
 			const pictureInput = (0, react.useRef)(null), received = (0, react.useRef)(null);
 			const navigation = useSketchView(canvas, open);
 			const [revision, redraw] = (0, react.useState)(0), [tool, setTool] = (0, react.useState)("pen"), [brush, setBrush] = (0, react.useState)("pen");
 			const [eraser, setEraser] = (0, react.useState)("pixel"), [color, setColor] = (0, react.useState)("#0088ff"), [width, setWidth] = (0, react.useState)(12);
+			const [fillShape, setFillShape] = (0, react.useState)(false);
 			const [layersOpen, setLayersOpen] = (0, react.useState)(false), [busy, setBusy] = (0, react.useState)(false), [error, setError] = (0, react.useState)("");
 			const cursorRing = (0, react.useRef)(null);
 			const cursor = useSketchCursor(canvas, cursorRing, width, tool === "pen" ? brush : "pen", navigation.view.scale, !open || navigation.space || busy);
@@ -1474,6 +1960,7 @@ window.__ModuleLoader__.load({
 				});
 			};
 			const checkpoint = () => {
+				documentRevision.current++;
 				dirty.current = true;
 				undo.current.push(doc.current);
 				if (undo.current.length > 30) undo.current.shift();
@@ -1484,6 +1971,7 @@ window.__ModuleLoader__.load({
 				const next = changeSketchLayer(doc.current, action, id, value);
 				if (next === doc.current) return;
 				if (action !== "select") checkpoint();
+				else documentRevision.current++;
 				doc.current = next;
 				setError("");
 				schedule();
@@ -1517,6 +2005,8 @@ window.__ModuleLoader__.load({
 				if (dirty.current && (hasContent() || saved.current)) await save();
 			};
 			const replace = (next, decoded, identity) => {
+				documentId.current = crypto.randomUUID();
+				documentRevision.current++;
 				doc.current = structuredClone(next);
 				images.current = decoded;
 				cache.current.clear();
@@ -1541,6 +2031,16 @@ window.__ModuleLoader__.load({
 				});
 			};
 			const importImage = async (file) => {
+				if (file.name?.toLowerCase().endsWith(".psd") || file.name?.toLowerCase().endsWith(".dsh-sketch.json")) {
+					if (file.size > 32 * 1024 * 1024) throw Error("File exceeds 32 MB");
+					const next = file.name.toLowerCase().endsWith(".psd") ? await importSketchPsd(file) : decodeSketchDocument(await file.text());
+					const decoded = /* @__PURE__ */ new Map();
+					await decodeSketchImages(next, decoded);
+					await saveChanges();
+					replace(next, decoded, null);
+					dirty.current = true;
+					return;
+				}
 				if (doc.current.layers.length >= 8) throw Error("Layer limit");
 				const image = await importSketchImage(file), w = doc.current.width ?? 1024, h = doc.current.height ?? 1024;
 				const scale = Math.min(w / image.width, h / image.height), width = image.width * scale / w, height = image.height * scale / h;
@@ -1703,11 +2203,101 @@ window.__ModuleLoader__.load({
 				if (busy || active.current) return;
 				const source = direction === "undo" ? undo : redo, target = direction === "undo" ? redo : undo;
 				if (!source.current.length) return;
+				documentRevision.current++;
 				dirty.current = true;
 				target.current.push(doc.current);
 				doc.current = source.current.pop();
 				schedule();
 			};
+			Object.assign(agentAdapter.current, {
+				available: () => open && enabled,
+				open: () => onOpen(),
+				busy: () => busy || Boolean(active.current),
+				document: () => doc.current,
+				snapshot: () => ({
+					documentId: documentId.current,
+					revision: documentRevision.current,
+					width: doc.current.width ?? 1024,
+					height: doc.current.height ?? 1024,
+					active: doc.current.active,
+					layers: doc.current.layers.map((layer) => ({
+						id: layer.id,
+						name: layer.name,
+						visible: layer.visible,
+						strokes: layer.strokes.length,
+						image: Boolean(layer.image)
+					})),
+					strokeCount: strokeCount(doc.current)
+				}),
+				commit: (next) => {
+					checkpoint();
+					doc.current = next;
+					setError("");
+					schedule();
+				},
+				preview: async () => {
+					paint();
+					return canvas.current.toDataURL("image/png");
+				},
+				save: async (name) => {
+					setBusy(true);
+					try {
+						await save(name);
+					} finally {
+						setBusy(false);
+					}
+				}
+			});
+			agentSession.current ??= createSketchCommandSession(agentAdapter.current);
+			(0, react.useEffect)(() => {
+				if (!open || !enabled || !agentEnabled) return;
+				const api = Object.freeze({
+					version: 1,
+					sessionId,
+					execute: (request) => agentSession.current(request),
+					export: async (format) => {
+						if (agentAdapter.current.busy()) throw Error("Sketch is being edited");
+						const { blob, extension } = await agentAdapter.current.export(format);
+						const data = new Uint8Array(await blob.arrayBuffer());
+						let raw = "";
+						for (let i = 0; i < data.length; i += 8192) raw += String.fromCharCode(...data.subarray(i, i + 8192));
+						return {
+							extension,
+							mediaType: blob.type,
+							base64: btoa(raw)
+						};
+					}
+				});
+				window.dshSketchAgent = api;
+				return () => {
+					if (window.dshSketchAgent === api) delete window.dshSketchAgent;
+				};
+			}, [
+				open,
+				enabled,
+				agentEnabled,
+				rpc,
+				sessionId
+			]);
+			(0, react.useEffect)(() => {
+				if (!enabled || !agentEnabled || !rpc || !sessionId) return;
+				let live = true;
+				const disconnect = connectSketchAgent(rpc, sessionId, (request) => executeSketchFromAgent(request, {
+					available: () => agentAdapter.current.available(),
+					open: () => agentAdapter.current.open(),
+					execute: (request) => agentSession.current(request),
+					live: () => live
+				}), (message) => setError(message), () => agentAdapter.current.available() ? 350 : 1500);
+				return () => {
+					live = false;
+					disconnect();
+				};
+			}, [
+				enabled,
+				agentEnabled,
+				rpc,
+				sessionId
+			]);
 			const attach = async () => {
 				if (!enabled || busy) return;
 				setBusy(true);
@@ -1724,6 +2314,34 @@ window.__ModuleLoader__.load({
 					setBusy(false);
 				}
 			};
+			const exportFile = async (format = "png") => {
+				paint();
+				if (format === "draft") return {
+					blob: new Blob([encodeSketchDocument(doc.current)], { type: "application/json" }),
+					extension: "dsh-sketch.json"
+				};
+				if (format === "psd") return {
+					blob: new Blob([await exportSketchPsd(doc.current, images.current, canvas.current)], { type: "image/vnd.adobe.photoshop" }),
+					extension: "psd"
+				};
+				if (format !== "png") throw Error("Unsupported format");
+				return {
+					blob: await new Promise((resolve, reject) => canvas.current.toBlob((blob) => blob ? resolve(blob) : reject(Error("PNG")), "image/png")),
+					extension: "png"
+				};
+			};
+			agentAdapter.current.export = exportFile;
+			const download = async (format) => {
+				const { blob, extension } = await exportFile(format);
+				await saveChanges();
+				const url = URL.createObjectURL(blob), link = document.createElement("a");
+				link.href = url;
+				link.download = `${(saved.current?.name || "sketch").replace(/[\\/:*?"<>|\u0000-\u001f]/g, "-").slice(0, 80)}.${extension}`;
+				document.body.append(link);
+				link.click();
+				link.remove();
+				setTimeout(() => URL.revokeObjectURL(url), 1e4);
+			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dialog", {
 				ref: dialog,
 				className: "codexSketchDialog codexSketchStudio codexLayerStudio",
@@ -1774,6 +2392,8 @@ window.__ModuleLoader__.load({
 								load,
 								fresh,
 								importImage,
+								download,
+								hasContent: doc.current.layers.some((l) => l.visible && (l.image || l.strokes.length)),
 								disabled: busy,
 								t,
 								report: setError,
@@ -1801,7 +2421,7 @@ window.__ModuleLoader__.load({
 											})
 										}, name))
 									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
 										className: "codexSketchRatio",
 										"aria-label": t("sketchRatio"),
 										title: t("sketchRatioHint"),
@@ -1815,10 +2435,18 @@ window.__ModuleLoader__.load({
 											doc.current = next;
 											schedule();
 										},
-										children: Object.keys(SKETCH_RATIOS).map((ratio) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										children: [doc.current.ratio === "custom" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("option", {
+											value: "custom",
+											disabled: true,
+											children: [
+												doc.current.width,
+												"×",
+												doc.current.height
+											]
+										}) : null, Object.keys(SKETCH_RATIOS).map((ratio) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
 											value: ratio,
 											children: ratio
-										}, ratio))
+										}, ratio))]
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 										type: "button",
@@ -1873,7 +2501,11 @@ window.__ModuleLoader__.load({
 										setError(t("sketchHiddenLayer"));
 										return;
 									}
-									if (!(tool === "eraser" && eraser === "stroke") && strokeCount(doc.current) >= 200) {
+									if (!(tool === "eraser" && eraser === "stroke") && strokeCount(doc.current) >= 2e3) {
+										setError(t("sketchLimit"));
+										return;
+									}
+									if (tool !== "eraser" && doc.current.layers.reduce((n, l) => n + l.strokes.reduce((m, s) => m + s.points.length, 0), 0) >= 2e5) {
 										setError(t("sketchLimit"));
 										return;
 									}
@@ -1895,6 +2527,7 @@ window.__ModuleLoader__.load({
 										opacity: flow / 100,
 										shape: tool,
 										width,
+										fill: fillShape && ["rectangle", "circle"].includes(tool),
 										brush: tool === "pen" ? brush : "pen",
 										pressure: event.pointerType === "pen" ? Math.max(.2, event.pressure) : 1,
 										points: [start]
@@ -2021,7 +2654,7 @@ window.__ModuleLoader__.load({
 											type: "button",
 											title: t(`sketchLayer_${action}`),
 											"aria-label": t(`sketchLayer_${action}`),
-											disabled: busy || action === "delete" && doc.current.layers.length === 1 || action === "duplicate" && (doc.current.layers.length >= 8 || strokeCount(doc.current) + current.strokes.length > 200) || action === "up" && current === doc.current.layers.at(-1) || action === "down" && current === doc.current.layers[0],
+											disabled: busy || action === "delete" && doc.current.layers.length === 1 || action === "duplicate" && (doc.current.layers.length >= 8 || strokeCount(doc.current) + current.strokes.length > 2e3) || action === "up" && current === doc.current.layers.at(-1) || action === "down" && current === doc.current.layers[0],
 											onClick: () => change(action),
 											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, {
 												name: action === "delete" ? "clear" : action,
@@ -2097,6 +2730,11 @@ window.__ModuleLoader__.load({
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "codexLayerBrush",
 								children: [
+									["rectangle", "circle"].includes(tool) ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										type: "checkbox",
+										checked: fillShape,
+										onChange: (e) => setFillShape(e.target.checked)
+									}), t("sketchFill")] }) : null,
 									tool === "pen" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 										className: "codexSketchStability",
 										children: [t("sketchStability"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
@@ -2241,6 +2879,7 @@ window.__ModuleLoader__.load({
 .codexSketchFilePanel button{min-height:36px;border-radius:8px;padding:4px 10px;background:color-mix(in srgb,var(--sketch-fg) 6%,transparent)}
 .codexSketchFilePanel input{min-width:0;min-height:36px;border:1px solid var(--sketch-line);border-radius:8px;padding:6px 10px;background:var(--sketch-bg);color:inherit;font:inherit}
 .codexSketchFilePanel small{color:var(--sketch-muted);line-height:1.5}.codexSketchFileActions{display:flex;gap:8px}.codexSketchFileActions>button{flex:1}
+.codexSketchFilePanel .codexSketchExportFormats{gap:2px;border-radius:10px}.codexSketchFilePanel .codexSketchExportFormats button{flex:1;min-width:0;min-height:34px;padding:4px 8px;background:transparent;font-size:12px}.codexSketchFilePanel .codexSketchExportFormats button[aria-pressed=true]{background:var(--sketch-bg);box-shadow:0 1px 4px #0002,inset 0 0 0 1px var(--sketch-line)}
 .codexSketchDraftList{max-height:220px;overflow:auto}.codexSketchDraftList>div{display:flex;gap:6px;margin-bottom:6px}.codexSketchDraftList button:first-child{flex:1;min-width:0;justify-content:flex-start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .codexSketchStability{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--sketch-muted)}.codexSketchStability select{height:32px;border:1px solid var(--sketch-line);border-radius:8px;background:var(--sketch-bg);color:var(--sketch-fg);font:inherit}
 @media(max-width:760px){.codexSketchTop{gap:2px}.codexSketchUtility{gap:2px}.codexSketchRound{width:32px}.codexSketchLayersToggle{padding:0 6px}.codexSketchFiles>button{padding:0 6px}.codexSketchRatio{max-width:65px}.codexSketchPill button{min-width:42px}.codexSketchDialog .codexSketchConfirm{padding:0 8px}.codexSketchTop{flex-shrink:0}}
@@ -2254,7 +2893,7 @@ window.__ModuleLoader__.load({
 `;
 		//#endregion
 		//#region src/sketch-workspace.jsx
-		function SketchWorkspace({ preference, attachSketch, registerOpen, t }) {
+		function SketchWorkspace({ preference, attachSketch, registerOpen, t, sessionId, rpc }) {
 			const settings = (0, react.useSyncExternalStore)(preference.subscribe, preference.getSnapshot);
 			const [open, setOpen] = (0, react.useState)(false);
 			const [incoming, setIncoming] = (0, react.useState)(null);
@@ -2267,6 +2906,13 @@ window.__ModuleLoader__.load({
 				}
 			}), [registerOpen]);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SketchStudio, {
+				agentEnabled: settings.imageSketchAgent,
+				onOpen: () => {
+					opener.current = document.activeElement;
+					setOpen(true);
+				},
+				sessionId,
+				rpc,
 				incoming,
 				open,
 				onClose: () => {
@@ -2311,12 +2957,17 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/image-composer.js
-		function attachImageFiles(conversation, input, files) {
-			const created = conversation.createDraftImages(files);
+		function attachImageFiles(conversation, input, files, sessionId) {
+			const modern = typeof conversation.createDrafts === "function";
+			const create = modern ? () => conversation.createDrafts(sessionId, files) : () => conversation.createDraftImages(files);
+			const release = modern ? (items) => conversation.releaseDraftAttachments(items) : (items) => conversation.releaseDraftImages(items);
+			const add = modern ? input.addAttachments : input.addImages;
+			if (typeof add !== "function" || modern && !sessionId) throw new Error("Image composer is unavailable");
+			const created = create();
 			try {
-				if (!input.addImages(created.map((item) => item.id))) throw new Error("The composer is busy");
+				if (!add.call(input, created.map((item) => item.id))) throw new Error("The composer is busy");
 			} catch (error) {
-				conversation.releaseDraftImages(created);
+				release(created);
 				throw error;
 			}
 			return created;
@@ -2362,6 +3013,11 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/client-locales.js
 		const zh = {
+			sketchFill: "填色",
+			sketchDownload: "下载",
+			sketchExportFormat: "导出格式",
+			sketchEditableFile: "可编辑草稿",
+			sketchFormatHint: "PNG 为合并图片；PSD 交换像素图层；可编辑草稿保留原生笔画。可导入 PSD 或草稿文件（32 MB 内）；PSD 仅支持普通像素图层，长边适配至 1024。",
 			imageToSketch: "进入草图",
 			sketchPictures: "图片",
 			sketchPictureAdd: "添加",
@@ -2386,7 +3042,7 @@ window.__ModuleLoader__.load({
 			sketchKey_fit: "重置视图",
 			sketchFiles: "草稿",
 			sketchNew: "新建草图",
-			sketchImport: "导入图片",
+			sketchImport: "导入文件",
 			sketchDraftName: "草稿名称",
 			sketchSave: "保存草稿",
 			sketchDeleteDraft: "删除",
@@ -2425,7 +3081,7 @@ window.__ModuleLoader__.load({
 			imageCapability_on: "启用",
 			imageCapability_off: "关闭",
 			imageEntryPoints: "创作入口",
-			imageEntryPointsHint: "@生图与草图 Beta；隐藏后仍可用自然语言生图。",
+			imageEntryPointsHint: "@生图入口；隐藏后仍可用自然语言生图。",
 			imageEntryPoints_on: "显示",
 			imageEntryPoints_off: "隐藏",
 			imageBrowsing: "图片浏览",
@@ -2461,6 +3117,14 @@ window.__ModuleLoader__.load({
 			sketchTool_rectangle: "矩形",
 			sketchTool_circle: "椭圆",
 			sketchTool_eraser: "橡皮",
+			sketchCanvas: "草图画板 · Beta",
+			sketchCanvasHint: "默认关闭；开启后显示手动画板入口。",
+			sketchCanvas_on: "开启",
+			sketchCanvas_off: "关闭",
+			sketchAgent: "Agent 绘图 · Beta",
+			sketchAgentHint: "默认关闭；开启后向模型提供绘图工具，需要同时开启草图画板。",
+			sketchAgent_on: "开启",
+			sketchAgent_off: "关闭",
 			imageSettings: "图片",
 			imageGeneration: "生成新图片",
 			imageEditing: "参考图编辑",
@@ -2734,6 +3398,11 @@ window.__ModuleLoader__.load({
 			imageRemoveAnnotation: "删除标注"
 		};
 		const en = {
+			sketchFill: "Fill",
+			sketchDownload: "Download",
+			sketchExportFormat: "Export format",
+			sketchEditableFile: "Editable draft",
+			sketchFormatHint: "PNG is flattened; PSD exchanges pixel layers; editable drafts retain native strokes. Import PSD or draft files up to 32 MB. PSD supports normal pixel layers, fitted to a 1024 px long edge.",
 			imageToSketch: "Open in sketch",
 			sketchPictures: "Images",
 			sketchPictureAdd: "Add",
@@ -2758,7 +3427,7 @@ window.__ModuleLoader__.load({
 			sketchKey_fit: "Reset view",
 			sketchFiles: "Drafts",
 			sketchNew: "New sketch",
-			sketchImport: "Import image",
+			sketchImport: "Import file",
 			sketchDraftName: "Draft name",
 			sketchSave: "Save draft",
 			sketchDeleteDraft: "Delete",
@@ -2797,7 +3466,7 @@ window.__ModuleLoader__.load({
 			imageCapability_on: "Enabled",
 			imageCapability_off: "Off",
 			imageEntryPoints: "Creative shortcuts",
-			imageEntryPointsHint: "@Image and Sketch Beta. Natural-language image requests still work when hidden.",
+			imageEntryPointsHint: "@Image shortcut. Natural-language image requests still work when hidden.",
 			imageEntryPoints_on: "Show",
 			imageEntryPoints_off: "Hide",
 			imageBrowsing: "Image browsing",
@@ -2833,6 +3502,14 @@ window.__ModuleLoader__.load({
 			sketchTool_rectangle: "Rectangle",
 			sketchTool_circle: "Ellipse",
 			sketchTool_eraser: "Eraser",
+			sketchCanvas: "Sketch canvas · Beta",
+			sketchCanvasHint: "Off by default. Enables the manual sketch board.",
+			sketchCanvas_on: "On",
+			sketchCanvas_off: "Off",
+			sketchAgent: "Agent drawing · Beta",
+			sketchAgentHint: "Off by default. Exposes drawing tools to the model; requires the sketch canvas.",
+			sketchAgent_on: "On",
+			sketchAgent_off: "Off",
 			imageSettings: "Images",
 			imageGeneration: "Generate new images",
 			imageEditing: "Reference image editing",
@@ -3308,14 +3985,14 @@ window.__ModuleLoader__.load({
 .codexModelSelectMenu{overflow:visible}
 .codexImageTool{display:flex;flex-direction:column;gap:8px;margin:4px 0;color:var(--dsw-alias-label-primary)}
 .codexImageToolRow{display:flex;align-items:center;min-height:24px;gap:8px;font-size:13px;line-height:20px}
-.codexImageToolIcon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;color:var(--dsw-alias-label-secondary)}
-.codexImageToolIcon::before{content:'';width:8px;height:8px;border:1.5px solid currentColor;border-radius:3px}
-.codexImageTool[data-state=running] .codexImageToolIcon::before{border-radius:50%;border-right-color:transparent;animation:codexImageSpin 800ms linear infinite}
-.codexImageTool[data-state=error] .codexImageToolIcon::before{border-color:var(--dsw-alias-state-error-primary);background:var(--dsw-alias-state-error-primary)}
+.codexImageToolIcon{display:block;flex-shrink:0;width:16px;height:16px;color:var(--dsw-alias-label-secondary)}
+.codexImageTool[data-state=running] .codexImageToolIcon{animation:codexImageSpin 800ms linear infinite}
+.codexImageTool[data-state=error] .codexImageToolIcon{color:var(--dsw-alias-state-error-primary)}
 .codexImageToolTitle{font-weight:500}
 .codexImageToolState{color:var(--dsw-alias-label-tertiary)}
 .codexImageToolError{margin:0 0 0 24px;font-size:12px;line-height:18px;color:var(--dsw-alias-state-error-primary)}
-.codexImageToolGallery{margin-left:24px}
+.codexImageToolGallery{margin-left:0}
+.codexImageDetails{margin-left:24px;font-size:12px;color:var(--dsw-alias-label-secondary)}.codexImageDetails summary{cursor:pointer}.codexImageDetails p{margin:6px 0;line-height:1.6;overflow-wrap:anywhere}
 .codexGeneratedImageFrame{display:flex;align-items:center;justify-content:center;width:min(240px,100%);height:240px;padding:0;overflow:hidden;border:1px solid var(--dsw-alias-border-l2);border-radius:16px;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-tertiary);cursor:pointer}
 .codexGeneratedImageFrame img{display:block;width:100%;height:100%;object-fit:cover}
 .codexGeneratedImageRetry{min-height:36px;padding:0 12px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);cursor:pointer}
@@ -3335,10 +4012,10 @@ window.__ModuleLoader__.load({
 		const PIN_OUTER_STROKE = "#111827";
 		const PIN_INNER_STROKE = "#ffffff";
 		const finiteDimension = (value) => Number.isSafeInteger(value) && value > 0;
-		const clamp$1 = (value, min, max) => Math.min(max, Math.max(min, value));
+		const clamp$2 = (value, min, max) => Math.min(max, Math.max(min, value));
 		const clampCenter = (value, size, edge) => {
 			const margin = Math.min(edge, size / 2);
-			return clamp$1(value, margin, size - margin);
+			return clamp$2(value, margin, size - margin);
 		};
 		function getBitmapFactory(options) {
 			const factory = options?.createImageBitmap ?? options?.bitmapFactory ?? globalThis.createImageBitmap;
@@ -3470,6 +4147,182 @@ window.__ModuleLoader__.load({
 @media(max-width:760px){.dcsiv-actions{flex-wrap:wrap;justify-content:center}.dcsiv-edit-short{display:inline;white-space:normal;max-width:min(280px,calc(100vw - 80px))}.dcsiv-edit-action{height:auto;min-height:32px}.dcsiv-close-floating{top:12px;right:12px;width:40px;height:40px}.dcsiv-workspace{padding:60px 12px 68px}.dcsiv-image{max-width:calc(100vw - 24px);max-height:calc(100vh - 136px)}.dcsiv-topbar{bottom:12px;max-width:calc(100vw - 24px)}.dcsiv-button{padding:0 8px}.dcsiv-button span.dcsiv-label{display:none}.dcsiv-inline-note{width:min(260px,calc(100vw - 40px))}.dcsiv-copy-notes{display:none}}
 @media(prefers-reduced-motion:reduce){.dcsiv-surface{transition:none}}
 `;
+		//#endregion
+		//#region src/subscription-image-transform.js
+		const clamp$1 = (value, min, max) => Math.min(max, Math.max(min, value));
+		const fitted = () => ({
+			zoom: 1,
+			x: 0,
+			y: 0
+		});
+		function useImageTransform(identity) {
+			const [transform, setTransform] = (0, react.useState)(fitted);
+			const [dragging, setDragging] = (0, react.useState)(false);
+			const [pixelScale, setPixelScale] = (0, react.useState)(1);
+			const [geometry, setGeometry] = (0, react.useState)({
+				width: 0,
+				height: 0,
+				stageWidth: 0,
+				stageHeight: 0
+			});
+			const stageRef = (0, react.useRef)(null), surfaceRef = (0, react.useRef)(null), imageRef = (0, react.useRef)(null);
+			const transformRef = (0, react.useRef)(transform);
+			const pointers = (0, react.useRef)(/* @__PURE__ */ new Map()), gesture = (0, react.useRef)();
+			transformRef.current = transform;
+			const resetGesture = (0, react.useCallback)(() => {
+				pointers.current.clear();
+				gesture.current = void 0;
+				setDragging(false);
+			}, []);
+			const fit = (0, react.useCallback)(() => {
+				resetGesture();
+				setTransform(fitted());
+			}, [resetGesture]);
+			(0, react.useEffect)(() => {
+				fit();
+			}, [identity, fit]);
+			const actualScale = () => imageRef.current?.naturalWidth / Math.max(1, surfaceRef.current?.offsetWidth || 1) || 1;
+			const boundedPan = (0, react.useCallback)((zoom, x, y) => {
+				const stage = stageRef.current, surface = surfaceRef.current;
+				if (!stage || !surface || zoom <= 1) return {
+					x: 0,
+					y: 0
+				};
+				const limitX = Math.max(0, (surface.offsetWidth * zoom - stage.clientWidth) / 2);
+				const limitY = Math.max(0, (surface.offsetHeight * zoom - stage.clientHeight) / 2);
+				return {
+					x: clamp$1(x, -limitX, limitX),
+					y: clamp$1(y, -limitY, limitY)
+				};
+			}, []);
+			const setZoomAt = (0, react.useCallback)((zoom, clientX, clientY) => {
+				const stage = stageRef.current;
+				if (!stage) return;
+				setTransform((current) => {
+					const next = clamp$1(zoom, .5, Math.max(8, actualScale()));
+					const box = stage.getBoundingClientRect();
+					const px = clientX - box.left - box.width / 2, py = clientY - box.top - box.height / 2;
+					const ratio = next / current.zoom;
+					return {
+						zoom: next,
+						...boundedPan(next, px - (px - current.x) * ratio, py - (py - current.y) * ratio)
+					};
+				});
+			}, [boundedPan]);
+			const actual = (0, react.useCallback)(() => {
+				if (!imageRef.current?.naturalWidth) return;
+				resetGesture();
+				setTransform({
+					zoom: actualScale(),
+					x: 0,
+					y: 0
+				});
+			}, [resetGesture]);
+			const measure = (0, react.useCallback)(() => {
+				const next = {
+					width: surfaceRef.current?.offsetWidth ?? 0,
+					height: surfaceRef.current?.offsetHeight ?? 0,
+					stageWidth: stageRef.current?.clientWidth ?? 0,
+					stageHeight: stageRef.current?.clientHeight ?? 0
+				};
+				setGeometry((current) => Object.keys(next).every((key) => current[key] === next[key]) ? current : next);
+				setPixelScale(1 / actualScale());
+				setTransform((current) => ({
+					...current,
+					...boundedPan(current.zoom, current.x, current.y)
+				}));
+			}, [boundedPan]);
+			(0, react.useEffect)(() => {
+				if (!stageRef.current || !surfaceRef.current) return;
+				const observer = new ResizeObserver(measure);
+				observer.observe(stageRef.current);
+				observer.observe(surfaceRef.current);
+				measure();
+				return () => observer.disconnect();
+			}, [identity, measure]);
+			(0, react.useEffect)(() => {
+				const stage = stageRef.current;
+				if (!stage) return;
+				const wheel = (event) => {
+					event.preventDefault();
+					const delta = event.deltaY * (event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? stage.clientHeight : 1);
+					setZoomAt(transformRef.current.zoom * Math.exp(-delta * .0015), event.clientX, event.clientY);
+				};
+				stage.addEventListener("wheel", wheel, { passive: false });
+				return () => stage.removeEventListener("wheel", wheel);
+			}, [identity, setZoomAt]);
+			const onPointerDown = (event) => {
+				if (event.button !== 0 || event.target.closest("button,a,input,textarea,select")) return;
+				const current = transformRef.current;
+				if (event.pointerType === "mouse" && current.zoom <= 1) return;
+				event.currentTarget.setPointerCapture(event.pointerId);
+				pointers.current.set(event.pointerId, {
+					x: event.clientX,
+					y: event.clientY
+				});
+				if (pointers.current.size === 2) {
+					const [a, b] = [...pointers.current.values()];
+					gesture.current = {
+						kind: "pinch",
+						distance: Math.hypot(a.x - b.x, a.y - b.y),
+						transform: current
+					};
+				} else gesture.current = {
+					kind: "pan",
+					x: event.clientX,
+					y: event.clientY,
+					transform: current
+				};
+				setDragging(true);
+			};
+			const onPointerMove = (event) => {
+				if (!pointers.current.has(event.pointerId)) return;
+				pointers.current.set(event.pointerId, {
+					x: event.clientX,
+					y: event.clientY
+				});
+				const start = gesture.current;
+				if (start?.kind === "pinch" && pointers.current.size >= 2) {
+					const [a, b] = [...pointers.current.values()];
+					setZoomAt(start.transform.zoom * Math.hypot(a.x - b.x, a.y - b.y) / Math.max(1, start.distance), (a.x + b.x) / 2, (a.y + b.y) / 2);
+				} else if (start?.kind === "pan") setTransform({
+					zoom: start.transform.zoom,
+					...boundedPan(start.transform.zoom, start.transform.x + event.clientX - start.x, start.transform.y + event.clientY - start.y)
+				});
+			};
+			const endPointer = (event) => {
+				pointers.current.delete(event.pointerId);
+				const remaining = [...pointers.current.values()][0];
+				if (remaining) gesture.current = {
+					kind: "pan",
+					...remaining,
+					transform: transformRef.current
+				};
+				else resetGesture();
+			};
+			return {
+				transform,
+				transformRef,
+				dragging,
+				pixelScale,
+				geometry,
+				stageRef,
+				surfaceRef,
+				imageRef,
+				fit,
+				actual,
+				measure,
+				setZoomAt,
+				resetGesture,
+				pointerHandlers: {
+					onPointerDown,
+					onPointerMove,
+					onPointerUp: endPointer,
+					onPointerCancel: endPointer,
+					onLostPointerCapture: endPointer
+				}
+			};
+		}
 		//#endregion
 		//#region src/subscription-image-viewer.jsx
 		const fill$1 = (value, variables) => Object.entries(variables).reduce((text, [key, replacement]) => text.replaceAll(`{${key}}`, String(replacement)), value);
@@ -3482,8 +4335,15 @@ window.__ModuleLoader__.load({
 		const noteText = (annotations, t) => annotations.map((annotation, index) => {
 			return `${fill$1(t("imageAnnotation"), { value: index + 1 })} (${Math.round(annotation.x * 100)}%, ${Math.round(annotation.y * 100)}%): ${annotation.note.trim()}`;
 		}).filter((line) => !line.endsWith(": ")).join("\n");
-		function ViewerAction({ action, annotations, item, service, t }) {
+		function ViewerAction({ action, annotations, item, service, revision, t }) {
 			const [state, setState] = (0, react.useState)("idle");
+			const active = (0, react.useRef)(true);
+			(0, react.useEffect)(() => {
+				active.current = true;
+				return () => {
+					active.current = false;
+				};
+			}, []);
 			const invoke = async () => {
 				if (state === "pending") return;
 				setState("pending");
@@ -3493,10 +4353,11 @@ window.__ModuleLoader__.load({
 						item,
 						src: item.src
 					});
+					if (!active.current || service.getSnapshot()?.revision !== revision) return;
 					setState("idle");
 					if (action.closeOnSuccess) service.close();
 				} catch {
-					setState("failed");
+					if (active.current) setState("failed");
 				}
 			};
 			const label = state === "pending" ? action.pendingLabel : state === "failed" ? action.errorLabel : action.label;
@@ -3571,13 +4432,15 @@ window.__ModuleLoader__.load({
 		}
 		function SubscriptionImageViewerOverlay({ service, t }) {
 			const request = (0, react.useSyncExternalStore)(service.subscribe, service.getSnapshot);
-			const [index, setIndex] = (0, react.useState)(0);
-			const [transform, setTransform] = (0, react.useState)({
-				zoom: 1,
-				x: 0,
-				y: 0
+			const [cursor, setCursor] = (0, react.useState)({
+				revision: 0,
+				index: 0
 			});
-			const [dragging, setDragging] = (0, react.useState)(false);
+			const index = cursor.revision === request?.revision ? cursor.index : request?.index ?? 0;
+			const setIndex = (update) => setCursor((current) => ({
+				revision: request.revision,
+				index: typeof update === "function" ? update(current.revision === request.revision ? current.index : request.index) : update
+			}));
 			const [annotating, setAnnotating] = (0, react.useState)(false);
 			const [annotationsByImage, setAnnotationsByImage] = (0, react.useState)(service.getAnnotationsSnapshot);
 			const annotationsByImageRef = (0, react.useRef)(annotationsByImage);
@@ -3585,28 +4448,15 @@ window.__ModuleLoader__.load({
 			const [focusNote, setFocusNote] = (0, react.useState)();
 			const [copied, setCopied] = (0, react.useState)(false);
 			const rootRef = (0, react.useRef)(null);
-			const stageRef = (0, react.useRef)(null);
-			const surfaceRef = (0, react.useRef)(null);
-			const imageRef = (0, react.useRef)(null);
-			const pointersRef = (0, react.useRef)(/* @__PURE__ */ new Map());
-			const gestureRef = (0, react.useRef)();
-			const transformRef = (0, react.useRef)(transform);
-			transformRef.current = transform;
 			annotationsByImageRef.current = annotationsByImage;
 			(0, react.useEffect)(() => {
 				if (request === void 0) return;
-				setIndex(request.index);
-				setTransform({
-					zoom: 1,
-					x: 0,
-					y: 0
-				});
-				setDragging(false);
 				setAnnotating(false);
 				setSelected(void 0);
 				setCopied(false);
 			}, [request?.revision]);
 			const item = request?.items[index];
+			const { transform, transformRef, dragging, pixelScale, geometry, stageRef, surfaceRef, imageRef, fit, actual, measure, setZoomAt, resetGesture, pointerHandlers } = useImageTransform(`${request?.revision}:${item?.id}:${item?.src}`);
 			const annotations = item === void 0 ? [] : annotationsByImage[item.id] ?? [];
 			const setAnnotations = (0, react.useCallback)((update) => {
 				if (item === void 0) return;
@@ -3620,53 +4470,6 @@ window.__ModuleLoader__.load({
 				service.setAnnotations(item.id, next);
 				setAnnotationsByImage(snapshot);
 			}, [item?.id, service]);
-			const boundedPan = (0, react.useCallback)((zoom, x, y) => {
-				const stage = stageRef.current;
-				const surface = surfaceRef.current;
-				if (stage === null || surface === null || zoom <= 1) return {
-					x: 0,
-					y: 0
-				};
-				const limitX = Math.max(0, (surface.offsetWidth * zoom - stage.clientWidth) / 2) + 28;
-				const limitY = Math.max(0, (surface.offsetHeight * zoom - stage.clientHeight) / 2) + 28;
-				return {
-					x: clamp(x, -limitX, limitX),
-					y: clamp(y, -limitY, limitY)
-				};
-			}, []);
-			const setZoomAt = (0, react.useCallback)((nextZoom, clientX, clientY) => {
-				const stage = stageRef.current;
-				if (stage === null) return;
-				setTransform((current) => {
-					const next = clamp(nextZoom, .5, 8);
-					const box = stage.getBoundingClientRect();
-					const px = clientX - box.left - box.width / 2;
-					const py = clientY - box.top - box.height / 2;
-					const ratio = next / current.zoom;
-					return {
-						zoom: next,
-						...boundedPan(next, px - (px - current.x) * ratio, py - (py - current.y) * ratio)
-					};
-				});
-			}, [boundedPan]);
-			const fit = (0, react.useCallback)(() => {
-				setTransform({
-					zoom: 1,
-					x: 0,
-					y: 0
-				});
-			}, []);
-			const actual = (0, react.useCallback)(() => {
-				const image = imageRef.current;
-				const surface = surfaceRef.current;
-				if (image === null || surface === null || image.naturalWidth === 0) return;
-				const zoom = clamp(image.naturalWidth / Math.max(1, surface.offsetWidth), 1, 8);
-				setTransform({
-					zoom,
-					x: 0,
-					y: 0
-				});
-			}, []);
 			(0, react.useEffect)(() => {
 				if (request === void 0) return void 0;
 				const previousOverflow = document.body.style.overflow;
@@ -3734,77 +4537,13 @@ window.__ModuleLoader__.load({
 				annotations.length
 			]);
 			(0, react.useEffect)(() => {
-				setTransform({
-					zoom: 1,
-					x: 0,
-					y: 0
-				});
-				setDragging(false);
 				setAnnotating(false);
 				setSelected(void 0);
-			}, [item?.id]);
-			const onWheel = (0, react.useCallback)((event) => {
-				event.preventDefault();
-				setZoomAt(transformRef.current.zoom * Math.exp(-event.deltaY * .0015), event.clientX, event.clientY);
-			}, [setZoomAt]);
-			(0, react.useEffect)(() => {
-				const stage = stageRef.current;
-				if (stage === null || request === void 0) return void 0;
-				stage.addEventListener("wheel", onWheel, { passive: false });
-				return () => stage.removeEventListener("wheel", onWheel);
-			}, [onWheel, request]);
-			const onPointerDown = (event) => {
-				const target = event.target;
-				if (event.button !== 0 || annotating || target instanceof Element && target.closest("button,textarea,input,a,select,[contenteditable=true]") !== null) return;
-				pointersRef.current.set(event.pointerId, {
-					x: event.clientX,
-					y: event.clientY
-				});
-				if (pointersRef.current.size === 2) {
-					event.currentTarget.setPointerCapture(event.pointerId);
-					const [a, b] = [...pointersRef.current.values()];
-					gestureRef.current = {
-						kind: "pinch",
-						distance: Math.hypot(a.x - b.x, a.y - b.y),
-						transform
-					};
-				} else if (!annotating && transform.zoom > 1) {
-					event.currentTarget.setPointerCapture(event.pointerId);
-					gestureRef.current = {
-						kind: "pan",
-						x: event.clientX,
-						y: event.clientY,
-						transform
-					};
-					setDragging(true);
-				}
-			};
-			const onPointerMove = (event) => {
-				if (!pointersRef.current.has(event.pointerId)) return;
-				pointersRef.current.set(event.pointerId, {
-					x: event.clientX,
-					y: event.clientY
-				});
-				const gesture = gestureRef.current;
-				if (gesture?.kind === "pinch" && pointersRef.current.size >= 2) {
-					const [a, b] = [...pointersRef.current.values()];
-					const distance = Math.max(1, Math.hypot(a.x - b.x, a.y - b.y));
-					setZoomAt(gesture.transform.zoom * distance / Math.max(1, gesture.distance), (a.x + b.x) / 2, (a.y + b.y) / 2);
-				} else if (gesture?.kind === "pan") {
-					const pan = boundedPan(gesture.transform.zoom, gesture.transform.x + event.clientX - gesture.x, gesture.transform.y + event.clientY - gesture.y);
-					setTransform({
-						zoom: gesture.transform.zoom,
-						...pan
-					});
-				}
-			};
-			const endPointer = (event) => {
-				pointersRef.current.delete(event.pointerId);
-				if (pointersRef.current.size === 0) {
-					gestureRef.current = void 0;
-					setDragging(false);
-				}
-			};
+			}, [
+				item?.id,
+				item?.src,
+				request?.revision
+			]);
 			const addAnnotation = (event) => {
 				if (!annotating || event.target.closest(".dcsiv-annotation")) return;
 				const bounds = surfaceRef.current?.getBoundingClientRect();
@@ -3836,6 +4575,15 @@ window.__ModuleLoader__.load({
 			if (request === void 0 || item === void 0) return null;
 			const meta = [item.width && item.height ? `${item.width} × ${item.height}` : void 0, bytesLabel(item.bytes)].filter(Boolean).join(" · ");
 			const showCounter = request.items.length > 1;
+			const annotationPosition = (annotation) => {
+				const ratio = globalThis.devicePixelRatio || 1;
+				const align = (value) => Math.round(value * ratio) / ratio;
+				return {
+					left: align(geometry.stageWidth / 2 + transform.x + (annotation.x - .5) * geometry.width * transform.zoom - 12),
+					top: align(geometry.stageHeight / 2 + transform.y + (annotation.y - .5) * geometry.height * transform.zoom - 12),
+					visibility: geometry.width > 0 ? "visible" : "hidden"
+				};
+			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				ref: rootRef,
 				className: "dcsiv-root",
@@ -3861,7 +4609,10 @@ window.__ModuleLoader__.load({
 									"data-active": annotating,
 									"aria-label": annotating ? t("imageAnnotateCancel") : t("imageAnnotate"),
 									"aria-pressed": annotating,
-									onClick: () => setAnnotating((value) => !value),
+									onClick: () => {
+										resetGesture();
+										setAnnotating((value) => !value);
+									},
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconEditOutline16, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										className: "dcsiv-label",
 										children: annotating ? t("imageAnnotateCancel") : t("imageAnnotate")
@@ -3903,7 +4654,7 @@ window.__ModuleLoader__.load({
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 									className: "dcsiv-zoom",
-									children: [Math.round(transform.zoom * 100), "%"]
+									children: [Math.round(transform.zoom * pixelScale * 100), "%"]
 								}),
 								item.download === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
 									className: "dcsiv-download",
@@ -3923,8 +4674,9 @@ window.__ModuleLoader__.load({
 									annotations,
 									item,
 									service,
+									revision: request.revision,
 									t
-								}, action.id))
+								}, `${request.revision}:${index}:${action.id}`))
 							]
 						})
 					}),
@@ -3945,34 +4697,33 @@ window.__ModuleLoader__.load({
 							onClick: (event) => {
 								if (event.target === event.currentTarget && !annotating && transform.zoom === 1) service.close();
 							},
-							onPointerDown,
-							onPointerMove,
-							onPointerUp: endPointer,
-							onPointerCancel: endPointer,
+							...!annotating ? pointerHandlers : {},
 							onDoubleClick: () => {
 								if (transform.zoom === 1) actual();
 								else fit();
 							},
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								ref: surfaceRef,
-								className: "dcsiv-surface",
-								onClick: addAnnotation,
-								style: { transform: `translate3d(${transform.x}px,${transform.y}px,0) scale(${transform.zoom})` },
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-									ref: imageRef,
-									className: "dcsiv-image",
-									src: item.src,
-									alt: item.name,
-									draggable: "false"
-								}), annotations.map((annotation, position) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									ref: surfaceRef,
+									className: "dcsiv-surface",
+									onClick: addAnnotation,
+									style: { transform: `translate3d(${transform.x}px,${transform.y}px,0) scale(${transform.zoom})` },
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+										ref: imageRef,
+										className: "dcsiv-image",
+										src: item.src,
+										alt: item.name,
+										draggable: "false",
+										onLoad: () => {
+											measure();
+										}
+									}, `${request.revision}:${item.id}`)
+								}),
+								annotations.map((annotation, position) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 									className: "dcsiv-annotation",
 									"data-x": annotation.x < .38 ? "right" : annotation.x > .62 ? "left" : "center",
 									"data-y": annotation.y < .28 ? "down" : "up",
-									style: {
-										left: `${annotation.x * 100}%`,
-										top: `${annotation.y * 100}%`,
-										transform: `translate(-50%,-50%) scale(${1 / transform.zoom})`
-									},
+									style: annotationPosition(annotation),
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 										type: "button",
 										className: "dcsiv-pin",
@@ -4028,43 +4779,44 @@ window.__ModuleLoader__.load({
 											})
 										]
 									}) : null]
-								}, annotation.id))]
-							}), showCounter ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									className: "dcsiv-button dcsiv-icon-only dcsiv-nav dcsiv-prev",
-									"aria-label": t("imagePrevious"),
-									onClick: (event) => {
-										event.stopPropagation();
-										setIndex((value) => (value - 1 + request.items.length) % request.items.length);
-									},
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronLeftOutline14, {})
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									className: "dcsiv-button dcsiv-icon-only dcsiv-nav dcsiv-next",
-									"aria-label": t("imageNext"),
-									onClick: (event) => {
-										event.stopPropagation();
-										setIndex((value) => (value + 1) % request.items.length);
-									},
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronRightOutline14, {})
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-									className: "dcsiv-counter",
-									children: [
-										index + 1,
-										" / ",
-										request.items.length
-									]
-								})
-							] }) : annotating ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "dcsiv-hint",
-								children: t("imageAnnotateHint")
-							}) : transform.zoom === 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "dcsiv-hint",
-								children: t("imageZoomHint")
-							}) : null]
+								}, annotation.id)),
+								showCounter ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "dcsiv-button dcsiv-icon-only dcsiv-nav dcsiv-prev",
+										"aria-label": t("imagePrevious"),
+										onClick: (event) => {
+											event.stopPropagation();
+											setIndex((value) => (value - 1 + request.items.length) % request.items.length);
+										},
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronLeftOutline14, {})
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "dcsiv-button dcsiv-icon-only dcsiv-nav dcsiv-next",
+										"aria-label": t("imageNext"),
+										onClick: (event) => {
+											event.stopPropagation();
+											setIndex((value) => (value + 1) % request.items.length);
+										},
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronRightOutline14, {})
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										className: "dcsiv-counter",
+										children: [
+											index + 1,
+											" / ",
+											request.items.length
+										]
+									})
+								] }) : annotating ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dcsiv-hint",
+									children: t("imageAnnotateHint")
+								}) : transform.zoom === 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dcsiv-hint",
+									children: t("imageZoomHint")
+								}) : null
+							]
 						}), annotations.some((annotation) => annotation.note.trim() !== "") ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 							type: "button",
 							className: "dcsiv-copy-notes",
@@ -4100,7 +4852,7 @@ window.__ModuleLoader__.load({
 			const items = (Array.isArray(request?.items) ? request.items : []).flatMap((item, position) => {
 				if (typeof item?.src !== "string" || item.src === "") return [];
 				return [{
-					id: typeof item.id === "string" && item.id !== "" ? item.id : `image-${position + 1}`,
+					id: typeof item.id === "string" && item.id !== "" ? item.id : item.src,
 					src: item.src,
 					name: typeof item.name === "string" && item.name !== "" ? item.name : `Image ${position + 1}`,
 					width: boundedNumber(item.width, void 0),
@@ -4211,7 +4963,8 @@ window.__ModuleLoader__.load({
 			imageEditing: true,
 			imageViewer: true,
 			imageAnnotations: true,
-			imageSketch: true
+			imageSketch: false,
+			imageSketchAgent: false
 		});
 		function readImageFeatures(value = {}) {
 			return Object.fromEntries(Object.entries(IMAGE_FEATURE_DEFAULTS).map(([key, fallback]) => [key, typeof value?.[key] === "boolean" ? value[key] : fallback]));
@@ -4849,7 +5602,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/version.js
-		const PACKAGE_VERSION = "2.0.0";
+		const PACKAGE_VERSION = "2.1.0-beta.1";
 		//#endregion
 		//#region src/client-recovery.js
 		async function recoveryCall(rpc, endpoint, payload = {}, timeoutMs = 1e4) {
@@ -5416,7 +6169,9 @@ window.__ModuleLoader__.load({
 		//#region src/image-setting-groups.js
 		const IMAGE_SETTING_GROUPS = Object.freeze({
 			imageCapability: ["imageGeneration", "imageEditing"],
-			imageEntryPoints: ["imageShortcut", "imageSketch"],
+			imageEntryPoints: ["imageShortcut"],
+			sketchCanvas: ["imageSketch"],
+			sketchAgent: ["imageSketchAgent"],
 			imageBrowsing: ["imageViewer", "imageAnnotations"]
 		});
 		function imageGroupValue(snapshot, group) {
@@ -7193,7 +7948,7 @@ window.__ModuleLoader__.load({
 			})), "codex-subscription: Image trigger"));
 			const sessionInput = (sessionId) => {
 				const actx = sessions.scope(sessionId);
-				if (!actx || typeof conversation.createDraftImages !== "function" || !conversation.input?.for) throw new Error("Image composer is unavailable");
+				if (!actx || !conversation.input?.for) throw new Error("Image composer is unavailable");
 				return conversation.input.for(actx);
 			};
 			const openSketchImage = (sessionId) => async (src, name) => {
@@ -7209,7 +7964,7 @@ window.__ModuleLoader__.load({
 			const attachForEdit = (sessionId) => async (src, filename, draft, annotations = [], referenceName, sourceInDraft = false) => {
 				if (!preference.getSnapshot().imageEditing) throw new Error("Image editing is disabled");
 				const actx = sessions.scope(sessionId);
-				if (actx === void 0 || typeof conversation.createDraftImages !== "function" || conversation.input?.for === void 0) throw new Error("This DSH version does not provide the image composer bridge");
+				if (actx === void 0 || conversation.input?.for === void 0) throw new Error("This DSH version does not provide the image composer bridge");
 				const response = await fetch(src);
 				if (!response.ok) throw new Error("Could not read generated image");
 				const blob = await response.blob();
@@ -7220,7 +7975,7 @@ window.__ModuleLoader__.load({
 				}
 				const input = conversation.input.for(actx);
 				if (!preference.getSnapshot().imageEditing) throw new Error("Image editing is disabled");
-				if (files.length) attachImageFiles(conversation, input, files);
+				if (files.length) attachImageFiles(conversation, input, files, sessionId);
 				sessions.open(sessionId);
 				if (sourceInDraft && !annotations.length) return;
 				if (!input.state.getSnapshot().draft.trim()) input.setDraft(draft);
@@ -7270,6 +8025,8 @@ window.__ModuleLoader__.load({
 				inject: (sessionId) => ({
 					preference,
 					t,
+					sessionId,
+					rpc,
 					registerOpen: (callback) => {
 						sketchOpeners.set(sessionId, callback);
 						return () => {
@@ -7279,7 +8036,7 @@ window.__ModuleLoader__.load({
 					attachSketch: (blob) => {
 						const current = preference.getSnapshot();
 						if (!current.imageSketch || !current.imageEditing) throw new Error("Sketch editing is disabled");
-						attachImageFiles(conversation, sessionInput(sessionId), [new File([blob], "sketch-reference.png", { type: "image/png" })]);
+						attachImageFiles(conversation, sessionInput(sessionId), [new File([blob], "sketch-reference.png", { type: "image/png" })], sessionId);
 					}
 				})
 			}, ImageWorkspace));