@ai-gui/vanilla 0.4.4 → 0.6.0

package/dist/index.cjs

@@ -30,7 +30,7 @@ function renderOutputToElement(out, sanitize, mountContext = {}) {
 	switch (out.kind) {
 		case "html": {
 			const el = document.createElement("div");
-			el.innerHTML = sanitizeOutput(out.html, sanitize);
+			el.innerHTML = (0, __ai_gui_core.sanitizeRenderedHtml)(out.html, sanitize, out.trusted);
 			return el;
 		}
 		case "element": {
@@ -61,10 +61,6 @@ function renderOutputToElement(out, sanitize, mountContext = {}) {
 		}
 	}
 }
-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-dom.ts
@@ -78,7 +74,7 @@ function renderNodeToElement(node, ctx) {
 			return loading;
 		}
 		try {
-			const out = r(node);
+			const out = r(node, { theme: ctx.theme });
 			if (typeof out?.then === "function") {
 				const host = document.createElement("div");
 				host.setAttribute("data-aigui-async-pending", "");
@@ -427,7 +423,9 @@ function updateElementInPlace(el, node, ctx) {
 //#endregion
 //#region src/create-renderer.ts
 function createRenderer(el, options = {}) {
-	const { actionRuntime, cardStore, onCardAction,...rendererOpts } = options;
+	const { actionRuntime, cardStore, onCardAction, theme, onRender,...rendererOpts } = options;
+	let rendered = "";
+	let latestNodes = [];
 	let actionScope = {
 		owner: {},
 		controller: new AbortController()
@@ -447,7 +445,10 @@ function createRenderer(el, options = {}) {
 	const renderer = new __ai_gui_core.Renderer({
 		...rendererOpts,
 		onPatch: (_patches, nodes) => {
-			if (!destroyed) reconcile(el, nodes, ctx, state);
+			if (destroyed) return;
+			latestNodes = nodes;
+			reconcile(el, nodes, ctx, state);
+			onRender?.(nodes);
 		}
 	});
 	const ctx = {
@@ -457,7 +458,8 @@ function createRenderer(el, options = {}) {
 		plugins: options.plugins,
 		nodeRenderers: (0, __ai_gui_core.collectNodeRenderers)(options.plugins, { debugTarget: renderer }),
 		sanitize: options.sanitize,
-		sanitized: true
+		sanitized: true,
+		theme
 	};
 	const disposeAll = () => {
 		for (const entry of state.els.values()) disposeEl(entry.el);
@@ -473,8 +475,33 @@ function createRenderer(el, options = {}) {
 		debugSource: "renderer",
 		subscribeDebug: (listener) => renderer.subscribeDebug(listener),
 		push: (c) => {
-			if (!destroyed) renderer.push(c);
+			if (!destroyed) {
+				renderer.push(c);
+				rendered += c;
+			}
+		},
+		setText: (text) => {
+			if (destroyed || text === rendered) return;
+			if (text.startsWith(rendered)) renderer.push(text.slice(rendered.length));
+			else {
+				resetActionScope();
+				disposeAll();
+				renderer.reset();
+				state.els.clear();
+				el.replaceChildren();
+				renderer.push(text);
+			}
+			rendered = text;
+		},
+		setTheme: (next) => {
+			if (destroyed || ctx.theme === next) return;
+			ctx.theme = next;
+			disposeAll();
+			state.els.clear();
+			el.replaceChildren();
+			reconcile(el, latestNodes, ctx, state);
 		},
+		exportImages: (exportOptions) => (0, __ai_gui_core.exportRenderedImages)(el, exportOptions),
 		feed: (source, feedOptions) => destroyed ? Promise.resolve() : renderer.feed(source, feedOptions),
 		reset: () => {
 			if (!destroyed) {
@@ -483,11 +510,13 @@ function createRenderer(el, options = {}) {
 				renderer.reset();
 				state.els.clear();
 				el.replaceChildren();
+				rendered = "";
 			}
 		},
 		destroy: () => {
 			if (!destroyed) {
 				destroyed = true;
+				rendered = "";
 				actionScope.controller.abort();
 				renderer.reset();
 				disposeAll();

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { AIGuiPlugin, ASTNode, ActionRuntime, CardAction, CardRegistry, CardStore, DebugEventListener, FeedOptions, FeedSource, NodeRenderer, RenderMountContext, RenderOutput, RendererOptions } from "@ai-gui/core";
+import { AIGuiPlugin, ASTNode, ActionRuntime, CardAction, CardRegistry, CardStore, DebugEventListener, ExportImageOptions, ExportedImage, FeedOptions, FeedSource, NodeRenderer, RenderMountContext, RenderOutput, RendererOptions } from "@ai-gui/core";
 
 //#region src/render-node-dom.d.ts
 interface VanillaCardAction {
@@ -28,6 +28,8 @@ interface DomRenderContext {
   nodeRenderers?: Record<string, NodeRenderer>;
   sanitize?: RendererOptions["sanitize"];
   sanitized?: boolean;
+  /** The host's colour scheme, handed to every plugin that renders a node. */
+  theme?: string;
 }
 declare function renderNodeToElement(node: ASTNode, ctx: DomRenderContext): HTMLElement;
 
@@ -37,12 +39,28 @@ interface CreateRendererOptions extends Omit<RendererOptions, "onPatch"> {
   actionRuntime?: ActionRuntime;
   cardStore?: CardStore;
   onCardAction?: DomRenderContext["onCardAction"];
+  /** The host's colour scheme, handed to every plugin. Change it later with `setTheme`. */
+  theme?: string;
+  /** Called with the nodes on screen whenever they change. */
+  onRender?: (nodes: ASTNode[]) => void;
 }
 interface VanillaRenderer {
   readonly debugSource: "renderer";
   subscribeDebug: (listener: DebugEventListener) => () => void;
   push: (chunk: string) => void;
+  /**
+   * Render this whole text, pushing only what it adds to what is already on screen.
+   *
+   * Streaming an answer means calling this with a longer string each time. Working out the delta
+   * is the renderer's job — a caller doing it itself has to remember what it sent and notice when
+   * the next text is not a continuation.
+   */
+  setText: (text: string) => void;
+  /** Redraw the plugins for another colour scheme. */
+  setTheme: (theme: string | undefined) => void;
   feed: (source: FeedSource, options?: FeedOptions) => Promise<void>;
+  /** Export every drawing currently rendered, as PNG data URLs. */
+  exportImages: (options?: ExportImageOptions) => Promise<ExportedImage[]>;
   reset: () => void;
   destroy: () => void;
 }

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { AIGuiPlugin, ASTNode, ActionRuntime, CardAction, CardRegistry, CardStore, DebugEventListener, FeedOptions, FeedSource, NodeRenderer, RenderMountContext, RenderOutput, RendererOptions } from "@ai-gui/core";
+import { AIGuiPlugin, ASTNode, ActionRuntime, CardAction, CardRegistry, CardStore, DebugEventListener, ExportImageOptions, ExportedImage, FeedOptions, FeedSource, NodeRenderer, RenderMountContext, RenderOutput, RendererOptions } from "@ai-gui/core";
 
 //#region src/render-node-dom.d.ts
 interface VanillaCardAction {
@@ -28,6 +28,8 @@ interface DomRenderContext {
   nodeRenderers?: Record<string, NodeRenderer>;
   sanitize?: RendererOptions["sanitize"];
   sanitized?: boolean;
+  /** The host's colour scheme, handed to every plugin that renders a node. */
+  theme?: string;
 }
 declare function renderNodeToElement(node: ASTNode, ctx: DomRenderContext): HTMLElement;
 
@@ -37,12 +39,28 @@ interface CreateRendererOptions extends Omit<RendererOptions, "onPatch"> {
   actionRuntime?: ActionRuntime;
   cardStore?: CardStore;
   onCardAction?: DomRenderContext["onCardAction"];
+  /** The host's colour scheme, handed to every plugin. Change it later with `setTheme`. */
+  theme?: string;
+  /** Called with the nodes on screen whenever they change. */
+  onRender?: (nodes: ASTNode[]) => void;
 }
 interface VanillaRenderer {
   readonly debugSource: "renderer";
   subscribeDebug: (listener: DebugEventListener) => () => void;
   push: (chunk: string) => void;
+  /**
+   * Render this whole text, pushing only what it adds to what is already on screen.
+   *
+   * Streaming an answer means calling this with a longer string each time. Working out the delta
+   * is the renderer's job — a caller doing it itself has to remember what it sent and notice when
+   * the next text is not a continuation.
+   */
+  setText: (text: string) => void;
+  /** Redraw the plugins for another colour scheme. */
+  setTheme: (theme: string | undefined) => void;
   feed: (source: FeedSource, options?: FeedOptions) => Promise<void>;
+  /** Export every drawing currently rendered, as PNG data URLs. */
+  exportImages: (options?: ExportImageOptions) => Promise<ExportedImage[]>;
   reset: () => void;
   destroy: () => void;
 }

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Renderer, collectNodeRenderers, sanitizeHtml } from "@ai-gui/core";
+import { Renderer, collectNodeRenderers, exportRenderedImages, sanitizeHtml, sanitizeRenderedHtml } from "@ai-gui/core";
 
 //#region src/render-output.ts
 /** Translate a framework-neutral RenderOutput (from a plugin node renderer) into a DOM element. */
@@ -6,7 +6,7 @@ function renderOutputToElement(out, sanitize, mountContext = {}) {
 	switch (out.kind) {
 		case "html": {
 			const el = document.createElement("div");
-			el.innerHTML = sanitizeOutput(out.html, sanitize);
+			el.innerHTML = sanitizeRenderedHtml(out.html, sanitize, out.trusted);
 			return el;
 		}
 		case "element": {
@@ -37,10 +37,6 @@ function renderOutputToElement(out, sanitize, mountContext = {}) {
 		}
 	}
 }
-function sanitizeOutput(html, sanitize) {
-	if (sanitize === false) return html;
-	return sanitizeHtml(html, typeof sanitize === "object" ? sanitize : void 0);
-}
 
 //#endregion
 //#region src/render-node-dom.ts
@@ -54,7 +50,7 @@ function renderNodeToElement(node, ctx) {
 			return loading;
 		}
 		try {
-			const out = r(node);
+			const out = r(node, { theme: ctx.theme });
 			if (typeof out?.then === "function") {
 				const host = document.createElement("div");
 				host.setAttribute("data-aigui-async-pending", "");
@@ -403,7 +399,9 @@ function updateElementInPlace(el, node, ctx) {
 //#endregion
 //#region src/create-renderer.ts
 function createRenderer(el, options = {}) {
-	const { actionRuntime, cardStore, onCardAction,...rendererOpts } = options;
+	const { actionRuntime, cardStore, onCardAction, theme, onRender,...rendererOpts } = options;
+	let rendered = "";
+	let latestNodes = [];
 	let actionScope = {
 		owner: {},
 		controller: new AbortController()
@@ -423,7 +421,10 @@ function createRenderer(el, options = {}) {
 	const renderer = new Renderer({
 		...rendererOpts,
 		onPatch: (_patches, nodes) => {
-			if (!destroyed) reconcile(el, nodes, ctx, state);
+			if (destroyed) return;
+			latestNodes = nodes;
+			reconcile(el, nodes, ctx, state);
+			onRender?.(nodes);
 		}
 	});
 	const ctx = {
@@ -433,7 +434,8 @@ function createRenderer(el, options = {}) {
 		plugins: options.plugins,
 		nodeRenderers: collectNodeRenderers(options.plugins, { debugTarget: renderer }),
 		sanitize: options.sanitize,
-		sanitized: true
+		sanitized: true,
+		theme
 	};
 	const disposeAll = () => {
 		for (const entry of state.els.values()) disposeEl(entry.el);
@@ -449,8 +451,33 @@ function createRenderer(el, options = {}) {
 		debugSource: "renderer",
 		subscribeDebug: (listener) => renderer.subscribeDebug(listener),
 		push: (c) => {
-			if (!destroyed) renderer.push(c);
+			if (!destroyed) {
+				renderer.push(c);
+				rendered += c;
+			}
+		},
+		setText: (text) => {
+			if (destroyed || text === rendered) return;
+			if (text.startsWith(rendered)) renderer.push(text.slice(rendered.length));
+			else {
+				resetActionScope();
+				disposeAll();
+				renderer.reset();
+				state.els.clear();
+				el.replaceChildren();
+				renderer.push(text);
+			}
+			rendered = text;
+		},
+		setTheme: (next) => {
+			if (destroyed || ctx.theme === next) return;
+			ctx.theme = next;
+			disposeAll();
+			state.els.clear();
+			el.replaceChildren();
+			reconcile(el, latestNodes, ctx, state);
 		},
+		exportImages: (exportOptions) => exportRenderedImages(el, exportOptions),
 		feed: (source, feedOptions) => destroyed ? Promise.resolve() : renderer.feed(source, feedOptions),
 		reset: () => {
 			if (!destroyed) {
@@ -459,11 +486,13 @@ function createRenderer(el, options = {}) {
 				renderer.reset();
 				state.els.clear();
 				el.replaceChildren();
+				rendered = "";
 			}
 		},
 		destroy: () => {
 			if (!destroyed) {
 				destroyed = true;
+				rendered = "";
 				actionScope.controller.abort();
 				renderer.reset();
 				disposeAll();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-gui/vanilla",
-  "version": "0.4.4",
+  "version": "0.6.0",
   "description": "Framework-free DOM adapter for AIGUI — stream LLM output straight into the DOM.",
   "keywords": [
     "llm",
@@ -50,7 +50,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@ai-gui/core": "0.4.4"
+    "@ai-gui/core": "0.6.0"
   },
   "scripts": {
     "build": "tsdown",