@gravity-platform/unoverse-react 0.0.2 → 0.0.3

package/dist/index.cjs

@@ -6889,6 +6889,7 @@ var require_dist = __commonJS({
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  IsolatedRoot: () => IsolatedRoot,
   StreamedUnoverseComponent: () => StreamedUnoverseComponent,
   StreamedUnoverseTemplate: () => StreamedUnoverseTemplate,
   UnoverseComponent: () => UnoverseComponent,
@@ -6903,7 +6904,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/UnoverseComponent.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/primitives.tsx
 var import_react = require("react");
@@ -7210,14 +7211,43 @@ function useUnoverseTheme(client, name = "light") {
   return theme;
 }
 
-// src/UnoverseComponent.tsx
+// src/isolate.tsx
+var import_react3 = require("react");
+var import_react_dom = require("react-dom");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function UnoverseComponent({ client, uri, data, onAction, theme }) {
-  const [def, setDef] = (0, import_react3.useState)(null);
-  const [error2, setError] = (0, import_react3.useState)(null);
+var RESET_CSS = `
+  :host { all: initial; display: contents; }
+  .uno-isolate-root { box-sizing: border-box; }
+  .uno-isolate-root *, .uno-isolate-root *::before, .uno-isolate-root *::after { box-sizing: border-box; }
+  .uno-isolate-root button, .uno-isolate-root input, .uno-isolate-root textarea, .uno-isolate-root select {
+    font: inherit; letter-spacing: inherit; color: inherit; margin: 0;
+  }
+`;
+function IsolatedRoot({ children }) {
+  const hostRef = (0, import_react3.useRef)(null);
+  const [shadow, setShadow] = (0, import_react3.useState)(null);
+  (0, import_react3.useEffect)(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    setShadow(host.shadowRoot ?? host.attachShadow({ mode: "open" }));
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: hostRef, style: { display: "contents" }, children: shadow && (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: RESET_CSS }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "uno-isolate-root", children })
+    ] }),
+    shadow
+  ) });
+}
+
+// src/UnoverseComponent.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function UnoverseComponent({ client, uri, data, onAction, theme, isolate = true }) {
+  const [def, setDef] = (0, import_react4.useState)(null);
+  const [error2, setError] = (0, import_react4.useState)(null);
   const fetched = useUnoverseTheme(client, "light");
   const activeTheme = theme ?? fetched;
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     let alive = true;
     setDef(null);
     setError(null);
@@ -7226,11 +7256,11 @@ function UnoverseComponent({ client, uri, data, onAction, theme }) {
       alive = false;
     };
   }, [client, uri]);
-  if (error2) return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+  if (error2) return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
     "Unoverse error: ",
     error2
   ] });
-  if (!def || !activeTheme) return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+  if (!def || !activeTheme) return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
     "Loading ",
     uri,
     "\u2026"
@@ -7239,25 +7269,26 @@ function UnoverseComponent({ client, uri, data, onAction, theme }) {
     Object.entries(def.props ?? {}).map(([k, v]) => [k, v?.default])
   );
   const merged = { ...propDefaults2, ...data ?? {} };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: keyframesCss(activeTheme) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "contents", ...activeTheme.root }, children: renderNode(def.root, merged, onAction, activeTheme) })
+  const body = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: keyframesCss(activeTheme) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "contents", ...activeTheme.root }, children: renderNode(def.root, merged, onAction, activeTheme) })
   ] });
+  return isolate ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IsolatedRoot, { children: body }) : body;
 }
 
 // src/streamed.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_unoverse_core2 = require("@gravity-platform/unoverse-core");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function useUnoverseInstance(store, chatId, nodeId) {
-  const subscribe = (0, import_react4.useCallback)((cb) => store.subscribe(cb), [store]);
-  const getVersion = (0, import_react4.useCallback)(() => store.getVersion(), [store]);
-  (0, import_react4.useSyncExternalStore)(subscribe, getVersion);
+  const subscribe = (0, import_react5.useCallback)((cb) => store.subscribe(cb), [store]);
+  const getVersion = (0, import_react5.useCallback)(() => store.getVersion(), [store]);
+  (0, import_react5.useSyncExternalStore)(subscribe, getVersion);
   return { type: store.getType(chatId, nodeId), data: store.get(chatId, nodeId) };
 }
 function StreamedUnoverseComponent({ client, store, chatId, nodeId, onAction, theme, extraData }) {
   const { type, data } = useUnoverseInstance(store, chatId, nodeId);
-  const handleAction = (0, import_react4.useMemo)(
+  const handleAction = (0, import_react5.useMemo)(
     () => (action, scope) => (0, import_unoverse_core2.dispatchAction)(action, scope, {
       store,
       chatId,
@@ -7266,14 +7297,14 @@ function StreamedUnoverseComponent({ client, store, chatId, nodeId, onAction, th
     }),
     [store, chatId, nodeId, onAction]
   );
-  if (!type) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: "waiting for COMPONENT_INIT\u2026" });
+  if (!type) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: "waiting for COMPONENT_INIT\u2026" });
   const merged = extraData ? { ...data, ...extraData } : data;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UnoverseComponent, { client, uri: `unoverse://components/${type}`, data: merged, onAction: handleAction, theme });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(UnoverseComponent, { client, uri: `unoverse://components/${type}`, data: merged, onAction: handleAction, theme });
 }
 
 // src/template.tsx
-var import_react5 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function propDefaults(props) {
   const out = {};
   for (const [k, v] of Object.entries(props ?? {})) {
@@ -7304,16 +7335,16 @@ function selectPointers(store, node) {
   if (sel.limit != null) pointers = pointers.slice(0, sel.limit);
   return pointers;
 }
-function StreamedUnoverseTemplate({ client, store, uri, onAction, theme: themeProp, props }) {
-  const [def, setDef] = (0, import_react5.useState)(null);
-  const [error2, setError] = (0, import_react5.useState)(null);
+function StreamedUnoverseTemplate({ client, store, uri, onAction, theme: themeProp, props, isolate = true }) {
+  const [def, setDef] = (0, import_react6.useState)(null);
+  const [error2, setError] = (0, import_react6.useState)(null);
   const fetched = useUnoverseTheme(client, "light");
   const theme = themeProp ?? fetched;
-  (0, import_react5.useSyncExternalStore)(
+  (0, import_react6.useSyncExternalStore)(
     (cb) => store.subscribe(cb),
     () => store.getVersion()
   );
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     let alive = true;
     setDef(null);
     setError(null);
@@ -7322,18 +7353,18 @@ function StreamedUnoverseTemplate({ client, store, uri, onAction, theme: themePr
       alive = false;
     };
   }, [client, uri]);
-  if (error2) return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+  if (error2) return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
     "Unoverse error: ",
     error2
   ] });
-  if (!def || !theme) return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+  if (!def || !theme) return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
     "Loading ",
     uri,
     "\u2026"
   ] });
   const leaf = (pointer, extraData) => {
     const { chatId, nodeId } = store.split(pointer);
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StreamedUnoverseComponent, { client, store, chatId, nodeId, onAction, theme, extraData }, pointer);
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StreamedUnoverseComponent, { client, store, chatId, nodeId, onAction, theme, extraData }, pointer);
   };
   const resolveSlot = (node, key) => {
     const pointers = selectPointers(store, node);
@@ -7343,7 +7374,7 @@ function StreamedUnoverseTemplate({ client, store, uri, onAction, theme: themePr
     return pointers.map((p) => leaf(p));
   };
   const resolveTimeline = (node, key) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styleToCss(node.style, theme), children: store.getTimeline().map((turn) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: styleToCss(node.style, theme), children: store.getTimeline().map((turn) => {
       const sub = turn.role === "user" ? node.user : node.assistant;
       if (!sub) return null;
       const turnSlot = (slotNode, k) => {
@@ -7382,14 +7413,15 @@ function StreamedUnoverseTemplate({ client, store, uri, onAction, theme: themePr
     // button submits it. Lives in the store (shared state), not locally in Input.
     draft: store.getDraft()
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: keyframesCss(theme) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "contents", ...theme.root }, children: renderNode(def.root, rootData, onAction, theme, void 0, resolve) })
+  const body = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: keyframesCss(theme) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "contents", ...theme.root }, children: renderNode(def.root, rootData, onAction, theme, void 0, resolve) })
   ] });
+  return isolate ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IsolatedRoot, { children: body }) : body;
 }
 
 // src/connection.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_unoverse_core3 = require("@gravity-platform/unoverse-core");
 
 // ../node_modules/zod/v4/core/core.js
@@ -17614,11 +17646,11 @@ function useUnoverseConnection(config2, session, store, options = {}) {
   const { apiUrl, streamUrl, getAccessToken } = config2;
   const { workflowId, targetTriggerNode, userId, conversationId } = session;
   const chatId = session.chatId ?? conversationId;
-  const [isConnected, setIsConnected] = (0, import_react6.useState)(false);
-  const [isReady, setIsReady] = (0, import_react6.useState)(false);
-  const clientRef = (0, import_react6.useRef)(null);
-  const seenRef = (0, import_react6.useRef)(/* @__PURE__ */ new Set());
-  (0, import_react6.useEffect)(() => {
+  const [isConnected, setIsConnected] = (0, import_react7.useState)(false);
+  const [isReady, setIsReady] = (0, import_react7.useState)(false);
+  const clientRef = (0, import_react7.useRef)(null);
+  const seenRef = (0, import_react7.useRef)(/* @__PURE__ */ new Set());
+  (0, import_react7.useEffect)(() => {
     if (!enabled) return;
     if (!workflowId || !userId || !conversationId) {
       console.warn("[unoverse] connection missing workflowId/userId/conversationId");
@@ -17673,7 +17705,7 @@ function useUnoverseConnection(config2, session, store, options = {}) {
       clientRef.current = null;
     };
   }, [enabled, apiUrl, streamUrl, workflowId, targetTriggerNode, userId, conversationId, chatId, getAccessToken, store]);
-  const trigger = (0, import_react6.useCallback)(
+  const trigger = (0, import_react7.useCallback)(
     (input) => {
       (async () => {
         try {
@@ -17696,7 +17728,7 @@ function useUnoverseConnection(config2, session, store, options = {}) {
     },
     [apiUrl, workflowId, targetTriggerNode, userId, conversationId, chatId, getAccessToken]
   );
-  const sendMessage = (0, import_react6.useCallback)(
+  const sendMessage = (0, import_react7.useCallback)(
     (text) => {
       const message = text.trim();
       if (!message) return;
@@ -17705,13 +17737,13 @@ function useUnoverseConnection(config2, session, store, options = {}) {
     },
     [chatId, store, trigger]
   );
-  const sendAction = (0, import_react6.useCallback)(
+  const sendAction = (0, import_react7.useCallback)(
     (action, data) => {
       void clientRef.current?.callTool({ name: "user_action", arguments: { action, data, userId, conversationId, chatId } }).catch((e) => console.error("[unoverse] user_action failed", e));
     },
     [userId, conversationId, chatId]
   );
-  const activeTemplate = (0, import_react6.useSyncExternalStore)(
+  const activeTemplate = (0, import_react7.useSyncExternalStore)(
     (cb) => store.subscribe(cb),
     () => store.getActiveTemplate().name
   );
@@ -17719,6 +17751,7 @@ function useUnoverseConnection(config2, session, store, options = {}) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  IsolatedRoot,
   StreamedUnoverseComponent,
   StreamedUnoverseTemplate,
   UnoverseComponent,