@daydreamui/figma 0.0.0-stage → 0.3.0

package/dist/index.js

@@ -0,0 +1,1545 @@
+import { className, createComponent, delegateEvents, effect, insert, memo, readShallow, ref, setAttribute, style, template } from "@solidjs/web";
+import { For, Show, createMemo, createSignal, onCleanup, onSettled, untrack } from "solid-js";
+function chosenAgent(conversationAgent, listed) {
+	const list = listed?.agents ?? [];
+	const pick = (id) => id == null ? void 0 : list.find((agent) => agent.id === id);
+	return pick(conversationAgent) ?? pick(listed?.project) ?? pick(listed?.last) ?? list.find((agent) => agent.installed) ?? null;
+}
+function isSwitch(agentId, conversationAgent, listed) {
+	const current = conversationAgent ?? listed?.project ?? null;
+	return current !== null && current !== agentId;
+}
+var said = (error) => error instanceof Error ? error.message : String(error);
+var isBusy = (status) => status?.phase === "ready" && status.busy;
+function createAgentSession(dd, projection) {
+	const [state, setState] = createSignal(null);
+	const [agents, setAgents] = createSignal(null);
+	const [available, setAvailable] = createSignal(null);
+	const [problem, setProblemSignal] = createSignal(null);
+	let stateNow = null;
+	let agentsNow = null;
+	let availableNow = null;
+	let problemNow = null;
+	let heard = 0;
+	const listeners = [];
+	const setProblem = (why) => {
+		problemNow = why;
+		setProblemSignal(why);
+	};
+	const ask = async (work) => {
+		setProblem(null);
+		try {
+			return {
+				ok: true,
+				value: await work()
+			};
+		} catch (error) {
+			const why = said(error);
+			setProblem(why);
+			return {
+				ok: false,
+				why
+			};
+		}
+	};
+	const list = async () => {
+		const answer = await ask(() => dd.agent.agents());
+		if (!answer.ok) return false;
+		agentsNow = answer.value;
+		setAgents(answer.value);
+		return true;
+	};
+	const start = async (agentId, options = {}, retry = false) => {
+		const answer = await ask(() => dd.agent.start(agentId, options));
+		if (retry || answer.ok && answer.value.phase === "failed" && answer.value.install !== null) await list();
+		return answer;
+	};
+	let read;
+	const firstRead = new Promise((resolve) => {
+		read = resolve;
+	});
+	const changed = (change) => {
+		const before = stateNow;
+		const next = change.type === "thread" ? projection.fromThread(change.thread) : before === null ? null : projection.applyChange(before, change);
+		if (next === null) return;
+		stateNow = next;
+		setState(() => next);
+		heard++;
+		read();
+		for (const listener of listeners) listener(change, next, before);
+	};
+	let following = false;
+	const follow = async (options = {}) => {
+		const runs = await dd.agent.available().catch(() => false);
+		availableNow = runs;
+		setAvailable(runs);
+		if (!runs) return false;
+		if (!following) {
+			if (options.beforeFollow !== void 0 && !await options.beforeFollow()) return false;
+			following = true;
+			dd.agent.follow(changed);
+		}
+		if (options.waitForThread !== false) await firstRead;
+		return true;
+	};
+	const statusNow = () => stateNow?.status;
+	return {
+		state,
+		agents,
+		available,
+		problem,
+		ask,
+		list,
+		start,
+		follow,
+		setProblem,
+		chosen: () => chosenAgent(state()?.status.agentId, agents()),
+		now: {
+			state: () => stateNow,
+			agents: () => agentsNow,
+			status: statusNow,
+			available: () => availableNow,
+			problem: () => problemNow,
+			heard: () => heard,
+			chosen: () => chosenAgent(statusNow()?.agentId, agentsNow)
+		},
+		onChange(listener) {
+			listeners.push(listener);
+		}
+	};
+}
+function sameMessage(before, next) {
+	return before === null || next === null || before === next;
+}
+function createRoundFold(applyUpdate) {
+	const lastUserAt = (entries) => {
+		for (let at = entries.length - 1; at >= 0; at--) if (entries[at].kind === "user") return at;
+		return 0;
+	};
+	return {
+		fromThread(thread) {
+			const entries = thread.updates.reduce(applyUpdate, []);
+			return {
+				status: thread.status,
+				entries,
+				permissions: thread.permissions,
+				turnStart: isBusy(thread.status) ? lastUserAt(entries) : null
+			};
+		},
+		applyChange(state, change) {
+			switch (change.type) {
+				case "status": return {
+					...state,
+					status: change.status,
+					turnStart: !isBusy(change.status) ? null : isBusy(state.status) ? state.turnStart : state.entries.length
+				};
+				case "update": return {
+					...state,
+					entries: applyUpdate(state.entries, change.update)
+				};
+				case "permission": return {
+					...state,
+					permissions: [...state.permissions, change.ask]
+				};
+				case "resolved": return {
+					...state,
+					permissions: state.permissions.filter((ask) => ask.requestId !== change.requestId)
+				};
+				case "cleared": return {
+					...state,
+					entries: [],
+					permissions: [],
+					turnStart: isBusy(state.status) ? 0 : null
+				};
+			}
+		}
+	};
+}
+var NODE_ID = /^\d+[:-]\d+$/;
+function nodeIdFromUrl(urlOrId) {
+	const given = urlOrId.trim();
+	if (NODE_ID.test(given)) return given.replace("-", ":");
+	let url;
+	try {
+		url = new URL(given);
+	} catch {
+		return null;
+	}
+	const id = url.searchParams.get("node-id");
+	return id !== null && NODE_ID.test(id) ? id.replace("-", ":") : null;
+}
+var NOT_REACHABLE = "Figma is not reachable: open Figma desktop and enable the Dev Mode MCP server in its preferences";
+function createProbe({ ask, answer, target, debounceMs = 400 }) {
+	let running = null;
+	let again = false;
+	let timer;
+	let gone = false;
+	const run = async () => {
+		let reachable;
+		try {
+			reachable = await ask() === true;
+		} catch {
+			reachable = false;
+		}
+		if (!gone) answer(reachable);
+	};
+	const probe = (soon = false) => {
+		if (gone) return;
+		if (soon) {
+			clearTimeout(timer);
+			timer = setTimeout(() => probe(), debounceMs);
+			return;
+		}
+		if (running !== null) {
+			again = true;
+			return;
+		}
+		running = run().finally(() => {
+			running = null;
+			if (again) {
+				again = false;
+				probe();
+			}
+		});
+	};
+	const focused = () => probe(true);
+	target?.addEventListener("focus", focused);
+	return {
+		probe,
+		async settled() {
+			while (running !== null) await running;
+		},
+		dispose() {
+			gone = true;
+			clearTimeout(timer);
+			target?.removeEventListener("focus", focused);
+		}
+	};
+}
+var REFERENCE_KIND = "daydream.figma.reference";
+var LEGACY_REFERENCE_KIND = "mrbavio.figma.reference";
+var MAX_REFERENCE_WIDTH = 1200;
+var tooManySelected = (count) => `${count} frames are selected in Figma; a gesture takes at most 12 at once. Select fewer.`;
+function askable(frames) {
+	const kept = frames.filter((frame) => frame.id !== null && nodeIdFromUrl(frame.id) !== null);
+	return {
+		frames: kept,
+		leftOut: frames.length - kept.length
+	};
+}
+function leftOutSentence(leftOut) {
+	if (leftOut === 0) return null;
+	return leftOut === 1 ? "1 layer inside an instance was left out; select its frame." : `${leftOut} layers inside instances were left out; select their frames.`;
+}
+var messageOf = (error) => error instanceof Error ? error.message : String(error);
+var isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var nullOrString = (value) => value === null || typeof value === "string";
+var nullOrNumber = (value) => value === null || typeof value === "number" && Number.isFinite(value);
+function isScreenshotAnswer(value) {
+	return isRecord(value) && typeof value["mimeType"] === "string" && typeof value["base64"] === "string" && nullOrString(value["name"]) && nullOrString(value["nodeId"]);
+}
+function isFrameAnswer(value) {
+	return isRecord(value) && nullOrString(value["id"]) && nullOrString(value["name"]) && nullOrNumber(value["width"]) && nullOrNumber(value["height"]);
+}
+function isSelectionAnswer(value) {
+	if (!isRecord(value)) return false;
+	switch (value["kind"]) {
+		case "frames": return Array.isArray(value["frames"]) && value["frames"].every((frame) => isFrameAnswer(frame) && frame.id !== null);
+		case "none":
+		case "late": return true;
+		case "unreachable": return typeof value["said"] === "string";
+		default: return false;
+	}
+}
+var PROJECT_FILE = /^assets\/(?:[A-Za-z0-9_-]{1,80}\/){0,7}[A-Za-z0-9_-]{1,80}\.[A-Za-z0-9]{1,8}$/;
+var FIELDS = [
+	"src",
+	"name",
+	"nodeId",
+	"link"
+];
+function referencePayloadProblem(raw, where) {
+	if (!isRecord(raw)) return `${where} is not a Figma image payload`;
+	if (Object.keys(raw).find((key) => !FIELDS.includes(key)) !== void 0) return `${where} may only contain src, name and nodeId`;
+	if (typeof raw["src"] !== "string" || !PROJECT_FILE.test(raw["src"])) return `${where}.src must be a file of the project's own, assets/<file>`;
+	if (typeof raw["name"] !== "string" || raw["name"].trim() === "") return `${where}.name must be a non-empty string`;
+	if (raw["nodeId"] !== null && (typeof raw["nodeId"] !== "string" || raw["nodeId"] === "")) return `${where}.nodeId must be a non-empty string or null`;
+	if ("link" in raw && !nullOrString(raw["link"])) return `${where}.link, kept by an earlier build, must be a string or null`;
+	return null;
+}
+function describeReference(payload) {
+	return `Figma image · ${payload.name} · ${payload.nodeId ?? "no node id"}`;
+}
+var PROMPT_PREFIX = `Figma: transcribe `;
+var named = (frame) => frame.name === null ? "the frame" : JSON.stringify(frame.name);
+function pagePrompt(frames) {
+	const several = frames.length > 1;
+	const one = frames[0] ?? {
+		nodeId: "",
+		name: null,
+		width: null
+	};
+	const node = JSON.stringify(one.nodeId);
+	const width = one.width === null ? "" : ` The frame is ${Math.round(one.width)} px wide; make the page that wide.`;
+	return [
+		several ? `${PROMPT_PREFIX}${frames.length} frames as pages of this project.` : `${PROMPT_PREFIX}the frame${one.name === null ? "" : ` ${named(one)}`} (node ${node}) as a page of this project.`,
+		...several ? [`The frames, selected in Figma: ${frames.map((frame) => `${named(frame)} (node ${JSON.stringify(frame.nodeId)})`).join(", ")}.`] : [],
+		several ? `Figma desktop is open on this machine and Daydream's figma_* tools read it. For each frame, with its node: call figma_metadata for the frame's tree (ids, names, boxes; the root's width is the page's), figma_design_context for Figma's rendering of it as code — React and Tailwind, to transcribe into plain HTML and CSS, never to ship as it is — and figma_screenshot for how it looks (the PNG is written under .daydream/figma/). The images its code names are served at http://localhost:3845/assets/… only while Figma runs: copy each one a page uses into the project's assets/ and link it from there.` : `Figma desktop is open on this machine and Daydream's figma_* tools read it. Call figma_metadata with node ${node} for the frame's tree (ids, names, boxes), figma_design_context with node ${node} for Figma's rendering of it as code — React and Tailwind, to transcribe into plain HTML and CSS, never to ship as it is — and figma_screenshot with node ${node} for how it looks (the PNG is written under .daydream/figma/). The images its code names are served at http://localhost:3845/assets/… only while Figma runs: copy each one the page uses into the project's assets/ and link it from there.`,
+		`Build ${several ? "one page per frame" : "the page"} with the dream-author workflow: a draft whose HTML and CSS are the project's own — real elements, no framework, no utility classes — finalized as a new page titled ${several ? "after its frame, as wide as the frame" : one.name === null ? "after the frame" : named(one)}.${width} Match ${several ? "each" : "the"} frame's layout, type, colours and spacing; what the design leaves out stays out. Write the CSS as a person writes it — one rule per block, one declaration per line, named classes — and lay the page out in flow with flex and grid, as Figma's auto layout maps; position absolutely only what the design arranges freely, never a whole frame of boxes at coordinates.`,
+		several ? `Before you finish, open each screenshot figma_screenshot wrote (the path it answered, under .daydream/figma/) with your image-reading tool and compare that page as rendered against it — layout, type, colours, spacing — and fix what differs; then say in one line per page what still differs, or that nothing does. Do not end the turn without having looked at every one.` : `Before you finish, open the screenshot figma_screenshot wrote (the path it answered, under .daydream/figma/) with your image-reading tool and compare the page as rendered against it — layout, type, colours, spacing — and fix what differs; then say in one line what still differs, or that nothing does. Do not end the turn without having looked at it.`
+	].join("\n");
+}
+var isPagePrompt = (text) => text.startsWith(PROMPT_PREFIX);
+function textOf(block) {
+	return block.type === "text" ? block.text : "";
+}
+var HTML = /\.html?$/i;
+function pagesOf(call) {
+	const paths = [...(call.content ?? []).flatMap((c) => c.type === "diff" ? [c.path] : []), ...(call.locations ?? []).map((l) => l.path)];
+	return paths.filter((path, at) => HTML.test(path) && paths.indexOf(path) === at);
+}
+function replaceLast(entries, entry) {
+	return [...entries.slice(0, -1), entry];
+}
+function upsertStep(entries, id, made) {
+	const at = entries.findIndex((e) => e.kind === "tool" && e.step.id === id);
+	if (at === -1) return [...entries, {
+		kind: "tool",
+		step: made(null)
+	}];
+	const next = [...entries];
+	next[at] = {
+		kind: "tool",
+		step: made(entries[at].step)
+	};
+	return next;
+}
+function applyUpdate(entries, update) {
+	const last = entries.at(-1);
+	switch (update.sessionUpdate) {
+		case "agent_message_chunk": {
+			const text = textOf(update.content);
+			const id = update.messageId ?? null;
+			return last?.kind === "agent" && sameMessage(last.id, id) ? replaceLast(entries, {
+				kind: "agent",
+				text: last.text + text,
+				id: last.id ?? id
+			}) : [...entries, {
+				kind: "agent",
+				text,
+				id
+			}];
+		}
+		case "agent_thought_chunk": return last?.kind === "thought" ? entries : [...entries, { kind: "thought" }];
+		case "user_message_chunk":
+			if (isPagePrompt(textOf(update.content))) return [...entries, {
+				kind: "user",
+				prompt: true
+			}];
+			return last?.kind === "user" && !last.prompt ? entries : [...entries, {
+				kind: "user",
+				prompt: false
+			}];
+		case "tool_call": return upsertStep(entries, update.toolCallId, () => ({
+			id: update.toolCallId,
+			title: update.title,
+			status: update.status ?? null,
+			pages: pagesOf(update)
+		}));
+		case "tool_call_update": return upsertStep(entries, update.toolCallId, (before) => {
+			const step = before ?? {
+				id: update.toolCallId,
+				title: "Tool call",
+				status: null,
+				pages: []
+			};
+			const pages = pagesOf(update);
+			return {
+				...step,
+				...update.title == null ? {} : { title: update.title },
+				...update.status == null ? {} : { status: update.status },
+				...pages.length === 0 ? {} : { pages: [...step.pages, ...pages.filter((p) => !step.pages.includes(p))] }
+			};
+		});
+		default: return entries;
+	}
+}
+var { fromThread, applyChange } = createRoundFold(applyUpdate);
+function lastRound(entries) {
+	let round = null;
+	for (const [at, entry] of entries.entries()) if (entry.kind === "user") {
+		if (round !== null) round.closed = true;
+		round = entry.prompt ? {
+			at,
+			steps: [],
+			message: "",
+			pages: [],
+			closed: false
+		} : round;
+	} else if (round !== null && !round.closed && entry.kind === "agent") round.message = entry.text;
+	else if (round !== null && !round.closed && entry.kind === "tool") {
+		round.steps.push(entry.step);
+		for (const page of entry.step.pages) if (!round.pages.includes(page)) round.pages.push(page);
+	}
+	return round;
+}
+function isRunning(state, round) {
+	return !round.closed && state.turnStart !== null && isBusy(state.status) && round.at >= state.turnStart;
+}
+function lastParagraph(text) {
+	return (text.split(/\n[ \t]*\n/).map((p) => p.trim()).filter((p) => p !== "").at(-1) ?? "").replace(/`([^`\n]*)`/g, "$1");
+}
+function stepTitle(title) {
+	return title.replace(/^mcp__.+?__/, "");
+}
+var sessionOf = (status) => status?.phase === "ready" ? status.sessionId : null;
+function createConversation(dd) {
+	const session = createAgentSession(dd, {
+		fromThread,
+		applyChange
+	});
+	const { available, state: followed, agents, problem } = session;
+	const [chosenId, setChosenId] = createSignal(null);
+	const [cancelledAt, setCancelledAt] = createSignal(null);
+	const status = () => followed()?.status;
+	const round = createMemo(() => {
+		const state = followed();
+		return state === null ? null : lastRound(state.entries);
+	});
+	const running = () => {
+		const state = followed();
+		const r = round();
+		return state !== null && r !== null && isRunning(state, r);
+	};
+	session.onChange((change) => {
+		if (change.type === "cleared") setCancelledAt(null);
+	});
+	const ask = async (work) => (await session.ask(work)).ok;
+	let following = null;
+	let listing = null;
+	const follow = async () => {
+		if (!await (following ??= session.follow({ waitForThread: false }))) return;
+		if (session.now.agents() === null) {
+			listing ??= session.list().then((ok) => {
+				if (!ok) {
+					listing = null;
+					session.setProblem(null);
+				}
+				return ok;
+			});
+			await listing;
+		}
+	};
+	return {
+		available,
+		followed,
+		status,
+		agents,
+		chosen: () => {
+			const listed = agents();
+			const picked = chosenId();
+			return (picked === null ? void 0 : listed?.agents.find((agent) => agent.id === picked)) ?? chosenAgent(status()?.agentId, listed);
+		},
+		chosenId,
+		round,
+		running,
+		asks: () => running() ? followed()?.permissions ?? [] : [],
+		agentName: () => {
+			const id = followed()?.status.agentId ?? null;
+			return agents()?.agents.find((agent) => agent.id === id)?.name ?? "the agent";
+		},
+		cancelled: () => {
+			const cancelled = cancelledAt();
+			return cancelled !== null && round()?.at === cancelled.at && sessionOf(status()) === cancelled.session;
+		},
+		problem,
+		follow,
+		choose: setChosenId,
+		answer: async (requestId, optionId) => {
+			await ask(() => dd.agent.answer(requestId, optionId));
+		},
+		cancel: async () => {
+			const at = round()?.at ?? null;
+			const session = sessionOf(status());
+			if (await ask(() => dd.agent.cancel())) setCancelledAt(at === null ? null : {
+				at,
+				session
+			});
+		},
+		setMode: async (modeId) => {
+			await ask(() => dd.agent.setMode(modeId));
+		},
+		setConfig: async (configId, value) => {
+			await ask(() => dd.agent.setConfig(configId, value));
+		}
+	};
+}
+var NO_AGENT_HOST = "This Daydream runs no agent; an agent of your own can read Figma through the figma_* tools.";
+var NO_AGENT_INSTALLED = "No agent is installed on this machine; the agent panel says how to install one.";
+var NO_FRAME = "Select a frame in Figma first.";
+var TOO_SLOW = "Figma took too long to answer; try again.";
+var errorLine = (sentences) => {
+	const said = sentences.filter((s) => s !== null);
+	return said.length === 0 ? null : said.join(" ");
+};
+var stillHere = (dd) => {
+	const version = dd.loadVersion();
+	return () => dd.loadVersion() === version;
+};
+function imageFile(answer) {
+	const binary = atob(answer.base64);
+	const bytes = new Uint8Array(binary.length);
+	for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+	const extension = answer.mimeType === "image/png" ? "png" : answer.mimeType.split("/")[1] ?? "png";
+	const stem = answer.nodeId === null ? "selection" : answer.nodeId.replace(/[^A-Za-z0-9_-]+/g, "-");
+	return new File([bytes], `figma-${stem}.${extension}`, { type: answer.mimeType });
+}
+async function intrinsicWidth(file) {
+	try {
+		const bitmap = await createImageBitmap(file);
+		const width = bitmap.width;
+		bitmap.close();
+		return width;
+	} catch {
+		return;
+	}
+}
+async function selectedFrames(dd) {
+	const answer = await dd.hostPart.call("figma-selection");
+	if (!isSelectionAnswer(answer)) throw new Error("the host part answered no selection");
+	switch (answer.kind) {
+		case "none": return {
+			frames: [],
+			leftOut: null
+		};
+		case "unreachable": throw new Error(answer.said);
+		case "late": throw new Error(TOO_SLOW);
+		case "frames": {
+			const { frames, leftOut } = askable(answer.frames);
+			if (frames.length > 12) throw new Error(tooManySelected(frames.length));
+			const said = leftOutSentence(leftOut);
+			if (frames.length === 0 && said !== null) throw new Error(`${NO_FRAME} ${said}`);
+			return {
+				frames,
+				leftOut: said
+			};
+		}
+	}
+}
+async function vendored(dd, frame, here) {
+	const answer = await dd.hostPart.call("figma-screenshot", { node: frame?.id ?? void 0 });
+	if (!isScreenshotAnswer(answer)) throw new Error("the host part answered no screenshot");
+	if (!here()) return null;
+	const file = imageFile({
+		...answer,
+		nodeId: frame?.id ?? answer.nodeId
+	});
+	const [{ pageSrc }, width] = await Promise.all([dd.vendorFile(file), intrinsicWidth(file)]);
+	return {
+		pageSrc,
+		width,
+		name: frame?.name ?? answer.name ?? "Figma image",
+		nodeId: frame?.id ?? answer.nodeId
+	};
+}
+function referenceItem(dd, shot, position) {
+	const payload = {
+		src: shot.pageSrc,
+		name: shot.name,
+		nodeId: shot.nodeId
+	};
+	return {
+		id: dd.core.generateId(),
+		kind: REFERENCE_KIND,
+		position,
+		...shot.width !== void 0 && shot.width > 1200 ? { frame: { width: MAX_REFERENCE_WIDTH } } : {},
+		payload
+	};
+}
+var landedWidth = (shot) => shot.width === void 0 ? MAX_REFERENCE_WIDTH : Math.min(shot.width, MAX_REFERENCE_WIDTH);
+function land(dd, items) {
+	dd.mutateItems((draft) => {
+		draft.push(...items);
+	});
+	const ids = items.map((item) => item.id);
+	dd.selectItems(ids);
+	dd.canvas.reveal(ids);
+}
+async function inBatches(items, width, work) {
+	const answers = new Array(items.length);
+	let next = 0;
+	const worker = async () => {
+		for (;;) {
+			const i = next++;
+			if (i >= items.length) return;
+			answers[i] = await work(items[i]);
+		}
+	};
+	await Promise.all(Array.from({ length: Math.min(width, items.length) }, worker));
+	return answers;
+}
+async function addReference(dd) {
+	const here = stillHere(dd);
+	const selected = await selectedFrames(dd);
+	if (!here()) return null;
+	if (selected.frames.length === 0) {
+		const shot = await vendored(dd, null, here);
+		if (shot === null || !here()) return null;
+		land(dd, [referenceItem(dd, shot, dd.core.freeSpaceAnchor(dd.items()))]);
+		return {
+			status: `Added ${shot.name} as an image.`,
+			error: null
+		};
+	}
+	const reads = await inBatches(selected.frames, 4, async (frame) => {
+		try {
+			return { shot: await vendored(dd, frame, here) };
+		} catch (error) {
+			return { error: messageOf(error) };
+		}
+	});
+	if (!here()) return null;
+	const shots = [];
+	const failures = [];
+	const reasons = new Set();
+	for (const [i, read] of reads.entries()) if ("error" in read) {
+		reasons.add(read.error);
+		failures.push(`${selected.frames[i].name ?? selected.frames[i].id} could not be read: ${read.error}`);
+	} else if (read.shot === null) return null;
+	else shots.push(read.shot);
+	if (shots.length === 0) throw new Error(reasons.size === 1 ? [...reasons][0] : failures.join(" "));
+	const anchor = dd.core.freeSpaceAnchor(dd.items());
+	let x = anchor.x;
+	land(dd, shots.map((shot) => {
+		const item = referenceItem(dd, shot, {
+			x,
+			y: anchor.y
+		});
+		x += landedWidth(shot) + 40;
+		return item;
+	}));
+	return {
+		status: shots.length === 1 ? `Added ${shots[0].name} as an image.` : `Added ${shots.length} images: ${shots.map((shot) => shot.name).join(", ")}.`,
+		error: errorLine([...failures, selected.leftOut])
+	};
+}
+var NO_CHOICE = {
+	agentId: null,
+	conversationAgent: null
+};
+async function widthOf(dd, frame) {
+	const answer = await dd.hostPart.call("figma-frame", { node: frame.id }).catch(() => null);
+	return isFrameAnswer(answer) ? answer.width : null;
+}
+async function addAsPage(dd, choice = NO_CHOICE) {
+	const here = stillHere(dd);
+	const selected = await selectedFrames(dd);
+	if (!here()) return null;
+	if (selected.frames.length === 0) throw new Error(NO_FRAME);
+	const [one] = selected.frames;
+	const width = selected.frames.length === 1 ? await widthOf(dd, one) : null;
+	if (!here()) return null;
+	const prompt = pagePrompt(selected.frames.map((frame) => ({
+		nodeId: frame.id,
+		name: frame.name,
+		width
+	})));
+	const named = selected.frames.length === 1 ? one.name ?? "the frame" : `${selected.frames.length} frames`;
+	if (!await dd.agent.available()) throw new Error(NO_AGENT_HOST);
+	const listed = await dd.agent.agents();
+	const agent = (choice.agentId === null ? void 0 : listed.agents.find((a) => a.id === choice.agentId)) ?? chosenAgent(choice.conversationAgent, listed);
+	if (agent === null) throw new Error(NO_AGENT_INSTALLED);
+	if (!here()) return null;
+	const status = await dd.agent.start(agent.id, isSwitch(agent.id, choice.conversationAgent, listed) ? { intent: "new" } : {});
+	if (status.phase === "failed" || status.phase === "sign-in") throw new Error(status.note ?? `${agent.name} did not start`);
+	if (!here()) return null;
+	await dd.agent.prompt([{
+		type: "text",
+		text: prompt
+	}]);
+	return {
+		status: selected.frames.length === 1 ? `Asked ${agent.name} to transcribe ${named} as a page.` : `Asked ${agent.name} to transcribe ${named} as pages.`,
+		error: selected.leftOut
+	};
+}
+var _tmpl$$3 = template(`<li> earlier`);
+var _tmpl$2$2 = template(`<ul><!><!>`);
+var _tmpl$3$1 = template(`<p>`);
+var _tmpl$4$1 = template(`<div><button type=button>Cancel`);
+var _tmpl$5$1 = template(`<div><p></p><!><!><!><!><!>`);
+var _tmpl$6$1 = template(`<li><span aria-hidden=true>`);
+var _tmpl$7$1 = template(`<div><p></p><div>`);
+var _tmpl$8$1 = template(`<button type=button>`);
+var DONE_ON_CANVAS = "Done, see the canvas";
+var CANCELLED = "Cancelled";
+var basename = (path) => path.split("/").pop() ?? path;
+var mark = (status) => status === "completed" ? "✓" : status === "failed" ? "✕" : "·";
+function statusLine(round, state) {
+	if (state.asking) return `${state.agent} needs an answer`;
+	if (state.running) return round.steps.length === 0 && round.message === "" ? `Asking ${state.agent}…` : `${state.agent} is working…`;
+	if (state.cancelled) return CANCELLED;
+	if (state.failure !== null) return state.failure;
+	return round.pages.length === 0 ? DONE_ON_CANVAS : `Done: ${round.pages.map(basename).join(", ")}`;
+}
+function RoundBlock(props) {
+	const { conversation, prefix: p } = untrack(() => ({ ...props }));
+	const failure = () => {
+		const status = conversation.followed()?.status;
+		if (status === void 0) return null;
+		if (status.phase === "failed") return status.note;
+		if (status.phase === "ready") return status.note;
+		return null;
+	};
+	const line = (round) => statusLine(round, {
+		running: conversation.running(),
+		asking: conversation.asks().length > 0,
+		cancelled: conversation.cancelled(),
+		agent: conversation.agentName(),
+		failure: round.closed ? null : failure()
+	});
+	const state = () => conversation.asks().length > 0 ? "asking" : conversation.running() ? "running" : "done";
+	return createComponent(Show, {
+		get when() {
+			return conversation.round();
+		},
+		children: (round) => {
+			const steps = () => round().steps.slice(-5);
+			const earlier = () => Math.max(0, round().steps.length - 5);
+			const word = () => lastParagraph(round().message);
+			var _el$ = _tmpl$5$1();
+			var _el$2 = _el$.firstChild;
+			var _el$8 = _el$2.nextSibling;
+			var _el$10 = _el$8.nextSibling;
+			var _el$11 = _el$10.nextSibling;
+			var _el$12 = _el$11.nextSibling;
+			var _el$15 = _el$12.nextSibling;
+			insert(_el$2, () => {
+				return line(round());
+			});
+			insert(_el$, createComponent(Show, {
+				get when() {
+					return steps().length > 0;
+				},
+				get children() {
+					var _el$3 = _tmpl$2$2();
+					var _el$6 = _el$3.firstChild;
+					var _el$7 = _el$6.nextSibling;
+					insert(_el$3, createComponent(Show, {
+						get when() {
+							return earlier() > 0;
+						},
+						get children() {
+							var _el$4 = _tmpl$$3();
+							var _el$5 = _el$4.firstChild;
+							insert(_el$4, earlier, _el$5);
+							effect(() => `${p}-earlier`, (_v$, _$p) => {
+								className(_el$4, _v$, _$p);
+							});
+							return _el$4;
+						}
+					}), _el$6);
+					insert(_el$3, createComponent(For, {
+						get each() {
+							return steps();
+						},
+						children: (step) => (() => {
+							var _el$16 = _tmpl$6$1();
+							var _el$17 = _el$16.firstChild;
+							insert(_el$17, () => {
+								return mark(step.status);
+							});
+							insert(_el$16, () => {
+								return stepTitle(step.title);
+							}, null);
+							effect(() => {
+								return {
+									e: step.status ?? "",
+									t: `${p}-mark`
+								};
+							}, ({ e, t }, _p$) => {
+								e !== _p$?.e && setAttribute(_el$16, "data-step-status", e);
+								className(_el$17, t, _p$?.t);
+							});
+							return _el$16;
+						})()
+					}), _el$7);
+					effect(() => `${p}-steps`, (_v$, _$p) => {
+						className(_el$3, _v$, _$p);
+					});
+					return _el$3;
+				}
+			}), _el$8);
+			insert(_el$, createComponent(Show, {
+				get when() {
+					return word() !== "";
+				},
+				get children() {
+					var _el$9 = _tmpl$3$1();
+					insert(_el$9, word);
+					effect(() => `${p}-word`, (_v$, _$p) => {
+						className(_el$9, _v$, _$p);
+					});
+					return _el$9;
+				}
+			}), _el$10);
+			insert(_el$, createComponent(For, {
+				get each() {
+					return conversation.asks();
+				},
+				children: (ask) => (() => {
+					var _el$18 = _tmpl$7$1();
+					var _el$19 = _el$18.firstChild;
+					var _el$20 = _el$19.nextSibling;
+					insert(_el$19, (() => {
+						var _c$ = memo(() => {
+							return ask.toolCall.title == null;
+						});
+						return () => {
+							return _c$() ? "The agent asks:" : `${stepTitle(ask.toolCall.title)}?`;
+						};
+					})());
+					insert(_el$20, createComponent(For, {
+						get each() {
+							return ask.options;
+						},
+						children: (option) => (() => {
+							var _el$21 = _tmpl$8$1();
+							_el$21._$$click = () => void conversation.answer(ask.requestId, option.optionId);
+							insert(_el$21, () => {
+								return option.name;
+							});
+							effect(() => {
+								return {
+									e: `${p}-button`,
+									t: option.kind
+								};
+							}, ({ e, t }, _p$) => {
+								className(_el$21, e, _p$?.e);
+								t !== _p$?.t && setAttribute(_el$21, "data-option-kind", t);
+							});
+							return _el$21;
+						})()
+					}));
+					effect(() => {
+						return {
+							e: `${p}-ask`,
+							t: `${p}-actions`
+						};
+					}, ({ e, t }, _p$) => {
+						className(_el$18, e, _p$?.e);
+						className(_el$20, t, _p$?.t);
+					});
+					return _el$18;
+				})()
+			}), _el$11);
+			insert(_el$, createComponent(Show, {
+				get when() {
+					return conversation.problem();
+				},
+				children: (problem) => (() => {
+					var _el$22 = _tmpl$3$1();
+					insert(_el$22, problem);
+					effect(() => `${p}-round-problem`, (_v$, _$p) => {
+						className(_el$22, _v$, _$p);
+					});
+					return _el$22;
+				})()
+			}), _el$12);
+			insert(_el$, createComponent(Show, {
+				get when() {
+					return conversation.running();
+				},
+				get children() {
+					var _el$13 = _tmpl$4$1();
+					var _el$14 = _el$13.firstChild;
+					_el$14._$$click = () => void conversation.cancel();
+					effect(() => {
+						return {
+							e: `${p}-actions`,
+							t: `${p}-button`
+						};
+					}, ({ e, t }, _p$) => {
+						className(_el$13, e, _p$?.e);
+						className(_el$14, t, _p$?.t);
+					});
+					return _el$13;
+				}
+			}), _el$15);
+			effect(() => {
+				return {
+					e: `${p}-round`,
+					t: state(),
+					a: `${p}-round-status`
+				};
+			}, ({ e, t, a }, _p$) => {
+				className(_el$, e, _p$?.e);
+				t !== _p$?.t && setAttribute(_el$, "data-round-state", t);
+				className(_el$2, a, _p$?.a);
+			});
+			return _el$;
+		}
+	});
+}
+delegateEvents(["click"]);
+[...new Set([
+	"bypassPermissions",
+	"dontAsk",
+	"yolo",
+	"full-access"
+])];
+var shownName = (name) => name.replace(/\s*\(recommended\)\s*$/i, "") || name;
+function choicesOf(option) {
+	return option.options.flatMap((entry) => "group" in entry ? entry.options : [entry]).map((choice) => ({
+		...choice,
+		name: shownName(choice.name)
+	}));
+}
+var STARTS_ON_PAGE = "starts on Add as page";
+function statusWord(status, agentId) {
+	if (status === void 0 || status.phase === "idle" || status.agentId !== agentId) return STARTS_ON_PAGE;
+	switch (status.phase) {
+		case "starting": return "starting";
+		case "ready": return status.busy ? "working" : "ready";
+		case "sign-in": return "needs a sign-in";
+		case "failed": return "stopped";
+	}
+}
+var _tmpl$$2 = template(`<select aria-label=Agent>`);
+var _tmpl$2$1 = template(`<span>`);
+var _tmpl$3 = template(`<div><span>Agent</span><span></span><!><!>`);
+var _tmpl$4 = template(`<option>`);
+var _tmpl$5 = template(`<span>Mode`);
+var _tmpl$6 = template(`<span><select aria-label=Mode>`);
+var _tmpl$7 = template(`<select>`);
+var _tmpl$8 = template(`<input type=checkbox>`);
+function Settings(props) {
+	const { conversation, prefix: p } = untrack(() => ({ ...props }));
+	const ready = () => {
+		const now = conversation.status();
+		return now?.phase === "ready" ? now : null;
+	};
+	const own = () => {
+		const now = ready();
+		return now !== null && now.agentId === conversation.chosen()?.id ? now : null;
+	};
+	return createComponent(Show, {
+		get when() {
+			return conversation.available() === true;
+		},
+		get children() {
+			var _el$ = _tmpl$3();
+			var _el$2 = _el$.firstChild;
+			var _el$3 = _el$2.nextSibling;
+			var _el$6 = _el$3.nextSibling;
+			var _el$7 = _el$6.nextSibling;
+			insert(_el$3, createComponent(Show, {
+				get when() {
+					return (conversation.agents()?.agents.length ?? 0) > 0;
+				},
+				get fallback() {
+					var _el$8 = _tmpl$2$1();
+					insert(_el$8, () => {
+						return conversation.agents() === null ? "looking for agents" : "none known";
+					});
+					effect(() => `${p}-phase`, (_v$, _$p) => {
+						className(_el$8, _v$, _$p);
+					});
+					return _el$8;
+				},
+				get children() {
+					return [(() => {
+						var _el$4 = _tmpl$$2();
+						_el$4.addEventListener("change", (event) => conversation.choose(event.currentTarget.value));
+						insert(_el$4, createComponent(For, {
+							get each() {
+								return conversation.agents()?.agents ?? [];
+							},
+							children: (agent) => (() => {
+								var _el$9 = _tmpl$4();
+								insert(_el$9, (() => {
+									var _c$ = memo(() => {
+										return !!agent.installed;
+									});
+									return () => {
+										return _c$() ? agent.name : `${agent.name} (not installed)`;
+									};
+								})());
+								effect(() => {
+									return {
+										e: agent.id,
+										t: !agent.installed
+									};
+								}, ({ e, t }, _p$) => {
+									_el$9.value = e;
+									t !== _p$?.t && setAttribute(_el$9, "disabled", t);
+								});
+								return _el$9;
+							})()
+						}));
+						effect(() => {
+							return {
+								e: `${p}-select`,
+								t: conversation.chosen()?.id ?? ""
+							};
+						}, ({ e, t }, _p$) => {
+							className(_el$4, e, _p$?.e);
+							queueMicrotask(() => {
+								return _el$4.value = t;
+							}) || (_el$4.value = t);
+						});
+						return _el$4;
+					})(), (() => {
+						var _el$5 = _tmpl$2$1();
+						insert(_el$5, () => {
+							return statusWord(conversation.status(), conversation.chosen()?.id ?? null);
+						});
+						effect(() => {
+							return {
+								e: `${p}-phase`,
+								t: conversation.status()?.phase ?? "idle"
+							};
+						}, ({ e, t }, _p$) => {
+							className(_el$5, e, _p$?.e);
+							t !== _p$?.t && setAttribute(_el$5, "data-agent-phase", t);
+						});
+						return _el$5;
+					})()];
+				}
+			}));
+			insert(_el$, createComponent(Show, {
+				get when() {
+					return memo(() => {
+						return !!own()?.configOptions?.some((option) => option.category === "mode");
+					})() ? null : own()?.modes;
+				},
+				children: (modes) => [(() => {
+					var _el$10 = _tmpl$5();
+					effect(() => `${p}-key`, (_v$, _$p) => {
+						className(_el$10, _v$, _$p);
+					});
+					return _el$10;
+				})(), (() => {
+					var _el$11 = _tmpl$6();
+					var _el$12 = _el$11.firstChild;
+					_el$12.addEventListener("change", (event) => void conversation.setMode(event.currentTarget.value));
+					insert(_el$12, createComponent(For, {
+						get each() {
+							return modes().availableModes;
+						},
+						children: (mode) => (() => {
+							var _el$13 = _tmpl$4();
+							insert(_el$13, () => {
+								return mode.name;
+							});
+							effect(() => mode.id, (_v$) => {
+								_el$13.value = _v$;
+							});
+							return _el$13;
+						})()
+					}));
+					effect(() => {
+						return {
+							e: `${p}-value`,
+							t: `${p}-select`,
+							a: modes().currentModeId
+						};
+					}, ({ e, t, a }, _p$) => {
+						className(_el$11, e, _p$?.e);
+						className(_el$12, t, _p$?.t);
+						queueMicrotask(() => {
+							return _el$12.value = a;
+						}) || (_el$12.value = a);
+					});
+					return _el$11;
+				})()]
+			}), _el$6);
+			insert(_el$, createComponent(For, {
+				get each() {
+					return own()?.configOptions ?? [];
+				},
+				children: (option) => [(() => {
+					var _el$14 = _tmpl$2$1();
+					insert(_el$14, () => {
+						return option.name;
+					});
+					effect(() => {
+						return {
+							e: `${p}-key`,
+							t: option.description ?? ""
+						};
+					}, ({ e, t }, _p$) => {
+						className(_el$14, e, _p$?.e);
+						t !== _p$?.t && setAttribute(_el$14, "title", t);
+					});
+					return _el$14;
+				})(), (() => {
+					var _el$15 = _tmpl$2$1();
+					insert(_el$15, (() => {
+						var _c$2 = memo(() => {
+							return option.type === "select";
+						});
+						return () => {
+							return _c$2() ? (() => {
+								var _el$16 = _tmpl$7();
+								_el$16.addEventListener("change", (event) => void conversation.setConfig(option.id, event.currentTarget.value));
+								insert(_el$16, createComponent(For, {
+									get each() {
+										return choicesOf(option);
+									},
+									children: (choice) => (() => {
+										var _el$18 = _tmpl$4();
+										insert(_el$18, () => {
+											return choice.name;
+										});
+										effect(() => choice.value, (_v$) => {
+											_el$18.value = _v$;
+										});
+										return _el$18;
+									})()
+								}));
+								effect(() => {
+									return {
+										e: `${p}-select`,
+										t: option.name,
+										a: option.currentValue
+									};
+								}, ({ e, t, a }, _p$) => {
+									className(_el$16, e, _p$?.e);
+									t !== _p$?.t && setAttribute(_el$16, "aria-label", t);
+									queueMicrotask(() => {
+										return _el$16.value = a;
+									}) || (_el$16.value = a);
+								});
+								return _el$16;
+							})() : (() => {
+								var _el$17 = _tmpl$8();
+								_el$17.addEventListener("change", (event) => void conversation.setConfig(option.id, event.currentTarget.checked));
+								effect(() => {
+									return {
+										e: option.name,
+										t: option.currentValue
+									};
+								}, ({ e, t }, _p$) => {
+									e !== _p$?.e && setAttribute(_el$17, "aria-label", e);
+									_el$17.checked = t;
+								});
+								return _el$17;
+							})();
+						};
+					})());
+					effect(() => `${p}-value`, (_v$, _$p) => {
+						className(_el$15, _v$, _$p);
+					});
+					return _el$15;
+				})()]
+			}), _el$7);
+			effect(() => {
+				return {
+					e: `${p}-settings`,
+					t: `${p}-key`,
+					a: `${p}-value`
+				};
+			}, ({ e, t, a }, _p$) => {
+				className(_el$, e, _p$?.e);
+				className(_el$2, t, _p$?.t);
+				className(_el$3, a, _p$?.a);
+			});
+			return _el$;
+		}
+	});
+}
+var _tmpl$$1 = template(`<p>`);
+var _tmpl$2 = template(`<div><div><button type=button></button><button type=button></button></div><p role=status></p><p role=alert></p><!>`);
+var PROBING = "Looking for Figma desktop…";
+function createFigmaPanel(dd, state, conversation, p) {
+	const [status, setStatus] = createSignal("");
+	const [error, setError] = createSignal("");
+	const [busy, setBusy] = createSignal(null);
+	let alive = true;
+	onCleanup(() => {
+		alive = false;
+	});
+	state.probe();
+	onSettled(() => {
+		conversation.follow();
+	});
+	const act = async (which, work) => {
+		if (busy() !== null) return;
+		setError("");
+		setStatus("");
+		setBusy(which);
+		try {
+			const said = await work();
+			if (alive && said !== null) {
+				setStatus(said.status);
+				if (said.error !== null) setError(said.error);
+			}
+		} catch (cause) {
+			if (alive) setError(messageOf(cause));
+		} finally {
+			if (alive) setBusy(null);
+		}
+		state.probe();
+	};
+	const line = () => state.reachable() === null ? PROBING : NOT_REACHABLE;
+	var _el$ = _tmpl$2();
+	var _el$3 = _el$.firstChild;
+	var _el$4 = _el$3.firstChild;
+	var _el$5 = _el$4.nextSibling;
+	var _el$6 = _el$3.nextSibling;
+	var _el$7 = _el$6.nextSibling;
+	var _el$8 = _el$7.nextSibling;
+	insert(_el$, createComponent(Show, {
+		get when() {
+			return state.reachable() !== true;
+		},
+		get children() {
+			var _el$2 = _tmpl$$1();
+			insert(_el$2, line);
+			effect(() => `${p}-state`, (_v$, _$p) => {
+				className(_el$2, _v$, _$p);
+			});
+			return _el$2;
+		}
+	}), _el$3);
+	_el$4._$$click = () => void act("image", () => addReference(dd));
+	insert(_el$4, () => {
+		return busy() === "image" ? "Adding…" : "Add as image";
+	});
+	_el$5._$$click = () => void act("page", () => addAsPage(dd, {
+		agentId: conversation.chosenId(),
+		conversationAgent: conversation.status()?.agentId ?? null
+	}));
+	insert(_el$5, () => {
+		return busy() === "page" ? "Asking…" : "Add as page";
+	});
+	insert(_el$, createComponent(Settings, {
+		conversation,
+		prefix: p
+	}), _el$6);
+	insert(_el$6, status);
+	insert(_el$7, error);
+	insert(_el$, createComponent(RoundBlock, {
+		conversation,
+		prefix: p
+	}), _el$8);
+	effect(() => {
+		return {
+			e: `${p}-panel`,
+			t: `${p}-actions`,
+			a: `${p}-button`,
+			o: busy() !== null,
+			i: `${p}-button`,
+			n: busy() !== null,
+			s: `${p}-status`,
+			h: `${p}-error`
+		};
+	}, ({ e, t, a, o, i, n, s, h }, _p$) => {
+		className(_el$, e, _p$?.e);
+		className(_el$3, t, _p$?.t);
+		className(_el$4, a, _p$?.a);
+		o !== _p$?.o && setAttribute(_el$4, "disabled", o);
+		className(_el$5, i, _p$?.i);
+		n !== _p$?.n && setAttribute(_el$5, "disabled", n);
+		className(_el$6, s, _p$?.s);
+		className(_el$7, h, _p$?.h);
+	});
+	return _el$;
+}
+delegateEvents(["click"]);
+var _tmpl$ = template(`<figure><img>`);
+function ReferenceItemView(props) {
+	const id = untrack(() => props.item.id);
+	const p = untrack(() => props.prefix);
+	let binding;
+	onSettled(() => () => binding?.dispose());
+	const style$1 = () => ({
+		left: `${props.item.position.x}px`,
+		top: `${props.item.position.y}px`,
+		...props.item.frame === void 0 ? {} : { width: `${props.item.frame.width}px` },
+		...props.item.frame?.height === void 0 ? {} : { height: `${props.item.frame.height}px` }
+	});
+	var _el$ = _tmpl$();
+	var _el$2 = _el$.firstChild;
+	ref(() => {
+		return (node) => {
+			binding = props.dd.canvas.bindItemNode(id, node);
+		};
+	}, _el$);
+	effect(() => {
+		return {
+			e: `${p}-reference`,
+			t: readShallow(style$1()),
+			a: props.item.frame === void 0 ? void 0 : "",
+			o: props.item.frame?.height === void 0 ? void 0 : "",
+			i: props.dd.assetUrl(props.item.payload.src),
+			n: props.item.payload.name
+		};
+	}, ({ e, t, a, o, i, n }, _p$) => {
+		className(_el$, e, _p$?.e);
+		style(_el$, t, _p$?.t);
+		a !== _p$?.a && setAttribute(_el$, "data-framed", a);
+		o !== _p$?.o && setAttribute(_el$, "data-sized", o);
+		i !== _p$?.i && setAttribute(_el$2, "src", i);
+		n !== _p$?.n && setAttribute(_el$2, "alt", n);
+	});
+	return _el$;
+}
+function createFigmaState(dd, target = typeof window === "undefined" ? null : window) {
+	const [reachable, setReachable] = createSignal(null);
+	const probe = createProbe({
+		ask: async () => await dd.hostPart.call("reachable") === true,
+		answer: (known) => setReachable(known),
+		target
+	});
+	dd.on("project", () => probe.probe());
+	onCleanup(() => probe.dispose());
+	return {
+		reachable,
+		probe: probe.probe,
+		settled: probe.settled
+	};
+}
+var classPrefix = (pluginId) => pluginId.replace(/[^A-Za-z0-9_-]/g, "-");
+var panelCss = (p) => `
+.${p}-panel {
+  --panel-text: var(--dream-app-text, #b8b8be);
+  --panel-bright: var(--dream-app-bright, #c8c8ce);
+  --panel-dim: var(--dream-app-dim, #9a9aa0);
+  --panel-muted: var(--dream-app-muted, #85858c);
+  --panel-chrome: var(--dream-app-line, #232328);
+
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 0;
+  padding: 6px 12px 12px;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--panel-text);
+}
+
+.${p}-state {
+  margin: 0;
+  font-size: 11px;
+  color: var(--panel-dim);
+  overflow-wrap: anywhere;
+}
+
+.${p}-button:focus-visible {
+  outline: 1px solid var(--panel-bright);
+  outline-offset: -1px;
+}
+
+.${p}-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+
+.${p}-button {
+  padding: 4px 10px;
+  font: inherit;
+  color: var(--panel-bright);
+  background: var(--panel-chrome);
+  border: 0;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.${p}-button:disabled {
+  color: var(--panel-muted);
+  cursor: default;
+}
+
+/* The agent Add as page asks, and its settings: a key-value grid under
+   the buttons, hidden on a host that runs no agents. */
+.${p}-settings {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: 4px 10px;
+  align-items: center;
+  font-size: 11px;
+}
+
+.${p}-key {
+  color: var(--panel-muted);
+}
+
+.${p}-value {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.${p}-select {
+  min-width: 0;
+  max-width: 12em;
+  font: inherit;
+  color: var(--panel-dim);
+  background: transparent;
+  border: 1px solid var(--panel-chrome);
+  border-radius: 3px;
+  padding: 1px 2px;
+}
+
+.${p}-select:focus-visible {
+  outline: 1px solid var(--panel-bright);
+  outline-offset: -1px;
+}
+
+.${p}-phase {
+  color: var(--panel-muted);
+}
+
+.${p}-status,
+.${p}-error {
+  margin: 0;
+  font-size: 11px;
+  color: var(--panel-muted);
+  overflow-wrap: anywhere;
+}
+
+.${p}-status:empty,
+.${p}-error:empty {
+  display: none;
+}
+
+.${p}-error {
+  color: var(--dream-app-danger, #d08a8a);
+}
+
+/* The round Add as page asked for: a quiet block under the buttons,
+   absent until the first. */
+.${p}-round {
+  --panel-amber: var(--dream-app-amber, #a8842c);
+  --panel-faint: var(--dream-app-line, #3a3a40);
+
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-top: 6px;
+  border-top: 1px solid var(--panel-chrome);
+  font-size: 11px;
+  color: var(--panel-muted);
+}
+
+.${p}-round-status {
+  margin: 0;
+  color: var(--panel-dim);
+  overflow-wrap: anywhere;
+}
+
+.${p}-round[data-round-state="running"] .${p}-round-status,
+.${p}-round[data-round-state="asking"] .${p}-round-status {
+  color: var(--panel-amber);
+}
+
+.${p}-steps {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.${p}-steps li {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.${p}-steps li[data-step-status="failed"] {
+  color: var(--dream-app-danger, #d08a8a);
+}
+
+.${p}-mark {
+  display: inline-block;
+  width: 1.2em;
+}
+
+.${p}-steps li[data-step-status="pending"] .${p}-mark,
+.${p}-steps li[data-step-status="in_progress"] .${p}-mark {
+  color: var(--panel-amber);
+}
+
+.${p}-word {
+  margin: 0;
+  color: var(--panel-text);
+  overflow-wrap: anywhere;
+}
+
+.${p}-ask {
+  padding: 6px 8px;
+  border: 1px solid var(--panel-faint);
+  border-left: 2px solid var(--panel-amber);
+  border-radius: 4px;
+  color: var(--panel-dim);
+}
+
+.${p}-ask p {
+  margin: 0 0 6px;
+  overflow-wrap: anywhere;
+}
+
+.${p}-round-problem {
+  margin: 0;
+  color: var(--dream-app-danger, #d08a8a);
+  overflow-wrap: anywhere;
+}
+`;
+var itemCss = (p) => `
+.${p}-reference {
+  position: absolute;
+  margin: 0;
+}
+
+/* With no frame the image is its own size, as a Media image lands; a
+   frame's width is the image's, its height too when a resize set one. */
+.${p}-reference img {
+  display: block;
+  object-fit: contain;
+  object-position: top left;
+}
+
+.${p}-reference[data-framed] img {
+  width: 100%;
+  height: auto;
+}
+
+.${p}-reference[data-sized] img {
+  height: 100%;
+}
+`;
+function activate(dd) {
+	const p = classPrefix(dd.plugin.id);
+	const state = createFigmaState(dd);
+	const conversation = createConversation(dd);
+	for (const kind of [REFERENCE_KIND, LEGACY_REFERENCE_KIND]) dd.registerItemKind({
+		kind,
+		payloadProblem: referencePayloadProblem,
+		styles: itemCss(p),
+		render: (props) => createComponent(ReferenceItemView, {
+			dd,
+			get item() {
+				return props.item;
+			},
+			prefix: p
+		}),
+		name: (item) => item.payload.name,
+		rename: (item, name) => {
+			item.payload.name = name;
+		},
+		describe: (item) => describeReference(item.payload),
+		resize: { reset: true }
+	});
+	dd.registerPanel({
+		id: "figma",
+		title: "Figma",
+		styles: panelCss(p),
+		attention: () => conversation.asks().length > 0,
+		render: () => createFigmaPanel(dd, state, conversation, p)
+	});
+}
+export { activate as default };