dsh-codex-subscription 2.2.1 → 2.2.3

package/lib/client.js

@@ -877,6 +877,8 @@ window.__ModuleLoader__.load({
 			"runtime/install",
 			"runtime/remove",
 			"runtime/cancel",
+			"storage/status",
+			"storage/clear-forecast",
 			"reset-credit/inspect",
 			"reset-credit/prepare",
 			"reset-credit/consume",
@@ -1294,6 +1296,53 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/sketch-picture-panel.jsx
+		function SketchPicturePanel({ document, disabled, pictureInput, importImage, runFile, change, t }) {
+			const pictures = document.layers.filter((layer) => layer.image);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
+				className: "codexSketchPictures",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: t("sketchPictures") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						disabled,
+						onClick: () => pictureInput.current.click(),
+						children: t("sketchPictureAdd")
+					})] }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						ref: pictureInput,
+						hidden: true,
+						type: "file",
+						accept: "image/png,image/jpeg,image/webp",
+						onChange: (event) => {
+							const file = event.target.files?.[0];
+							event.target.value = "";
+							if (file) runFile(() => importImage(file));
+						}
+					}),
+					pictures.map((layer) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						"data-active": layer.id === document.active,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							disabled,
+							"aria-label": `${t("sketchPictureSelect")} ${layer.name}`,
+							onClick: () => change("select", layer.id),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+								src: layer.image.src,
+								alt: layer.name
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							disabled,
+							"aria-label": `${t("sketchDeleteDraft")} ${layer.name}`,
+							onClick: () => change(document.layers.length === 1 ? "clear" : "delete", layer.id),
+							children: "×"
+						})]
+					}, layer.id)),
+					pictures.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", { children: t("sketchPicturesEmpty") }) : null
+				]
+			});
+		}
+		//#endregion
 		//#region src/sketch-tool-picker.jsx
 		function SketchToolPicker({ t, disabled, tool, brush, chooseBrush, chooseTool, shapesOpen, setShapesOpen }) {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1382,1460 +1431,1641 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
-		//#region src/sketch-objects.js
-		const objectId = (stroke, index) => stroke.id ?? `legacy-${index}`;
-		const identifyObjects = (doc) => ({
-			...doc,
-			layers: doc.layers.map((layer) => ({
-				...layer,
-				strokes: layer.strokes.map((s, i) => s.id ? s : {
-					...s,
-					id: objectId(s, i)
-				})
-			}))
-		});
-		function objectBounds(stroke) {
-			const xs = stroke.points.map((p) => p.x), ys = stroke.points.map((p) => p.y);
-			return {
-				x: Math.min(...xs),
-				y: Math.min(...ys),
-				width: Math.max(...xs) - Math.min(...xs),
-				height: Math.max(...ys) - Math.min(...ys)
-			};
+		//#region src/sketch-interactions.js
+		function useSketchDismiss(open, close, host, selectors) {
+			const latest = (0, react.useRef)(close);
+			latest.current = close;
+			(0, react.useEffect)(() => {
+				if (!open) return;
+				const dialog = host.current?.closest("dialog") ?? host.current;
+				if (!dialog) return;
+				const pointer = (event) => {
+					if (selectors.some((selector) => event.target.closest?.(selector))) return;
+					latest.current(false);
+					if (event.target.matches?.("canvas")) {
+						event.preventDefault();
+						event.stopPropagation();
+						event.target.focus({ preventScroll: true });
+					}
+				};
+				const key = (event) => {
+					if (event.key !== "Escape" || event.target.closest?.("dialog") !== dialog) return;
+					event.preventDefault();
+					event.stopPropagation();
+					latest.current(false);
+					dialog.querySelector("canvas")?.focus({ preventScroll: true });
+				};
+				const hidden = () => latest.current(false);
+				document.addEventListener("pointerdown", pointer, true);
+				document.addEventListener("keydown", key, true);
+				dialog.addEventListener("close", hidden);
+				return () => {
+					document.removeEventListener("pointerdown", pointer, true);
+					document.removeEventListener("keydown", key, true);
+					dialog.removeEventListener("close", hidden);
+				};
+			}, [
+				open,
+				host,
+				selectors.join("|")
+			]);
 		}
-		function transformObject(stroke, { dx = 0, dy = 0, scaleX = 1, scaleY = 1 }) {
-			if (![
-				dx,
-				dy,
-				scaleX,
-				scaleY
-			].every(Number.isFinite) || scaleX <= 0 || scaleY <= 0) throw Error("Invalid object transform");
-			const box = objectBounds(stroke);
-			const points = stroke.points.map((p) => ({
-				x: box.x + (p.x - box.x) * scaleX + dx,
-				y: box.y + (p.y - box.y) * scaleY + dy
-			}));
-			if (points.some((p) => p.x < 0 || p.x > 1 || p.y < 0 || p.y > 1)) throw Error("Object would leave the canvas");
+		function useSketchCursor(canvas, ring, width, brush, zoom, hidden) {
+			const last = (0, react.useRef)(null), heldPressure = (0, react.useRef)(1);
+			const update = (event, bounds) => {
+				if (event) last.current = event;
+				const pointer = last.current, node = canvas.current, cursor = ring.current;
+				if (!pointer || !node || !cursor) return;
+				const rect = bounds ?? node.getBoundingClientRect();
+				if (hidden || pointer.pointerType === "touch" || pointer.clientX < rect.left || pointer.clientX > rect.right || pointer.clientY < rect.top || pointer.clientY > rect.bottom) {
+					cursor.hidden = true;
+					return;
+				}
+				const diameter = width * (node.hasPointerCapture(pointer.pointerId) && pointer.pointerType === "pen" ? heldPressure.current : 1) * rect.width / node.width;
+				cursor.hidden = false;
+				cursor.style.width = `${diameter}px`;
+				cursor.style.height = `${diameter}px`;
+				cursor.style.transform = `translate(${pointer.clientX - diameter / 2}px,${pointer.clientY - diameter / 2}px)`;
+			};
+			(0, react.useEffect)(() => {
+				update();
+				const observer = new ResizeObserver(() => update());
+				if (canvas.current) observer.observe(canvas.current);
+				return () => observer.disconnect();
+			}, [
+				width,
+				brush,
+				zoom,
+				hidden
+			]);
 			return {
-				...stroke,
-				points
+				down: (event) => {
+					heldPressure.current = event.pointerType === "pen" ? Math.max(.2, event.pressure) : 1;
+				},
+				move: (event, bounds) => update({
+					clientX: event.clientX,
+					clientY: event.clientY,
+					pointerId: event.pointerId,
+					pointerType: event.pointerType,
+					pressure: event.pressure
+				}, bounds),
+				leave: () => {
+					last.current = null;
+					if (ring.current) ring.current.hidden = true;
+				}
 			};
 		}
-		function sketchObjectSummary(doc) {
-			return doc.layers.flatMap((layer) => layer.strokes.map((stroke, i) => ({
-				layer: layer.id,
-				id: objectId(stroke, i),
-				shape: stroke.shape,
-				color: stroke.color,
-				bounds: objectBounds(stroke),
-				...stroke.text ? { text: stroke.text } : {}
-			})));
-		}
 		//#endregion
-		//#region src/sketch-input.js
-		function snapLine(start, end) {
-			const angle = Math.round(Math.atan2(end.y - start.y, end.x - start.x) / (Math.PI / 4)) * Math.PI / 4;
-			const length = Math.hypot(end.x - start.x, end.y - start.y);
-			return {
-				x: start.x + Math.cos(angle) * length,
-				y: start.y + Math.sin(angle) * length
-			};
+		//#region src/sketch-shortcuts.js
+		function sketchShortcutAction(keys, key) {
+			key = key.toLowerCase();
+			return Object.entries(keys).find(([, value]) => value === key)?.[0] ?? {
+				v: "select",
+				t: "text",
+				"+": "zoomIn"
+			}[key];
 		}
-		function smoothStrokePoints(points, strength = 0) {
-			if (!strength || points.length < 3) return points;
-			const radius = Math.max(1, Math.round(strength / 25)), amount = Math.min(1, strength / 75);
-			return points.map((point, i) => {
-				if (i === 0 || i === points.length - 1) return point;
-				let x = 0, y = 0, weight = 0;
-				for (let j = Math.max(0, i - radius); j <= Math.min(points.length - 1, i + radius); j++) {
-					const w = radius + 1 - Math.abs(j - i);
-					x += points[j].x * w;
-					y += points[j].y * w;
-					weight += w;
+		//#endregion
+		//#region src/sketch-view.jsx
+		const DEFAULT_KEYS = {
+			pen: "b",
+			eraser: "e",
+			line: "l",
+			rectangle: "r",
+			circle: "o",
+			pan: " ",
+			zoomIn: "=",
+			zoomOut: "-",
+			fit: "0"
+		};
+		function useSketchView(canvas, open) {
+			const [view, setView] = (0, react.useState)({
+				scale: 1,
+				x: 0,
+				y: 0
+			}), [keys, setKeys] = (0, react.useState)(() => {
+				try {
+					return {
+						...DEFAULT_KEYS,
+						...JSON.parse(localStorage.getItem("codex-sketch-keys"))
+					};
+				} catch {
+					return DEFAULT_KEYS;
 				}
-				return {
-					...point,
-					x: point.x + (x / weight - point.x) * amount,
-					y: point.y + (y / weight - point.y) * amount
-				};
 			});
-		}
-		//#endregion
-		//#region src/sketch-gesture.js
-		function updateSketchGesture(doc, gesture, samples, rect, width, shiftKey = false) {
-			if (!samples.length) return doc;
-			if (gesture.object) {
-				const point = sketchPoint(samples.at(-1).clientX, samples.at(-1).clientY, rect);
-				if (!point) return doc;
-				const box = objectBounds(gesture.object);
-				const stroke = gesture.handle === "end" ? {
-					...gesture.object,
-					points: [gesture.object.points[0], point]
-				} : gesture.handle === "size" ? transformObject(gesture.object, {
-					scaleX: Math.max(.001, point.x - box.x) / Math.max(.001, box.width),
-					scaleY: Math.max(.001, point.y - box.y) / Math.max(.001, box.height)
-				}) : transformObject(gesture.object, {
-					dx: Math.max(-box.x, Math.min(1 - box.x - box.width, point.x - gesture.start.x)),
-					dy: Math.max(-box.y, Math.min(1 - box.y - box.height, point.y - gesture.start.y))
-				});
-				doc = {
-					...doc,
-					layers: doc.layers.map((l) => l.id === gesture.layer ? {
-						...l,
-						strokes: l.strokes.map((s) => s.id === gesture.object.id ? stroke : s)
-					} : l)
+			const [shortcuts, setShortcuts] = (0, react.useState)(() => {
+				try {
+					return localStorage.getItem("codex-sketch-shortcuts") !== "off";
+				} catch {
+					return true;
+				}
+			}), [space, setSpace] = (0, react.useState)(false);
+			const drag = (0, react.useRef)(null), viewRef = (0, react.useRef)(view);
+			viewRef.current = view;
+			const zoom = (factor) => setView((v) => ({
+				...v,
+				scale: Math.max(.25, Math.min(8, v.scale * factor))
+			}));
+			const reset = () => setView({
+				scale: 1,
+				x: 0,
+				y: 0
+			});
+			(0, react.useEffect)(() => {
+				const node = canvas.current;
+				if (!node || !open) return;
+				const wheel = (e) => {
+					if (!shortcuts || !e.altKey) return;
+					e.preventDefault();
+					zoom(e.deltaY < 0 ? 1.1 : 1 / 1.1);
 				};
-				return doc;
-			}
-			for (const sample of samples) {
-				let point = sketchPoint(sample.clientX, sample.clientY, rect);
-				if (!point) continue;
-				const layer = doc.layers.find((layer) => layer.id === gesture.layer);
-				if (!layer) return doc;
-				if (gesture.eraseStroke) {
-					const previous = gesture.last ?? point;
-					const steps = Math.min(256, Math.max(1, Math.ceil(Math.hypot(point.x - previous.x, point.y - previous.y) * SKETCH_SIZE / Math.max(2, width / 2))));
-					layer.strokes = layer.strokes.filter((stroke) => {
-						for (let i = 1; i <= steps; i++) if (strokeHit(stroke, {
-							x: previous.x + (point.x - previous.x) * i / steps,
-							y: previous.y + (point.y - previous.y) * i / steps
-						}, width / 2, doc.width, doc.height)) return false;
+				node.addEventListener("wheel", wheel, { passive: false });
+				return () => node.removeEventListener("wheel", wheel);
+			}, [open, shortcuts]);
+			(0, react.useEffect)(() => {
+				const stop = () => {
+					drag.current = null;
+					setSpace(false);
+				};
+				window.addEventListener("blur", stop);
+				return () => window.removeEventListener("blur", stop);
+			}, []);
+			(0, react.useEffect)(() => {
+				if (!open || !shortcuts) {
+					setSpace(false);
+					drag.current = null;
+				}
+			}, [open, shortcuts]);
+			const setKey = (action, key) => {
+				key = key.toLowerCase();
+				if (!key || Object.entries(keys).some(([a, k]) => a !== action && k === key) || ["[", "]"].includes(key)) return;
+				const next = {
+					...keys,
+					[action]: key
+				};
+				setKeys(next);
+				try {
+					localStorage.setItem("codex-sketch-keys", JSON.stringify(next));
+				} catch {}
+			};
+			return {
+				view,
+				keys,
+				shortcuts,
+				space,
+				zoom,
+				reset,
+				setKey,
+				toggle: () => setShortcuts((v) => {
+					try {
+						localStorage.setItem("codex-sketch-shortcuts", v ? "off" : "on");
+					} catch {}
+					return !v;
+				}),
+				keyDown: (e) => {
+					if (!shortcuts || e.ctrlKey || e.metaKey || e.altKey) return false;
+					const action = sketchShortcutAction(keys, e.key);
+					if (action === "pan") {
+						e.preventDefault();
+						setSpace(true);
 						return true;
-					});
-				} else {
-					const stroke = layer.strokes.at(-1);
-					if (!stroke) return doc;
+					}
 					if ([
-						"line",
-						"arrow",
-						"rectangle",
-						"circle"
-					].includes(stroke.shape)) {
-						if (stroke.shape === "line" && shiftKey) {
-							const w = doc.width ?? 1024, h = doc.height ?? 1024, a = stroke.points[0];
-							const snapped = snapLine({
-								x: a.x * w,
-								y: a.y * h
-							}, {
-								x: point.x * w,
-								y: point.y * h
-							});
-							point = {
-								x: snapped.x / w,
-								y: snapped.y / h
-							};
-						}
-						stroke.points = [stroke.points[0], point];
-					} else {
-						const last = stroke.points.at(-1);
-						if (Math.hypot(last.x - point.x, last.y - point.y) < 1e-4) continue;
-						if (stroke.points.length >= 2e3) stroke.points = stroke.points.filter((_, i) => i % 2 === 0);
-						stroke.points.push(point);
+						"zoomIn",
+						"zoomOut",
+						"fit"
+					].includes(action)) {
+						e.preventDefault();
+						if (action === "fit") reset();
+						else zoom(action === "zoomOut" ? 1 / 1.2 : 1.2);
+						return true;
 					}
+					return false;
+				},
+				keyUp: (e) => {
+					if (e.key.toLowerCase() === keys.pan) setSpace(false);
+				},
+				down: (e) => {
+					if (e.button !== 1 && !space) return false;
+					e.preventDefault();
+					drag.current = {
+						id: e.pointerId,
+						x: e.clientX,
+						y: e.clientY,
+						view: viewRef.current
+					};
+					canvas.current.setPointerCapture(e.pointerId);
+					return true;
+				},
+				move: (e) => {
+					const d = drag.current;
+					if (!d || d.id !== e.pointerId) return false;
+					setView({
+						...d.view,
+						x: d.view.x + e.clientX - d.x,
+						y: d.view.y + e.clientY - d.y
+					});
+					return true;
+				},
+				end: (e) => {
+					if (drag.current?.id !== e.pointerId) return false;
+					drag.current = null;
+					if (canvas.current.hasPointerCapture(e.pointerId)) canvas.current.releasePointerCapture(e.pointerId);
+					return true;
 				}
-				gesture.last = point;
-			}
-			return doc;
+			};
 		}
-		//#endregion
-		//#region src/sketch-drafts.js
-		const DATABASE = "dsh-codex-sketches-v1";
-		const MAX_STORAGE = 32 * 1024 * 1024;
-		const metadata = (kind, row) => ({
-			key: `${kind}:${row.id}`,
-			kind,
-			id: row.id,
-			name: row.name,
-			updated: row.updated,
-			size: JSON.stringify(row).length
-		});
-		async function sketchDrafts(action, value, recoverySession) {
-			const db = await new Promise((resolve, reject) => {
-				let blocked = false;
-				const request = indexedDB.open(DATABASE, 2);
-				request.onblocked = () => {
-					blocked = true;
-					reject(Object.assign(Error("Close other sketch windows and retry"), { code: "SKETCH_STORAGE_BLOCKED" }));
-				};
-				request.onupgradeneeded = () => {
-					if (blocked) {
-						request.transaction.abort();
-						return;
-					}
-					const db = request.result, tx = request.transaction;
-					if (!db.objectStoreNames.contains("drafts")) db.createObjectStore("drafts", { keyPath: "id" });
-					const meta = db.createObjectStore("metadata", { keyPath: "key" });
-					db.createObjectStore("recovery", { keyPath: "id" });
-					const cursor = tx.objectStore("drafts").openCursor();
-					cursor.onsuccess = () => {
-						const row = cursor.result;
-						if (row) {
-							meta.put(metadata("drafts", row.value));
-							row.continue();
+		function SketchViewControls({ navigation, t }) {
+			const [open, setOpen] = (0, react.useState)(false), [placement, setPlacement] = (0, react.useState)(null);
+			const host = (0, react.useRef)(null), trigger = (0, react.useRef)(null);
+			const close = () => {
+				setOpen(false);
+				trigger.current?.focus({ preventScroll: true });
+			};
+			useSketchDismiss(open, setOpen, host, [".codexSketchViewControls", ".codexSketchKeyPanel"]);
+			(0, react.useLayoutEffect)(() => {
+				if (!open) return;
+				const dialog = host.current.closest("dialog");
+				const place = () => {
+					const box = dialog.getBoundingClientRect(), anchor = trigger.current.getBoundingClientRect();
+					const width = Math.min(360, box.width - 24);
+					setPlacement({
+						dialog,
+						style: {
+							width,
+							left: Math.max(12, Math.min(anchor.left - box.left, box.width - width - 12)),
+							bottom: box.bottom - anchor.top + 8,
+							maxHeight: Math.max(80, anchor.top - box.top - 24)
 						}
-					};
+					});
 				};
-				request.onsuccess = () => {
-					if (blocked) {
-						request.result.close();
-						return;
-					}
-					request.result.onversionchange = () => request.result.close();
-					resolve(request.result);
+				place();
+				const observer = new ResizeObserver(place);
+				observer.observe(dialog);
+				observer.observe(host.current);
+				window.addEventListener("resize", place);
+				return () => {
+					observer.disconnect();
+					window.removeEventListener("resize", place);
 				};
-				request.onerror = () => reject(request.error);
-			});
-			try {
-				return await new Promise((resolve, reject) => {
-					const write = [
-						"save",
-						"delete",
-						"checkpoint",
-						"clearRecovery"
-					].includes(action);
-					const tx = db.transaction([
-						"drafts",
-						"metadata",
-						"recovery"
-					], write ? "readwrite" : "readonly");
-					const meta = tx.objectStore("metadata"), kind = [
-						"checkpoint",
-						"recover",
-						"clearRecovery"
-					].includes(action) ? "recovery" : "drafts", store = tx.objectStore(kind);
-					let result, failure;
-					tx.oncomplete = () => resolve(result);
-					tx.onerror = () => reject(tx.error);
-					tx.onabort = () => reject(failure ?? tx.error ?? Error("Draft transaction aborted"));
-					if (action === "get" || action === "recover") {
-						const req = store.get(value);
-						req.onsuccess = () => {
-							result = req.result;
-						};
-						return;
-					}
-					if (action === "delete" || action === "clearRecovery") {
-						store.delete(value);
-						meta.delete(`${kind}:${value}`);
-						return;
-					}
-					if (![
-						"list",
-						"save",
-						"checkpoint"
-					].includes(action)) {
-						tx.abort();
-						return;
-					}
-					const request = meta.getAll();
-					request.onsuccess = () => {
-						const rows = request.result;
-						if (action === "list") {
-							result = rows.filter((row) => row.kind === "drafts").sort((a, b) => b.updated - a.updated);
-							return;
-						}
-						const next = metadata(kind, value), others = rows.filter((row) => row.key !== next.key && !(action === "save" && recoverySession && row.key === `recovery:${recoverySession}`));
-						const code = others.filter((row) => row.kind === kind).length >= 20 ? "SKETCH_DRAFT_LIMIT" : others.reduce((n, row) => n + row.size, 0) + next.size > MAX_STORAGE ? "SKETCH_STORAGE_LIMIT" : null;
-						if (code) {
-							failure = Object.assign(Error("Draft storage limit reached"), { code });
-							tx.abort();
-							return;
-						}
-						store.put(value);
-						meta.put(next);
-						if (action === "save" && recoverySession) {
-							tx.objectStore("recovery").delete(recoverySession);
-							meta.delete(`recovery:${recoverySession}`);
-						}
-						result = value;
-					};
-				});
-			} finally {
-				db.close();
-			}
-		}
-		async function decodeSketchImages(doc, images) {
-			for (const layer of doc.layers) {
-				const src = layer.image?.src;
-				if (!src || images.has(src)) continue;
-				if (!src.startsWith("data:image/png;base64,") || src.length > 8 * 1024 * 1024) throw Error("Invalid image");
-				const image = new Image();
-				image.src = src;
-				await image.decode();
-				images.set(src, image);
-			}
-		}
-		async function importSketchImage(file) {
-			if (![
-				"image/png",
-				"image/jpeg",
-				"image/webp"
-			].includes(file.type) || file.size > 20 * 1024 * 1024) throw Error("Image must be PNG, JPEG or WebP under 20 MB");
-			const bitmap = await createImageBitmap(file);
-			try {
-				if (bitmap.width * bitmap.height > 32 * 1024 * 1024) throw Error("Image too large");
-				const scale = Math.min(1, 1024 / Math.max(bitmap.width, bitmap.height));
-				const canvas = document.createElement("canvas");
-				canvas.width = Math.max(1, Math.round(bitmap.width * scale));
-				canvas.height = Math.max(1, Math.round(bitmap.height * scale));
-				canvas.getContext("2d").drawImage(bitmap, 0, 0, canvas.width, canvas.height);
-				return {
-					src: canvas.toDataURL("image/png"),
-					width: canvas.width,
-					height: canvas.height
-				};
-			} finally {
-				bitmap.close();
-			}
+			}, [open]);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: host,
+				className: "codexSketchViewControls",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"aria-label": t("sketchZoomOut"),
+						onClick: () => navigation.zoom(1 / 1.2),
+						children: "−"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						title: t("sketchFit"),
+						onClick: navigation.reset,
+						children: [Math.round(navigation.view.scale * 100), "%"]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"aria-label": t("sketchZoomIn"),
+						onClick: () => navigation.zoom(1.2),
+						children: "＋"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						ref: trigger,
+						type: "button",
+						"aria-expanded": open,
+						onClick: () => setOpen(!open),
+						children: t("sketchKeys")
+					}),
+					open && placement ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+						className: "codexSketchKeyPanel",
+						"aria-label": t("sketchKeys"),
+						style: placement.style,
+						onKeyDown: (e) => {
+							if (e.key === "Escape") {
+								e.preventDefault();
+								e.stopPropagation();
+								close();
+							}
+						},
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: t("sketchKeys") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								"aria-label": t("sketchFileClose"),
+								onClick: close,
+								children: "×"
+							})] }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+								className: "codexSketchKeysEnabled",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("sketchKeysEnabled") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									type: "checkbox",
+									checked: navigation.shortcuts,
+									onChange: navigation.toggle
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("sketchNavigationHint") }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "codexSketchKeyGrid",
+								children: Object.entries(navigation.keys).map(([action, key]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [t(`sketchKey_${action}`), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									"aria-label": t(`sketchKey_${action}`),
+									value: key === " " ? "Space" : key,
+									readOnly: true,
+									onKeyDown: (e) => {
+										if (e.key === "Tab" || e.key === "Escape") return;
+										e.preventDefault();
+										e.stopPropagation();
+										if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) navigation.setKey(action, e.key);
+									}
+								})] }, action))
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", { children: t("sketchKeyHint") })
+						]
+					}), placement.dialog) : null
+				]
+			});
 		}
 		//#endregion
-		//#region src/sketch-presets.js
-		const SKETCH_PRESETS = [
-			"triangle",
-			"diamond",
-			"star"
+		//#region src/sketch-controls.jsx
+		const PALETTE = [
+			"#18181b",
+			"#929398",
+			"#ff3936",
+			"#ff9500",
+			"#ffcc00",
+			"#34c759",
+			"#0088ff"
 		];
-		function expandSketchPreset(command) {
-			if (!SKETCH_PRESETS.includes(command.shape)) return command;
-			const points = command.points;
-			if (!Array.isArray(points) || points.length !== 2 || points.some((p) => !p || ![p.x, p.y].every((v) => Number.isFinite(v) && v >= 0 && v <= 1))) throw Error("Shape preset requires two normalized bounding-box corners");
-			const [a, b] = points, x = Math.min(a.x, b.x), y = Math.min(a.y, b.y);
-			const w = Math.abs(a.x - b.x), h = Math.abs(a.y - b.y);
-			if (!w || !h) throw Error("Shape preset requires a non-empty box");
-			const vertices = command.shape === "triangle" ? [
-				[.5, 0],
-				[1, 1],
-				[0, 1]
-			] : command.shape === "diamond" ? [
-				[.5, 0],
-				[1, .5],
-				[.5, 1],
-				[0, .5]
-			] : Array.from({ length: 10 }, (_, i) => {
-				const angle = i * Math.PI / 5 - Math.PI / 2, radius = i % 2 ? .22 : .5;
-				return [.5 + Math.cos(angle) * radius, .5 + Math.sin(angle) * radius];
+		function SketchControls({ t, navigation, picturesOpen, setPicturesOpen, disabled, tool, brush, chooseBrush, chooseTool, shapesOpen, setShapesOpen, fillShape, setFillShape, selected, editObject, selection, setTextEdit, stability, setStability, eraser, setEraser, color, pickColor }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "codexSketchControls",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "codexSketchPicturesToggle",
+						"aria-expanded": picturesOpen,
+						onClick: () => setPicturesOpen((value) => !value),
+						children: t("sketchPictures")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SketchViewControls, {
+						navigation,
+						t
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SketchToolPicker, {
+						t,
+						disabled,
+						tool,
+						brush,
+						chooseBrush,
+						chooseTool,
+						shapesOpen,
+						setShapesOpen
+					}),
+					/* @__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",
+								disabled,
+								checked: fillShape,
+								onChange: (event) => setFillShape(event.target.checked)
+							}), t("sketchFill")] }) : null,
+							selected ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "codexSketchObjectActions",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										disabled,
+										onClick: () => editObject({}, "duplicate"),
+										children: t("sketchObjectDuplicate")
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										disabled,
+										onClick: () => editObject({}, "delete"),
+										children: t("sketchObjectDelete")
+									}),
+									selected.shape === "text" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										disabled,
+										onClick: () => setTextEdit({
+											selection,
+											value: selected.text
+										}),
+										children: t("sketchText")
+									}) : null
+								]
+							}) : null,
+							tool === "pen" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+								className: "codexSketchStability",
+								children: [t("sketchStability"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+									"aria-label": t("sketchStability"),
+									value: stability,
+									disabled,
+									onChange: (event) => setStability(Number(event.target.value)),
+									children: [
+										0,
+										25,
+										50,
+										75
+									].map((value) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value,
+										children: t(`sketchStability${value}`)
+									}, value))
+								})]
+							}) : null,
+							tool === "eraser" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "codexSketchSegment",
+								role: "group",
+								"aria-label": t("sketchEraserMode"),
+								children: ["pixel", "stroke"].map((value) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									"aria-pressed": eraser === value,
+									disabled,
+									onClick: () => setEraser(value),
+									children: t(`sketchErase_${value}`)
+								}, value))
+							}) : null
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "codexSketchPalette",
+						role: "group",
+						"aria-label": t("sketchColor"),
+						children: [PALETTE.map((value) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "codexSketchSwatch",
+							style: { "--swatch": value },
+							"aria-label": `${t("sketchColor")} ${value}`,
+							"aria-pressed": (selected?.color ?? color) === value,
+							disabled,
+							onClick: () => pickColor(value)
+						}, value)), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+							className: "codexSketchCustom",
+							title: t("sketchColor"),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: { background: color } }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								type: "color",
+								"aria-label": t("sketchColor"),
+								value: color,
+								disabled,
+								onChange: (event) => pickColor(event.target.value)
+							})]
+						})]
+					})
+				]
 			});
+		}
+		//#endregion
+		//#region src/sketch-import-confirm.jsx
+		function useSketchImportConfirm(t) {
+			const [pending, setPending] = (0, react.useState)(false);
+			const resolve = (0, react.useRef)(null);
+			const dialog = (0, react.useRef)(null);
+			const finish = (accepted) => {
+				const done = resolve.current;
+				resolve.current = null;
+				setPending(false);
+				done?.(accepted);
+			};
+			(0, react.useEffect)(() => {
+				if (pending) dialog.current?.showModal();
+				else dialog.current?.close();
+			}, [pending]);
+			(0, react.useEffect)(() => () => {
+				resolve.current?.(false);
+				resolve.current = null;
+			}, []);
 			return {
-				...command,
-				shape: "polygon",
-				points: vertices.map(([u, v]) => ({
-					x: x + u * w,
-					y: y + v * h
-				}))
+				confirmPsd: () => new Promise((done) => {
+					resolve.current?.(false);
+					resolve.current = done;
+					setPending(true);
+				}),
+				prompt: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dialog", {
+					ref: dialog,
+					className: "codexSketchImportConfirm",
+					"aria-label": t("sketchPsdConfirmTitle"),
+					onKeyDown: (event) => event.stopPropagation(),
+					onCancel: (event) => {
+						event.preventDefault();
+						event.stopPropagation();
+						finish(false);
+					},
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("sketchPsdConfirmTitle") }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("sketchPsdConfirmBody") }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							autoFocus: true,
+							onClick: () => finish(false),
+							children: t("sketchCancel")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							onClick: () => finish(true),
+							children: t("sketchImport")
+						})] })
+					]
+				})
 			};
 		}
-		const SKETCH_COMMAND_HELP = {
-			coordinates: "Assign short meaningful stroke id values for later edits. Text uses two opposite box corners and text content; width is font size in pixels, automatic fitting within the box. Arrow uses two endpoints. Normalized x/y in [0,1]; width is canvas pixels. Read documentId and revision before editing.",
-			shapes: "line: exactly two endpoints; rectangle/circle (ellipse alias accepted): exactly two opposite bounding-box corners (circle draws an ellipse within that box); polygon: three or more vertices, closed automatically; pen: ordered path points. bezier: start point, then groups of control1/control2/end; use 4 points for one cubic curve, max 64 segments. Prefer bezier for smooth designed curves instead of many pen samples. fill:true closes and fills the curve. 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: {
-				preset: "triangle/diamond/star: {op:\"stroke\",id:\"badge\",shape:\"star\",points:[{x:0.1,y:0.1},{x:0.3,y:0.3}],color:\"#ffcc00\",fill:true}. Two opposite box corners; stored as editable polygon. Inspect objectId for one object without repeating full help.",
-				stroke: "{op:\"stroke\",layer:1,shape:\"pen|line|arrow|text|rectangle|circle|polygon|bezier\",color:\"#rrggbb\",width:2,opacity:1,fill:false,points:[{x:0.1,y:0.1},...]}",
-				layer: "Add: {op:\"layer\",action:\"add\",value:\"name\"}; optional id is the NEW unique integer ID, otherwise allocated automatically. after is the existing insertion anchor, defaults to active layer. Other actions: {op:\"layer\",action:\"select|rename|visible|duplicate|up|down|delete|clear\",id:1,value:\"name\"}; id targets an existing layer.",
-				curve: "Prefer {op:\"stroke\",shape:\"bezier\",start:{x:0,y:0},segments:[{control1:{x:0.2,y:0},control2:{x:0.8,y:1},end:{x:1,y:1}}],color:\"#123456\"}. Each segment has exactly two controls and an endpoint; no point counting required. Legacy points arrays still accepted. Do not provide both forms.",
-				object: "{op:\"object\",layer:1,id:\"title\",action:\"update|duplicate|delete\",patch:{color:\"#0088ff\",text:\"Title\"},transform:{dx:0.05,dy:0,scaleX:1,scaleY:1}}. All patch and transform fields optional. Inspect returns object IDs and bounds. Prefer targeted edits over redrawing layers.",
-				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 = identifyObjects(source);
-			for (let command of commands) {
-				if (!command || typeof command !== "object") throw Error("Invalid command");
-				if (command.op === "stroke") command = expandSketchPreset(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");
-					if (command.action === "add") {
-						const id = command.id ?? doc.nextId, after = command.after ?? doc.active;
-						if (!Number.isSafeInteger(id) || id < 1 || id === Number.MAX_SAFE_INTEGER || doc.layers.some((l) => l.id === id)) throw Error("New layer id must be a unique positive integer; omit id to allocate automatically");
-						const next = changeSketchLayer(doc, "add", after);
-						if (next === doc) throw Error("Cannot add layer: check the existing after layer and the 8-layer limit");
-						doc = {
-							...next,
-							active: id,
-							nextId: Math.max(next.nextId, id + 1),
-							layers: next.layers.map((l) => l.id === next.active ? {
-								...l,
-								id,
-								name: String(command.value ?? "").trim().slice(0, 40)
-							} : l)
-						};
-						continue;
-					}
-					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 === "object") {
-					const layer = doc.layers.find((l) => l.id === (command.layer ?? doc.active)), index = layer?.strokes.findIndex((s) => s.id === command.id);
-					if (!layer?.visible || index < 0 || index === void 0) throw Error("Object missing or hidden; inspect again");
-					const strokes = layer.strokes.slice(), original = strokes[index];
-					if (command.action === "delete") strokes.splice(index, 1);
-					else if (command.action === "duplicate") strokes.splice(index + 1, 0, {
-						...original,
-						id: crypto.randomUUID(),
-						points: original.points.map((p) => ({ ...p }))
-					});
-					else if (command.action === "update") {
-						const patch = command.patch ?? {};
-						if (Object.keys(patch).some((k) => ![
-							"color",
-							"width",
-							"opacity",
-							"fill",
-							"text",
-							"points"
-						].includes(k))) throw Error("Unsupported object property");
-						const changed = command.transform ? transformObject({
-							...original,
-							...patch
-						}, command.transform) : {
-							...original,
-							...patch
-						};
-						strokes[index] = {
-							...applySketchCommands({
-								...doc,
-								layers: [{
-									...layer,
-									strokes: []
-								}]
-							}, [{
-								...changed,
-								op: "stroke",
-								layer: layer.id
-							}]).layers[0].strokes[0],
-							brush: original.brush ?? "pen",
-							...original.pressure !== void 0 ? { pressure: original.pressure } : {},
-							...original.brushVersion === 2 ? { brushVersion: 2 } : {}
-						};
-					} else throw Error("Unknown object action");
-					doc = {
-						...doc,
-						layers: doc.layers.map((l) => l === layer ? {
-							...l,
-							strokes
-						} : l)
-					};
-					continue;
-				}
-				if (command.op !== "stroke") throw Error("Unknown command");
-				const shape = command.shape === "ellipse" ? "circle" : command.shape ?? "pen";
-				const { color, width = shape === "text" ? 24 : 2, opacity = 1, fill = false } = command;
-				let points = command.points;
-				if (command.start !== void 0 || command.segments !== void 0) {
-					if (shape !== "bezier" || points !== void 0 || !command.start || !Array.isArray(command.segments) || !command.segments.length || command.segments.length > 64) throw Error("Bezier requires start and 1–64 segments, without points");
-					points = [command.start, ...command.segments.flatMap((s) => [
-						s?.control1,
-						s?.control2,
-						s?.end
-					])];
+		//#endregion
+		//#region src/sketch-objects.js
+		const objectId = (stroke, index) => stroke.id ?? `legacy-${index}`;
+		const identifyObjects = (doc) => ({
+			...doc,
+			layers: doc.layers.map((layer) => ({
+				...layer,
+				strokes: layer.strokes.map((s, i) => s.id ? s : {
+					...s,
+					id: objectId(s, i)
+				})
+			}))
+		});
+		function objectBounds(stroke) {
+			const xs = stroke.points.map((p) => p.x), ys = stroke.points.map((p) => p.y);
+			return {
+				x: Math.min(...xs),
+				y: Math.min(...ys),
+				width: Math.max(...xs) - Math.min(...xs),
+				height: Math.max(...ys) - Math.min(...ys)
+			};
+		}
+		function transformObject(stroke, { dx = 0, dy = 0, scaleX = 1, scaleY = 1 }) {
+			if (![
+				dx,
+				dy,
+				scaleX,
+				scaleY
+			].every(Number.isFinite) || scaleX <= 0 || scaleY <= 0) throw Error("Invalid object transform");
+			const box = objectBounds(stroke);
+			const points = stroke.points.map((p) => ({
+				x: box.x + (p.x - box.x) * scaleX + dx,
+				y: box.y + (p.y - box.y) * scaleY + dy
+			}));
+			if (points.some((p) => p.x < 0 || p.x > 1 || p.y < 0 || p.y > 1)) throw Error("Object would leave the canvas");
+			return {
+				...stroke,
+				points
+			};
+		}
+		function sketchObjectSummary(doc) {
+			return doc.layers.flatMap((layer) => layer.strokes.map((stroke, i) => ({
+				layer: layer.id,
+				id: objectId(stroke, i),
+				shape: stroke.shape,
+				color: stroke.color,
+				bounds: objectBounds(stroke),
+				...stroke.text ? { text: stroke.text } : {}
+			})));
+		}
+		//#endregion
+		//#region src/sketch-input.js
+		function snapLine(start, end) {
+			const angle = Math.round(Math.atan2(end.y - start.y, end.x - start.x) / (Math.PI / 4)) * Math.PI / 4;
+			const length = Math.hypot(end.x - start.x, end.y - start.y);
+			return {
+				x: start.x + Math.cos(angle) * length,
+				y: start.y + Math.sin(angle) * length
+			};
+		}
+		function smoothStrokePoints(points, strength = 0) {
+			if (!strength || points.length < 3) return points;
+			const radius = Math.max(1, Math.round(strength / 25)), amount = Math.min(1, strength / 75);
+			return points.map((point, i) => {
+				if (i === 0 || i === points.length - 1) return point;
+				let x = 0, y = 0, weight = 0;
+				for (let j = Math.max(0, i - radius); j <= Math.min(points.length - 1, i + radius); j++) {
+					const w = radius + 1 - Math.abs(j - i);
+					x += points[j].x * w;
+					y += points[j].y * w;
+					weight += w;
 				}
-				if (![
-					"pen",
-					"line",
-					"rectangle",
-					"circle",
-					"polygon",
-					"bezier",
-					"arrow",
-					"text",
-					"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",
-					"arrow",
-					"text",
-					"rectangle",
-					"circle"
-				].includes(shape) && points.length !== 2 || shape === "polygon" && points.length < 3) throw Error("Invalid shape points");
-				if (shape === "bezier" && (points.length < 4 || points.length > 193 || (points.length - 1) % 3 !== 0)) throw Error(`commands[${commands.indexOf(command)}]: Bezier has ${points.length} points; expected 4, 7, 10, ... 193 (start + control1/control2/end per segment). No commands in this batch were applied.`);
-				if (fill && ![
-					"rectangle",
-					"circle",
-					"polygon",
-					"bezier"
-				].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");
-				if (shape === "text" && (typeof command.text !== "string" || !command.text.trim() || command.text.length > 500 || points[0].x === points[1].x || points[0].y === points[1].y)) throw Error("Text requires 1–500 characters and a non-empty bounding box");
-				const id = command.id ?? crypto.randomUUID();
-				if (typeof id !== "string" || !id.length || id.length > 100 || layer.strokes.some((s) => s.id === id)) throw Error("Invalid or duplicate object id");
-				const stroke = {
-					id,
-					...shape === "text" ? { text: command.text } : {},
-					shape,
-					color,
-					width,
-					opacity,
-					fill,
-					brush: "pen",
-					points: points.map((p) => ({
-						x: p.x,
-						y: p.y
-					}))
+				return {
+					...point,
+					x: point.x + (x / weight - point.x) * amount,
+					y: point.y + (y / weight - point.y) * amount
 				};
+			});
+		}
+		//#endregion
+		//#region src/sketch-gesture.js
+		function updateSketchGesture(doc, gesture, samples, rect, width, shiftKey = false) {
+			if (!samples.length) return doc;
+			if (gesture.object) {
+				const point = sketchPoint(samples.at(-1).clientX, samples.at(-1).clientY, rect);
+				if (!point) return doc;
+				const box = objectBounds(gesture.object);
+				const stroke = gesture.handle === "end" ? {
+					...gesture.object,
+					points: [gesture.object.points[0], point]
+				} : gesture.handle === "size" ? transformObject(gesture.object, {
+					scaleX: Math.max(.001, point.x - box.x) / Math.max(.001, box.width),
+					scaleY: Math.max(.001, point.y - box.y) / Math.max(.001, box.height)
+				}) : transformObject(gesture.object, {
+					dx: Math.max(-box.x, Math.min(1 - box.x - box.width, point.x - gesture.start.x)),
+					dy: Math.max(-box.y, Math.min(1 - box.y - box.height, point.y - gesture.start.y))
+				});
 				doc = {
 					...doc,
-					layers: doc.layers.map((item) => item === layer ? {
-						...item,
-						strokes: [...item.strokes, stroke]
-					} : item)
+					layers: doc.layers.map((l) => l.id === gesture.layer ? {
+						...l,
+						strokes: l.strokes.map((s) => s.id === gesture.object.id ? stroke : s)
+					} : l)
 				};
+				return doc;
+			}
+			for (const sample of samples) {
+				let point = sketchPoint(sample.clientX, sample.clientY, rect);
+				if (!point) continue;
+				const layer = doc.layers.find((layer) => layer.id === gesture.layer);
+				if (!layer) return doc;
+				if (gesture.eraseStroke) {
+					const previous = gesture.last ?? point;
+					const steps = Math.min(256, Math.max(1, Math.ceil(Math.hypot(point.x - previous.x, point.y - previous.y) * SKETCH_SIZE / Math.max(2, width / 2))));
+					layer.strokes = layer.strokes.filter((stroke) => {
+						for (let i = 1; i <= steps; i++) if (strokeHit(stroke, {
+							x: previous.x + (point.x - previous.x) * i / steps,
+							y: previous.y + (point.y - previous.y) * i / steps
+						}, width / 2, doc.width, doc.height)) return false;
+						return true;
+					});
+				} else {
+					const stroke = layer.strokes.at(-1);
+					if (!stroke) return doc;
+					if ([
+						"line",
+						"arrow",
+						"rectangle",
+						"circle"
+					].includes(stroke.shape)) {
+						if (stroke.shape === "line" && shiftKey) {
+							const w = doc.width ?? 1024, h = doc.height ?? 1024, a = stroke.points[0];
+							const snapped = snapLine({
+								x: a.x * w,
+								y: a.y * h
+							}, {
+								x: point.x * w,
+								y: point.y * h
+							});
+							point = {
+								x: snapped.x / w,
+								y: snapped.y / h
+							};
+						}
+						stroke.points = [stroke.points[0], point];
+					} else {
+						const last = stroke.points.at(-1);
+						if (Math.hypot(last.x - point.x, last.y - point.y) < 1e-4) continue;
+						if (stroke.points.length >= 2e3) stroke.points = stroke.points.filter((_, i) => i % 2 === 0);
+						stroke.points.push(point);
+					}
+				}
+				gesture.last = point;
 			}
-			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, cachedCharacters = 0;
-			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") {
-					const offset = request.offset ?? 0, objects = adapter.objects?.() ?? [];
-					if (!Number.isInteger(offset) || offset < 0) throw Error("offset must be a non-negative integer");
-					return {
-						...current,
-						protocolVersion: 2,
-						objects: request.objectId ? [] : objects.slice(offset, offset + 50),
-						objectCount: objects.length,
-						...!request.objectId && offset + 50 < objects.length ? { nextOffset: offset + 50 } : {},
-						...request.objectId ? { object: adapter.object?.(request.objectId, request.layer) } : {},
-						recentRequests: [...completed.values()].slice(-8).map((entry) => entry.receipt),
-						...!request.objectId && offset === 0 ? { 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()
+		//#endregion
+		//#region src/sketch-drafts.js
+		const DATABASE = "dsh-codex-sketches-v1";
+		const MAX_STORAGE = 32 * 1024 * 1024;
+		const metadata = (kind, row) => ({
+			key: `${kind}:${row.id}`,
+			kind,
+			id: row.id,
+			name: row.name,
+			updated: row.updated,
+			size: JSON.stringify(row).length
+		});
+		async function sketchDrafts(action, value, recoverySession) {
+			const db = await new Promise((resolve, reject) => {
+				let blocked = false;
+				const request = indexedDB.open(DATABASE, 2);
+				request.onblocked = () => {
+					blocked = true;
+					reject(Object.assign(Error("Close other sketch windows and retry"), { code: "SKETCH_STORAGE_BLOCKED" }));
 				};
-				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,
-					runId: void 0
-				});
-				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");
-				let changedObjects;
-				if (request.action === "apply") {
-					const before = adapter.document();
-					let next;
-					try {
-						next = applySketchCommands(before, request.commands);
-					} catch (cause) {
-						const error = new Error(`${cause.message} Correct the batch and retry with the same runId and revision; nothing was applied.`, { cause });
-						error.code = "SKETCH_INVALID_BATCH";
-						throw error;
-					}
-					adapter.commit(next);
-					const previous = new Map(before.layers.flatMap((l) => l.strokes.map((s) => [`${l.id}:${s.id}`, s])));
-					changedObjects = next.layers.flatMap((l) => l.strokes.filter((s) => previous.get(`${l.id}:${s.id}`) !== s).map((s) => ({
-						layer: l.id,
-						id: s.id
-					})));
-				} 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;
+				request.onupgradeneeded = () => {
+					if (blocked) {
+						request.transaction.abort();
+						return;
 					}
-				}
-				const result = {
-					...adapter.snapshot(),
-					...changedObjects ? {
-						changedObjects: changedObjects.slice(0, 100),
-						changedObjectCount: changedObjects.length
-					} : {}
+					const db = request.result, tx = request.transaction;
+					if (!db.objectStoreNames.contains("drafts")) db.createObjectStore("drafts", { keyPath: "id" });
+					const meta = db.createObjectStore("metadata", { keyPath: "key" });
+					db.createObjectStore("recovery", { keyPath: "id" });
+					const cursor = tx.objectStore("drafts").openCursor();
+					cursor.onsuccess = () => {
+						const row = cursor.result;
+						if (row) {
+							meta.put(metadata("drafts", row.value));
+							row.continue();
+						}
+					};
 				};
-				completed.set(key, {
-					fingerprint,
-					result,
-					receipt: {
-						requestId: request.requestId,
-						action: request.action,
-						revision: result.revision
+				request.onsuccess = () => {
+					if (blocked) {
+						request.result.close();
+						return;
 					}
-				});
-				cachedCharacters += fingerprint.length;
-				while (completed.size > 1 && (completed.size > 128 || cachedCharacters > 4e6)) {
-					const oldest = completed.keys().next().value;
-					cachedCharacters -= completed.get(oldest).fingerprint.length;
-					completed.delete(oldest);
-				}
-				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);
+					request.result.onversionchange = () => request.result.close();
+					resolve(request.result);
 				};
-				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");
-						if (s.brushVersion !== void 0 && s.brushVersion !== 2) throw Error("Unsupported brush version");
-						Object.assign(added[added.length - strokes.length + k], {
-							brush: s.brush ?? "pen",
-							pressure: s.pressure ?? 1,
-							...s.brushVersion === 2 ? { brushVersion: 2 } : {}
-						});
+				request.onerror = () => reject(request.error);
+			});
+			try {
+				return await new Promise((resolve, reject) => {
+					const write = [
+						"save",
+						"delete",
+						"checkpoint",
+						"clearRecovery"
+					].includes(action);
+					const tx = db.transaction([
+						"drafts",
+						"metadata",
+						"recovery"
+					], write ? "readwrite" : "readonly");
+					const meta = tx.objectStore("metadata"), kind = [
+						"checkpoint",
+						"recover",
+						"clearRecovery"
+					].includes(action) ? "recovery" : "drafts", store = tx.objectStore(kind);
+					let result, failure;
+					tx.oncomplete = () => resolve(result);
+					tx.onerror = () => reject(tx.error);
+					tx.onabort = () => reject(failure ?? tx.error ?? Error("Draft transaction aborted"));
+					if (action === "get" || action === "recover") {
+						const req = store.get(value);
+						req.onsuccess = () => {
+							result = req.result;
+						};
+						return;
 					}
-				}
-				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
+					if (action === "delete" || action === "clearRecovery") {
+						store.delete(value);
+						meta.delete(`${kind}:${value}`);
+						return;
+					}
+					if (![
+						"list",
+						"save",
+						"checkpoint"
+					].includes(action)) {
+						tx.abort();
+						return;
+					}
+					const request = meta.getAll();
+					request.onsuccess = () => {
+						const rows = request.result;
+						if (action === "list") {
+							result = rows.filter((row) => row.kind === "drafts").sort((a, b) => b.updated - a.updated);
+							return;
+						}
+						const next = metadata(kind, value), others = rows.filter((row) => row.key !== next.key && !(action === "save" && recoverySession && row.key === `recovery:${recoverySession}`));
+						const code = others.filter((row) => row.kind === kind).length >= 20 ? "SKETCH_DRAFT_LIMIT" : others.reduce((n, row) => n + row.size, 0) + next.size > MAX_STORAGE ? "SKETCH_STORAGE_LIMIT" : null;
+						if (code) {
+							failure = Object.assign(Error("Draft storage limit reached"), { code });
+							tx.abort();
+							return;
+						}
+						store.put(value);
+						meta.put(next);
+						if (action === "save" && recoverySession) {
+							tx.objectStore("recovery").delete(recoverySession);
+							meta.delete(`recovery:${recoverySession}`);
+						}
+						result = value;
 					};
-				}
+				});
+			} finally {
+				db.close();
 			}
-			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);
+		async function decodeSketchImages(doc, images) {
+			for (const layer of doc.layers) {
+				const src = layer.image?.src;
+				if (!src || images.has(src)) continue;
+				if (!src.startsWith("data:image/png;base64,") || src.length > 8 * 1024 * 1024) throw Error("Invalid image");
+				const image = new Image();
+				image.src = src;
+				await image.decode();
+				images.set(src, image);
+			}
+		}
+		async function importSketchImage(file) {
+			if (![
+				"image/png",
+				"image/jpeg",
+				"image/webp"
+			].includes(file.type) || file.size > 20 * 1024 * 1024) throw Error("Image must be PNG, JPEG or WebP under 20 MB");
+			const bitmap = await createImageBitmap(file);
+			try {
+				if (bitmap.width * bitmap.height > 32 * 1024 * 1024) throw Error("Image too large");
+				const scale = Math.min(1, 1024 / Math.max(bitmap.width, bitmap.height));
+				const canvas = document.createElement("canvas");
+				canvas.width = Math.max(1, Math.round(bitmap.width * scale));
+				canvas.height = Math.max(1, Math.round(bitmap.height * scale));
+				canvas.getContext("2d").drawImage(bitmap, 0, 0, canvas.width, canvas.height);
 				return {
-					name: layer.name || `Layer ${i + 1}`,
-					hidden: !layer.visible,
-					opacity: 1,
-					blendMode: "normal",
-					imageData: ctx.getImageData(0, 0, width, height)
+					src: canvas.toDataURL("image/png"),
+					width: canvas.width,
+					height: canvas.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)
-				});
+			} finally {
+				bitmap.close();
 			}
-			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
+		//#endregion
+		//#region src/sketch-presets.js
+		const SKETCH_PRESETS = [
+			"triangle",
+			"diamond",
+			"star"
+		];
+		function expandSketchPreset(command) {
+			if (!SKETCH_PRESETS.includes(command.shape)) return command;
+			const points = command.points;
+			if (!Array.isArray(points) || points.length !== 2 || points.some((p) => !p || ![p.x, p.y].every((v) => Number.isFinite(v) && v >= 0 && v <= 1))) throw Error("Shape preset requires two normalized bounding-box corners");
+			const [a, b] = points, x = Math.min(a.x, b.x), y = Math.min(a.y, b.y);
+			const w = Math.abs(a.x - b.x), h = Math.abs(a.y - b.y);
+			if (!w || !h) throw Error("Shape preset requires a non-empty box");
+			const vertices = command.shape === "triangle" ? [
+				[.5, 0],
+				[1, 1],
+				[0, 1]
+			] : command.shape === "diamond" ? [
+				[.5, 0],
+				[1, .5],
+				[.5, 1],
+				[0, .5]
+			] : Array.from({ length: 10 }, (_, i) => {
+				const angle = i * Math.PI / 5 - Math.PI / 2, radius = i % 2 ? .22 : .5;
+				return [.5 + Math.cos(angle) * radius, .5 + Math.sin(angle) * radius];
+			});
+			return {
+				...command,
+				shape: "polygon",
+				points: vertices.map(([u, v]) => ({
+					x: x + u * w,
+					y: y + v * h
+				}))
 			};
-			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-document-lifecycle.js
-		function createSketchDocumentLifecycle(state, { sessionId, t, schedule, checkpoint, cache, setSelection, setTextEdit, setRecovered, store = sketchDrafts, decodeImages = decodeSketchImages, readImage = importSketchImage }) {
-			const { doc, undo, redo, images, saved, dirty, documentId, documentRevision } = state;
-			const hasContent = () => doc.current.layers.some((layer) => layer.image || layer.strokes.length);
-			const save = async (name) => {
-				const savingDocument = documentId.current, savingRevision = documentRevision.current;
-				const row = {
-					id: saved.current?.id ?? crypto.randomUUID(),
-					name: name?.trim() || saved.current?.name || `${t("sketchTitle")} ${(/* @__PURE__ */ new Date()).toLocaleString()}`,
-					updated: Date.now(),
-					doc: structuredClone(doc.current)
-				};
-				try {
-					await store("save", row, sessionId);
-				} catch (error) {
-					if (error.code === "SKETCH_DRAFT_LIMIT") error.message = t("sketchDraftLimit");
-					if (error.code === "SKETCH_STORAGE_LIMIT") error.message = t("sketchStorageLimit");
-					throw error;
+		const SKETCH_COMMAND_HELP = {
+			coordinates: "Assign short meaningful stroke id values for later edits. Text uses two opposite box corners and text content; width is font size in pixels, automatic fitting within the box. Arrow uses two endpoints. Normalized x/y in [0,1]; width is canvas pixels. Read documentId and revision before editing.",
+			shapes: "line: exactly two endpoints; rectangle/circle (ellipse alias accepted): exactly two opposite bounding-box corners (circle draws an ellipse within that box); polygon: three or more vertices, closed automatically; pen: ordered path points. bezier: start point, then groups of control1/control2/end; use 4 points for one cubic curve, max 64 segments. Prefer bezier for smooth designed curves instead of many pen samples. fill:true closes and fills the curve. 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: {
+				preset: "triangle/diamond/star: {op:\"stroke\",id:\"badge\",shape:\"star\",points:[{x:0.1,y:0.1},{x:0.3,y:0.3}],color:\"#ffcc00\",fill:true}. Two opposite box corners; stored as editable polygon. Inspect objectId for one object without repeating full help.",
+				stroke: "{op:\"stroke\",layer:1,shape:\"pen|line|arrow|text|rectangle|circle|polygon|bezier\",color:\"#rrggbb\",width:2,opacity:1,fill:false,points:[{x:0.1,y:0.1},...]}",
+				layer: "Add: {op:\"layer\",action:\"add\",value:\"name\"}; optional id is the NEW unique integer ID, otherwise allocated automatically. after is the existing insertion anchor, defaults to active layer. Other actions: {op:\"layer\",action:\"select|rename|visible|duplicate|up|down|delete|clear\",id:1,value:\"name\"}; id targets an existing layer.",
+				curve: "Prefer {op:\"stroke\",shape:\"bezier\",start:{x:0,y:0},segments:[{control1:{x:0.2,y:0},control2:{x:0.8,y:1},end:{x:1,y:1}}],color:\"#123456\"}. Each segment has exactly two controls and an endpoint; no point counting required. Legacy points arrays still accepted. Do not provide both forms.",
+				object: "{op:\"object\",layer:1,id:\"title\",action:\"update|duplicate|delete\",patch:{color:\"#0088ff\",text:\"Title\"},transform:{dx:0.05,dy:0,scaleX:1,scaleY:1}}. All patch and transform fields optional. Inspect returns object IDs and bounds. Prefer targeted edits over redrawing layers.",
+				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 = identifyObjects(source);
+			for (let command of commands) {
+				if (!command || typeof command !== "object") throw Error("Invalid command");
+				if (command.op === "stroke") command = expandSketchPreset(command);
+				if (command.op === "resize") {
+					doc = resizeSketch(doc, command.ratio);
+					continue;
 				}
-				if (documentId.current === savingDocument) {
-					saved.current = {
-						id: row.id,
-						name: row.name
-					};
-					if (documentRevision.current === savingRevision) {
-						dirty.current = false;
-						setRecovered(false);
+				if (command.op === "layer") {
+					if (![
+						"add",
+						"select",
+						"rename",
+						"visible",
+						"duplicate",
+						"up",
+						"down",
+						"delete",
+						"clear"
+					].includes(command.action)) throw Error("Unknown layer action");
+					if (command.action === "add") {
+						const id = command.id ?? doc.nextId, after = command.after ?? doc.active;
+						if (!Number.isSafeInteger(id) || id < 1 || id === Number.MAX_SAFE_INTEGER || doc.layers.some((l) => l.id === id)) throw Error("New layer id must be a unique positive integer; omit id to allocate automatically");
+						const next = changeSketchLayer(doc, "add", after);
+						if (next === doc) throw Error("Cannot add layer: check the existing after layer and the 8-layer limit");
+						doc = {
+							...next,
+							active: id,
+							nextId: Math.max(next.nextId, id + 1),
+							layers: next.layers.map((l) => l.id === next.active ? {
+								...l,
+								id,
+								name: String(command.value ?? "").trim().slice(0, 40)
+							} : l)
+						};
+						continue;
 					}
+					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;
 				}
-			};
-			const saveChanges = async () => {
-				if (!dirty.current) return;
-				if (hasContent() || saved.current) return save();
-				const id = documentId.current, revision = documentRevision.current;
-				await store("clearRecovery", sessionId);
-				if (documentId.current === id && documentRevision.current === revision) {
-					dirty.current = false;
-					setRecovered(false);
+				if (command.op === "object") {
+					const layer = doc.layers.find((l) => l.id === (command.layer ?? doc.active)), index = layer?.strokes.findIndex((s) => s.id === command.id);
+					if (!layer?.visible || index < 0 || index === void 0) throw Error("Object missing or hidden; inspect again");
+					const strokes = layer.strokes.slice(), original = strokes[index];
+					if (command.action === "delete") strokes.splice(index, 1);
+					else if (command.action === "duplicate") strokes.splice(index + 1, 0, {
+						...original,
+						id: crypto.randomUUID(),
+						points: original.points.map((p) => ({ ...p }))
+					});
+					else if (command.action === "update") {
+						const patch = command.patch ?? {};
+						if (Object.keys(patch).some((k) => ![
+							"color",
+							"width",
+							"opacity",
+							"fill",
+							"text",
+							"points"
+						].includes(k))) throw Error("Unsupported object property");
+						const changed = command.transform ? transformObject({
+							...original,
+							...patch
+						}, command.transform) : {
+							...original,
+							...patch
+						};
+						strokes[index] = {
+							...applySketchCommands({
+								...doc,
+								layers: [{
+									...layer,
+									strokes: []
+								}]
+							}, [{
+								...changed,
+								op: "stroke",
+								layer: layer.id
+							}]).layers[0].strokes[0],
+							brush: original.brush ?? "pen",
+							...original.pressure !== void 0 ? { pressure: original.pressure } : {},
+							...original.brushVersion === 2 ? { brushVersion: 2 } : {}
+						};
+					} else throw Error("Unknown object action");
+					doc = {
+						...doc,
+						layers: doc.layers.map((l) => l === layer ? {
+							...l,
+							strokes
+						} : l)
+					};
+					continue;
 				}
-			};
-			const replace = (next, decoded, identity) => {
-				documentId.current = crypto.randomUUID();
-				documentRevision.current++;
-				doc.current = identifyObjects(structuredClone(next));
-				setSelection(null);
-				setTextEdit(null);
-				images.current = decoded;
-				cache.current.clear();
-				undo.current = [];
-				redo.current = [];
-				saved.current = identity;
-				dirty.current = false;
-				schedule();
-			};
-			const fresh = async () => {
-				await saveChanges();
-				replace(createSketchLayers(), /* @__PURE__ */ new Map(), null);
-			};
-			const load = async (row) => {
-				if (row.id === saved.current?.id) return;
-				row = await store("get", row.id);
-				if (!row) throw Error("Draft no longer exists");
-				await saveChanges();
-				const decoded = /* @__PURE__ */ new Map();
-				await decodeImages(row.doc, decoded);
-				replace(row.doc, decoded, {
-					id: row.id,
-					name: row.name
-				});
-			};
-			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 decodeImages(next, decoded);
-					await saveChanges();
-					replace(next, decoded, null);
-					dirty.current = true;
-					return;
+				if (command.op !== "stroke") throw Error("Unknown command");
+				const shape = command.shape === "ellipse" ? "circle" : command.shape ?? "pen";
+				const { color, width = shape === "text" ? 24 : 2, opacity = 1, fill = false } = command;
+				let points = command.points;
+				if (command.start !== void 0 || command.segments !== void 0) {
+					if (shape !== "bezier" || points !== void 0 || !command.start || !Array.isArray(command.segments) || !command.segments.length || command.segments.length > 64) throw Error("Bezier requires start and 1–64 segments, without points");
+					points = [command.start, ...command.segments.flatMap((s) => [
+						s?.control1,
+						s?.control2,
+						s?.end
+					])];
 				}
-				if (doc.current.layers.length >= 8) throw Error("Layer limit");
-				const image = await readImage(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;
-				const layer = {
-					id: doc.current.nextId,
-					name: file.name?.slice(0, 40) || t("sketchImport"),
-					visible: true,
-					strokes: [],
-					image: {
-						src: image.src,
-						x: (1 - width) / 2,
-						y: (1 - height) / 2,
-						width,
-						height
-					}
+				if (![
+					"pen",
+					"line",
+					"rectangle",
+					"circle",
+					"polygon",
+					"bezier",
+					"arrow",
+					"text",
+					"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",
+					"arrow",
+					"text",
+					"rectangle",
+					"circle"
+				].includes(shape) && points.length !== 2 || shape === "polygon" && points.length < 3) throw Error("Invalid shape points");
+				if (shape === "bezier" && (points.length < 4 || points.length > 193 || (points.length - 1) % 3 !== 0)) throw Error(`commands[${commands.indexOf(command)}]: Bezier has ${points.length} points; expected 4, 7, 10, ... 193 (start + control1/control2/end per segment). No commands in this batch were applied.`);
+				if (fill && ![
+					"rectangle",
+					"circle",
+					"polygon",
+					"bezier"
+				].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");
+				if (shape === "text" && (typeof command.text !== "string" || !command.text.trim() || command.text.length > 500 || points[0].x === points[1].x || points[0].y === points[1].y)) throw Error("Text requires 1–500 characters and a non-empty bounding box");
+				const id = command.id ?? crypto.randomUUID();
+				if (typeof id !== "string" || !id.length || id.length > 100 || layer.strokes.some((s) => s.id === id)) throw Error("Invalid or duplicate object id");
+				const stroke = {
+					id,
+					...shape === "text" ? { text: command.text } : {},
+					shape,
+					color,
+					width,
+					opacity,
+					fill,
+					brush: "pen",
+					points: points.map((p) => ({
+						x: p.x,
+						y: p.y
+					}))
 				};
-				await decodeImages({ layers: [layer] }, images.current);
-				checkpoint();
-				doc.current = {
-					...doc.current,
-					nextId: layer.id + 1,
-					active: layer.id,
-					layers: [...doc.current.layers, layer]
+				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, cachedCharacters = 0;
+			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") {
+					const offset = request.offset ?? 0, objects = adapter.objects?.() ?? [];
+					if (!Number.isInteger(offset) || offset < 0) throw Error("offset must be a non-negative integer");
+					return {
+						...current,
+						protocolVersion: 2,
+						objects: request.objectId ? [] : objects.slice(offset, offset + 50),
+						objectCount: objects.length,
+						...!request.objectId && offset + 50 < objects.length ? { nextOffset: offset + 50 } : {},
+						...request.objectId ? { object: adapter.object?.(request.objectId, request.layer) } : {},
+						recentRequests: [...completed.values()].slice(-8).map((entry) => entry.receipt),
+						...!request.objectId && offset === 0 ? { 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()
 				};
-				schedule();
-			};
-			const restore = async (isCurrent = () => true) => {
-				if (dirty.current || hasContent()) return;
-				const id = documentId.current, revision = documentRevision.current;
-				const recovery = await store("recover", sessionId);
-				const archived = state.restoreId.current;
-				const row = recovery ?? (archived ? await store("get", archived) : null);
-				const decoded = /* @__PURE__ */ new Map();
-				if (row) await decodeImages(row.doc, decoded);
-				if (!isCurrent() || documentId.current !== id || documentRevision.current !== revision || dirty.current) return;
-				if (row) {
-					replace(row.doc, decoded, recovery ? null : {
-						id: row.id,
-						name: row.name
-					});
-					dirty.current = Boolean(recovery);
-					setRecovered(Boolean(recovery));
+				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,
+					runId: void 0
+				});
+				const cached = completed.get(key);
+				if (cached) {
+					if (cached.fingerprint !== fingerprint) throw Error("requestId reused with different content");
+					return cached.result;
 				}
-				state.restoreId.current = null;
-			};
-			return {
-				hasContent,
-				save,
-				saveChanges,
-				replace,
-				fresh,
-				load,
-				importImage,
-				restore
-			};
-		}
-		//#endregion
-		//#region src/sketch-operation-gate.js
-		function createSketchOperationGate() {
-			let running = false;
-			return {
-				get running() {
-					return running;
-				},
-				async run(operation, { blocked = false, working, report, rethrow = false }) {
-					if (blocked || running) return false;
-					running = true;
+				if (request.revision !== current.revision || adapter.busy()) throw Error("Sketch changed or is being edited; inspect again");
+				let changedObjects;
+				if (request.action === "apply") {
+					const before = adapter.document();
+					let next;
 					try {
-						working(true);
-						report(null);
-						await operation();
-						return true;
-					} catch (error) {
-						report(error);
-						if (rethrow) throw error;
-						return false;
+						next = applySketchCommands(before, request.commands);
+					} catch (cause) {
+						const error = new Error(`${cause.message} Correct the batch and retry with the same runId and revision; nothing was applied.`, { cause });
+						error.code = "SKETCH_INVALID_BATCH";
+						throw error;
+					}
+					adapter.commit(next);
+					const previous = new Map(before.layers.flatMap((l) => l.strokes.map((s) => [`${l.id}:${s.id}`, s])));
+					changedObjects = next.layers.flatMap((l) => l.strokes.filter((s) => previous.get(`${l.id}:${s.id}`) !== s).map((s) => ({
+						layer: l.id,
+						id: s.id
+					})));
+				} 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 {
-						running = false;
-						working(false);
+						pending = false;
 					}
 				}
-			};
-		}
-		//#endregion
-		//#region src/sketch-agent-export.js
-		async function exportSketchAgentFile(format, { gate, blocked, working, report, exportFile }) {
-			let result;
-			if (!await gate.run(async () => {
-				const { blob, extension } = await exportFile(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));
-				result = {
-					extension,
-					mediaType: blob.type,
-					base64: btoa(raw)
+				const result = {
+					...adapter.snapshot(),
+					...changedObjects ? {
+						changedObjects: changedObjects.slice(0, 100),
+						changedObjectCount: changedObjects.length
+					} : {}
 				};
-			}, {
-				blocked,
-				working,
-				report,
-				rethrow: true
-			})) throw Error("Sketch is being edited; retry after it settles");
-			return result;
-		}
-		//#endregion
-		//#region src/sketch-run-status.jsx
-		function SketchRunStatus({ state, t, floating = false, onOpen, onStop, onResume, onDismiss }) {
-			if (state === "idle") return null;
-			const drawing = state === "drawing", recover = state === "stopped" || state === "failed";
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: floating ? "codexSketchBackgroundStatus" : "codexSketchAgentStatus",
-				role: "status",
-				"aria-live": "polite",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, {
-						name: drawing ? "pen" : state === "finished" ? "check" : "rectangle",
-						size: 15
-					}),
-					floating ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						onClick: onOpen,
-						children: t(`sketchRun_${state}`)
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t(`sketchRun_${state}`) }),
-					drawing ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						type: "button",
-						className: "codexSketchStop",
-						onClick: onStop,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, {
-							name: "stop",
-							size: 12
-						}), t("sketchRunStop")]
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [recover ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						title: t("sketchRunResumeHint"),
-						onClick: onResume,
-						children: t("sketchRunResume")
-					}) : null, !recover ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						"aria-label": t("sketchDismissStatus"),
-						title: t("sketchDismissStatus"),
-						onClick: onDismiss,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, {
-							name: "close",
-							size: 14
-						})
-					}) : null] })
-				]
-			});
-		}
-		//#endregion
-		//#region src/sketch-tool-widths.js
-		const defaults = {
-			pen: 12,
-			pencil: 6,
-			marker: 28,
-			eraser: 24,
-			text: 32,
-			line: 12,
-			arrow: 12,
-			rectangle: 12,
-			circle: 12
-		};
-		const keyFor = ({ tool, brush }) => tool === "pen" ? brush : tool;
-		function switchSketchToolWidth(memory, current, next) {
-			if (current.tool !== "select") memory[keyFor(current)] = current.width;
-			if (next.tool === "select") return current.width;
-			const key = keyFor(next);
-			return memory[key] ?? defaults[key] ?? 12;
-		}
-		function stepSketchWidth(width, direction) {
-			return Math.max(1, Math.min(256, width + direction * 2));
-		}
-		//#endregion
-		//#region src/sketch-shortcuts.js
-		function sketchShortcutAction(keys, key) {
-			key = key.toLowerCase();
-			return Object.entries(keys).find(([, value]) => value === key)?.[0] ?? {
-				v: "select",
-				t: "text",
-				"+": "zoomIn"
-			}[key];
+				completed.set(key, {
+					fingerprint,
+					result,
+					receipt: {
+						requestId: request.requestId,
+						action: request.action,
+						revision: result.revision
+					}
+				});
+				cachedCharacters += fingerprint.length;
+				while (completed.size > 1 && (completed.size > 128 || cachedCharacters > 4e6)) {
+					const oldest = completed.keys().next().value;
+					cachedCharacters -= completed.get(oldest).fingerprint.length;
+					completed.delete(oldest);
+				}
+				return result;
+			};
 		}
 		//#endregion
-		//#region src/sketch-layer-renderer.js
-		const NO_IMAGES = /* @__PURE__ */ new Map();
-		const surface = (width, height) => {
+		//#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 = width;
-			c.height = height;
+			c.width = w;
+			c.height = h;
 			return c;
 		};
-		function paintSketchLayers(context, doc, cache, size = doc.width ?? 1024, height = doc.height ?? size, activeLayer, images = NO_IMAGES) {
-			context.globalCompositeOperation = "source-over";
-			context.globalAlpha = 1;
-			context.fillStyle = "#fff";
-			context.fillRect(0, 0, size, height);
-			for (const id of cache.keys()) if (!doc.layers.some((layer) => layer.id === id)) cache.delete(id);
-			for (const layer of doc.layers) {
-				if (!layer.visible) continue;
-				let entry = cache.get(layer.id);
-				if (!entry || entry.surface.width !== size || entry.surface.height !== height) {
-					entry = {
-						surface: surface(size, height),
-						base: surface(size, height)
-					};
-					cache.set(layer.id, entry);
-				}
-				const moving = layer.id === activeLayer;
-				const count = Math.max(0, layer.strokes.length - (moving ? 1 : 0));
-				const prefix = layer.strokes[count - 1];
-				if (entry.count !== count || entry.prefix !== prefix || entry.image !== layer.image || entry.strokes !== layer.strokes) {
-					const ctx = entry.base.getContext("2d");
-					const append = entry.count !== void 0 && count >= entry.count && entry.image === layer.image && (entry.strokes === layer.strokes || entry.strokes.slice(0, entry.count).every((stroke, index) => stroke === layer.strokes[index]));
-					if (!append) {
-						ctx.clearRect(0, 0, size, height);
-						const ref = layer.image, image = ref && images.get(ref.src);
-						if (image) ctx.drawImage(image, ref.x * size, ref.y * height, ref.width * size, ref.height * height);
+		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");
+						if (s.brushVersion !== void 0 && s.brushVersion !== 2) throw Error("Unsupported brush version");
+						Object.assign(added[added.length - strokes.length + k], {
+							brush: s.brush ?? "pen",
+							pressure: s.pressure ?? 1,
+							...s.brushVersion === 2 ? { brushVersion: 2 } : {}
+						});
 					}
-					paintSketch(ctx, layer.strokes, size, true, height, append ? entry.count : 0, count);
-					entry.count = count;
-					entry.prefix = prefix;
-					entry.image = layer.image;
-					entry.strokes = layer.strokes;
 				}
-				if (moving) {
-					const ctx = entry.surface.getContext("2d");
-					ctx.clearRect(0, 0, size, height);
-					ctx.drawImage(entry.base, 0, 0);
-					paintSketch(ctx, layer.strokes, size, true, height, layer.strokes.length - 1);
-					context.drawImage(entry.surface, 0, 0);
-				} else context.drawImage(entry.base, 0, 0);
+				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;
 		}
-		//#endregion
-		//#region src/sketch-interactions.js
-		function useSketchDismiss(open, close, host, selectors) {
-			const latest = (0, react.useRef)(close);
-			latest.current = close;
-			(0, react.useEffect)(() => {
-				if (!open) return;
-				const dialog = host.current?.closest("dialog") ?? host.current;
-				if (!dialog) return;
-				const pointer = (event) => {
-					if (selectors.some((selector) => event.target.closest?.(selector))) return;
-					latest.current(false);
-					if (event.target.matches?.("canvas")) {
-						event.preventDefault();
-						event.stopPropagation();
-						event.target.focus({ preventScroll: true });
-					}
-				};
-				const key = (event) => {
-					if (event.key !== "Escape") return;
-					event.preventDefault();
-					event.stopPropagation();
-					latest.current(false);
-					dialog.querySelector("canvas")?.focus({ preventScroll: true });
-				};
-				const hidden = () => latest.current(false);
-				document.addEventListener("pointerdown", pointer, true);
-				document.addEventListener("keydown", key, true);
-				dialog.addEventListener("close", hidden);
-				return () => {
-					document.removeEventListener("pointerdown", pointer, true);
-					document.removeEventListener("keydown", key, true);
-					dialog.removeEventListener("close", hidden);
+		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)
 				};
-			}, [
-				open,
-				host,
-				selectors.join("|")
-			]);
+			});
+			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)
+			});
 		}
-		function useSketchCursor(canvas, ring, width, brush, zoom, hidden) {
-			const last = (0, react.useRef)(null), heldPressure = (0, react.useRef)(1);
-			const update = (event, bounds) => {
-				if (event) last.current = event;
-				const pointer = last.current, node = canvas.current, cursor = ring.current;
-				if (!pointer || !node || !cursor) return;
-				const rect = bounds ?? node.getBoundingClientRect();
-				if (hidden || pointer.pointerType === "touch" || pointer.clientX < rect.left || pointer.clientX > rect.right || pointer.clientY < rect.top || pointer.clientY > rect.bottom) {
-					cursor.hidden = true;
-					return;
-				}
-				const diameter = width * (node.hasPointerCapture(pointer.pointerId) && pointer.pointerType === "pen" ? heldPressure.current : 1) * rect.width / node.width;
-				cursor.hidden = false;
-				cursor.style.width = `${diameter}px`;
-				cursor.style.height = `${diameter}px`;
-				cursor.style.transform = `translate(${pointer.clientX - diameter / 2}px,${pointer.clientY - diameter / 2}px)`;
-			};
-			(0, react.useEffect)(() => {
-				update();
-				const observer = new ResizeObserver(() => update());
-				if (canvas.current) observer.observe(canvas.current);
-				return () => observer.disconnect();
-			}, [
+		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,
-				brush,
-				zoom,
-				hidden
-			]);
-			return {
-				down: (event) => {
-					heldPressure.current = event.pointerType === "pen" ? Math.max(.2, event.pressure) : 1;
-				},
-				move: (event, bounds) => update({
-					clientX: event.clientX,
-					clientY: event.clientY,
-					pointerId: event.pointerId,
-					pointerType: event.pointerType,
-					pressure: event.pressure
-				}, bounds),
-				leave: () => {
-					last.current = null;
-					if (ring.current) ring.current.hidden = true;
-				}
+				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
 			};
-		}
-		//#endregion
-		//#region src/sketch-view.jsx
-		const DEFAULT_KEYS = {
-			pen: "b",
-			eraser: "e",
-			line: "l",
-			rectangle: "r",
-			circle: "o",
-			pan: " ",
-			zoomIn: "=",
-			zoomOut: "-",
-			fit: "0"
-		};
-		function useSketchView(canvas, open) {
-			const [view, setView] = (0, react.useState)({
-				scale: 1,
-				x: 0,
-				y: 0
-			}), [keys, setKeys] = (0, react.useState)(() => {
+			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-document-lifecycle.js
+		function createSketchDocumentLifecycle(state, { sessionId, t, schedule, checkpoint, cache, setSelection, setTextEdit, setRecovered, confirmPsd = async () => false, store = sketchDrafts, decodeImages = decodeSketchImages, readImage = importSketchImage }) {
+			const { doc, undo, redo, images, saved, dirty, documentId, documentRevision } = state;
+			const hasContent = () => doc.current.layers.some((layer) => layer.image || layer.strokes.length);
+			const save = async (name) => {
+				const savingDocument = documentId.current, savingRevision = documentRevision.current;
+				const row = {
+					id: saved.current?.id ?? crypto.randomUUID(),
+					name: name?.trim() || saved.current?.name || `${t("sketchTitle")} ${(/* @__PURE__ */ new Date()).toLocaleString()}`,
+					updated: Date.now(),
+					doc: structuredClone(doc.current)
+				};
 				try {
-					return {
-						...DEFAULT_KEYS,
-						...JSON.parse(localStorage.getItem("codex-sketch-keys"))
+					await store("save", row, sessionId);
+				} catch (error) {
+					if (error.code === "SKETCH_DRAFT_LIMIT") error.message = t("sketchDraftLimit");
+					if (error.code === "SKETCH_STORAGE_LIMIT") error.message = t("sketchStorageLimit");
+					throw error;
+				}
+				if (documentId.current === savingDocument) {
+					saved.current = {
+						id: row.id,
+						name: row.name
 					};
-				} catch {
-					return DEFAULT_KEYS;
+					if (documentRevision.current === savingRevision) {
+						dirty.current = false;
+						setRecovered(false);
+					}
 				}
-			});
-			const [shortcuts, setShortcuts] = (0, react.useState)(() => {
-				try {
-					return localStorage.getItem("codex-sketch-shortcuts") !== "off";
-				} catch {
-					return true;
+			};
+			const saveChanges = async () => {
+				if (!dirty.current) return;
+				if (hasContent() || saved.current) return save();
+				const id = documentId.current, revision = documentRevision.current;
+				await store("clearRecovery", sessionId);
+				if (documentId.current === id && documentRevision.current === revision) {
+					dirty.current = false;
+					setRecovered(false);
 				}
-			}), [space, setSpace] = (0, react.useState)(false);
-			const drag = (0, react.useRef)(null), viewRef = (0, react.useRef)(view);
-			viewRef.current = view;
-			const zoom = (factor) => setView((v) => ({
-				...v,
-				scale: Math.max(.25, Math.min(8, v.scale * factor))
-			}));
-			const reset = () => setView({
-				scale: 1,
-				x: 0,
-				y: 0
-			});
-			(0, react.useEffect)(() => {
-				const node = canvas.current;
-				if (!node || !open) return;
-				const wheel = (e) => {
-					if (!shortcuts || !e.altKey) return;
-					e.preventDefault();
-					zoom(e.deltaY < 0 ? 1.1 : 1 / 1.1);
+			};
+			const replace = (next, decoded, identity) => {
+				documentId.current = crypto.randomUUID();
+				documentRevision.current++;
+				doc.current = identifyObjects(structuredClone(next));
+				setSelection(null);
+				setTextEdit(null);
+				images.current = decoded;
+				cache.current.clear();
+				undo.current = [];
+				redo.current = [];
+				saved.current = identity;
+				dirty.current = false;
+				schedule();
+			};
+			const fresh = async () => {
+				await saveChanges();
+				replace(createSketchLayers(), /* @__PURE__ */ new Map(), null);
+			};
+			const load = async (row) => {
+				if (row.id === saved.current?.id) return;
+				row = await store("get", row.id);
+				if (!row) throw Error("Draft no longer exists");
+				await saveChanges();
+				const decoded = /* @__PURE__ */ new Map();
+				await decodeImages(row.doc, decoded);
+				replace(row.doc, decoded, {
+					id: row.id,
+					name: row.name
+				});
+			};
+			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");
+					if (file.name.toLowerCase().endsWith(".psd") && !await confirmPsd()) return;
+					const next = file.name.toLowerCase().endsWith(".psd") ? await importSketchPsd(file) : decodeSketchDocument(await file.text());
+					const decoded = /* @__PURE__ */ new Map();
+					await decodeImages(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 readImage(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;
+				const layer = {
+					id: doc.current.nextId,
+					name: file.name?.slice(0, 40) || t("sketchImport"),
+					visible: true,
+					strokes: [],
+					image: {
+						src: image.src,
+						x: (1 - width) / 2,
+						y: (1 - height) / 2,
+						width,
+						height
+					}
 				};
-				node.addEventListener("wheel", wheel, { passive: false });
-				return () => node.removeEventListener("wheel", wheel);
-			}, [open, shortcuts]);
-			(0, react.useEffect)(() => {
-				const stop = () => {
-					drag.current = null;
-					setSpace(false);
+				await decodeImages({ layers: [layer] }, images.current);
+				checkpoint();
+				doc.current = {
+					...doc.current,
+					nextId: layer.id + 1,
+					active: layer.id,
+					layers: [...doc.current.layers, layer]
 				};
-				window.addEventListener("blur", stop);
-				return () => window.removeEventListener("blur", stop);
-			}, []);
-			(0, react.useEffect)(() => {
-				if (!open || !shortcuts) {
-					setSpace(false);
-					drag.current = null;
+				schedule();
+			};
+			const restore = async (isCurrent = () => true) => {
+				if (dirty.current || hasContent()) return;
+				const id = documentId.current, revision = documentRevision.current;
+				const recovery = await store("recover", sessionId);
+				const archived = state.restoreId.current;
+				const row = recovery ?? (archived ? await store("get", archived) : null);
+				const decoded = /* @__PURE__ */ new Map();
+				if (row) await decodeImages(row.doc, decoded);
+				if (!isCurrent() || documentId.current !== id || documentRevision.current !== revision || dirty.current) return;
+				if (row) {
+					replace(row.doc, decoded, recovery ? null : {
+						id: row.id,
+						name: row.name
+					});
+					dirty.current = Boolean(recovery);
+					setRecovered(Boolean(recovery));
 				}
-			}, [open, shortcuts]);
-			const setKey = (action, key) => {
-				key = key.toLowerCase();
-				if (!key || Object.entries(keys).some(([a, k]) => a !== action && k === key) || ["[", "]"].includes(key)) return;
-				const next = {
-					...keys,
-					[action]: key
-				};
-				setKeys(next);
-				try {
-					localStorage.setItem("codex-sketch-keys", JSON.stringify(next));
-				} catch {}
+				state.restoreId.current = null;
 			};
 			return {
-				view,
-				keys,
-				shortcuts,
-				space,
-				zoom,
-				reset,
-				setKey,
-				toggle: () => setShortcuts((v) => {
-					try {
-						localStorage.setItem("codex-sketch-shortcuts", v ? "off" : "on");
-					} catch {}
-					return !v;
-				}),
-				keyDown: (e) => {
-					if (!shortcuts || e.ctrlKey || e.metaKey || e.altKey) return false;
-					const action = sketchShortcutAction(keys, e.key);
-					if (action === "pan") {
-						e.preventDefault();
-						setSpace(true);
-						return true;
-					}
-					if ([
-						"zoomIn",
-						"zoomOut",
-						"fit"
-					].includes(action)) {
-						e.preventDefault();
-						if (action === "fit") reset();
-						else zoom(action === "zoomOut" ? 1 / 1.2 : 1.2);
-						return true;
-					}
-					return false;
-				},
-				keyUp: (e) => {
-					if (e.key.toLowerCase() === keys.pan) setSpace(false);
-				},
-				down: (e) => {
-					if (e.button !== 1 && !space) return false;
-					e.preventDefault();
-					drag.current = {
-						id: e.pointerId,
-						x: e.clientX,
-						y: e.clientY,
-						view: viewRef.current
-					};
-					canvas.current.setPointerCapture(e.pointerId);
-					return true;
-				},
-				move: (e) => {
-					const d = drag.current;
-					if (!d || d.id !== e.pointerId) return false;
-					setView({
-						...d.view,
-						x: d.view.x + e.clientX - d.x,
-						y: d.view.y + e.clientY - d.y
-					});
-					return true;
+				hasContent,
+				save,
+				saveChanges,
+				replace,
+				fresh,
+				load,
+				importImage,
+				restore
+			};
+		}
+		//#endregion
+		//#region src/sketch-operation-gate.js
+		function createSketchOperationGate() {
+			let running = false;
+			return {
+				get running() {
+					return running;
 				},
-				end: (e) => {
-					if (drag.current?.id !== e.pointerId) return false;
-					drag.current = null;
-					if (canvas.current.hasPointerCapture(e.pointerId)) canvas.current.releasePointerCapture(e.pointerId);
-					return true;
+				async run(operation, { blocked = false, working, report, rethrow = false }) {
+					if (blocked || running) return false;
+					running = true;
+					try {
+						working(true);
+						report(null);
+						await operation();
+						return true;
+					} catch (error) {
+						report(error);
+						if (rethrow) throw error;
+						return false;
+					} finally {
+						running = false;
+						working(false);
+					}
 				}
 			};
 		}
-		function SketchViewControls({ navigation, t }) {
-			const [open, setOpen] = (0, react.useState)(false), [placement, setPlacement] = (0, react.useState)(null);
-			const host = (0, react.useRef)(null), trigger = (0, react.useRef)(null);
-			const close = () => {
-				setOpen(false);
-				trigger.current?.focus({ preventScroll: true });
-			};
-			useSketchDismiss(open, setOpen, host, [".codexSketchViewControls", ".codexSketchKeyPanel"]);
-			(0, react.useLayoutEffect)(() => {
-				if (!open) return;
-				const dialog = host.current.closest("dialog");
-				const place = () => {
-					const box = dialog.getBoundingClientRect(), anchor = trigger.current.getBoundingClientRect();
-					const width = Math.min(360, box.width - 24);
-					setPlacement({
-						dialog,
-						style: {
-							width,
-							left: Math.max(12, Math.min(anchor.left - box.left, box.width - width - 12)),
-							bottom: box.bottom - anchor.top + 8,
-							maxHeight: Math.max(80, anchor.top - box.top - 24)
-						}
-					});
-				};
-				place();
-				const observer = new ResizeObserver(place);
-				observer.observe(dialog);
-				observer.observe(host.current);
-				window.addEventListener("resize", place);
-				return () => {
-					observer.disconnect();
-					window.removeEventListener("resize", place);
+		//#endregion
+		//#region src/sketch-agent-export.js
+		async function exportSketchAgentFile(format, { gate, blocked, working, report, exportFile }) {
+			let result;
+			if (!await gate.run(async () => {
+				const { blob, extension } = await exportFile(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));
+				result = {
+					extension,
+					mediaType: blob.type,
+					base64: btoa(raw)
 				};
-			}, [open]);
+			}, {
+				blocked,
+				working,
+				report,
+				rethrow: true
+			})) throw Error("Sketch is being edited; retry after it settles");
+			return result;
+		}
+		//#endregion
+		//#region src/sketch-run-status.jsx
+		function SketchRunStatus({ state, t, floating = false, onOpen, onStop, onResume, onDismiss }) {
+			if (state === "idle") return null;
+			const drawing = state === "drawing", recover = state === "stopped" || state === "failed";
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				ref: host,
-				className: "codexSketchViewControls",
+				className: floating ? "codexSketchBackgroundStatus" : "codexSketchAgentStatus",
+				role: "status",
+				"aria-live": "polite",
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						"aria-label": t("sketchZoomOut"),
-						onClick: () => navigation.zoom(1 / 1.2),
-						children: "−"
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, {
+						name: drawing ? "pen" : state === "finished" ? "check" : "rectangle",
+						size: 15
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					floating ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
-						title: t("sketchFit"),
-						onClick: navigation.reset,
-						children: [Math.round(navigation.view.scale * 100), "%"]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						onClick: onOpen,
+						children: t(`sketchRun_${state}`)
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t(`sketchRun_${state}`) }),
+					drawing ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 						type: "button",
-						"aria-label": t("sketchZoomIn"),
-						onClick: () => navigation.zoom(1.2),
-						children: "＋"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						ref: trigger,
+						className: "codexSketchStop",
+						onClick: onStop,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, {
+							name: "stop",
+							size: 12
+						}), t("sketchRunStop")]
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [recover ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
-						"aria-expanded": open,
-						onClick: () => setOpen(!open),
-						children: t("sketchKeys")
-					}),
-					open && placement ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-						className: "codexSketchKeyPanel",
-						"aria-label": t("sketchKeys"),
-						style: placement.style,
-						onKeyDown: (e) => {
-							if (e.key === "Escape") {
-								e.preventDefault();
-								e.stopPropagation();
-								close();
-							}
-						},
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: t("sketchKeys") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								"aria-label": t("sketchFileClose"),
-								onClick: close,
-								children: "×"
-							})] }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-								className: "codexSketchKeysEnabled",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("sketchKeysEnabled") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-									type: "checkbox",
-									checked: navigation.shortcuts,
-									onChange: navigation.toggle
-								})]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("sketchNavigationHint") }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "codexSketchKeyGrid",
-								children: Object.entries(navigation.keys).map(([action, key]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [t(`sketchKey_${action}`), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-									"aria-label": t(`sketchKey_${action}`),
-									value: key === " " ? "Space" : key,
-									readOnly: true,
-									onKeyDown: (e) => {
-										if (e.key === "Tab" || e.key === "Escape") return;
-										e.preventDefault();
-										e.stopPropagation();
-										if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) navigation.setKey(action, e.key);
-									}
-								})] }, action))
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", { children: t("sketchKeyHint") })
-						]
-					}), placement.dialog) : null
+						title: t("sketchRunResumeHint"),
+						onClick: onResume,
+						children: t("sketchRunResume")
+					}) : null, !recover ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"aria-label": t("sketchDismissStatus"),
+						title: t("sketchDismissStatus"),
+						onClick: onDismiss,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, {
+							name: "close",
+							size: 14
+						})
+					}) : null] })
 				]
 			});
 		}
 		//#endregion
+		//#region src/sketch-tool-widths.js
+		const defaults = {
+			pen: 12,
+			pencil: 6,
+			marker: 28,
+			eraser: 24,
+			text: 32,
+			line: 12,
+			arrow: 12,
+			rectangle: 12,
+			circle: 12
+		};
+		const keyFor = ({ tool, brush }) => tool === "pen" ? brush : tool;
+		function switchSketchToolWidth(memory, current, next) {
+			if (current.tool !== "select") memory[keyFor(current)] = current.width;
+			if (next.tool === "select") return current.width;
+			const key = keyFor(next);
+			return memory[key] ?? defaults[key] ?? 12;
+		}
+		function stepSketchWidth(width, direction) {
+			return Math.max(1, Math.min(256, width + direction * 2));
+		}
+		//#endregion
+		//#region src/sketch-layer-renderer.js
+		const NO_IMAGES = /* @__PURE__ */ new Map();
+		const surface = (width, height) => {
+			const c = document.createElement("canvas");
+			c.width = width;
+			c.height = height;
+			return c;
+		};
+		function paintSketchLayers(context, doc, cache, size = doc.width ?? 1024, height = doc.height ?? size, activeLayer, images = NO_IMAGES) {
+			context.globalCompositeOperation = "source-over";
+			context.globalAlpha = 1;
+			context.fillStyle = "#fff";
+			context.fillRect(0, 0, size, height);
+			for (const id of cache.keys()) if (!doc.layers.some((layer) => layer.id === id)) cache.delete(id);
+			for (const layer of doc.layers) {
+				if (!layer.visible) continue;
+				let entry = cache.get(layer.id);
+				if (!entry || entry.surface.width !== size || entry.surface.height !== height) {
+					entry = {
+						surface: surface(size, height),
+						base: surface(size, height)
+					};
+					cache.set(layer.id, entry);
+				}
+				const moving = layer.id === activeLayer;
+				const count = Math.max(0, layer.strokes.length - (moving ? 1 : 0));
+				const prefix = layer.strokes[count - 1];
+				if (entry.count !== count || entry.prefix !== prefix || entry.image !== layer.image || entry.strokes !== layer.strokes) {
+					const ctx = entry.base.getContext("2d");
+					const append = entry.count !== void 0 && count >= entry.count && entry.image === layer.image && (entry.strokes === layer.strokes || entry.strokes.slice(0, entry.count).every((stroke, index) => stroke === layer.strokes[index]));
+					if (!append) {
+						ctx.clearRect(0, 0, size, height);
+						const ref = layer.image, image = ref && images.get(ref.src);
+						if (image) ctx.drawImage(image, ref.x * size, ref.y * height, ref.width * size, ref.height * height);
+					}
+					paintSketch(ctx, layer.strokes, size, true, height, append ? entry.count : 0, count);
+					entry.count = count;
+					entry.prefix = prefix;
+					entry.image = layer.image;
+					entry.strokes = layer.strokes;
+				}
+				if (moving) {
+					const ctx = entry.surface.getContext("2d");
+					ctx.clearRect(0, 0, size, height);
+					ctx.drawImage(entry.base, 0, 0);
+					paintSketch(ctx, layer.strokes, size, true, height, layer.strokes.length - 1);
+					context.drawImage(entry.surface, 0, 0);
+				} else context.drawImage(entry.base, 0, 0);
+			}
+		}
+		//#endregion
 		//#region src/sketch-files.jsx
 		function SketchFiles({ save, load, fresh, importImage, download, hasContent, disabled, t, runOperation }) {
 			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);
@@ -3248,17 +3478,9 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/sketch-studio.jsx
-		const PALETTE = [
-			"#18181b",
-			"#929398",
-			"#ff3936",
-			"#ff9500",
-			"#ffcc00",
-			"#34c759",
-			"#0088ff"
-		];
 		function SketchStudio({ open, agentEnabled, agentPreview, onOpen, onClose, attachSketch, enabled, t, incoming, sessionId, rpc, sessionState }) {
 			const localSession = (0, react.useRef)(null);
+			const psdImport = useSketchImportConfirm(t);
 			localSession.current ??= sessionState ?? createSketchSessionState();
 			const { doc, undo, redo, images, saved, dirty, documentId, documentRevision, agentAdapter, agentSession, agentRun } = localSession.current;
 			const dialog = (0, react.useRef)(null), canvas = (0, react.useRef)(null), cache = (0, react.useRef)(/* @__PURE__ */ new Map());
@@ -3377,6 +3599,7 @@ window.__ModuleLoader__.load({
 				cache,
 				setSelection,
 				setTextEdit,
+				confirmPsd: psdImport.confirmPsd,
 				setRecovered
 			});
 			(0, react.useEffect)(() => localSession.current.retain?.(), []);
@@ -4133,47 +4356,14 @@ window.__ModuleLoader__.load({
 									})
 								]
 							}) : null,
-							picturesOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
-								className: "codexSketchPictures",
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: t("sketchPictures") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										disabled: agentLocked || busy,
-										onClick: () => pictureInput.current.click(),
-										children: t("sketchPictureAdd")
-									})] }),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-										ref: pictureInput,
-										hidden: true,
-										type: "file",
-										accept: "image/png,image/jpeg,image/webp",
-										onChange: (e) => {
-											const file = e.target.files?.[0];
-											e.target.value = "";
-											if (file) runFile(() => importImage(file));
-										}
-									}),
-									doc.current.layers.filter((layer) => layer.image).map((layer) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										"data-active": layer.id === doc.current.active,
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-											type: "button",
-											disabled: agentLocked || busy,
-											"aria-label": `${t("sketchPictureSelect")} ${layer.name}`,
-											onClick: () => change("select", layer.id),
-											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-												src: layer.image.src,
-												alt: layer.name
-											})
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-											type: "button",
-											disabled: agentLocked || busy,
-											"aria-label": `${t("sketchDeleteDraft")} ${layer.name}`,
-											onClick: () => change(doc.current.layers.length === 1 ? "clear" : "delete", layer.id),
-											children: "×"
-										})]
-									}, layer.id)),
-									!doc.current.layers.some((layer) => layer.image) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", { children: t("sketchPicturesEmpty") }) : null
-								]
+							picturesOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SketchPicturePanel, {
+								document: doc.current,
+								disabled: agentLocked || busy,
+								pictureInput,
+								importImage,
+								runFile,
+								change,
+								t
 							}) : null,
 							layersOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SketchLayerPanel, {
 								document: doc.current,
@@ -4183,119 +4373,30 @@ window.__ModuleLoader__.load({
 							}) : null
 						]
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "codexSketchControls",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: "codexSketchPicturesToggle",
-								"aria-expanded": picturesOpen,
-								onClick: () => setPicturesOpen((v) => !v),
-								children: t("sketchPictures")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SketchViewControls, {
-								navigation,
-								t
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SketchToolPicker, {
-								t,
-								disabled: agentLocked || busy,
-								tool,
-								brush,
-								chooseBrush,
-								chooseTool,
-								shapesOpen,
-								setShapesOpen
-							}),
-							/* @__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",
-										disabled: agentLocked || busy,
-										checked: fillShape,
-										onChange: (e) => setFillShape(e.target.checked)
-									}), t("sketchFill")] }) : null,
-									selected ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "codexSketchObjectActions",
-										children: [
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-												disabled: agentLocked || busy,
-												onClick: () => editObject({}, "duplicate"),
-												children: t("sketchObjectDuplicate")
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-												disabled: agentLocked || busy,
-												onClick: () => editObject({}, "delete"),
-												children: t("sketchObjectDelete")
-											}),
-											selected.shape === "text" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-												disabled: agentLocked || busy,
-												onClick: () => setTextEdit({
-													selection,
-													value: selected.text
-												}),
-												children: t("sketchText")
-											}) : null
-										]
-									}) : null,
-									tool === "pen" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-										className: "codexSketchStability",
-										children: [t("sketchStability"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
-											"aria-label": t("sketchStability"),
-											value: stability,
-											disabled: agentLocked || busy,
-											onChange: (e) => setStability(Number(e.target.value)),
-											children: [
-												0,
-												25,
-												50,
-												75
-											].map((value) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-												value,
-												children: t(`sketchStability${value}`)
-											}, value))
-										})]
-									}) : null,
-									tool === "eraser" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										className: "codexSketchSegment",
-										role: "group",
-										"aria-label": t("sketchEraserMode"),
-										children: ["pixel", "stroke"].map((value) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-											type: "button",
-											"aria-pressed": eraser === value,
-											disabled: agentLocked || busy,
-											onClick: () => setEraser(value),
-											children: t(`sketchErase_${value}`)
-										}, value))
-									}) : null
-								]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "codexSketchPalette",
-								role: "group",
-								"aria-label": t("sketchColor"),
-								children: [PALETTE.map((value) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									className: "codexSketchSwatch",
-									style: { "--swatch": value },
-									"aria-label": `${t("sketchColor")} ${value}`,
-									"aria-pressed": (selected?.color ?? color) === value,
-									disabled: agentLocked || busy,
-									onClick: () => pickColor(value)
-								}, value)), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-									className: "codexSketchCustom",
-									title: t("sketchColor"),
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: { background: color } }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-										type: "color",
-										"aria-label": t("sketchColor"),
-										value: color,
-										disabled: agentLocked || busy,
-										onChange: (e) => pickColor(e.target.value)
-									})]
-								})]
-							})
-						]
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SketchControls, {
+						t,
+						navigation,
+						picturesOpen,
+						setPicturesOpen,
+						disabled: agentLocked || busy,
+						tool,
+						brush,
+						chooseBrush,
+						chooseTool,
+						shapesOpen,
+						setShapesOpen,
+						fillShape,
+						setFillShape,
+						selected,
+						editObject,
+						selection,
+						setTextEdit,
+						stability,
+						setStability,
+						eraser,
+						setEraser,
+						color,
+						pickColor
 					}),
 					error ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
 						className: "codexSketchHint",
@@ -4305,13 +4406,15 @@ window.__ModuleLoader__.load({
 							onClick: () => retryRestore((value) => value + 1),
 							children: t("accountRetry")
 						}) : null]
-					}) : null
+					}) : null,
+					psdImport.prompt
 				]
 			})] });
 		}
 		//#endregion
 		//#region src/sketch-styles.js
 		const SKETCH_CSS = `
+.codexSketchImportConfirm{width:min(440px,calc(100vw - 32px));box-sizing:border-box;padding:24px;border:1px solid var(--sketch-line);border-radius:20px;background:var(--sketch-bg);color:var(--sketch-fg);box-shadow:0 12px 60px #0005}.codexSketchImportConfirm::backdrop{background:#0007}.codexSketchImportConfirm h3{margin:0 0 12px;font-size:16px}.codexSketchImportConfirm p{font-size:14px;line-height:1.7;color:var(--sketch-muted)}.codexSketchImportConfirm>div{display:flex;justify-content:flex-end;gap:12px}.codexSketchImportConfirm button{padding:8px 16px;border-radius:12px;border:1px solid var(--sketch-line);background:var(--sketch-line);color:var(--sketch-fg)}
 .codexSketchSizeModes{display:flex;flex-direction:column;gap:3px}.codexSketchSizeModes button{font-size:11px;padding:4px 6px;border-radius:10px;color:var(--sketch-muted)}.codexSketchSizeModes button[aria-pressed=true]{background:var(--sketch-line);color:var(--sketch-fg)}
 
 .codexSketchSizeControl{position:absolute;left:10px;top:50%;transform:translateY(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 6px;border:1px solid var(--sketch-line);border-radius:24px;background:var(--sketch-glass);backdrop-filter:blur(18px);box-shadow:0 3px 14px #0001}
@@ -4524,6 +4627,59 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/client-locales.js
 		const zh = {
+			"diagnosticReason_catalog-online": "在线目录已载入",
+			"diagnosticReason_catalog-fallback": "使用备用目录",
+			"diagnosticReason_storage-readable": "预测缓存可读",
+			"diagnosticReason_tool-registered": "全局工具已注册",
+			"diagnosticReason_tool-missing": "未找到全局工具",
+			"diagnosticsCoverageHint": "分别展示已检查的前置条件与最近 15 分钟的操作结果。请求完成不代表整个功能通过验收；未验证不等于故障。",
+			"diagnosticsVersionMismatch": "前后端插件版本不同，请重载后重试。",
+			"diagnosticsPartial": "部分信息未能采集，其余检查结果已保留。请在详情中查看失败或超时项。",
+			"diagnosticsCapability": "功能",
+			"diagnosticsReadiness": "前置条件",
+			"diagnosticsEvidence": "近期操作证据",
+			"diagnosticsUnverified": "尚未验证",
+			"diagnosticsHostCollected": "已采集宿主注册与选中结果（详情内）。这不证明界面可见或功能执行正常。",
+			"diagnosticsHostUnknown": "宿主界面检查不可用或未挂载，不能据此判断插件干扰。",
+			"diagnosticsDetails": "展开脱敏详情",
+			"diagnosticsCopyFailed": "复制失败，可展开详情手动复制。",
+			"diagnosticSource_rpc": "接口响应",
+			"diagnosticSource_tool": "工具",
+			"diagnosticOutcome_completed": "完成",
+			"diagnosticOutcome_failed": "失败",
+			"diagnosticOutcome_cancelled": "取消",
+			"diagnosticCapability_account": "登录",
+			"diagnosticCapability_accounts": "多账号",
+			"diagnosticCapability_settings": "设置",
+			"diagnosticCapability_models": "模型",
+			"diagnosticCapability_quota": "额度",
+			"diagnosticCapability_search": "搜索",
+			"diagnosticCapability_images": "生图与编辑",
+			"diagnosticCapability_sketch": "草图",
+			"diagnosticCapability_subagents": "子任务",
+			"diagnosticCapability_compaction": "压缩",
+			"diagnosticCapability_transport": "连接",
+			"diagnosticCapability_storage": "存储",
+			"diagnosticCapability_host-ui": "宿主界面",
+			"diagnosticReason_not-instrumented": "证据不足",
+			"diagnosticReason_disabled-or-host-owned": "未启用或由宿主管理",
+			"diagnosticReason_sign-in-required": "依赖登录",
+			"diagnosticReason_local-sign-in-present": "本地登录存在",
+			"diagnosticReason_sign-in-unverified": "登录未确认",
+			"diagnosticReason_settings-writable": "可写",
+			"diagnosticReason_settings-readonly": "不可写",
+			"diagnosticReason_restart-required": "需要重启",
+			"diagnosticReason_runtime-present": "组件已安装",
+			"diagnosticReason_runtime-missing": "组件未安装",
+			storageLoading: "正在读取缓存占用…",
+			storageTitle: "存储与缓存",
+			storageForecast: "额度预测缓存",
+			storageClear: "清除预测历史",
+			storageHint: "仅清理本地预测历史，保留原图、草稿、登录信息和共享依赖。子任务组件可在“模型与运行”中管理。",
+			storageConfirm: "清除所有已登录账号的本地预测历史后，需要重新积累采样。服务端额度不变，后续查询会重新生成缓存。",
+			storageFailed: "未能读取或清除预测缓存，请重试。",
+			sketchPsdConfirmTitle: "导入 PSD 副本",
+			sketchPsdConfirmBody: "支持最多 8 层、8 位 RGB 的简单 PSD（32 MB 内，边长不超过 4096）。导入后各层转为图片，最长边缩至 1024；不支持蒙版、调整层和特殊混合效果。原文件不会修改。需要保留草图对象的可编辑性，请使用 DSH 草图格式。继续导入？",
 			runtimeIncompatible: "检测到不兼容的 Codex 子任务组件，请卸载后重启，再安装受支持版本。",
 			runtimeManagedElsewhere: "此组件由宿主或其他依赖管理，请在 DSH 插件管理中查看；这里不能直接卸载。",
 			runtimeLoading: "正在检查组件…",
@@ -4891,9 +5047,16 @@ window.__ModuleLoader__.load({
 			contextTokens: "Token 上限",
 			contextFixed: "固定 {value}",
 			contextMaximum: "范围 {minimum}–{value}",
-			settingsTab_account: "账号与偏好",
+			settingsTab_account: "账号与额度",
 			settingsTab_display: "使用偏好",
-			settingsTab_advanced: "高级与诊断",
+			settingsTab_advanced: "模型与运行",
+			settingsTab_creative: "图片与草图",
+			settingsTab_maintenance: "维护",
+			creativeSketch: "草图画板",
+			diagnosticsHint: "遇到问题时生成报告，可复制后用于反馈。不含登录凭据和账号标识。",
+			sketchCanvasSetting: "画板入口",
+			sketchAgentSetting: "Agent 绘图",
+			sketchAgentPreviewSetting: "完成后返回预览",
 			quotaShowIndicator: "显示额度",
 			quotaIndicatorHint: "输入框只显示图标，点击查看详情。关闭时暂停续航采样。",
 			quotaForecastOptional: "续航预测 · 实验",
@@ -4980,6 +5143,59 @@ window.__ModuleLoader__.load({
 			imageRemoveAnnotation: "删除标注"
 		};
 		const en = {
+			"diagnosticReason_catalog-online": "Online catalog loaded",
+			"diagnosticReason_catalog-fallback": "Fallback catalog",
+			"diagnosticReason_storage-readable": "Forecast cache readable",
+			"diagnosticReason_tool-registered": "Global tool registered",
+			"diagnosticReason_tool-missing": "Global tool not found",
+			"diagnosticsCoverageHint": "Shows inspected prerequisites and operations observed in the last 15 minutes. Request completion is not end-to-end validation; unverified does not mean broken.",
+			"diagnosticsVersionMismatch": "Client and server versions differ. Reload and retry.",
+			"diagnosticsPartial": "Some inspections failed or timed out. Other results are preserved; see details.",
+			"diagnosticsCapability": "Capability",
+			"diagnosticsReadiness": "Prerequisites",
+			"diagnosticsEvidence": "Recent evidence",
+			"diagnosticsUnverified": "Unverified",
+			"diagnosticsHostCollected": "Host registrations and selection are included in details, not proof of visibility or execution.",
+			"diagnosticsHostUnknown": "Host inspection unavailable or unmounted; interference cannot be determined.",
+			"diagnosticsDetails": "Redacted details",
+			"diagnosticsCopyFailed": "Copy failed. Expand the details to copy manually.",
+			"diagnosticSource_rpc": "RPC response",
+			"diagnosticSource_tool": "Tool",
+			"diagnosticOutcome_completed": "Completed",
+			"diagnosticOutcome_failed": "Failed",
+			"diagnosticOutcome_cancelled": "Cancelled",
+			"diagnosticCapability_account": "Sign-in",
+			"diagnosticCapability_accounts": "Accounts",
+			"diagnosticCapability_settings": "Settings",
+			"diagnosticCapability_models": "Models",
+			"diagnosticCapability_quota": "Quota",
+			"diagnosticCapability_search": "Search",
+			"diagnosticCapability_images": "Images",
+			"diagnosticCapability_sketch": "Sketch",
+			"diagnosticCapability_subagents": "Subtasks",
+			"diagnosticCapability_compaction": "Compaction",
+			"diagnosticCapability_transport": "Connection",
+			"diagnosticCapability_storage": "Storage",
+			"diagnosticCapability_host-ui": "Host UI",
+			"diagnosticReason_not-instrumented": "Insufficient evidence",
+			"diagnosticReason_disabled-or-host-owned": "Disabled or host-managed",
+			"diagnosticReason_sign-in-required": "Sign-in required",
+			"diagnosticReason_local-sign-in-present": "Local sign-in present",
+			"diagnosticReason_sign-in-unverified": "Sign-in unverified",
+			"diagnosticReason_settings-writable": "Writable",
+			"diagnosticReason_settings-readonly": "Read-only",
+			"diagnosticReason_restart-required": "Restart required",
+			"diagnosticReason_runtime-present": "Runtime installed",
+			"diagnosticReason_runtime-missing": "Runtime missing",
+			storageLoading: "Reading cache size…",
+			storageTitle: "Storage and cache",
+			storageForecast: "Quota forecast cache",
+			storageClear: "Clear forecast history",
+			storageHint: "Clears local forecast history only. Original images, drafts, sign-in data and shared dependencies are preserved. Manage subtask components under Models & runtime.",
+			storageConfirm: "This clears local forecast samples for all signed-in accounts. Forecasts will need new samples. Server quotas stay unchanged; subsequent checks recreate the cache.",
+			storageFailed: "Could not read or clear the forecast cache. Try again.",
+			sketchPsdConfirmTitle: "Import a PSD copy",
+			sketchPsdConfirmBody: "Supports simple 8-bit RGB PSDs with up to 8 layers, 32 MB and 4096 pixels per side. Layers become images and the longest side is reduced to 1024 pixels. Masks, adjustments and special blending effects are unsupported. The original file stays unchanged. Use the DSH sketch format to preserve editable sketch objects. Continue?",
 			runtimeIncompatible: "An incompatible Codex subtask component was found. Uninstall it, restart DSH, then install the supported version.",
 			runtimeManagedElsewhere: "This component is managed by the host or another dependency. Check DSH plugin management; it cannot be removed here.",
 			runtimeLoading: "Checking component…",
@@ -5347,9 +5563,16 @@ window.__ModuleLoader__.load({
 			contextTokens: "Token limit",
 			contextFixed: "Fixed {value}",
 			contextMaximum: "{minimum}–{value}",
-			settingsTab_account: "Account & preferences",
+			settingsTab_account: "Account",
 			settingsTab_display: "Preferences",
-			settingsTab_advanced: "Advanced",
+			settingsTab_advanced: "Models & runtime",
+			settingsTab_creative: "Images & sketch",
+			settingsTab_maintenance: "Maintenance",
+			creativeSketch: "Sketch board",
+			diagnosticsHint: "Generate a report to copy into a support request. Sign-in credentials and account identifiers are excluded.",
+			sketchCanvasSetting: "Board entry",
+			sketchAgentSetting: "Agent drawing",
+			sketchAgentPreviewSetting: "Return preview on completion",
 			quotaShowIndicator: "Show quota",
 			quotaIndicatorHint: "Show an icon in the composer; click for details. Hiding it pauses forecast sampling.",
 			quotaForecastOptional: "Runway forecast · Experimental",
@@ -5530,7 +5753,7 @@ window.__ModuleLoader__.load({
 .codexSubscriptionRecover{display:flex;align-items:center;justify-content:space-between;gap:12px}
 .codexSubscriptionRecover .codexSubscriptionError{flex:1}
 .codexSubscriptionRecover button{flex:0 0 auto}
-.codexSubscriptionDiagnostics{padding:8px 12px;gap:8px;background:transparent;color:var(--dsw-alias-label-secondary)}
+.codexSubscriptionDiagnostics{color:var(--dsw-alias-label-secondary)}
 .codexSubscriptionDiagnostics pre{max-height:240px;margin:0;padding:10px 12px;border-radius:8px;background:var(--dsw-alias-bg-module-platform);overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:11px/17px ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--dsw-alias-label-secondary)}
 .codexSubscriptionLink{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 13px;border:1px solid var(--dsw-alias-border-l2);border-radius:999px;background:transparent;color:var(--dsw-alias-label-primary);font-size:13px;line-height:20px;text-decoration:none;white-space:nowrap}
 .codexSubscriptionLink:hover{background:var(--dsw-alias-bg-module-platform)}
@@ -5588,8 +5811,9 @@ window.__ModuleLoader__.load({
 .codexSubscriptionSpendLimit progress::-webkit-progress-bar{background:var(--dsw-alias-border-l3);border-radius:999px}
 .codexSubscriptionSpendLimit progress::-webkit-progress-value{background:var(--dsw-alias-brand-primary,#3964fe);border-radius:999px}
 .codexSubscriptionSpendLimit progress::-moz-progress-bar{background:var(--dsw-alias-brand-primary,#3964fe);border-radius:999px}
-.codexSettingsTabs{display:flex;gap:4px;padding:3px;background:var(--dsw-alias-bg-module-platform);border-radius:10px}
-.codexSettingsTabs button{flex:1;border:0;border-radius:8px;padding:7px 8px;background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;font-size:13px;cursor:pointer}
+.codexSettingsTabs{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;background:var(--dsw-alias-bg-module-platform);border-radius:12px}
+.codexSettingsTabs button{min-width:0;min-height:36px;border:0;border-radius:9px;padding:7px 6px;background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;font-size:12px;line-height:18px;cursor:pointer}
+.codexSettingsTabs button:focus-visible{outline:2px solid var(--dsw-alias-border-l3);outline-offset:1px}
 .codexSettingsTabs button[aria-selected=true]{background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);box-shadow:0 1px 3px #0001}
 .codexSubscription>[role=tabpanel]:not([hidden]){display:flex;flex-direction:column;gap:10px}
 .codexComposerQuota:focus-visible{outline:1px solid var(--dsw-alias-border-l3);outline-offset:2px}
@@ -5616,7 +5840,7 @@ window.__ModuleLoader__.load({
 .codexModelSelectEffort{flex:none;color:var(--dsw-alias-label-caption)}
 .codexModelSelectChevron{flex:none;color:var(--dsw-alias-label-caption);transition:transform 120ms}
 .codexModelSelectTrigger[aria-expanded=true] .codexModelSelectChevron{transform:rotate(180deg)}
-.codexModelSelectMenu,.codexModelSelectSubmenu{position:absolute;z-index:30;box-sizing:border-box;width:max-content;min-width:min(240px,calc(100vw - 32px));max-width:min(420px,calc(100vw - 32px));max-height:min(360px,calc(100vh - 96px));padding:4px;border:1px solid var(--dsw-alias-border-inverted);border-radius:12px;background:var(--dsw-specific-menu);box-shadow:var(--dsw-shadow-lv3);color:var(--dsw-alias-label-primary);overflow:hidden}
+.codexModelSelectMenu,.codexModelSelectSubmenu{position:absolute;z-index:30;box-sizing:border-box;width:max-content;min-width:min(240px,calc(100vw - 32px));max-width:min(420px,calc(100vw - 32px));max-height:min(360px,calc(100vh - 96px));padding:4px;border:1px solid var(--dsw-alias-border-inverted);border-radius:12px;background:var(--dsw-alias-bg-layer-2,#2c2c2e);box-shadow:var(--dsw-shadow-lv3);color:var(--dsw-alias-label-primary);overflow:hidden}
 .codexModelSelectMenu{right:0;bottom:calc(100% + 8px)}
 .codexModelSelectSubmenu{right:calc(100% + 8px);bottom:0;min-width:min(230px,calc(100vw - 32px))}
 .codexModelSelectCell{display:flex;align-items:center;gap:8px;width:100%;min-width:100%;height:40px;box-sizing:border-box;padding:0 10px;border:0;border-radius:10px;background:transparent;color:inherit;font-size:14px;line-height:22px;text-align:left;cursor:pointer}
@@ -5627,7 +5851,7 @@ window.__ModuleLoader__.load({
 .codexModelSelectCellChevron{flex:none;color:var(--dsw-alias-label-tertiary)}
 .codexModelSelectGroups{min-height:0;max-height:352px;overflow-y:auto}
 .codexModelSelectGroup+.codexModelSelectGroup{margin-top:4px}
-.codexModelSelectGroupTitle{position:sticky;top:0;z-index:1;padding:5px 8px 3px;background:var(--dsw-specific-menu);color:var(--dsw-alias-label-tertiary);font-size:12px;font-weight:500;line-height:18px}
+.codexModelSelectGroupTitle{position:sticky;top:0;z-index:1;padding:5px 8px 3px;background:var(--dsw-alias-bg-layer-2,#2c2c2e);color:var(--dsw-alias-label-tertiary);font-size:12px;font-weight:500;line-height:18px}
 .codexModelSelectOption{display:flex;align-items:center;gap:8px;width:100%;min-width:100%;min-height:38px;box-sizing:border-box;padding:6px 8px;border:0;border-radius:10px;outline:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
 .codexModelSelectOption:hover:not(:disabled),.codexModelSelectOption:focus-visible{background:var(--dsw-alias-interactive-bg-hover)}
 .codexModelSelectOption:disabled{color:var(--dsw-alias-label-dimmed);cursor:default}
@@ -5669,6 +5893,25 @@ window.__ModuleLoader__.load({
 .codexSubscriptionRuntime button{flex-shrink:0;white-space:nowrap}
 .codexSubscriptionRuntime code{display:block;overflow-wrap:anywhere;padding:8px 10px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;user-select:text}
 @media(max-width:640px){.codexSubscriptionCard{padding:14px}}
+.codexSubscriptionHelp{font-size:12px;line-height:1.65;color:var(--dsw-alias-label-tertiary)}
+.codexSubscriptionBadge{flex:none;padding:3px 8px;border-radius:6px;background:var(--dsw-alias-bg-module-platform);font-size:11px;line-height:16px;color:var(--dsw-alias-label-secondary)}
+.codexImageSettings>.codexSubscriptionSectionHead{flex-direction:row;align-items:center}
+.codexSubscriptionSettingRows>.codexImagePreference+.codexImagePreference{border-top:1px solid var(--dsw-alias-border-l2)}
+.codexSubscriptionDiagnostics .codexSubscriptionSectionHead{align-items:flex-start;flex-direction:column;gap:12px}
+.codexSubscriptionDiagnostics .codexSubscriptionSectionTitle{display:flex;flex-direction:column;gap:5px}
+.codexSubscriptionStorageMeter{display:flex;flex-direction:column;gap:9px;padding:12px;border-radius:10px;background:var(--dsw-alias-bg-module-platform)}
+.codexSubscriptionStorageMeter>div{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12px;line-height:18px}
+.codexSubscriptionStorageMeter output{font-variant-numeric:tabular-nums;color:var(--dsw-alias-label-secondary)}
+.codexSubscriptionStorageMeter progress{width:100%;height:4px;border:0;border-radius:4px;overflow:hidden;accent-color:var(--dsw-alias-label-secondary)}
+.codexSubscriptionStorageMeter progress::-webkit-progress-bar{background:var(--dsw-alias-border-l2)}
+.codexSubscriptionStorageMeter progress::-webkit-progress-value{background:var(--dsw-alias-label-secondary)}
+.codexSubscriptionConfirm{padding:12px;border:1px solid var(--dsw-alias-border-l2);border-radius:10px;font-size:12px;line-height:1.65}
+.codexSubscriptionConfirm p{margin-bottom:12px}
+.codexSubscriptionRuntime{padding-top:10px;border-top:1px solid var(--dsw-alias-border-l2);margin-top:2px}
+.codexSubscriptionRuntime details{margin-top:8px}.codexSubscriptionRuntime details[open]>summary{margin-bottom:10px}
+@container (max-width:480px){.codexSubscriptionPreference,.codexSubscriptionContextHead{flex-wrap:wrap}.codexSubscriptionPreferenceHint{max-width:none}.codexSubscriptionPreference>.codexSubscriptionPreferenceCopy{flex:1 1 220px}.codexSubscriptionQuotaModes{max-width:100%;flex-wrap:wrap}.codexSubscriptionQuotaMode{min-height:30px}.codexSubscriptionActions{flex-wrap:wrap}}
+@container (max-width:340px){.codexSettingsTabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
+@media(prefers-reduced-motion:reduce){.codexSubscription *{transition:none!important}}
 `;
 		//#endregion
 		//#region src/image-edit-reference.js
@@ -7290,7 +7533,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/version.js
-		const PACKAGE_VERSION = "2.2.1";
+		const PACKAGE_VERSION = "2.2.3";
 		//#endregion
 		//#region src/client-recovery.js
 		async function recoveryCall(rpc, endpoint, payload = {}, timeoutMs = 1e4) {
@@ -7925,29 +8168,30 @@ window.__ModuleLoader__.load({
 			});
 		}
 		const modelLabel = (model) => model.replace("gpt-image-", "GPT Image ").replace("-flare", " Flare").replace("-sunburst", " Sunburst");
-		function ImagePreferences({ preference, t }) {
+		function ImagePreferences({ preference, t, section = "image" }) {
 			const snapshot = (0, react.useSyncExternalStore)(preference.subscribe, preference.getSnapshot);
 			const disabled = snapshot.status !== "ready" || !snapshot.writable || snapshot.saving;
 			const active = snapshot.imageGeneration || snapshot.imageEditing;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+			const sketch = section === "sketch";
+			const title = t(sketch ? "creativeSketch" : "imageSettings");
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 				className: "codexSubscriptionCard codexImageSettings",
-				"aria-label": t("imageSettings"),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
-					className: "codexSubscriptionSettingsDisclosure",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("summary", { children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("imageSettings") }),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "codexSubscriptionPreferenceHint",
-							children: active ? modelLabel(snapshot.imageModel) : t("imageCapability_off")
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconChevronDownOutline14, {})
-					] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "codexSubscriptionSettingsDisclosureBody",
+				"aria-label": title,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "codexSubscriptionSectionHead",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "codexSubscriptionBadge",
+							children: sketch ? "Beta" : active ? modelLabel(snapshot.imageModel) : t("imageCapability_off")
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "codexSubscriptionSettingRows",
 						children: [
-							Object.keys(IMAGE_SETTING_GROUPS).map((group) => {
+							Object.keys(IMAGE_SETTING_GROUPS).filter((group) => group.startsWith("sketch") === sketch).map((group) => {
 								const value = imageGroupValue(snapshot, group);
 								return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageChoice, {
-									label: t(group),
+									label: t(sketch ? `${group}Setting` : group),
 									hint: t(`${group}Hint`),
 									value,
 									text: t(value === "mixed" ? "imageGroupMixed" : `${group}_${value}`),
@@ -7961,7 +8205,7 @@ window.__ModuleLoader__.load({
 									}
 								}, group);
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							!sketch ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "codexImageDefaultsGroup",
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageChoice, {
 									label: t("imageModel"),
@@ -7991,14 +8235,29 @@ window.__ModuleLoader__.load({
 										preference.set({ imageQuality });
 									}
 								})]
-							}),
-							snapshot.imageModel.includes("2.5") ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							}) : null,
+							!sketch && snapshot.imageModel.includes("2.5") ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 								className: "codexSubscriptionPreferenceHint",
 								children: t("imageModelHint")
 							}) : null
 						]
-					})]
-				})
+					}),
+					snapshot.error ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "codexSubscriptionRecover",
+						role: "alert",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "codexSubscriptionError",
+							children: t("preferenceFailed")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+							type: "button",
+							variant: "outline",
+							onClick: () => {
+								preference.retry();
+							},
+							children: t("preferenceRetry")
+						})]
+					}) : null
+				]
 			});
 		}
 		//#endregion
@@ -8225,16 +8484,15 @@ window.__ModuleLoader__.load({
 						className: "codexSubscriptionPreference",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							role: "status",
-							children: t(!state ? "runtimeLoading" : state.restartRequired ? "runtimeRestart" : busy ? `runtime_${state.phase}` : state.installed ? "subagentRuntimeInstalled" : state.present ? "runtimeIncompatible" : "subagentRuntimeMissing")
-						}), state?.available && (state.present || state.installable) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+							children: t(!state ? "runtimeLoading" : state.restartRequired ? "runtimeRestart" : busy ? `runtime_${state.phase}` : state.installed ? "subagentRuntimeInstalled" : !state.componentVersion ? "runtimeHostUnsupported" : state.present ? state.removable ? "runtimeIncompatible" : "runtimeManagedElsewhere" : "subagentRuntimeMissing")
+						}), state?.available && (state.present ? state.removable : state.installable) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 							type: "button",
 							variant: "outline",
-							disabled: locked || state.present && !state.removable,
+							disabled: locked,
 							onClick: () => state.present ? setConfirm(true) : void act("install"),
 							children: t(state.present ? "runtimeRemove" : "runtimeInstall")
 						}) : null]
 					}),
-					state?.present && state.available && !state.removable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("runtimeManagedElsewhere") }) : null,
 					state?.active > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("runtimeActive") }) : null,
 					busy && state.phase === "installing" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 						type: "button",
@@ -8276,21 +8534,22 @@ window.__ModuleLoader__.load({
 						role: "status",
 						children: t("runtimeCancelled")
 					}) : null,
-					!busy ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-						type: "button",
-						variant: "outline",
-						disabled: sending,
-						onClick: () => {
-							read();
-							preference.load();
-						},
-						children: t("runtimeRefresh")
-					}) : null,
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", { children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", { children: t("subagentRuntimeManage") }),
+						state?.present && state.available && !state.removable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("runtimeManagedElsewhere") }) : null,
+						!busy ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+							type: "button",
+							variant: "outline",
+							disabled: sending,
+							onClick: () => {
+								read();
+								preference.load();
+							},
+							children: t("runtimeRefresh")
+						}) : null,
 						state && !state.available ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("runtimeUnavailable") }) : null,
 						state?.available && !state.installable && !state.present ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("runtimeHostUnsupported") }) : null,
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("runtimeInstallHint") }),
+						state?.installable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("runtimeInstallHint") }) : null,
 						state?.componentVersion ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("code", { children: ["@deepseek-ai/dsh-subagent-codex@", state.componentVersion] }) : null,
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("subagentRuntimeCacheHint") }),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
@@ -9255,32 +9514,41 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/client-diagnostics.jsx
-		function DiagnosticsCard({ rpc, t }) {
+		function DiagnosticsCard({ rpc, t, diagnostics }) {
 			const [report, setReport] = (0, react.useState)();
 			const [busy, setBusy] = (0, react.useState)(false);
 			const [copied, setCopied] = (0, react.useState)(false);
 			const [error, setError] = (0, react.useState)(false);
+			const [copyError, setCopyError] = (0, react.useState)(false);
 			const load = () => {
 				setBusy(true);
 				setError(false);
 				setCopied(false);
-				recoveryCall(rpc, "diagnostics").then(setReport).catch((error) => {
-					setReport(clientDiagnostic(error));
-					setError(true);
+				setCopyError(false);
+				Promise.allSettled([recoveryCall(rpc, "diagnostics"), Promise.resolve().then(() => diagnostics?.collect())]).then(([server, client]) => {
+					setError(server.status === "rejected");
+					setReport({
+						...server.status === "fulfilled" ? server.value : clientDiagnostic(server.reason),
+						client: client.status === "fulfilled" && client.value ? client.value : { status: "unknown" }
+					});
 				}).finally(() => setBusy(false));
 			};
 			const copy = () => {
 				if (report === void 0) return;
-				navigator.clipboard.writeText(JSON.stringify(report, null, 2)).then(() => setCopied(true)).catch(() => setError(true));
+				setCopyError(false);
+				Promise.resolve().then(() => navigator.clipboard.writeText(JSON.stringify(report, null, 2))).then(() => setCopied(true)).catch(() => setCopyError(true));
 			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "codexSubscriptionCard codexSubscriptionDiagnostics",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "codexSubscriptionSectionHead",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "codexSubscriptionSectionTitle",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("diagnostics") })
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("diagnostics") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "codexSubscriptionHelp",
+								children: t("diagnosticsHint")
+							})]
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "codexSubscriptionActions",
 							children: [
@@ -9307,11 +9575,151 @@ window.__ModuleLoader__.load({
 							]
 						})]
 					}),
-					report === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", { children: JSON.stringify(report, null, 2) }),
+					report === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "codexSubscriptionHelp",
+							children: t("diagnosticsCoverageHint")
+						}),
+						report.version && report.client?.version && report.version !== report.client.version ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							role: "status",
+							children: t("diagnosticsVersionMismatch")
+						}) : null,
+						(report.inspection?.checks ?? []).some((item) => ["inspection-failed", "inspection-timeout"].includes(item.reason)) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							role: "status",
+							children: t("diagnosticsPartial")
+						}) : null,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+							style: {
+								width: "100%",
+								fontSize: 12,
+								textAlign: "left",
+								borderSpacing: "0 8px"
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: t("diagnosticsCapability") }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: t("diagnosticsReadiness") }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: t("diagnosticsEvidence") })
+							] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: (report.inspection?.capabilities ?? []).map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: t(`diagnosticCapability_${item.id}`) }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("td", { children: [t(`diagnosticReason_${item.reason}`), item.blockedBy ? ` · ${t(`diagnosticCapability_${item.blockedBy}`)}` : ""] }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: item.latest ? `${item.latest.action} · ${t(`diagnosticSource_${item.latest.source}`)} · ${t(`diagnosticOutcome_${item.latest.status}`)} · ${new Date(item.latest.observedAt).toLocaleTimeString()}` : t("diagnosticsUnverified") })
+							] }, item.id)) })]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "codexSubscriptionHelp",
+							children: report.client?.topology?.length ? t("diagnosticsHostCollected") : t("diagnosticsHostUnknown")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", { children: t("diagnosticsDetails") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", { children: JSON.stringify(report, null, 2) })] })
+					] }),
 					error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 						className: "codexSubscriptionError",
 						role: "alert",
 						children: t("diagnosticsFailed")
+					}) : null,
+					copyError ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "codexSubscriptionError",
+						role: "alert",
+						children: t("diagnosticsCopyFailed")
+					}) : null
+				]
+			});
+		}
+		//#endregion
+		//#region src/client-storage.jsx
+		function StorageCard({ rpc, t }) {
+			const [usage, setUsage] = (0, react.useState)();
+			const [busy, setBusy] = (0, react.useState)(false);
+			const [confirm, setConfirm] = (0, react.useState)(false);
+			const [error, setError] = (0, react.useState)(false);
+			const mounted = (0, react.useRef)(false);
+			const pending = (0, react.useRef)(false);
+			const read = async (clear) => {
+				if (pending.current) return;
+				pending.current = true;
+				setBusy(true);
+				setError(false);
+				try {
+					const result = unwrap(await rpc.call(CHANNEL, clear ? "storage/clear-forecast" : "storage/status", {}));
+					if (mounted.current) {
+						setUsage(result);
+						setConfirm(false);
+					}
+				} catch {
+					if (mounted.current) setError(true);
+				} finally {
+					pending.current = false;
+					if (mounted.current) setBusy(false);
+				}
+			};
+			(0, react.useEffect)(() => {
+				mounted.current = true;
+				read(false);
+				return () => {
+					mounted.current = false;
+				};
+			}, [rpc]);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "codexSubscriptionCard codexSubscriptionStorage",
+				"aria-label": t("storageTitle"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("storageTitle") }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "codexSubscriptionStorageMeter",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("storageForecast") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("output", {
+							role: "status",
+							children: usage ? `${(usage.bytes / 1024).toFixed(1)} / ${(usage.limit / 1024).toFixed(0)} KiB` : t("storageLoading")
+						})] }), usage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("progress", {
+							"aria-label": t("storageForecast"),
+							value: usage.bytes,
+							max: usage.limit
+						}) : null]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "codexSubscriptionHelp",
+						children: t("storageHint")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "codexSubscriptionActions",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+							type: "button",
+							variant: "outline",
+							disabled: busy,
+							onClick: () => void read(false),
+							children: t("runtimeRefresh")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+							type: "button",
+							variant: "outline",
+							disabled: busy || !usage?.bytes,
+							onClick: () => setConfirm(true),
+							children: t("storageClear")
+						})]
+					}),
+					confirm ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "codexSubscriptionConfirm",
+						role: "group",
+						"aria-label": t("storageClear"),
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("storageConfirm") }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+								type: "button",
+								variant: "outline",
+								disabled: busy,
+								onClick: () => setConfirm(false),
+								children: t("sketchCancel")
+							}),
+							" ",
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+								type: "button",
+								variant: "outline",
+								disabled: busy,
+								onClick: () => void read(true),
+								children: t("storageClear")
+							})
+						]
+					}) : null,
+					error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						role: "alert",
+						children: t("storageFailed")
 					}) : null
 				]
 			});
@@ -9722,10 +10130,15 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/client-section.jsx
-		function CodexSection({ preference, rpc, accountStatus, t }) {
+		function CodexSection({ preference, rpc, accountStatus, t, diagnostics }) {
 			const [tab, setTab] = (0, react.useState)("account");
 			const id = (0, react.useId)();
-			const tabs = ["account", "advanced"];
+			const tabs = [
+				"account",
+				"advanced",
+				"creative",
+				"maintenance"
+			];
 			const accountSnapshot = useAccountStatusSnapshot(accountStatus);
 			const account = accountSnapshot.account;
 			const [resetKey, setResetKey] = (0, react.useState)(0);
@@ -9800,32 +10213,203 @@ window.__ModuleLoader__.load({
 							})
 						]
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						role: "tabpanel",
 						id: `${id}-advanced`,
 						"aria-labelledby": `${id}-advanced-tab`,
 						hidden: tab !== "advanced",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PreferencesCard, {
-								rpc,
-								preference,
-								t,
-								section: "advanced"
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImagePreferences, {
-								preference,
-								t
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DiagnosticsCard, {
-								rpc,
-								t
-							})
-						]
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PreferencesCard, {
+							rpc,
+							preference,
+							t,
+							section: "advanced"
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						role: "tabpanel",
+						id: `${id}-creative`,
+						"aria-labelledby": `${id}-creative-tab`,
+						hidden: tab !== "creative",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImagePreferences, {
+							preference,
+							t
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImagePreferences, {
+							preference,
+							t,
+							section: "sketch"
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						role: "tabpanel",
+						id: `${id}-maintenance`,
+						"aria-labelledby": `${id}-maintenance-tab`,
+						hidden: tab !== "maintenance",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StorageCard, {
+							rpc,
+							t
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DiagnosticsCard, {
+							rpc,
+							t,
+							diagnostics
+						})]
 					})
 				]
 			});
 		}
 		//#endregion
+		//#region src/diagnostic-checks.js
+		const states = /* @__PURE__ */ new Set([
+			"pass",
+			"fail",
+			"warn",
+			"unknown",
+			"not-applicable"
+		]);
+		/** Adapters return bounded reason codes, never exceptions or raw service data. */
+		async function collectChecks(definitions, { timeoutMs = 1500, now = Date.now, source = "server", scope = "plugin-process" } = {}) {
+			return Promise.all(definitions.map(async ({ id, capability, run }) => {
+				const startedAt = now();
+				let timer;
+				const controller = new AbortController();
+				const base = {
+					id,
+					capability,
+					source,
+					scope
+				};
+				try {
+					if (!run) return {
+						...base,
+						status: "unknown",
+						reason: "not-instrumented",
+						observedAt: now()
+					};
+					const result = await Promise.race([Promise.resolve().then(() => run(controller.signal)), new Promise((resolve) => {
+						timer = setTimeout(() => {
+							controller.abort();
+							resolve({
+								status: "unknown",
+								reason: "inspection-timeout"
+							});
+						}, timeoutMs);
+					})]);
+					const valid = states.has(result?.status) && /^[a-z][a-z0-9-]{0,63}$/u.test(result?.reason ?? "");
+					return {
+						...base,
+						status: valid ? result.status : "unknown",
+						reason: valid ? result.reason : "invalid-inspection-result",
+						observedAt: now(),
+						elapsedMs: Math.max(0, now() - startedAt)
+					};
+				} catch {
+					return {
+						...base,
+						status: "unknown",
+						reason: "inspection-failed",
+						observedAt: now(),
+						elapsedMs: Math.max(0, now() - startedAt)
+					};
+				} finally {
+					clearTimeout(timer);
+				}
+			}));
+		}
+		Object.freeze([
+			"account",
+			"accounts",
+			"settings",
+			"models",
+			"quota",
+			"search",
+			"images",
+			"sketch",
+			"subagents",
+			"compaction",
+			"transport",
+			"storage",
+			"host-ui"
+		]);
+		//#endregion
+		//#region src/diagnostic-host.js
+		const roots = [
+			"settings.section",
+			"conversation.input.right",
+			"conversation.input.model",
+			"conversation.input.attachments",
+			"conversation.message.images",
+			"conversation.trajectory.images",
+			"shell.overlay"
+		];
+		const packageName = /^(?:@[a-z0-9_.-]+\/)?[a-z0-9][a-z0-9_.-]{0,99}$/u;
+		function projectHostSlots(slots) {
+			if (typeof slots?.snapshot !== "function") return void 0;
+			return roots.map((name) => {
+				const nodes = slots.snapshot(name);
+				const node = Array.isArray(nodes) ? nodes.find((item) => item.type === "slot" && item.name === name) : void 0;
+				const occupants = Array.isArray(node?.occupants) ? node.occupants : [];
+				return {
+					name,
+					declared: !!node,
+					truncated: occupants.length > 16,
+					occupants: occupants.slice(0, 16).map((value) => ({
+						owner: typeof value.registrant === "string" && packageName.test(value.registrant) ? value.registrant : "unknown",
+						active: value.active === true
+					}))
+				};
+			});
+		}
+		function createHostDiagnostics() {
+			const scopes = /* @__PURE__ */ new Map();
+			let sequence = 0;
+			return {
+				register(slots) {
+					const item = scopes.get(slots) ?? {
+						alias: `scope-${++sequence}`,
+						count: 0
+					};
+					item.count++;
+					scopes.set(slots, item);
+					return () => {
+						if (--item.count === 0) scopes.delete(slots);
+					};
+				},
+				async collect() {
+					const topology = [];
+					const active = [...scopes.entries()].slice(0, 8);
+					const checks = await collectChecks(active.map(([slots, item]) => ({
+						id: `host-slots-${item.alias}`,
+						capability: "host-ui",
+						run: () => {
+							const value = projectHostSlots(slots);
+							if (!value) return {
+								status: "unknown",
+								reason: "host-inspection-unavailable"
+							};
+							topology.push({
+								scope: item.alias,
+								slots: value
+							});
+							return {
+								status: "pass",
+								reason: "inspection-completed"
+							};
+						}
+					})), {
+						source: "client",
+						scope: "mounted-host-scopes"
+					});
+					return {
+						version: PACKAGE_VERSION,
+						generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+						checks,
+						topology,
+						truncated: scopes.size > active.length,
+						interpretation: "host-selection-not-visual-or-execution-proof"
+					};
+				}
+			};
+		}
+		//#endregion
 		//#region src/client.jsx
 		const inject = [
 			"slots",
@@ -9838,6 +10422,8 @@ window.__ModuleLoader__.load({
 			"sessions"
 		];
 		function apply(ctx) {
+			const diagnostics = createHostDiagnostics();
+			ctx.effect(() => diagnostics.register(ctx.slots), "codex-subscription: host inspection");
 			const imageViewer = new SubscriptionImageViewerService();
 			ctx.effect(() => ctx.locale.register(NS, {
 				zh,
@@ -9898,11 +10484,13 @@ window.__ModuleLoader__.load({
 					preference,
 					rpc,
 					accountStatus,
-					t
+					t,
+					diagnostics
 				})
 			}, CodexSection));
 			const sessions = ctx.get("sessions");
 			const installDirectorySlots = (scope) => {
+				scope.effect(() => diagnostics.register(scope.slots), "codex-subscription: scoped host inspection");
 				const modelDirectories = scope.get("modelDirectories");
 				scope.slots.inject("conversation.input.right", () => scope.slots.register({
 					name: "conversation.input.right",