@ai-gui/core 0.4.2 → 0.5.0

package/dist/index.cjs

@@ -1404,7 +1404,7 @@ function collectNodeRenderers(plugins = [], debugOptions = {}) {
 			map[k] = render;
 			continue;
 		}
-		map[k] = (node) => {
+		map[k] = (node, context) => {
 			const emit = (type, data) => target?.emitDebug(type, data) ?? debug?.emit(type, data);
 			emit("plugin-render-started", {
 				plugin: p.name,
@@ -1412,7 +1412,7 @@ function collectNodeRenderers(plugins = [], debugOptions = {}) {
 				nodeKey: node.key
 			});
 			try {
-				const output = render(node);
+				const output = render(node, context);
 				if (isPromise(output)) return output.then((resolved) => {
 					emit("async-output-resolved", {
 						plugin: p.name,
@@ -1672,6 +1672,85 @@ function normalizeLineEndings(src) {
 	return src.replace(/\r\n|\r/g, "\n");
 }
 
+//#endregion
+//#region src/export-image.ts
+/** The intrinsic size of an SVG element, falling back to its attributes and then to a default. */
+function measure(svg, options) {
+	const box = typeof svg.getBoundingClientRect === "function" ? svg.getBoundingClientRect() : void 0;
+	const attribute = (name) => Number.parseFloat(svg.getAttribute(name) ?? "");
+	const fromViewBox = (index) => {
+		const parts = (svg.getAttribute("viewBox") ?? "").split(/[\s,]+/).map(Number);
+		return parts.length === 4 && Number.isFinite(parts[index]) ? parts[index] : Number.NaN;
+	};
+	const pick = (...candidates) => candidates.find((value) => Number.isFinite(value) && value > 0);
+	return {
+		width: Math.round(pick(options.width ?? Number.NaN, box?.width ?? Number.NaN, attribute("width"), fromViewBox(2), 720)),
+		height: Math.round(pick(options.height ?? Number.NaN, box?.height ?? Number.NaN, attribute("height"), fromViewBox(3), 400))
+	};
+}
+/**
+* Render an SVG element to a raster data URL.
+*
+* The element is serialized as it stands, so whatever a plugin drew — including the theme it drew
+* it in — is what gets exported.
+*/
+async function exportSVGToImage(svg, options = {}) {
+	const { width, height } = measure(svg, options);
+	const scale = options.scale && options.scale > 0 ? options.scale : globalThis.devicePixelRatio || 1;
+	const source = new XMLSerializer().serializeToString(svg);
+	const namespaced = /\sxmlns=/.test(source) ? source : source.replace(/^<svg/, "<svg xmlns=\"http://www.w3.org/2000/svg\"");
+	const url = URL.createObjectURL(new Blob([namespaced], { type: "image/svg+xml;charset=utf-8" }));
+	try {
+		const image = await loadImage(url);
+		const canvas = document.createElement("canvas");
+		canvas.width = Math.max(1, Math.round(width * scale));
+		canvas.height = Math.max(1, Math.round(height * scale));
+		const context = canvas.getContext("2d");
+		if (!context) throw new Error("This browser cannot rasterize images");
+		const background = options.background ?? "#ffffff";
+		if (background !== "transparent") {
+			context.fillStyle = background;
+			context.fillRect(0, 0, canvas.width, canvas.height);
+		}
+		context.scale(scale, scale);
+		context.drawImage(image, 0, 0, width, height);
+		return {
+			dataUrl: canvas.toDataURL(options.type ?? "image/png", options.quality),
+			width: canvas.width,
+			height: canvas.height
+		};
+	} finally {
+		URL.revokeObjectURL(url);
+	}
+}
+/**
+* Export every drawing inside a rendered answer.
+*
+* A host holds the element it handed to the renderer, not the individual charts, and the plugins
+* decide what lands in it.
+*/
+async function exportRenderedImages(root, options = {}) {
+	const drawings = Array.from(root.querySelectorAll("svg"));
+	const exported = [];
+	for (const drawing of drawings) exported.push(await exportSVGToImage(drawing, options));
+	return exported;
+}
+/** Save an exported image under the given file name. */
+function downloadImage(image, filename) {
+	const link = document.createElement("a");
+	link.download = filename;
+	link.href = image.dataUrl;
+	link.click();
+}
+function loadImage(url) {
+	return new Promise((resolve, reject) => {
+		const image = new Image();
+		image.onload = () => resolve(image);
+		image.onerror = () => reject(new Error("The drawing could not be decoded"));
+		image.src = url;
+	});
+}
+
 //#endregion
 //#region src/diff.ts
 /** Produce a minimal set of patches turning `prev` into `next`, keyed by node key. */
@@ -2550,6 +2629,9 @@ exports.createActionRuntime = createActionRuntime
 exports.createParser = createParser
 exports.createParserWithMetadata = createParserWithMetadata
 exports.diffAst = diffAst
+exports.downloadImage = downloadImage
+exports.exportRenderedImages = exportRenderedImages
+exports.exportSVGToImage = exportSVGToImage
 exports.getActionKey = getActionKey
 exports.getIdleActionState = getIdleActionState
 exports.isCardPatchResult = isCardPatchResult

package/dist/index.d.cts

@@ -166,7 +166,18 @@ interface MountedCardSlot {
 interface RenderMountContext {
   mountCard?: (host: HTMLElement, request: MountCardSlotRequest) => MountedCardSlot | undefined;
 }
-type NodeRenderer = (node: ASTNode) => RenderOutput | Promise<RenderOutput>;
+/** What the host can tell a plugin about the surroundings it is rendering into. */
+interface NodeRenderContext {
+  /**
+   * The host's colour scheme, "light" or "dark" by convention.
+   *
+   * A diagram or a chart picks its own palette, and a plugin has no way to read the palette of
+   * the page it is embedded in, so without this an answer rendered on a dark page comes back
+   * with white plot areas.
+   */
+  readonly theme?: string;
+}
+type NodeRenderer = (node: ASTNode, context?: NodeRenderContext) => RenderOutput | Promise<RenderOutput>;
 interface PluginCommitContext {
   readonly generation: number;
   emitDebug(type: string, data?: Record<string, unknown>): void;
@@ -550,6 +561,57 @@ declare function collectNodeRenderers(plugins?: AIGuiPlugin[], debugOptions?: Co
 /** The set of node types claimed by the given plugins. */
 declare function pluginNodeTypes(plugins?: AIGuiPlugin[]): Set<string>;
 
+//#endregion
+//#region src/export-image.d.ts
+/**
+ * Turn what a plugin drew into a PNG the reader can keep.
+ *
+ * Charts and diagrams are the point of rendering a model's answer, and the first thing anyone
+ * wants to do with one is save it. There is no browser API for "download this SVG as an image":
+ * it has to be serialized, loaded through an `Image`, and painted onto a canvas. Every host that
+ * needs it rewrites those twenty lines, and gets the same details wrong — a transparent
+ * background that turns black in a viewer, a blurry export on a retina screen, or a light
+ * background hardcoded into a page that has since gone dark.
+ */
+interface ExportImageOptions {
+  /**
+   * Device pixels per CSS pixel. Defaults to the screen's own ratio, so an export looks as sharp
+   * as what it was copied from rather than half the resolution on a retina display.
+   */
+  scale?: number;
+  /**
+   * What to paint behind the drawing. An SVG is usually transparent, which reads as black in most
+   * image viewers. Pass the page's own background — or "transparent" to keep the alpha channel.
+   */
+  background?: string;
+  /** Overrides for the drawing's own size, in CSS pixels. */
+  width?: number;
+  height?: number;
+  type?: "image/png" | "image/jpeg" | "image/webp";
+  quality?: number;
+}
+interface ExportedImage {
+  dataUrl: string;
+  width: number;
+  height: number;
+}
+/**
+ * Render an SVG element to a raster data URL.
+ *
+ * The element is serialized as it stands, so whatever a plugin drew — including the theme it drew
+ * it in — is what gets exported.
+ */
+declare function exportSVGToImage(svg: SVGElement, options?: ExportImageOptions): Promise<ExportedImage>;
+/**
+ * Export every drawing inside a rendered answer.
+ *
+ * A host holds the element it handed to the renderer, not the individual charts, and the plugins
+ * decide what lands in it.
+ */
+declare function exportRenderedImages(root: ParentNode, options?: ExportImageOptions): Promise<ExportedImage[]>;
+/** Save an exported image under the given file name. */
+declare function downloadImage(image: ExportedImage, filename: string): void;
+
 //#endregion
 //#region src/diff.d.ts
 /** Produce a minimal set of patches turning `prev` into `next`, keyed by node key. */
@@ -694,4 +756,4 @@ declare function mockModelStream(events: Iterable<ModelStreamEvent> | AsyncItera
 declare function readableBytes(chunks: Iterable<string | Uint8Array> | AsyncIterable<string | Uint8Array>): ReadableStream<Uint8Array>;
 
 //#endregion
-export { AIGuiPlugin, ASTNode, ActionAbortedError, ActionAlreadyRegisteredError, ActionContext, ActionDefinition, ActionDestroyedError, ActionDispatchOptions, ActionErrorEvent, ActionEventBase, ActionExecutionError, ActionNotFoundError, ActionRegisterOptions, ActionRegistry, ActionRequest, ActionRuntime, ActionRuntimeError, ActionRuntimeOptions, ActionStartEvent, ActionState, ActionStateListener, ActionStatus, ActionSuccessEvent, ActionTimeoutError, ActionValidationError, BuildSystemPromptOptions, ByteStreamSource, CARD_ID_MAX_LENGTH, CARD_JSON_MAX_DEPTH, CARD_JSON_MAX_NODES, CARD_PATCH_BATCH_MAX_SIZE, CardAction, CardActionError, CardDef, CardJSONError, CardLimitError, CardListener, CardNotFoundError, CardParseResult, CardPatch, CardPatchBatch, CardPatchResult, CardRecord, CardRegistry, CardRevisionConflictError, CardSnapshot, CardSnapshotError, CardStore, CardStoreError, CardStoreListener, CardStoreOptions, CardTypeConflictError, CardValidationError, ChannelSink, Citation, CollectNodeRendererOptions, DebugEmitter, DebugEvent, DebugEventListener, DebugEventTarget, DebugInstrumentationTarget, DebugOptions, DebugRedactContext, DebugSource, FeedChunk, FeedOptions, FeedSource, JSONSchema, JSONSchemaValidationResult, ModelStreamEvent, MountCardSlotRequest, MountedCardSlot, NodeRenderer, ParseResult, ParserOptions, PartialJSONResult, Patch, PluginCommitContext, RenderMountContext, RenderOutput, Renderer, RendererOptions, SSEEvent, SSEOptions, SafeDebugValueOptions, SanitizeHtmlOptions, SourceBlock, StreamParseOptions, StreamRouter, Usage, applyPatches, buildSystemPrompt, collectNodeRenderers, contentDeltas, createActionRuntime, createParser, createParserWithMetadata, diffAst, getActionKey, getIdleActionState, isCardPatchResult, jsonLines, mockModelStream, ndjson, parsePartialJSON, parseSSE, pluginNodeTypes, readableBytes, repairMarkdown, safeDebugValue, sanitizeHtml, textLines, validateJSONSchema };
+export { AIGuiPlugin, ASTNode, ActionAbortedError, ActionAlreadyRegisteredError, ActionContext, ActionDefinition, ActionDestroyedError, ActionDispatchOptions, ActionErrorEvent, ActionEventBase, ActionExecutionError, ActionNotFoundError, ActionRegisterOptions, ActionRegistry, ActionRequest, ActionRuntime, ActionRuntimeError, ActionRuntimeOptions, ActionStartEvent, ActionState, ActionStateListener, ActionStatus, ActionSuccessEvent, ActionTimeoutError, ActionValidationError, BuildSystemPromptOptions, ByteStreamSource, CARD_ID_MAX_LENGTH, CARD_JSON_MAX_DEPTH, CARD_JSON_MAX_NODES, CARD_PATCH_BATCH_MAX_SIZE, CardAction, CardActionError, CardDef, CardJSONError, CardLimitError, CardListener, CardNotFoundError, CardParseResult, CardPatch, CardPatchBatch, CardPatchResult, CardRecord, CardRegistry, CardRevisionConflictError, CardSnapshot, CardSnapshotError, CardStore, CardStoreError, CardStoreListener, CardStoreOptions, CardTypeConflictError, CardValidationError, ChannelSink, Citation, CollectNodeRendererOptions, DebugEmitter, DebugEvent, DebugEventListener, DebugEventTarget, DebugInstrumentationTarget, DebugOptions, DebugRedactContext, DebugSource, ExportImageOptions, ExportedImage, FeedChunk, FeedOptions, FeedSource, JSONSchema, JSONSchemaValidationResult, ModelStreamEvent, MountCardSlotRequest, MountedCardSlot, NodeRenderContext, NodeRenderer, ParseResult, ParserOptions, PartialJSONResult, Patch, PluginCommitContext, RenderMountContext, RenderOutput, Renderer, RendererOptions, SSEEvent, SSEOptions, SafeDebugValueOptions, SanitizeHtmlOptions, SourceBlock, StreamParseOptions, StreamRouter, Usage, applyPatches, buildSystemPrompt, collectNodeRenderers, contentDeltas, createActionRuntime, createParser, createParserWithMetadata, diffAst, downloadImage, exportRenderedImages, exportSVGToImage, getActionKey, getIdleActionState, isCardPatchResult, jsonLines, mockModelStream, ndjson, parsePartialJSON, parseSSE, pluginNodeTypes, readableBytes, repairMarkdown, safeDebugValue, sanitizeHtml, textLines, validateJSONSchema };

package/dist/index.d.ts

@@ -166,7 +166,18 @@ interface MountedCardSlot {
 interface RenderMountContext {
   mountCard?: (host: HTMLElement, request: MountCardSlotRequest) => MountedCardSlot | undefined;
 }
-type NodeRenderer = (node: ASTNode) => RenderOutput | Promise<RenderOutput>;
+/** What the host can tell a plugin about the surroundings it is rendering into. */
+interface NodeRenderContext {
+  /**
+   * The host's colour scheme, "light" or "dark" by convention.
+   *
+   * A diagram or a chart picks its own palette, and a plugin has no way to read the palette of
+   * the page it is embedded in, so without this an answer rendered on a dark page comes back
+   * with white plot areas.
+   */
+  readonly theme?: string;
+}
+type NodeRenderer = (node: ASTNode, context?: NodeRenderContext) => RenderOutput | Promise<RenderOutput>;
 interface PluginCommitContext {
   readonly generation: number;
   emitDebug(type: string, data?: Record<string, unknown>): void;
@@ -550,6 +561,57 @@ declare function collectNodeRenderers(plugins?: AIGuiPlugin[], debugOptions?: Co
 /** The set of node types claimed by the given plugins. */
 declare function pluginNodeTypes(plugins?: AIGuiPlugin[]): Set<string>;
 
+//#endregion
+//#region src/export-image.d.ts
+/**
+ * Turn what a plugin drew into a PNG the reader can keep.
+ *
+ * Charts and diagrams are the point of rendering a model's answer, and the first thing anyone
+ * wants to do with one is save it. There is no browser API for "download this SVG as an image":
+ * it has to be serialized, loaded through an `Image`, and painted onto a canvas. Every host that
+ * needs it rewrites those twenty lines, and gets the same details wrong — a transparent
+ * background that turns black in a viewer, a blurry export on a retina screen, or a light
+ * background hardcoded into a page that has since gone dark.
+ */
+interface ExportImageOptions {
+  /**
+   * Device pixels per CSS pixel. Defaults to the screen's own ratio, so an export looks as sharp
+   * as what it was copied from rather than half the resolution on a retina display.
+   */
+  scale?: number;
+  /**
+   * What to paint behind the drawing. An SVG is usually transparent, which reads as black in most
+   * image viewers. Pass the page's own background — or "transparent" to keep the alpha channel.
+   */
+  background?: string;
+  /** Overrides for the drawing's own size, in CSS pixels. */
+  width?: number;
+  height?: number;
+  type?: "image/png" | "image/jpeg" | "image/webp";
+  quality?: number;
+}
+interface ExportedImage {
+  dataUrl: string;
+  width: number;
+  height: number;
+}
+/**
+ * Render an SVG element to a raster data URL.
+ *
+ * The element is serialized as it stands, so whatever a plugin drew — including the theme it drew
+ * it in — is what gets exported.
+ */
+declare function exportSVGToImage(svg: SVGElement, options?: ExportImageOptions): Promise<ExportedImage>;
+/**
+ * Export every drawing inside a rendered answer.
+ *
+ * A host holds the element it handed to the renderer, not the individual charts, and the plugins
+ * decide what lands in it.
+ */
+declare function exportRenderedImages(root: ParentNode, options?: ExportImageOptions): Promise<ExportedImage[]>;
+/** Save an exported image under the given file name. */
+declare function downloadImage(image: ExportedImage, filename: string): void;
+
 //#endregion
 //#region src/diff.d.ts
 /** Produce a minimal set of patches turning `prev` into `next`, keyed by node key. */
@@ -694,4 +756,4 @@ declare function mockModelStream(events: Iterable<ModelStreamEvent> | AsyncItera
 declare function readableBytes(chunks: Iterable<string | Uint8Array> | AsyncIterable<string | Uint8Array>): ReadableStream<Uint8Array>;
 
 //#endregion
-export { AIGuiPlugin, ASTNode, ActionAbortedError, ActionAlreadyRegisteredError, ActionContext, ActionDefinition, ActionDestroyedError, ActionDispatchOptions, ActionErrorEvent, ActionEventBase, ActionExecutionError, ActionNotFoundError, ActionRegisterOptions, ActionRegistry, ActionRequest, ActionRuntime, ActionRuntimeError, ActionRuntimeOptions, ActionStartEvent, ActionState, ActionStateListener, ActionStatus, ActionSuccessEvent, ActionTimeoutError, ActionValidationError, BuildSystemPromptOptions, ByteStreamSource, CARD_ID_MAX_LENGTH, CARD_JSON_MAX_DEPTH, CARD_JSON_MAX_NODES, CARD_PATCH_BATCH_MAX_SIZE, CardAction, CardActionError, CardDef, CardJSONError, CardLimitError, CardListener, CardNotFoundError, CardParseResult, CardPatch, CardPatchBatch, CardPatchResult, CardRecord, CardRegistry, CardRevisionConflictError, CardSnapshot, CardSnapshotError, CardStore, CardStoreError, CardStoreListener, CardStoreOptions, CardTypeConflictError, CardValidationError, ChannelSink, Citation, CollectNodeRendererOptions, DebugEmitter, DebugEvent, DebugEventListener, DebugEventTarget, DebugInstrumentationTarget, DebugOptions, DebugRedactContext, DebugSource, FeedChunk, FeedOptions, FeedSource, JSONSchema, JSONSchemaValidationResult, ModelStreamEvent, MountCardSlotRequest, MountedCardSlot, NodeRenderer, ParseResult, ParserOptions, PartialJSONResult, Patch, PluginCommitContext, RenderMountContext, RenderOutput, Renderer, RendererOptions, SSEEvent, SSEOptions, SafeDebugValueOptions, SanitizeHtmlOptions, SourceBlock, StreamParseOptions, StreamRouter, Usage, applyPatches, buildSystemPrompt, collectNodeRenderers, contentDeltas, createActionRuntime, createParser, createParserWithMetadata, diffAst, getActionKey, getIdleActionState, isCardPatchResult, jsonLines, mockModelStream, ndjson, parsePartialJSON, parseSSE, pluginNodeTypes, readableBytes, repairMarkdown, safeDebugValue, sanitizeHtml, textLines, validateJSONSchema };
+export { AIGuiPlugin, ASTNode, ActionAbortedError, ActionAlreadyRegisteredError, ActionContext, ActionDefinition, ActionDestroyedError, ActionDispatchOptions, ActionErrorEvent, ActionEventBase, ActionExecutionError, ActionNotFoundError, ActionRegisterOptions, ActionRegistry, ActionRequest, ActionRuntime, ActionRuntimeError, ActionRuntimeOptions, ActionStartEvent, ActionState, ActionStateListener, ActionStatus, ActionSuccessEvent, ActionTimeoutError, ActionValidationError, BuildSystemPromptOptions, ByteStreamSource, CARD_ID_MAX_LENGTH, CARD_JSON_MAX_DEPTH, CARD_JSON_MAX_NODES, CARD_PATCH_BATCH_MAX_SIZE, CardAction, CardActionError, CardDef, CardJSONError, CardLimitError, CardListener, CardNotFoundError, CardParseResult, CardPatch, CardPatchBatch, CardPatchResult, CardRecord, CardRegistry, CardRevisionConflictError, CardSnapshot, CardSnapshotError, CardStore, CardStoreError, CardStoreListener, CardStoreOptions, CardTypeConflictError, CardValidationError, ChannelSink, Citation, CollectNodeRendererOptions, DebugEmitter, DebugEvent, DebugEventListener, DebugEventTarget, DebugInstrumentationTarget, DebugOptions, DebugRedactContext, DebugSource, ExportImageOptions, ExportedImage, FeedChunk, FeedOptions, FeedSource, JSONSchema, JSONSchemaValidationResult, ModelStreamEvent, MountCardSlotRequest, MountedCardSlot, NodeRenderContext, NodeRenderer, ParseResult, ParserOptions, PartialJSONResult, Patch, PluginCommitContext, RenderMountContext, RenderOutput, Renderer, RendererOptions, SSEEvent, SSEOptions, SafeDebugValueOptions, SanitizeHtmlOptions, SourceBlock, StreamParseOptions, StreamRouter, Usage, applyPatches, buildSystemPrompt, collectNodeRenderers, contentDeltas, createActionRuntime, createParser, createParserWithMetadata, diffAst, downloadImage, exportRenderedImages, exportSVGToImage, getActionKey, getIdleActionState, isCardPatchResult, jsonLines, mockModelStream, ndjson, parsePartialJSON, parseSSE, pluginNodeTypes, readableBytes, repairMarkdown, safeDebugValue, sanitizeHtml, textLines, validateJSONSchema };

package/dist/index.js

@@ -1380,7 +1380,7 @@ function collectNodeRenderers(plugins = [], debugOptions = {}) {
 			map[k] = render;
 			continue;
 		}
-		map[k] = (node) => {
+		map[k] = (node, context) => {
 			const emit = (type, data) => target?.emitDebug(type, data) ?? debug?.emit(type, data);
 			emit("plugin-render-started", {
 				plugin: p.name,
@@ -1388,7 +1388,7 @@ function collectNodeRenderers(plugins = [], debugOptions = {}) {
 				nodeKey: node.key
 			});
 			try {
-				const output = render(node);
+				const output = render(node, context);
 				if (isPromise(output)) return output.then((resolved) => {
 					emit("async-output-resolved", {
 						plugin: p.name,
@@ -1648,6 +1648,85 @@ function normalizeLineEndings(src) {
 	return src.replace(/\r\n|\r/g, "\n");
 }
 
+//#endregion
+//#region src/export-image.ts
+/** The intrinsic size of an SVG element, falling back to its attributes and then to a default. */
+function measure(svg, options) {
+	const box = typeof svg.getBoundingClientRect === "function" ? svg.getBoundingClientRect() : void 0;
+	const attribute = (name) => Number.parseFloat(svg.getAttribute(name) ?? "");
+	const fromViewBox = (index) => {
+		const parts = (svg.getAttribute("viewBox") ?? "").split(/[\s,]+/).map(Number);
+		return parts.length === 4 && Number.isFinite(parts[index]) ? parts[index] : Number.NaN;
+	};
+	const pick = (...candidates) => candidates.find((value) => Number.isFinite(value) && value > 0);
+	return {
+		width: Math.round(pick(options.width ?? Number.NaN, box?.width ?? Number.NaN, attribute("width"), fromViewBox(2), 720)),
+		height: Math.round(pick(options.height ?? Number.NaN, box?.height ?? Number.NaN, attribute("height"), fromViewBox(3), 400))
+	};
+}
+/**
+* Render an SVG element to a raster data URL.
+*
+* The element is serialized as it stands, so whatever a plugin drew — including the theme it drew
+* it in — is what gets exported.
+*/
+async function exportSVGToImage(svg, options = {}) {
+	const { width, height } = measure(svg, options);
+	const scale = options.scale && options.scale > 0 ? options.scale : globalThis.devicePixelRatio || 1;
+	const source = new XMLSerializer().serializeToString(svg);
+	const namespaced = /\sxmlns=/.test(source) ? source : source.replace(/^<svg/, "<svg xmlns=\"http://www.w3.org/2000/svg\"");
+	const url = URL.createObjectURL(new Blob([namespaced], { type: "image/svg+xml;charset=utf-8" }));
+	try {
+		const image = await loadImage(url);
+		const canvas = document.createElement("canvas");
+		canvas.width = Math.max(1, Math.round(width * scale));
+		canvas.height = Math.max(1, Math.round(height * scale));
+		const context = canvas.getContext("2d");
+		if (!context) throw new Error("This browser cannot rasterize images");
+		const background = options.background ?? "#ffffff";
+		if (background !== "transparent") {
+			context.fillStyle = background;
+			context.fillRect(0, 0, canvas.width, canvas.height);
+		}
+		context.scale(scale, scale);
+		context.drawImage(image, 0, 0, width, height);
+		return {
+			dataUrl: canvas.toDataURL(options.type ?? "image/png", options.quality),
+			width: canvas.width,
+			height: canvas.height
+		};
+	} finally {
+		URL.revokeObjectURL(url);
+	}
+}
+/**
+* Export every drawing inside a rendered answer.
+*
+* A host holds the element it handed to the renderer, not the individual charts, and the plugins
+* decide what lands in it.
+*/
+async function exportRenderedImages(root, options = {}) {
+	const drawings = Array.from(root.querySelectorAll("svg"));
+	const exported = [];
+	for (const drawing of drawings) exported.push(await exportSVGToImage(drawing, options));
+	return exported;
+}
+/** Save an exported image under the given file name. */
+function downloadImage(image, filename) {
+	const link = document.createElement("a");
+	link.download = filename;
+	link.href = image.dataUrl;
+	link.click();
+}
+function loadImage(url) {
+	return new Promise((resolve, reject) => {
+		const image = new Image();
+		image.onload = () => resolve(image);
+		image.onerror = () => reject(new Error("The drawing could not be decoded"));
+		image.src = url;
+	});
+}
+
 //#endregion
 //#region src/diff.ts
 /** Produce a minimal set of patches turning `prev` into `next`, keyed by node key. */
@@ -2491,4 +2570,4 @@ function delay(ms, signal) {
 }
 
 //#endregion
-export { ActionAbortedError, ActionAlreadyRegisteredError, ActionDestroyedError, ActionExecutionError, ActionNotFoundError, ActionRegistry, ActionRuntime, ActionRuntimeError, ActionTimeoutError, ActionValidationError, CARD_ID_MAX_LENGTH, CARD_JSON_MAX_DEPTH, CARD_JSON_MAX_NODES, CARD_PATCH_BATCH_MAX_SIZE, CardJSONError, CardLimitError, CardNotFoundError, CardRegistry, CardRevisionConflictError, CardSnapshotError, CardStore, CardStoreError, CardTypeConflictError, CardValidationError, DebugEmitter, Renderer, StreamRouter, applyPatches, buildSystemPrompt, collectNodeRenderers, contentDeltas, createActionRuntime, createParser, createParserWithMetadata, diffAst, getActionKey, getIdleActionState, isCardPatchResult, jsonLines, mockModelStream, ndjson, parsePartialJSON, parseSSE, pluginNodeTypes, readableBytes, repairMarkdown, safeDebugValue, sanitizeHtml, textLines, validateJSONSchema };
+export { ActionAbortedError, ActionAlreadyRegisteredError, ActionDestroyedError, ActionExecutionError, ActionNotFoundError, ActionRegistry, ActionRuntime, ActionRuntimeError, ActionTimeoutError, ActionValidationError, CARD_ID_MAX_LENGTH, CARD_JSON_MAX_DEPTH, CARD_JSON_MAX_NODES, CARD_PATCH_BATCH_MAX_SIZE, CardJSONError, CardLimitError, CardNotFoundError, CardRegistry, CardRevisionConflictError, CardSnapshotError, CardStore, CardStoreError, CardTypeConflictError, CardValidationError, DebugEmitter, Renderer, StreamRouter, applyPatches, buildSystemPrompt, collectNodeRenderers, contentDeltas, createActionRuntime, createParser, createParserWithMetadata, diffAst, downloadImage, exportRenderedImages, exportSVGToImage, getActionKey, getIdleActionState, isCardPatchResult, jsonLines, mockModelStream, ndjson, parsePartialJSON, parseSSE, pluginNodeTypes, readableBytes, repairMarkdown, safeDebugValue, sanitizeHtml, textLines, validateJSONSchema };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-gui/core",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "Headless streaming renderer core for LLM-generated UI — markdown/JSON repair, card registry, AST diff, plugin engine, sanitizer.",
   "keywords": [
     "llm",