@ai-gui/vanilla 0.3.0 → 0.4.0

package/dist/index.cjs

@@ -26,7 +26,7 @@ const __ai_gui_core = __toESM(require("@ai-gui/core"));
 
 //#region src/render-output.ts
 /** Translate a framework-neutral RenderOutput (from a plugin node renderer) into a DOM element. */
-function renderOutputToElement(out, sanitize) {
+function renderOutputToElement(out, sanitize, mountContext = {}) {
 	switch (out.kind) {
 		case "html": {
 			const el = document.createElement("div");
@@ -37,7 +37,7 @@ function renderOutputToElement(out, sanitize) {
 			const el = document.createElement(out.tag);
 			for (const [key, value] of Object.entries(out.props ?? {})) if (key === "class" || key === "className") el.className = String(value);
 			else el.setAttribute(key, String(value));
-			for (const child of out.children ?? []) el.appendChild(renderOutputToElement(child, sanitize));
+			for (const child of out.children ?? []) el.appendChild(renderOutputToElement(child, sanitize, mountContext));
 			return el;
 		}
 		case "card": {
@@ -53,7 +53,7 @@ function renderOutputToElement(out, sanitize) {
 			el.setAttribute("data-aigui-mount", "");
 			queueMicrotask(() => {
 				if (el.__aiguiDisposed) return;
-				const c = out.mount(el);
+				const c = out.mount(el, mountContext);
 				if (typeof c === "function") if (el.__aiguiDisposed) c();
 				else el.__aiguiCleanup = c;
 			});
@@ -85,7 +85,7 @@ function renderNodeToElement(node, ctx) {
 				out.then((res) => {
 					if (host.__aiguiDisposed) return;
 					host.removeAttribute("data-aigui-async-pending");
-					host.replaceChildren(renderOutputToElement(res, ctx.sanitize));
+					host.replaceChildren(renderOutputToElement(res, ctx.sanitize, createRenderMountContext(ctx)));
 				}, () => {
 					if (host.__aiguiDisposed) return;
 					host.removeAttribute("data-aigui-async-pending");
@@ -93,7 +93,7 @@ function renderNodeToElement(node, ctx) {
 				});
 				return host;
 			}
-			return renderOutputToElement(out, ctx.sanitize);
+			return renderOutputToElement(out, ctx.sanitize, createRenderMountContext(ctx));
 		} catch {
 			return renderFallback(node, ctx);
 		}
@@ -162,6 +162,53 @@ function renderCardElement(node, ctx) {
 	host.__aiguiCleanup = () => controller.destroy();
 	return host;
 }
+function createRenderMountContext(ctx) {
+	return { mountCard(host, request) {
+		return mountCardSlot(host, request, ctx);
+	} };
+}
+function mountCardSlot(host, request, ctx) {
+	const factory = ctx.registry?.getRender(request.type);
+	if (!factory) return void 0;
+	return createVanillaCardSlot(host, request.data, factory, () => ({
+		state: { status: "idle" },
+		onAction: (action) => ctx.onCardAction?.({
+			...action,
+			cardType: request.type
+		})
+	}));
+}
+function createVanillaCardSlot(host, initialData, factory, context) {
+	let destroyed = false;
+	let instance;
+	let element;
+	const mount = (data) => {
+		const rendered = factory(data, context());
+		if (isVanillaCardInstance(rendered)) {
+			instance = rendered;
+			element = rendered.element;
+		} else {
+			instance = void 0;
+			element = rendered;
+		}
+		host.replaceChildren(element);
+	};
+	mount(initialData);
+	return {
+		element: () => element,
+		update(data) {
+			if (destroyed) return;
+			if (instance) instance.update(data, context());
+			else mount(data);
+		},
+		destroy() {
+			if (destroyed) return;
+			destroyed = true;
+			instance?.destroy?.();
+			instance = void 0;
+		}
+	};
+}
 function createCardFallback(card, ctx) {
 	const pre = document.createElement("pre");
 	pre.setAttribute("data-aigui-card-fallback", "");
@@ -206,8 +253,7 @@ function createCardController(host, initialCard, factory, ctx) {
 	let card = initialCard;
 	let destroyed = false;
 	let unsubscribe = () => {};
-	let instance;
-	let element;
+	let slot;
 	let missing = false;
 	const id = card.id;
 	const onAction = (action) => ctx.onCardAction?.({
@@ -229,20 +275,11 @@ function createCardController(host, initialCard, factory, ctx) {
 	} catch (error) {
 		registrationError = error;
 	}
-	const context = () => ({
-		state,
-		onAction
-	});
 	const mount = (nextData) => {
-		const rendered = factory(nextData, context());
-		if (isVanillaCardInstance(rendered)) {
-			instance = rendered;
-			element = rendered.element;
-		} else {
-			instance = void 0;
-			element = rendered;
-		}
-		host.replaceChildren(element);
+		slot = createVanillaCardSlot(host, nextData, factory, () => ({
+			state,
+			onAction
+		}));
 	};
 	const update = (nextData, nextState) => {
 		if (destroyed) return;
@@ -252,9 +289,10 @@ function createCardController(host, initialCard, factory, ctx) {
 		if (missing) {
 			missing = false;
 			host.removeAttribute("data-aigui-card-missing");
+			const element = slot?.element();
 			if (element) host.replaceChildren(element);
 		}
-		if (instance) instance.update(data, context());
+		if (slot) slot.update(data);
 		else mount(data);
 	};
 	const showMissing = () => {
@@ -293,8 +331,8 @@ function createCardController(host, initialCard, factory, ctx) {
 			destroyed = true;
 			unsubscribe();
 			unsubscribe = () => {};
-			instance?.destroy?.();
-			instance = void 0;
+			slot?.destroy();
+			slot = void 0;
 		}
 	};
 }

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { AIGuiPlugin, ASTNode, ActionRuntime, CardAction, CardRegistry, CardStore, DebugEventListener, FeedOptions, FeedSource, NodeRenderer, RenderOutput, RendererOptions } from "@ai-gui/core";
+import { AIGuiPlugin, ASTNode, ActionRuntime, CardAction, CardRegistry, CardStore, DebugEventListener, FeedOptions, FeedSource, NodeRenderer, RenderMountContext, RenderOutput, RendererOptions } from "@ai-gui/core";
 
 //#region src/render-node-dom.d.ts
 interface VanillaCardAction {
@@ -51,7 +51,7 @@ declare function createRenderer(el: HTMLElement, options?: CreateRendererOptions
 //#endregion
 //#region src/render-output.d.ts
 /** Translate a framework-neutral RenderOutput (from a plugin node renderer) into a DOM element. */
-declare function renderOutputToElement(out: RenderOutput, sanitize?: RendererOptions["sanitize"]): HTMLElement;
+declare function renderOutputToElement(out: RenderOutput, sanitize?: RendererOptions["sanitize"], mountContext?: RenderMountContext): HTMLElement;
 
 //#endregion
 export { CreateRendererOptions, DomRenderContext, VanillaCardAction, VanillaCardFactory, VanillaCardInstance, VanillaCardUpdateContext, VanillaRenderer, createRenderer, renderNodeToElement, renderOutputToElement };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { AIGuiPlugin, ASTNode, ActionRuntime, CardAction, CardRegistry, CardStore, DebugEventListener, FeedOptions, FeedSource, NodeRenderer, RenderOutput, RendererOptions } from "@ai-gui/core";
+import { AIGuiPlugin, ASTNode, ActionRuntime, CardAction, CardRegistry, CardStore, DebugEventListener, FeedOptions, FeedSource, NodeRenderer, RenderMountContext, RenderOutput, RendererOptions } from "@ai-gui/core";
 
 //#region src/render-node-dom.d.ts
 interface VanillaCardAction {
@@ -51,7 +51,7 @@ declare function createRenderer(el: HTMLElement, options?: CreateRendererOptions
 //#endregion
 //#region src/render-output.d.ts
 /** Translate a framework-neutral RenderOutput (from a plugin node renderer) into a DOM element. */
-declare function renderOutputToElement(out: RenderOutput, sanitize?: RendererOptions["sanitize"]): HTMLElement;
+declare function renderOutputToElement(out: RenderOutput, sanitize?: RendererOptions["sanitize"], mountContext?: RenderMountContext): HTMLElement;
 
 //#endregion
 export { CreateRendererOptions, DomRenderContext, VanillaCardAction, VanillaCardFactory, VanillaCardInstance, VanillaCardUpdateContext, VanillaRenderer, createRenderer, renderNodeToElement, renderOutputToElement };

package/dist/index.js

@@ -2,7 +2,7 @@ import { Renderer, collectNodeRenderers, sanitizeHtml } from "@ai-gui/core";
 
 //#region src/render-output.ts
 /** Translate a framework-neutral RenderOutput (from a plugin node renderer) into a DOM element. */
-function renderOutputToElement(out, sanitize) {
+function renderOutputToElement(out, sanitize, mountContext = {}) {
 	switch (out.kind) {
 		case "html": {
 			const el = document.createElement("div");
@@ -13,7 +13,7 @@ function renderOutputToElement(out, sanitize) {
 			const el = document.createElement(out.tag);
 			for (const [key, value] of Object.entries(out.props ?? {})) if (key === "class" || key === "className") el.className = String(value);
 			else el.setAttribute(key, String(value));
-			for (const child of out.children ?? []) el.appendChild(renderOutputToElement(child, sanitize));
+			for (const child of out.children ?? []) el.appendChild(renderOutputToElement(child, sanitize, mountContext));
 			return el;
 		}
 		case "card": {
@@ -29,7 +29,7 @@ function renderOutputToElement(out, sanitize) {
 			el.setAttribute("data-aigui-mount", "");
 			queueMicrotask(() => {
 				if (el.__aiguiDisposed) return;
-				const c = out.mount(el);
+				const c = out.mount(el, mountContext);
 				if (typeof c === "function") if (el.__aiguiDisposed) c();
 				else el.__aiguiCleanup = c;
 			});
@@ -61,7 +61,7 @@ function renderNodeToElement(node, ctx) {
 				out.then((res) => {
 					if (host.__aiguiDisposed) return;
 					host.removeAttribute("data-aigui-async-pending");
-					host.replaceChildren(renderOutputToElement(res, ctx.sanitize));
+					host.replaceChildren(renderOutputToElement(res, ctx.sanitize, createRenderMountContext(ctx)));
 				}, () => {
 					if (host.__aiguiDisposed) return;
 					host.removeAttribute("data-aigui-async-pending");
@@ -69,7 +69,7 @@ function renderNodeToElement(node, ctx) {
 				});
 				return host;
 			}
-			return renderOutputToElement(out, ctx.sanitize);
+			return renderOutputToElement(out, ctx.sanitize, createRenderMountContext(ctx));
 		} catch {
 			return renderFallback(node, ctx);
 		}
@@ -138,6 +138,53 @@ function renderCardElement(node, ctx) {
 	host.__aiguiCleanup = () => controller.destroy();
 	return host;
 }
+function createRenderMountContext(ctx) {
+	return { mountCard(host, request) {
+		return mountCardSlot(host, request, ctx);
+	} };
+}
+function mountCardSlot(host, request, ctx) {
+	const factory = ctx.registry?.getRender(request.type);
+	if (!factory) return void 0;
+	return createVanillaCardSlot(host, request.data, factory, () => ({
+		state: { status: "idle" },
+		onAction: (action) => ctx.onCardAction?.({
+			...action,
+			cardType: request.type
+		})
+	}));
+}
+function createVanillaCardSlot(host, initialData, factory, context) {
+	let destroyed = false;
+	let instance;
+	let element;
+	const mount = (data) => {
+		const rendered = factory(data, context());
+		if (isVanillaCardInstance(rendered)) {
+			instance = rendered;
+			element = rendered.element;
+		} else {
+			instance = void 0;
+			element = rendered;
+		}
+		host.replaceChildren(element);
+	};
+	mount(initialData);
+	return {
+		element: () => element,
+		update(data) {
+			if (destroyed) return;
+			if (instance) instance.update(data, context());
+			else mount(data);
+		},
+		destroy() {
+			if (destroyed) return;
+			destroyed = true;
+			instance?.destroy?.();
+			instance = void 0;
+		}
+	};
+}
 function createCardFallback(card, ctx) {
 	const pre = document.createElement("pre");
 	pre.setAttribute("data-aigui-card-fallback", "");
@@ -182,8 +229,7 @@ function createCardController(host, initialCard, factory, ctx) {
 	let card = initialCard;
 	let destroyed = false;
 	let unsubscribe = () => {};
-	let instance;
-	let element;
+	let slot;
 	let missing = false;
 	const id = card.id;
 	const onAction = (action) => ctx.onCardAction?.({
@@ -205,20 +251,11 @@ function createCardController(host, initialCard, factory, ctx) {
 	} catch (error) {
 		registrationError = error;
 	}
-	const context = () => ({
-		state,
-		onAction
-	});
 	const mount = (nextData) => {
-		const rendered = factory(nextData, context());
-		if (isVanillaCardInstance(rendered)) {
-			instance = rendered;
-			element = rendered.element;
-		} else {
-			instance = void 0;
-			element = rendered;
-		}
-		host.replaceChildren(element);
+		slot = createVanillaCardSlot(host, nextData, factory, () => ({
+			state,
+			onAction
+		}));
 	};
 	const update = (nextData, nextState) => {
 		if (destroyed) return;
@@ -228,9 +265,10 @@ function createCardController(host, initialCard, factory, ctx) {
 		if (missing) {
 			missing = false;
 			host.removeAttribute("data-aigui-card-missing");
+			const element = slot?.element();
 			if (element) host.replaceChildren(element);
 		}
-		if (instance) instance.update(data, context());
+		if (slot) slot.update(data);
 		else mount(data);
 	};
 	const showMissing = () => {
@@ -269,8 +307,8 @@ function createCardController(host, initialCard, factory, ctx) {
 			destroyed = true;
 			unsubscribe();
 			unsubscribe = () => {};
-			instance?.destroy?.();
-			instance = void 0;
+			slot?.destroy();
+			slot = void 0;
 		}
 	};
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-gui/vanilla",
-  "version": "0.3.0",
+  "version": "0.4.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.3.0"
+    "@ai-gui/core": "0.4.0"
   },
   "scripts": {
     "build": "tsdown",