@agimon-ai/doompi-style-system 0.0.1-alpha.100

package/dist/extensions/web.mjs

@@ -0,0 +1,942 @@
+import { apiResponse, createApiClient, defineApiRoutes, defineFill, defineWebPlugin, sessionApiAddress } from "@agimon-ai/doompi-core/web";
+import { Button } from "@agimon-ai/doompi-web-components";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { sealedTransport } from "@agimon-ai/doompi-web-security/browser";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/types/apiRoutes.ts
+var apiRoutes_default = defineApiRoutes({
+	metadata: {
+		method: "POST",
+		path: "/metadata",
+		response: apiResponse()
+	},
+	build: {
+		method: "POST",
+		path: "/build",
+		response: apiResponse()
+	},
+	image: {
+		method: "POST",
+		path: "/image",
+		response: apiResponse()
+	},
+	dispose: {
+		method: "DELETE",
+		path: "/artifact",
+		response: apiResponse()
+	}
+});
+const api = createApiClient(apiRoutes_default, {
+	scopes: ["session"],
+	basePath: "style-system-preview",
+	transport: (input, init) => sealedTransport.fetch(input, init),
+	sessionAddress: sessionApiAddress
+});
+//#endregion
+//#region src/extensions/workspaces/sessions/(frontend)/_lib/previewApi.ts
+function errorMessage(result) {
+	if (result.status === 0) return "The preview service is unreachable.";
+	return result.error === "" ? `The preview service answered ${String(result.status)}.` : result.error;
+}
+async function storyMetadata(sessionId, request) {
+	const result = await api.session(sessionId).metadata({ body: request });
+	return result.ok ? {
+		ok: true,
+		metadata: result.data
+	} : {
+		ok: false,
+		error: errorMessage(result)
+	};
+}
+async function buildPreview(sessionId, request) {
+	const result = await api.session(sessionId).build({ body: request });
+	return result.ok ? {
+		ok: true,
+		preview: result.data
+	} : {
+		ok: false,
+		error: errorMessage(result)
+	};
+}
+async function exportPreviewImage(sessionId, request) {
+	const result = await api.session(sessionId).image({ body: request });
+	return result.ok ? {
+		ok: true,
+		image: result.data
+	} : {
+		ok: false,
+		error: errorMessage(result)
+	};
+}
+async function disposePreview(sessionId, handle) {
+	await api.session(sessionId).dispose({ body: { handle } });
+}
+//#endregion
+//#region src/extensions/workspaces/sessions/(frontend)/_lib/previewFrame.ts
+const PREVIEW_CSP = "default-src 'none'; base-uri 'none'; connect-src 'none'; font-src data:; form-action 'none'; frame-src 'none'; img-src data: blob:; media-src data: blob:; object-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'";
+function findHeadInsertion(html) {
+	const lower = html.toLowerCase();
+	let index = 0;
+	while (index < html.length) {
+		if (lower.startsWith("<!--", index)) {
+			const end = lower.indexOf("-->", index + 4);
+			index = end < 0 ? html.length : end + 3;
+			continue;
+		}
+		if (html[index] !== "<") {
+			index += 1;
+			continue;
+		}
+		const tag = html.slice(index).match(/^<([a-z][a-z0-9:-]*)(?:\s[^>]*)?>/i);
+		if (tag === null) {
+			index += 1;
+			continue;
+		}
+		const name = tag[1].toLowerCase();
+		const end = index + tag[0].length;
+		if (name === "head") return end;
+		if (name === "script" || name === "style" || name === "template" || name === "textarea" || name === "title") {
+			const closing = lower.indexOf(`</${name}`, end);
+			index = closing < 0 ? html.length : closing;
+			continue;
+		}
+		index = end;
+	}
+}
+function isolatedPreviewHtml(html) {
+	const policy = `<meta http-equiv="Content-Security-Policy" content="${PREVIEW_CSP}">`;
+	const headInsertion = findHeadInsertion(html);
+	if (headInsertion !== void 0) return `${html.slice(0, headInsertion)}${policy}${html.slice(headInsertion)}`;
+	const doctype = html.match(/^\s*<!doctype[^>]*>/i);
+	if (doctype !== null) return `${doctype[0]}<head>${policy}</head>${html.slice(doctype[0].length)}`;
+	return `<head>${policy}</head>${html}`;
+}
+function normalizedAnnotationRect(start, end) {
+	return {
+		x: Math.min(start.x, end.x),
+		y: Math.min(start.y, end.y),
+		width: Math.abs(end.x - start.x),
+		height: Math.abs(end.y - start.y)
+	};
+}
+function previewAnnotationLocation(tool, start, end) {
+	if (tool === "comment") return {
+		mode: "point",
+		point: end
+	};
+	const rect = normalizedAnnotationRect(start, end);
+	return rect.width === 0 || rect.height === 0 ? null : {
+		mode: "region",
+		point: rect,
+		rect
+	};
+}
+//#endregion
+//#region src/extensions/workspaces/sessions/(frontend)/_components/StoryPreviewPanel.tsx
+function imageDownload(data, storyExport) {
+	const link = document.createElement("a");
+	link.href = `data:image/png;base64,${data}`;
+	link.download = `${storyExport.replace(/[^A-Za-z0-9_-]/g, "-")}.png`;
+	link.click();
+}
+function point(event) {
+	const bounds = event.currentTarget.getBoundingClientRect();
+	return {
+		x: Math.min(1, Math.max(0, (event.clientX - bounds.left) / bounds.width)),
+		y: Math.min(1, Math.max(0, (event.clientY - bounds.top) / bounds.height))
+	};
+}
+function preferredExport(exports) {
+	return exports.find((entry) => entry.exportName === "Playground")?.exportName ?? exports[0]?.exportName ?? "";
+}
+function errorText(reason) {
+	return reason instanceof Error ? reason.message : String(reason);
+}
+function StoryPreviewPanel({ sessionId, submitCapture, seed, source, activeTool = "select", displayedAnnotations = [], pendingCandidate = false, onAnnotationCandidate }) {
+	const contextualSource = source ?? seed?.source;
+	const sourcePath = contextualSource?.path ?? "";
+	const sourceDirty = contextualSource?.hasUnsavedChanges === true;
+	const sourceRevision = contextualSource?.revision ?? 0;
+	const sourceSha256 = contextualSource?.sourceSha256 ?? "";
+	const contextual = contextualSource !== void 0;
+	const [appPath, setAppPath] = useState(contextual ? "" : ".");
+	const [storyPath, setStoryPath] = useState(sourcePath);
+	const [storyExport, setStoryExport] = useState(contextual ? "" : "Playground");
+	const [storyExports, setStoryExports] = useState();
+	const [darkMode, setDarkMode] = useState(false);
+	const [preview, setPreview] = useState(void 0);
+	const [builtRequest, setBuiltRequest] = useState(void 0);
+	const [annotationImage, setAnnotationImage] = useState(void 0);
+	const [annotationStart, setAnnotationStart] = useState(void 0);
+	const [annotationRect, setAnnotationRect] = useState(void 0);
+	const [feedback, setFeedback] = useState("");
+	const [status, setStatus] = useState(contextual ? sourceDirty ? "Loading story metadata. Preview uses saved source." : "Loading story metadata…" : "Choose an exact story file and export.");
+	const [working, setWorking] = useState(false);
+	const generationRef = useRef(0);
+	const operationRef = useRef(0);
+	const previewRef = useRef(void 0);
+	const builtRequestRef = useRef(void 0);
+	const workingRef = useRef(false);
+	const dirtyRef = useRef(sourceDirty);
+	const annotationExportRef = useRef("");
+	const [stroke, setStroke] = useState([]);
+	const [zoom, setZoom] = useState(1);
+	const [gesture, setGesture] = useState();
+	const pointers = useRef(/* @__PURE__ */ new Map());
+	const pinch = useRef(void 0);
+	const pan = useRef(void 0);
+	const imageScroll = useRef(null);
+	dirtyRef.current = sourceDirty;
+	const request = useMemo(() => ({
+		appPath,
+		storyPath,
+		storyExport,
+		darkMode
+	}), [
+		appPath,
+		storyPath,
+		storyExport,
+		darkMode
+	]);
+	useEffect(() => {
+		operationRef.current += 1;
+		if (!workingRef.current) return;
+		workingRef.current = false;
+		setWorking(false);
+	}, [request]);
+	useEffect(() => {
+		const generation = generationRef.current + 1;
+		generationRef.current = generation;
+		operationRef.current += 1;
+		workingRef.current = false;
+		setWorking(false);
+		setStoryExports(void 0);
+		setAppPath(contextual ? "" : ".");
+		setStoryPath(sourcePath);
+		setStoryExport(contextual ? "" : "Playground");
+		builtRequestRef.current = void 0;
+		setBuiltRequest(void 0);
+		setAnnotationImage(void 0);
+		setAnnotationStart(void 0);
+		setAnnotationRect(void 0);
+		setStroke([]);
+		setZoom(1);
+		pointers.current.clear();
+		pinch.current = void 0;
+		if (sessionId === null || sourcePath === "") {
+			setPreview(void 0);
+			previewRef.current = void 0;
+			return () => {
+				if (generationRef.current === generation) generationRef.current += 1;
+			};
+		}
+		const previous = previewRef.current;
+		previewRef.current = void 0;
+		setPreview(void 0);
+		if (previous !== void 0) disposePreview(sessionId, previous.handle);
+		let current = true;
+		setStatus(sourceDirty ? "Loading story metadata. Preview uses saved source." : "Loading story metadata…");
+		storyMetadata(sessionId, { storyPath: sourcePath }).then((result) => {
+			if (!current || generationRef.current !== generation) return;
+			if (!result.ok) {
+				setStoryExports(void 0);
+				setStatus(result.error);
+				return;
+			}
+			const exports = result.metadata.exports;
+			setAppPath(result.metadata.appPath);
+			setStoryPath(result.metadata.storyPath);
+			setStoryExports(exports);
+			setStoryExport(preferredExport(exports));
+			if (exports.length === 0) setStatus("No story exports were found in this file.");
+			else if (dirtyRef.current) setStatus("Save changes to preview. Preview uses saved source.");
+			else if (exports.length === 1) setStatus("Story found. Building preview…");
+			else setStatus("Story found. Building the Playground export…");
+		}).catch((reason) => {
+			if (current && generationRef.current === generation) setStatus(errorText(reason));
+		});
+		return () => {
+			current = false;
+			if (generationRef.current === generation) generationRef.current += 1;
+			operationRef.current += 1;
+			const ownedPreview = previewRef.current;
+			previewRef.current = void 0;
+			if (ownedPreview !== void 0) disposePreview(sessionId, ownedPreview.handle);
+		};
+	}, [
+		contextual,
+		sessionId,
+		sourcePath,
+		sourceRevision,
+		sourceSha256
+	]);
+	useEffect(() => {
+		if (!contextual || !sourceDirty) return;
+		setStatus("Save changes to preview. Preview uses saved source.");
+	}, [contextual, sourceDirty]);
+	const rebuild = useCallback(async () => {
+		if (sessionId === null || workingRef.current || request.appPath.trim() === "" || request.storyPath.trim() === "" || request.storyExport.trim() === "") return false;
+		if (dirtyRef.current) {
+			setStatus("Save changes to preview. Preview uses saved source.");
+			return false;
+		}
+		const generation = generationRef.current;
+		const operation = operationRef.current + 1;
+		operationRef.current = operation;
+		const requestSessionId = sessionId;
+		workingRef.current = true;
+		setWorking(true);
+		setStatus("Building preview…");
+		try {
+			const result = await buildPreview(requestSessionId, request);
+			if (generationRef.current !== generation || operationRef.current !== operation) {
+				if (result.ok) disposePreview(requestSessionId, result.preview.handle);
+				return false;
+			}
+			if (!result.ok) {
+				setStatus(result.error);
+				return false;
+			}
+			const previous = previewRef.current;
+			previewRef.current = result.preview;
+			builtRequestRef.current = request;
+			setPreview(result.preview);
+			setBuiltRequest(request);
+			setAnnotationImage(void 0);
+			setAnnotationStart(void 0);
+			setAnnotationRect(void 0);
+			if (previous !== void 0 && previous.handle !== result.preview.handle) disposePreview(requestSessionId, previous.handle);
+			setStatus(dirtyRef.current ? "Preview ready from saved source. Save changes to refresh." : "Preview ready. Refresh after source edits.");
+			return true;
+		} catch (reason) {
+			if (generationRef.current === generation && operationRef.current === operation) setStatus(errorText(reason));
+			return false;
+		} finally {
+			if (generationRef.current === generation && operationRef.current === operation) {
+				workingRef.current = false;
+				setWorking(false);
+			}
+		}
+	}, [request, sessionId]);
+	useEffect(() => {
+		if (!contextual || sessionId === null || sourceDirty || storyExports === void 0 || storyExport.trim() === "" || appPath.trim() === "" || storyPath.trim() === "") return;
+		rebuild();
+	}, [
+		appPath,
+		contextual,
+		rebuild,
+		sessionId,
+		sourceDirty,
+		storyExport,
+		storyExports,
+		storyPath
+	]);
+	const image = useCallback(async () => {
+		const currentRequest = builtRequestRef.current;
+		if (sessionId === null || workingRef.current || currentRequest === void 0) return void 0;
+		const generation = generationRef.current;
+		const operation = operationRef.current + 1;
+		operationRef.current = operation;
+		const requestSessionId = sessionId;
+		workingRef.current = true;
+		setWorking(true);
+		setStatus("Rendering a fresh source-backed image…");
+		try {
+			const result = await exportPreviewImage(requestSessionId, currentRequest);
+			if (generationRef.current !== generation || operationRef.current !== operation) return void 0;
+			if (!result.ok) {
+				setStatus(result.error);
+				return;
+			}
+			setStatus("Image rendered from the current source. Transient iframe interactions are not included.");
+			return result.image;
+		} catch (reason) {
+			if (generationRef.current === generation && operationRef.current === operation) setStatus(errorText(reason));
+			return;
+		} finally {
+			if (generationRef.current === generation && operationRef.current === operation) {
+				workingRef.current = false;
+				setWorking(false);
+			}
+		}
+	}, [sessionId]);
+	async function prepareAnnotation() {
+		const generation = generationRef.current;
+		const result = await image();
+		if (result === void 0 || generationRef.current !== generation) return;
+		setAnnotationImage(result);
+		setAnnotationRect(void 0);
+		setStatus("Annotation image ready. Drag a region or comment on the whole preview.");
+	}
+	useEffect(() => {
+		if (onAnnotationCandidate === void 0) return;
+		if (activeTool === "select") {
+			annotationExportRef.current = "";
+			setAnnotationImage(void 0);
+			setAnnotationStart(void 0);
+			setAnnotationRect(void 0);
+			return;
+		}
+		if (preview === void 0 || annotationImage !== void 0 || working || annotationExportRef.current === preview.handle) return;
+		const generation = generationRef.current;
+		image().then((result) => {
+			if (result === void 0 || generationRef.current !== generation) return;
+			annotationExportRef.current = preview.handle;
+			setAnnotationImage(result);
+			setStatus("Frozen source-backed image ready for Author annotations.");
+		});
+	}, [
+		activeTool,
+		annotationImage,
+		image,
+		onAnnotationCandidate,
+		preview,
+		working
+	]);
+	function updateAnnotation(event) {
+		if (annotationStart === void 0) return;
+		const end = point(event);
+		setAnnotationRect(normalizedAnnotationRect(annotationStart, end));
+	}
+	function authorCandidate(location, rect, points) {
+		if (annotationImage === void 0 || onAnnotationCandidate === void 0 || builtRequest === void 0) return;
+		const binary = atob(annotationImage.data);
+		const bytes = Uint8Array.from(binary, (character) => character.charCodeAt(0));
+		const evidence = new Blob([bytes], { type: annotationImage.mimeType });
+		const thumbnailUrl = URL.createObjectURL(evidence);
+		try {
+			onAnnotationCandidate({
+				mode: rect === void 0 ? "point" : "region",
+				point: location,
+				...rect === void 0 ? {} : { rect },
+				...points === void 0 ? {} : { stroke: points.map((point) => ({ ...point })) },
+				preview: {
+					version: 1,
+					provider: "style-system",
+					projectPath: builtRequest.appPath,
+					storyPath: annotationImage.storyPath,
+					storyExport: annotationImage.storyExport,
+					buildRevision: annotationImage.sourceSha256,
+					viewport: {
+						width: annotationImage.width,
+						height: annotationImage.height
+					},
+					sources: [{
+						path: annotationImage.storyPath,
+						sha256: annotationImage.sourceSha256
+					}]
+				},
+				evidence,
+				thumbnailUrl
+			});
+		} catch (reason) {
+			URL.revokeObjectURL(thumbnailUrl);
+			setStatus(errorText(reason));
+		}
+	}
+	const multipleExports = storyExports !== void 0 && storyExports.length > 1;
+	const previewVisible = preview !== void 0;
+	const authorAnnotationActive = onAnnotationCandidate !== void 0 && activeTool !== "select";
+	useEffect(() => {
+		setStroke([]);
+		setAnnotationStart(void 0);
+		pointers.current.clear();
+		pinch.current = void 0;
+		pan.current = void 0;
+	}, [activeTool, annotationImage?.sourceSha256]);
+	return /* @__PURE__ */ jsxs("section", {
+		className: "flex h-full min-h-0 min-w-0 flex-1 flex-col gap-3 p-3",
+		"data-testid": "style-system-preview-panel",
+		children: [
+			contextual ? /* @__PURE__ */ jsxs("header", {
+				className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-doom-dim",
+				children: [
+					/* @__PURE__ */ jsxs("span", { children: ["Story: ", /* @__PURE__ */ jsx("strong", {
+						className: "text-doom-text",
+						children: storyPath || sourcePath
+					})] }),
+					/* @__PURE__ */ jsxs("span", { children: ["Project: ", /* @__PURE__ */ jsx("strong", {
+						className: "text-doom-text",
+						children: appPath || "resolving…"
+					})] }),
+					multipleExports ? /* @__PURE__ */ jsxs("label", {
+						className: "flex items-center gap-1",
+						children: ["Export", /* @__PURE__ */ jsx("select", {
+							className: "rounded border border-doom-border bg-doom-bg px-2 py-1 text-doom-text",
+							value: storyExport,
+							"aria-label": "story export",
+							onChange: (event) => {
+								setStoryExport(event.target.value);
+								builtRequestRef.current = void 0;
+								setBuiltRequest(void 0);
+								setAnnotationImage(void 0);
+								setAnnotationRect(void 0);
+							},
+							children: storyExports.map((entry) => /* @__PURE__ */ jsx("option", {
+								value: entry.exportName,
+								children: entry.label ?? entry.exportName
+							}, entry.exportName))
+						})]
+					}) : storyExport !== "" ? /* @__PURE__ */ jsxs("span", { children: ["Export: ", /* @__PURE__ */ jsx("strong", {
+						className: "text-doom-text",
+						children: storyExport
+					})] }) : null
+				]
+			}) : /* @__PURE__ */ jsxs("header", {
+				className: "grid gap-2 md:grid-cols-3",
+				children: [
+					/* @__PURE__ */ jsxs("label", {
+						className: "grid gap-1 text-xs text-doom-dim",
+						children: ["Project path", /* @__PURE__ */ jsx("input", {
+							className: "rounded border border-doom-border bg-doom-bg px-2 py-1 text-doom-text",
+							value: appPath,
+							onChange: (event) => setAppPath(event.target.value)
+						})]
+					}),
+					/* @__PURE__ */ jsxs("label", {
+						className: "grid gap-1 text-xs text-doom-dim",
+						children: ["Story file", /* @__PURE__ */ jsx("input", {
+							className: "rounded border border-doom-border bg-doom-bg px-2 py-1 text-doom-text",
+							placeholder: "packages/ui/Button.stories.tsx",
+							value: storyPath,
+							onChange: (event) => {
+								setStoryPath(event.target.value);
+								setStoryExports(void 0);
+							}
+						})]
+					}),
+					/* @__PURE__ */ jsxs("label", {
+						className: "grid gap-1 text-xs text-doom-dim",
+						children: ["Story export", storyExports === void 0 ? /* @__PURE__ */ jsx("input", {
+							className: "rounded border border-doom-border bg-doom-bg px-2 py-1 text-doom-text",
+							value: storyExport,
+							onChange: (event) => setStoryExport(event.target.value)
+						}) : /* @__PURE__ */ jsxs("select", {
+							className: "rounded border border-doom-border bg-doom-bg px-2 py-1 text-doom-text",
+							value: storyExport,
+							onChange: (event) => setStoryExport(event.target.value),
+							children: [/* @__PURE__ */ jsx("option", {
+								value: "",
+								children: "Choose an export"
+							}), storyExports.map((entry) => /* @__PURE__ */ jsx("option", {
+								value: entry.exportName,
+								children: entry.label ?? entry.exportName
+							}, entry.exportName))]
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx(Button, {
+						disabled: sessionId === null || working || sourceDirty || request.storyPath.trim() === "" || request.storyExport.trim() === "",
+						onClick: () => void rebuild(),
+						children: previewVisible ? "Refresh preview" : "Build preview"
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						disabled: preview === void 0 || working,
+						onClick: () => void image().then((result) => result && imageDownload(result.data, result.storyExport)),
+						children: "Export PNG"
+					}),
+					onAnnotationCandidate === void 0 ? /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						disabled: preview === void 0 || working,
+						onClick: () => void prepareAnnotation(),
+						children: "Prepare annotation"
+					}) : null,
+					/* @__PURE__ */ jsxs("label", {
+						className: "flex items-center gap-1 text-xs text-doom-dim",
+						children: [/* @__PURE__ */ jsx("input", {
+							type: "checkbox",
+							checked: darkMode,
+							onChange: (event) => setDarkMode(event.target.checked)
+						}), " Dark mode"]
+					}),
+					/* @__PURE__ */ jsx("output", {
+						className: "text-xs text-doom-dim",
+						"aria-live": "polite",
+						children: status
+					})
+				]
+			}),
+			sourceDirty ? /* @__PURE__ */ jsx("p", {
+				"data-testid": "style-system-preview-dirty",
+				className: "text-xs text-doom-yellow",
+				children: "Save changes to preview. Preview uses saved source."
+			}) : null,
+			preview === void 0 ? /* @__PURE__ */ jsx("div", {
+				className: "grid min-h-48 place-items-center rounded border border-dashed border-doom-border text-sm text-doom-faint",
+				children: "No preview built."
+			}) : authorAnnotationActive && annotationImage !== void 0 ? /* @__PURE__ */ jsxs("div", {
+				className: "flex min-h-0 flex-1 flex-col overflow-hidden rounded border border-doom-border bg-doom-deep",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 p-2",
+					role: "group",
+					"aria-label": "Preview zoom",
+					children: [
+						/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							className: "min-h-11 min-w-11",
+							"aria-label": "Zoom out",
+							onClick: () => setZoom((value) => Math.max(1, value / 1.5)),
+							children: "−"
+						}),
+						/* @__PURE__ */ jsxs("output", {
+							className: "text-xs text-doom-dim",
+							children: [Math.round(zoom * 100), "%"]
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							className: "min-h-11 min-w-11",
+							"aria-label": "Zoom in",
+							onClick: () => setZoom((value) => Math.min(8, value * 1.5)),
+							children: "+"
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							className: "min-h-11",
+							"aria-label": "Fit preview",
+							onClick: () => setZoom(1),
+							children: "Fit"
+						})
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					ref: imageScroll,
+					className: "min-h-0 flex-1 overflow-auto",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "relative w-fit max-w-full overflow-hidden",
+						style: {
+							zoom,
+							touchAction: "none"
+						},
+						"aria-label": activeTool === "comment" ? "Click to place an annotation point" : activeTool === "draw" ? "Draw a feedback location mark" : activeTool === "pan" ? "Drag to pan preview" : "Drag to mark an annotation region",
+						"data-testid": "style-system-author-annotation-overlay",
+						onPointerDown: (event) => {
+							if (pendingCandidate) return;
+							pointers.current.set(event.pointerId, {
+								x: event.clientX,
+								y: event.clientY
+							});
+							event.currentTarget.setPointerCapture(event.pointerId);
+							if (pointers.current.size === 2) {
+								setStroke([]);
+								setAnnotationStart(void 0);
+								const [a, b] = [...pointers.current.values()];
+								pinch.current = {
+									distance: Math.hypot(a.x - b.x, a.y - b.y),
+									zoom
+								};
+								return;
+							}
+							if (activeTool === "pan") {
+								const container = imageScroll.current;
+								if (container) pan.current = {
+									x: event.clientX,
+									y: event.clientY,
+									left: container.scrollLeft,
+									top: container.scrollTop
+								};
+								return;
+							}
+							if (activeTool !== "mark" && activeTool !== "comment" && activeTool !== "draw") return;
+							setGesture(event.pointerId);
+							if (activeTool === "draw") setStroke([point(event)]);
+							const start = point(event);
+							setAnnotationStart(start);
+							setAnnotationRect(activeTool === "mark" ? {
+								...start,
+								width: 0,
+								height: 0
+							} : void 0);
+						},
+						onPointerMove: (event) => {
+							if (pointers.current.has(event.pointerId)) pointers.current.set(event.pointerId, {
+								x: event.clientX,
+								y: event.clientY
+							});
+							if (pinch.current !== void 0 && pointers.current.size >= 2) {
+								const [a, b] = [...pointers.current.values()];
+								if (pinch.current.distance > 0) setZoom(Math.max(1, Math.min(8, pinch.current.zoom * Math.hypot(a.x - b.x, a.y - b.y) / pinch.current.distance)));
+								return;
+							}
+							if (pan.current !== void 0 && activeTool === "pan") {
+								const container = imageScroll.current;
+								if (container) {
+									container.scrollLeft = pan.current.left + pan.current.x - event.clientX;
+									container.scrollTop = pan.current.top + pan.current.y - event.clientY;
+								}
+								return;
+							}
+							if (gesture !== event.pointerId) return;
+							if (activeTool === "mark") updateAnnotation(event);
+							if (activeTool === "draw") setStroke((points) => points.length >= 128 ? points : [...points, point(event)]);
+						},
+						onPointerUp: (event) => {
+							pointers.current.delete(event.pointerId);
+							if (pinch.current !== void 0 || pan.current !== void 0) {
+								if (pointers.current.size < 2) pinch.current = void 0;
+								pan.current = void 0;
+								return;
+							}
+							const start = annotationStart;
+							if (start === void 0 || gesture !== event.pointerId) return;
+							if (activeTool === "draw") {
+								const points = stroke.length >= 128 ? stroke : [...stroke, point(event)];
+								setStroke([]);
+								setAnnotationStart(void 0);
+								if (points.length < 2 || !points.some((item) => item.x !== points[0]?.x || item.y !== points[0]?.y)) return;
+								const x = Math.min(...points.map((item) => item.x));
+								const y = Math.min(...points.map((item) => item.y));
+								const rect = {
+									x: Math.min(x, .999),
+									y: Math.min(y, .999),
+									width: Math.max(.001, Math.max(...points.map((item) => item.x)) - x),
+									height: Math.max(.001, Math.max(...points.map((item) => item.y)) - y)
+								};
+								authorCandidate(points[0], rect, points);
+								return;
+							}
+							const end = point(event);
+							setAnnotationStart(void 0);
+							const location = previewAnnotationLocation(activeTool === "comment" ? "comment" : "mark", start, end);
+							if (location === null) return;
+							setAnnotationRect(location.mode === "region" ? location.rect : void 0);
+							authorCandidate(location.point, location.mode === "region" ? location.rect : void 0);
+						},
+						onPointerCancel: () => {
+							setAnnotationStart(void 0);
+							setAnnotationRect(void 0);
+							setStroke([]);
+							pointers.current.clear();
+							pinch.current = void 0;
+							pan.current = void 0;
+						},
+						children: [
+							/* @__PURE__ */ jsx("img", {
+								className: "block max-h-full max-w-full select-none",
+								src: `data:${annotationImage.mimeType};base64,${annotationImage.data}`,
+								alt: "Frozen source-backed story render for Author annotation",
+								draggable: false
+							}),
+							displayedAnnotations.map((annotation) => annotation.stroke !== void 0 ? /* @__PURE__ */ jsxs("div", {
+								"data-author-stroke": annotation.ordinal,
+								className: "pointer-events-none absolute inset-0",
+								children: [/* @__PURE__ */ jsx("svg", {
+									"aria-hidden": "true",
+									className: "absolute inset-0 h-full w-full text-doom-yellow",
+									viewBox: "0 0 1000 1000",
+									preserveAspectRatio: "none",
+									children: /* @__PURE__ */ jsx("polyline", {
+										points: annotation.stroke.map((point) => `${String(point.x * 1e3)},${String(point.y * 1e3)}`).join(" "),
+										fill: "none",
+										stroke: "currentColor",
+										strokeWidth: "5",
+										strokeLinecap: "round",
+										strokeLinejoin: "round"
+									})
+								}), /* @__PURE__ */ jsx("span", {
+									className: "absolute flex h-5 min-w-5 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-doom-yellow px-1 text-2xs font-bold text-doom-deep",
+									style: {
+										left: `${String(annotation.stroke[0].x * 100)}%`,
+										top: `${String(annotation.stroke[0].y * 100)}%`
+									},
+									children: annotation.ordinal
+								})]
+							}, annotation.ordinal) : annotation.mode === "point" || annotation.rect === void 0 ? /* @__PURE__ */ jsx("span", {
+								"data-author-point": annotation.ordinal,
+								className: "pointer-events-none absolute z-10 flex h-5 min-w-5 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border-2 border-doom-deep bg-doom-yellow px-1 text-2xs font-bold text-doom-deep",
+								style: {
+									left: `${String(annotation.point.x * 100)}%`,
+									top: `${String(annotation.point.y * 100)}%`
+								},
+								children: annotation.ordinal
+							}, annotation.ordinal) : /* @__PURE__ */ jsx("div", {
+								"data-author-region": annotation.ordinal,
+								className: "pointer-events-none absolute border border-doom-yellow bg-doom-yellow/10",
+								style: {
+									left: `${String(annotation.rect.x * 100)}%`,
+									top: `${String(annotation.rect.y * 100)}%`,
+									width: `${String(annotation.rect.width * 100)}%`,
+									height: `${String(annotation.rect.height * 100)}%`
+								},
+								children: /* @__PURE__ */ jsx("span", {
+									className: "bg-doom-yellow text-doom-deep",
+									children: annotation.ordinal
+								})
+							}, annotation.ordinal)),
+							stroke.length < 2 ? null : /* @__PURE__ */ jsx("svg", {
+								"aria-hidden": "true",
+								"data-testid": "style-system-author-stroke-selection",
+								className: "pointer-events-none absolute inset-0 h-full w-full text-doom-red",
+								viewBox: "0 0 1000 1000",
+								preserveAspectRatio: "none",
+								children: /* @__PURE__ */ jsx("polyline", {
+									points: stroke.map((point) => `${String(point.x * 1e3)},${String(point.y * 1e3)}`).join(" "),
+									fill: "none",
+									stroke: "currentColor",
+									strokeWidth: "5",
+									strokeLinecap: "round",
+									strokeLinejoin: "round"
+								})
+							}),
+							annotationRect === void 0 ? null : /* @__PURE__ */ jsx("div", {
+								className: "pointer-events-none absolute border-2 border-red-500 bg-red-500/10",
+								style: {
+									left: `${String(annotationRect.x * 100)}%`,
+									top: `${String(annotationRect.y * 100)}%`,
+									width: `${String(annotationRect.width * 100)}%`,
+									height: `${String(annotationRect.height * 100)}%`
+								}
+							})
+						]
+					})
+				})]
+			}) : /* @__PURE__ */ jsx("iframe", {
+				title: `${preview.storyExport} story preview`,
+				sandbox: "allow-scripts",
+				referrerPolicy: "no-referrer",
+				srcDoc: isolatedPreviewHtml(preview.html),
+				className: "min-h-0 flex-1 rounded border border-doom-border bg-white"
+			}, preview.handle),
+			annotationImage === void 0 || onAnnotationCandidate !== void 0 ? null : /* @__PURE__ */ jsxs("div", {
+				className: "grid gap-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "relative max-h-80 w-fit max-w-full touch-none overflow-hidden rounded border border-doom-border",
+					"aria-label": "Drag to mark an annotation region",
+					onPointerDown: (event) => {
+						event.currentTarget.setPointerCapture(event.pointerId);
+						const start = point(event);
+						setAnnotationStart(start);
+						setAnnotationRect({
+							...start,
+							width: 0,
+							height: 0
+						});
+					},
+					onPointerMove: updateAnnotation,
+					onPointerUp: (event) => {
+						updateAnnotation(event);
+						setAnnotationStart(void 0);
+					},
+					children: [/* @__PURE__ */ jsx("img", {
+						className: "block max-h-80 max-w-full select-none",
+						src: `data:${annotationImage.mimeType};base64,${annotationImage.data}`,
+						alt: "Fresh source-backed story render for annotation",
+						draggable: false
+					}), annotationRect === void 0 ? null : /* @__PURE__ */ jsx("div", {
+						className: "pointer-events-none absolute border-2 border-red-500 bg-red-500/10",
+						style: {
+							left: `${String(annotationRect.x * 100)}%`,
+							top: `${String(annotationRect.y * 100)}%`,
+							width: `${String(annotationRect.width * 100)}%`,
+							height: `${String(annotationRect.height * 100)}%`
+						}
+					})]
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-xs text-doom-faint",
+					children: "This image is rebuilt from source and does not preserve transient iframe interactions."
+				})]
+			}),
+			preview === void 0 || onAnnotationCandidate !== void 0 ? null : /* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ jsxs("label", {
+					className: "grid min-w-0 flex-1 gap-1 text-xs text-doom-dim",
+					children: ["AI design feedback", /* @__PURE__ */ jsx("textarea", {
+						className: "min-h-20 rounded border border-doom-border bg-doom-bg px-2 py-1 text-doom-text",
+						value: feedback,
+						onChange: (event) => setFeedback(event.target.value)
+					})]
+				}), /* @__PURE__ */ jsx(Button, {
+					className: "self-end",
+					variant: "outline",
+					disabled: working || submitCapture === void 0 || feedback.trim() === "" || annotationImage === void 0,
+					onClick: () => {
+						if (submitCapture === void 0 || annotationImage === void 0) return;
+						const location = annotationRect === void 0 ? "Whole preview" : `Region: x=${annotationRect.x.toFixed(3)}, y=${annotationRect.y.toFixed(3)}, width=${annotationRect.width.toFixed(3)}, height=${annotationRect.height.toFixed(3)}`;
+						const generation = generationRef.current;
+						submitCapture({
+							...annotationImage,
+							context: {
+								kind: "author-capture",
+								source: "style-system",
+								id: crypto.randomUUID(),
+								label: `${annotationImage.storyPath}#${annotationImage.storyExport}`,
+								content: [
+									"Edit the underlying story or component source, never the generated preview HTML.",
+									`Project: ${builtRequest?.appPath ?? appPath}`,
+									`Story: ${annotationImage.storyPath}#${annotationImage.storyExport}`,
+									`Story source sha256: ${annotationImage.sourceSha256}`,
+									`Source-backed image revision: ${annotationImage.sourceSha256}`,
+									location,
+									`Feedback: ${feedback.trim()}`,
+									"After editing, rebuild this preview before treating it as visually verified."
+								].join("\n")
+							}
+						}).then(() => {
+							if (generationRef.current !== generation) return;
+							setStatus("Feedback and the frozen source-backed annotation image were submitted to the agent.");
+							setFeedback("");
+						}).catch((reason) => {
+							if (generationRef.current === generation) setStatus(errorText(reason));
+						});
+					},
+					children: "Send to AI"
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/extensions/workspaces/sessions/(frontend)/_components/StoryPreviewLauncher.tsx
+function sourceKey(path) {
+	let hash = 2166136261;
+	for (const character of path) hash = Math.imul(hash ^ character.codePointAt(0), 16777619);
+	return (hash >>> 0).toString(36);
+}
+function storyPreviewTab(seed) {
+	const sourcePath = seed?.source?.path;
+	return {
+		id: sourcePath === void 0 ? "style-system-story-preview" : `style-system-story-preview-${sourceKey(sourcePath)}`,
+		label: "Story preview",
+		panel: (props) => /* @__PURE__ */ jsx(StoryPreviewPanel, {
+			...props,
+			seed
+		}),
+		retainComposer: true
+	};
+}
+//#endregion
+//#region src/extensions/workspaces/sessions/(frontend)/fill/StyleSystem.author.preview-action.web.tsx
+var StyleSystem_author_preview_action_web_default = defineFill({
+	slot: "author.preview-action",
+	id: "style-system",
+	data: {
+		version: 1,
+		label: "Preview",
+		detail: "Build, inspect, refresh, and send source-targeted visual feedback.",
+		supportsSource: (source) => source.kind === "story-preview",
+		embeddedPanel: StoryPreviewPanel,
+		createTab: ({ source }) => storyPreviewTab(source === void 0 ? void 0 : { source })
+	}
+});
+//#endregion
+//#region generated/web.ts
+const via = (identity, value) => value === void 0 ? void 0 : {
+	...identity,
+	...value
+};
+const webPlugin = defineWebPlugin({
+	id: "style-system",
+	session: { get fills() {
+		return [via({
+			slot: "author.preview-action",
+			id: "style-system"
+		}, StyleSystem_author_preview_action_web_default)];
+	} }
+});
+//#endregion
+export { webPlugin };
+
+//# sourceMappingURL=web.mjs.map