@optiaxiom/proteus 1.0.0 → 1.1.0

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

@@ -1,90 +1,76 @@
 "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';
-
+import { useProteusDocumentContext } from "../proteus-document/ProteusDocumentContext.js";
+import { OPENAI_SHIM_SCRIPT } from "../_virtual/_openai-shim-script.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { AppBridge, PostMessageTransport } from "@modelcontextprotocol/ext-apps/app-bridge";
+//#region src/proteus-bridge/ProteusBridge.tsx
 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+skybridge" ? OPENAI_SHIM_SCRIPT + html : html,
-      style: { border: "none", height, width: "100%" },
-      title: "Opal Widget"
-    }
-  );
+	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 result = await onEvent({
+				interaction: params.name,
+				params: params.arguments ?? {}
+			});
+			return { content: [{
+				text: JSON.stringify(result ?? ""),
+				type: "text"
+			}] };
+		};
+		bridge.onmessage = async (params) => {
+			await onEvent({ message: params.content?.filter((content) => content.type === "text").map((content) => content.text).join("\n\n") ?? "" });
+			return {};
+		};
+		bridge.onopenlink = async ({ url }) => {
+			window.open(url, "_blank", "noopener");
+			return {};
+		};
+		bridge.addEventListener("sizechange", ({ height }) => {
+			if (height != null) iframe.style.height = `${height}px`;
+		});
+		bridge.addEventListener("initialized", () => {
+			bridge.sendToolResult({ content: [{
+				text: JSON.stringify(dataRef.current),
+				type: "text"
+			}] });
+		});
+		const transport = new PostMessageTransport(iframe.contentWindow, iframe.contentWindow);
+		bridge.connect(transport);
+		return () => {
+			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+skybridge" ? OPENAI_SHIM_SCRIPT + html : html,
+		style: {
+			border: "none",
+			height,
+			width: "100%"
+		},
+		title: "Opal Widget"
+	});
 }
 ProteusBridge.displayName = "@optiaxiom/proteus/ProteusBridge";
-
+//#endregion
 export { ProteusBridge };

package/dist/esm/proteus-card-link/ProteusCardLink.js

@@ -1,41 +1,28 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { CardLink } from '@optiaxiom/react';
-import { useState } from 'react';
-import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentContext.js';
-import { useResolveProteusValues } from '../proteus-document/useResolveProteusValues.js';
-
-function ProteusCardLink({
-  children,
-  onClick,
-  ...props
-}) {
-  const { onEvent } = useProteusDocumentContext(
-    "@optiaxiom/proteus/ProteusCardLink"
-  );
-  const resolvedOnClick = useResolveProteusValues(
-    onClick ?? {}
-  );
-  const [loading, setLoading] = useState(false);
-  return /* @__PURE__ */ jsx(
-    CardLink,
-    {
-      "aria-busy": loading || void 0,
-      onClick: onClick ? async (event) => {
-        event.preventDefault();
-        if (loading) {
-          return;
-        }
-        setLoading(true);
-        await onEvent(resolvedOnClick);
-        setLoading(false);
-      } : void 0,
-      target: "_blank",
-      ...props,
-      children
-    }
-  );
+import { useProteusDocumentContext } from "../proteus-document/ProteusDocumentContext.js";
+import { useResolveProteusValues } from "../proteus-document/useResolveProteusValues.js";
+import { CardLink } from "@optiaxiom/react";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/proteus-card-link/ProteusCardLink.tsx
+function ProteusCardLink({ children, onClick, ...props }) {
+	const { onEvent } = useProteusDocumentContext("@optiaxiom/proteus/ProteusCardLink");
+	const resolvedOnClick = useResolveProteusValues(onClick ?? {});
+	const [loading, setLoading] = useState(false);
+	return /* @__PURE__ */ jsx(CardLink, {
+		"aria-busy": loading || void 0,
+		onClick: onClick ? async (event) => {
+			event.preventDefault();
+			if (loading) return;
+			setLoading(true);
+			await onEvent(resolvedOnClick);
+			setLoading(false);
+		} : void 0,
+		target: "_blank",
+		...props,
+		children
+	});
 }
 ProteusCardLink.displayName = "@optiaxiom/proteus/ProteusCardLink";
-
+//#endregion
 export { ProteusCardLink };

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

@@ -1,6 +1,15 @@
-import './../assets/src/proteus-chart/ProteusChart.css.ts.vanilla-BeRNNwBj.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']});
-
+import "./../assets/src/proteus-chart/ProteusChart.css.ts.vanilla-yGx8JdKz.css";
+import { recipe } from "@optiaxiom/react/css-runtime";
+//#region src/proteus-chart/ProteusChart.css.ts
+var chart = recipe({ base: [
+	{
+		border: "1",
+		borderColor: "border.tertiary",
+		fontSize: "sm",
+		p: "16"
+	},
+	"ProteusChart__jmlqij1",
+	"ProteusChart__jmlqij0"
+] });
+//#endregion
 export { chart };

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

@@ -1,89 +1,91 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Box, theme } from '@optiaxiom/react';
-import { get } from 'jsonpointer';
-import { useRef } from 'react';
-import { ResponsiveContainer, BarChart, LineChart, CartesianGrid, YAxis, XAxis, Tooltip, Bar, Line } from 'recharts';
-import { chart } from './ProteusChart-css.js';
-import { ProteusChartContext } from './ProteusChartContext.js';
-import { ProteusChartTooltipContent } from './ProteusChartTooltipContent.js';
-
-const DEFAULT_COLORS = ["#096DD9", "#E59700", "#38C56C", "#D1D8DE"];
+import { chart } from "./ProteusChart-css.js";
+import { ProteusChartContext } from "./ProteusChartContext.js";
+import { ProteusChartTooltipContent } from "./ProteusChartTooltipContent.js";
+import { Box, theme } from "@optiaxiom/react";
+import { useRef } from "react";
+import { get } from "jsonpointer";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Bar, BarChart, CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip as Tooltip$1, XAxis, YAxis } from "recharts";
+//#region src/proteus-chart/ProteusChart.tsx
+const DEFAULT_COLORS = [
+	"#096DD9",
+	"#E59700",
+	"#38C56C",
+	"#D1D8DE"
+];
 const getColor = (index) => DEFAULT_COLORS[index % DEFAULT_COLORS.length];
-const ProteusChart = ({
-  data,
-  layout = "horizontal",
-  series,
-  type,
-  xAxisKey
-}) => {
-  const isVertical = layout === "vertical";
-  const ChartComponent = type === "bar" ? BarChart : LineChart;
-  const Chart = type === "bar" ? Bar : Line;
-  const CategoryAxis = isVertical ? YAxis : XAxis;
-  const ValueAxis = isVertical ? XAxis : YAxis;
-  const containerRef = useRef(null);
-  return /* @__PURE__ */ jsx(ProteusChartContext.Provider, { value: containerRef, children: /* @__PURE__ */ jsx(Box, { asChild: true, ref: containerRef, ...chart(), children: /* @__PURE__ */ jsx(ResponsiveContainer, { aspect: 16 / 9, width: "100%", children: /* @__PURE__ */ jsxs(ChartComponent, { data, layout, children: [
-    /* @__PURE__ */ jsx(
-      CartesianGrid,
-      {
-        stroke: theme.colors["border.secondary"],
-        strokeDasharray: "4 4",
-        vertical: false
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      CategoryAxis,
-      {
-        axisLine: false,
-        dataKey: (row) => get(row, "/" + xAxisKey),
-        padding: { left: 16, right: 16 },
-        tick: { fill: theme.colors["fg.secondary"] },
-        tickFormatter: (value) => value.length > 30 ? value.slice(0, 30) + "\u2026" : value,
-        tickLine: false,
-        tickMargin: 8,
-        type: "category",
-        width: isVertical ? "auto" : void 0
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ValueAxis,
-      {
-        axisLine: { stroke: theme.colors["border.default"] },
-        minTickGap: 32,
-        tick: { fill: theme.colors["fg.secondary"] },
-        tickFormatter: (value) => new Intl.NumberFormat(void 0, {
-          compactDisplay: "short",
-          notation: "compact"
-        }).format(value),
-        tickMargin: 8,
-        type: "number",
-        width: isVertical ? void 0 : "auto"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Tooltip,
-      {
-        content: ProteusChartTooltipContent,
-        cursor: false,
-        portal: document.body
-      }
-    ),
-    series?.map((s, i) => /* @__PURE__ */ jsx(
-      Chart,
-      {
-        dataKey: (row) => get(row, "/" + s.dataKey),
-        dot: false,
-        fill: getColor(i),
-        name: s.name ?? s.dataKey,
-        radius: type === "bar" ? 4 : void 0,
-        stroke: getColor(i),
-        type: "natural"
-      },
-      i
-    ))
-  ] }) }) }) });
+const ProteusChart = ({ data, layout = "horizontal", series, type, xAxisKey }) => {
+	const isVertical = layout === "vertical";
+	const ChartComponent = type === "bar" ? BarChart : LineChart;
+	const Chart = type === "bar" ? Bar : Line;
+	const CategoryAxis = isVertical ? YAxis : XAxis;
+	const ValueAxis = isVertical ? XAxis : YAxis;
+	const containerRef = useRef(null);
+	return /* @__PURE__ */ jsx(ProteusChartContext.Provider, {
+		value: containerRef,
+		children: /* @__PURE__ */ jsx(Box, {
+			asChild: true,
+			ref: containerRef,
+			...chart(),
+			children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+				aspect: 16 / 9,
+				width: "100%",
+				children: /* @__PURE__ */ jsxs(ChartComponent, {
+					data,
+					layout,
+					children: [
+						/* @__PURE__ */ jsx(CartesianGrid, {
+							stroke: theme.colors["border.secondary"],
+							strokeDasharray: "4 4",
+							vertical: false
+						}),
+						/* @__PURE__ */ jsx(CategoryAxis, {
+							axisLine: false,
+							dataKey: (row) => get(row, "/" + xAxisKey),
+							padding: {
+								left: 16,
+								right: 16
+							},
+							tick: { fill: theme.colors["fg.secondary"] },
+							tickFormatter: (value) => value.length > 30 ? value.slice(0, 30) + "…" : value,
+							tickLine: false,
+							tickMargin: 8,
+							type: "category",
+							width: isVertical ? "auto" : void 0
+						}),
+						/* @__PURE__ */ jsx(ValueAxis, {
+							axisLine: { stroke: theme.colors["border.default"] },
+							minTickGap: 32,
+							tick: { fill: theme.colors["fg.secondary"] },
+							tickFormatter: (value) => new Intl.NumberFormat(void 0, {
+								compactDisplay: "short",
+								notation: "compact"
+							}).format(value),
+							tickMargin: 8,
+							type: "number",
+							width: isVertical ? void 0 : "auto"
+						}),
+						/* @__PURE__ */ jsx(Tooltip$1, {
+							content: ProteusChartTooltipContent,
+							cursor: false,
+							portal: document.body
+						}),
+						series?.map((s, i) => /* @__PURE__ */ jsx(Chart, {
+							dataKey: (row) => get(row, "/" + s.dataKey),
+							dot: false,
+							fill: getColor(i),
+							name: s.name ?? s.dataKey,
+							radius: type === "bar" ? 4 : void 0,
+							stroke: getColor(i),
+							type: "natural"
+						}, i))
+					]
+				})
+			})
+		})
+	});
 };
 ProteusChart.displayName = "@optiaxiom/proteus/ProteusChart";
-
+//#endregion
 export { ProteusChart };

package/dist/esm/proteus-chart/ProteusChartContext.js

@@ -1,7 +1,7 @@
 "use client";
-import { createContext, useContext } from 'react';
-
+import { createContext, useContext } from "react";
+//#region src/proteus-chart/ProteusChartContext.tsx
 const ProteusChartContext = createContext(void 0);
 const useProteusChartContainer = () => useContext(ProteusChartContext);
-
+//#endregion
 export { ProteusChartContext, useProteusChartContainer };

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

@@ -1,7 +1,24 @@
-import './../assets/src/proteus-chart/ProteusChartTooltipContent.css.ts.vanilla-Df_IhL_i.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',pointerEvents:'none',px:'8',py:'10',rounded:'lg',shadow:'lg',transition:'all',z:'popover'},'ProteusChartTooltipContent__1gsvq810']});
-var value = recipe({base:[{color:'fg.default',fontWeight:'500'},'ProteusChartTooltipContent__1gsvq811']});
-
+import { recipe } from "@optiaxiom/react/css-runtime";
+import "./../assets/src/proteus-chart/ProteusChartTooltipContent.css.ts.vanilla-HapBe2oo.css";
+//#region src/proteus-chart/ProteusChartTooltipContent.css.ts
+var tooltip = recipe({ base: [{
+	bg: "bg.default",
+	border: "1",
+	borderColor: "border.secondary",
+	display: "grid",
+	fontSize: "sm",
+	gap: "6",
+	pointerEvents: "none",
+	px: "8",
+	py: "10",
+	rounded: "lg",
+	shadow: "lg",
+	transition: "all",
+	z: "popover"
+}, "ProteusChartTooltipContent__1gsvq810"] });
+var value = recipe({ base: [{
+	color: "fg.default",
+	fontWeight: "500"
+}, "ProteusChartTooltipContent__1gsvq811"] });
+//#endregion
 export { tooltip, value };

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

@@ -1,70 +1,56 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Box, Group } from '@optiaxiom/react';
-import { useRef } from 'react';
-import { applyFormatter } from '../proteus-document/getProteusValue.js';
-import { useProteusChartContainer } from './ProteusChartContext.js';
-import { value, tooltip } from './ProteusChartTooltipContent-css.js';
-
+import { applyFormatter } from "../proteus-document/getProteusValue.js";
+import { useProteusChartContainer } from "./ProteusChartContext.js";
+import { tooltip, value } from "./ProteusChartTooltipContent-css.js";
+import { Box, Group } from "@optiaxiom/react";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/proteus-chart/ProteusChartTooltipContent.tsx
 const OFFSET = 10;
-function ProteusChartTooltipContent({
-  active,
-  coordinate,
-  label,
-  payload
-}) {
-  const containerRef = useProteusChartContainer();
-  const ref = useRef(null);
-  if (!active || !payload?.length) {
-    return null;
-  }
-  const wrapperRect = containerRef?.current?.querySelector(".recharts-wrapper")?.getBoundingClientRect();
-  const tooltipRect = ref.current?.getBoundingClientRect();
-  const cx = coordinate?.x ?? 0;
-  const cy = coordinate?.y ?? 0;
-  const th = tooltipRect?.height ?? 0;
-  const translateX = cx + OFFSET;
-  const translateY = cy - th / 2;
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      ref,
-      style: {
-        left: 0,
-        top: 0,
-        transform: `translate(${(wrapperRect?.left ?? 0) + translateX + window.scrollX}px, ${(wrapperRect?.top ?? 0) + translateY + window.scrollY}px)`
-      },
-      ...tooltip(),
-      children: [
-        label && /* @__PURE__ */ jsx(Box, { fontWeight: "500", children: label }),
-        /* @__PURE__ */ jsx("div", { children: payload.filter((item) => item.type !== "none").map((item, i) => /* @__PURE__ */ jsxs(
-          Box,
-          {
-            alignItems: "center",
-            display: "flex",
-            gap: "8",
-            justifyContent: "space-between",
-            children: [
-              /* @__PURE__ */ jsxs(Group, { gap: "8", children: [
-                /* @__PURE__ */ jsx(
-                  Box,
-                  {
-                    flex: "none",
-                    rounded: "xs",
-                    size: "10",
-                    style: { backgroundColor: item.color }
-                  }
-                ),
-                /* @__PURE__ */ jsx(Box, { color: "fg.tertiary", children: item.name ?? String(item.dataKey) })
-              ] }),
-              /* @__PURE__ */ jsx(Box, { ...value(), children: applyFormatter(item.value, "Number") })
-            ]
-          },
-          i
-        )) })
-      ]
-    }
-  );
+function ProteusChartTooltipContent({ active, coordinate, label, payload }) {
+	const containerRef = useProteusChartContainer();
+	const ref = useRef(null);
+	if (!active || !payload?.length) return null;
+	const wrapperRect = containerRef?.current?.querySelector(".recharts-wrapper")?.getBoundingClientRect();
+	const tooltipRect = ref.current?.getBoundingClientRect();
+	const cx = coordinate?.x ?? 0;
+	const cy = coordinate?.y ?? 0;
+	const th = tooltipRect?.height ?? 0;
+	const translateX = cx + OFFSET;
+	const translateY = cy - th / 2;
+	return /* @__PURE__ */ jsxs(Box, {
+		ref,
+		style: {
+			left: 0,
+			top: 0,
+			transform: `translate(${(wrapperRect?.left ?? 0) + translateX + window.scrollX}px, ${(wrapperRect?.top ?? 0) + translateY + window.scrollY}px)`
+		},
+		...tooltip(),
+		children: [label && /* @__PURE__ */ jsx(Box, {
+			fontWeight: "500",
+			children: label
+		}), /* @__PURE__ */ jsx("div", { children: payload.filter((item) => item.type !== "none").map((item, i) => /* @__PURE__ */ jsxs(Box, {
+			alignItems: "center",
+			display: "flex",
+			gap: "8",
+			justifyContent: "space-between",
+			children: [/* @__PURE__ */ jsxs(Group, {
+				gap: "8",
+				children: [/* @__PURE__ */ jsx(Box, {
+					flex: "none",
+					rounded: "xs",
+					size: "10",
+					style: { backgroundColor: item.color }
+				}), /* @__PURE__ */ jsx(Box, {
+					color: "fg.tertiary",
+					children: item.name ?? String(item.dataKey)
+				})]
+			}), /* @__PURE__ */ jsx(Box, {
+				...value(),
+				children: applyFormatter(item.value, "Number")
+			})]
+		}, i)) })]
+	});
 }
-
+//#endregion
 export { ProteusChartTooltipContent };