@ai-gui/react 0.3.0 → 0.4.1

package/dist/index.cjs

@@ -24,6 +24,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 //#endregion
 const react = __toESM(require("react"));
 const __ai_gui_core = __toESM(require("@ai-gui/core"));
+const react_dom = __toESM(require("react-dom"));
 const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
 
 //#region src/apply-patches.ts
@@ -113,37 +114,85 @@ function useActionState(runtime, key) {
 //#endregion
 //#region src/render-output.tsx
 /** Translate a framework-neutral RenderOutput into React nodes. */
-function renderOutput(out, key, sanitize) {
+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 "element": return (0, react.createElement)(out.tag, {
 			key,
 			...out.props
-		}, (out.children ?? []).map((c, i) => renderOutput(c, String(i), sanitize)));
+		}, (out.children ?? []).map((c, i) => renderOutput(c, String(i), sanitize, context)));
 		case "card": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
 			"data-aigui-card-fallback": true,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: JSON.stringify(out.data, null, 2) })
 		}, key);
-		case "mount": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MountHost, { mount: out.mount }, key);
+		case "mount": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MountHost, {
+			mount: out.mount,
+			context
+		}, key);
 	}
 }
 /** Host a framework-neutral imperative mount into a managed DOM element. */
-function MountHost({ mount }) {
+function MountHost({ mount, context }) {
 	const ref = (0, react.useRef)(null);
+	const [slots, setSlots] = (0, react.useState)([]);
 	(0, react.useEffect)(() => {
 		if (!ref.current) return;
-		const cleanup = mount(ref.current);
+		const mountContext = createMountContext(context, setSlots);
+		const cleanup = mount(ref.current, mountContext);
 		return () => {
 			if (typeof cleanup === "function") cleanup();
 		};
-	}, [mount]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	}, [
+		mount,
+		context?.registry,
+		context?.onCardAction
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref,
 		"data-aigui-mount": true
-	});
+	}), slots.map((slot) => (0, react_dom.createPortal)((0, react.createElement)(slot.Comp, {
+		data: slot.data,
+		onAction: (action) => context?.onCardAction?.({
+			...action,
+			cardType: slot.type
+		})
+	}), slot.host, slot.id))] });
+}
+let nextCardSlotId = 0;
+function createMountContext(context, setSlots) {
+	return { mountCard(host, request) {
+		return mountCard(host, request, context, setSlots);
+	} };
+}
+function mountCard(host, request, context, setSlots) {
+	const Comp = context?.registry?.getRender(request.type);
+	if (!Comp) return void 0;
+	const id = String(nextCardSlotId++);
+	let destroyed = false;
+	setSlots((slots) => [...slots, {
+		id,
+		host,
+		type: request.type,
+		data: request.data,
+		Comp
+	}]);
+	return {
+		update(data) {
+			if (destroyed) return;
+			setSlots((slots) => slots.map((slot) => slot.id === id ? {
+				...slot,
+				data
+			} : slot));
+		},
+		destroy() {
+			if (destroyed) return;
+			destroyed = true;
+			setSlots((slots) => slots.filter((slot) => slot.id !== id));
+		}
+	};
 }
 /** Await an async RenderOutput, rendering a placeholder until it resolves. */
-function AsyncOutput({ promise, sanitize }) {
+function AsyncOutput({ promise, sanitize, context }) {
 	const [resolved, setResolved] = (0, react.useState)(null);
 	const [failed, setFailed] = (0, react.useState)(false);
 	(0, react.useEffect)(() => {
@@ -162,7 +211,7 @@ function AsyncOutput({ promise, sanitize }) {
 	if (failed) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { "data-aigui-async-error": true });
 	if (resolved === null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { "data-aigui-async-pending": true });
 	try {
-		return renderOutput(resolved, void 0, sanitize);
+		return renderOutput(resolved, void 0, sanitize, context);
 	} catch {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { "data-aigui-async-error": true });
 	}
@@ -181,16 +230,11 @@ function renderNode(node, ctx) {
 			"data-aigui-block-loading": "",
 			"data-block-type": node.type
 		}, node.key);
-		try {
-			const out = r(node);
-			if (out && typeof out.then === "function") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AsyncOutput, {
-				promise: out,
-				sanitize: ctx.sanitize
-			}, node.key);
-			return renderOutput(out, node.key, ctx.sanitize);
-		} catch {
-			return renderFallback(node, ctx);
-		}
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PluginOutputHost, {
+			node,
+			renderer: r,
+			context: ctx
+		}, node.key);
 	}
 	switch (node.type) {
 		case "heading": return (0, react.createElement)(node.tag ?? "h1", {
@@ -208,6 +252,33 @@ function renderNode(node, ctx) {
 		default: return renderFallback(node, ctx);
 	}
 }
+function PluginOutputHost({ node, renderer, context }) {
+	const cache = (0, react.useRef)();
+	const signature = nodeSignature(node);
+	try {
+		if (!cache.current || cache.current.renderer !== renderer || cache.current.signature !== signature) cache.current = {
+			renderer,
+			signature,
+			output: renderer(node)
+		};
+		const output = cache.current.output;
+		if (output && typeof output.then === "function") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AsyncOutput, {
+			promise: output,
+			sanitize: context.sanitize,
+			context
+		});
+		return renderOutput(output, void 0, context.sanitize, context);
+	} catch {
+		return renderFallback(node, context);
+	}
+}
+function nodeSignature(node) {
+	try {
+		return JSON.stringify(node);
+	} catch {
+		return node;
+	}
+}
 function renderFallback(node, ctx) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { dangerouslySetInnerHTML: { __html: renderHtml(node.html ?? node.content ?? "", ctx) } }, node.key);
 }

package/dist/index.d.cts

@@ -69,7 +69,7 @@ declare const AIRenderer: react1.ForwardRefExoticComponent<AIRendererProps & rea
 //#endregion
 //#region src/render-output.d.ts
 /** Translate a framework-neutral RenderOutput into React nodes. */
-declare function renderOutput(out: RenderOutput, key?: string, sanitize?: RendererOptions["sanitize"]): ReactNode;
+declare function renderOutput(out: RenderOutput, key?: string, sanitize?: RendererOptions["sanitize"], context?: RenderContext): ReactNode;
 
 //#endregion
 //#region src/apply-patches.d.ts

package/dist/index.d.ts

@@ -69,7 +69,7 @@ declare const AIRenderer: react1.ForwardRefExoticComponent<AIRendererProps & rea
 //#endregion
 //#region src/render-output.d.ts
 /** Translate a framework-neutral RenderOutput into React nodes. */
-declare function renderOutput(out: RenderOutput, key?: string, sanitize?: RendererOptions["sanitize"]): ReactNode;
+declare function renderOutput(out: RenderOutput, key?: string, sanitize?: RendererOptions["sanitize"], context?: RenderContext): ReactNode;
 
 //#endregion
 //#region src/apply-patches.d.ts

package/dist/index.js

@@ -1,6 +1,7 @@
-import { createElement, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment, createElement, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Renderer, collectNodeRenderers, getIdleActionState, sanitizeHtml } from "@ai-gui/core";
-import { jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/apply-patches.ts
 function applyPatches(nodes, patches) {
@@ -89,37 +90,85 @@ function useActionState(runtime, key) {
 //#endregion
 //#region src/render-output.tsx
 /** Translate a framework-neutral RenderOutput into React nodes. */
-function renderOutput(out, key, sanitize) {
+function renderOutput(out, key, sanitize, context) {
 	switch (out.kind) {
 		case "html": return /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: sanitizeOutput(out.html, sanitize) } }, key);
 		case "element": return createElement(out.tag, {
 			key,
 			...out.props
-		}, (out.children ?? []).map((c, i) => renderOutput(c, String(i), sanitize)));
+		}, (out.children ?? []).map((c, i) => renderOutput(c, String(i), sanitize, context)));
 		case "card": return /* @__PURE__ */ jsx("pre", {
 			"data-aigui-card-fallback": true,
 			children: /* @__PURE__ */ jsx("code", { children: JSON.stringify(out.data, null, 2) })
 		}, key);
-		case "mount": return /* @__PURE__ */ jsx(MountHost, { mount: out.mount }, key);
+		case "mount": return /* @__PURE__ */ jsx(MountHost, {
+			mount: out.mount,
+			context
+		}, key);
 	}
 }
 /** Host a framework-neutral imperative mount into a managed DOM element. */
-function MountHost({ mount }) {
+function MountHost({ mount, context }) {
 	const ref = useRef(null);
+	const [slots, setSlots] = useState([]);
 	useEffect(() => {
 		if (!ref.current) return;
-		const cleanup = mount(ref.current);
+		const mountContext = createMountContext(context, setSlots);
+		const cleanup = mount(ref.current, mountContext);
 		return () => {
 			if (typeof cleanup === "function") cleanup();
 		};
-	}, [mount]);
-	return /* @__PURE__ */ jsx("div", {
+	}, [
+		mount,
+		context?.registry,
+		context?.onCardAction
+	]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 		ref,
 		"data-aigui-mount": true
-	});
+	}), slots.map((slot) => createPortal(createElement(slot.Comp, {
+		data: slot.data,
+		onAction: (action) => context?.onCardAction?.({
+			...action,
+			cardType: slot.type
+		})
+	}), slot.host, slot.id))] });
+}
+let nextCardSlotId = 0;
+function createMountContext(context, setSlots) {
+	return { mountCard(host, request) {
+		return mountCard(host, request, context, setSlots);
+	} };
+}
+function mountCard(host, request, context, setSlots) {
+	const Comp = context?.registry?.getRender(request.type);
+	if (!Comp) return void 0;
+	const id = String(nextCardSlotId++);
+	let destroyed = false;
+	setSlots((slots) => [...slots, {
+		id,
+		host,
+		type: request.type,
+		data: request.data,
+		Comp
+	}]);
+	return {
+		update(data) {
+			if (destroyed) return;
+			setSlots((slots) => slots.map((slot) => slot.id === id ? {
+				...slot,
+				data
+			} : slot));
+		},
+		destroy() {
+			if (destroyed) return;
+			destroyed = true;
+			setSlots((slots) => slots.filter((slot) => slot.id !== id));
+		}
+	};
 }
 /** Await an async RenderOutput, rendering a placeholder until it resolves. */
-function AsyncOutput({ promise, sanitize }) {
+function AsyncOutput({ promise, sanitize, context }) {
 	const [resolved, setResolved] = useState(null);
 	const [failed, setFailed] = useState(false);
 	useEffect(() => {
@@ -138,7 +187,7 @@ function AsyncOutput({ promise, sanitize }) {
 	if (failed) return /* @__PURE__ */ jsx("span", { "data-aigui-async-error": true });
 	if (resolved === null) return /* @__PURE__ */ jsx("span", { "data-aigui-async-pending": true });
 	try {
-		return renderOutput(resolved, void 0, sanitize);
+		return renderOutput(resolved, void 0, sanitize, context);
 	} catch {
 		return /* @__PURE__ */ jsx("span", { "data-aigui-async-error": true });
 	}
@@ -157,16 +206,11 @@ function renderNode(node, ctx) {
 			"data-aigui-block-loading": "",
 			"data-block-type": node.type
 		}, node.key);
-		try {
-			const out = r(node);
-			if (out && typeof out.then === "function") return /* @__PURE__ */ jsx(AsyncOutput, {
-				promise: out,
-				sanitize: ctx.sanitize
-			}, node.key);
-			return renderOutput(out, node.key, ctx.sanitize);
-		} catch {
-			return renderFallback(node, ctx);
-		}
+		return /* @__PURE__ */ jsx(PluginOutputHost, {
+			node,
+			renderer: r,
+			context: ctx
+		}, node.key);
 	}
 	switch (node.type) {
 		case "heading": return createElement(node.tag ?? "h1", {
@@ -184,6 +228,33 @@ function renderNode(node, ctx) {
 		default: return renderFallback(node, ctx);
 	}
 }
+function PluginOutputHost({ node, renderer, context }) {
+	const cache = useRef();
+	const signature = nodeSignature(node);
+	try {
+		if (!cache.current || cache.current.renderer !== renderer || cache.current.signature !== signature) cache.current = {
+			renderer,
+			signature,
+			output: renderer(node)
+		};
+		const output = cache.current.output;
+		if (output && typeof output.then === "function") return /* @__PURE__ */ jsx(AsyncOutput, {
+			promise: output,
+			sanitize: context.sanitize,
+			context
+		});
+		return renderOutput(output, void 0, context.sanitize, context);
+	} catch {
+		return renderFallback(node, context);
+	}
+}
+function nodeSignature(node) {
+	try {
+		return JSON.stringify(node);
+	} catch {
+		return node;
+	}
+}
 function renderFallback(node, ctx) {
 	return /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: renderHtml(node.html ?? node.content ?? "", ctx) } }, node.key);
 }

package/package.json

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