@optiaxiom/proteus 0.1.24 → 0.1.26

package/dist/esm/assets/src/proteus-chart/{ProteusChart.css.ts.vanilla-BCN2MOqI.css → ProteusChart.css.ts.vanilla-B-FJ2e1F.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom.tmkl1w;
-@layer optiaxiom.tmkl1w {
+@layer optiaxiom._1fktkd1;
+@layer optiaxiom._1fktkd1 {
   .ProteusChart__jmlqij1 {
     border-radius: 16px;
   }

package/dist/esm/assets/src/proteus-chart/{ProteusChartTooltipContent.css.ts.vanilla-DmqHa3bY.css → ProteusChartTooltipContent.css.ts.vanilla-B7GlVdiy.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom.tmkl1w;
-@layer optiaxiom.tmkl1w {
+@layer optiaxiom._1fktkd1;
+@layer optiaxiom._1fktkd1 {
   .ProteusChartTooltipContent__1gsvq810 {
     min-width: 128px;
   }

package/dist/esm/assets/src/proteus-document/{ProteusDocumentShell.css.ts.vanilla-DxHEfy0L.css → ProteusDocumentShell.css.ts.vanilla-GbLC1fdW.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom.tmkl1w;
-@layer optiaxiom.tmkl1w {
+@layer optiaxiom._1fktkd1;
+@layer optiaxiom._1fktkd1 {
   .ProteusDocumentShell__vpuvfj1 {
     margin: -4px;
   }

package/dist/esm/assets/src/proteus-image-carousel/{ProteusImageCarousel.css.ts.vanilla-Bbo2TbLv.css → ProteusImageCarousel.css.ts.vanilla-B21Y_xyv.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom.tmkl1w;
-@layer optiaxiom.tmkl1w {
+@layer optiaxiom._1fktkd1;
+@layer optiaxiom._1fktkd1 {
   .ProteusImageCarousel__1t6qej70 {
     outline: none;
     user-select: none;

package/dist/esm/assets/src/proteus-question/{ProteusQuestion.css.ts.vanilla-DRvLrb5J.css → ProteusQuestion.css.ts.vanilla--FkursVc.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom.tmkl1w;
-@layer optiaxiom.tmkl1w {
+@layer optiaxiom._1fktkd1;
+@layer optiaxiom._1fktkd1 {
   .ProteusQuestion__8f590p0 {
     outline: none;
   }

package/dist/esm/index.js

@@ -1,4 +1,5 @@
 export { ProteusAction } from './proteus-action/ProteusAction.js';
+export { ProteusBridge } from './proteus-bridge/ProteusBridge.js';
 export { ProteusChart } from './proteus-chart/ProteusChart.js';
 export { ProteusDataTable } from './proteus-data-table/ProteusDataTable.js';
 export { ProteusDocumentRenderer } from './proteus-document/ProteusDocumentRenderer.js';

package/dist/esm/proteus-bridge/ProteusBridge.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { AppBridge, PostMessageTransport } from '@modelcontextprotocol/ext-apps/app-bridge';
+import { useState, useRef, useEffect } from 'react';
+import { OPENAI_SHIM_SCRIPT } from '../_virtual/_openai-shim-script.js';
+import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentContext.js';
+
+function ProteusBridge({ height = 400, resource }) {
+  const { data, onEvent, useResource } = useProteusDocumentContext(
+    "@optiaxiom/proteus/ProteusBridge"
+  );
+  const result = useResource?.(resource);
+  const html = result?.data?.text ?? "";
+  const mimeType = result?.data?.mimeType;
+  const [iframe, setIframe] = useState(null);
+  const dataRef = useRef(data);
+  dataRef.current = data;
+  useEffect(() => {
+    if (!iframe?.contentWindow) {
+      return;
+    }
+    const bridge = new AppBridge(
+      null,
+      { name: "Opal", version: "1.0.0" },
+      { logging: {}, openLinks: {}, serverTools: {} },
+      {
+        hostContext: {
+          containerDimensions: { maxHeight: iframe.clientHeight },
+          displayMode: "inline"
+        }
+      }
+    );
+    bridge.oncalltool = async (params) => {
+      const result2 = await onEvent({
+        interaction: params.name,
+        params: params.arguments ?? {}
+      });
+      return {
+        content: [
+          { text: JSON.stringify(result2 ?? ""), type: "text" }
+        ]
+      };
+    };
+    bridge.onmessage = async (params) => {
+      const message = params.content?.filter((content) => content.type === "text").map((content) => content.text).join("\n\n") ?? "";
+      await onEvent({ message });
+      return {};
+    };
+    bridge.onopenlink = async ({ url }) => {
+      window.open(url, "_blank", "noopener");
+      return {};
+    };
+    bridge.addEventListener("sizechange", ({ height: height2 }) => {
+      if (height2 != null) {
+        iframe.style.height = `${height2}px`;
+      }
+    });
+    bridge.addEventListener("initialized", () => {
+      void bridge.sendToolResult({
+        content: [
+          {
+            text: JSON.stringify(dataRef.current),
+            type: "text"
+          }
+        ]
+      });
+    });
+    const transport = new PostMessageTransport(
+      iframe.contentWindow,
+      iframe.contentWindow
+    );
+    void bridge.connect(transport);
+    return () => {
+      void bridge.close();
+    };
+  }, [iframe, onEvent]);
+  return result?.isError || !html ? null : /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      ref: setIframe,
+      sandbox: "allow-scripts allow-popups allow-popups-to-escape-sandbox allow-forms",
+      srcDoc: mimeType === "text/html;profile=openai-app" ? OPENAI_SHIM_SCRIPT + html : html,
+      style: { border: "none", height, width: "100%" },
+      title: "Opal Widget"
+    }
+  );
+}
+ProteusBridge.displayName = "@optiaxiom/proteus/ProteusBridge";
+
+export { ProteusBridge };

package/dist/esm/proteus-chart/ProteusChart-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-chart/ProteusChart.css.ts.vanilla-BCN2MOqI.css';
+import './../assets/src/proteus-chart/ProteusChart.css.ts.vanilla-B-FJ2e1F.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
 var chart = recipe({base:[{border:'1',borderColor:'border.tertiary',fontSize:'sm',p:'16'},'ProteusChart__jmlqij1','ProteusChart__jmlqij0']});

package/dist/esm/proteus-chart/ProteusChartTooltipContent-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-chart/ProteusChartTooltipContent.css.ts.vanilla-DmqHa3bY.css';
+import './../assets/src/proteus-chart/ProteusChartTooltipContent.css.ts.vanilla-B7GlVdiy.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
 var tooltip = recipe({base:[{bg:'bg.default',border:'1',borderColor:'border.secondary',display:'grid',fontSize:'sm',gap:'6',px:'8',py:'10',rounded:'lg',shadow:'lg'},'ProteusChartTooltipContent__1gsvq810']});

package/dist/esm/proteus-document/ProteusDocumentShell-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-document/ProteusDocumentShell.css.ts.vanilla-DxHEfy0L.css';
+import './../assets/src/proteus-document/ProteusDocumentShell.css.ts.vanilla-GbLC1fdW.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
 var body = recipe({base:[{flexDirection:'column',gap:'16'},'ProteusDocumentShell__vpuvfj0'],variants:{truncate:{false:{},true:[{maxH:'sm',overflow:'auto',p:'4'},'ProteusDocumentShell__vpuvfj1']}}});

package/dist/esm/proteus-document/ProteusDocumentShell.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { IconSouth } from '@optiaxiom/icons';
+import { IconArrowDown } from '@optiaxiom/icons';
 import { Disclosure, DisclosureTrigger, Box, Group, Text, DisclosureContent, Heading, Tooltip } from '@optiaxiom/react';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { set } from 'jsonpointer';
@@ -22,7 +22,8 @@ function ProteusDocumentShell({
   onOpenChange,
   open: openProp,
   readOnly = false,
-  strict
+  strict,
+  useResource
 }) {
   const [valid, setValid] = useState(false);
   const formRef = useRef(null);
@@ -69,7 +70,7 @@ function ProteusDocumentShell({
       }),
       onEvent: useEffectEvent(async (event) => {
         if ("interaction" in event) {
-          await onInteraction?.(event.interaction);
+          return await onInteraction?.(event.interaction, event.params);
         } else if ("message" in event) {
           await onMessage?.(event.message);
         } else if (event.action === "download") {
@@ -92,9 +93,11 @@ function ProteusDocumentShell({
             await Promise.all(urls.map((u) => downloadFile(u)));
           }
         }
+        return;
       }),
       readOnly,
       strict,
+      useResource,
       valid,
       children: /* @__PURE__ */ jsxs(
         Disclosure,
@@ -180,7 +183,7 @@ function ProteusDocumentShell({
                             ...body({ truncate: element.compact }),
                             children: [
                               element.body,
-                              element.compact && /* @__PURE__ */ jsx(Box, { ...scrollIndicator(), children: /* @__PURE__ */ jsx(IconSouth, {}) })
+                              element.compact && /* @__PURE__ */ jsx(Box, { ...scrollIndicator(), children: /* @__PURE__ */ jsx(IconArrowDown, {}) })
                             ]
                           }
                         ),

package/dist/esm/proteus-element/ProteusElement.js

@@ -5,6 +5,7 @@ import { Time, Range } from '@optiaxiom/react/unstable';
 import { lazy, Suspense } from 'react';
 import { IconCalendar } from '../icons/IconCalendar.js';
 import { ProteusAction } from '../proteus-action/ProteusAction.js';
+import { ProteusBridge } from '../proteus-bridge/ProteusBridge.js';
 import { ProteusDataTable } from '../proteus-data-table/ProteusDataTable.js';
 import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentContext.js';
 import { useProteusDocumentPathContext } from '../proteus-document/ProteusDocumentPathContext.js';
@@ -65,6 +66,13 @@ const ProteusElement = ({
       return /* @__PURE__ */ jsx(Avatar, { ...resolve(element) });
     case "Badge":
       return /* @__PURE__ */ jsx(Badge, { ...resolve(element) });
+    case "Bridge":
+      return /* @__PURE__ */ jsx(
+        ProteusBridge,
+        {
+          ...resolve(element)
+        }
+      );
     case "Button":
       return /* @__PURE__ */ jsx(ProteusAction, { ...resolve(element) });
     case "Card":

package/dist/esm/proteus-image-carousel/ProteusImageCarousel-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-image-carousel/ProteusImageCarousel.css.ts.vanilla-Bbo2TbLv.css';
+import './../assets/src/proteus-image-carousel/ProteusImageCarousel.css.ts.vanilla-B21Y_xyv.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
 var carousel = recipe({base:[{flexDirection:'column',gap:'12'},'ProteusImageCarousel__1t6qej70']});

package/dist/esm/proteus-question/ProteusQuestion-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-question/ProteusQuestion.css.ts.vanilla-DRvLrb5J.css';
+import './../assets/src/proteus-question/ProteusQuestion.css.ts.vanilla--FkursVc.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
 var addon = recipe({base:[{display:'grid',fontWeight:'500',placeItems:'center',rounded:'lg',size:'md',transition:'colors'},'ProteusQuestion__8f590p3'],variants:{cursor:{pointer:{cursor:'pointer'}}}});

package/dist/esm/proteus-question/ProteusQuestion.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { IconArrowRightAlt, IconEdit } from '@optiaxiom/icons';
+import { IconArrowRight, IconPen } from '@optiaxiom/icons';
 import { Group, Text, Button, Box, Checkbox } from '@optiaxiom/react';
 import { InlineInput } from '@optiaxiom/react/unstable';
 import * as RovingFocus from '@radix-ui/react-roving-focus';
@@ -226,7 +226,7 @@ A: ${value2 || "[Not specified]"}`
                             h: "24",
                             ml: "auto",
                             w: "24",
-                            children: /* @__PURE__ */ jsx(IconArrowRightAlt, {})
+                            children: /* @__PURE__ */ jsx(IconArrowRight, {})
                           }
                         )
                       ] })
@@ -241,7 +241,7 @@ A: ${value2 || "[Not specified]"}`
                     role: "group",
                     ...choice({ cursor: "text" }),
                     children: /* @__PURE__ */ jsxs(Group, { gap: "12", children: [
-                      type === "single_select" ? /* @__PURE__ */ jsx(Box, { ...addon({ cursor: "pointer" }), children: /* @__PURE__ */ jsx(IconEdit, {}) }) : /* @__PURE__ */ jsx(
+                      type === "single_select" ? /* @__PURE__ */ jsx(Box, { ...addon({ cursor: "pointer" }), children: /* @__PURE__ */ jsx(IconPen, {}) }) : /* @__PURE__ */ jsx(
                         Checkbox,
                         {
                           checked: otherChecked,
@@ -303,7 +303,7 @@ A: ${value2 || "[Not specified]"}`
                         {
                           appearance: otherValue ? "primary-opal" : "default",
                           "aria-label": otherValue && (isLast ? "Submit" : "Next"),
-                          icon: otherValue && /* @__PURE__ */ jsx(IconArrowRightAlt, {}),
+                          icon: otherValue && /* @__PURE__ */ jsx(IconArrowRight, {}),
                           ml: "auto",
                           onClick: (event) => {
                             event.preventDefault();
@@ -354,7 +354,7 @@ A: ${value2 || "[Not specified]"}`
                   appearance: valid ? "primary-opal" : "default",
                   "aria-label": isLast ? "Submit" : "Next",
                   disabled: !valid,
-                  icon: /* @__PURE__ */ jsx(IconArrowRightAlt, {}),
+                  icon: /* @__PURE__ */ jsx(IconArrowRight, {}),
                   onClick: (event) => {
                     event.preventDefault();
                     onSubmit();

package/dist/esm/schema/public-schema.json.js

@@ -2707,6 +2707,9 @@ var definitions = {
 			{
 				$ref: "#/definitions/ProteusBadge"
 			},
+			{
+				$ref: "#/definitions/ProteusBridge"
+			},
 			{
 				$ref: "#/definitions/ProteusButton"
 			},
@@ -2806,6 +2809,12 @@ var definitions = {
 					interaction: {
 						description: "Name of registered interaction to call",
 						type: "string"
+					},
+					params: {
+						additionalProperties: {
+						},
+						description: "Parameters to pass to the interaction handler",
+						type: "object"
 					}
 				},
 				required: [
@@ -3707,6 +3716,38 @@ var definitions = {
 		],
 		type: "object"
 	},
+	ProteusBridge: {
+		additionalProperties: false,
+		examples: [
+			{
+				$type: "Bridge",
+				height: 400,
+				resource: "ui://sample-widget"
+			}
+		],
+		properties: {
+			$type: {
+				"const": "Bridge"
+			},
+			fallback: {
+				$ref: "#/definitions/ProteusNode",
+				description: "Content rendered on platforms without iframe support (Teams, Slack, mobile). If omitted, a default 'View in Opal web' message is shown."
+			},
+			height: {
+				description: "Height of the iframe in pixels",
+				type: "number"
+			},
+			resource: {
+				description: "Resource URI identifying the MCP app to render (e.g., 'ui://sample-widget')",
+				type: "string"
+			}
+		},
+		required: [
+			"$type",
+			"resource"
+		],
+		type: "object"
+	},
 	ProteusButton: {
 		additionalProperties: false,
 		examples: [

package/dist/esm/schema/runtime-schema.json.js

@@ -2695,6 +2695,9 @@ var definitions = {
 			{
 				$ref: "#/definitions/ProteusBadge"
 			},
+			{
+				$ref: "#/definitions/ProteusBridge"
+			},
 			{
 				$ref: "#/definitions/ProteusButton"
 			},
@@ -2793,6 +2796,12 @@ var definitions = {
 					interaction: {
 						description: "Name of registered interaction to call",
 						type: "string"
+					},
+					params: {
+						additionalProperties: {
+						},
+						description: "Parameters to pass to the interaction handler",
+						type: "object"
 					}
 				},
 				required: [
@@ -3687,6 +3696,37 @@ var definitions = {
 		],
 		type: "object"
 	},
+	ProteusBridge: {
+		examples: [
+			{
+				$type: "Bridge",
+				height: 400,
+				resource: "ui://sample-widget"
+			}
+		],
+		properties: {
+			$type: {
+				"const": "Bridge"
+			},
+			fallback: {
+				$ref: "#/definitions/ProteusNode",
+				description: "Content rendered on platforms without iframe support (Teams, Slack, mobile). If omitted, a default 'View in Opal web' message is shown."
+			},
+			height: {
+				description: "Height of the iframe in pixels",
+				type: "number"
+			},
+			resource: {
+				description: "Resource URI identifying the MCP app to render (e.g., 'ui://sample-widget')",
+				type: "string"
+			}
+		},
+		required: [
+			"$type",
+			"resource"
+		],
+		type: "object"
+	},
 	ProteusButton: {
 		examples: [
 			{

package/dist/index.d.ts

@@ -2,6 +2,25 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { BoxProps, SelectProps, Disclosure, ButtonProps, InputProps, TextareaProps } from '@optiaxiom/react';
 import { ReactNode, ComponentPropsWithoutRef } from 'react';
 
+type ProteusBridgeProps = {
+    /**
+     * Content rendered on platforms without iframe support
+     */
+    fallback?: ReactNode;
+    /**
+     * Height of the iframe in pixels
+     */
+    height?: number;
+    /**
+     * Resource URI identifying the MCP app to render
+     */
+    resource: string;
+};
+declare function ProteusBridge({ height, resource }: ProteusBridgeProps): react_jsx_runtime.JSX.Element | null;
+declare namespace ProteusBridge {
+    var displayName: string;
+}
+
 type Series = {
     dataKey: string;
     name?: string;
@@ -194,6 +213,14 @@ type ProteusValueProps = {
     path: string;
 };
 
+type UseResource = (resource: string) => {
+    data: undefined | {
+        mimeType: string;
+        text: string;
+    };
+    isError: boolean;
+};
+
 type ProteusDocumentShellProps = Pick<ComponentPropsWithoutRef<typeof Disclosure>, "defaultOpen" | "onOpenChange" | "open"> & {
     /**
      * Whether block is collapsible
@@ -220,7 +247,7 @@ type ProteusDocumentShellProps = Pick<ComponentPropsWithoutRef<typeof Disclosure
     /**
      * Callback when user clicks a Action button with interaction handler
      */
-    onInteraction?: (name: string) => Promise<void> | void;
+    onInteraction?: (name: string, params?: Record<string, unknown>) => Promise<unknown> | unknown;
     /**
      * Callback when user sends a message action
      */
@@ -233,6 +260,10 @@ type ProteusDocumentShellProps = Pick<ComponentPropsWithoutRef<typeof Disclosure
      * If true, the renderer will throw an error if the provided document is invalid. Otherwise, it will fail silently and render nothing.
      */
     strict?: boolean;
+    /**
+     * Hook to resolve a resource URI to HTML content for Bridge elements
+     */
+    useResource?: UseResource;
 };
 type ProteusDocument$2 = {
     actions?: ReactNode;
@@ -245,7 +276,7 @@ type ProteusDocument$2 = {
     title?: ReactNode;
     titleIcon?: string;
 };
-declare function ProteusDocumentShell({ collapsible: collapsibleProp, data, defaultOpen, element, onDataChange, onDownload, onInteraction, onMessage, onOpenChange, open: openProp, readOnly, strict, }: ProteusDocumentShellProps): react_jsx_runtime.JSX.Element;
+declare function ProteusDocumentShell({ collapsible: collapsibleProp, data, defaultOpen, element, onDataChange, onDownload, onInteraction, onMessage, onOpenChange, open: openProp, readOnly, strict, useResource, }: ProteusDocumentShellProps): react_jsx_runtime.JSX.Element;
 declare namespace ProteusDocumentShell {
     var displayName: string;
 }
@@ -257,6 +288,7 @@ type ProteusEventHandler = {
     }) | string | string[];
 } | {
     interaction: string;
+    params?: Record<string, unknown>;
 } | {
     message: string;
 };
@@ -322,5 +354,5 @@ declare namespace ProteusTextarea {
 
 declare function useProteusValue(element: ProteusValueProps): any;
 
-export { ProteusAction, ProteusChart, ProteusDataTable, ProteusDocumentRenderer, ProteusDocumentShell, ProteusImage, ProteusImageCarousel, ProteusInput, ProteusMap, ProteusSelect, ProteusShow, ProteusTextarea, safeParseDocument, useProteusValue };
+export { ProteusAction, ProteusBridge, ProteusChart, ProteusDataTable, ProteusDocumentRenderer, ProteusDocumentShell, ProteusImage, ProteusImageCarousel, ProteusInput, ProteusMap, ProteusSelect, ProteusShow, ProteusTextarea, safeParseDocument, useProteusValue };
 export type { ProteusDocumentRendererProps, ProteusDocumentShellProps };