@epam/ai-dial-mcp-apps 1.2.0-dev.48 → 1.2.0-dev.58

package/components/McpAppInlinePreview/McpAppInlinePreview.d.ts

@@ -1,4 +1,4 @@
-import { McpAppHostAdapter, McpAppResponseCache, McpAppToolCallSeed, McpAppToolRef } from '../../models/mcp-apps';
+import { McpAppHostAdapter, McpAppInlinePreviewColors, McpAppResponseCache, McpAppToolCallSeed, McpAppToolRef } from '../../models/mcp-apps';
 /** Props for the `McpAppInlinePreview` component. */
 export interface McpAppInlinePreviewProps {
     /** Matched MCP App tool to preview. */
@@ -21,6 +21,8 @@ export interface McpAppInlinePreviewProps {
     actionsGroupAriaLabel?: string;
     /** Message shown when the resource fails to load or the app fails to initialize. */
     loadErrorLabel: string;
+    /** Color overrides applied as CSS custom properties on the preview's root. */
+    colors?: McpAppInlinePreviewColors;
 }
 /** Renders a compact, always-visible preview of a message's matched MCP App — see `McpAppInlinePreviewProps`. */
 export declare const McpAppInlinePreview: import('react').NamedExoticComponent<McpAppInlinePreviewProps>;

package/components/McpAppInlinePreview/McpAppInlinePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"McpAppInlinePreview.d.ts","sourceRoot":"","sources":["../../../src/components/McpAppInlinePreview/McpAppInlinePreview.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,aAAa,EACnB,MAAM,uBAAuB,CAAC;AAE/B,qDAAqD;AACrD,MAAM,WAAW,wBAAwB;IACvC,uCAAuC;IACvC,KAAK,EAAE,aAAa,CAAC;IACrB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,uIAAuI;IACvI,KAAK,EAAE,mBAAmB,CAAC;IAC3B,gEAAgE;IAChE,QAAQ,EAAE,MAAM,CAAC;IACjB,6GAA6G;IAC7G,WAAW,EAAE,iBAAiB,CAAC;IAC/B,kEAAkE;IAClE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,wDAAwD;IACxD,eAAe,EAAE,MAAM,CAAC;IACxB,8CAA8C;IAC9C,eAAe,EAAE,MAAM,CAAC;IACxB,uFAAuF;IACvF,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,oFAAoF;IACpF,cAAc,EAAE,MAAM,CAAC;CACxB;AAyHD,iHAAiH;AACjH,eAAO,MAAM,mBAAmB,gEAAgC,CAAC"}
+{"version":3,"file":"McpAppInlinePreview.d.ts","sourceRoot":"","sources":["../../../src/components/McpAppInlinePreview/McpAppInlinePreview.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,yBAAyB,EAC9B,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,aAAa,EACnB,MAAM,uBAAuB,CAAC;AAG/B,qDAAqD;AACrD,MAAM,WAAW,wBAAwB;IACvC,uCAAuC;IACvC,KAAK,EAAE,aAAa,CAAC;IACrB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,uIAAuI;IACvI,KAAK,EAAE,mBAAmB,CAAC;IAC3B,gEAAgE;IAChE,QAAQ,EAAE,MAAM,CAAC;IACjB,6GAA6G;IAC7G,WAAW,EAAE,iBAAiB,CAAC;IAC/B,kEAAkE;IAClE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,wDAAwD;IACxD,eAAe,EAAE,MAAM,CAAC;IACxB,8CAA8C;IAC9C,eAAe,EAAE,MAAM,CAAC;IACxB,uFAAuF;IACvF,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,oFAAoF;IACpF,cAAc,EAAE,MAAM,CAAC;IACvB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,yBAAyB,CAAC;CACpC;AA6ID,iHAAiH;AACjH,eAAO,MAAM,mBAAmB,gEAAgC,CAAC"}

package/constants/public-class-names.d.ts

@@ -0,0 +1,11 @@
+export declare const MCP_APPS_CLASS: {
+    /** The preview's bordered outer card. */
+    readonly preview: "dial-mcp-apps-preview";
+    /**
+     * The header strip above the mounted app, holding the reload and
+     * expand-to-canvas actions. It sits outside the app's own content, so a host
+     * restyling it never overlaps what the app draws.
+     */
+    readonly previewHeader: "dial-mcp-apps-preview-header";
+};
+//# sourceMappingURL=public-class-names.d.ts.map

package/constants/public-class-names.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-class-names.d.ts","sourceRoot":"","sources":["../../src/constants/public-class-names.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,cAAc;IACzB,yCAAyC;;IAEzC;;;;OAIG;;CAEK,CAAC"}

package/index.css

@@ -1 +1,2 @@
-.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.block{display:block}.inline{display:inline}.flex{display:flex}.min-h-10{min-height:2.5rem}.min-h-\[200px\]{min-height:200px}.w-full{width:100%}.min-w-0{min-width:0}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.overflow-hidden{overflow:hidden}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-tertiary{border-color:var(--stroke-tertiary,#e0e6f0)}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-center{text-align:center}.text-error{color:var(--text-error,#ae2f2f)}.text-primary{color:var(--text-primary,#161b2d)}
+._preview_19as4_11{background:var(--mcpapp-preview-bg,var(--bg-layer-raised,#fcfcfc));border-color:var(--mcpapp-preview-border,var(--stroke-tertiary,#e0e6f0))}._previewHeader_19as4_23{border-bottom-color:var(--mcpapp-preview-header-border,var(--stroke-tertiary,#e0e6f0))}
+/*$vite$:1*/.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.block{display:block}.inline{display:inline}.flex{display:flex}.min-h-10{min-height:2.5rem}.min-h-\[200px\]{min-height:200px}.w-full{width:100%}.min-w-0{min-width:0}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.overflow-hidden{overflow:hidden}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-center{text-align:center}.text-error{color:var(--text-error,#ae2f2f)}.text-primary{color:var(--text-primary,#161b2d)}

package/index.d.ts

@@ -4,4 +4,6 @@ export { useMcpAppResponseCache } from './hooks/useMcpAppResponseCache/useMcpApp
 export type { McpDeploymentKind, McpAppToolDiscovery, McpAppToolRef, McpAppToolCallSeed, FetchMcpAppResourceHtml, CallMcpAppTool, CachedMcpAppResponse, McpAppResponseCache, McpAppHostAdapter, } from './models/mcp-apps';
 export { McpAppInlinePreviewStatus } from './models/mcp-apps';
 export { collectToolCallNames, findMcpAppForMessage, mcpAppCanvasKey, computeMcpAppSeedKey, resolveMcpAppToolCallSeed, resolveMcpAppToolResult, } from './utils/mcp-app';
+export { MCP_APPS_CLASS } from './constants/public-class-names';
+export type { McpAppInlinePreviewColors } from './models/mcp-apps';
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,GAC9B,MAAM,sDAAsD,CAAC;AAC9D,OAAO,EACL,sBAAsB,EACtB,KAAK,wBAAwB,GAC9B,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,uDAAuD,CAAC;AAC/F,YAAY,EACV,iBAAiB,EACjB,mBAAmB,EACnB,aAAa,EACb,kBAAkB,EAClB,uBAAuB,EACvB,cAAc,EACd,oBAAoB,EACpB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EACL,oBAAoB,EACpB,oBAAoB,EACpB,eAAe,EACf,oBAAoB,EACpB,yBAAyB,EACzB,uBAAuB,GACxB,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,GAC9B,MAAM,sDAAsD,CAAC;AAC9D,OAAO,EACL,sBAAsB,EACtB,KAAK,wBAAwB,GAC9B,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,uDAAuD,CAAC;AAC/F,YAAY,EACV,iBAAiB,EACjB,mBAAmB,EACnB,aAAa,EACb,kBAAkB,EAClB,uBAAuB,EACvB,cAAc,EACd,oBAAoB,EACpB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EACL,oBAAoB,EACpB,oBAAoB,EACpB,eAAe,EACf,oBAAoB,EACpB,yBAAyB,EACzB,uBAAuB,GACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,YAAY,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC"}

package/index.js

@@ -1,20 +1,23 @@
 import { AttachmentContentType as e, McpAppCanvasRenderer as t } from "@epam/ai-dial-attachment-canvas";
-import { DIAL_ICON_SIZE as n, DIAL_KIT_ICON_STROKE as r, ElementSize as i, GhostIconButton as a, Spinner as o } from "@epam/ai-dial-ui-kit";
-import { IconAlertTriangle as s, IconArrowsMaximize as c, IconRefresh as l } from "@tabler/icons-react";
-import { memo as u, useCallback as d, useEffect as f, useMemo as p, useRef as m, useState as h } from "react";
-import { MessageRole as g } from "@epam/ai-dial-chat-shared";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-//#region src/models/mcp-apps.ts
-var y = /* @__PURE__ */ function(e) {
+import { MessageRole as n, buildCssVars as r } from "@epam/ai-dial-chat-shared";
+import { DIAL_ICON_SIZE as i, DIAL_KIT_ICON_STROKE as a, ElementSize as o, GhostIconButton as s, Spinner as c, mergeClasses as l } from "@epam/ai-dial-ui-kit";
+import { IconAlertTriangle as u, IconArrowsMaximize as d, IconRefresh as f } from "@tabler/icons-react";
+import { memo as p, useCallback as m, useEffect as h, useMemo as g, useRef as _, useState as v } from "react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+//#region src/constants/public-class-names.ts
+var x = {
+	preview: "dial-mcp-apps-preview",
+	previewHeader: "dial-mcp-apps-preview-header"
+}, S = /* @__PURE__ */ function(e) {
 	return e.Loading = "loading", e.Ready = "ready", e.Error = "error", e.Unavailable = "unavailable", e;
-}({}), b = (e) => {
+}({}), C = (e) => {
 	try {
 		let t = JSON.parse(e);
 		return typeof t == "object" && t ? t : {};
 	} catch {
 		return {};
 	}
-}, x = (e) => {
+}, w = (e) => {
 	let t = /* @__PURE__ */ new Map();
 	for (let n of e?.tool_messages ?? []) {
 		for (let e of n.tool_calls ?? []) t.set(e.id, {
@@ -29,7 +32,7 @@ var y = /* @__PURE__ */ function(e) {
 	for (let n of e?.tool_execution_history ?? []) {
 		for (let e of n.tool_calls ?? []) t.set(e.id, {
 			name: e.function.name,
-			args: b(e.function.arguments)
+			args: C(e.function.arguments)
 		});
 		if (n.role === "tool" && n.tool_call_id) {
 			let e = t.get(n.tool_call_id);
@@ -37,18 +40,18 @@ var y = /* @__PURE__ */ function(e) {
 		}
 	}
 	return t;
-}, S = (e) => {
+}, T = (e) => {
 	let t = /* @__PURE__ */ new Set();
-	for (let n of e) for (let e of x(n.custom_content?.state).values()) t.add(e.name);
+	for (let n of e) for (let e of w(n.custom_content?.state).values()) t.add(e.name);
 	return t;
-}, C = (e, t, n) => {
-	if (t.length === 0 || e.role !== g.Assistant) return;
-	let r = new Set([...x(e.custom_content?.state).values()].map((e) => e.name));
-	return t.find((e) => r.has(e.toolName)) || t.find((e) => e.discovery === "direct") || (n ? t[0] : void 0);
-}, w = (e) => `${e}:mcp-app`, T = (e) => e == null ? void 0 : JSON.stringify(e.toolInput ?? null), E = (e, t) => {
+}, E = (e, t, r) => {
+	if (t.length === 0 || e.role !== n.Assistant) return;
+	let i = new Set([...w(e.custom_content?.state).values()].map((e) => e.name));
+	return t.find((e) => i.has(e.toolName)) || t.find((e) => e.discovery === "direct") || (r ? t[0] : void 0);
+}, D = (e) => `${e}:mcp-app`, O = (e) => e == null ? void 0 : JSON.stringify(e.toolInput ?? null), k = (e, t) => {
 	let n = e.custom_content?.state;
 	if (!n) return;
-	let r = [...x(n).values()].reverse().find((e) => e.name === t);
+	let r = [...w(n).values()].reverse().find((e) => e.name === t);
 	if (r) return {
 		toolInput: r.args,
 		toolResult: r.result == null ? void 0 : { content: [{
@@ -56,29 +59,29 @@ var y = /* @__PURE__ */ function(e) {
 			text: r.result
 		}] }
 	};
-}, D = async (e, t, n) => {
+}, A = async (e, t, n) => {
 	if (!(e.discovery === "direct" || t?.toolInput != null)) return t?.toolResult;
 	try {
 		return await n(e.toolsetId, e.mcpToolName, t?.toolInput ?? {}, e.kind);
 	} catch {
 		return t?.toolResult;
 	}
-}, O = (t, n, r, i, a, o) => {
-	let { hostContext: s, sandboxUrl: c, fetchResourceHtml: l, callTool: u } = a, [p, m] = h(), [g, _] = h(), [v, b] = h(() => t == null || c == null ? y.Unavailable : y.Loading), [x, S] = h(0), C = d(() => {
-		r.invalidate(i), S((e) => e + 1);
-	}, [r, i]), w = d(async (e) => {
+}, j = (t, n, r, i, a, o) => {
+	let { hostContext: s, sandboxUrl: c, fetchResourceHtml: l, callTool: u } = a, [d, f] = v(), [p, g] = v(), [_, y] = v(() => t == null || c == null ? S.Unavailable : S.Loading), [b, x] = v(0), C = m(() => {
+		r.invalidate(i), x((e) => e + 1);
+	}, [r, i]), w = m(async (e) => {
 		if (!(t == null || c == null)) try {
-			let a = T(n), { html: o, toolResult: s } = await r.getOrFetch(i, a, async () => {
-				let [e, r] = await Promise.all([l(t.toolsetId, t.resourceUri), D(t, n, u)]);
+			let a = O(n), { html: o, toolResult: s } = await r.getOrFetch(i, a, async () => {
+				let [e, r] = await Promise.all([l(t.toolsetId, t.resourceUri), A(t, n, u)]);
 				return {
 					html: e,
 					toolResult: r
 				};
 			});
 			if (e()) return;
-			m(o), _(s), b(y.Ready);
+			f(o), g(s), y(S.Ready);
 		} catch {
-			e() || b(y.Error);
+			e() || y(S.Error);
 		}
 	}, [
 		t,
@@ -89,111 +92,119 @@ var y = /* @__PURE__ */ function(e) {
 		l,
 		u
 	]);
-	f(() => {
+	h(() => {
 		if (t == null || c == null) {
-			b(y.Unavailable);
+			y(S.Unavailable);
 			return;
 		}
 		let e = !1;
-		return b(y.Loading), w(() => e), () => {
+		return y(S.Loading), w(() => e), () => {
 			e = !0;
 		};
 	}, [
 		t,
 		c,
 		w,
-		x
+		b
 	]);
-	let E = d(async (e, n) => {
+	let T = m(async (e, n) => {
 		if (t == null) throw Error(`Tool call "${e}" failed: no matching MCP App`);
 		return u(t.toolsetId, e, n, t.kind);
 	}, [t, u]);
-	return v !== y.Ready || t == null || c == null || p == null ? {
-		status: v,
+	return _ !== S.Ready || t == null || c == null || d == null ? {
+		status: _,
 		reload: C
 	} : {
-		status: v,
+		status: _,
 		reload: C,
 		content: {
 			type: e.McpApp,
-			html: p,
+			html: d,
 			sandboxUrl: c,
 			toolInput: n?.toolInput,
-			toolResult: g,
+			toolResult: p,
 			hostContext: s,
-			onToolCall: E,
+			onToolCall: T,
 			onRequestDisplayMode: o
 		}
 	};
-}, k = u(({ match: e, toolCall: u, cache: f, cacheKey: p, hostAdapter: m, onExpand: h, expandAriaLabel: g, reloadAriaLabel: b, actionsGroupAriaLabel: x = "MCP app actions", loadErrorLabel: S }) => {
-	let { status: C, content: w, reload: T } = O(e, u, f, p, m, d((e) => e === "fullscreen" ? (h(), "fullscreen") : "inline", [h]));
-	return C === y.Unavailable ? null : /* @__PURE__ */ v("div", {
-		className: "bg-layer-2 flex w-full min-w-0 flex-col overflow-hidden rounded-xl border border-tertiary",
-		children: [/* @__PURE__ */ _("div", {
-			className: "flex min-h-10 items-center justify-end border-b border-tertiary px-4 py-2",
-			children: /* @__PURE__ */ v("div", {
+}, M = {
+	preview: "_preview_19as4_11",
+	previewHeader: "_previewHeader_19as4_23"
+}, N = p(({ match: e, toolCall: n, cache: p, cacheKey: h, hostAdapter: g, onExpand: _, expandAriaLabel: v, reloadAriaLabel: C, actionsGroupAriaLabel: w = "MCP app actions", loadErrorLabel: T, colors: E }) => {
+	let D = m((e) => e === "fullscreen" ? (_(), "fullscreen") : "inline", [_]), O = r({
+		"--mcpapp-preview-bg": E?.previewBackground,
+		"--mcpapp-preview-border": E?.previewBorder,
+		"--mcpapp-preview-header-border": E?.previewHeaderBorder
+	}), { status: k, content: A, reload: N } = j(e, n, p, h, g, D);
+	return k === S.Unavailable ? null : /* @__PURE__ */ b("div", {
+		style: O,
+		className: l(M.preview, "flex w-full min-w-0 flex-col overflow-hidden rounded-xl border", x.preview),
+		children: [/* @__PURE__ */ y("div", {
+			className: l(M.previewHeader, "flex min-h-10 items-center justify-end border-b px-4 py-2", x.previewHeader),
+			children: /* @__PURE__ */ b("div", {
 				role: "toolbar",
-				"aria-label": x,
+				"aria-label": w,
 				className: "flex items-center gap-1",
-				children: [/* @__PURE__ */ _(a, {
-					icon: /* @__PURE__ */ _(l, {
-						size: n.SM,
-						stroke: r,
+				children: [/* @__PURE__ */ y(s, {
+					icon: /* @__PURE__ */ y(f, {
+						size: i.SM,
+						stroke: a,
 						"aria-hidden": !0
 					}),
-					"aria-label": b,
-					size: i.Small,
-					onClick: T
-				}), /* @__PURE__ */ _(a, {
-					icon: /* @__PURE__ */ _(c, {
-						size: n.SM,
-						stroke: r,
+					"aria-label": C,
+					size: o.Small,
+					onClick: N
+				}), /* @__PURE__ */ y(s, {
+					icon: /* @__PURE__ */ y(d, {
+						size: i.SM,
+						stroke: a,
 						"aria-hidden": !0
 					}),
-					"aria-label": g,
-					size: i.Small,
-					onClick: h
+					"aria-label": v,
+					size: o.Small,
+					onClick: _
 				})]
 			})
-		}), /* @__PURE__ */ v("div", {
+		}), /* @__PURE__ */ b("div", {
 			className: "relative min-h-[200px] w-full",
 			children: [
-				C === y.Loading && /* @__PURE__ */ _("div", {
+				k === S.Loading && /* @__PURE__ */ y("div", {
 					className: "absolute inset-0 flex items-center justify-center",
-					children: /* @__PURE__ */ _(o, {})
+					children: /* @__PURE__ */ y(c, {})
 				}),
-				C === y.Error && /* @__PURE__ */ v("div", {
+				k === S.Error && /* @__PURE__ */ b("div", {
 					className: "absolute inset-0 flex flex-col items-center justify-center gap-2 p-4",
-					children: [/* @__PURE__ */ _(s, {
+					children: [/* @__PURE__ */ y(u, {
 						size: 40,
-						stroke: r,
+						stroke: a,
 						"aria-hidden": !0,
 						className: "text-error"
-					}), /* @__PURE__ */ _("p", {
+					}), /* @__PURE__ */ y("p", {
 						role: "alert",
 						className: "dial-body-text text-center text-primary",
-						children: S
+						children: T
 					})]
 				}),
-				C === y.Ready && w && /* @__PURE__ */ _(t, {
-					content: w,
-					errorLabel: S
+				k === S.Ready && A && /* @__PURE__ */ y(t, {
+					content: A,
+					errorLabel: T
 				})
 			]
 		})]
 	});
-}), A = 900 * 1e3, j = (e) => {
-	let t = m(/* @__PURE__ */ new Map()), n = m(/* @__PURE__ */ new Map());
-	return p(() => {
+}), P = 900 * 1e3, F = (e) => {
+	let t = _(/* @__PURE__ */ new Map()), n = _(/* @__PURE__ */ new Map());
+	return g(() => {
 		let r = (t) => `${e}:${t}`, i = (e, t) => `${r(e)}::${t ?? ""}`, a = (e, n) => {
 			let i = t.current.get(r(e));
-			if (i != null && i.seedKey === n && !(Date.now() - i.cachedAt > A)) return {
+			if (i != null && i.seedKey === n && !(Date.now() - i.cachedAt > P)) return {
 				html: i.html,
 				toolResult: i.toolResult
 			};
 		}, o = (e, n, i) => {
 			let a = Date.now();
-			for (let [e, n] of t.current) a - n.cachedAt > A && t.current.delete(e);
+			for (let [e, n] of t.current) a - n.cachedAt > P && t.current.delete(e);
 			t.current.set(r(e), {
 				...n,
 				seedKey: i,
@@ -220,4 +231,4 @@ var y = /* @__PURE__ */ function(e) {
 	}, [e]);
 };
 //#endregion
-export { k as McpAppInlinePreview, y as McpAppInlinePreviewStatus, S as collectToolCallNames, T as computeMcpAppSeedKey, C as findMcpAppForMessage, w as mcpAppCanvasKey, E as resolveMcpAppToolCallSeed, D as resolveMcpAppToolResult, O as useMcpAppInlinePreview, j as useMcpAppResponseCache };
+export { x as MCP_APPS_CLASS, N as McpAppInlinePreview, S as McpAppInlinePreviewStatus, T as collectToolCallNames, O as computeMcpAppSeedKey, E as findMcpAppForMessage, D as mcpAppCanvasKey, k as resolveMcpAppToolCallSeed, A as resolveMcpAppToolResult, j as useMcpAppInlinePreview, F as useMcpAppResponseCache };

package/models/mcp-apps.d.ts

@@ -99,4 +99,16 @@ export interface McpAppHostAdapter {
     /** Forwards a tool call the mounted app makes on its own (`onToolCall`) or the live re-call `resolveMcpAppToolResult` performs. */
     callTool: CallMcpAppTool;
 }
+/**
+ * Color overrides for `McpAppInlinePreview`, applied as CSS custom properties
+ * on the preview's root.
+ */
+export interface McpAppInlinePreviewColors {
+    /** Surface the mounted app sits on. Fallback: `--bg-layer-raised`. */
+    previewBackground?: string;
+    /** Border around the preview card. Fallback: `--stroke-tertiary`. */
+    previewBorder?: string;
+    /** Divider under the header strip. Fallback: `--stroke-tertiary`. */
+    previewHeaderBorder?: string;
+}
 //# sourceMappingURL=mcp-apps.d.ts.map

package/models/mcp-apps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mcp-apps.d.ts","sourceRoot":"","sources":["../../src/models/mcp-apps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAEzE,mJAAmJ;AACnJ,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,aAAa,CAAC;AAE1D;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAExD,yFAAyF;AACzF,MAAM,WAAW,aAAa;IAC5B,iEAAiE;IACjE,SAAS,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,oIAAoI;IACpI,QAAQ,EAAE,MAAM,CAAC;IACjB,mIAAmI;IACnI,WAAW,EAAE,MAAM,CAAC;IACpB,mGAAmG;IACnG,IAAI,EAAE,iBAAiB,CAAC;IACxB,gEAAgE;IAChE,SAAS,EAAE,mBAAmB,CAAC;CAChC;AAED,sJAAsJ;AACtJ,MAAM,WAAW,kBAAkB;IACjC,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,gDAAgD;IAChD,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B;AAED,+GAA+G;AAC/G,MAAM,MAAM,uBAAuB,GAAG,CACpC,SAAS,EAAE,MAAM,EACjB,WAAW,EAAE,MAAM,KAChB,OAAO,CAAC,MAAM,CAAC,CAAC;AAErB,8FAA8F;AAC9F,MAAM,MAAM,cAAc,GAAG,CAC3B,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,OAAO,EACb,IAAI,EAAE,iBAAiB,KACpB,OAAO,CAAC,cAAc,CAAC,CAAC;AAE7B,qEAAqE;AACrE,MAAM,WAAW,oBAAoB;IACnC,wCAAwC;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B;AAED,sEAAsE;AACtE,MAAM,WAAW,mBAAmB;IAClC;;;;;OAKG;IACH,GAAG,EAAE,CACH,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,MAAM,GAAG,SAAS,KACxB,oBAAoB,GAAG,SAAS,CAAC;IACtC,4EAA4E;IAC5E,GAAG,EAAE,CACH,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,oBAAoB,EAC3B,OAAO,EAAE,MAAM,GAAG,SAAS,KACxB,IAAI,CAAC;IACV,kDAAkD;IAClD,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;;;;;;OASG;IACH,UAAU,EAAE,CACV,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,MAAM,GAAG,SAAS,EAC3B,OAAO,EAAE,MAAM,OAAO,CAAC,oBAAoB,CAAC,KACzC,OAAO,CAAC,oBAAoB,CAAC,CAAC;CACpC;AAED,sDAAsD;AACtD,oBAAY,yBAAyB;IACnC,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,WAAW,gBAAgB;CAC5B;AAED;;;;;GAKG;AACH,MAAM,WAAW,iBAAiB;IAChC,oFAAoF;IACpF,WAAW,EAAE,gBAAgB,CAAC;IAC9B,mFAAmF;IACnF,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,4DAA4D;IAC5D,iBAAiB,EAAE,uBAAuB,CAAC;IAC3C,mIAAmI;IACnI,QAAQ,EAAE,cAAc,CAAC;CAC1B"}
+{"version":3,"file":"mcp-apps.d.ts","sourceRoot":"","sources":["../../src/models/mcp-apps.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@epam/ai-dial-mcp-apps",
   "description": "Host-agnostic MCP Apps building blocks — tool-call/message matching, the response cache, and the inline preview hook/component shared by the full-width canvas and inline surfaces",
-  "version": "1.2.0-dev.48",
+  "version": "1.2.0-dev.58",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -20,11 +20,11 @@
     "@tabler/icons-react": "^3.44.0",
     "@mcp-ui/client": "^7.1.1",
     "@modelcontextprotocol/sdk": "^1.29.0",
-    "@epam/ai-dial-attachment-canvas": "1.2.0-dev.48"
+    "@epam/ai-dial-attachment-canvas": "1.2.0-dev.58"
   },
   "peerDependencies": {
-    "@epam/ai-dial-chat-shared": "1.2.0-dev.48",
-    "@epam/ai-dial-ui-kit": "^0.15.0-dev.7",
+    "@epam/ai-dial-chat-shared": "1.2.0-dev.58",
+    "@epam/ai-dial-ui-kit": "^0.15.0-dev.9",
     "react": "^19.2.8"
   },
   "repository": {