agentic-ui-kit 0.5.0 → 0.5.1

package/dist/core.js

@@ -1,4 +1,4 @@
-import { A as resolveEffort, C as toBlocks, D as estimateTokens, E as awaitingToolCalls, M as parsePartialJson, N as salvageJson, O as outputTokens, S as isActivityPart, T as applyEvent, _ as replacedId, a as readUiValue, b as formatEvent, c as uiMarkupGuide, d as isStateRef, f as matchesSchema, g as uiActionSchema, h as schemaErrors, i as parseUiMarkup, j as settleToolCall, k as reduceEvents, l as uiMarkupLanguage, m as renderUiToolName, n as checkUiMarkupCode, o as showUiTool, p as renderUiTool, r as findUiBlocks, s as showUiToolName, t as checkUiMarkup, u as checkUiTree, v as replacesGuide, w as activityTokens, x as readEventStream, y as replacesProperty } from "./ui-markup-CG9Lednh.js";
+import { A as awaitingToolCalls, C as widgetLoaderMessages, D as toBlocks, E as isActivityPart, F as settleToolCall, I as parsePartialJson, L as salvageJson, M as outputTokens, N as reduceEvents, O as activityTokens, P as resolveEffort, S as widgetFrameLoader, T as readEventStream, _ as replacedId, a as readUiValue, b as resolveReplaces, c as uiMarkupGuide, d as isStateRef, f as matchesSchema, g as uiActionSchema, h as schemaErrors, i as parseUiMarkup, j as estimateTokens, k as applyEvent, l as uiMarkupLanguage, m as renderUiToolName, n as checkUiMarkupCode, o as showUiTool, p as renderUiTool, r as findUiBlocks, s as showUiToolName, t as checkUiMarkup, u as checkUiTree, v as replacesGuide, w as formatEvent, x as withCallId, y as replacesProperty } from "./src-Ce7xTfGU.js";
 // ../core/src/visualize.ts
 /**
 * The visualize preset: a tool the model calls to draw an interactive visual inline (like claude.ai's
@@ -100,4 +100,4 @@ function checkWidgetCode(html, allow = {}, toolName = visualizeTool.name) {
 		feedback: ok && !warnings.length ? "Shown to the user." : ok ? `Shown to the user, and it works: do not draw it again now. Next time, to fit the chat better:\n${lines}` : `Shown, but it will not work as written. Fix these and call ${toolName} again with "replaces" set to this call's id, without remarking on the fix to the user:\n${lines}`
 	};
 }
-export { activityTokens, applyEvent, awaitingToolCalls, checkUiMarkup, checkUiMarkupCode, checkUiTree, checkWidgetCode, estimateTokens, findUiBlocks, formatEvent, isActivityPart, isStateRef, matchesSchema, outputTokens, parsePartialJson, parseUiMarkup, readEventStream, readUiValue, reduceEvents, renderUiTool, renderUiToolName, replacedId, replacesGuide, replacesProperty, resolveEffort, salvageJson, schemaErrors, settleToolCall, showUiTool, showUiToolName, toBlocks, uiActionSchema, uiMarkupGuide, uiMarkupLanguage, visualizeGuide, visualizeTool };
+export { activityTokens, applyEvent, awaitingToolCalls, checkUiMarkup, checkUiMarkupCode, checkUiTree, checkWidgetCode, estimateTokens, findUiBlocks, formatEvent, isActivityPart, isStateRef, matchesSchema, outputTokens, parsePartialJson, parseUiMarkup, readEventStream, readUiValue, reduceEvents, renderUiTool, renderUiToolName, replacedId, replacesGuide, replacesProperty, resolveEffort, resolveReplaces, salvageJson, schemaErrors, settleToolCall, showUiTool, showUiToolName, toBlocks, uiActionSchema, uiMarkupGuide, uiMarkupLanguage, visualizeGuide, visualizeTool, widgetFrameLoader, widgetLoaderMessages, withCallId };

package/dist/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { C as toBlocks, E as awaitingToolCalls, N as salvageJson, T as applyEvent, _ as replacedId, d as isStateRef, f as matchesSchema, g as uiActionSchema, i as parseUiMarkup, j as settleToolCall, w as activityTokens, x as readEventStream } from "./ui-markup-CG9Lednh.js";
+import { A as awaitingToolCalls, C as widgetLoaderMessages, D as toBlocks, F as settleToolCall, L as salvageJson, O as activityTokens, T as readEventStream, _ as replacedId, b as resolveReplaces, d as isStateRef, f as matchesSchema, g as uiActionSchema, i as parseUiMarkup, k as applyEvent } from "./src-Ce7xTfGU.js";
 import { clsx } from "clsx";
 import { Autocomplete, Button as Button$1, Dialog, DialogTrigger, Disclosure as Disclosure$1, DisclosurePanel, Focusable, Header, Heading, Input, Keyboard, Link, Menu as Menu$1, MenuItem as MenuItem$1, MenuSection as MenuSection$1, MenuTrigger, MenuTrigger as MenuTrigger$1, Modal as Modal$1, ModalOverlay, Popover as Popover$1, SearchField, Separator, SubmenuTrigger, Text, ToggleButton, ToggleButtonGroup, Tooltip as Tooltip$1, TooltipTrigger, useFilter } from "react-aria-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -1282,12 +1282,34 @@ const useSidebar = () => useContext(SidebarContext);
 const isReady = (p) => p.status !== "streaming" && p.status !== "input" && p.status !== "error";
 const callsOf = (m) => m.parts.filter((p) => p.type === "tool_call");
 const replaces = (p) => replacedId(p.input ?? p.partialInput);
+const titleOf = (p) => {
+	const t = (p.input ?? p.partialInput)?.title;
+	return typeof t === "string" && t ? t : void 0;
+};
+/** Ids and titles of the calls seen so far, to resolve `replaces` (an id, or a title as a fallback). */
+function seen() {
+	const ids = /* @__PURE__ */ new Set();
+	const titles = /* @__PURE__ */ new Map();
+	return {
+		resolve: (call) => {
+			const r = replaces(call);
+			return r === void 0 ? void 0 : resolveReplaces(r, ids, titles);
+		},
+		add: (call) => {
+			ids.add(call.id);
+			const t = titleOf(call);
+			if (t) titles.set(t, call.id);
+		}
+	};
+}
 /** One reply's chains: each call's first call (where the chain is drawn) and each first call's chain, in order. */
 function chainsOf(message) {
 	const first = /* @__PURE__ */ new Map();
 	const chains = /* @__PURE__ */ new Map();
+	const known = seen();
 	for (const call of callsOf(message)) {
-		const r = replaces(call);
+		const r = known.resolve(call);
+		known.add(call);
 		const root = r !== void 0 && first.has(r) ? first.get(r) : call.id;
 		first.set(call.id, root);
 		chains.set(root, [...chains.get(root) ?? [], call]);
@@ -1300,13 +1322,16 @@ function chainsOf(message) {
 /** Calls replaced by a finished call in a later reply: replaced id → the newest such call. */
 function laterReplacements(messages) {
 	const later = /* @__PURE__ */ new Map();
+	const known = seen();
 	for (const m of messages) {
 		if (m.role !== "assistant") continue;
-		const own = new Set(callsOf(m).map((c) => c.id));
-		for (const call of callsOf(m)) {
-			const r = replaces(call);
+		const calls = callsOf(m);
+		const own = new Set(calls.map((c) => c.id));
+		for (const call of calls) {
+			const r = known.resolve(call);
 			if (r !== void 0 && !own.has(r) && isReady(call)) later.set(r, call);
 		}
+		calls.forEach(known.add);
 	}
 	return later;
 }
@@ -1524,8 +1549,10 @@ function watchTheme(el, onChange) {
 		media?.removeEventListener?.("change", onChange);
 	};
 }
-function WidgetFrame({ html, document: isDocument = false, streaming = false, title, loadingMessages, allow, csp: request, onPrompt, onOpenLink, onCallTool, onError, toolInput, toolResult, cancelled, className }) {
+function WidgetFrame({ html, document: isDocument = false, streaming = false, title, loadingMessages, allow, csp: request, onPrompt, onOpenLink, onCallTool, onError, toolInput, toolResult, cancelled, frameUrl: ownFrameUrl, className }) {
 	const labels = useLabels();
+	const hostFrameUrl = useWidgetHost().frameUrl;
+	const frameUrl = ownFrameUrl ?? hostFrameUrl;
 	const frame = useRef(null);
 	const host = useRef(null);
 	const [ready, setReady] = useState(false);
@@ -1547,7 +1574,8 @@ function WidgetFrame({ html, document: isDocument = false, streaming = false, ti
 		onCallTool,
 		onError,
 		policy,
-		effective
+		effective,
+		doc
 	});
 	latest.current = {
 		onPrompt,
@@ -1555,7 +1583,16 @@ function WidgetFrame({ html, document: isDocument = false, streaming = false, ti
 		onCallTool,
 		onError,
 		policy,
-		effective
+		effective,
+		doc
+	};
+	const generation = useRef({
+		doc,
+		n: 0
+	});
+	if (generation.current.doc !== doc) generation.current = {
+		doc,
+		n: generation.current.n + 1
 	};
 	const send = (message) => frame.current?.contentWindow?.postMessage({
 		jsonrpc: "2.0",
@@ -1605,6 +1642,14 @@ function WidgetFrame({ html, document: isDocument = false, streaming = false, ti
 		});
 		const onMessage = async (e) => {
 			if (!frame.current || e.source !== frame.current.contentWindow) return;
+			if (e.data?.type === widgetLoaderMessages.ready) {
+				const html = latest.current.doc;
+				if (html) frame.current.contentWindow?.postMessage({
+					type: widgetLoaderMessages.document,
+					html
+				}, "*");
+				return;
+			}
 			const m = e.data ?? {};
 			if (typeof m !== "object" || typeof m.method !== "string") return;
 			const { onPrompt, onOpenLink, onCallTool, effective } = latest.current;
@@ -1723,13 +1768,13 @@ function WidgetFrame({ html, document: isDocument = false, streaming = false, ti
 			ref: frame,
 			title: title ?? labels.widget,
 			sandbox: "allow-scripts",
-			srcDoc: doc,
+			...frameUrl ? { src: frameUrl } : { srcDoc: doc },
 			style: {
 				height: height || (streaming ? 120 : 0),
 				transition: "height 150ms ease-out"
 			},
 			className: "block w-full border-0 bg-transparent"
-		})]
+		}, frameUrl ? generation.current.n : "srcdoc")]
 	});
 }
 /** Pulls the host's abilities from context into frame props. */
@@ -4079,12 +4124,13 @@ function ChatTranscript({ messages, renderPart, widgets, header, notice, footer,
 		...contentPadding && { "--chat-content-padding": contentPadding }
 	};
 	const host = useMemo(() => {
-		const { allow, readResource } = { ...widgets };
+		const { allow, readResource, frameUrl } = { ...widgets };
 		const onOpenLink = widgets && "onOpenLink" in widgets ? widgets.onOpenLink : openInNewTab;
 		return {
 			...allow && { allow },
 			...onOpenLink && { onOpenLink },
-			...readResource && { readResource }
+			...readResource && { readResource },
+			...frameUrl && { frameUrl }
 		};
 	}, [widgets]);
 	return /* @__PURE__ */ jsxs("div", {

package/dist/{ui-markup-CG9Lednh.js → src-Ce7xTfGU.js}

@@ -422,6 +422,34 @@ function parseMessage(text) {
 	if (data.length === 0) return void 0;
 	return JSON.parse(data.join("\n"));
 }
+// ../core/src/widget-loader.ts
+/**
+* The frame page for `WidgetHost.frameUrl`. Serve this HTML from your own origin (e.g. at /widget-frame.html)
+* when your app's CSP blocks inline scripts: an `srcdoc` frame inherits the page's CSP, a frame loaded from
+* a URL gets the CSP of its own response. The kit loads it sandboxed (opaque origin, no access to your app),
+* posts the widget's document to it, and the loader writes it in. The kit's CSP <meta> inside that document
+* still limits what the widget may load.
+*
+* Its response needs a CSP that lets the loader and the widget run, and no stricter than the kit's, e.g.
+* `Content-Security-Policy: default-src 'none'; script-src 'unsafe-inline' https:; style-src 'unsafe-inline' https:; img-src data: blob: https:; font-src data: https:; connect-src https:`
+* (or no CSP header on that path). Don't set X-Frame-Options or frame-ancestors that exclude your app.
+*/
+/** Message types between the kit and the loader. */
+const widgetLoaderMessages = {
+	/** Loader → kit: ready for the document. */
+	ready: "agentic-ui-kit:frame-ready",
+	/** Kit → loader: `{ type, html }`, the widget's whole document. */
+	document: "agentic-ui-kit:frame-document"
+};
+const widgetFrameLoader = `<!doctype html><html><head><meta charset="utf-8"></head><body><script>
+addEventListener("message", function load(e) {
+  if (e.source !== parent || !e.data || e.data.type !== "${widgetLoaderMessages.document}" || typeof e.data.html !== "string") return;
+  removeEventListener("message", load);
+  document.open(); document.write(e.data.html); document.close();
+});
+parent.postMessage({ type: "${widgetLoaderMessages.ready}" }, "*");
+<\/script></body></html>
+`;
 // ../core/src/replaces.ts
 /**
 * Updating a visual in place: the drawing tools (show_widget, show_ui, render_ui) take an optional
@@ -432,15 +460,27 @@ function parseMessage(text) {
 /** The `replaces` input property, shared by the drawing tools. */
 const replacesProperty = {
 	type: "string",
-	description: "Id of an earlier call of this tool whose visual this one updates in place: after a fix, or when the user asks for a change. Leave it out for a new visual."
+	description: "The id (or title) of an earlier visual of this tool that this one updates in place: after a fix, or when the user asks for a change. Its tool result says \"Drawn as <id>\". Leave it out for a new visual."
 };
 /** One line for a drawing tool's description or guide. */
-const replacesGuide = "To change a visual you already drew (a fix, or the user asks for a change), call the tool again with `replaces` set to that call's id: it is redrawn in place. Never draw a second copy without it.";
+const replacesGuide = "To change a visual you already drew (a fix, or the user asks for a change), call the tool again with `replaces` set to that visual's id (its tool result says Drawn as <id>): it is redrawn in place. Never draw a second copy without it.";
 /** The id a drawing tool call replaces, from its (streaming) input; undefined if none. */
 function replacedId(input) {
 	const r = input?.replaces;
 	return typeof r === "string" && r ? r : void 0;
 }
+/**
+* The tool result for a drawing call: the check's feedback, prefixed with the call's id, so the model can
+* pass it as `replaces` later. Use it when the model may not see tool call ids (many chat templates drop
+* them): `withCallId(call.id, checkWidgetCode(...).feedback)`.
+*/
+function withCallId(id, feedback) {
+	return `Drawn as ${id}. ${feedback}`;
+}
+/** What `replaces` points at: the id of a call, or else the title of the latest call with that title. */
+function resolveReplaces(ref, ids, titles) {
+	return ids.has(ref) ? ref : titles.get(ref);
+}
 // ../core/src/ui-tree.ts
 /**
 * Host-registered components: instead of HTML, the model writes a small tree of components the host
@@ -1103,4 +1143,4 @@ When a visual helps more than text (options to compare, a plan, a checklist, num
 ${markupRules(components)}
 - Keep explaining in text around the block. One block per answer, unless the user asks for more.`;
 }
-export { resolveEffort as A, toBlocks as C, estimateTokens as D, awaitingToolCalls as E, parsePartialJson as M, salvageJson as N, outputTokens as O, isActivityPart as S, applyEvent as T, replacedId as _, readUiValue as a, formatEvent as b, uiMarkupGuide as c, isStateRef as d, matchesSchema as f, uiActionSchema as g, schemaErrors as h, parseUiMarkup as i, settleToolCall as j, reduceEvents as k, uiMarkupLanguage as l, renderUiToolName as m, checkUiMarkupCode as n, showUiTool as o, renderUiTool as p, findUiBlocks as r, showUiToolName as s, checkUiMarkup as t, checkUiTree as u, replacesGuide as v, activityTokens as w, readEventStream as x, replacesProperty as y };
+export { awaitingToolCalls as A, widgetLoaderMessages as C, toBlocks as D, isActivityPart as E, settleToolCall as F, parsePartialJson as I, salvageJson as L, outputTokens as M, reduceEvents as N, activityTokens as O, resolveEffort as P, widgetFrameLoader as S, readEventStream as T, replacedId as _, readUiValue as a, resolveReplaces as b, uiMarkupGuide as c, isStateRef as d, matchesSchema as f, uiActionSchema as g, schemaErrors as h, parseUiMarkup as i, estimateTokens as j, applyEvent as k, uiMarkupLanguage as l, renderUiToolName as m, checkUiMarkupCode as n, showUiTool as o, renderUiTool as p, findUiBlocks as r, showUiToolName as s, checkUiMarkup as t, checkUiTree as u, replacesGuide as v, formatEvent as w, withCallId as x, replacesProperty as y };

package/dist/types/core/src/index.d.ts

@@ -5,7 +5,8 @@ export { toBlocks, isActivityPart } from "./blocks";
 export type { Block, ActivityPart } from "./blocks";
 export { readEventStream, formatEvent } from "./sse";
 export { parsePartialJson, salvageJson } from "./partial-json";
-export { replacesProperty, replacesGuide, replacedId } from "./replaces";
+export { widgetFrameLoader, widgetLoaderMessages } from "./widget-loader";
+export { replacesProperty, replacesGuide, replacedId, resolveReplaces, withCallId } from "./replaces";
 export { visualizeTool, visualizeGuide, checkWidgetCode } from "./visualize";
 export type { VisualizeInput, WidgetCodeCheck } from "./visualize";
 export { matchesSchema, schemaErrors, checkUiTree, isStateRef, renderUiTool, renderUiToolName, uiActionSchema } from "./ui-tree";

package/dist/types/core/src/replaces.d.ts

@@ -7,9 +7,17 @@
 /** The `replaces` input property, shared by the drawing tools. */
 export declare const replacesProperty: {
     readonly type: "string";
-    readonly description: "Id of an earlier call of this tool whose visual this one updates in place: after a fix, or when the user asks for a change. Leave it out for a new visual.";
+    readonly description: "The id (or title) of an earlier visual of this tool that this one updates in place: after a fix, or when the user asks for a change. Its tool result says \"Drawn as <id>\". Leave it out for a new visual.";
 };
 /** One line for a drawing tool's description or guide. */
-export declare const replacesGuide = "To change a visual you already drew (a fix, or the user asks for a change), call the tool again with `replaces` set to that call's id: it is redrawn in place. Never draw a second copy without it.";
+export declare const replacesGuide = "To change a visual you already drew (a fix, or the user asks for a change), call the tool again with `replaces` set to that visual's id (its tool result says Drawn as <id>): it is redrawn in place. Never draw a second copy without it.";
 /** The id a drawing tool call replaces, from its (streaming) input; undefined if none. */
 export declare function replacedId(input: unknown): string | undefined;
+/**
+ * The tool result for a drawing call: the check's feedback, prefixed with the call's id, so the model can
+ * pass it as `replaces` later. Use it when the model may not see tool call ids (many chat templates drop
+ * them): `withCallId(call.id, checkWidgetCode(...).feedback)`.
+ */
+export declare function withCallId(id: string, feedback: string): string;
+/** What `replaces` points at: the id of a call, or else the title of the latest call with that title. */
+export declare function resolveReplaces(ref: string, ids: ReadonlySet<string>, titles: ReadonlyMap<string, string>): string | undefined;

package/dist/types/core/src/ui-markup.d.ts

@@ -80,7 +80,7 @@ export declare function showUiTool(components: readonly UiComponentSpec[], name?
             };
             readonly replaces: {
                 readonly type: "string";
-                readonly description: "Id of an earlier call of this tool whose visual this one updates in place: after a fix, or when the user asks for a change. Leave it out for a new visual.";
+                readonly description: "The id (or title) of an earlier visual of this tool that this one updates in place: after a fix, or when the user asks for a change. Its tool result says \"Drawn as <id>\". Leave it out for a new visual.";
             };
         };
         readonly required: readonly ["markup"];

package/dist/types/core/src/ui-tree.d.ts

@@ -87,7 +87,7 @@ export declare function renderUiTool(components: readonly UiComponentSpec[]): {
             };
             replaces: {
                 readonly type: "string";
-                readonly description: "Id of an earlier call of this tool whose visual this one updates in place: after a fix, or when the user asks for a change. Leave it out for a new visual.";
+                readonly description: "The id (or title) of an earlier visual of this tool that this one updates in place: after a fix, or when the user asks for a change. Its tool result says \"Drawn as <id>\". Leave it out for a new visual.";
             };
         };
         required: string[];

package/dist/types/core/src/visualize.d.ts

@@ -37,14 +37,14 @@ export declare const visualizeTool: {
             };
             readonly replaces: {
                 readonly type: "string";
-                readonly description: "Id of an earlier call of this tool whose visual this one updates in place: after a fix, or when the user asks for a change. Leave it out for a new visual.";
+                readonly description: "The id (or title) of an earlier visual of this tool that this one updates in place: after a fix, or when the user asks for a change. Its tool result says \"Drawn as <id>\". Leave it out for a new visual.";
             };
         };
         readonly required: readonly ["widget_code"];
     };
 };
 /** Design guide for the system prompt when the visualize tool is on. */
-export declare const visualizeGuide = "## Visuals (show_widget)\nUse show_widget when a visual says it better than text: data to compare, a plan to adjust, a place to see, a\nprocess to step through. Keep explaining in text around it; the widget is not the whole answer.\n\nHow the frame works\n- widget_code is a fragment: no <!doctype>, <html>, <head> or <body>. Put <style> first, then markup, then <script>.\n- It renders while you write it; scripts run once it is complete, in order. Put scripts last.\n- No network unless the host allows it: no fetch, no external images or fonts. Inline your data.\n- The background is transparent and the frame sizes itself to your content. Add no outer margin or padding,\n  no outer border or card around the whole widget, and no fixed height on the root.\n- Two globals: sendPrompt(text) sends a message as the user (for \"Add these to my calendar\", \"Explain this\"),\n  openLink(url) opens an http(s) link. Prefer local state (JavaScript in the widget) over round trips: filter,\n  toggle, recalculate and animate in place; use sendPrompt only for what needs you.\n- To change a visual you already drew (a fix, or the user asks for a change), call the tool again with `replaces` set to that call's id: it is redrawn in place. Never draw a second copy without it.\n\nLook\n- Use the chat's theme variables, never hard-coded colors or fonts: var(--chat-fg) text, var(--chat-muted) and\n  var(--chat-subtle) secondary text, var(--chat-surface) and var(--chat-raised) fills, var(--chat-border) and\n  var(--chat-divider) lines, var(--chat-hover) hover, var(--chat-accent) with var(--chat-accent-fg) for the one\n  thing that matters most, var(--chat-check) good, var(--chat-warning), var(--chat-danger) bad;\n  var(--chat-font-sans), var(--chat-font-mono); var(--chat-ui-font-size), var(--chat-ui-font-size-sm);\n  var(--chat-radius-sm), var(--chat-radius-md), var(--chat-radius-lg).\n- Quiet by default: thin borders, few fills, one accent. Readable labels, aligned numbers, no decoration.\n- Set apart what you added or changed from what was already there: your proposals in the accent with a small\n  \"New\" (or \"Changed\") tag, existing data quiet. The user must see at a glance what is yours.\n- Make it work on a narrow screen (down to 320px wide) and with a keyboard: real <button>s, visible focus.";
+export declare const visualizeGuide = "## Visuals (show_widget)\nUse show_widget when a visual says it better than text: data to compare, a plan to adjust, a place to see, a\nprocess to step through. Keep explaining in text around it; the widget is not the whole answer.\n\nHow the frame works\n- widget_code is a fragment: no <!doctype>, <html>, <head> or <body>. Put <style> first, then markup, then <script>.\n- It renders while you write it; scripts run once it is complete, in order. Put scripts last.\n- No network unless the host allows it: no fetch, no external images or fonts. Inline your data.\n- The background is transparent and the frame sizes itself to your content. Add no outer margin or padding,\n  no outer border or card around the whole widget, and no fixed height on the root.\n- Two globals: sendPrompt(text) sends a message as the user (for \"Add these to my calendar\", \"Explain this\"),\n  openLink(url) opens an http(s) link. Prefer local state (JavaScript in the widget) over round trips: filter,\n  toggle, recalculate and animate in place; use sendPrompt only for what needs you.\n- To change a visual you already drew (a fix, or the user asks for a change), call the tool again with `replaces` set to that visual's id (its tool result says Drawn as <id>): it is redrawn in place. Never draw a second copy without it.\n\nLook\n- Use the chat's theme variables, never hard-coded colors or fonts: var(--chat-fg) text, var(--chat-muted) and\n  var(--chat-subtle) secondary text, var(--chat-surface) and var(--chat-raised) fills, var(--chat-border) and\n  var(--chat-divider) lines, var(--chat-hover) hover, var(--chat-accent) with var(--chat-accent-fg) for the one\n  thing that matters most, var(--chat-check) good, var(--chat-warning), var(--chat-danger) bad;\n  var(--chat-font-sans), var(--chat-font-mono); var(--chat-ui-font-size), var(--chat-ui-font-size-sm);\n  var(--chat-radius-sm), var(--chat-radius-md), var(--chat-radius-lg).\n- Quiet by default: thin borders, few fills, one accent. Readable labels, aligned numbers, no decoration.\n- Set apart what you added or changed from what was already there: your proposals in the accent with a small\n  \"New\" (or \"Changed\") tag, existing data quiet. The user must see at a glance what is yours.\n- Make it work on a narrow screen (down to 320px wide) and with a keyboard: real <button>s, visible focus.";
 /** What `checkWidgetCode` found. */
 export interface WidgetCodeCheck {
     /** Nothing will break: no errors (warnings may remain). */

package/dist/types/core/src/widget-loader.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The frame page for `WidgetHost.frameUrl`. Serve this HTML from your own origin (e.g. at /widget-frame.html)
+ * when your app's CSP blocks inline scripts: an `srcdoc` frame inherits the page's CSP, a frame loaded from
+ * a URL gets the CSP of its own response. The kit loads it sandboxed (opaque origin, no access to your app),
+ * posts the widget's document to it, and the loader writes it in. The kit's CSP <meta> inside that document
+ * still limits what the widget may load.
+ *
+ * Its response needs a CSP that lets the loader and the widget run, and no stricter than the kit's, e.g.
+ * `Content-Security-Policy: default-src 'none'; script-src 'unsafe-inline' https:; style-src 'unsafe-inline' https:; img-src data: blob: https:; font-src data: https:; connect-src https:`
+ * (or no CSP header on that path). Don't set X-Frame-Options or frame-ancestors that exclude your app.
+ */
+/** Message types between the kit and the loader. */
+export declare const widgetLoaderMessages: {
+    /** Loader → kit: ready for the document. */
+    readonly ready: "agentic-ui-kit:frame-ready";
+    /** Kit → loader: `{ type, html }`, the widget's whole document. */
+    readonly document: "agentic-ui-kit:frame-document";
+};
+export declare const widgetFrameLoader: string;

package/dist/types/react/src/components/widget-frame.d.ts

@@ -1,4 +1,4 @@
-import type { ToolCallPart, WidgetPart } from "../../../core/src/index.js";
+import { type ToolCallPart, type WidgetPart } from "../../../core/src/index.js";
 import { type ReactNode } from "react";
 /** Origins a widget may load from, e.g. "https://unpkg.com". Entries that are not plain origins are dropped. */
 export interface WidgetAllow {
@@ -34,6 +34,11 @@ export interface WidgetHost {
         partId: string;
         message: string;
     }) => void) | undefined;
+    /**
+     * Load widgets from this page (core's `widgetFrameLoader`, served by you) instead of `srcdoc`. Set it when
+     * your page's CSP blocks inline scripts: srcdoc frames inherit that CSP, so widget scripts would not run.
+     */
+    frameUrl?: string;
 }
 /** Sets what widgets below may do. ChatView and ChatTranscript set it from their `widgets` prop. */
 export declare function WidgetHostProvider({ host, children }: {
@@ -69,7 +74,7 @@ export declare const WIDGET_MAX_HEIGHT = 2000;
 export declare function intersectAllow(request: WidgetAllow, allow?: WidgetAllow): WidgetAllow;
 /** The Content-Security-Policy of a widget's document. */
 export declare function widgetCsp(allow?: WidgetAllow): string;
-export declare function WidgetFrame({ html, document: isDocument, streaming, title, loadingMessages, allow, csp: request, onPrompt, onOpenLink, onCallTool, onError, toolInput, toolResult, cancelled, className, }: WidgetFrameProps): import("react").JSX.Element;
+export declare function WidgetFrame({ html, document: isDocument, streaming, title, loadingMessages, allow, csp: request, onPrompt, onOpenLink, onCallTool, onError, toolInput, toolResult, cancelled, frameUrl: ownFrameUrl, className, }: WidgetFrameProps): import("react").JSX.Element;
 /** The default look of a `widget` part: inline html, or an app UI the host reads from `resourceUri`. */
 export declare function WidgetPartView({ part }: {
     part: WidgetPart;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentic-ui-kit",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "React UI kit for LLM chat and agentic apps: streaming messages, tool calls, approvals, themable with CSS variables.",
   "license": "MIT",
   "type": "module",