@ai-gui/vue 0.3.0 → 0.4.1

package/dist/index.cjs

@@ -73,19 +73,25 @@ function useActionState(runtime, key) {
 /** Host element for imperative `mount` outputs, wired to Vue's lifecycle. */
 const MountHost = (0, vue.defineComponent)({
 	name: "MountHost",
-	props: { mount: {
-		type: Function,
-		required: true
-	} },
+	props: {
+		mount: {
+			type: Function,
+			required: true
+		},
+		context: {
+			type: Object,
+			required: true
+		}
+	},
 	setup(props) {
 		const elRef = (0, vue.ref)(null);
 		let cleanup;
 		(0, vue.onMounted)(() => {
-			if (elRef.value) cleanup = props.mount(elRef.value);
+			if (elRef.value) cleanup = props.mount(elRef.value, props.context);
 		});
 		(0, vue.watch)(() => props.mount, (mount) => {
 			if (typeof cleanup === "function") cleanup();
-			cleanup = elRef.value ? mount(elRef.value) : void 0;
+			cleanup = elRef.value ? mount(elRef.value, props.context) : void 0;
 		});
 		(0, vue.onBeforeUnmount)(() => {
 			if (typeof cleanup === "function") cleanup();
@@ -97,11 +103,14 @@ const MountHost = (0, vue.defineComponent)({
 	}
 });
 /** Translate a framework-neutral RenderOutput into a Vue VNode. */
-function renderOutput(out, sanitize) {
+function renderOutput(out, sanitize, context = {}) {
 	switch (out.kind) {
 		case "html": return (0, vue.h)("div", { innerHTML: sanitizeOutput(out.html, sanitize) });
-		case "element": return (0, vue.h)(out.tag, out.props, (out.children ?? []).map((child) => renderOutput(child, sanitize)));
-		case "mount": return (0, vue.h)(MountHost, { mount: out.mount });
+		case "element": return (0, vue.h)(out.tag, out.props, (out.children ?? []).map((child) => renderOutput(child, sanitize, context)));
+		case "mount": return (0, vue.h)(MountHost, {
+			mount: out.mount,
+			context
+		});
 		case "card": return (0, vue.h)("pre", { "data-aigui-card-fallback": "" }, [(0, vue.h)("code", JSON.stringify(out.data, null, 2))]);
 	}
 }
@@ -116,6 +125,10 @@ const AsyncOutput = (0, vue.defineComponent)({
 		sanitize: {
 			type: [Boolean, Object],
 			default: void 0
+		},
+		context: {
+			type: Object,
+			default: () => ({})
 		}
 	},
 	setup(props) {
@@ -142,13 +155,42 @@ const AsyncOutput = (0, vue.defineComponent)({
 			if (failed.value) return (0, vue.h)("span", { "data-aigui-async-error": "" });
 			if (!resolved.value) return (0, vue.h)("span", { "data-aigui-async-pending": "" });
 			try {
-				return renderOutput(resolved.value, props.sanitize);
+				return renderOutput(resolved.value, props.sanitize, props.context);
 			} catch {
 				return (0, vue.h)("span", { "data-aigui-async-error": "" });
 			}
 		};
 	}
 });
+function createRenderMountContext(registry, onCardAction) {
+	return { mountCard(host, request) {
+		const component = registry?.getRender(request.type);
+		if (!component) return void 0;
+		const card = (0, vue.markRaw)((0, vue.toRaw)(component));
+		let data = request.data;
+		let destroyed = false;
+		const renderCard$1 = () => (0, vue.render)((0, vue.h)(card, {
+			data,
+			onAction: (action) => onCardAction?.({
+				...action,
+				cardType: request.type
+			})
+		}), host);
+		renderCard$1();
+		return {
+			update(nextData) {
+				if (destroyed) return;
+				data = nextData;
+				renderCard$1();
+			},
+			destroy() {
+				if (destroyed) return;
+				destroyed = true;
+				(0, vue.render)(null, host);
+			}
+		};
+	} };
+}
 function sanitizeOutput(html, sanitize) {
 	if (sanitize === false) return html;
 	return (0, __ai_gui_core.sanitizeHtml)(html, typeof sanitize === "object" ? sanitize : void 0);
@@ -166,12 +208,14 @@ function renderNode(node, ctx) {
 		});
 		try {
 			const out = r(node);
+			const mountContext = createRenderMountContext(ctx.registry, ctx.onCardAction);
 			if (out && typeof out.then === "function") return (0, vue.h)(AsyncOutput, {
 				key: node.key,
 				promise: out,
-				sanitize: ctx.sanitize
+				sanitize: ctx.sanitize,
+				context: mountContext
 			});
-			const vnode = renderOutput(out, ctx.sanitize);
+			const vnode = renderOutput(out, ctx.sanitize, mountContext);
 			vnode.key = node.key;
 			return vnode;
 		} catch {

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import { ShallowRef, VNode } from "vue";
-import { AIGuiPlugin, ASTNode, ActionRuntime, ActionState, CardRegistry, CardStore, FeedOptions, FeedSource, NodeRenderer, RenderOutput, Renderer, RendererOptions } from "@ai-gui/core";
+import { AIGuiPlugin, ASTNode, ActionRuntime, ActionState, CardRegistry, CardStore, FeedOptions, FeedSource, NodeRenderer, RenderMountContext, RenderOutput, Renderer, RendererOptions } from "@ai-gui/core";
 
 //#region src/use-ai-renderer.d.ts
 interface UseAIRendererResult {
@@ -41,7 +41,7 @@ declare function renderNode(node: ASTNode, ctx: RenderContext): VNode;
 //#endregion
 //#region src/render-output.d.ts
 /** Translate a framework-neutral RenderOutput into a Vue VNode. */
-declare function renderOutput(out: RenderOutput, sanitize?: RendererOptions["sanitize"]): VNode;
+declare function renderOutput(out: RenderOutput, sanitize?: RendererOptions["sanitize"], context?: RenderMountContext): VNode;
 
 //#endregion
 /** Await an async RenderOutput, rendering a placeholder until it resolves. */

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { ShallowRef, VNode } from "vue";
-import { AIGuiPlugin, ASTNode, ActionRuntime, ActionState, CardRegistry, CardStore, FeedOptions, FeedSource, NodeRenderer, RenderOutput, Renderer, RendererOptions } from "@ai-gui/core";
+import { AIGuiPlugin, ASTNode, ActionRuntime, ActionState, CardRegistry, CardStore, FeedOptions, FeedSource, NodeRenderer, RenderMountContext, RenderOutput, Renderer, RendererOptions } from "@ai-gui/core";
 
 //#region src/use-ai-renderer.d.ts
 interface UseAIRendererResult {
@@ -41,7 +41,7 @@ declare function renderNode(node: ASTNode, ctx: RenderContext): VNode;
 //#endregion
 //#region src/render-output.d.ts
 /** Translate a framework-neutral RenderOutput into a Vue VNode. */
-declare function renderOutput(out: RenderOutput, sanitize?: RendererOptions["sanitize"]): VNode;
+declare function renderOutput(out: RenderOutput, sanitize?: RendererOptions["sanitize"], context?: RenderMountContext): VNode;
 
 //#endregion
 /** Await an async RenderOutput, rendering a placeholder until it resolves. */

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, h, markRaw, onBeforeUnmount, onMounted, onScopeDispose, ref, shallowRef, toRaw, watch } from "vue";
+import { defineComponent, h, markRaw, onBeforeUnmount, onMounted, onScopeDispose, ref, render, shallowRef, toRaw, watch } from "vue";
 import { Renderer, collectNodeRenderers, sanitizeHtml } from "@ai-gui/core";
 
 //#region src/use-ai-renderer.ts
@@ -49,19 +49,25 @@ function useActionState(runtime, key) {
 /** Host element for imperative `mount` outputs, wired to Vue's lifecycle. */
 const MountHost = defineComponent({
 	name: "MountHost",
-	props: { mount: {
-		type: Function,
-		required: true
-	} },
+	props: {
+		mount: {
+			type: Function,
+			required: true
+		},
+		context: {
+			type: Object,
+			required: true
+		}
+	},
 	setup(props) {
 		const elRef = ref(null);
 		let cleanup;
 		onMounted(() => {
-			if (elRef.value) cleanup = props.mount(elRef.value);
+			if (elRef.value) cleanup = props.mount(elRef.value, props.context);
 		});
 		watch(() => props.mount, (mount) => {
 			if (typeof cleanup === "function") cleanup();
-			cleanup = elRef.value ? mount(elRef.value) : void 0;
+			cleanup = elRef.value ? mount(elRef.value, props.context) : void 0;
 		});
 		onBeforeUnmount(() => {
 			if (typeof cleanup === "function") cleanup();
@@ -73,11 +79,14 @@ const MountHost = defineComponent({
 	}
 });
 /** Translate a framework-neutral RenderOutput into a Vue VNode. */
-function renderOutput(out, sanitize) {
+function renderOutput(out, sanitize, context = {}) {
 	switch (out.kind) {
 		case "html": return h("div", { innerHTML: sanitizeOutput(out.html, sanitize) });
-		case "element": return h(out.tag, out.props, (out.children ?? []).map((child) => renderOutput(child, sanitize)));
-		case "mount": return h(MountHost, { mount: out.mount });
+		case "element": return h(out.tag, out.props, (out.children ?? []).map((child) => renderOutput(child, sanitize, context)));
+		case "mount": return h(MountHost, {
+			mount: out.mount,
+			context
+		});
 		case "card": return h("pre", { "data-aigui-card-fallback": "" }, [h("code", JSON.stringify(out.data, null, 2))]);
 	}
 }
@@ -92,6 +101,10 @@ const AsyncOutput = defineComponent({
 		sanitize: {
 			type: [Boolean, Object],
 			default: void 0
+		},
+		context: {
+			type: Object,
+			default: () => ({})
 		}
 	},
 	setup(props) {
@@ -118,13 +131,42 @@ const AsyncOutput = defineComponent({
 			if (failed.value) return h("span", { "data-aigui-async-error": "" });
 			if (!resolved.value) return h("span", { "data-aigui-async-pending": "" });
 			try {
-				return renderOutput(resolved.value, props.sanitize);
+				return renderOutput(resolved.value, props.sanitize, props.context);
 			} catch {
 				return h("span", { "data-aigui-async-error": "" });
 			}
 		};
 	}
 });
+function createRenderMountContext(registry, onCardAction) {
+	return { mountCard(host, request) {
+		const component = registry?.getRender(request.type);
+		if (!component) return void 0;
+		const card = markRaw(toRaw(component));
+		let data = request.data;
+		let destroyed = false;
+		const renderCard$1 = () => render(h(card, {
+			data,
+			onAction: (action) => onCardAction?.({
+				...action,
+				cardType: request.type
+			})
+		}), host);
+		renderCard$1();
+		return {
+			update(nextData) {
+				if (destroyed) return;
+				data = nextData;
+				renderCard$1();
+			},
+			destroy() {
+				if (destroyed) return;
+				destroyed = true;
+				render(null, host);
+			}
+		};
+	} };
+}
 function sanitizeOutput(html, sanitize) {
 	if (sanitize === false) return html;
 	return sanitizeHtml(html, typeof sanitize === "object" ? sanitize : void 0);
@@ -142,12 +184,14 @@ function renderNode(node, ctx) {
 		});
 		try {
 			const out = r(node);
+			const mountContext = createRenderMountContext(ctx.registry, ctx.onCardAction);
 			if (out && typeof out.then === "function") return h(AsyncOutput, {
 				key: node.key,
 				promise: out,
-				sanitize: ctx.sanitize
+				sanitize: ctx.sanitize,
+				context: mountContext
 			});
-			const vnode = renderOutput(out, ctx.sanitize);
+			const vnode = renderOutput(out, ctx.sanitize, mountContext);
 			vnode.key = node.key;
 			return vnode;
 		} catch {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-gui/vue",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Vue 3 adapter for AIGUI — stream LLM output into live Vue components with cards and plugins.",
   "keywords": [
     "llm",
@@ -51,7 +51,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@ai-gui/core": "0.3.0"
+    "@ai-gui/core": "0.4.1"
   },
   "peerDependencies": {
     "vue": ">=3.3"