dsh-codex-subscription 2.2.1 → 2.2.2

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;
 			}
-			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()
-				};
-				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
-					})));
+			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 {
-					if (request.name !== void 0 && (typeof request.name !== "string" || request.name.length > 60)) throw Error("Invalid draft name");
-					pending = true;
-					try {
-						await adapter.save(request.name);
-					} finally {
-						pending = false;
-					}
-				}
-				const result = {
-					...adapter.snapshot(),
-					...changedObjects ? {
-						changedObjects: changedObjects.slice(0, 100),
-						changedObjectCount: changedObjects.length
-					} : {}
-				};
-				completed.set(key, {
-					fingerprint,
-					result,
-					receipt: {
-						requestId: request.requestId,
-						action: request.action,
-						revision: result.revision
+					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);
 					}
-				});
-				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;
-			};
+				gesture.last = point;
+			}
+			return doc;
 		}
 		//#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);
+		//#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" }));
 				};
-				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.onupgradeneeded = () => {
+					if (blocked) {
+						request.transaction.abort();
+						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
+					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();
+						}
 					};
-				}
-			}
-			const activeIndex = source.layers.findIndex((layer) => layer.id === source.active);
-			doc.active = doc.layers[Math.max(0, activeIndex)].id;
-			return doc;
-		}
-		async function exportSketchPsd(doc, images, composite) {
-			const width = doc.width ?? 1024, height = doc.height ?? 1024;
-			const children = doc.layers.map((layer, i) => {
-				const ctx = canvas(width, height).getContext("2d"), ref = layer.image;
-				if (ref) ctx.drawImage(images.get(ref.src), ref.x * width, ref.y * height, ref.width * width, ref.height * height);
-				paintSketch(ctx, layer.strokes, width, true, height);
-				return {
-					name: layer.name || `Layer ${i + 1}`,
-					hidden: !layer.visible,
-					opacity: 1,
-					blendMode: "normal",
-					imageData: ctx.getImageData(0, 0, width, height)
 				};
+				request.onsuccess = () => {
+					if (blocked) {
+						request.result.close();
+						return;
+					}
+					request.result.onversionchange = () => request.result.close();
+					resolve(request.result);
+				};
+				request.onerror = () => reject(request.error);
 			});
-			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)
+			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();
 			}
-			return runPsdCodec("write", {
-				width,
-				height,
-				children,
-				imageData: composite.getContext("2d").getImageData(0, 0, width, height)
-			});
 		}
-		async function importSketchPsd(file) {
-			if (file.size > 32 * 1024 * 1024) throw Error("PSD exceeds 32 MB");
-			const psd = await runPsdCodec("read", await file.arrayBuffer());
-			const scale = Math.min(1, 1024 / Math.max(psd.width, psd.height)), width = Math.max(1, Math.round(psd.width * scale)), height = Math.max(1, Math.round(psd.height * scale));
-			const doc = {
-				...createSketchLayers(),
-				width,
-				height,
-				ratio: Object.keys(SKETCH_RATIOS).find((k) => SKETCH_RATIOS[k][0] === width && SKETCH_RATIOS[k][1] === height) ?? "custom",
-				layers: [],
-				nextId: psd.layers.length + 1
-			};
-			for (const [i, layer] of psd.layers.entries()) {
-				const src = canvas(layer.imageData.width, layer.imageData.height);
-				src.getContext("2d").putImageData(new ImageData(new Uint8ClampedArray(layer.imageData.data), layer.imageData.width, layer.imageData.height), 0, 0);
-				const out = canvas(width, height), ctx = out.getContext("2d");
-				ctx.globalAlpha = layer.opacity;
-				ctx.drawImage(src, layer.left * scale, layer.top * scale, src.width * scale, src.height * scale);
-				doc.layers.push({
-					id: i + 1,
-					name: layer.name,
-					visible: !layer.hidden,
-					strokes: [],
-					image: {
-						src: out.toDataURL("image/png"),
-						x: 0,
-						y: 0,
-						width: 1,
-						height: 1
-					}
-				});
+		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);
 			}
-			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)
+		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
 				};
-				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;
-				}
-				if (documentId.current === savingDocument) {
-					saved.current = {
-						id: row.id,
-						name: row.name
-					};
-					if (documentRevision.current === savingRevision) {
-						dirty.current = false;
-						setRecovered(false);
-					}
-				}
-			};
-			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);
-				}
+			} finally {
+				bitmap.close();
+			}
+		}
+		//#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
+				}))
 			};
-			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;
+		}
+		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 (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 (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;
 					}
-				};
-				await decodeImages({ layers: [layer] }, images.current);
-				checkpoint();
-				doc.current = {
-					...doc.current,
-					nextId: layer.id + 1,
-					active: layer.id,
-					layers: [...doc.current.layers, layer]
-				};
-				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
+					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 }))
 					});
-					dirty.current = Boolean(recovery);
-					setRecovered(Boolean(recovery));
+					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;
 				}
-				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;
-					try {
-						working(true);
-						report(null);
-						await operation();
-						return true;
-					} catch (error) {
-						report(error);
-						if (rethrow) throw error;
-						return false;
-					} finally {
-						running = false;
-						working(false);
-					}
+				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-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)
+				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
+					}))
 				};
-			}, {
-				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));
+				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;
 		}
-		//#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];
+		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()
+				};
+				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;
+					}
+				}
+				const result = {
+					...adapter.snapshot(),
+					...changedObjects ? {
+						changedObjects: changedObjects.slice(0, 100),
+						changedObjectCount: changedObjects.length
+					} : {}
+				};
+				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("|")
-			]);
-		}
-		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();
-			}, [
+			});
+			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,
-				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,
+				children,
+				imageData: composite.getContext("2d").getImageData(0, 0, width, height)
+			});
+		}
+		async function importSketchPsd(file) {
+			if (file.size > 32 * 1024 * 1024) throw Error("PSD exceeds 32 MB");
+			const psd = await runPsdCodec("read", await file.arrayBuffer());
+			const scale = Math.min(1, 1024 / Math.max(psd.width, psd.height)), width = Math.max(1, Math.round(psd.width * scale)), height = Math.max(1, Math.round(psd.height * scale));
+			const doc = {
+				...createSketchLayers(),
+				width,
+				height,
+				ratio: Object.keys(SKETCH_RATIOS).find((k) => SKETCH_RATIOS[k][0] === width && SKETCH_RATIOS[k][1] === height) ?? "custom",
+				layers: [],
+				nextId: psd.layers.length + 1
 			};
+			for (const [i, layer] of psd.layers.entries()) {
+				const src = canvas(layer.imageData.width, layer.imageData.height);
+				src.getContext("2d").putImageData(new ImageData(new Uint8ClampedArray(layer.imageData.data), layer.imageData.width, layer.imageData.height), 0, 0);
+				const out = canvas(width, height), ctx = out.getContext("2d");
+				ctx.globalAlpha = layer.opacity;
+				ctx.drawImage(src, layer.left * scale, layer.top * scale, src.width * scale, src.height * scale);
+				doc.layers.push({
+					id: i + 1,
+					name: layer.name,
+					visible: !layer.hidden,
+					strokes: [],
+					image: {
+						src: out.toDataURL("image/png"),
+						x: 0,
+						y: 0,
+						width: 1,
+						height: 1
+					}
+				});
+			}
+			return doc;
 		}
 		//#endregion
-		//#region src/sketch-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)(() => {
+		//#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 {
+				hasContent,
+				save,
+				saveChanges,
+				replace,
+				fresh,
+				load,
+				importImage,
+				restore
 			};
+		}
+		//#endregion
+		//#region src/sketch-operation-gate.js
+		function createSketchOperationGate() {
+			let running = false;
 			return {
-				view,
-				keys,
-				shortcuts,
-				space,
-				zoom,
-				reset,
-				setKey,
-				toggle: () => setShortcuts((v) => {
+				get running() {
+					return running;
+				},
+				async run(operation, { blocked = false, working, report, rethrow = false }) {
+					if (blocked || running) return false;
+					running = true;
 					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);
+						working(true);
+						report(null);
+						await operation();
 						return true;
+					} catch (error) {
+						report(error);
+						if (rethrow) throw error;
+						return false;
+					} finally {
+						running = false;
+						working(false);
 					}
-					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;
 				}
 			};
 		}
-		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,15 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/client-locales.js
 		const zh = {
+			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 +5003,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 +5099,15 @@ window.__ModuleLoader__.load({
 			imageRemoveAnnotation: "删除标注"
 		};
 		const en = {
+			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 +5475,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 +5665,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 +5723,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}
@@ -5669,6 +5805,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 +7445,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/version.js
-		const PACKAGE_VERSION = "2.2.1";
+		const PACKAGE_VERSION = "2.2.2";
 		//#endregion
 		//#region src/client-recovery.js
 		async function recoveryCall(rpc, endpoint, payload = {}, timeoutMs = 1e4) {
@@ -7925,29 +8080,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 +8117,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 +8147,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 +8396,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 +8446,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", {
@@ -9278,9 +9449,12 @@ window.__ModuleLoader__.load({
 				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: [
@@ -9317,6 +9491,106 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#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
+				]
+			});
+		}
+		//#endregion
 		//#region src/client-usage.jsx
 		function ResetTime({ resetsAt, t }) {
 			const date = Number.isSafeInteger(resetsAt) ? validDate(resetsAt * 1e3) : void 0;
@@ -9725,7 +9999,12 @@ window.__ModuleLoader__.load({
 		function CodexSection({ preference, rpc, accountStatus, t }) {
 			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,27 +10079,44 @@ 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
+						})]
 					})
 				]
 			});