@ai-gui/react 0.5.0 → 0.6.0

package/dist/index.cjs

@@ -126,7 +126,7 @@ function useActionState(runtime, key) {
 /** Translate a framework-neutral RenderOutput into React nodes. */
 function renderOutput(out, key, sanitize, context) {
 	switch (out.kind) {
-		case "html": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { dangerouslySetInnerHTML: { __html: sanitizeOutput(out.html, sanitize) } }, key);
+		case "html": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { dangerouslySetInnerHTML: { __html: (0, __ai_gui_core.sanitizeRenderedHtml)(out.html, sanitize, out.trusted) } }, key);
 		case "element": return (0, react.createElement)(out.tag, {
 			key,
 			...out.props
@@ -226,10 +226,6 @@ function AsyncOutput({ promise, sanitize, context }) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { "data-aigui-async-error": true });
 	}
 }
-function sanitizeOutput(html, sanitize) {
-	if (sanitize === false) return html;
-	return (0, __ai_gui_core.sanitizeHtml)(html, typeof sanitize === "object" ? sanitize : void 0);
-}
 
 //#endregion
 //#region src/render-node.tsx
@@ -396,6 +392,7 @@ const AIRenderer = (0, react.forwardRef)(function AIRenderer$1(props, ref) {
 	const { renderer, nodes, push, feed, reset: resetRenderer } = useAIRenderer(opts);
 	const actionScope = (0, react.useRef)(createActionScope());
 	const rendered = (0, react.useRef)("");
+	const root = (0, react.useRef)(null);
 	(0, react.useEffect)(() => () => {
 		actionScope.current.controller.abort();
 		actionScope.current = createActionScope();
@@ -447,16 +444,19 @@ const AIRenderer = (0, react.forwardRef)(function AIRenderer$1(props, ref) {
 		}
 		onCardAction?.(action);
 	}, [actionRuntime, onCardAction]);
+	const exportImages = (0, react.useCallback)((options) => root.current ? (0, __ai_gui_core.exportRenderedImages)(root.current, options) : Promise.resolve([]), []);
 	(0, react.useImperativeHandle)(ref, () => ({
 		debugSource: "renderer",
 		subscribeDebug: (listener) => renderer.subscribeDebug(listener),
 		push,
 		feed,
+		exportImages,
 		reset
 	}), [
 		renderer,
 		push,
 		feed,
+		exportImages,
 		reset
 	]);
 	const nodeRenderers = (0, react.useMemo)(() => (0, __ai_gui_core.collectNodeRenderers)(plugins, { debugTarget: renderer }), [plugins, renderer]);
@@ -473,6 +473,7 @@ const AIRenderer = (0, react.forwardRef)(function AIRenderer$1(props, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className,
 		"data-aigui-renderer": true,
+		ref: root,
 		children: nodes.map((n) => renderNode(n, ctx))
 	});
 });

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { AIGuiPlugin, ASTNode, ActionRuntime, ActionState, CardAction, CardRegistry, CardStore, DebugEventListener, FeedOptions, FeedSource, NodeRenderer, Patch, RenderOutput, Renderer, RendererOptions } from "@ai-gui/core";
+import { AIGuiPlugin, ASTNode, ActionRuntime, ActionState, CardAction, CardRegistry, CardStore, DebugEventListener, ExportImageOptions, ExportedImage, FeedOptions, FeedSource, NodeRenderer, Patch, RenderOutput, Renderer, RendererOptions } from "@ai-gui/core";
 import * as react0 from "react";
 import * as react1 from "react";
 import { ReactNode } from "react";
@@ -53,6 +53,13 @@ interface AIRendererHandle {
   subscribeDebug: (listener: DebugEventListener) => () => void;
   push: (chunk: string) => void;
   feed: (source: FeedSource, options?: FeedOptions) => Promise<void>;
+  /**
+   * Export every drawing currently rendered, as PNG data URLs.
+   *
+   * The element the drawings live in belongs to the renderer, so a host offering "save this chart"
+   * would otherwise have to wrap it in one of its own just to find them.
+   */
+  exportImages: (options?: ExportImageOptions) => Promise<ExportedImage[]>;
   reset: () => void;
 }
 interface AIRendererProps {

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react0 from "react";
 import * as react1 from "react";
 import { ReactNode } from "react";
-import { AIGuiPlugin, ASTNode, ActionRuntime, ActionState, CardAction, CardRegistry, CardStore, DebugEventListener, FeedOptions, FeedSource, NodeRenderer, Patch, RenderOutput, Renderer, RendererOptions } from "@ai-gui/core";
+import { AIGuiPlugin, ASTNode, ActionRuntime, ActionState, CardAction, CardRegistry, CardStore, DebugEventListener, ExportImageOptions, ExportedImage, FeedOptions, FeedSource, NodeRenderer, Patch, RenderOutput, Renderer, RendererOptions } from "@ai-gui/core";
 
 //#region src/use-ai-renderer.d.ts
 interface UseAIRendererResult {
@@ -53,6 +53,13 @@ interface AIRendererHandle {
   subscribeDebug: (listener: DebugEventListener) => () => void;
   push: (chunk: string) => void;
   feed: (source: FeedSource, options?: FeedOptions) => Promise<void>;
+  /**
+   * Export every drawing currently rendered, as PNG data URLs.
+   *
+   * The element the drawings live in belongs to the renderer, so a host offering "save this chart"
+   * would otherwise have to wrap it in one of its own just to find them.
+   */
+  exportImages: (options?: ExportImageOptions) => Promise<ExportedImage[]>;
   reset: () => void;
 }
 interface AIRendererProps {

package/dist/index.js

@@ -1,5 +1,5 @@
 import { Fragment, createElement, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { Renderer, collectNodeRenderers, getIdleActionState, sanitizeHtml } from "@ai-gui/core";
+import { Renderer, collectNodeRenderers, exportRenderedImages, getIdleActionState, sanitizeHtml, sanitizeRenderedHtml } from "@ai-gui/core";
 import { createPortal } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -102,7 +102,7 @@ function useActionState(runtime, key) {
 /** Translate a framework-neutral RenderOutput into React nodes. */
 function renderOutput(out, key, sanitize, context) {
 	switch (out.kind) {
-		case "html": return /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: sanitizeOutput(out.html, sanitize) } }, key);
+		case "html": return /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: sanitizeRenderedHtml(out.html, sanitize, out.trusted) } }, key);
 		case "element": return createElement(out.tag, {
 			key,
 			...out.props
@@ -202,10 +202,6 @@ function AsyncOutput({ promise, sanitize, context }) {
 		return /* @__PURE__ */ jsx("span", { "data-aigui-async-error": true });
 	}
 }
-function sanitizeOutput(html, sanitize) {
-	if (sanitize === false) return html;
-	return sanitizeHtml(html, typeof sanitize === "object" ? sanitize : void 0);
-}
 
 //#endregion
 //#region src/render-node.tsx
@@ -372,6 +368,7 @@ const AIRenderer = forwardRef(function AIRenderer$1(props, ref) {
 	const { renderer, nodes, push, feed, reset: resetRenderer } = useAIRenderer(opts);
 	const actionScope = useRef(createActionScope());
 	const rendered = useRef("");
+	const root = useRef(null);
 	useEffect(() => () => {
 		actionScope.current.controller.abort();
 		actionScope.current = createActionScope();
@@ -423,16 +420,19 @@ const AIRenderer = forwardRef(function AIRenderer$1(props, ref) {
 		}
 		onCardAction?.(action);
 	}, [actionRuntime, onCardAction]);
+	const exportImages = useCallback((options) => root.current ? exportRenderedImages(root.current, options) : Promise.resolve([]), []);
 	useImperativeHandle(ref, () => ({
 		debugSource: "renderer",
 		subscribeDebug: (listener) => renderer.subscribeDebug(listener),
 		push,
 		feed,
+		exportImages,
 		reset
 	}), [
 		renderer,
 		push,
 		feed,
+		exportImages,
 		reset
 	]);
 	const nodeRenderers = useMemo(() => collectNodeRenderers(plugins, { debugTarget: renderer }), [plugins, renderer]);
@@ -449,6 +449,7 @@ const AIRenderer = forwardRef(function AIRenderer$1(props, ref) {
 	return /* @__PURE__ */ jsx("div", {
 		className,
 		"data-aigui-renderer": true,
+		ref: root,
 		children: nodes.map((n) => renderNode(n, ctx))
 	});
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-gui/react",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "React adapter for AIGUI — stream LLM output into live React components with cards, plugins, and interactive widgets.",
   "keywords": [
     "llm",
@@ -50,7 +50,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@ai-gui/core": "0.5.0"
+    "@ai-gui/core": "0.6.0"
   },
   "peerDependencies": {
     "react": ">=18",